:root {
  /* 
  This section defines reusable design variables.
  These variables store the main colors, panel style, text color,
  and shadow effect used across the Colors page.
  This helps keep the design consistent and easier to 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;
  --text: #23415f;
  --shadow: 0 18px 40px rgba(42, 91, 144, 0.18);
}

* {
  /* 
  Applies the same box sizing rule to all elements.
  This makes layout sizing easier because padding and border
  are included inside the element 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 screen height. */

  font-family: Arial, Helvetica, sans-serif;
  /* Sets the base font used across the page. */

  color: var(--text);
  /* Applies the main text color defined in the variables. */

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

#confettiCanvas {
  /* 
  Styles the full screen canvas used for the confetti celebration effect.
  This appears when the learner finishes all colors.
  */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Prevents the animation layer from blocking clicks. */

  z-index: 20;
  /* Places the confetti layer above the 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 card vertically and horizontally. */

  padding: 28px;
  /* Adds spacing around the content. */
}

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

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

  border-radius: 32px;
  /* Adds rounded corners for a softer visual style. */

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

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

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

.top-banner {
  /* 
  Styles the top section containing the title and menu link.
  */
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  margin-bottom: 22px;
}

.eyebrow {
  /* 
  Styles the small label above the main heading.
  */
  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 depending on screen size. */

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

.subtitle {
  /* Styles the supporting instruction text below the title. */
  margin: 10px 0 0;
  font-size: 1.05rem;
  max-width: 680px;
  /* Keeps the text readable by limiting its width. */
}

.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;
  /* Creates a fully rounded 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 control.
  */
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  /* Allows the layout to wrap 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 Color 1 of 12. */
  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;
}

.progress-fill {
  /* 
  Styles the colored fill that visually shows progress.
  */
  height: 100%;
  width: 8.33%;
  /* 
  Initial width represents the first step in a 12 item sequence.
  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 updates. */
}

.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 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 color flashcard is displayed.
  */
  display: grid;
  place-items: center;
  padding: 12px 0 24px;
}

.flip-card {
  /* 
  Outer container for the flip card.
  Controls size, interactivity, and 3D perspective.
  */
  width: min(560px, 100%);
  height: 420px;
  perspective: 1200px;
  /* Creates the 3D effect for flipping. */

  cursor: pointer;
  outline: none;
}

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

.flip-card-inner {
  /* 
  Inner card container that rotates during the flip animation.
  */
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.75s ease;
  transform-style: preserve-3d;
}

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

.card-face {
  /* 
  Shared styling for the front and back of the flashcard.
  */
  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 card.
  This side shows the color swatch and color name.
  */
  background: linear-gradient(180deg, #59c6ff, #4f92ff);
  color: white;
}

.card-back {
  /* 
  Styles the back side of the card.
  This side shows the matching object for the color.
  */
  background: linear-gradient(180deg, #5fe0aa, #33c86f);
  color: white;
  transform: rotateY(180deg);
}

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

.color-swatch {
  /* 
  Styles the large color sample shown on the front of the card.
  This is the main visual element for teaching the color.
  */
  width: 220px;
  height: 180px;
  border-radius: 28px;
  /* Gives the swatch soft rounded corners. */

  border: 8px solid rgba(255,255,255,0.92);
  /* Adds a white border so the color swatch stands out clearly. */

  box-shadow: 0 14px 24px rgba(0,0,0,0.16);
  /* Gives the swatch depth. */

  margin-bottom: 18px;
}

.color-name {
  /* 
  Styles the name of the color, such as Red or Blue.
  */
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  text-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

.helper-text {
  /* Styles the instruction text telling the learner to flip the card. */
  margin: 18px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.object-emoji {
  /* 
  Styles the large emoji shown on the back of the card.
  This represents a real world object that matches the color.
  */
  font-size: clamp(4.5rem, 12vw, 6rem);
  line-height: 1;
}

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

.object-phrase {
  /* 
  Styles the phrase that connects the color to the object,
  such as Red like an Apple.
  */
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.controls {
  /* Styles the row of action 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 {
  /* Adds hover and focus feedback to the buttons. */
  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 the Next and Play Again buttons. */
  background: #33c86f;
}

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

.overlay {
  /* 
  Full screen darkened background shown when the completion pop up 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;
}

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

.completion-emoji {
  /* Styles the celebration emoji inside the completion pop up. */
  font-size: 4rem;
}

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

.completion-card p {
  /* Styles the supporting completion message. */
  margin: 0 0 18px;
  font-size: 1.1rem;
}

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

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

  .flip-card {
    height: 400px;
    /* Reduces the flashcard height for smaller screens. */
  }

  .color-swatch {
    width: 180px;
    height: 150px;
    /* Makes the color swatch smaller on narrow screens. */
  }
}