:root {
  /* 
  This section defines reusable design variables.
  These variables store the main colors, text color, panel style,
  and shadow effect used across the Shapes 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;
  --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. */

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

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

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

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

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

.app-card {
  /* 
  Styles the main content card that holds the Shapes 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 design. */

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

  padding: 28px;
  /* Adds 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 title.
  */
  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 based on screen size.
  */

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

.subtitle {
  /* Styles the instruction text below the main title. */
  margin: 10px 0 0;
  font-size: 1.05rem;
  max-width: 680px;
  /* Limits text width to improve readability. */
}

.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 content 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 Shape 1 of 8. */
  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 shows learning progress.
  */
  height: 100%;
  width: 12.5%;
  /* 
  Initial width represents the first step in an 8 shape sequence.
  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 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 Auto Play checkbox. */
  width: 20px;
  height: 20px;
  accent-color: var(--green);
  /* Gives the checkbox a green accent color. */
}

.flashcard-area {
  /* 
  Main area where the interactive shape flashcard is shown.
  */
  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 depth effect for flipping. */

  cursor: pointer;
  outline: none;
}

.flip-card:focus-visible {
  /* 
  Shows a visible outline 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 gets the flipped class,
  it 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 rotating. */

  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 shape being learned.
  */
  background: linear-gradient(180deg, #59c6ff, #4f92ff);
  color: white;
}

.card-back {
  /* 
  Styles the back side of the card.
  This side shows the matching real world object.
  */
  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;
}

.shape-stage {
  /* 
  Container area where the visual shape is displayed.
  It reserves a fixed space so the layout stays stable.
  */
  width: 220px;
  height: 180px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.shape-name {
  /* 
  Styles the name of the shape, such as Circle or Triangle.
  */
  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;
}

.shape-visual {
  /* 
  Base class for all shape drawings.
  Each specific shape adds its own dimensions and geometry.
  */
  display: block;
}

.shape-circle {
  /* Draws a circle using width, height, and full border radius. */
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #ffca44;
}

.shape-square {
  /* Draws a square using equal width and height. */
  width: 145px;
  height: 145px;
  background: #ff5ea8;
}

.shape-triangle {
  /* 
  Draws a triangle using transparent side borders
  and a colored bottom border.
  */
  width: 0;
  height: 0;
  border-left: 78px solid transparent;
  border-right: 78px solid transparent;
  border-bottom: 140px solid #33c86f;
}

.shape-rectangle {
  /* Draws a rounded rectangle. */
  width: 190px;
  height: 118px;
  background: #a855f7;
  border-radius: 18px;
}

.shape-oval {
  /* Draws an oval by stretching a rounded rectangle. */
  width: 190px;
  height: 120px;
  background: #fb923c;
  border-radius: 50%;
}

.shape-star {
  /* 
  Draws a star using clip-path,
  which cuts the element into a star shape.
  */
  width: 145px;
  height: 145px;
  background: #facc15;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

.shape-heart {
  /* 
  Draws a heart using a rotated base shape plus two circles.
  */
  position: relative;
  width: 140px;
  height: 126px;
  transform: rotate(-45deg);
  background: #ef4444;
}

.shape-heart::before,
.shape-heart::after {
  /* 
  These pseudo elements form the two rounded top parts of the heart.
  */
  content: '';
  position: absolute;
  width: 140px;
  height: 126px;
  background: #ef4444;
  border-radius: 50%;
}

.shape-heart::before {
  top: -70px;
  left: 0;
}

.shape-heart::after {
  top: 0;
  left: 70px;
}

.shape-diamond {
  /* Draws a diamond by rotating a square 45 degrees. */
  width: 130px;
  height: 130px;
  background: #14b8a6;
  transform: rotate(45deg);
}

.object-emoji {
  /* 
  Styles the large emoji used on the back of the card
  to represent a real world object.
  */
  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 object to the shape,
  such as A ball is shaped like a Circle.
  */
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.controls {
  /* Styles the row of control 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 they are needed. */
  display: none;
}

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

.completion-emoji {
  /* Styles the celebration emoji shown in the 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 smaller screens such as tablets and phones.
  */
  .top-banner {
    flex-direction: column;
    /* Stacks the title and menu button vertically. */
  }

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

  .flip-card {
    height: 400px;
    /* Slightly reduces the flashcard height on smaller screens. */
  }

  .shape-stage {
    width: 180px;
    height: 150px;
    /* Reduces the reserved area for shapes on smaller screens. */
  }

  .shape-circle,
  .shape-square,
  .shape-star,
  .shape-heart,
  .shape-diamond {
    transform-origin: center;
    scale: 0.82;
    /* Scales down these shapes for better fit on smaller screens. */
  }

  .shape-rectangle,
  .shape-oval {
    scale: 0.82;
    /* Scales down larger shapes for better fit. */
  }

  .shape-triangle {
    transform: scale(0.82);
    /* Scales down the triangle separately. */
  }
}