/* base.css — the arena, the chunky kid buttons, the question card, the sheets. Colours come from tokens.css. */
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url(fonts/nunito-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url(fonts/nunito-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-display: swap; src: url(fonts/nunito-latin-900-normal.woff2) format("woff2"); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); font-weight: 800; color: var(--chalk); background: var(--navy-deep);
  overscroll-behavior: none; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the arena: a fixed backdrop behind every screen ---------- */
.arena { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--navy); pointer-events: none; }
.arena-sky { position: absolute; inset: 0 0 38% 0; background: radial-gradient(120% 90% at 50% 0%, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%); }
.arena-beam { position: absolute; top: -10%; width: 34%; height: 95%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 244, 222, 0.16), rgba(255, 244, 222, 0)); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.arena-beam.b1 { left: 4%; transform: rotate(18deg); animation: beam 11s ease-in-out infinite alternate; }
.arena-beam.b2 { right: 4%; transform: rotate(-18deg); animation: beam 13s ease-in-out infinite alternate-reverse; }
@keyframes beam { from { opacity: 0.55; transform: rotate(14deg); } to { opacity: 1; transform: rotate(24deg); } }
.arena-beam.b2 { animation-name: beam2; } @keyframes beam2 { from { opacity: 1; transform: rotate(-24deg); } to { opacity: 0.55; transform: rotate(-12deg); } }
.arena-crowd { position: absolute; left: 0; right: 0; bottom: 36%; height: 16%; }
.arena-floor { position: absolute; left: -20%; right: -20%; bottom: 0; height: 40%; }
.arena-floor svg, .arena-crowd svg { width: 100%; height: 100%; display: block; }

/* ---------- the app frame ---------- */
#app { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 6px; background: var(--navy); box-shadow: 0 6px 14px rgba(8, 9, 30, 0.35);
  padding: calc(env(safe-area-inset-top) + 10px) var(--gutter) 10px; }
.tb-me { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; background: var(--shade);
  border: 2px solid var(--navy-line); border-radius: var(--r-pill); padding: 3px 10px 3px 3px; height: 44px; }
.tb-me .tb-ava { width: 34px; height: 34px; flex: 0 0 34px; }
.tb-name { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-pill { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px 0 4px; flex: 0 0 auto; border-radius: var(--r-pill);
  background: var(--shade); border: 2px solid var(--navy-line); font-size: 1.05rem; }
.tb-pill svg { width: 26px; height: 26px; } .tb-pill b { font-size: 1rem; }
.tb-round { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--shade); border: 2px solid var(--navy-line);
  display: grid; place-items: center; }
.tb-round svg { width: 26px; height: 26px; }
.tb-back svg { width: 28px; height: 28px; }
.bump { animation: bump 0.45s cubic-bezier(.3,1.8,.5,1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }

.screen { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 4px var(--gutter) calc(env(safe-area-inset-bottom) + 28px);
  animation: slidein 0.32s cubic-bezier(.2,.9,.3,1.1); }
@keyframes slidein { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.screen-title { margin: 6px 0 14px; font-size: 1.6rem; font-weight: 900; text-align: center; text-shadow: 0 3px 0 var(--navy-deep); }
.screen-sub { margin: -8px 0 16px; text-align: center; font-weight: 700; color: var(--wood-line); font-size: 1rem; }

/* ---------- chunky kid buttons: they sit up and press down ---------- */
.kbtn { --c: var(--red); --cd: var(--red-deep); --t: var(--chalk);
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: var(--tap); padding: 12px 20px; border-radius: var(--r-md); background: var(--c); color: var(--t);
  font-size: 1.25rem; font-weight: 900; letter-spacing: 0.01em; box-shadow: 0 var(--press) 0 var(--cd), 0 10px 18px rgba(0,0,0,0.25);
  transform: translateY(0); transition: transform 0.08s, box-shadow 0.08s; text-shadow: 0 2px 0 rgba(0,0,0,0.18); }
.kbtn:active, .kbtn.is-down { transform: translateY(var(--press)); box-shadow: 0 0 0 var(--cd), 0 3px 6px rgba(0,0,0,0.2); }
.kbtn.red { --c: var(--red); --cd: var(--red-deep); }
.kbtn.orange { --c: var(--orange); --cd: var(--orange-deep); }
.kbtn.yellow { --c: var(--yellow); --cd: var(--yellow-deep); --t: var(--ink); text-shadow: none; }
.kbtn.blue { --c: var(--blue); --cd: var(--blue-deep); }
.kbtn.green { --c: var(--green); --cd: var(--green-deep); --t: var(--navy-deep); text-shadow: none; }
.kbtn.grape { --c: var(--grape); --cd: var(--grape-deep); }
.kbtn.ghost { --c: var(--navy-soft); --cd: var(--navy-deep); }
.kbtn.white { --c: var(--paper); --cd: var(--wood-deep); --t: var(--ink); text-shadow: none; }
.kbtn[disabled] { filter: grayscale(0.7) brightness(0.8); pointer-events: none; }
.kbtn svg { width: 32px; height: 32px; flex: 0 0 auto; }
.kbtn small { display: block; font-size: 0.8rem; font-weight: 800; opacity: 0.9; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stack { display: grid; gap: 14px; }

/* ---------- the question card (every game) ---------- */
.qc { position: relative; background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: 16px 16px 18px;
  box-shadow: 0 8px 0 var(--wood-deep), 0 18px 30px rgba(0,0,0,0.3); margin: 6px 0 18px; }
.qc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; margin-bottom: 8px; }
.qc-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); font-size: 0.85rem;
  background: var(--paper-2); color: var(--ink-soft); }
.qc-tag.nba { background: var(--navy); color: var(--yellow); }
.qc-pic { display: grid; place-items: center; min-height: 96px; margin: 2px 0 10px; }
.qc-pic svg { max-width: 100%; height: auto; max-height: clamp(64px, 17vh, 150px); }
.qc-tight { padding: 10px 12px 12px; margin-bottom: 12px; } .qc-tight .court-svg { max-height: 30vh; width: auto; max-width: 100%; margin: 0 auto; display: block; } .qc-tight .qc-pic { display: none; } .qc-tight .qc-q { font-size: calc(var(--q-size) * 0.88); } .qc-tight .qc-top { margin-bottom: 4px; }
.qc-q { font-size: var(--q-size); line-height: 1.28; font-weight: 900; margin: 0; text-align: center; text-wrap: balance; }
.qc-q .tallies { display: inline-flex; vertical-align: middle; }
.hm-speak { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; background: var(--blue); color: var(--chalk); display: grid; place-items: center;
  box-shadow: 0 5px 0 var(--blue-deep); transition: transform 0.08s, box-shadow 0.08s; }
html[data-grade="1"] .hm-speak { width: 66px; height: 66px; }
.hm-speak:active { transform: translateY(5px); box-shadow: 0 0 0 var(--blue-deep); }
.hm-speak svg { width: 34px; height: 34px; }
.hm-speak svg path.w1, .hm-speak svg path.w2 { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; }
.hm-speak.is-speaking { background: var(--green); box-shadow: 0 5px 0 var(--green-deep); }
.hm-speak.is-speaking .w1 { animation: wave 0.9s ease-in-out infinite; } .hm-speak.is-speaking .w2 { animation: wave 0.9s 0.2s ease-in-out infinite; }
@keyframes wave { 50% { opacity: 0.2; } }
.qc-top .hm-speak { margin-left: auto; }

.ans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ans.five { grid-template-columns: 1fr 1fr; } .ans.five .ab:last-child { grid-column: 1 / -1; }
.ab { --c: var(--red); --cd: var(--red-deep); position: relative; min-height: calc(var(--tap) + 14px); border-radius: var(--r-md); background: var(--c);
  color: var(--chalk); box-shadow: 0 var(--press) 0 var(--cd); font-size: var(--opt-size); font-weight: 900; line-height: 1.1;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px 10px 40px; text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,0.2);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.2s, opacity 0.2s; word-break: normal; overflow-wrap: break-word; }
.ab.long { font-size: 1.05rem; } .ab.mid { font-size: 1.3rem; } .ab.nomark { padding-left: 12px; }
.ab:active { transform: translateY(var(--press)); box-shadow: 0 0 0 var(--cd); }
.ab .shape { position: absolute; left: 10px; top: 50%; width: 24px; height: 24px; margin-top: -12px; opacity: 0.9; }
.ab:nth-child(1) { --c: var(--red); --cd: var(--red-deep); }
.ab:nth-child(2) { --c: var(--blue); --cd: var(--blue-deep); }
.ab:nth-child(3) { --c: var(--yellow); --cd: var(--yellow-deep); color: var(--ink); text-shadow: none; }
.ab:nth-child(4) { --c: var(--green); --cd: var(--green-deep); color: var(--navy-deep); text-shadow: none; }
.ab:nth-child(5) { --c: var(--grape); --cd: var(--grape-deep); }
.ab.is-wrong { filter: grayscale(1) brightness(0.62); pointer-events: none; animation: wiggle 0.45s; }   /* solid, never see-through over the crowd (4th-grade tester, 2026-10-18) */
.ab.is-right { animation: pop 0.5s cubic-bezier(.3,1.8,.5,1); box-shadow: 0 0 0 5px var(--chalk), 0 var(--press) 0 var(--cd); z-index: 2; }
.ab.is-picked { box-shadow: 0 0 0 5px var(--chalk), 0 var(--press) 0 var(--cd); transform: translateY(2px); }
.ab.is-shown { box-shadow: 0 0 0 5px var(--yellow), 0 var(--press) 0 var(--cd); }
.ans.is-locked .ab:not(.is-right):not(.is-shown) { filter: grayscale(0.8) brightness(0.7); pointer-events: none; }
@keyframes wiggle { 20% { transform: translateX(-9px) rotate(-2deg); } 40% { transform: translateX(8px) rotate(2deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
.qc.is-shake { animation: wiggle 0.45s; }

/* the shot clock (grade 4, only when Game Speed is on) */
.clock { width: 52px; height: 52px; flex: 0 0 52px; position: relative; }
.clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock .c-bg { fill: var(--paper-2); stroke: var(--wood-line); stroke-width: 6; }
.clock .c-fg { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; }
.clock b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.1rem; color: var(--ink); }

/* progress dots and the game HUD */
.dots { display: flex; gap: 6px; justify-content: center; margin: 2px 0 10px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--navy-line); border: 2px solid var(--navy-soft); }
.dots i.on { background: var(--yellow); border-color: var(--yellow-deep); }
.dots i.now { background: var(--chalk); transform: scale(1.25); }
.dots i.miss { background: var(--orange); }
.hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.hud-box { background: var(--shade); border: 2px solid var(--navy-line); border-radius: var(--r-md); padding: 6px 12px; text-align: center; min-width: 76px; }
.hud-box b { display: block; font-size: 1.45rem; font-weight: 900; line-height: 1.1; }
.hud-box span { font-size: 0.75rem; color: var(--wood-line); font-weight: 800; }
.flame { color: var(--orange); }

/* Swish says… */
.say-row { display: flex; align-items: flex-end; gap: 10px; margin: 4px 0 12px; }
.swish { width: 96px; height: 96px; flex: 0 0 96px; }
.swish.big { width: 150px; height: 150px; flex-basis: 150px; }
.swish svg { width: 100%; height: 100%; overflow: visible; }
.swish.hop svg { animation: hop 0.6s cubic-bezier(.3,1.6,.5,1); }
.swish.cheer svg { animation: cheer 0.9s ease-in-out 2; }
.swish.think svg { animation: think 1.2s ease-in-out; }
.swish.idle svg { animation: idle 3.2s ease-in-out infinite; }
@keyframes hop { 40% { transform: translateY(-26px) scale(1.04, 0.96); } }
@keyframes cheer { 25% { transform: translateY(-18px) rotate(-8deg); } 75% { transform: translateY(-18px) rotate(8deg); } }
@keyframes think { 30% { transform: rotate(-6deg); } 70% { transform: rotate(4deg); } }
@keyframes idle { 50% { transform: translateY(-5px); } }
.bubble { position: relative; flex: 1; background: var(--paper); color: var(--ink); border-radius: var(--r-md); padding: 12px 14px; font-size: 1.1rem; line-height: 1.3;
  box-shadow: 0 5px 0 var(--wood-deep); display: flex; align-items: center; gap: 10px; min-height: 64px; }
.bubble::before { content: ""; position: absolute; left: -12px; bottom: 16px; border: 12px solid transparent; border-right-color: var(--paper); border-left: 0; }
.bubble p { margin: 0; flex: 1; }
.bubble .hm-speak { width: 48px; height: 48px; } .bubble .hm-speak svg { width: 28px; height: 28px; }
/* a 320 iPhone SE (Safari's engine, 2026-10-17): the big Swish plus a bubble that would not shrink below its
   longest word ran 49pt past the screen. The bubble may shrink, and on the smallest phones Swish is his normal size. */
.bubble, .bubble p { min-width: 0; } .bubble p { overflow-wrap: break-word; }
@media (max-width: 359px) {
  .swish.big { width: 96px; height: 96px; flex-basis: 96px; }
  .say-row { gap: 8px; }
  .bubble { font-size: 1rem; padding: 10px 12px; gap: 8px; }
  .bubble .hm-speak { width: 44px; height: 44px; }
}

/* sheets (settings, sign in, results) */
.veil { position: fixed; inset: 0; z-index: 50; background: rgba(8, 9, 30, 0.72); display: flex; align-items: flex-end; justify-content: center; animation: fade 0.2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: var(--maxw); max-height: 92vh; overflow: auto; background: var(--paper); color: var(--ink); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 22px var(--gutter) calc(env(safe-area-inset-bottom) + 22px); animation: up 0.3s cubic-bezier(.2,.9,.3,1.1); }
@keyframes up { from { transform: translateY(40%); opacity: 0; } }
.sheet h2 { margin: 0 0 14px; font-size: 1.5rem; font-weight: 900; text-align: center; }
.sheet p { font-weight: 700; line-height: 1.4; color: var(--ink-soft); }
.sheet { position: relative; }
.sheet-x { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border-radius: 50%; background: var(--paper-2); color: var(--ink); display: grid; place-items: center; }
.sheet-x svg { width: 22px; height: 22px; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 2px solid var(--paper-2); font-size: 1.15rem; }
.switch:last-of-type { border-bottom: 0; }
.seg { display: flex; background: var(--paper-2); border-radius: var(--r-pill); padding: 4px; gap: 4px; }
.seg button { min-width: 64px; min-height: 44px; border-radius: var(--r-pill); font-weight: 900; color: var(--ink-soft); padding: 0 12px; }
.seg button.on { background: var(--navy); color: var(--chalk); }
.field { display: block; margin: 0 0 12px; }
.field span { display: block; font-size: 0.95rem; margin: 0 0 6px; color: var(--ink-soft); }
.field input { width: 100%; height: 54px; border-radius: var(--r-sm); border: 3px solid var(--paper-2); background: #fff; padding: 0 14px; font: inherit; font-size: 1.1rem; color: var(--ink); -webkit-user-select: text; user-select: text; }
.field input:focus { outline: none; border-color: var(--blue); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; line-height: 1.35; margin: 6px 0 16px; color: var(--ink); }
.check input { width: 28px; height: 28px; flex: 0 0 28px; accent-color: var(--red); }
.err { color: var(--red); min-height: 1.4em; font-size: 1rem; margin: 0 0 10px; }
.tabs2 { display: flex; gap: 8px; margin: 0 0 16px; }
.tabs2 button { flex: 1; min-height: 48px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-soft); font-weight: 900; }
.tabs2 button.on { background: var(--navy); color: var(--chalk); }

/* toasts and big moments */
/* a toast rises from the bottom, never over a screen's title (critic, round 11: "You need 5¢ more" sat on "My Court"), and a long
   one wraps inside the phone instead of running off its sides */
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 28px); z-index: 60; transform: translateX(-50%); background: var(--yellow); color: var(--ink);
  padding: 12px 20px; border-radius: var(--r-lg); font-size: 1.15rem; font-weight: 900; line-height: 1.25; box-shadow: 0 6px 0 var(--yellow-deep); animation: toast 2.4s forwards;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; text-align: center; white-space: normal; pointer-events: none; }
/* on a paying screen the bottom IS the play (the jar's and the shop's drop spot), so a pop-up rises under the top bar there instead
   (critic, round 14: "Your 5 pennies went in your bank." landed on the toddler jar's drop area; round 11 keeps it off titles elsewhere) */
body:has(.ct-into) .toast { bottom: auto; top: calc(env(safe-area-inset-top) + 92px); }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 20px) scale(0.8); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.06); } 20% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 10px); } }
.plus { position: fixed; z-index: 61; font-size: 2rem; font-weight: 900; color: var(--yellow); text-shadow: 0 3px 0 var(--yellow-deep), 0 0 18px rgba(0,0,0,0.4); pointer-events: none; animation: rise 1.1s forwards; }
@keyframes rise { to { transform: translateY(-80px) scale(1.2); opacity: 0; } }
.fxlayer { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.fx-coin { position: absolute; width: 28px; height: 28px; }
.fx-bit { position: absolute; width: 10px; height: 14px; border-radius: 3px; }
.center-burst { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 64px); z-index: 58; display: grid; place-items: center; pointer-events: none; }
.center-burst div { font-size: 2.3rem; font-weight: 900; color: var(--yellow); text-shadow: 0 5px 0 var(--red-deep), 0 0 30px rgba(0,0,0,0.5); animation: burst 1.3s forwards; text-align: center; line-height: 1;
  /* a solid banner, so HEAT CHECK never prints straight onto the score digits under it (three testers, rounds 1 and 3) */
  background: var(--navy-deep); border: 3px solid var(--yellow); border-radius: var(--r-lg); padding: 14px 22px 16px; box-shadow: 0 8px 0 rgba(0,0,0,0.35); }
@keyframes burst { 0% { transform: scale(0.3) rotate(-10deg); opacity: 0; } 25% { transform: scale(1.15) rotate(3deg); opacity: 1; } 40% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1) translateY(-30px); } }

/* result card */
.result { text-align: center; background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: 22px 18px; box-shadow: 0 8px 0 var(--wood-deep); margin: 10px 0 18px; }
.result h2 { margin: 6px 0 4px; font-size: 2rem; font-weight: 900; }
.result .big { font-size: 3rem; font-weight: 900; color: var(--red); margin: 4px 0; }
.result p { margin: 6px 0; font-weight: 800; color: var(--ink-soft); font-size: 1.1rem; }
.result .earn { display: inline-flex; align-items: center; gap: 8px; background: var(--paper-2); border-radius: var(--r-pill); padding: 8px 16px; font-size: 1.2rem; color: var(--ink); margin: 8px 0; }
.result .earn svg { width: 28px; height: 28px; }
.gate { text-align: center; }

/* walkthrough scoreboard */
.board { background: var(--navy-deep); border: 6px solid var(--navy-line); border-radius: var(--r-md); padding: 14px; text-align: center; margin: 4px 0 12px;
  box-shadow: inset 0 0 0 3px var(--navy-soft); }
.board .digits { font-size: 3.4rem; font-weight: 900; color: var(--yellow); letter-spacing: 0.04em; text-shadow: 0 0 16px rgba(255, 201, 60, 0.55); min-height: 1.2em; line-height: 1.1; }
html[data-grade="1"] .board .digits { font-size: 4rem; }
.board .lbl { font-size: 0.8rem; color: var(--blue); letter-spacing: 0.1em; }
.steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.steps li { background: var(--paper); color: var(--ink); border-radius: var(--r-sm); padding: 10px 12px; font-size: 1.1rem; line-height: 1.3; opacity: 0.35; transition: opacity 0.3s, transform 0.3s; }
.steps li.on { opacity: 1; transform: scale(1.01); box-shadow: 0 4px 0 var(--wood-deep); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .toast, .center-burst div, .plus { animation: fadeonly 1.6s forwards !important; }
  @keyframes fadeonly { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
}

.tb-say { background: var(--blue); border-color: var(--blue-deep); } .tb-say.is-speaking { background: var(--green); }
/* end screens fit a phone: the smaller Swish and number keep the next button on screen (9-year-old round 3) */
@media (max-height: 760px) { .result { padding: 14px 14px 16px; } .result .swish.big { width: 96px; height: 96px; } .result h2 { font-size: 1.6rem; } .result .big { font-size: 2.3rem; } .result p { margin: 4px 0; font-size: 1rem; } }

/* word answers carry a picture a pre-reader can match (6-year-old round 4) */
.ab.has-pic { flex-direction: column; gap: 4px; padding: 8px; } .ab .ab-pic { width: 44px; height: 44px; flex: 0 0 auto; }
html[data-grade="1"] .ab .ab-pic { width: 52px; height: 52px; }

.sheet-say { position: absolute; top: 12px; left: 12px; width: 48px !important; height: 48px !important; } .sheet-say svg { width: 26px !important; height: 26px !important; }

/* ---------- key words and subtitles (Teddy, 2026-09-28: "assisted like subtitles in a video ... very neat feel") ---------- */
/* the words that decide the math wear a highlighter, always; the word being read lights up under the voice */
.qc-q mark.kw { background: color-mix(in srgb, var(--yellow) 55%, transparent); color: var(--ink); border-radius: 10px;
  padding: 0 0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: inset 0 -0.14em 0 var(--orange); }
/* inline, never inline-block: a period must stay on the same line as its word (a "." once wrapped onto the next line) */
.qc-q .w { border-radius: 8px; padding: 0.02em 0.06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-color 0.12s, color 0.12s; }
.qc-q .w.is-said { background: var(--blue); color: var(--chalk); box-shadow: 0 3px 0 var(--blue-deep); }
.ab.is-said { outline: 4px solid var(--chalk); outline-offset: 3px; transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .qc-q .w, .ab.is-said { transform: none; transition: none; } }

/* a name someone already has: plainly grey, not a muted colour (testers, rounds 3 and 4) */
.name-opt[disabled] { --c: #C3C6D1; --cd: #9A9EAD; --t: #5F6475; filter: none; }
/* a sheet with a speaker button starts its words below the button (toddler parent, round 10: the button sat on the "A" of
   "A grown-up makes the account once") */
.sheet:has(> .sheet-say) { padding-top: 66px; }
/* the kid's name is never cut off: a long name with a long bank ("Sharp Sta…" beside "$2 and 3¢", parent, round 10) wraps
   onto two short lines instead */
.tb-name { white-space: normal; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; word-break: normal; }

/* BETA TEST + the grown-ups' note (Teddy, 2026-10-19: "something on each page that still says BETA TEST v5.3 or something small
   … They should see that ability to make a note but it should [not] obstruct the play"): one thin row along the top of the bar
   on every screen — the version in the top-left corner (dark words on a light pill), the note in the top-right corner (light
   words on the bar's own navy, never on the photo). The bar grows by the row, so nothing in the game is ever under either. */
.topbar { flex-wrap: wrap; row-gap: 4px; padding-top: calc(env(safe-area-inset-top) + 4px); padding-bottom: 9px; }
.tb-beta-row { flex: 0 0 100%; order: -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; min-width: 0; }
.tb-beta { flex: 0 0 auto; height: 18px; line-height: 18px; padding: 0 8px; border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.06em; white-space: nowrap; }
.tb-note { position: relative; flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 9px 0 7px;
  border-radius: var(--r-pill); background: var(--navy-soft); border: 1.5px solid var(--navy-line); color: var(--chalk); font-size: 11px; font-weight: 800; white-space: nowrap; }
.tb-note svg { width: 11px; height: 11px; flex: 0 0 11px; }
.tb-note span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tb-note::after { content: ''; position: absolute; inset: -4px -2px; }   /* a grown-up's finger: the tap area reaches into the bar's own padding, not past it */

/* the note sheet (note.js) */
.nt-sheet h2 { font-size: 1.3rem; margin-bottom: 8px; }
.nt-sheet .nt-why { margin: 0 0 10px; text-align: center; font-size: 0.95rem; line-height: 1.3; }
.nt-sheet .nt-field { margin: 0 0 4px; }
.nt-sheet textarea { display: block; width: 100%; min-height: 100px; resize: vertical; border-radius: var(--r-sm); border: 3px solid var(--paper-2); background: #fff;
  padding: 10px 12px; font: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--ink); -webkit-user-select: text; user-select: text; }
.nt-sheet textarea:focus { outline: none; border-color: var(--blue); }
.nt-count { text-align: right; font-size: 0.8rem; color: var(--ink-soft); margin: 0 2px 10px; } .nt-count.is-full { color: var(--red); }
.nt-pics { display: flex; gap: 8px; margin: 0 0 10px; }   /* side by side, so Send is in view on a phone */
.nt-pic { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 4px 12px; border-radius: var(--r-md);
  background: var(--paper-2); border: 2px solid var(--wood-line); color: var(--ink); font-size: 0.9rem; font-weight: 900; line-height: 1.15; text-align: center; cursor: pointer; }
.nt-pics .nt-pic { flex: 1 1 0; }
.nt-pic input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nt-have { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.nt-have img { width: 56px; max-height: 96px; object-fit: contain; border-radius: 8px; border: 2px solid var(--paper-2); background: #fff; flex: 0 0 auto; }
.nt-have .nt-pic { flex: 0 1 auto; }
.nt-status { min-height: 1.2em; font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 4px; }
.nt-sheet .nt-thanks { text-align: center; font-size: 1.3rem; font-weight: 900; color: var(--ink); margin: 8px 0 18px; }
.nt-sheet .nt-thanks-sub { text-align: center; margin: -8px 0 16px; }