/* Layout: one slate chalkboard in a wooden frame; every screen is drawn on the board in colored chalk. Deliberately single-theme (a blackboard is always dark). */
:root {
  --board: #26332d;
  --board-2: #2f3e37;
  --chalk: #eeece3;
  --chalk-dim: #a9b5ab;
  --yellow: #f3d77a;
  --pink: #f2a7b8;
  --blue: #9fcbe9;
  --green: #a9d9a1;
  --orange: #f5b47e;
  --wood: #8a6240;
  --wood-dark: #5e4129;
  --room: #1b2420;
  --font: "Andika", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
[hidden] { display: none !important; }
body { background: var(--room); color: var(--chalk); font-family: var(--font); font-size: 18px; line-height: 1.45; margin: 0; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); padding-block: max(20px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; }
.wrap { max-width: 780px; margin: 0 auto; }
.board {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(255,255,255,.04), transparent 50%),
    var(--board);
  border: 14px solid var(--wood);
  border-bottom-width: 22px;
  border-bottom-color: var(--wood-dark);
  border-radius: 10px;
  box-shadow: inset 0 0 40px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.4);
  padding: clamp(18px, 4vw, 36px);
  min-height: 520px;
  display: flex; flex-direction: column; gap: 22px;
}
@media (max-width: 520px) { .board { border-width: 8px; border-bottom-width: 14px; } body { font-size: 17px; } }
h1, h2 { margin: 0; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); color: var(--yellow); line-height: 1.1; }
h2 { font-size: 1.05rem; color: var(--chalk-dim); letter-spacing: .06em; text-transform: uppercase; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.link { background: none; border: none; color: var(--chalk-dim); text-decoration: underline; text-underline-offset: 4px; padding: 6px 2px; font-size: .95rem; }
.link:hover { color: var(--chalk); }
.meta { color: var(--chalk-dim); margin: 0; font-size: .95rem; }
section { display: flex; flex-direction: column; gap: 12px; }

/* tally */
.goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.count { font-size: 1.4rem; font-weight: 700; color: var(--orange); font-variant-numeric: tabular-nums; }
.tally { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.tally svg { width: 46px; height: 40px; }
.tally line { stroke: var(--chalk); stroke-width: 3.2; stroke-linecap: round; }
.tally line.empty { stroke-opacity: .13; }
.tally line.slash { stroke: var(--orange); }

/* topic chips */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.chip { text-align: left; background: transparent; border: 2px solid rgba(238,236,227,.25); border-radius: 14px 10px 16px 9px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.chip small { color: var(--chalk-dim); font-size: .8rem; }
.chip[aria-pressed="true"] { border-color: var(--green); background: rgba(169,217,161,.1); }
.chip[aria-pressed="true"] strong { color: var(--green); }

.start { align-self: flex-start; background: var(--yellow); color: var(--board); border: none; font-weight: 700; font-size: 1.35rem; padding: 14px 30px; border-radius: 16px 12px 18px 10px; box-shadow: 0 4px 0 #b99a3d; }
.start:active { transform: translateY(3px); box-shadow: 0 1px 0 #b99a3d; }
.ghost { background: transparent; border: 2px solid rgba(238,236,227,.35); border-radius: 12px; padding: 10px 20px; font-weight: 700; }
.row-btns { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* play */
.play-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ticks { display: flex; gap: 6px; }
.ticks span { width: 14px; height: 6px; border-radius: 3px; background: rgba(238,236,227,.15); }
.ticks span.done { background: var(--green); }
.ticks span.miss { background: var(--pink); }
.ticks span.now { background: var(--yellow); }
.skill-label { color: var(--chalk-dim); font-size: .9rem; }
.say { background: transparent; border: 2px solid rgba(159,203,233,.5); color: var(--blue); border-radius: 999px; width: 52px; height: 52px; display: grid; place-items: center; flex: none; font-size: 1.3rem; }
.center { justify-content: center; }
.ghost.small { padding: 8px 14px; font-size: .95rem; }
.big-emo { font-size: 2rem; line-height: 1; }
.count { margin-left: 4px; }

/* home */
.worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.world { background: transparent; border: 2px solid rgba(238,236,227,.25); border-radius: 16px 11px 18px 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-align: left; }
.world[aria-pressed="true"] { border-color: var(--yellow); background: rgba(243,215,122,.1); }
.world[aria-pressed="true"] strong { color: var(--yellow); }
.chapters { display: flex; flex-direction: column; gap: 10px; }
.chapter { background: transparent; border: 2px solid rgba(238,236,227,.22); border-radius: 14px 10px 16px 9px; padding: 10px 14px; display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; }
.chapter.next { border-color: var(--green); }
.chapter .num { color: var(--chalk-dim); font-weight: 700; width: 1.2em; text-align: center; }
.ch-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ch-text small { color: var(--chalk-dim); font-size: .85rem; }
.tick { color: var(--green); font-weight: 700; font-size: 1.2rem; }

/* field */
.stage { position: relative; }
.field { width: 100%; height: auto; display: block; overflow: visible; touch-action: manipulation; }
.field .soc, .field .sto { transition: opacity .6s ease; }
.field.skin-story .soc { opacity: 0; pointer-events: none; }
.field.skin-soccer .sto { opacity: 0; pointer-events: none; }
.line { fill: none; stroke: var(--chalk); stroke-opacity: .55; stroke-width: 2.2; }
.spot { fill: var(--chalk); fill-opacity: .6; }
.meadow { fill: rgba(169,217,161,.05); stroke: var(--green); stroke-opacity: .35; stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.scen { font-size: 26px; opacity: .55; text-anchor: middle; dominant-baseline: central; }
.net { fill: rgba(238,236,227,.06); stroke: var(--chalk); stroke-width: 2.4; }
.net-line { stroke: var(--chalk); stroke-opacity: .3; stroke-width: 1; }
.gate-us .net, .gate-us .tower { stroke: var(--blue); }
.gate-them .net, .gate-them .tower { stroke: var(--orange); }
.tower { fill: var(--board-2); stroke-width: 2.4; stroke-linejoin: round; }
.arch { fill: rgba(0,0,0,.3); stroke: var(--chalk); stroke-opacity: .5; stroke-width: 1.6; }
.bars { stroke: var(--chalk); stroke-opacity: .35; stroke-width: 1.2; }
.gate-label { font: 700 14px var(--font); fill: var(--chalk-dim); }
.gate-us .gate-label { fill: var(--blue); }
.gate-them .gate-label { fill: var(--orange); }
.ball { fill: #f7f5ee; stroke: #1b2420; stroke-width: 1.2; }
.ball-patch { fill: #1b2420; }
.glow { fill: rgba(243,215,122,.22); }
.emo { text-anchor: middle; dominant-baseline: central; }
.init { text-anchor: middle; dominant-baseline: central; font: 700 17px var(--font); fill: var(--board); }
.sto .init { fill: var(--yellow); font-size: 20px; }
.me-dot { fill: var(--yellow); stroke: #fff6c9; stroke-width: 2; }
.me-ring { fill: rgba(243,215,122,.18); stroke: var(--yellow); stroke-width: 3; }
.mate-dot { fill: var(--blue); }
.opp-dot { fill: var(--orange); }
.mate-ring { fill: rgba(159,203,233,.16); stroke: var(--blue); stroke-width: 2.5; }
.opp-ring { fill: rgba(245,180,126,.16); stroke: var(--orange); stroke-width: 2.5; }
.guide { stroke: var(--yellow); stroke-width: 2.5; stroke-dasharray: 3 8; stroke-linecap: round; opacity: .8; }
.tok .body { transform-box: fill-box; transform-origin: center; }
.tok.pulse .body { animation: pop 1.1s ease 2; }
@keyframes pop { 50% { transform: scale(1.45); } }
.gate.pulse { animation: blink 1s ease 3; }
@keyframes blink { 50% { opacity: .35; } }

/* choices on the field */
.choice { cursor: pointer; }
.choice:focus { outline: none; }
.choice:focus-visible .spot-ring, .choice:focus-visible .gate-ring { stroke-width: 5; }
.spot-ring { fill: rgba(243,215,122,.1); stroke: var(--yellow); stroke-width: 3; stroke-dasharray: 6 6; animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.gate-ring { fill: rgba(243,215,122,.08); stroke: var(--yellow); stroke-width: 3; stroke-dasharray: 7 6; }
.choice:hover .spot-ring, .choice:hover .gate-ring { fill: rgba(243,215,122,.25); }
.arrow { stroke: var(--yellow); stroke-opacity: .45; stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
@keyframes spin { to { transform: rotate(360deg); } }

.banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.6); font-size: clamp(2.2rem, 9vw, 3.8rem); font-weight: 700; color: var(--yellow); text-shadow: 0 3px 0 rgba(0,0,0,.4); opacity: 0; pointer-events: none; white-space: nowrap; }
.banner.show { animation: bannerIn 2.2s ease forwards; }
@keyframes bannerIn { 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.scoreline { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: .95rem; min-height: 1.4em; }
.sc-us { color: var(--blue); } .sc-them { color: var(--orange); text-align: right; }
.caption { margin: 0; text-align: center; font-size: 1.05rem; color: var(--chalk); min-height: 3em; text-wrap: pretty; }

.answers { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.answer { background: transparent; border: 3px solid rgba(238,236,227,.35); border-radius: 18px 12px 20px 12px; padding: 12px 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 140px; font-size: 1.1rem; }
.answer .big-emo { font-size: 2.6rem; }
.answer.right { border-color: var(--green); background: rgba(169,217,161,.15); }
.answer.wrong { border-color: var(--pink); background: rgba(242,167,184,.12); }
.answer:disabled { cursor: default; }

/* done, games, cues */
.big-score { font-size: 2.4rem; margin: 0; letter-spacing: .1em; }
.faint { opacity: .2; }
.kid-card { display: flex; gap: 14px; align-items: flex-start; border: 2px dashed rgba(243,215,122,.45); border-radius: 16px; padding: 16px; font-size: 1.15rem; }
.kid-card p { margin: 0; flex: 1; }
.how { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; color: var(--chalk); font-size: .95rem; }
.cues { display: flex; flex-direction: column; gap: 10px; }
.cue { background: transparent; border: 2px solid rgba(238,236,227,.22); border-radius: 14px 10px 16px 9px; padding: 12px 14px; display: flex; gap: 14px; align-items: center; text-align: left; }
.cue span:last-child { display: flex; flex-direction: column; }
.cue strong { font-size: 1.1rem; }
.cue small { color: var(--chalk-dim); }

/* grown-ups */
.note { color: var(--chalk-dim); font-size: .88rem; margin: 0; }
.pick { font: inherit; font-size: .95rem; background: var(--board-2); color: var(--chalk); border: 2px solid rgba(238,236,227,.3); border-radius: 10px; padding: 6px 10px; max-width: 100%; min-width: 0; }
.danger { color: var(--pink); border-color: rgba(242,167,184,.5); }
.danger-text { color: var(--pink); }
.name-form { display: flex; flex-direction: column; gap: 8px; }
.name-form label { font-weight: 700; }
.seg { display: inline-flex; border: 2px solid rgba(238,236,227,.3); border-radius: 12px; overflow: hidden; align-self: flex-start; }
.seg button { background: transparent; border: none; padding: 6px 14px; }
.seg button[aria-pressed="true"] { background: rgba(169,217,161,.18); color: var(--green); font-weight: 700; }
.stats { border-collapse: collapse; font-size: .9rem; }
.stats td, .stats th { text-align: left; padding: 4px 14px 4px 0; border-bottom: 1px solid rgba(238,236,227,.12); }
.stats th { color: var(--chalk-dim); font-weight: 400; }
.code { color: var(--yellow); letter-spacing: .05em; }
.label-tie { stroke: var(--chalk-dim); stroke-opacity: .5; stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }