/*
  Kid Mode (/play/, templates/pages/play.html, static/js/play.js).
  Loads after fonts.css, tokens.css and base.css (topic colors and .patch are in base.css).
  No inline styles anywhere (CSP): every state is a class or data attribute set by play.js.

  Kid Mode always uses the light palette, whatever the system theme: the cards are
  printed-sticker colors and the brand's dark mode would mute them.

  Motion: every animation and transition is listed in design/screens/kid-mode/notes.md
  ("Animation spec").
  prefers-reduced-motion turns all of it off at the bottom of this file; the game still works.
*/

/* ---------- Page shell ---------- */
.play, .play *, .play *::before, .play *::after { box-sizing: border-box; }
/* Light palette whatever the system theme (decision 038): the semantic tokens and the two
   topic colors that dark mode changes are set back to their light values for the page,
   so base.css's buttons, cards, chips and focus ring stay light too. */
.play-body {
  --wc-bg: var(--wc-graph-paper);
  --wc-surface: var(--wc-white);
  --wc-text: var(--wc-spy-pond);
  --wc-text-muted: var(--wc-slate);
  --wc-border: var(--wc-spy-pond);
  --wc-hairline: var(--wc-grid);
  --wc-link: var(--wc-bunsen-deep);
  --wc-link-hover: var(--wc-spy-pond);
  --wc-focus: var(--wc-spy-pond);
  --wc-topic-math-bg: var(--wc-white);
  --wc-topic-math-fg: var(--wc-spy-pond);
  --wc-topic-technology-bg: var(--wc-spy-pond);
  --wc-topic-technology-fg: var(--wc-graph-paper);
  background-color: var(--wc-graph-paper);
  color: var(--wc-spy-pond);
  color-scheme: light;
}
/* base.css darkens the tints in dark mode; Kid Mode keeps the light ones. */
.play-body [data-topic="science"], .play-body [data-topic="nature"] { --t-tint: var(--wc-bubbler-tint); }
.play-body [data-topic="history"], .play-body [data-topic="engineering"] { --t-tint: var(--wc-lantern-tint); }
.play-body [data-topic="literature"], .play-body [data-topic="arts"] { --t-tint: var(--wc-bunsen-tint); }
.play-body [data-topic="technology"] { --t-tint: var(--wc-grid); }
.play-body [data-topic="math"] { --t-tint: var(--wc-graph-paper); }
.play {
  --play-ink: var(--wc-spy-pond);
  --play-shadow: 0 5px 0 var(--wc-spy-pond);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--play-ink);
  background-color: var(--wc-graph-paper);
  background-image:
    linear-gradient(var(--wc-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--wc-grid) 1px, transparent 1px);
  background-size: var(--wc-grid-size) var(--wc-grid-size);
}
.play-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.play-screen[hidden] { display: none; }
.play-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--wc-space-4) 20px; }
.play-wrap { width: 100%; max-width: 55rem; margin: 0 auto; display: flex; flex-direction: column; gap: var(--wc-space-4); }
.play-wrap--wide { max-width: 61rem; }
.play-noscript { margin: var(--wc-space-8) 20px; display: grid; gap: var(--wc-space-4); }

/* Bottom action bar: stays on screen on phones */
.play-dock {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 14px 20px max(22px, env(safe-area-inset-bottom));
  border-top: var(--wc-border-width) solid var(--play-ink);
  background: var(--wc-white);
}
.play-dock[hidden] { display: none; }
.play-dock--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.play-dock--two > * { min-width: 0; }
/* Two buttons share a phone's width: labels wrap rather than clip */
.play-dock--two .btn { white-space: normal; text-align: center; padding-inline: var(--wc-space-3); line-height: 1.15; }
.play-grownup__exit { white-space: normal; text-align: center; line-height: 1.15; }

/* ---------- Type and small parts ---------- */
.play-h1 {
  margin: 0;
  font-family: var(--wc-font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 9vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.play-h1:focus { outline: none; }
.play-h1--center { text-align: center; }
.play-label {
  margin: 0;
  font-family: var(--wc-font-label);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.play-label--orange { color: var(--wc-bunsen-deep); }
.play-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--wc-radius-pill);
  background: var(--play-ink);
  color: var(--wc-graph-paper);
  font-family: var(--wc-font-label);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.play-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.play-wordmark { font-family: var(--wc-font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; }
.play-wordmark span { color: var(--wc-bunsen-deep); }
.play-foot { margin: 0; text-align: center; font-family: var(--wc-font-label); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wc-slate); }
.play-error { margin: 0; padding: 12px 16px; border: var(--wc-border-width) solid var(--play-ink); border-radius: var(--wc-radius-input); background: var(--wc-notice); font-weight: 700; }
.play-error[hidden] { display: none; }

/* Chunky buttons: a 5 px ink shadow that presses down */
.play-big, .play-cta {
  border: var(--wc-border-width) solid var(--play-ink);
  color: var(--play-ink);
  font-family: var(--wc-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: var(--play-shadow);
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease, background-color 200ms ease;
}
.play-big:active, .play-cta:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--play-ink); }
.play-big {
  min-height: 96px;
  border-radius: 26px;
  background: var(--wc-white);
  font-size: 2.875rem;
}
.play-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 27.5rem;
  min-height: 64px;
  padding: 0 28px;
  border-radius: var(--wc-radius-pill);
  background: var(--wc-bunsen);
  font-size: 1.5rem;
}
.play-cta:disabled { background: var(--wc-grid); box-shadow: none; cursor: not-allowed; transform: none; }
.play-round-btn {
  flex: none;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--wc-border-width) solid var(--play-ink);
  border-radius: 50%;
  background: var(--wc-white);
  color: var(--play-ink);
  cursor: pointer;
}
.play-sticker {
  position: absolute;
  top: 10px;
  left: 8px;
  padding: 2px 8px;
  border: var(--wc-border-width) solid var(--play-ink);
  border-radius: var(--wc-radius-pill);
  background: var(--wc-lantern);
  font-family: var(--wc-font-label);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  rotate: -6deg;
}
.play-sticker[hidden] { display: none; }

/* Focus: brand ring everywhere (base.css), a little more offset on the big targets */
.play-big:focus-visible, .play-cta:focus-visible, .play-tile:focus-visible, .play-card:focus-visible {
  outline: var(--wc-focus-ring);
  outline-offset: 4px;
}

/* ---------- 1 · How old are you? ---------- */
.play-age { align-items: center; gap: var(--wc-space-4); padding: 20px 24px 28px; }
.play-age > * { width: 100%; max-width: 35rem; }
.play-age__head { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 36px; text-align: center; }
.play-age__curio .curio { display: block; animation: km-bob 2.6s ease-in-out infinite; }
.play-age__buttons { display: flex; flex-direction: column; gap: 16px; max-width: 32.5rem; margin-top: 18px; }
.play-age .play-foot { margin-top: auto; }

/* Staggered entrance for the age screen */
.play-rise { animation: km-rise 500ms ease-out both; }
.play-rise--2 { animation-delay: 120ms; }
.play-rise--3 { animation-delay: 240ms; }

/* ---------- 2 · What do you like? ---------- */
.play-topics .play-round-btn { margin-bottom: 4px; }
.play-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.play-tile {
  position: relative;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px;
  border: var(--wc-border-width) solid var(--play-ink);
  border-radius: var(--wc-radius-panel);
  background: var(--wc-white);
  color: var(--play-ink);
  font: inherit;
  text-align: left;
  box-shadow: 0 4px 0 var(--play-ink);
  cursor: pointer;
  transition: transform 260ms cubic-bezier(.3, 1.6, .5, 1), background-color 200ms, box-shadow 200ms;
  animation: km-rise 420ms ease-out both;
}
.play-tile:nth-child(2) { animation-delay: 50ms; }
.play-tile:nth-child(3) { animation-delay: 100ms; }
.play-tile:nth-child(4) { animation-delay: 150ms; }
.play-tile:nth-child(5) { animation-delay: 200ms; }
.play-tile:nth-child(6) { animation-delay: 250ms; }
.play-tile:nth-child(7) { animation-delay: 300ms; }
.play-tile:nth-child(8) { animation-delay: 350ms; }
.play-tile__name { font-family: var(--wc-font-display); font-weight: 800; font-size: 1.375rem; line-height: 1; letter-spacing: -0.01em; }
.play-tile__check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--play-ink);
  color: var(--wc-graph-paper);
}
.play-tile[aria-pressed="true"] { background: var(--t-tint); box-shadow: 0 0 0 3px var(--wc-bunsen); transform: rotate(-2deg) scale(1.03); }
.play-tile[aria-pressed="true"]:nth-child(even) { transform: rotate(2deg) scale(1.03); }
.play-tile[aria-pressed="true"] .play-tile__check { display: flex; animation: km-pop 320ms ease-out; }
.play-tile.is-bounce .play-tile__patch { animation: km-bounce 520ms ease-out; }

/* ---------- 3 · 3, 2, 1, Go! ---------- */
.play-countdown { align-items: center; justify-content: center; gap: 28px; padding: 24px; text-align: center; transition: background-color 300ms; }
.play-countdown .play-label { font-size: 1rem; letter-spacing: 0.08em; }
.play-countdown__hint { margin: 0; font-weight: 700; font-size: 1.1875rem; }
.play-count {
  width: min(240px, 62vw);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--play-ink);
  border-radius: 50%;
  box-shadow: 0 10px 0 var(--play-ink);
  font-family: var(--wc-font-display);
  font-weight: 800;
  font-size: clamp(6rem, 30vw, 9.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.play-count[data-n="3"] { background: var(--wc-bubbler); }
.play-count[data-n="2"] { background: var(--wc-lantern); }
.play-count[data-n="1"] { background: var(--wc-bunsen); }
.play-count[data-n="go"] { background: var(--wc-white); font-size: clamp(3.5rem, 18vw, 5.5rem); }
.play-countdown:has(.play-count[data-n="go"]) { background-color: var(--wc-bunsen-tint); }
.play-count.is-tick { animation: km-count 600ms cubic-bezier(.3, 1.4, .5, 1) both; }

/* ---------- 4 · Quick! Pick! ---------- */
.play-pick { width: 100%; max-width: 65rem; margin: 0 auto; gap: 10px; padding: 14px 20px 22px; }
.play-pick__bar { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.play-pick__bar [data-pair-label] { margin-left: auto; }
.play-pick__title { text-align: center; font-size: 2.625rem; rotate: -2deg; }

.play-pair {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 4px;
}
.play-pair[hidden] { display: none; }

/* The card: a button holding a 3-D flipper (face and back) and a stamp */
.play-card {
  --out-x: -130%;
  --out-rotate: -14deg;
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--play-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  perspective: 1400px;
  transition: transform 460ms cubic-bezier(.3, 1.35, .5, 1), opacity 240ms ease;
}
.play-card[data-slot="1"] { --out-x: 130%; --out-rotate: 14deg; }
.play-card__flip {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform 680ms cubic-bezier(.4, 1.5, .5, 1);
}
.play-card.is-face-down .play-card__flip { transform: rotateY(180deg); }
.play-card.no-flip .play-card__flip { transition: none; }

.play-card__face, .play-card__back {
  position: absolute;
  inset: 0;
  display: flex;
  border: var(--wc-border-width) solid var(--play-ink);
  border-radius: 24px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.play-card__face { flex-direction: row; background: var(--wc-white); box-shadow: var(--play-shadow); transition: box-shadow 200ms; }
.play-card__art {
  position: relative;
  flex: none;
  width: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: var(--wc-border-width) solid var(--play-ink);
  background-color: var(--t-tint);
  background-image:
    linear-gradient(rgb(11 42 74 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(11 42 74 / 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
}
.play-card__art { flex-direction: column; gap: 8px; }
.play-card__patch { width: 88px; height: 88px; rotate: -6deg; }
/* The topic's name under its icon: color is never the only signal */
.play-topic {
  padding: 2px 8px;
  border: 2px solid var(--play-ink);
  border-radius: var(--wc-radius-pill);
  background: var(--wc-white);
  color: var(--play-ink);
  font-family: var(--wc-font-label);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.play-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 18px; }
.play-card__title { font-family: var(--wc-font-display); font-weight: 800; font-size: 1.625rem; line-height: 1.02; letter-spacing: -0.025em; }
.play-card__hook { font-size: 1.0625rem; line-height: 1.35; }

.play-card__back {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transform: rotateY(180deg);
  background-color: var(--play-ink);
  background-image:
    linear-gradient(rgb(243 246 250 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(243 246 250 / 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--wc-graph-paper);
  box-shadow: 0 5px 0 var(--wc-lantern);
}
.play-card__q {
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px dashed var(--wc-lantern);
  border-radius: 50%;
  color: var(--wc-lantern);
  font-family: var(--wc-font-display);
  font-weight: 800;
  font-size: 4.375rem;
  line-height: 1;
}
.play-card.is-face-down .play-card__q { animation: km-wiggle 0.5s ease-in-out infinite; }
.play-card__back-label { font-family: var(--wc-font-display); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.02em; }

/* The "YES!" stamp on the chosen card */
.play-card__stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 6px dashed var(--wc-bunsen-deep);
  border-radius: 50%;
  background: rgb(255 225 211 / 0.94);
  color: var(--wc-bunsen-deep);
  font-family: var(--wc-font-display);
  font-weight: 800;
  font-size: 2.5rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Pick: the winner gets the stamp and an orange ring, then lifts away; the other card flies off its side */
.play-card.is-win .play-card__stamp { display: flex; animation: km-stamp 340ms cubic-bezier(.3, 1.5, .5, 1) both; }
.play-card.is-win .play-card__face { box-shadow: 0 0 0 4px var(--wc-bunsen), var(--play-shadow); }
.play-card.is-win {
  transform: translateY(-140%) scale(.8) rotate(calc(var(--out-rotate) / -2));
  opacity: 0;
  transition: transform 420ms cubic-bezier(.5, 0, .8, .4) 340ms, opacity 280ms ease 460ms;
}
.play-card.is-out {
  transform: translateX(var(--out-x)) rotate(var(--out-rotate));
  opacity: 0;
  transition: transform 420ms cubic-bezier(.5, 0, .8, .4), opacity 300ms ease 100ms;
}
/* When the classes come off for the next pair, the default transition swings both cards back in. */

/* "OR" sits between the cards */
.play-or {
  position: relative;
  z-index: 2;
  flex: none;
  align-self: center;
  width: 76px;
  height: 76px;
  margin: -24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--play-ink);
  border-radius: 50%;
  background: var(--wc-bunsen);
  color: var(--play-ink);
  box-shadow: 0 4px 0 var(--play-ink);
  font-family: var(--wc-font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* The round banner takes the cards' place */
.play-banner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
.play-banner[hidden] { display: none; }
.play-banner__title {
  margin: 0;
  padding: 28px 36px;
  border: 3px solid var(--play-ink);
  border-radius: 30px;
  background: var(--wc-lantern);
  box-shadow: 0 8px 0 var(--play-ink);
  font-family: var(--wc-font-display);
  font-weight: 800;
  font-size: 4rem;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.play-banner.is-final .play-banner__title { background: var(--wc-bunsen); }
.play-banner__sub { margin: 0; font-family: var(--wc-font-display); font-weight: 800; font-size: 1.625rem; }
.play-banner.is-in .play-banner__title { animation: km-banner 600ms cubic-bezier(.3, 1.5, .5, 1) both; }
.play-banner.is-in .play-banner__sub { animation: km-rise 400ms ease-out 350ms both; }

/* ---------- 5 · Your top 3 ---------- */
.play-top { position: relative; }
.play-top .play-wrap { gap: 18px; }
.play-podium { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.play-first {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--wc-border-width) solid var(--play-ink);
  border-radius: 24px;
  background: var(--wc-white);
  box-shadow: 0 0 0 4px var(--wc-bunsen), 0 6px 0 var(--play-ink);
}
.play-first__art {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--wc-border-width) solid var(--play-ink);
  border-radius: 22px 22px 0 0;
  background-color: var(--t-tint);
}
.play-first__patch { width: 116px; height: 116px; rotate: -6deg; }
.play-first__text { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.play-first__title { margin: 0; font-family: var(--wc-font-display); font-weight: 800; font-size: 1.875rem; line-height: 1.02; letter-spacing: -0.025em; }
.play-first__hook { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.play-crown { position: absolute; top: -30px; right: 14px; width: 62px; height: 62px; fill: var(--wc-lantern); stroke: var(--play-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; rotate: 8deg; }
.play-rest { display: flex; gap: 14px; }
.play-small {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: var(--wc-border-width) solid var(--play-ink);
  border-radius: var(--wc-radius-panel);
  overflow: hidden;
  background: var(--wc-white);
  box-shadow: var(--play-shadow);
}
.play-small[hidden], .play-first[hidden] { display: none; }
.play-small__art { height: 96px; display: flex; align-items: center; justify-content: center; border-bottom: var(--wc-border-width) solid var(--play-ink); background: var(--t-tint); }
.play-small__patch { width: 64px; height: 64px; rotate: -6deg; }
.play-small__text { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.play-small__text .play-label { font-size: 0.75rem; color: var(--wc-slate); }
.play-small__title { margin: 0; font-family: var(--wc-font-display); font-weight: 800; font-size: 1.1875rem; line-height: 1.05; letter-spacing: -0.02em; }
.play-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 40px; text-align: center; }
.play-empty[hidden] { display: none; }
.play-empty p { margin: 0; font-size: 1.125rem; }

/* Celebration: cards deal in, the crown drops on #1, confetti falls (all once, on arrival) */
.play-top.is-celebrating .play-first { animation: km-deal 560ms cubic-bezier(.3, 1.3, .5, 1) 0.25s both; }
.play-top.is-celebrating .play-small:nth-child(1) { animation: km-deal 520ms cubic-bezier(.3, 1.3, .5, 1) 0.45s both; }
.play-top.is-celebrating .play-small:nth-child(2) { animation: km-deal 520ms cubic-bezier(.3, 1.3, .5, 1) 0.6s both; }
.play-top.is-celebrating .play-crown { animation: km-crown 700ms cubic-bezier(.3, 1.4, .5, 1) 0.9s both; }

.play-confetti { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.play-confetti span {
  position: absolute;
  top: -24px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--play-ink);
  border-radius: 3px;
  opacity: 0;
}
.play-top.is-celebrating .play-confetti span { opacity: 1; animation: km-fall 2s cubic-bezier(.3, .6, .6, 1) 0.7s both; }
/* 18 pieces: position, color, shape, size and timing vary by position in the list */
.play-confetti span:nth-child(6n + 1) { background: var(--wc-bunsen); }
.play-confetti span:nth-child(6n + 2) { background: var(--wc-lantern); border-radius: 50%; }
.play-confetti span:nth-child(6n + 3) { background: var(--wc-bubbler); width: 13px; height: 13px; }
.play-confetti span:nth-child(6n + 4) { background: var(--wc-spy-pond); border-radius: 50%; }
.play-confetti span:nth-child(6n + 5) { background: var(--wc-bunsen-tint); width: 15px; height: 15px; }
.play-confetti span:nth-child(6n)     { background: var(--wc-bubbler-tint); border-radius: 50%; }
.play-confetti span:nth-child(1)  { left: 11%; }  .play-confetti span:nth-child(2)  { left: 48%; animation-delay: 0.82s; }
.play-confetti span:nth-child(3)  { left: 85%; animation-delay: 0.94s; } .play-confetti span:nth-child(4)  { left: 22%; animation-delay: 1.06s; }
.play-confetti span:nth-child(5)  { left: 59%; animation-delay: 1.18s; } .play-confetti span:nth-child(6)  { left: 96%; animation-delay: 1.3s; }
.play-confetti span:nth-child(7)  { left: 33%; animation-duration: 2.35s; } .play-confetti span:nth-child(8)  { left: 70%; animation-delay: 0.82s; }
.play-confetti span:nth-child(9)  { left: 7%;  animation-delay: 0.94s; animation-duration: 2.6s; } .play-confetti span:nth-child(10) { left: 44%; animation-delay: 1.06s; }
.play-confetti span:nth-child(11) { left: 81%; animation-delay: 1.18s; animation-duration: 2.35s; } .play-confetti span:nth-child(12) { left: 18%; animation-delay: 1.3s; }
.play-confetti span:nth-child(13) { left: 55%; animation-duration: 2.6s; } .play-confetti span:nth-child(14) { left: 92%; animation-delay: 0.82s; }
.play-confetti span:nth-child(15) { left: 29%; animation-delay: 0.94s; } .play-confetti span:nth-child(16) { left: 66%; animation-delay: 1.06s; animation-duration: 2.35s; }
.play-confetti span:nth-child(17) { left: 3%;  animation-delay: 1.18s; } .play-confetti span:nth-child(18) { left: 40%; animation-delay: 1.3s; animation-duration: 2.6s; }

/* ---------- 6 · Grown-up view ---------- */
.play-grownup { background: var(--wc-graph-paper); }
.play-grownup__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--play-ink);
  color: var(--wc-graph-paper);
}
.play-grownup__exit { min-height: var(--wc-touch-min); background: transparent; color: var(--wc-graph-paper); border-color: var(--wc-graph-paper); }
.play-grownup__exit:hover { background: var(--wc-pond-panel); color: var(--wc-graph-paper); }
.play-grownup__h1 { margin: 0; font-size: 2.125rem; line-height: 1.02; letter-spacing: -0.03em; }
.play-grownup__h1:focus { outline: none; }
.play-grownup__summary { margin: 0; font-size: 1rem; color: var(--wc-slate); }
.play-grown-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.play-grown-item { display: flex; flex-direction: column; gap: 8px; }
.play-grown-item p { margin: 0; }
.play-grown-item__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.play-grown-item__tags [hidden] { display: none; }
.chip--dark { background: var(--play-ink); color: var(--wc-graph-paper); }
.play-grown-item__title { margin: 0; font-family: var(--wc-font-body); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.play-grown-item__meta { font-size: var(--wc-size-small); color: var(--wc-slate); }
.play-grown-item__saw { font-size: var(--wc-size-small); font-style: italic; color: var(--wc-slate); }
.play-grown-item__link { align-self: flex-start; margin-top: 4px; }

.play-hold { position: relative; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.play-hold__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--wc-bubbler); transition: width 200ms ease-out; }
.play-hold__label { position: relative; transition: color 200ms; }
.play-hold.is-holding .play-hold__fill { width: 100%; transition: width 1.2s linear; }
.play-hold.is-holding .play-hold__label { color: var(--play-ink); }

/* ---------- Wider screens: tablets and desktop ---------- */
@media (min-width: 48rem) {
  .play-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .play-pair { flex: none; height: min(560px, 62vh); flex-direction: row; }
  .play-card { --out-x: 0%; --out-rotate: -10deg; }
  .play-card[data-slot="1"] { --out-rotate: 10deg; }
  .play-card.is-out { transform: translateY(130%) rotate(var(--out-rotate)); }
  .play-card__face { flex-direction: column; }
  .play-card__art { width: auto; height: 250px; border-right: 0; border-bottom: var(--wc-border-width) solid var(--play-ink); }
  .play-card__patch { width: 150px; height: 150px; }
  .play-topic { font-size: 0.875rem; padding: 3px 10px; }
  .play-card__title { font-size: 2.25rem; }
  .play-card__hook { font-size: 1.25rem; }
  .play-card__q { width: 180px; height: 180px; font-size: 7.5rem; }
  .play-or { margin: 0 -24px; }

  .play-podium { flex-direction: row; align-items: stretch; }
  .play-first { flex: 1.35 1 0; min-width: 0; }
  .play-first__art { height: 300px; }
  .play-first__patch { width: 180px; height: 180px; }
  .play-rest { flex: 1 1 0; min-width: 0; flex-direction: column; }
  .play-small__art { height: 150px; }
  .play-small__patch { width: 92px; height: 92px; }
  .play-small__title { font-size: 1.5rem; }

  .play-count { width: 300px; font-size: 11.875rem; }
  .play-count[data-n="go"] { font-size: 6.875rem; }
}

/* ---------- Keyframes ---------- */
@keyframes km-bob    { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes km-rise   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes km-pop    { 0% { transform: scale(1.5); } 50% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes km-bounce { 0% { transform: scale(1); } 30% { transform: scale(1.28) rotate(-10deg); } 60% { transform: scale(.94) rotate(4deg); } 100% { transform: none; } }
@keyframes km-count  { 0% { opacity: 0; transform: scale(2.6) rotate(-10deg); } 35% { opacity: 1; transform: scale(.88) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes km-wiggle { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes km-stamp  { 0% { opacity: 0; transform: rotate(-12deg) scale(1.9); } 60% { opacity: 1; transform: rotate(-12deg) scale(.92); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes km-banner { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 60% { opacity: 1; transform: scale(1.08) rotate(2deg); } 100% { opacity: 1; transform: rotate(-2deg); } }
@keyframes km-deal   { from { opacity: 0; transform: translateY(80px) rotate(-10deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes km-crown  { 0% { opacity: 0; transform: translateY(-70px) rotate(-30deg); } 70% { opacity: 1; transform: translateY(4px) rotate(6deg); } 100% { opacity: 1; transform: none; } }
@keyframes km-fall   { from { transform: translateY(-30px) rotate(0); } to { transform: translateY(110vh) rotate(620deg); } }

/* ---------- Reduced motion: no movement at all; state changes still show (stamp, ring, colors) ---------- */
@media (prefers-reduced-motion: reduce) {
  .play *, .play *::before, .play *::after { animation: none !important; transition: none !important; }
  .play-card.is-win, .play-card.is-out { transform: none; opacity: 0.35; }
  .play-card.is-win { opacity: 1; }
  .play-card.is-win .play-card__stamp { display: flex; transform: rotate(-12deg); }
  .play-confetti { display: none; }
}