/* ====== Reset & Base ====== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: linear-gradient(180deg, #87ceeb 0%, #b6e3ff 40%, #ffe6a7 80%, #f4a460 100%);
  color: #2b2b2b;
  position: relative;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ====== Screens ====== */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  overflow-y: auto;
}
.screen.active { display: flex; }

/* ====== Floating background dinos ====== */
.floating-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.float-emoji {
  position: absolute;
  bottom: -80px;
  left: var(--x);
  font-size: 3rem;
  opacity: 0.55;
  animation: floatUp 14s linear infinite;
  animation-delay: var(--d);
}
@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

/* ====== Landing Header ====== */
.landing-header {
  text-align: center;
  margin: 24px 0 32px;
  z-index: 1;
}
.title {
  font-size: clamp(2.4rem, 7vw, 4rem);
  color: #fff;
  text-shadow:
    3px 3px 0 #ff6b6b,
    6px 6px 0 rgba(0, 0, 0, 0.15);
  letter-spacing: 2px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.title-dino {
  display: inline-block;
  width: clamp(2.6rem, 8vw, 4.4rem);
  height: clamp(2.6rem, 8vw, 4.4rem);
  animation: wiggle 2s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}
.title-dino svg { width: 100%; height: 100%; display: block; }
.title-dino.flip { transform: scaleX(-1); animation-delay: 0.5s; }
@keyframes wiggle {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(8deg)  translateY(-6px); }
}
.title-dino.flip {
  animation: wiggleFlip 2s ease-in-out infinite;
}
@keyframes wiggleFlip {
  0%, 100% { transform: scaleX(-1) rotate(-8deg) translateY(0); }
  50%      { transform: scaleX(-1) rotate(8deg)  translateY(-6px); }
}

.subtitle {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  margin-top: 8px;
}

/* ====== Tile Grid ====== */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 720px;
  z-index: 1;
}
.tile-grid.two-up {
  grid-template-columns: repeat(2, 1fr);
  max-width: 600px;
}
.tile-grid.three-up {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 760px;
}

.tile {
  background: #fff;
  border-radius: 28px;
  padding: 28px 16px;
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
}
.tile:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.12),
    0 6px 12px rgba(0, 0, 0, 0.18);
}
.tile:hover:not(:disabled) { transform: translateY(-4px); }

.tile-emoji {
  font-size: clamp(3rem, 10vw, 5rem);
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  animation: bobble 3s ease-in-out infinite;
}
.tile-svg {
  width: clamp(4rem, 14vw, 6rem);
  height: clamp(4rem, 14vw, 6rem);
}
.tile-svg svg { width: 100%; height: 100%; display: block; }
@keyframes bobble {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}
.tile-label {
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  font-weight: bold;
  color: #2b2b2b;
}
.tile-sub {
  font-size: 0.95rem;
  color: #777;
}

/* tile color accents */
.tile-counting { background: linear-gradient(160deg, #fff8e1, #ffe082); }
.tile-letters  { background: linear-gradient(160deg, #ede7ff, #b197fc); }
.tile-phonics  { background: linear-gradient(160deg, #d6f0ff, #74c0fc); }
.tile-learn    { background: linear-gradient(160deg, #d4f8e8, #7ed8a8); }
.tile-test     { background: linear-gradient(160deg, #ffd6e7, #ff9bc4); }
.tile-look     { background: linear-gradient(160deg, #fff0d6, #ffb380); }
.tile-rhyming  { background: linear-gradient(160deg, #ffe8f0, #ff8fab); }
.tile-shapes   { background: linear-gradient(160deg, #e3fafc, #66d9e8); }
.tile-name     { background: linear-gradient(160deg, #ffd8d0, #ff9b8b); }

.tile-locked {
  opacity: 0.55;
  cursor: not-allowed;
  background: linear-gradient(160deg, #eee, #ccc);
}
.tile-locked .tile-emoji { animation: none; }

/* ====== Back Button ====== */
.back-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #444;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
  z-index: 10;
}
.back-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.12); }

/* ====== Learn Mode ====== */
.flashcard-area {
  width: 100%;
  max-width: 700px;
  margin: 60px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  z-index: 1;
}
.flashcard {
  background: #fff;
  border-radius: 32px;
  padding: 30px 24px;
  width: 100%;
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.12),
    0 16px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 380px;
}
.flashcard.pop {
  animation: cardPop 0.45s ease;
}
@keyframes cardPop {
  0%   { transform: scale(0.85) rotate(-3deg); opacity: 0; }
  60%  { transform: scale(1.05) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.big-number {
  height: clamp(160px, 28vw, 240px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.big-number svg {
  height: 100%;
  width: auto;
  overflow: visible;
}
.big-number path {
  fill: none;
  /* stroke set inline per-render so each card uses a unique gradient id */
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.12));
}
.big-number path.draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: drawIn 1.1s ease-out var(--delay, 0s) forwards;
}
@keyframes drawIn {
  to { stroke-dashoffset: 0; }
}

.dino-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  min-height: 70px;
}
.dino-row .dino {
  width: clamp(3rem, 7vw, 4.2rem);
  height: clamp(3rem, 7vw, 4.2rem);
  animation: dinoPop 0.4s ease both;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.18));
}
.dino-row .dino svg { width: 100%; height: 100%; display: block; }

/* When count > 10, stack a "ten pack" group above the extras to teach
   place value (e.g., 17 = 10 + 7). */
.dino-row.grouped {
  flex-direction: column;
  gap: 10px;
}
.dino-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  align-items: center;
}
.dino-group.ten {
  padding: 8px 14px;
  border-radius: 16px;
  background: rgba(255, 220, 120, 0.25);
  border: 2.5px dashed rgba(230, 160, 50, 0.6);
}
.dino-row.grouped .dino {
  width: clamp(2.2rem, 5vw, 2.8rem);
  height: clamp(2.2rem, 5vw, 2.8rem);
}
@keyframes dinoPop {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.card-word {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: bold;
  color: #4a4a4a;
}

/* Case toggle (ABC / abc) on the Letters menu */
.case-toggle {
  display: inline-flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
  margin: 0 0 24px;
  z-index: 1;
}
.case-btn {
  padding: 10px 28px;
  border-radius: 999px;
  font-size: 1.3rem;
  font-weight: 900;
  color: #888;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  font-family: inherit;
  min-width: 84px;
}
.case-btn.active {
  background: linear-gradient(160deg, #b197fc, #9775fa);
  color: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
/* Counting uses the yellow palette to match its tile */
.case-toggle.toggle-numbers .case-btn.active {
  background: linear-gradient(160deg, #ffd43b, #ffa94d);
}
/* Rhyming uses pink to match its tile */
.case-toggle.toggle-rhyme .case-btn.active {
  background: linear-gradient(160deg, #ff8fab, #c2255c);
}
.case-btn:active:not(.active) {
  transform: scale(0.95);
}

/* Letter-card "is for X" thumbnail (emoji-based) */
.letter-img {
  font-size: clamp(3.5rem, 11vw, 5.5rem);
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  animation: dinoPop 0.5s ease both;
}

/* ====== Name Tracing ====== */
.name-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 1;
  width: 100%;
  max-width: 480px;
}
.name-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}
.name-input {
  font-family: inherit;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;
  padding: 14px 20px;
  border: 4px solid #fff;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  color: #ff6b6b;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.15);
  width: 100%;
  outline: none;
  transition: transform 0.1s ease;
}
.name-input:focus {
  border-color: #ffa94d;
  transform: translateY(-2px);
}
#start-tracing-btn {
  cursor: pointer;
  width: 100%;
  max-width: 280px;
}

/* Progress chips above the trace card */
.trace-progress {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 8px 0 14px;
  z-index: 1;
}
.trace-chip {
  width: clamp(36px, 8vw, 48px);
  height: clamp(36px, 8vw, 48px);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  font-weight: 900;
  color: #aaa;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
}
.trace-chip.done {
  background: linear-gradient(160deg, #b2f2bb, #51cf66);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
}
.trace-chip.current {
  background: linear-gradient(160deg, #ffe066, #fab005);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
  transform: scale(1.18) translateY(-3px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
}

/* Trace card: SVG template + canvas overlay, stacked */
.trace-card {
  position: relative;
  width: clamp(260px, 70vw, 440px);
  height: clamp(360px, 95vw, 620px);
  background: #fff;
  border-radius: 28px;
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.12),
    0 16px 30px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  z-index: 1;
  animation: cardPop 0.45s ease;
}
.trace-template {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trace-template svg {
  width: 100%;
  height: 100%;
  display: block;
}
#trace-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none; /* prevents page scrolling while drawing */
  cursor: crosshair;
}

.trace-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
  z-index: 1;
}

/* ====== Shapes ====== */
.shape-display {
  width: clamp(160px, 38vw, 230px);
  height: clamp(160px, 38vw, 230px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dinoPop 0.5s ease both;
}
.shape-display svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.18));
}
/* Shape choice tile in Listen Test: SVG fills the colored tile */
.choice.shape-choice {
  padding: 14px;
  /* override the default text-centering font sizing */
}
.choice.shape-choice svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
}

/* ====== Rhyming ====== */
.rhyme-card {
  padding: 28px 18px;
  min-height: 280px;
}
.rhyme-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rhyme-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  background: linear-gradient(160deg, #fff8e1, #ffe082);
  border-radius: 20px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12);
  min-width: clamp(120px, 22vw, 170px);
  animation: dinoPop 0.5s ease both;
}
.rhyme-word + .rhyme-word { animation-delay: 0.15s; }
.rhyme-emoji {
  font-size: clamp(3rem, 10vw, 4.5rem);
  line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
}
.rhyme-text {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 900;
  color: #444;
  text-transform: lowercase;
  letter-spacing: 1px;
  transition: opacity 0.25s ease;
}
/* Ears-only mode: hide the printed word so the kid relies on listening
   for the matching sound, not visually matching the letter endings. */
.rhyme-card.ears-only .rhyme-text {
  opacity: 0;
}
.rhyme-vs {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: #888;
}
.rhyme-verdict {
  margin-top: 22px;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 900;
  text-align: center;
  letter-spacing: 1px;
  animation: verdictPop 0.55s ease both;
}
.rhyme-verdict.yes {
  color: #2f9e44;
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.6), 5px 5px 0 rgba(0, 0, 0, 0.1);
}
.rhyme-verdict.no {
  color: #e03131;
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.6), 5px 5px 0 rgba(0, 0, 0, 0.1);
}
@keyframes verdictPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.rhyme-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
.ctrl-btn.rhyme-yes {
  background: linear-gradient(160deg, #b2f2bb, #51cf66);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.ctrl-btn.rhyme-no {
  background: linear-gradient(160deg, #ffc9c9, #ff6b6b);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.ctrl-btn.correct { animation: correctFlash 0.7s ease; }
.ctrl-btn.wrong   { animation: wrongShake 0.5s ease; }

/* ====== Phonics ====== */
.phonics-letters {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.phonics-letter {
  width: clamp(60px, 16vw, 88px);
  height: clamp(60px, 16vw, 88px);
  border-radius: 20px;
  background: linear-gradient(160deg, #fff3bf, #ffd43b);
  color: #fff;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  animation: dinoPop 0.4s ease both;
}
.phonics-letter.active {
  transform: scale(1.2) translateY(-10px);
  box-shadow: 0 14px 0 rgba(0, 0, 0, 0.15);
  background: linear-gradient(160deg, #ff8787, #ff6b6b);
}
.phonics-letter:active:not(.active) {
  transform: scale(0.95);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}
.phonics-emoji {
  font-size: clamp(3.5rem, 12vw, 6rem);
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  animation: dinoPop 0.5s ease both;
}

/* Phonics test choices: emoji on top, word below */
.choice.phonics-choice {
  aspect-ratio: 1 / 1.15;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.choice.phonics-choice .choice-emoji {
  font-size: clamp(2.4rem, 9vw, 4rem);
  line-height: 1;
}
.choice.phonics-choice .choice-word {
  font-size: clamp(1rem, 3.5vw, 1.5rem);
  font-weight: 900;
  color: #444;
  text-transform: lowercase;
}

/* learn controls */
.learn-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.ctrl-btn {
  background: #fff;
  border-radius: 999px;
  padding: 16px 24px;
  font-size: 1.3rem;
  font-weight: bold;
  color: #444;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
  min-width: 70px;
  transition: transform 0.1s ease;
}
.ctrl-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,0.15); }
.ctrl-say { background: linear-gradient(160deg, #ffd6a5, #ffa94d); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); }
.ctrl-prev, .ctrl-next { background: linear-gradient(160deg, #b8e6ff, #4dabf7); color: #fff; }
.big-say {
  padding: 20px 32px;
  font-size: 1.5rem;
}

/* ====== Look Test (see numeral, say it) ====== */
.look-instruction {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  margin-bottom: 4px;
}
/* Before reveal: keep dinos + word hidden so the kid has to recall it.
   Fade in once the parent marks Knew it / Help me. */
.look-card .dino-row,
.look-card .card-word {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.look-card.revealed .dino-row,
.look-card.revealed .card-word {
  opacity: 1;
}
.look-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.ctrl-btn.ctrl-knew {
  background: linear-gradient(160deg, #b2f2bb, #51cf66);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.ctrl-btn.ctrl-help {
  background: linear-gradient(160deg, #ffec99, #ffa94d);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

/* ====== Test Mode ====== */
.test-area {
  width: 100%;
  max-width: 700px;
  margin: 60px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  z-index: 1;
}
.test-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.test-instruction {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}
@media (min-width: 640px) {
  .choice-grid { grid-template-columns: repeat(4, 1fr); }
}

.choice {
  background: #fff;
  border-radius: 24px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 900;
  color: #2b2b2b;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease;
}
.choice:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0,0,0,0.12); }

.choice.c1 { background: linear-gradient(160deg, #ffd6e7, #ff9bc4); }
.choice.c2 { background: linear-gradient(160deg, #d4f8e8, #7ed8a8); }
.choice.c3 { background: linear-gradient(160deg, #ffe9b3, #ffd43b); }
.choice.c4 { background: linear-gradient(160deg, #d6e9ff, #74c0fc); }

.choice.correct {
  animation: correctFlash 0.7s ease;
}
@keyframes correctFlash {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.2) rotate(5deg); background: #69db7c; }
  60%      { transform: scale(1.1) rotate(-5deg); }
}

.choice.wrong {
  animation: wrongShake 0.5s ease;
}
@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-10px); background: #ffa8a8; }
  40%      { transform: translateX(10px); }
  60%      { transform: translateX(-8px); }
  80%      { transform: translateX(8px); }
}

/* score */
.score-row {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}
.score-pill {
  background: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 1.3rem;
  font-weight: bold;
  color: #444;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}
.score-pill.alt { background: #ffd6a5; }

/* ====== Celebrate overlay ====== */
.celebrate {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.celebrate.show {
  display: flex;
}
.celebrate-text {
  font-size: clamp(3rem, 12vw, 7rem);
  color: #fff;
  font-weight: 900;
  text-shadow:
    4px 4px 0 #ff6b6b,
    8px 8px 0 rgba(0, 0, 0, 0.2);
  animation: celebratePop 1.2s ease;
}
@keyframes celebratePop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  40%  { transform: scale(1.3) rotate(10deg); opacity: 1; }
  70%  { transform: scale(1) rotate(-5deg); }
  100% { transform: scale(1.1) rotate(0); opacity: 0; }
}

.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.confetti span {
  position: absolute;
  top: -30px;
  font-size: 1.8rem;
  animation: confettiFall 1.6s ease-in forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.2; }
}