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

* {
  /* 
  Applies the same box sizing rule to all elements.
  This makes width and height easier to manage
  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 the browser’s default margin. */

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

  font-family: Arial, Helvetica, sans-serif;
  /* Sets the default font for the page. */

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

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

#confettiCanvas {
  /* 
  Styles the full screen canvas used for confetti celebration effects.
  This appears when the learner completes the quiz.
  */
  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 quiz content on the screen.
  */
  min-height: 100vh;
  display: grid;
  place-items: center;
  /* Centers the main quiz card vertically and horizontally. */

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

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

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

  border-radius: 32px;
  /* Adds rounded corners for a softer and friendlier interface. */

  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 card. */
}

.top-banner {
  /* 
  Styles the top section containing the page 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.
  Usually used for branding or app name.
  */
  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 explanatory text below the main title. */
  margin: 10px 0 0;
  font-size: 1.05rem;
  max-width: 620px;
  /* Limits line 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;
  /* Makes the button fully rounded. */

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

.status-row {
  /* 
  Styles the row containing the progress indicator and score display.
  */
  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 Question 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 inside the progress bar.
  This visually shows how much of the quiz has been completed.
  */
  height: 100%;
  width: 8.33%;
  /* 
  Initial width represents the first step in a 12 question quiz.
  This value is updated dynamically through JavaScript.
  */

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

.score-pill {
  /* 
  Styles the score display box.
  It shows the learner’s current score while answering questions.
  */
  background: white;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(61, 129, 235, 0.12);
}

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

.quiz-card {
  /* 
  Styles the main quiz question card.
  This is the central area where the question and options appear.
  */
  width: min(720px, 100%);
  min-height: 470px;
  border-radius: 28px;
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, #59c6ff, #4f92ff);
  color: white;
  padding: 28px;
  text-align: center;
}

.question-badge {
  /* 
  Styles the small label showing the category of the current question,
  such as Letters, Numbers, Colors, or Shapes.
  */
  display: inline-block;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.18);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.question-visual {
  /* 
  Styles the visual clue shown for the question.
  This may be a letter, number, shape, or other large visual marker.
  */
  min-height: 108px;
  display: grid;
  place-items: center;
  font-size: clamp(3.2rem, 9vw, 6.4rem);
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 8px 22px rgba(0,0,0,0.18);
  margin-bottom: 12px;
}

.question-text {
  /* 
  Styles the actual quiz question text.
  */
  margin: 0 auto 22px;
  max-width: 560px;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  /* Keeps the question large, readable, and responsive. */
}

.options-grid {
  /* 
  Arranges the multiple choice answers in a grid layout.
  */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Creates two answer columns on larger screens. */

  gap: 14px;
}

.option-button {
  /* 
  Shared style for the answer option buttons.
  */
  border: none;
  border-radius: 22px;
  padding: 16px 18px;
  color: var(--blue-dark);
  background: white;
  font-size: 1.06rem;
  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, background 0.18s ease, color 0.18s ease;
}

.option-button:hover,
.option-button:focus-visible {
  /* 
  Adds hover and focus feedback so the options feel interactive.
  */
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.option-button.correct {
  /* 
  Applied to the correct answer after selection.
  Changes the button to green to indicate success.
  */
  background: var(--green);
  color: white;
}

.option-button.wrong {
  /* 
  Applied to a wrong answer after selection.
  Changes the button to red to indicate error.
  */
  background: var(--red);
  color: white;
}

.option-button.locked {
  /* 
  Prevents further clicking after an answer has been chosen.
  This helps preserve the result of the current question.
  */
  pointer-events: none;
}

.feedback-box {
  /* 
  Styles the message area that shows feedback after answering,
  such as Correct or Try Again.
  */
  min-height: 60px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.16);
  font-size: 1.05rem;
  font-weight: 700;
}

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

.pill-button {
  /* 
  Shared style for all rounded action buttons,
  such as Restart Quiz, Next Question, and Play Again.
  */
  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, opacity 0.18s ease;
}

.pill-button:hover,
.pill-button:focus-visible {
  /* Adds hover and focus feedback to the action buttons. */
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.pill-button:disabled {
  /* 
  Styles a disabled button state,
  for example when Next Question should not yet be clicked.
  */
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  filter: none;
}

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

.pill-button.random {
  /* Styles the Restart Quiz button in orange. */
  background: var(--orange);
}

.pill-button.play-again {
  /* Styles the Play Again button in the completion screen. */
  background: var(--pink);
}

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

.overlay {
  /* 
  Full screen darkened background shown when the completion pop up appears.
  */
  position: fixed;
  inset: 0;
  background: rgba(24, 46, 78, 0.48);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 30;
}

.overlay.hidden {
  /* Hides the overlay until the quiz is finished. */
  display: none;
}

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

.completion-emoji {
  /* Styles the trophy or celebration emoji in the pop up. */
  font-size: 3.4rem;
  margin-bottom: 12px;
}

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

.completion-card p {
  /* Styles the completion message text. */
  margin: 0 0 20px;
  font-weight: 700;
}

@media (max-width: 760px) {
  /* 
  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. */
  }

  .quiz-card {
    min-height: 520px;
    /* Increases card height slightly to fit stacked content. */
  }
}

@media (max-width: 640px) {
  /* 
  Responsive rules for smaller mobile screens.
  */
  .page-shell {
    padding: 18px;
  }

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

  .options-grid {
    grid-template-columns: 1fr;
    /* Changes answer choices to a single column for mobile readability. */
  }

  .question-visual {
    min-height: 90px;
    /* Slightly reduces the visual area on smaller screens. */
  }
}