/* HQ - two skins, one set of components.
 *
 * Every rule below this block speaks in tokens, never in literal colors, so the
 * whole app changes skin by re-pointing the tokens. Harrison picks which.
 *
 *   INSERT COIN - the arcade cabinet. CRT black, neon orange, scanlines.
 *                 Its own guide names kids' work and launch pages as what it is
 *                 for, which is exactly this app.
 *   SCOREBOARD  - the stadium LED board. Amber on board black, unlit dots
 *                 showing. Its guide says numbers are the news.
 *
 * Type is the part that cannot be shared. Insert Coin shouts in Press Start 2P
 * and talks in VT323. Scoreboard lights numbers in Doto and explains in Outfit,
 * and its labels are NEVER in dots. So there are three faces, not one: --pixel
 * for headings and labels, --num for digits, --body for prose.
 */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Outfit:wght@400;600;700&family=Doto:wght@400;900&display=swap');

/* ------------------------------------------------- INSERT COIN (the default) */
:root {
  --bg: #0b0a12;
  --bg-2: #14121f;
  --card: #14121f;
  --line: #3b3366;
  --ink: #ede7ff;
  --muted: #8c84b8;

  --turq: #29e6ff;                     /* structure: frames, labels, dividers */
  --turq-deep: #1a8fa6;
  --blue: #29e6ff;
  --blue-deep: #3b1b7a;                /* the hard drop under display type */
  --green: #ffe14d;                    /* good. Insert Coin has no green - scores are yellow */
  --green-deep: #c9a400;
  --hot: #ff6b1a;                      /* the voice: primary button, take card */
  --bad: #ff3ea5;

  --shade: #29e6ff33;
  --radius: 4px;                       /* arcade corners, not app corners */
  --shadow: 0 6px 0 #05040a, 0 10px 26px rgba(0, 0, 0, .5);

  --pixel: "Press Start 2P", "Courier New", ui-monospace, monospace;
  --num: "Doto", "Press Start 2P", ui-monospace, monospace;
  --num-set: "ROND" 0;
  --body: "VT323", ui-monospace, monospace;
  --body-size: 17px;                   /* VT323 runs small - a size up, per its guide */

  --sunk: #14121f;                     /* anything recessed: tracks, fields, displays */
  --on-bright: #0b0a12;                /* text sitting ON a lit button */
  --drop: #05040a;                     /* the hard offset shadow under a control */
  --drop-go: #3b1b7a;                  /* the same under the ONE primary button */
  --btn-a: #1b1830;                    /* a raised button, top */
  --btn-b: #14121f;                    /* a raised button, bottom */
  --rule: #3b3366;                     /* figure gridlines, empty pips */
  --fire: #ff6b1a;                     /* a streak that is running hot */

  --glow: 0 0 12px rgba(41, 230, 255, .55);
  --scan: rgba(0, 0, 0, .35);          /* the CRT lines over everything */
  --page: radial-gradient(1200px 700px at 20% -10%, #1a1330 0%, var(--bg) 60%);
  --dots: none;
}

/* ------------------------------------------------------------- SCOREBOARD */
:root[data-theme="scoreboard"] {
  --bg: #0a0908;
  --bg-2: #060505;
  --card: #060505;
  --line: #2a231a;
  --ink: #f4ebdd;
  --muted: #8a7a5e;

  --turq: #ffb000;                     /* amber is the only thing that lights up */
  --turq-deep: #a87400;
  --blue: #ffb000;
  --blue-deep: #2a231a;
  --green: #ffb000;
  --green-deep: #a87400;
  --hot: #ffb000;
  --bad: #ff4b2b;                      /* red only ever means trouble */

  --shade: #ffb0002e;
  --radius: 6px;                       /* hardware, not paper */
  --shadow: 0 6px 0 #000, 0 10px 26px rgba(0, 0, 0, .55);

  /* A label on a board is never in dots - it would compete with the number it
     names. Only --num is dotted here. */
  --pixel: "Outfit", system-ui, sans-serif;
  --num: "Doto", ui-monospace, monospace;
  --num-set: "ROND" 100;
  --body: "Outfit", system-ui, sans-serif;
  --body-size: 16px;

  --sunk: #060505;
  --on-bright: #0a0908;
  --drop: #000;
  --drop-go: #3a2a00;
  --btn-a: #0f0d0a;
  --btn-b: #060505;
  --rule: #2a231a;
  --fire: #ffb000;

  --glow: 0 0 12px rgba(255, 176, 0, .6);
  --scan: transparent;                 /* a board is not a CRT */
  --page: var(--bg);
  /* the dead LEDs behind every number. Removing them removes the board. */
  --dots: radial-gradient(circle, #261c08 1.1px, transparent 1.5px);
}

/* Scoreboard sets labels in Outfit, so they need the weight and tracking that
   the pixel face carried on its own. */
:root[data-theme="scoreboard"] .mark,
:root[data-theme="scoreboard"] .subject-name,
:root[data-theme="scoreboard"] .v-ref,
:root[data-theme="scoreboard"] .done-badge,
:root[data-theme="scoreboard"] .bonus-head,
:root[data-theme="scoreboard"] .rank,
:root[data-theme="scoreboard"] .small-head {
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}

/* Doto draws "." as a diamond of dots, so 112.4 reads as 112+4. The point is
   set in Outfit; the digits stay Doto. */
.pt { font-family: "Outfit", sans-serif; font-weight: 700; font-variation-settings: normal; margin: 0 .04em; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--page);
  color: var(--ink);
  font: var(--body-size)/1.5 var(--body);
  overscroll-behavior: none;
}

/* CRT scanlines over everything, and a slight glass curve at the edges */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 99; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--scan) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 98; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* the pixel font is for shouting, never for reading */
h1, h2, .level, .xp-text, .set-title, .concept, .step-count, .big-btn, .key,
.toast, .flash, .subject-title, .tagline, .rung-note, .badge-name {
  font-family: var(--pixel);
  letter-spacing: 0;
}

main { padding: 0 16px 40px; max-width: 900px; margin: 0 auto; }

/* ------------------------------------------------------------------ topbar */

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  max-width: 900px; margin: 0 auto;
}
.brand .mark {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 6px;
  background: linear-gradient(145deg, var(--turq), var(--blue-deep));
  font-family: var(--pixel); font-size: 13px; color: var(--on-bright);
  box-shadow: 0 4px 0 var(--drop), var(--glow);
}
.meter { flex: 1; }
.level { font-size: 10px; color: var(--turq); text-shadow: var(--glow); }
.xp { height: 14px; background: var(--sunk); border-radius: 0; overflow: hidden; border: 2px solid var(--line);
      image-rendering: pixelated; }
.xp-fill { height: 100%; width: 0; transition: width .4s steps(12, end);
  background: repeating-linear-gradient(90deg, var(--turq) 0 10px, var(--turq-deep) 10px 12px); box-shadow: var(--glow); }
.xp-text { font-size: 8px; color: var(--muted); margin-top: 5px; }
.right { display: flex; align-items: center; gap: 10px; }
.flame { font-size: 14px; color: var(--ink); }
.icon-btn {
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 12px; width: 42px; height: 42px; font-size: 18px;
}

/* ----------------------------------------------------------------- screens */

.screen { display: none; }
.screen.on { display: block; animation: in .25s ease; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

h1 { font-size: 17px; line-height: 1.7; margin: 20px 0 16px; text-shadow: 0 3px 0 var(--drop); }
.small-head { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 28px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.hero { text-align: center; padding: 40px 10px 20px; }
.big-mark {
  width: 150px; height: 150px; margin: 0 auto 10px; border-radius: 10px;
  background: linear-gradient(160deg, var(--green), var(--turq) 45%, var(--blue-deep));
  color: var(--on-bright); font-family: var(--pixel); font-size: 38px; display: grid; place-items: center;
  box-shadow: 0 8px 0 var(--drop), 0 0 30px rgba(46,196,182,.5);
}
.hero-sprite { width: 172px; margin: 4px auto 2px; display: block;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-7px); } }
.hud-sprite { width: 38px; border-radius: 6px; }
.press { font-family: var(--pixel); font-size: 10px; color: var(--blue); animation: blink 1.1s steps(2,end) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tagline { color: var(--turq); margin: 6px 0 24px; font-size: 10px; text-transform: uppercase; }
.big-line { font-size: 20px; font-weight: 700; color: var(--turq); }
.trophy { font-size: 74px; }

/* ------------------------------------------------------------------ buttons */

.big-btn {
  appearance: none; border: 0; border-radius: 4px; padding: 18px 26px;
  font-size: 13px; color: var(--on-bright); text-transform: uppercase;
  background: linear-gradient(180deg, var(--green), var(--turq));
  box-shadow: 0 6px 0 var(--drop-go), var(--glow); min-width: 170px;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--drop-go); }
.big-btn:disabled { opacity: .35; }
.big-btn.ready { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.03); } }
.ghost-btn {
  display: block; margin: 18px auto 0; background: transparent; color: var(--blue);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 20px; font-size: 15px;
}

/* -------------------------------------------------------------------- sets */

.set-list { display: grid; gap: 12px; }
.set-card {
  text-align: left; display: grid; gap: 8px; padding: 18px;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); color: var(--ink);
  box-shadow: 0 5px 0 var(--drop);
}
.set-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--drop); }
.set-card.done { border-color: var(--green-deep); }
.set-title { font-size: 13px; line-height: 1.6; color: var(--turq); }
.set-meta { font-size: 12px; color: var(--muted); }

.badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge {
  width: 56px; height: 56px; display: grid; place-items: center; font-size: 26px;
  background: var(--card); border: 2px solid var(--line); border-radius: 4px; box-shadow: 0 4px 0 var(--drop);
}
.badge.locked { filter: grayscale(1); opacity: .28; }

/* -------------------------------------------------------------------- play */

.play-head { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.play-title { flex: 1; }
.set-name { font-size: 12px; color: var(--muted); }
.concept { font-size: 12px; line-height: 1.6; color: var(--ink); }
.rung-note { font-size: 8px; color: var(--turq); text-align: right; }

.trail { display: flex; gap: 8px; margin: 14px 0 16px; }
.pip { width: 34px; height: 10px; border-radius: 0; background: var(--sunk); border: 2px solid var(--drop); }
.pip.now { background: var(--blue); }
.pip.done { background: var(--green); box-shadow: 0 0 10px rgba(74,222,128,.6); }

.card {
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
/* corner rivets, like a cabinet bezel */
.card { position: relative; }
.card::before, .card::after {
  content: ""; position: absolute; width: 6px; height: 6px; background: var(--turq); opacity: .6;
}
.card::before { left: 8px; top: 8px; }
.card::after { right: 8px; top: 8px; }
.prompt { font-size: 20px; font-weight: 600; margin: 0 0 14px; }
.fig-wrap { display: grid; place-items: center; margin: 10px 0 16px; }
.figure { max-width: min(100%, 380px); height: auto; }

.answers { display: grid; gap: 14px; }
.answers.tight { margin-top: 10px; }
.choice {
  min-height: 76px; padding: 20px 24px; font-size: 21px; font-weight: 600;
  display: flex; align-items: center; text-align: left; color: var(--ink);
  background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); border: 3px solid var(--turq-deep);
  border-radius: 6px; box-shadow: 0 7px 0 var(--drop), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .12s, transform .06s, box-shadow .06s;
}
.choice:hover { border-color: var(--turq); box-shadow: 0 7px 0 var(--drop), 0 0 16px rgba(46,196,182,.35); }
.choice:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--drop); }
.choice.right { border-color: var(--green); background: var(--sunk); }
.choice.wrong { border-color: var(--line); opacity: .5; }

.pad { display: grid; gap: 10px; }
.pad-display {
  background: var(--sunk); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; font-size: 30px; text-align: right; font-variant-numeric: tabular-nums;
}
.pad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.key {
  min-height: 74px; padding: 0; font-size: 20px; border-radius: 6px; color: var(--ink);
  background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); border: 3px solid var(--line);
  box-shadow: 0 6px 0 var(--drop);
}
.key:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--drop); }
.key.go {
  grid-column: 1 / -1; color: var(--on-bright); font-size: 16px; min-height: 80px; text-transform: uppercase;
  background: linear-gradient(180deg, var(--green), var(--turq)); border: 0;
  box-shadow: 0 6px 0 var(--drop-go);
}

.hint {
  margin: 14px 2px 0; padding: 0 14px; max-height: 0; overflow: hidden;
  color: var(--blue); border-left: 3px solid transparent; transition: all .3s ease;
}
.hint.show { max-height: 180px; padding: 12px 14px; border-left-color: var(--blue); background: var(--sunk); border-radius: 0 12px 12px 0; }

/* ------------------------------------------------------------------- modal */

.modal { position: fixed; inset: 0; background: rgba(5, 14, 22, .82); display: none; padding: 18px; z-index: 40; overflow: auto; }
.modal.on { display: grid; place-items: center; }
.modal-card {
  background: var(--card); border: 3px solid var(--turq); border-radius: 6px;
  padding: 24px; max-width: 640px; width: 100%; box-shadow: var(--shadow);
}
.modal-card h2 { margin: 0 0 10px; color: var(--turq); font-size: 14px; line-height: 1.7; text-shadow: 0 3px 0 var(--drop); }
.step-count { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.step-text { font-size: 19px; line-height: 1.5; margin: 0 0 14px; }
.step-ask { font-size: 16px; font-weight: 700; color: var(--blue); margin: 16px 0 0; }

/* -------------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--turq); color: var(--on-bright); font-size: 11px; line-height: 1.6;
  padding: 14px 20px; border-radius: 4px; border: 2px solid var(--drop); opacity: 0; pointer-events: none;
  transition: all .25s ease; z-index: 60; box-shadow: var(--shadow); max-width: 92vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.flash {
  position: fixed; left: 50%; top: 30%; transform: translateX(-50%);
  font-size: 22px; color: var(--green); pointer-events: none;
  animation: rise 1s ease forwards; z-index: 55; text-shadow: 0 4px 18px rgba(0,0,0,.5);
}
@keyframes rise { to { transform: translate(-50%, -60px); opacity: 0; } }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

/* ----------------------------------------------------------------------- HQ */

.hq-wrap { max-width: 720px; margin: 0 auto; }
.panel { display: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.panel.on { display: block; }
.field { display: grid; gap: 6px; margin: 12px 0; font-size: 14px; color: var(--muted); }
.field input, #pin {
  background: var(--sunk); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; color: var(--ink); font-size: 16px; width: 100%;
}
.photo-btn {
  display: block; text-align: center; margin: 16px 0; padding: 18px;
  border: 2px dashed var(--turq-deep); border-radius: 16px; color: var(--turq); font-weight: 700;
}
.read-table { overflow-x: auto; margin: 12px 0; }
.read-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.read-table th, .read-table td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; }
.read-table input, .read-table select {
  background: var(--sunk); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 6px; font-size: 13px; width: 100%;
}
.status ul { padding-left: 18px; }
.status h3 { color: var(--blue); }

/* ---------------------------------------------------------------- figures */

.fig-shade { fill: var(--shade); stroke: var(--ink); stroke-width: 2; }
.fig-open { fill: none; stroke: var(--ink); stroke-width: 2; }
.fig-solid { stroke: var(--ink); stroke-width: 2; }
.fig-dash { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 5 4; }
.fig-grid { stroke: var(--rule); stroke-width: 1; }
.fig-ra { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.fig-text, .fig-bold, .fig-ital {
  fill: var(--ink); font-size: 15px; text-anchor: middle; dominant-baseline: middle;
}
.fig-bold { font-weight: 700; }
.fig-ital { font-style: italic; font-family: Georgia, "Times New Roman", serif; font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* subjects - math is the first one, others slot in beside it */
.subject { margin-top: 18px; }
.subject-title { font-size: 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--turq); margin: 0 0 10px; }
.subject-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------------------------------------------- landscape (iPad on its side) */

@media (orientation: landscape) and (min-width: 820px) {
  main { max-width: 1120px; }

  /* picture beside the answers instead of above them, so nothing scrolls */
  .card {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; align-items: center;
  }
  .card .prompt { grid-column: 1 / -1; margin-bottom: 4px; }
  /* The picture column is about 560px wide in landscape and the figure was
     capped at 320, so it sat small and low against a lot of empty blue. Fill
     the column and centre it against the pad; capped by height as well, because
     the pad is the tall column and nothing here may start the page scrolling. */
  .fig-wrap { margin: 0; display: grid; place-items: center; height: 100%; }
  .figure { max-width: min(100%, 460px); max-height: 46vh; }

  .hero { padding: 14px 10px 10px; }
  .big-mark { width: 104px; height: 104px; font-size: 26px; border-radius: 8px; margin-bottom: 6px; }
  .hero-sprite { width: 104px; }
  .set-list { grid-template-columns: repeat(2, 1fr); }
  .subject { grid-column: 1 / -1; }

  .modal-card { max-width: 980px; }
  #explainer-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; align-items: start; }
  #explainer-body .step-count, #explainer-body .step-text { grid-column: 1 / -1; }
  #explainer-body .fig-wrap { grid-column: 1; }
  #explainer-body .step-ask { grid-column: 2; grid-row: 3; margin-top: 0; }
  #explainer-body .answers { grid-column: 2; grid-row: 4; align-self: start; }
  #explainer-body .big-btn { grid-column: 2; grid-row: 4; }
  #explainer-body .fig-wrap { grid-row: 3 / span 2; }
  #explainer-body:not(:has(.fig-wrap)) { grid-template-columns: 1fr; }
  #explainer-body:not(:has(.fig-wrap)) > * { grid-column: 1 !important; }
}

/* the mission list is a grid in landscape; keep the subject block spanning it */
.subject { display: contents; }
.subject-title { grid-column: 1 / -1; }

/* ------------------------------------------------- combo, rank, celebration */

.rank { font-family: var(--pixel); font-size: 8px; color: var(--green); margin-top: 4px; }
.combo {
  font-family: var(--pixel); font-size: 10px; color: var(--on-bright); background: var(--green);
  border: 2px solid var(--drop); border-radius: 4px; padding: 6px 10px; opacity: 0;
  transform: scale(.8); transition: opacity .15s, transform .15s; white-space: nowrap;
}
.combo.on { opacity: 1; transform: scale(1); }
.combo.fire { background: var(--fire); animation: fire .5s ease-in-out infinite alternate; }
@keyframes fire { to { transform: scale(1.07); box-shadow: 0 0 18px rgba(255,159,28,.8); } }

.rung-note.boss { color: var(--fire); animation: fire .7s ease-in-out infinite alternate; }

body.shake { animation: shk .42s ease; }
@keyframes shk {
  10%,90% { transform: translateX(-3px); } 20%,80% { transform: translateX(5px); }
  30%,50%,70% { transform: translateX(-8px); } 40%,60% { transform: translateX(8px); }
}

.pop { animation: pop .34s ease; }
@keyframes pop { 40% { transform: translateY(-9px) scale(1.16) rotate(-5deg); } }

/* ---------------------------------------------------------- bonus round */

.bonus { display: none; margin: 8px auto 20px; max-width: 460px; }
.bonus.on { display: block; }
.bonus-head { font-family: var(--pixel); font-size: 10px; color: var(--turq); margin-bottom: 16px; }

.court { position: relative; height: 150px; }
.backboard {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 118px; height: 66px; border: 4px solid var(--ink); border-radius: 4px;
  background: rgba(255,255,255,.05);
}
.hoop {
  position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  width: 66px; height: 16px; border: 5px solid var(--fire); border-top: 0;
  border-radius: 0 0 40px 40px;
}
.ball { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 40px; }

.power {
  position: relative; height: 26px; margin: 18px 0; border: 3px solid var(--line);
  border-radius: 4px; background: var(--sunk); overflow: hidden;
}
.sweet { position: absolute; left: 42%; width: 16%; top: 0; bottom: 0; background: rgba(74,222,128,.35);
         border-left: 2px solid var(--green); border-right: 2px solid var(--green); }
.marker { position: absolute; top: 0; bottom: 0; width: 6px; background: var(--turq); box-shadow: var(--glow); }
.shots { font-family: var(--pixel); font-size: 12px; color: var(--ink); margin-top: 14px; }

/* =======================================================================
   Design pass: start screen, stage clear, and a little depth everywhere
   ======================================================================= */

/* a slow arcade grid behind everything, under the scanlines */
body {
  background-image:
    linear-gradient(rgba(46,196,182,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,196,182,.045) 1px, transparent 1px),
    var(--page);
  background-size: 46px 46px, 46px 46px, auto;
  animation: drift 60s linear infinite;
}
@keyframes drift { to { background-position: 46px 46px, 46px 46px, 0 0; } }

/* ------------------------------------------------------------- start screen */

.hero.start { padding: 26px 10px 10px; }
.wordmark {
  font-family: var(--pixel); font-size: 54px; line-height: 1;
  background: linear-gradient(180deg, var(--green), var(--turq) 45%, var(--blue-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 var(--drop)) drop-shadow(0 0 22px rgba(46,196,182,.45));
  letter-spacing: 4px;
}
.hero.start .tagline { margin: 14px 0 10px; font-size: 11px; letter-spacing: 2px; }
.hero.start .hero-sprite { width: 210px; margin: 0 auto 22px; }
.press { margin-top: 14px; }

/* -------------------------------------------------------------- stage clear */

.done {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  max-width: 880px; margin: 0 auto; padding: 14px 0 20px; text-align: center;
}
.done-badge {
  display: inline-block; font-family: var(--pixel); font-size: 15px; color: var(--on-bright);
  background: linear-gradient(180deg, #ffd93d, var(--fire)); padding: 12px 20px;
  border: 3px solid var(--drop); border-radius: 6px; box-shadow: 0 6px 0 var(--drop);
  transform: rotate(-1.5deg); margin-bottom: 8px;
}
.done .hero-sprite.small { width: 120px; margin: 4px auto 10px; }
.done .big-line { font-size: 15px; font-family: var(--pixel); line-height: 1.7; margin: 6px 0 16px; }

.score {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 4px auto 14px; max-width: 420px;
}
.score > div {
  background: var(--card); border: 2px solid var(--line); border-radius: 6px;
  padding: 12px 6px; box-shadow: 0 4px 0 var(--drop);
}
.score span { display: block; font-family: var(--pixel); font-size: 18px; color: var(--turq); }
.score em { display: block; font-style: normal; font-size: 10px; color: var(--muted); margin-top: 6px; }

.ghost-alt {
  background: transparent; color: var(--turq); border: 3px solid var(--turq-deep);
  box-shadow: 0 5px 0 var(--drop);
}

.bonus { margin: 0 auto; }
.bonus-head { margin-bottom: 12px; }
.court { height: 132px; }

@media (orientation: landscape) and (min-width: 820px) {
  .done { grid-template-columns: 1fr 1fr; align-items: center; text-align: center; }
  .done .hero-sprite.small { width: 148px; }
}

/* ------------------------------------------------------------- odds and ends */

.set-card { position: relative; padding-right: 46px; }
.set-card::after {
  content: "▶"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--turq); font-size: 14px; opacity: .8;
}
.set-card.done::after { content: "✓"; color: var(--green); }

.badge { position: relative; }
.badge:hover::after {
  content: attr(title); position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--muted); white-space: nowrap;
}

.hint.show { box-shadow: inset 3px 0 0 var(--blue); }
.prompt { line-height: 1.35; }
.trophy { display: none; }              /* the STAGE CLEAR plate says it better */

/* the way out sits last, under the bonus - never above it */
.done-foot { grid-column: 1 / -1; }
.done-foot .big-line { margin: 10px 0 14px; }
@media (orientation: landscape) and (min-width: 820px) {
  .done-foot { margin-top: 4px; }
}

/* no HUD on the attract screen - level 0 of 100 XP says nothing yet */
body.at-start .topbar { visibility: hidden; }
body.at-start .hero.start { padding-top: 6px; }

/* a drawn hoop, not two CSS boxes pretending to be one */
.hoop-art {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  height: 128px; width: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.court { height: 168px; }
.ball { bottom: 4px; }
/* the flight lives in ball.js now - it is a parabola, not a keyframe */

/* HQ Control is yours, not his */
body.parent .topbar { display: none; }
.read-table .should { color: var(--green); font-weight: 600; white-space: nowrap; }
#hq-msg { white-space: pre-line; }

/* The parent door: the HQ mark fills while it is held, so a long press reads as
   deliberate rather than as a tap that did nothing. */
[data-parent-door] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.topbar [data-parent-door] { cursor: pointer; }
.topbar [data-parent-door]:active { transform: translateY(2px); }
[data-parent-door].door-arming { animation: door 1.2s linear forwards; }
@keyframes door { to { opacity: .45; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) {
  [data-parent-door].door-arming { animation: none; opacity: .45; }
}
.tools-line { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.tools-line a { color: var(--turq); }

/* ------------------------------------------------- pick your game (subjects) */

.subject-pick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px; max-width: 620px; margin: 0 auto;
}
.subject-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 210px; padding: 24px; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 3px solid var(--line); border-radius: 8px; box-shadow: 0 7px 0 var(--drop);
  transition: transform .08s, border-color .15s, box-shadow .15s;
}
.subject-tile:hover { border-color: var(--turq); box-shadow: 0 7px 0 var(--drop), 0 0 22px rgba(46,196,182,.35); }
.subject-tile:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--drop); }
.subject-mark {
  width: 84px; height: 84px; display: grid; place-items: center; border-radius: 12px;
  font-family: var(--pixel); font-size: 24px; color: var(--on-bright);
  background: linear-gradient(160deg, var(--green), var(--turq) 45%, var(--blue-deep));
  box-shadow: 0 5px 0 var(--drop);
}
.subject-name { font-family: var(--pixel); font-size: 15px; color: var(--turq); }
.subject-what { font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .subject-tile { transition: none; }
}

/* ------------------------------------------------------- the skin toggle */

.skin-pick {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 28px auto 0; flex-wrap: wrap;
}
.skin-label { font-family: var(--pixel); font-size: 10px; color: var(--muted); letter-spacing: .1em; }
.skin-btn {
  font: inherit; font-family: var(--pixel); font-size: 10px; letter-spacing: .06em;
  padding: 10px 14px; min-height: 40px; cursor: pointer;
  color: var(--muted); background: transparent;
  border: 2px solid var(--line); border-radius: var(--radius);
}
.skin-btn[aria-pressed="true"] { color: var(--ink); border-color: var(--turq); box-shadow: var(--glow); }

/* ------------------------------------------ the dead LEDs behind a panel
   Scoreboard only: --dots is `none` in Insert Coin, so this costs that skin
   nothing. It sits last so it wins over each component's own background. */
.card, .panel, .v-text, .subject-tile, .modal-card, .set-card, .add-verse {
  background-image: var(--dots);
  background-size: 2.2mm 2.2mm;
}

/* Numbers are the news on a board: digits get the dot face and the glow.
   In Insert Coin Doto is square (ROND 0); on the board it is round (ROND 100). */
.xp-text, .shots, .score span, #level, #day-streak, .combo, .v-bar + *, .subject-what {
  font-family: var(--num); font-variation-settings: var(--num-set);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="scoreboard"] .score span,
:root[data-theme="scoreboard"] #level,
:root[data-theme="scoreboard"] #day-streak {
  color: var(--turq); text-shadow: var(--glow); font-weight: 900;
}

/* The skin switch in the top bar: it says which skin it would take you to. */
.skin-swap { font-family: var(--pixel); font-size: 10px; letter-spacing: .06em; }