:root {
  /* 
  This section defines reusable design variables.
  These variables store the main colors, text color, panel color,
  and shadow effects used throughout the page.
  This makes the design easier to maintain and update consistently.
  */
  --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 the same box sizing rule to all elements.
  This makes layout measurements easier because padding and border
  are included inside the element’s total size.
  */
  box-sizing: border-box;
}

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

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

  font-family: Arial, Helvetica, sans-serif;
  /* Sets the base font used across the 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,
  giving the page a clean and child friendly look.
  */
}

#confettiCanvas {
  /* 
  Styles the full screen canvas used for the confetti effect.
  This is shown when the learner completes the activity.
  */
  position: fixed;
  inset: 0;
  /* Makes the canvas cover the full screen. */

  width: 100%;
  height: 100%;
  /* Ensures the confetti animation spans the entire viewport. */

  pointer-events: none;
  /* 
  Prevents the canvas from blocking mouse clicks or touch interaction.
  */

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

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

  padding: 28px;
  /* Adds breathing space around the main content. */
}

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

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

  border-radius: 32px;
  /* Adds soft rounded corners. */

  box-shadow: var(--shadow);
  /* Gives the card depth so it stands out from the background. */

  padding: 28px;
  /* Adds internal spacing inside the panel. */

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

.top-banner {
  /* 
  Styles the top section containing the title and menu button.
  */
  display: flex;
  justify-content: space-between;
  /* Places the title area and back button on opposite sides. */

  gap: 20px;
  align-items: start;
  margin-bottom: 22px;
}

.eyebrow {
  /* 
  Styles the small label above the main heading, usually used for branding.
  */
  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 so it scales based on screen size.
  */

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

.subtitle {
  /* Styles the subtitle or instruction text below the title. */
  margin: 10px 0 0;
  font-size: 1.05rem;
  max-width: 620px;
  /* Limits width so the text 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;
  /* Fully rounded button style. */

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

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

  margin-bottom: 22px;
}

.progress-wrap {
  /* Container for the progress label and progress bar. */
  flex: 1 1 420px;
}

.progress-label {
  /* Styles the progress text, such as Number 1 of 10. */
  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 neatly clipped inside the rounded bar. */
}

.progress-fill {
  /* 
  Styles the colored fill that grows as the learner progresses.
  */
  height: 100%;
  width: 10%;
  /* 
  Initial width is set to 10 percent,
  representing the first step in a 10 item sequence.
  This value is updated dynamically by 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 option container.
  */
  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 for Auto Play. */
  width: 20px;
  height: 20px;
  accent-color: var(--green);
  /* Gives the checkbox a green accent color. */
}

.flashcard-area {
  /* 
  Main area where the interactive number flashcard is displayed.
  */
  display: grid;
  place-items: center;
  padding: 12px 0 24px;
}

.flip-card {
  /* 
  Outer container for the flip card.
  Controls size, 3D perspective, and click interaction.
  */
  width: min(600px, 100%);
  height: 440px;
  perspective: 1200px;
  /* Creates the 3D effect needed for the flip animation. */

  cursor: pointer;
  outline: none;
}

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

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

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

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

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

.card-front {
  /* 
  Styles the front side of the number card.
  This is the side showing the large number.
  */
  background: linear-gradient(180deg, #ffd167, #f59e0b);
  color: white;
}

.card-back {
  /* 
  Styles the back side of the number card.
  This is the side showing fruits and the number word.
  */
  background: linear-gradient(180deg, #fff0bb, #ffd979);
  color: #8a4d12;
  transform: rotateY(180deg);
  /* Rotates the back side so it appears correctly when flipped. */
}

.face-title {
  /* Styles the small title on each side of the card. */
  margin: 0 0 18px;
  font-size: 1rem;
  font-weight: 700;
  opacity: 0.92;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.number-display {
  /* 
  Styles the very large number shown 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);
  /* Makes the number visually prominent and easier to notice. */
}

.helper-text {
  /* Styles the small instructional text under the number. */
  margin: 18px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.fruit-name-badge {
  /* 
  Styles the pill shaped label showing the fruit name.
  */
  background: #ff5ea8;
  color: white;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 16px;
}

.fruit-grid {
  /* 
  Container for the fruit icons used for counting.
  Arranges fruits into a neat grid layout.
  */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(60px, 1fr));
  /* 
  Creates five columns, allowing up to five fruit icons per row.
  */

  gap: 12px;
  justify-items: center;
  align-items: center;
  min-height: 180px;
  /* 
  Reserves enough space so the layout stays stable
  even when different numbers of fruits appear.
  */

  margin: 8px 0 16px;
}

.fruit-item {
  /* 
  Styles each individual fruit icon before it is animated in.
  */
  font-size: clamp(2rem, 4vw, 3rem);
  opacity: 0;
  transform: scale(0.35);
  /* 
  Starts smaller and invisible so it can animate into view.
  */
}

.fruit-item.show {
  /* 
  Applied when a fruit becomes visible.
  Creates the animated counting effect.
  */
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.number-word {
  /* 
  Styles the word form of the number, such as One or Two.
  */
  margin: 0;
  font-size: clamp(2rem, 6vw, 3rem);
  color: #d26c17;
}

.count-line {
  /* 
  Styles the phrase combining the number and fruit count,
  such as 3 Grapes.
  */
  margin: 8px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #8a5a2b;
}

.controls {
  /* Styles the row of navigation buttons below the flashcard. */
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pill-button {
  /* 
  Shared style for all rounded action 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 to make buttons feel interactive.
  */
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.pill-button.prev {
  /* Styles the Previous button. */
  background: #50bfc5;
}

.pill-button.random {
  /* Styles the Random button. */
  background: #ff5ea8;
}

.pill-button.next,
.pill-button.play-again {
  /* Styles both the Next and Play Again buttons. */
  background: #33c86f;
}

.footer-note {
  /* 
  Optional footer note style if used in the page.
  */
  text-align: center;
  margin-top: 18px;
  font-weight: 700;
  color: #4f6d8a;
}

.overlay {
  /* 
  Full screen dark overlay shown when the completion modal appears.
  */
  position: fixed;
  inset: 0;
  background: rgba(34, 61, 95, 0.4);
  display: grid;
  place-items: center;
  z-index: 30;
  padding: 24px;
}

.hidden {
  /* Utility class used to hide elements until needed. */
  display: none !important;
}

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

.completion-emoji {
  /* Styles the celebration emoji in the completion card. */
  font-size: 3rem;
  margin-bottom: 10px;
}

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

.completion-card p {
  /* Styles the supporting text inside the completion card. */
  margin: 0 0 20px;
  color: #4f6d8a;
  font-weight: 700;
}

@media (max-width: 760px) {
  /* 
  Responsive rules for tablets and smaller screens.
  */
  .top-banner {
    flex-direction: column;
    /* Stacks the title and menu button vertically. */
  }

  .menu-link {
    align-self: flex-start;
    /* Aligns the menu button neatly to the left. */
  }

  .flip-card {
    height: 500px;
    /* 
    Increases height slightly so fruit content has enough space
    when the layout becomes narrower.
    */
  }

  .fruit-grid {
    grid-template-columns: repeat(4, minmax(52px, 1fr));
    /* Reduces the fruit grid to four columns for smaller screens. */
  }
}

@media (max-width: 520px) {
  /* 
  Responsive rules for mobile phones.
  */
  .page-shell {
    padding: 16px;
  }

  .app-card {
    padding: 20px;
  }

  .fruit-grid {
    grid-template-columns: repeat(3, minmax(52px, 1fr));
    /* 
    Further reduces the fruit grid to three columns
    so the fruit icons remain readable on narrow screens.
    */
  }
}