@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&family=Dongle:wght@300;400;700&display=swap');

:root {
  --font-heading: 'Gaegu', cursive;
  --font-body: 'Dongle', cursive;
  
  --color-bg-page: #E0F7FA; /* Light Cyan */
  --color-bg-container: #FFFDE7; /* Cream */
  --color-bg-interactive: #FFECB3; /* Light Amber for speech bubbles etc */
  
  --color-text-main: #37474F; /* Bluish Grey */
  --color-text-heading-scene: #D9534F; /* Soft Red for scene titles */
  --color-text-highlight: #7E57C2; /* Deep Purple for accents */
  --color-page-indicator: #6A1B9A; /* Purple for page indicator */


  --color-accent-primary: #66BB6A; /* Green */
  --color-accent-secondary: #FFA726; /* Orange */
  --color-accent-interactive: #29B6F6; /* Light Blue for footer, selector border */
  
  --border-cute: #FF8A80; /* Light Red for cute borders */
  --border-image: #FFCC80; /* Light Orange for image border */

  --text-size-base: 2rem; /* Increased Dongle base size */
  --text-size-heading-scene: 2.8rem; /* For h2 inside story */
  --line-height-story: 1.7;
}

::selection {
  background-color: var(--color-accent-secondary);
  color: white;
}

a {
  color: var(--color-accent-interactive);
  text-decoration: none;
  font-weight: 700; /* Dongle needs this for links to stand out */
}
a:hover {
  text-decoration: underline;
  color: var(--color-text-highlight);
}


body {
  font-family: var(--font-body);
  font-size: var(--text-size-base);
  font-weight: 400; 
  line-height: var(--line-height-story);
  background-color: var(--color-bg-page);
  color: var(--color-text-main);
  background-image: linear-gradient(to bottom, #E0F7FA, #BCE6FF);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Story container general look */
#storyContainer {
  background-color: var(--color-bg-container);
  border: 5px solid var(--border-cute);
  border-radius: 2rem; /* More rounded */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 0 0 8px var(--color-bg-page); /* Layered shadow effect */
  animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Fun pop-in */
}

@keyframes popIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Page Indicator */
#pageIndicator {
    color: var(--color-page-indicator);
    font-size: 1.8rem; /* Larger text for indicator */
}


/* Headings within story scene */
#sceneContent h2 {
  font-family: var(--font-heading);
  color: var(--color-text-heading-scene);
  font-size: var(--text-size-heading-scene);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.2rem; /* Adjusted margin */
  padding: 0.5rem 0;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}

.scene-image-container {
  position: relative;
  width: 100%;
  max-width: 700px; /* Slightly reduced max-width for better text flow */
  margin: 0 auto 1.5rem auto; /* Adjusted margin */
  border-radius: 1.25rem; /* More rounded corners */
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  border: 4px solid var(--border-image);
  transition: transform 0.3s ease;
}

.scene-image-container:hover {
  transform: scale(1.03) rotate(0.5deg); /* Even more subtle hover */
}

.scene-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; 
}

.story-text {
  font-size: var(--text-size-base);
  line-height: var(--line-height-story);
  color: var(--color-text-main);
  font-weight: 400;
  padding: 0 0.5rem; /* Reduced padding for more natural flow with container padding */
}
.story-text p {
  margin-bottom: 1em; /* Adjusted spacing */
}
.story-text strong, .story-text b {
    font-weight: 700; /* Ensure bold is effective for Dongle */
    color: var(--color-text-highlight);
}

/* Speech bubbles */
.speech-bubble {
  position: relative;
  background-color: var(--color-bg-interactive);
  border: 3px dashed var(--color-accent-primary);
  border-radius: 1.25rem; /* Rounded */
  padding: 1.2rem 1.5rem; /* Adjusted padding */
  margin: 1.2rem 0; /* Adjusted margin */
  box-shadow: 0 3px 8px rgba(0,0,0,0.06);
  font-weight: 700; /* Make bubble text bolder with Dongle */
  color: var(--color-text-main);
  line-height: 1.6; /* Specific line height for bubbles */
}
.speech-bubble .bubble-icon {
    margin-right: 0.5rem;
    font-size: 1.5em; /* Slightly smaller icons */
    vertical-align: -0.25em; /* Fine-tune vertical alignment */
}

/* Moral lessons callout */
.moral-lesson {
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
  color: white;
  border-radius: 1.25rem;
  padding: 1.5rem; /* Adjusted padding */
  margin: 2rem 0; /* Adjusted margin */
  box-shadow: 0 5px 12px rgba(0,0,0,0.1);
  border: 3px solid white;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.moral-lesson .font-bold.text-xl { /* Target title inside moral lesson */
  font-family: var(--font-heading);
  font-size: 2.4rem; /* Adjusted size */
  font-weight: 700;
  color: white;
  margin-bottom: 0.8rem;
}
.moral-lesson p, .moral-lesson li {
  font-size: var(--text-size-base);
  font-weight: 400; /* Regular weight for Dongle */
  line-height: var(--line-height-story); /* Consistent line height */
}
.moral-lesson ul {
    padding-left: 1.5rem; /* Indent list */
    margin-top: 0.5rem;
}
.moral-lesson li {
    margin-bottom: 0.4rem;
}


/* Scene selector custom styling */
#sceneSelector {
  font-family: var(--font-body); /* Consistent font */
  font-weight: 700; /* Bolder for readability */
  min-width: 200px; /* Good width */
  border-color: var(--color-accent-interactive);
  color: var(--color-text-highlight); /* Darker, more readable text */
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.2s ease-in-out;
}
#sceneSelector:focus {
  border-color: var(--color-accent-secondary); /* Orange focus border */
  box-shadow: 0 0 0 3px rgba(255, 167, 38, 0.3); /* Orange focus glow */
}
#sceneSelector option {
    font-weight: 400; /* Regular weight for options */
    padding: 5px; /* Add some padding to options if browser supports */
}


/* Button base styles are handled by Tailwind, but disabled state needs clarity */
button:disabled, #sceneSelector:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    filter: grayscale(50%);
}

/* Cute corner icons styling */
.cute-star-icon, .cute-heart-icon {
    width: 2.2rem; height: 2.2rem; /* Slightly smaller */
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.2));
}
@media (min-width: 768px) { /* Larger on desktop */
    .cute-star-icon, .cute-heart-icon {
        width: 2.8rem; height: 2.8rem;
    }
}

/* Animation for page transitions */
.animate-fadeIn { /* Used on #sceneContent */
  animation: fadeInScene 0.7s ease-in-out;
}
@keyframes fadeInScene {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Ensure animate.css classes work as expected if used directly */
.animate__animated {
    /* Default animate.css duration is 1s, can adjust if needed */
    /* --animate-duration: 0.8s; */
}

/* Custom spin animation (already in previous, ensure it's good) */
@keyframes spinSlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spinSlow 8s linear infinite; /* Slower, more gentle spin */
}


/* Responsive adjustments for mobile */
@media (max-width: 640px) {
  :root {
    --text-size-base: 1.8rem; /* Dongle needs to stay relatively large */
    --text-size-heading-scene: 2.4rem;
  }
  #storyContainer {
    padding: 1rem;
    border-width: 4px;
    border-radius: 1.5rem;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1), 0 0 0 6px var(--color-bg-page);
  }
  #sceneContent h2 {
    margin-bottom: 1rem;
  }
  .scene-image-container {
    margin-bottom: 1rem;
    border-radius: 1rem;
    border-width: 3px;
  }
   .speech-bubble {
        padding: 1rem;
        margin: 1rem 0;
        border-left-width: 4px;
   }
   .moral-lesson {
       padding: 1rem;
       margin: 1.5rem 0;
       border-width: 3px;
   }
   #pageIndicator {
    font-size: 1.6rem;
   }
    .cute-star-icon, .cute-heart-icon {
        width: 1.8rem; height: 1.8rem;
    }
}