:root { 
  /* 
  This section defines reusable design variables.
  These variables store the main colors, shadows, and visual styles
  used across the letters learning page.
  Using variables makes the design easier to maintain and update.
  */
  --bg-top: #dff4ff;
  --bg-bottom: #c8ebf8;
  --panel: rgba(255, 255, 255, 0.72);
  --blue: #4f92ff;
  --blue-dark: #2f70d9;
  --pink: #ff5ea8;
  --yellow: #ffca44;
  --green: #33c86f;
  --orange: #f59e0b;
  --text: #23415f;
  --shadow: 0 18px 40px rgba(42, 91, 144, 0.18);
}

* {
  /* 
  Applies box sizing to all elements.
  This makes width and height calculations more predictable
  because padding and border are included inside the set size.
  */
  box-sizing: border-box;
}

body {
  /* 
  Styles the whole page background and base text appearance.
  */
  margin: 0;
  /* 
  Removes default browser spacing around the page.
  */

  min-height: 100vh;
  /* 
  Ensures the page fills the full height of the screen.
  */

  font-family: Arial, Helvetica, sans-serif;
  /* 
  Sets a clean and readable font for the whole page.
  */

  color: var(--text);
  /* 
  Applies the main text color using the variable defined above.
  */

  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  /* 
  Creates a soft vertical gradient background.
  This gives the page a bright, child friendly appearance.
  */
}

#confettiCanvas {
  /* 
  Styles the invisible canvas used for confetti celebration effects.
  This appears when the learner completes the activity.
  */
  position: fixed;
  inset: 0;
  /* 
  Makes the canvas cover the full screen.
  */

  width: 100%;
  height: 100%;
  /* 
  Ensures the celebration animation fills the page.
  */

  pointer-events: none;
  /* 
  Prevents the canvas from blocking user clicks.
  */

  z-index: 20;
  /* 
  Places the confetti layer above normal content.
  */
}

.page-shell {
  /* 
  Main page wrapper that centers the content on the screen.
  */
  min-height: 100vh;
  display: grid;
  place-items: center;
  /* 
  Centers the main app card both vertically and horizontally.
  */

  padding: 28px;
  /* 
  Adds space around the content so it does not touch screen edges.
  */
}

.app-card {
  /* 
  Styles the main content card that holds the alphabet activity.
  */
  width: min(980px, 100%);
  /* 
  Makes the card responsive while limiting its maximum width.
  */

  background: var(--panel);
  /* 
  Gives the card a semi transparent white background.
  */

  border-radius: 32px;
  /* 
  Adds rounded corners for a softer, child friendly design.
  */

  box-shadow: var(--shadow);
  /* 
  Gives the card depth and makes it stand out from the background.
  */

  padding: 28px;
  /* 
  Adds spacing inside the card around all content.
  */

  backdrop-filter: blur(8px);
  /* 
  Creates a glass like blur effect behind the card.
  This contributes to the modern playful design.
  */
}

.top-banner {
  /* 
  Styles the top section containing the page title and back button.
  */
  display: flex;
  justify-content: space-between;
  /* 
  Places the title section on one side and the menu link on the other.
  */

  gap: 20px;
  align-items: start;
  margin-bottom: 22px;
  /* 
  Adds spacing below the banner before the next section.
  */
}

.eyebrow {
  /* 
  Styles the small label above the main heading.
  Usually used for branding or section naming.
  */
  margin: 0 0 8px;
  color: var(--blue-dark);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

h1 {
  /* 
  Styles the main page title.
  */
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  /* 
  Makes the title responsive.
  It grows or shrinks depending on screen size.
  */

  color: var(--blue-dark);
}

.subtitle {
  /* 
  Styles the supporting instruction text under the main title.
  */
  margin: 10px 0 0;
  font-size: 1.05rem;
  max-width: 620px;
  /* 
  Limits line width so the subtitle remains readable.
  */
}

.menu-link {
  /* 
  Styles the Back to Menu link as a pill shaped button.
  */
  align-self: center;
  text-decoration: none;
  background: white;
  color: var(--blue-dark);
  font-weight: 700;
  padding: 14px 18px;
  border-radius: 999px;
  /* 
  Makes the link fully rounded, like a soft button.
  */

  box-shadow: 0 10px 24px rgba(61, 129, 235, 0.14);
}

.status-row {
  /* 
  Styles the row containing the progress bar and Auto Play toggle.
  */
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  /* 
  Allows the items to move to the next line on smaller screens.
  */

  margin-bottom: 22px;
}

.progress-wrap {
  /* 
  Container for the progress label and progress bar.
  */
  flex: 1 1 420px;
  /* 
  Allows the progress area to stretch while staying responsive.
  */
}

.progress-label {
  /* 
  Styles the progress text, for example Letter 1 of 26.
  */
  display: inline-block;
  font-weight: 700;
  margin-bottom: 10px;
}

.progress-bar {
  /* 
  Styles the background track of the progress bar.
  */
  height: 16px;
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  overflow: hidden;
  /* 
  Keeps the fill inside the rounded shape.
  */
}

.progress-fill {
  /* 
  Styles the colored fill inside the progress bar.
  This visually shows how far the learner has progressed.
  */
  height: 100%;
  width: 3.85%;
  /* 
  Initial width corresponds to the first letter out of 26.
  This value changes dynamically through JavaScript.
  */

  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--yellow));
  transition: width 0.35s ease;
  /* 
  Smoothly animates progress changes.
  */
}

.autoplay-toggle {
  /* 
  Styles the Auto Play control box.
  */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(61, 129, 235, 0.12);
}

.autoplay-toggle input {
  /* 
  Styles the checkbox used to turn Auto Play on or off.
  */
  width: 20px;
  height: 20px;
  accent-color: var(--green);
  /* 
  Gives the checkbox a green accent color to match the app theme.
  */
}

.flashcard-area {
  /* 
  Main area containing the flashcard.
  */
  display: grid;
  place-items: center;
  padding: 12px 0 24px;
}

.flip-card {
  /* 
  Outer container of the flip card.
  Controls size, 3D perspective, and interactivity.
  */
  width: min(520px, 100%);
  height: 420px;
  perspective: 1200px;
  /* 
  Creates the 3D visual depth needed for the flip animation.
  */

  cursor: pointer;
  outline: none;
}

.flip-card:focus-visible {
  /* 
  Shows a visible highlight when the card is focused using keyboard navigation.
  This improves accessibility.
  */
  box-shadow: 0 0 0 6px rgba(79, 146, 255, 0.18);
  border-radius: 28px;
}

.flip-card-inner {
  /* 
  Inner card container that actually rotates during the flip.
  */
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.75s ease;
  transform-style: preserve-3d;
  /* 
  Keeps both front and back faces in 3D space.
  */
}

.flip-card.flipped .flip-card-inner {
  /* 
  When the card gets the "flipped" class,
  the inner card rotates to show the back side.
  */
  transform: rotateY(180deg);
}

.card-face {
  /* 
  Shared styling for both the front and back of the flashcard.
  */
  position: absolute;
  inset: 0;
  border-radius: 28px;
  backface-visibility: hidden;
  /* 
  Hides the reverse side of each face when rotated.
  */

  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.card-front {
  /* 
  Front face styling.
  This is the side showing the letter first.
  */
  background: linear-gradient(180deg, #59c6ff, #4f92ff);
  color: white;
}

.card-back {
  /* 
  Back face styling.
  This is the side showing the animal and phrase.
  */
  background: linear-gradient(180deg, #5fe0aa, #33c86f);
  color: white;
  transform: rotateY(180deg);
  /* 
  Rotates the back face so it appears correctly when flipped.
  */
}

.face-title {
  /* 
  Small heading used on both card sides.
  */
  margin: 0 0 18px;
  font-size: 1rem;
  font-weight: 700;
  opacity: 0.92;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.letter-display {
  /* 
  Styles the very large alphabet letter on the front of the card.
  */
  font-size: clamp(7rem, 18vw, 11rem);
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 8px 22px rgba(0,0,0,0.18);
  /* 
  Adds depth so the letter stands out clearly.
  */
}

.helper-text {
  /* 
  Styles the instruction text shown on the front card.
  */
  margin: 18px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.animal-emoji {
  /* 
  Styles the large animal emoji shown on the back of the card.
  */
  font-size: clamp(4rem, 12vw, 6rem);
  line-height: 1;
}

.animal-name {
  /* 
  Styles the animal name text on the back of the card.
  */
  margin: 18px 0 8px;
  font-size: clamp(2rem, 6vw, 3rem);
}

.animal-phrase {
  /* 
  Styles the phrase such as A for Ant.
  */
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.controls {
  /* 
  Styles the button row under the flashcard.
  */
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  /* 
  Allows buttons to wrap on smaller screens.
  */
}

.pill-button {
  /* 
  Shared styling for all rounded control buttons.
  */
  border: none;
  border-radius: 999px;
  padding: 14px 26px;
  color: white;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.pill-button:hover,
.pill-button:focus-visible {
  /* 
  Hover and focus effect for buttons.
  Makes buttons feel interactive and accessible.
  */
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.prev { background: var(--orange); }
/* Styles the Previous button with orange. */

.random { background: var(--pink); }
/* Styles the Random button with pink. */

.next { background: var(--green); }
/* Styles the Next button with green. */

.play-again { background: var(--blue); }
/* Styles the Play Again button with blue. */

.footer-note {
  /* 
  Optional footer note style if used in the page.
  */
  text-align: center;
  margin-top: 16px;
  font-weight: 700;
  color: var(--blue-dark);
}

.overlay {
  /* 
  Full screen darkened background used when showing the completion modal.
  */
  position: fixed;
  inset: 0;
  background: rgba(17, 42, 66, 0.42);
  display: grid;
  place-items: center;
  z-index: 30;
  padding: 20px;
}

.hidden {
  /* 
  Utility class to hide elements such as the completion screen
  until they need to be shown.
  */
  display: none;
}

.completion-card {
  /* 
  Styles the pop up card shown after finishing all letters.
  */
  width: min(420px, 100%);
  background: white;
  border-radius: 28px;
  padding: 32px;
  text-align: center;
  box-shadow: var(--shadow);
}

.completion-emoji {
  /* 
  Styles the celebration emoji shown in the completion message.
  */
  font-size: 4rem;
  margin-bottom: 14px;
}

.completion-card h2 {
  /* 
  Styles the completion title text.
  */
  margin: 0 0 10px;
  font-size: 2rem;
  color: var(--blue-dark);
}

.completion-card p {
  /* 
  Styles the descriptive text inside the completion card.
  */
  margin: 0 0 22px;
  font-size: 1.1rem;
}

@media (max-width: 760px) {
  /* 
  Responsive adjustments for tablets and smaller screens.
  */
  .app-card {
    padding: 22px;
  }

  .top-banner {
    flex-direction: column;
    align-items: stretch;
    /* 
    Stacks banner elements vertically for smaller screens.
    */
  }

  .menu-link {
    align-self: flex-start;
    /* 
    Keeps the Back to Menu button aligned neatly on smaller screens.
    */
  }

  .flip-card {
    height: 360px;
    /* 
    Slightly reduces card height to fit smaller devices.
    */
  }
}

@media (max-width: 520px) {
  /* 
  Additional responsive adjustments for mobile phones.
  */
  .page-shell {
    padding: 14px;
  }

  .app-card {
    border-radius: 24px;
    padding: 18px;
  }

  .flip-card {
    height: 320px;
    /* 
    Makes the flashcard smaller so it fits narrow screens.
    */
  }

  .helper-text,
  .animal-phrase {
    font-size: 1.05rem;
    /* 
    Reduces text size slightly to keep the layout balanced on phones.
    */
  }
}