/* Layout: navy top bar with XP and streak; one centred column on phones, text beside the question on wide screens.
   Palette matches David's online worksheets (navy, teal, orange) with gold for XP. */
:root{
  --navy:#16324F; --title:#16324F; --orange:#D9622B; --teal:#1E8C87; --mint:#DDF1EE; --peach:#FBE7DA;
  --gold:#C98A0B; --gold-bg:#FCF1D6;
  --card:#F1F5F8; --line:#C9D3DC; --ink:#1A2733; --muted:#5B6B7A; --bg:#FFFFFF; --surface:#FFFFFF;
  --on-dark:#FFFFFF; --focus:rgba(30,140,135,.3); --mark:#FFE9A8;
  --ok:#1E7A4C; --ok-bg:#E3F4EA; --ok-line:#9FD6B6; --bad:#B3402A; --bad-bg:#FCE9E4; --bad-line:#F0B4A6;
  --heat0:#F7E3DC; --heat1:#FBEFD5; --heat2:#E3F1E4; --heat3:#BFE3CC;
  --f-head:Cambria,Georgia,"Times New Roman",serif;
  --f-text:Georgia,Cambria,"Times New Roman",serif;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
/* Dark tokens: the device setting, unless a student picked Light or Dark in Settings (data-mode on <html>). */
@media (prefers-color-scheme: dark){ :root:not([data-mode=light]){
  --navy:#1F4468; --title:#BFD6EC; --orange:#E0743F; --teal:#2BA59E; --mint:#14302D; --peach:#3A2A20;
  --gold:#F0B83C; --gold-bg:#3A2E12;
  --card:#1C2935; --line:#33445A; --ink:#E6EDF3; --muted:#9AA8B5; --bg:#0F1720; --surface:#16212C;
  --on-dark:#FFFFFF; --focus:rgba(43,165,158,.4); --mark:#5A4A16;
  --ok:#6FD39C; --ok-bg:#163326; --ok-line:#2F6B4C; --bad:#F29A85; --bad-bg:#3A1F1A; --bad-line:#7A3A2C;
  --heat0:#4A2620; --heat1:#45391A; --heat2:#1F3A2A; --heat3:#2A5A3E;
  color-scheme:dark }}
:root[data-mode=dark]{
  --navy:#1F4468; --title:#BFD6EC; --orange:#E0743F; --teal:#2BA59E; --mint:#14302D; --peach:#3A2A20;
  --gold:#F0B83C; --gold-bg:#3A2E12;
  --card:#1C2935; --line:#33445A; --ink:#E6EDF3; --muted:#9AA8B5; --bg:#0F1720; --surface:#16212C;
  --on-dark:#FFFFFF; --focus:rgba(43,165,158,.4); --mark:#5A4A16;
  --ok:#6FD39C; --ok-bg:#163326; --ok-line:#2F6B4C; --bad:#F29A85; --bad-bg:#3A1F1A; --bad-line:#7A3A2C;
  --heat0:#4A2620; --heat1:#45391A; --heat2:#1F3A2A; --heat3:#2A5A3E;
  color-scheme:dark }
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.5;padding-top:env(safe-area-inset-top,0px)}
h1,h2,h3{font-family:var(--f-head);text-wrap:balance;margin:0;line-height:1.2;color:var(--title)}
h1{font-size:1.9rem} h2{font-size:1.4rem} h3{font-size:1.1rem}
button{font:inherit;cursor:pointer}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}

header.top{position:sticky;top:0;z-index:10;background:var(--navy);color:var(--on-dark);padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;justify-content:space-between}
.brand{font-family:var(--f-head);font-size:1.05rem;font-weight:700;color:var(--on-dark);text-decoration:none}
.brand small{display:block;font-family:var(--f-body);font-weight:400;font-size:.72rem;opacity:.8;letter-spacing:.05em;text-transform:uppercase}
.meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{font-size:.82rem;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill.xp{background:var(--gold);color:#1A1205}
.pill.over{background:var(--orange)}
.meter{display:flex;gap:3px;align-items:center;font-size:.75rem}
.meter span{padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.35);opacity:.6}
.meter span.on{background:var(--orange);border-color:var(--orange);opacity:1;font-weight:700}
.linkbtn{background:none;border:0;color:var(--on-dark);text-decoration:underline;font-size:.85rem;padding:4px}

main{padding-block:20px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1100px;margin:0 auto}
.narrow{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.lede{color:var(--muted);margin:0}
.note{font-size:.85rem;color:var(--muted);margin:0}
.eyebrow{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:700;margin:0}
.panel{background:var(--card);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.panel ul{margin:0;padding-left:20px;display:grid;gap:4px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
label.fld{display:grid;gap:6px;font-weight:600}
input[type=text],input[type=password],input[type=tel],textarea,select{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
textarea{min-height:96px;resize:vertical}
.btn{border:0;border-radius:10px;padding:11px 18px;background:var(--teal);color:var(--on-dark);font-weight:700;text-decoration:none;display:inline-block}
.btn.alt{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}
.btn.small{padding:6px 12px;font-size:.88rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.err{color:var(--bad);font-weight:600;margin:0}
.demo{background:var(--gold-bg);border-radius:10px;padding:10px 14px;font-size:.9rem}

/* home */
.hero{display:flex;flex-direction:column;gap:6px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:560px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stat{background:var(--card);border-radius:12px;padding:12px 14px;min-width:0}
.stat b{display:block;font-family:var(--f-head);font-size:clamp(1.2rem,4.5vw,1.6rem);font-variant-numeric:tabular-nums}
.stat span{font-size:.8rem;color:var(--muted)}
.stat.gold b{color:var(--gold)}
.goal{display:flex;flex-direction:column;gap:6px}
.bar{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold);border-radius:5px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.tcard{border:1.5px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.tcard h3{font-size:1.15rem}
.tag{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--mint);color:var(--teal);padding:3px 9px;border-radius:999px;align-self:flex-start}
.tag.gold{background:var(--gold-bg);color:var(--gold)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:.9rem}
.tabs button[aria-selected=true]{background:var(--navy);color:var(--on-dark);border-color:var(--navy)}

/* reading text */
.text h2{font-size:1.5rem;margin-bottom:12px}
.para{display:grid;grid-template-columns:28px 1fr;gap:6px;margin:0 0 12px;font-family:var(--f-text);font-size:1.02rem;line-height:1.65}
.para b.lt{font-family:var(--f-body);font-size:.8rem;color:var(--on-dark);background:var(--navy);border-radius:6px;height:24px;display:grid;place-items:center;margin-top:3px}
.para p{margin:0;min-width:0}
.para.here b.lt{background:var(--orange)}
mark{background:var(--mark);color:inherit;padding:0 2px;border-radius:3px}
.gloss{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:8px;margin-top:4px}

/* questions */
.qgrid{display:grid;gap:20px}
@media (min-width:900px){ .qgrid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
  .qgrid .textcol{order:1;position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto;padding-right:8px}
  .qgrid .qcol{order:2} .textcol summary{display:none} .textcol details{background:transparent!important;padding:0!important} }
.qcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.textcol details{background:var(--card);border-radius:12px;padding:12px 14px}
.textcol summary{font-weight:700;color:var(--teal)}
.progress{display:flex;gap:6px;flex-wrap:wrap}
.progress i{width:26px;height:8px;border-radius:4px;background:var(--line)}
.progress i.ok{background:var(--ok)} .progress i.help{background:var(--orange)} .progress i.cur{background:var(--teal)}
.qcard{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px}
.qhead{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.qnum{font-size:.85rem;color:var(--muted)}
.stem{font-size:1.1rem;font-weight:600;margin:0}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:left;background:var(--card);border:1.5px solid transparent;border-radius:10px;padding:11px 12px;color:var(--ink)}
.opt .k{flex:0 0 26px;height:26px;border-radius:50%;border:1.5px solid var(--muted);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.opt.sel{border-color:var(--teal)} .opt.sel .k{background:var(--teal);border-color:var(--teal);color:var(--on-dark)}
.opt.wrong{border-color:var(--bad-line);background:var(--bad-bg)} .opt.right{border-color:var(--ok-line);background:var(--ok-bg)}
.opt:disabled{cursor:default}
.fb{border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.fb p{margin:0}
.fb.ok{background:var(--ok-bg);border:1px solid var(--ok-line)} .fb.ok strong{color:var(--ok)}
.fb.bad{background:var(--bad-bg);border:1px solid var(--bad-line)} .fb.bad strong{color:var(--bad)}
.fb.info{background:var(--peach)}
.fb.hint{background:var(--card);border:1px dashed var(--teal)}
.xpgain{color:var(--gold);font-weight:800}
.rescue{border:2px dashed var(--orange);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.rescue .para{margin:0}
.strat{background:var(--peach);border-radius:10px;padding:12px 14px}
.strat ol{margin:6px 0 0;padding-left:20px;display:grid;gap:3px}
.big{font-family:var(--f-head);font-size:1.6rem;color:var(--title);margin:0}

/* tables, leaderboard */
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.me td{background:var(--gold-bg);font-weight:700}
.rank{font-family:var(--f-head);font-weight:700;width:2.2em}
.medal{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.75rem;color:#1A1205}
.m1{background:#E9C04A}.m2{background:#C8CDD3}.m3{background:#D49A6A}
.chip{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.chip.none{background:var(--ok-bg);color:var(--ok)} .chip.hint{background:var(--mint);color:var(--teal)}
.chip.rescue,.chip.easier{background:var(--peach);color:var(--orange)} .chip.locked{background:var(--card);color:var(--muted);border:1px solid var(--line)} .chip.explained{background:var(--bad-bg);color:var(--bad)}
.lvl{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--card);border:1px solid var(--line)}

/* tracker */
.skills{display:grid;gap:8px}
.skillrow{display:grid;grid-template-columns:minmax(0,11em) 1fr 4.5em;gap:10px;align-items:center;font-size:.9rem}
.skillrow .bar{height:12px}
.skillrow .bar i{background:var(--teal)}
.skillrow .bar i.low{background:var(--orange)}
.skillrow span:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:flex;gap:8px;align-items:center;background:var(--gold-bg);border-radius:10px;padding:8px 10px;font-size:.85rem}
.badge b{display:block}
.badge svg{flex:0 0 28px}
.badge.locked{background:var(--card);opacity:.6}
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-size:11px;font-family:var(--f-body)}
@media (max-width:640px){ .chart text{font-size:19px} }

/* heat map */
.heat td.h{text-align:center;font-variant-numeric:tabular-nums;font-size:.82rem;min-width:52px}
.h0{background:var(--heat0)} .h1{background:var(--heat1)} .h2{background:var(--heat2)} .h3{background:var(--heat3)} .hn{color:var(--muted)}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);align-items:center}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:4px}

@media (prefers-reduced-motion:no-preference){ .pop{animation:pop .25s ease-out} @keyframes pop{from{transform:translateY(4px)}to{transform:none}}
  .xpgain{animation:pulse .6s ease-out} @keyframes pulse{0%{transform:scale(1.4)}100%{transform:scale(1)}} }

/* units and the school-year path */
.tcard.unit{gap:12px}
.usec{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.urow{display:flex;gap:12px;align-items:center;justify-content:space-between}
.urow>div{min-width:0;flex:1}
.urow .btn{flex:0 0 auto}
.gap{display:inline-block;min-width:4em;border-bottom:2px solid var(--teal);color:transparent;line-height:1.1}
.path{display:flex;flex-direction:column;gap:0;position:relative}
.pstep{display:flex;gap:12px;align-items:flex-start;padding:10px 0;color:var(--ink);text-decoration:none;position:relative}
.pstep::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--line);z-index:0}
.pstep:first-child::before{top:50%} .pstep:last-child::before{bottom:50%}
.pstep .dot{position:relative;z-index:1;flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;background:var(--surface);border:2px solid var(--line);color:var(--muted)}
.pstep.minor .dot{flex-basis:32px;height:14px;width:14px;margin:9px 9px;flex:0 0 14px;border-radius:50%}
.pstep.done .dot{background:var(--ok);border-color:var(--ok);color:var(--on-dark)}
.pstep.now .dot,.pstep.focus .dot{background:var(--orange);border-color:var(--orange);color:var(--on-dark)}
.pstep.minor.now .dot{background:var(--orange);border-color:var(--orange)}
.pstep.locked{opacity:.7} .pstep.locked .dot{border-style:dashed}
a.pstep:hover b{color:var(--teal)}
.row.back{margin:0 0 10px;align-items:center}

/* sound button, missions */
.pill.snd{border:0;color:var(--on-dark);display:inline-flex;align-items:center;padding:5px 9px;cursor:pointer}
.pill.snd[aria-pressed=false]{opacity:.6}
.mission{background:var(--gold-bg);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.mbar{height:8px;border-radius:4px;background:var(--surface);overflow:hidden}
.mbar i{display:block;height:100%;background:var(--gold);border-radius:4px;transition:width .4s}
.msteps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.msteps li{display:flex;gap:10px;align-items:center;padding:6px 0}
.msteps li>div{flex:1;min-width:0}
.msteps li .btn{flex:0 0 auto}
.mdot{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;background:var(--surface);border:2px solid var(--line);color:var(--muted)}
.msteps li.done .mdot{background:var(--ok);border-color:var(--ok);color:var(--on-dark)}
.msteps li.next .mdot{background:var(--orange);border-color:var(--orange);color:var(--on-dark)}
.msteps li.locked{opacity:.55}
.msteps li.done b{color:var(--muted)}
.winbox{text-align:center;border-width:2px}

/* word cards */
.wcard{border:2px solid var(--line);border-radius:18px;padding:22px 18px;display:flex;flex-direction:column;gap:12px;background:var(--surface);text-align:left}
.wcard.back{border-color:var(--teal)}
.wword{font-family:var(--f-head);font-size:clamp(1.8rem,8vw,2.6rem);font-weight:700;color:var(--title);text-align:center;margin:0;overflow-wrap:anywhere}
.wdef{font-size:1.15rem;font-weight:600;margin:0}
.wex{font-family:var(--f-text);font-size:1.05rem;margin:0}
.wtext{background:var(--card);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.wtext p{margin:0;font-family:var(--f-text)}
.wtext .btn{align-self:flex-start}
.row.center{justify-content:center}
.say{display:inline-flex;gap:6px;align-items:center}

/* vocabulary question types */
.clue{margin:0}
.letters{margin:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.2rem;letter-spacing:.12em}
.letters .note{font-family:var(--f-body);letter-spacing:0}
.mwords{display:flex;flex-wrap:wrap;gap:8px}
.mword{border:1.5px solid var(--teal);background:var(--surface);color:var(--teal);font-weight:700;border-radius:999px;padding:7px 14px}
.mword.sel{background:var(--teal);color:var(--on-dark)}
.mword.used{opacity:.4}
.mword:disabled{opacity:.3;cursor:default}
.mdefs{display:grid;gap:8px}
.mdef{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--card);border:1.5px solid transparent;border-radius:10px;padding:10px 12px;color:var(--ink)}
.mdef .slot{font-size:.8rem;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.04em}
.mdef.right{border-color:var(--ok-line);background:var(--ok-bg)} .mdef.right .slot{color:var(--ok)}
.mdef.wrong{border-color:var(--bad-line);background:var(--bad-bg)} .mdef.wrong .slot{color:var(--bad)}
.mdef:disabled{cursor:default}
.pairs{margin:0;padding-left:20px;display:grid;gap:3px}

/* grammar question types */
.examples{margin:0;padding-left:20px;display:grid;gap:6px;font-family:var(--f-text);font-size:1.05rem}
.tapline{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--f-text);font-size:1.1rem}
.tw{border:1.5px dashed var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:5px 8px;font-family:inherit;font-size:inherit}
.tw.sel{border:1.5px solid var(--teal);background:var(--mint)}
.tw.nope{border:1.5px solid var(--bad-line);background:var(--bad-bg)}
.tw.bad{border:1.5px solid var(--bad-line);background:var(--bad-bg);text-decoration:line-through}
.tw:disabled{cursor:default}
.fixed{margin:0;color:var(--ok);font-weight:600}
.tilestem{line-height:2.4}
.gapbox{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:6em;min-height:2.2em;border-bottom:2px solid var(--teal);padding:2px 4px;margin:0 4px;vertical-align:middle;line-height:1.3}
.bank{display:flex;flex-wrap:wrap;gap:8px}
.tile{border:1.5px solid var(--navy);background:var(--surface);color:var(--ink);border-radius:8px;padding:7px 12px;font-weight:600}
.tile.placed{background:var(--mint);border-color:var(--teal);padding:3px 8px;font-size:.95rem}
.tile.used{opacity:.3}
.tile:disabled{cursor:default}

/* tap-a-word meanings */
.gw{font:inherit;color:inherit;background:none;border:0;padding:0;text-decoration:underline dotted var(--teal) 2px;text-underline-offset:3px;cursor:pointer}
.gw:hover{background:var(--mint)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:0 12px max(12px,env(safe-area-inset-bottom,0px));display:flex;justify-content:center;pointer-events:none}
.sheet-in{pointer-events:auto;width:100%;max-width:560px;background:var(--surface);border:2px solid var(--teal);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.sw{font-family:var(--f-head);font-size:1.3rem;color:var(--title)}
.xbtn{background:none;border:0;color:var(--muted);font-size:1.1rem;padding:4px 8px}

/* listening */
.player{display:flex;gap:12px;align-items:center;background:var(--surface);border:2px solid var(--teal);border-radius:14px;padding:12px 14px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.player .btn{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.lmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.stmts{gap:4px}
.letters-row{display:flex;flex-wrap:wrap;gap:8px}
.lopt{width:44px;height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-weight:800;font-size:1rem}
.lopt.sel{border-color:var(--teal);background:var(--teal);color:var(--on-dark)}
.lopt.right{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}
.lopt.wrong{border-color:var(--bad-line);background:var(--bad-bg);color:var(--bad)}
.lgap{line-height:2.2}
.gapin{display:inline-block;width:9em!important;max-width:60%;margin:0 4px;padding:4px 8px!important;font-weight:600}
.gapin.right{border-color:var(--ok-line);background:var(--ok-bg)} .gapin.wrong{border-color:var(--bad-line);background:var(--bad-bg)}
.lq.done{border-color:var(--ok-line)}
.transcript{display:grid;gap:6px;margin-top:8px;font-family:var(--f-text)}
.transcript p{margin:0;padding:2px 6px;border-radius:6px}
.transcript p.hot{background:var(--mark)}
@media (min-width:700px){ .player{position:sticky;top:76px;z-index:5} }

/* games: shared look (score chips, countdown, score pops, particles) */
.game{display:flex;flex-direction:column;gap:12px;--noun:#2F6FB5;--verb:#D9622B;--adjective:#1E8C87;--adverb:#8B4FB3;--water:#3FA2E0;
  --sky1:#7CC8F8;--sky2:#D8F0FF;--sun:#FFD54A;--grass:#7DBA4E;--blade:#68A53E;--meadow:#8DC85C;--shore:#E9DBAA;--lk0:#8AD6F7;--lk1:#2E8BC9;
  --t1:#3E8E41;--t2:#61B463;--roofa:#C9563C;--roofb:#A8442E;--ballast:#C9BB9C;--steel:#56626E;--tie:#8A5A3B}
@media (prefers-color-scheme: dark){ :root:not([data-mode=light]) .game{--noun:#4F8FD8;--verb:#E0783F;--adjective:#26A69E;--adverb:#9C67C8;--water:#2A6FB0;
  --sky1:#141B45;--sky2:#3A3F82;--sun:#E9EEF8;--grass:#2D5232;--blade:#27482B;--meadow:#335C38;--shore:#5A5340;--lk0:#3E72A3;--lk1:#1B3C66;
  --t1:#1F4A27;--t2:#2E6B37;--roofa:#86402F;--roofb:#6A3223;--ballast:#4C4638;--steel:#A3AEBA;--tie:#5A3D2A} }
:root[data-mode=dark] .game{--noun:#4F8FD8;--verb:#E0783F;--adjective:#26A69E;--adverb:#9C67C8;--water:#2A6FB0;
  --sky1:#141B45;--sky2:#3A3F82;--sun:#E9EEF8;--grass:#2D5232;--blade:#27482B;--meadow:#335C38;--shore:#5A5340;--lk0:#3E72A3;--lk1:#1B3C66;
  --t1:#1F4A27;--t2:#2E6B37;--roofa:#86402F;--roofb:#6A3223;--ballast:#4C4638;--steel:#A3AEBA;--tie:#5A3D2A}
.ghud{display:flex;align-items:center;gap:6px;font-size:.85rem;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.hchip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:var(--card);font-weight:700;white-space:nowrap}
.hchip b{font-size:1.05rem}
.hchip.lv svg{color:#F2B21B} .hchip.pts{background:var(--navy);color:var(--on-dark)} .hchip.pts b{color:#FFD54A}
.hchip.combo{background:linear-gradient(135deg,#FF8A3D,#F0456A);color:#fff}
.hchip.time{margin-left:auto} .hchip.time.low{background:var(--bad-bg);color:var(--bad);animation:tick 1s infinite}
#gleft{margin-left:auto}
@media (max-width:430px){ .ghud .hl{display:none} .hchip{padding:5px 9px} .glives{padding:5px 8px} }
.hchip.bump{animation:bump .3s ease-out}
@keyframes bump{40%{scale:1.18}}
@keyframes tick{50%{scale:1.08}}
.glives{display:flex;gap:4px;padding:5px 10px;border-radius:999px;background:var(--card)}
.glives i{width:13px;height:16px;background:linear-gradient(160deg,#9EDBFF,var(--water));border-radius:50% 50% 50% 50%/60% 60% 40% 40%;rotate:180deg;transition:opacity .3s,scale .3s}
.glives i.lost{opacity:.2;scale:.75;filter:grayscale(1)}
.arena{position:relative;overflow:hidden;border-radius:18px;touch-action:manipulation;user-select:none;-webkit-user-select:none;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08),0 6px 18px rgba(0,0,0,.12)}
.arena.hurt{animation:hurt .4s}
.arena.hurt::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 0 6px rgba(240,70,70,.75),inset 0 0 40px rgba(240,70,70,.5);animation:fade .5s forwards}
.arena.flash::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,230,140,.4));animation:fade .6s forwards}
@keyframes hurt{20%{translate:-7px}45%{translate:6px}70%{translate:-3px}}
@keyframes fade{to{opacity:0}}
.gcount{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(8,18,40,.35);backdrop-filter:blur(1px)}
.gcount span{font:800 clamp(3rem,16vw,5rem)/1 var(--f-head);color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.25),0 0 30px rgba(255,213,74,.8);animation:count .65s ease-out}
@keyframes count{0%{scale:2.2;opacity:0}35%{scale:.92;opacity:1}55%{scale:1.05}100%{scale:1}}
.gfloat{position:absolute;z-index:6;translate:-50% -50%;pointer-events:none;font:800 1.35rem var(--f-head);color:#FFD54A;
  text-shadow:0 2px 0 #8A5A00,0 0 10px rgba(0,0,0,.35);animation:floatup .95s ease-out forwards}
.gfloat.bad{color:#FF6B6B;text-shadow:0 2px 0 #7A1F1F}
@keyframes floatup{0%{opacity:0;transform:translateY(8px) scale(.6)}20%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:0;transform:translateY(-46px) scale(1)}}
.gpart{position:absolute;z-index:6;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;pointer-events:none;animation:fly .7s cubic-bezier(.2,.7,.3,1) forwards}
.gpart:nth-child(3n){border-radius:2px;width:7px;height:10px}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(200deg) scale(.3);opacity:0}}
.gbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gbtn{display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 12px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--ink);
  font-weight:700;text-align:left;font-size:1rem;box-shadow:0 4px 0 var(--line);transition:transform .08s,box-shadow .08s}
.gbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.gbtn .gk{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--teal);color:#fff;font-size:.8rem}
.gbtn.right{border-color:#2EAD5B;background:var(--ok-bg);box-shadow:0 4px 0 #2EAD5B}
.gbtn.shake{border-color:var(--bad);background:var(--bad-bg);box-shadow:0 4px 0 var(--bad);animation:shake .35s}
@keyframes shake{25%{translate:-6px}50%{translate:5px}75%{translate:-3px}}
.gbanner{position:absolute;left:50%;top:38%;translate:-50% -50%;padding:10px 20px;border-radius:999px;background:linear-gradient(135deg,#FF8A3D,#F0456A);color:#fff;
  font-weight:800;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,scale .25s;scale:.7;z-index:7;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.gbanner.show{opacity:1;scale:1}
.gbanner.big{font-size:1.25rem;padding:14px 26px;background:linear-gradient(135deg,#2B4C9E,#7B4FC4)}
/* Word Rain: a sky with a sun (a moon in dark mode), drifting clouds, rain streaks and rising water */
.rain .arena{height:min(56vh,440px);background:linear-gradient(var(--sky1),var(--sky2))}
.rain .arena.ticking::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 0 4px rgba(255,90,90,.6),inset 0 0 50px rgba(255,90,90,.35);animation:tickglow .5s ease-in-out infinite alternate}
@keyframes tickglow{from{opacity:.35}to{opacity:1}}
.sky{position:absolute;inset:0;pointer-events:none}
.sun{position:absolute;right:16px;top:14px;width:46px;height:46px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 10px color-mix(in srgb,var(--sun) 30%,transparent),0 0 40px 18px color-mix(in srgb,var(--sun) 45%,transparent)}
.cloud{position:absolute;width:110px;height:34px;border-radius:20px;background:#fff;opacity:.85;animation:drift 38s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:46px;height:46px;left:16px;top:-22px} .cloud::after{width:36px;height:36px;left:52px;top:-14px}
.cloud.c1{top:40px;left:-120px} .cloud.c2{top:110px;left:-120px;scale:.7;opacity:.6;animation-duration:52s;animation-delay:-20s} .cloud.c3{top:200px;left:-120px;scale:.55;opacity:.45;animation-duration:64s;animation-delay:-40s}
@keyframes drift{to{transform:translateX(calc(100vw + 260px))}}
.rainfx{position:absolute;inset:-40px 0 0;opacity:.35;background:repeating-linear-gradient(105deg,transparent 0 22px,rgba(255,255,255,.55) 22px 23px,transparent 23px 46px);animation:rainfall .9s linear infinite}
@keyframes rainfall{to{background-position:-12px 46px}}
.water{position:absolute;left:0;right:0;bottom:0;z-index:2;background:linear-gradient(color-mix(in srgb,var(--water) 85%,#fff),var(--water) 40%,color-mix(in srgb,var(--water) 70%,#000));transition:height .4s ease-out}
.wave{position:absolute;left:-40px;right:-40px;top:-9px;height:18px;background:radial-gradient(circle at 12px 18px,color-mix(in srgb,var(--water) 85%,#fff) 11px,transparent 12px) 0 0/24px 18px repeat-x;animation:wave 3s linear infinite}
.wave.w2{top:-5px;opacity:.6;animation-duration:4.5s;animation-direction:reverse}
@keyframes wave{to{transform:translateX(24px)}}
.drop{position:absolute;top:0;left:0;z-index:3;width:min(250px,74%);padding:11px 15px;color:#10304B;font-size:.95rem;line-height:1.35;font-weight:600;
  background:radial-gradient(circle at 22% 18%,#fff 0 18%,#EAF7FF 45%,#CBEAFF);border:2px solid #7FC8F5;border-radius:22px;
  box-shadow:0 6px 14px rgba(20,60,110,.22),inset 0 -4px 8px rgba(80,160,230,.18);will-change:transform}
.drop::before{content:"";position:absolute;left:14px;top:6px;width:30px;height:7px;border-radius:6px;background:rgba(255,255,255,.9)}
.drop .dtail{position:absolute;left:50%;top:-22px;width:4px;height:22px;margin-left:-2px;border-radius:2px;background:linear-gradient(transparent,#7FC8F5)}
.drop span{position:relative}
.drop .dtier{position:relative;display:block;width:max-content;margin:0 0 4px;padding:1px 7px;border-radius:999px;font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.drop .dtier.t1{background:#C98A0B} .drop .dtier.t2{background:#D9622B}
.drop.popped{animation:popout .45s ease-out forwards}
.drop.splash{border-color:#F06565;animation:splash .5s ease-in forwards}
@keyframes popout{30%{scale:1.15;opacity:1}to{opacity:0;scale:1.5;filter:blur(3px)}}
@keyframes splash{to{opacity:0;scale:1.2 .2;translate:0 14px}}
.ripple{position:absolute;z-index:3;width:20px;height:8px;margin-left:-10px;margin-bottom:-4px;border:3px solid rgba(255,255,255,.9);border-radius:50%;animation:ripple .8s ease-out forwards}
@keyframes ripple{to{width:140px;height:26px;margin-left:-70px;margin-bottom:-13px;opacity:0}}
/* Word Train: countryside from above */
.tarena svg{display:block;width:100%;height:auto}
.grass{fill:var(--grass)} .blade{fill:none;stroke:var(--blade);stroke-width:1.4;stroke-linecap:round} .meadow{fill:var(--meadow)}
.shore{fill:var(--shore)} .lk0{stop-color:var(--lk0)} .lk1{stop-color:var(--lk1)}
.lkshine{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;opacity:.65;stroke-dasharray:8 30;animation:shine 4s linear infinite}
@keyframes shine{to{stroke-dashoffset:-76}}
.duck{fill:#fff;offset-path:path("M318 300 a40 16 0 1 1 -1 0");animation:swim 24s linear infinite} .duck circle{fill:#2E7D32}
@keyframes swim{to{offset-distance:100%}}
.hsh{fill:rgba(0,0,0,.2)} .roofa{fill:var(--roofa)} .roofb{fill:var(--roofb)} .chim{fill:#5B4034}
.fl.f0{fill:#FFD54A} .fl.f1{fill:#FF8FB1} .fl.f2{fill:#fff}
.tsh{fill:rgba(0,0,0,.2)} .t1{fill:var(--t1)} .t2{fill:var(--t2)}
.ties{fill:none;stroke:var(--tie);stroke-width:16;stroke-dasharray:3.5 6}
.rail{fill:none;stroke:var(--steel);stroke-width:9}
.railin{fill:none;stroke:var(--ballast);stroke-width:5}
.rglow{fill:none;stroke:#FFD54A;stroke-width:20;stroke-linecap:round;opacity:.45;animation:glow 1.2s ease-in-out infinite alternate}
@keyframes glow{to{opacity:.2}}
.rflow{fill:none;stroke:#FFF3B0;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 9;animation:march .6s linear infinite}
@keyframes march{to{stroke-dashoffset:-15}}
.jdot{fill:#FFD54A;stroke:#8A5A00;stroke-width:2} .jring{fill:none;stroke:#FFD54A;stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:ring 1.4s ease-out infinite}
@keyframes ring{from{transform:scale(.8);opacity:1}to{transform:scale(2.2);opacity:0}}
.station{cursor:pointer}
.plat{fill:#D8D2C8;stroke:#A39B8F;stroke-width:1.5}
.roof{stroke:rgba(0,0,0,.18);stroke-width:1.5;transition:fill .2s}
.s-noun .roof{fill:var(--noun)} .s-verb .roof{fill:var(--verb)} .s-adjective .roof{fill:var(--adjective)} .s-adverb .roof{fill:var(--adverb)}
.station text{font:800 13px var(--f-body);fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:2.5px}
.station.sel .plat{fill:#FFF0B3;stroke:#F2B21B;stroke-width:3}
.station.sel .roof{stroke:#FFE27A;stroke-width:3}
.station.good .roof{fill:#2EAD5B!important} .station.bad .roof{fill:#E05252!important}
.tcar .csh{fill:rgba(0,0,0,.25)}
.tcar .wagon{fill:#2B4C7E;stroke:#1A2F52;stroke-width:1.2} .tcar .wtop{fill:rgba(255,255,255,.16)}
.tcar .coupler{fill:#333} .tcar .cab{fill:#8E2323} .tcar .boiler{fill:#E04848;stroke:#8E2323;stroke-width:1.2}
.tcar .chimney{fill:#2A2A2A;stroke:#666;stroke-width:1.2} .tcar .buffer{fill:#FFD54A}
.tcar text{font:700 12.5px var(--f-body);fill:#fff}
.tcar.in{opacity:0;transition:opacity .3s} .tcar.wrong .wagon{fill:#E05252}
.puff{fill:#fff;opacity:.8;transform-box:fill-box;transform-origin:center;animation:puff 1s ease-out forwards}
@keyframes puff{to{transform:scale(2.8) translate(2px,-3px);opacity:0}}
.tbtns .gbtn{border-left-width:8px}
.tbtns .s-noun{border-left-color:var(--noun)} .tbtns .s-verb{border-left-color:var(--verb)} .tbtns .s-adjective{border-left-color:var(--adjective)} .tbtns .s-adverb{border-left-color:var(--adverb)}
.tbtns .s-noun .gk{background:var(--noun)} .tbtns .s-verb .gk{background:var(--verb)} .tbtns .s-adjective .gk{background:var(--adjective)} .tbtns .s-adverb .gk{background:var(--adverb)}
.tbtns .gbtn.sel{background:var(--gold-bg);border-color:#F2B21B;box-shadow:0 4px 0 #F2B21B}
/* Speed Read: a dark spotlight stage with a speedometer */
.sstage{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;color:var(--ink);
  background:radial-gradient(ellipse at 50% -10%,#3A55A8 0%,#1A2550 45%,#0B1022 100%);box-shadow:0 6px 18px rgba(0,0,0,.2);
  --ink:#E8EEFF;--card:rgba(255,255,255,.08);--muted:#9FB3E6;--ok:#6FD39C;--ok-bg:#163326;--ok-line:#2F8A5C;--bad:#F29A85;--bad-bg:#3A1F1A;--bad-line:#9A4A3A;
  --peach:#2A2547;--teal:#7FD3FF;--mark:#6A5418;--title:#fff;--line:rgba(255,255,255,.18)}
.sstage::before{content:"";position:absolute;z-index:-1;left:50%;top:-30%;width:140%;height:200%;translate:-50% 0;pointer-events:none;
  background:conic-gradient(from 160deg at 50% 0%,transparent 0deg,rgba(160,190,255,.12) 12deg,transparent 24deg,rgba(160,190,255,.08) 34deg,transparent 46deg)}
.sgauge{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1}
.sgauge svg{width:150px;height:auto;overflow:visible}
.sgauge b{font:800 1.5rem var(--f-head);color:#fff;margin-top:-6px} .sgauge span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.gb{fill:none;stroke:hsl(var(--h) 75% 55%);stroke-width:10;opacity:.2;transition:opacity .4s}
.gb.on{opacity:1;filter:drop-shadow(0 0 3px hsl(var(--h) 80% 60%))}
.needle{fill:#FF5A6A;transform-box:view-box;transform-origin:60px 58px;transition:transform .7s cubic-bezier(.3,1.6,.5,1)}
.hub{fill:#fff;stroke:#FF5A6A;stroke-width:2}
.sbox{position:relative;display:flex;flex-direction:column;gap:12px;min-height:250px}
.sbox .eyebrow{color:var(--teal)}
.sflash{position:relative;overflow:hidden;flex:1;display:grid;place-items:center;min-height:170px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px}
.sflash span{font-family:var(--f-text);font-size:clamp(1.5rem,6.5vw,2rem);font-weight:700;text-align:center;line-height:1.25;color:#fff;text-shadow:0 0 18px rgba(120,170,255,.7)}
.sflash span.in{animation:wordin .14s ease-out}
@keyframes wordin{from{opacity:.15;scale:.94;filter:blur(2px)}}
.sflash .gcount{border-radius:14px}
.spbar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.spbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4FC3F7,#B388FF,#F06292);transition:width .15s linear}
.sstage .opt{border-color:rgba(255,255,255,.12)} .sstage .stem{color:#fff} .sstage .btn{background:#4F7CFF;color:#fff}
.spara{font-family:var(--f-text);margin:8px 0 0;line-height:1.55}
.spara mark{background:var(--mark);color:inherit}
/* Trap Dodger: under the sea (fixed colours in both themes) */
.dq{position:relative;overflow:hidden;padding:12px 14px;border-radius:16px;background:var(--card);border:1.5px solid var(--line)}
.dq .eyebrow{margin:0 0 4px;color:#1F8FB3} .dstem{margin:0;font:700 1.08rem/1.35 var(--f-head);color:var(--ink);min-height:1.4em}
.dread{position:absolute;left:0;bottom:0;height:4px;width:0;background:linear-gradient(90deg,#4FC3F7,#1F8FB3)}
.dq.reading .dread{animation:dread 4s linear forwards}
@keyframes dread{from{width:100%}to{width:0}}
.darena{height:min(52vh,430px);background:linear-gradient(#1C7FB8,#0D4E85 45%,#062849);color:#0B2A4A}
.sea{position:absolute;inset:0;pointer-events:none}
.ray{position:absolute;top:-20px;width:70px;height:120%;background:linear-gradient(rgba(255,255,255,.22),transparent 70%);transform-origin:top;animation:sway 7s ease-in-out infinite alternate}
.ray.r1{left:12%;rotate:14deg} .ray.r2{left:48%;width:46px;rotate:6deg;animation-delay:-3s} .ray.r3{left:78%;width:90px;rotate:-10deg;animation-delay:-5s;opacity:.7}
@keyframes sway{to{transform:skewX(8deg);opacity:.55}}
.fizz{position:absolute;bottom:-12px;width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);animation:fizz 6s linear infinite}
.fizz.f1{left:8%} .fizz.f2{left:30%;scale:.7;animation-delay:-2s;animation-duration:7s} .fizz.f3{left:62%;animation-delay:-4s} .fizz.f4{left:86%;scale:.6;animation-delay:-1s;animation-duration:8s} .fizz.f5{left:45%;scale:1.2;animation-delay:-5s;animation-duration:9s}
@keyframes fizz{to{transform:translate(10px,-460px);opacity:0}}
.weed{position:absolute;left:0;right:0;bottom:0;width:100%;height:60px}
.weed .wd1{fill:#0A3A33} .weed .wd2{fill:none;stroke:#1E7A55;stroke-width:5;stroke-linecap:round} .weed .rock{fill:#0B2E44}
.dwave{position:absolute;right:12px;top:12px;z-index:3;display:flex;align-items:center;gap:3px;height:26px;padding:0 9px;border-radius:999px;background:rgba(0,0,0,.28)}
.dwave i{width:3px;height:6px;border-radius:2px;background:#BFE9FF;transition:height .2s}
.dwave.on i{animation:eq .7s ease-in-out infinite alternate} .dwave.on i:nth-child(2n){animation-delay:-.35s} .dwave.on i:nth-child(3n){animation-delay:-.2s;animation-duration:.5s}
@keyframes eq{from{height:5px}to{height:20px}}
.bub{position:absolute;top:0;left:0;z-index:3;display:flex;align-items:center;gap:7px;max-width:calc(50% - 14px);min-height:52px;padding:9px 14px 9px 9px;
  border:2px solid rgba(255,255,255,.85);border-radius:28px;color:#0B2A4A;font:700 .92rem/1.25 var(--f-text);text-align:left;cursor:pointer;will-change:transform;
  background:radial-gradient(circle at 22% 22%,#fff 0 9%,rgba(255,255,255,.92) 10%,rgba(214,240,255,.9) 55%,rgba(150,210,245,.9));
  box-shadow:0 6px 16px rgba(0,20,50,.35),inset 0 -6px 12px rgba(80,160,220,.35)}
.bub .bt{min-width:0;overflow-wrap:anywhere}
.bub .gk{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1F8FB3;color:#fff;font-size:.75rem}
.bub:focus-visible{outline:3px solid #FFD54A;outline-offset:2px}
.bub:disabled{cursor:default}
.bub.popped{animation:popout .45s ease-out forwards}
.bub.trapped{background:radial-gradient(circle at 22% 22%,#fff 0 9%,#FFE1C7 10%,#FFB98A);border-color:#FF8A3D;animation:shake .35s}
.bub.answer{background:radial-gradient(circle at 22% 22%,#fff 0 9%,#DFF7E6 10%,#9EE2B3);border-color:#2EAD5B;box-shadow:0 0 0 4px rgba(46,173,91,.45),0 6px 16px rgba(0,20,50,.35)}
.bub.back{transition:transform .5s ease-out}
.dctl{align-items:center;gap:10px;margin:0}
.dauto{height:6px;margin-top:8px;border-radius:3px;background:rgba(46,173,91,.2);overflow:hidden}
.dauto i{display:block;height:100%;width:0;background:#2EAD5B;animation:dauto linear forwards}
@keyframes dauto{to{width:100%}}
.dtrans{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--surface);font-family:var(--f-text);line-height:1.55}
.dtrans p{margin:0 0 6px} .dtrans p:last-child{margin:0}
@media (max-width:430px){ .bub{font-size:.84rem;padding:7px 11px 7px 7px;min-height:46px} .dstem{font-size:1rem} }
@media (prefers-reduced-motion:reduce){ .ray,.fizz,.dwave.on i,.bub.trapped,.dq.reading .dread{animation:none} .bub.popped{animation:none;opacity:0} .fizz{display:none} }
@media (prefers-reduced-motion:reduce){
  .cloud,.rainfx,.wave,.lkshine,.duck,.rglow,.rflow,.jring,.hchip.time.low{animation:none}
  .drop.popped,.drop.splash,.gbtn.shake,.arena.hurt,.gcount span,.sflash span.in,.hchip.bump{animation:none}
  .drop.popped,.drop.splash{opacity:0}
  .gpart,.puff,.ripple,.arena.flash::after,.arena.hurt::before{display:none}
  .rain .arena.ticking::after{animation:none}
  .gfloat{animation-duration:.01s;animation-delay:.6s} .needle{transition:none}
}

/* bottom navigation bar and unit tabs */
body.has-nav main{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);border-top:1.5px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.bnav-in{max-width:700px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.bnav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 9px;color:var(--muted);text-decoration:none;font-size:.74rem;font-weight:600;min-height:56px}
.bnav a[aria-current=page]{color:var(--teal)}
.bnav a[aria-current=page]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--teal)}
.nbadge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--orange);color:#fff;font-size:.68rem;line-height:18px;text-align:center}
.utabs{display:flex;flex-wrap:wrap;gap:6px}
.tcard>.mbar{background:var(--line)}
.utabs a{flex:none;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;background:var(--surface)}
.utabs a[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.tabs a{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:.9rem;text-decoration:none}
.tabs a[aria-selected=true]{background:var(--navy);color:var(--on-dark);border-color:var(--navy)}

/* colour themes (Settings): the top bar, buttons, links and headings */
:root[data-theme=forest]{--navy:#1E4632;--teal:#2A7A4B;--title:#1E4632;--focus:#2A7A4B55}
:root[data-theme=sunset]{--navy:#5B2333;--teal:#BF4B28;--title:#5B2333;--focus:#BF4B2855}
:root[data-theme=berry]{--navy:#3F1D52;--teal:#8A3D8F;--title:#3F1D52;--focus:#8A3D8F55}
:root[data-theme=midnight]{--navy:#0F172A;--teal:#4752C4;--title:#1E2A5A;--focus:#4752C455}
:root[data-theme=gold]{--navy:#3A2A08;--teal:#9A6604;--title:#5A420C;--focus:#9A660455}
@media (prefers-color-scheme: dark){
  :root:not([data-mode=light])[data-theme=forest]{--navy:#23503A;--teal:#3A9C63;--title:#BFE3CC;--focus:#3A9C6366}
  :root:not([data-mode=light])[data-theme=sunset]{--navy:#6A2C3D;--teal:#D9673A;--title:#F3C9B5;--focus:#D9673A66}
  :root:not([data-mode=light])[data-theme=berry]{--navy:#4A2660;--teal:#A85AAE;--title:#E2C6EC;--focus:#A85AAE66}
  :root:not([data-mode=light])[data-theme=midnight]{--navy:#1F2A5C;--teal:#6874E0;--title:#C9D0FF;--focus:#6874E066}
  :root:not([data-mode=light])[data-theme=gold]{--navy:#3A2C0E;--teal:#B98410;--title:#F5D58A;--focus:#B9841066}
}
:root[data-mode=dark][data-theme=forest]{--navy:#23503A;--teal:#3A9C63;--title:#BFE3CC;--focus:#3A9C6366}
:root[data-mode=dark][data-theme=sunset]{--navy:#6A2C3D;--teal:#D9673A;--title:#F3C9B5;--focus:#D9673A66}
:root[data-mode=dark][data-theme=berry]{--navy:#4A2660;--teal:#A85AAE;--title:#E2C6EC;--focus:#A85AAE66}
:root[data-mode=dark][data-theme=midnight]{--navy:#1F2A5C;--teal:#6874E0;--title:#C9D0FF;--focus:#6874E066}
:root[data-mode=dark][data-theme=gold]{--navy:#3A2C0E;--teal:#B98410;--title:#F5D58A;--focus:#B9841066}
/* reading comfort (Settings) */
:root[data-size=l]{font-size:112.5%} :root[data-size=xl]{font-size:125%}
:root[data-font=easy]{--f-head:Verdana,Tahoma,"Trebuchet MS",sans-serif;--f-text:Verdana,Tahoma,"Trebuchet MS",sans-serif;--f-body:Verdana,Tahoma,"Trebuchet MS",sans-serif}
:root[data-font=easy] body{letter-spacing:.01em;word-spacing:.06em}
:root[data-font=easy] .text p{line-height:1.85}
:root[data-paper=on] .text{background:#FBF4E2;color:#2B2416;border-radius:12px;padding:16px 18px}
:root[data-paper=on] .text h2{color:#4A3A1C}
@media (prefers-color-scheme: dark){ :root:not([data-mode=light])[data-paper=on] .text{background:#2A2418;color:#EDE3CC} :root:not([data-mode=light])[data-paper=on] .text h2{color:#F0DDB0} }
:root[data-mode=dark][data-paper=on] .text{background:#2A2418;color:#EDE3CC} :root[data-mode=dark][data-paper=on] .text h2{color:#F0DDB0}
/* settings page */
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 16px;font-weight:600}
.seg button[aria-checked=true]{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.swatch{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border:2px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:700;font-size:.9rem;text-align:left}
.swatch[aria-checked=true]{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal) inset}
.swatch .chips{display:flex;gap:4px}.swatch .chips i{width:22px;height:22px;border-radius:6px;display:block}
.swatch small{font-weight:400;color:var(--muted);font-size:.75rem;line-height:1.3}
.swatch:disabled{opacity:.6;cursor:not-allowed}
.preview{border-radius:12px;overflow:hidden;border:1.5px solid var(--line)}
.preview .pbar{background:var(--navy);color:var(--on-dark);padding:8px 12px;font-weight:700;font-size:.9rem}

/* ---------- icons, tiles, workout and stats (Lumosity-style) ---------- */
.itile{flex:none;display:inline-grid;place-items:center;color:#fff;border-radius:12px;background:var(--hue);
  background:linear-gradient(140deg,var(--hue),color-mix(in srgb,var(--hue) 62%,var(--navy)))}
.itile.s{width:32px;height:32px;border-radius:9px} .itile.m{width:44px;height:44px} .itile.l{width:64px;height:64px;border-radius:16px}
.uhead{flex-wrap:nowrap} .uhead h3{flex:1;min-width:0}
.utabs a{display:inline-flex;align-items:center;gap:6px}
.urow>.itile{flex:none}
/* activity tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.atile{display:flex;flex-direction:column;padding:0;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);overflow:hidden;text-align:left;font:inherit;cursor:pointer;transition:transform .12s,box-shadow .12s}
.atile:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.atile:disabled{opacity:.55;cursor:not-allowed}
.ahead{position:relative;display:grid;place-items:center;height:78px;color:#fff;background:var(--hue);
  background:radial-gradient(circle at 20% 25%,rgba(255,255,255,.18) 0 18px,transparent 19px),radial-gradient(circle at 85% 80%,rgba(255,255,255,.12) 0 26px,transparent 27px),linear-gradient(140deg,var(--hue),color-mix(in srgb,var(--hue) 60%,var(--navy)))}
.adone{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--ok);display:grid;place-items:center;color:#fff}
.abody{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}
.abody b{line-height:1.25}
.ghead{margin-top:6px}
/* mission step icons */
.mico{position:relative;flex:none}
.mtick{position:absolute;right:-5px;bottom:-5px;width:18px;height:18px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;border:2px solid var(--gold-bg)}
.mtick svg{width:10px;height:10px}
.msteps li.next .itile{box-shadow:0 0 0 3px var(--orange)}
.msteps li.locked .itile{filter:grayscale(1)}
/* units path icons */
.pstep .dot svg{display:block}
/* home: workout card and quick tiles */
.workout{gap:14px}
.wo-head{display:flex;gap:16px;align-items:center}
.ring{position:relative;flex:none;width:100px;height:100px}
.ring>svg{width:100%;height:100%}
.ring>svg path{fill:none;stroke:var(--line);stroke-width:11}
.ring>svg path.on{stroke:var(--gold)}
.ring .itile{position:absolute;inset:0;margin:auto;border-radius:50%;width:56px;height:56px}
.wo-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wo-list li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px}
.wo-list li>span:not(.itile){flex:1;min-width:0}
.wo-list li.next{background:var(--card);font-weight:700}
.wo-list li.done>span:not(.itile):not(.wo-tick){color:var(--muted);text-decoration:line-through}
.wo-tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
.btn.go{background:var(--orange);border-radius:999px;padding:14px 22px;font-size:1.05rem;width:100%}
.qtiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qtile{display:flex;flex-direction:column;gap:6px;padding:14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none}
.qtile:hover{border-color:var(--teal)}
/* My stats */
.scard{border:1.5px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.shead{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1.5px solid var(--line);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.shead svg{color:var(--gold)}
.srow{border-bottom:1px solid var(--line)} .srow:last-child{border-bottom:0}
.srow summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:12px 16px 12px 28px;align-items:center}
.srow summary::-webkit-details-marker{display:none}
.srow.big summary{padding-left:16px}
.sname{grid-column:1;font-weight:700}
.srow.big .sname{font-size:1.1rem}
.sline{grid-column:1;display:flex;align-items:center;gap:10px}
.sline b{font-family:var(--f-head);font-size:1.15rem;font-variant-numeric:tabular-nums;min-width:3ch}
.srow.big .sline b{font-size:1.6rem}
.sbar{flex:1;height:14px;border-radius:7px;background:var(--card);overflow:hidden}
.srow.big .sbar{height:20px;border-radius:10px}
.sbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#F6C94A,#F2B21B)}
.chev{grid-column:2;grid-row:1/3;color:var(--muted);transition:transform .2s}
.srow[open] .chev{transform:rotate(90deg)}
.sdet{padding:0 16px 14px 28px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}

/* Reading level up */
.lvlup{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;background:var(--gold-bg);border:2px solid var(--gold);border-radius:14px;padding:14px 16px}
.lvlup p{margin:2px 0 0}
.lvl-from,.lvl-to{font-weight:900;font-size:1.4rem;border-radius:10px;padding:4px 10px}
.lvl-from{color:var(--muted);text-decoration:line-through;opacity:.7}
.lvl-to{background:var(--gold);color:#1A1205}
.lvl-arrow{font-size:1.4rem;font-weight:900;color:var(--gold)}

/* AI marking log (teacher) */
.chip.ok{background:var(--ok-bg);color:var(--ok)} .chip.bad{background:var(--bad-bg);color:var(--bad)}
tr.flagged td{background:var(--bad-bg)}

/* Road to Checkpoint + trophy cabinet */
.road svg{display:block;width:100%;max-width:440px;height:auto;margin:4px auto 0;overflow:visible}
.road text{font-family:inherit;fill:var(--ink)}
.road .rd-t{font-size:14px;font-weight:800}
.road .rd-t.done{fill:var(--teal)}
.road .rd-s{font-size:11.5px;fill:var(--muted)}
.road .rd-go{font-size:12px;font-weight:900}
.road .rd-num{font-size:17px;font-weight:900}
.road .rd-you{font-size:10px;font-weight:900;letter-spacing:.08em;fill:var(--orange)}
.road .rd-here{fill:none;stroke:var(--orange);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:rdpulse 1.8s ease-in-out infinite}
.road a:focus-visible{outline:none} .road a:focus-visible .rd-t{text-decoration:underline}
@keyframes rdpulse{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.35;transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.road .rd-here{animation:none}}
.shelf{margin-top:12px}
.shelf:first-child{margin-top:0}
.shelf-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px solid var(--gold);padding-bottom:4px;margin-bottom:8px}
.shelf-h span{font-size:.8rem;color:var(--muted)}
.shelf-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.trophy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:var(--gold-bg);border-radius:12px;padding:10px 6px;font-size:.78rem}
.trophy svg{width:34px;height:34px}
.trophy b{font-size:.82rem;line-height:1.2}
.trophy span{color:var(--muted);font-size:.7rem;line-height:1.25}
.trophy.locked{background:var(--card);opacity:.55}

/* Unit checkpoint mini tests */
.minicard{display:flex;gap:12px;align-items:center;margin-top:12px;padding:12px 14px;border:2px dashed var(--teal);border-radius:12px;background:var(--surface)}
.minicard.won{border-style:solid;background:var(--ok-bg);border-color:var(--ok-line)}
.minicard>div{flex:1;min-width:0}
.minicard p{margin:2px 0 0}
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.part{background:var(--card);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.part b{font-size:1.2rem}
.part span{font-size:.8rem;color:var(--muted)}
.part .bar i.low{background:var(--orange)}
@media (max-width:640px){ .player{flex-wrap:wrap} .player .btn{white-space:normal} }

/* Vocabulary and grammar tiers */
.qhead .chip.tier{margin-left:6px}
.chip.tier.t1{background:#DCE8F7;color:#2F6FB5}
.chip.tier.t2{background:#EBE2F8;color:#7B4FC4}
@media (prefers-color-scheme:dark){:root:not([data-mode=light]) .chip.tier.t1{background:#1E3350;color:#9CC3F0} :root:not([data-mode=light]) .chip.tier.t2{background:#33264D;color:#C9B2F2}}
:root[data-mode=dark] .chip.tier.t1{background:#1E3350;color:#9CC3F0}
:root[data-mode=dark] .chip.tier.t2{background:#33264D;color:#C9B2F2}
.tiermove{margin-bottom:10px}

/* Teacher: managing classes and colleagues, printable login sheets */
.btn.danger{color:var(--bad);border-color:var(--bad-line)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}
.pass pre{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;white-space:pre-wrap;word-break:break-all;font-size:.95em}
.printonly{display:none}
.slips{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:18px}
.slip{border:1.5px dashed var(--line);border-radius:8px;padding:10px 14px;break-inside:avoid}
.sl-t{font-size:.72em;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.sl-n{font-weight:700;font-size:1.1em;margin:2px 0 6px}
.sl-l{font-size:.75em;color:var(--muted)}
.sl-u{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;word-break:break-all;margin-bottom:6px}
.sl-g{display:grid;grid-template-columns:1fr 1fr;margin-bottom:4px} .sl-g b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.35em}
@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff!important;color:#000!important}
  header.top,.noprint,.hero{display:none!important}
  .printonly{display:block}
  .lsheet{color:#000} .lsheet .tbl{overflow:visible}
  .slips{display:grid;grid-template-columns:1fr 1fr;gap:0;break-before:page}
  .slip{border:1.2px dashed #777;border-radius:0;height:49mm;box-sizing:border-box;padding:3.5mm 5mm}
  .sl-t,.sl-l{color:#555}
}

/* Escape room */
.escstory{border-left:4px solid var(--teal)}
.escroom{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.escobj{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-align:center;min-height:96px;justify-content:center}
.escobj svg{color:#7B4FC4} .escobj.on{border-color:var(--teal);box-shadow:0 0 0 3px var(--focus)}
.escobj.done{border-color:var(--ok-line);background:var(--ok-bg)} .escobj.done svg{color:var(--ok)}
.escpuz .esctext{font-size:1.1em;font-family:var(--f-text);margin:0}
.escopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.escopts .opt{background:var(--surface);border:2px solid var(--line);border-radius:12px;font-weight:600;cursor:pointer;justify-content:center;text-align:center}
.escopts .opt:hover{border-color:var(--teal)}
.escopts .opt:disabled{opacity:.45;text-decoration:line-through}
.escdoc p{font-family:var(--f-text);margin:.4em 0} .escdoc summary{cursor:pointer}
.esclock h3{display:flex;align-items:center;gap:6px;margin:0}
.nb{display:inline-block;min-width:1.8em;text-align:center;margin-left:4px;padding:2px 6px;border-radius:6px;background:var(--gold-bg);color:var(--ink)}
.dials{display:flex;gap:12px;justify-content:center;margin:6px 0}
.dial{display:flex;flex-direction:column;align-items:center;gap:4px}
.dial b{font-size:2em;width:1.6em;text-align:center;padding:4px 0;border:2px solid var(--line);border-radius:10px;background:var(--surface)}
.dial button{font:inherit;border:0;background:var(--card);color:var(--ink);border-radius:8px;width:48px;height:36px;cursor:pointer}
@media (max-width:480px){ .escopts{grid-template-columns:1fr} .escobj{min-height:84px;font-size:.9em} }
/* Escape room atmosphere: the guard's countdown, the dark closing in, events, the golden key, the exit door */
.escpic{display:block;width:100%;height:auto;border-radius:14px;margin:8px 0}
.eschud{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;margin:0 0 6px;border-radius:12px;background:var(--navy);color:var(--on-dark);font-size:.95em}
.eschud .chip{background:var(--gold-bg);color:var(--ink);display:inline-flex;align-items:center;gap:4px}
.eschud #guard b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.1em}
.eschud #guard.near{color:#FFB4A2;font-weight:700}
#escdark{position:fixed;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(0,0,0,.75) 100%);transition:opacity 1s}
#escdark.caught{background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(140,0,0,.55) 100%)}
.chip.gold{background:var(--gold-bg);color:var(--ink)}
.escobj.key{grid-column:1/-1;flex-direction:row;min-height:0;padding:10px 12px;border-style:dashed;border-color:var(--gold)}
.escobj.key svg{color:var(--gold)}
.escobj.key.lost{opacity:.55;border-color:var(--line)} .escobj.key.lost svg{color:var(--muted)}
.goldkey{border:2px solid var(--gold);background:var(--gold-bg)}
.escdoc.off{background:#0B0F15;color:#C9D3DC;border-color:#000}
.escdoc.torch{background:radial-gradient(circle at 50% 30%,var(--gold-bg),var(--surface) 75%)}
.escmodal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,8,12,.78)}
.escmodal .panel{max-width:440px;width:100%;border:3px solid var(--orange)}
.escmodal h2{margin:2px 0 6px} .escmodal #evtime{font-size:1.4em;color:var(--orange)}
.esctoast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:30;max-width:min(92vw,440px);padding:10px 16px;border-radius:12px;background:var(--navy);color:var(--on-dark);font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.35);text-align:center}
.esctoast.bad{background:#8E2C1B} .esctoast.gold{background:var(--gold);color:#1A1205}
.esclock.open{border-color:var(--ok);background:var(--ok-bg)}
.ftimer{display:flex;flex-direction:column;align-items:center;margin:4px auto;width:7em;padding:6px;border-radius:14px;background:var(--navy);color:var(--on-dark)}
.ftimer b{font-size:2.4em;line-height:1;font-family:ui-monospace,Menlo,Consolas,monospace} .ftimer span{font-size:.8em;opacity:.85}
.ftimer.near{background:#8E2C1B}
.fword{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:10px 0}
.fword b{width:2em;height:2.3em;display:flex;align-items:center;justify-content:center;font-size:1.3em;border-bottom:3px solid var(--teal);background:var(--card);border-radius:6px 6px 0 0}
.ftiles{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ftiles .opt{width:2.6em;height:2.6em;font-size:1.3em;font-weight:800;border:2px solid var(--gold);border-radius:10px;background:var(--gold-bg);color:var(--ink);cursor:pointer}
.ftiles .opt:disabled{opacity:.25}
.escstars{display:flex;justify-content:center;gap:10px;font-size:3em;line-height:1;margin:6px 0 0;color:var(--line)}
.escstars .on{color:var(--gold)}
.note.center{text-align:center}
@media (prefers-reduced-motion:no-preference){
  .esclock.shake,.fword.shake{animation:hurt .45s ease-out}
  .esclock.open h3 svg{animation:spring .6s ease-out}
  @keyframes spring{30%{transform:translateY(-8px) rotate(-18deg)}60%{transform:translateY(-4px) rotate(-12deg)}100%{transform:translateY(-6px) rotate(-14deg)}}
  .escobj.key.glint{animation:glint 2.4s ease-in-out infinite}
  @keyframes glint{0%,70%,100%{box-shadow:none}80%{box-shadow:0 0 0 4px var(--gold-bg),0 0 18px var(--gold)}}
  .eschud #guard.near b{display:inline-block;animation:tick 1s infinite}
  .ftimer.near b{animation:tick 1s infinite}
  .escstars .on{display:inline-block;animation:count .5s ease-out both}
  .escmodal .panel{animation:hurt .4s ease-out}
}
/* Team escape room board (teacher, for the projector) */
.liveboard{display:flex;flex-direction:column;gap:14px}
.lvhead{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.lvjoin{margin:4px 0 0;font-size:1.1em}
.lvcode{display:flex;flex-direction:column;align-items:center;background:var(--navy);color:var(--on-dark);border-radius:16px;padding:10px 24px}
.lvcode span{font-size:.8em;opacity:.8} .lvcode b{font-size:3em;letter-spacing:.12em;font-family:ui-monospace,Menlo,Consolas,monospace;line-height:1.1}
.lvteams{display:flex;flex-direction:column;gap:8px}
.lvteam{display:grid;grid-template-columns:3em 1fr 1.4fr auto;gap:12px;align-items:center;padding:12px 16px;border:2px solid var(--line);border-radius:14px;background:var(--card);font-size:1.15em}
.lvteam.out{border-color:var(--ok-line);background:var(--ok-bg)}
.lvrank{font-size:1.3em;color:var(--gold)} .lvname{display:flex;flex-direction:column} .lvname .note{font-size:.7em}
.lvrooms{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .lvrooms .note{font-size:.75em;margin-left:6px}
.lvrooms i{width:34px;height:14px;border-radius:7px;background:var(--line)} .lvrooms i.done{background:var(--ok)} .lvrooms i.now{background:var(--gold)}
.lvtime{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.1em}
.lvguard{align-self:flex-start;padding:8px 16px;border-radius:12px;background:var(--navy);color:var(--on-dark);font-size:1.3em}
.lvguard b{font-family:ui-monospace,Menlo,Consolas,monospace} .lvguard.near{background:#8E2C1B}
@media (max-width:600px){ .lvteam{grid-template-columns:2.2em 1fr auto;font-size:1em} .lvrooms{grid-column:2/4} }
/* Listening Lab */
.labteach h2{margin:4px 0 8px} .labteach p{margin:.4em 0}
.labeg{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--card);border-left:4px solid var(--teal)}
.labeg .stem{margin:0} .egrow{margin:.3em 0;font-family:var(--f-text)} .egrow .chip{font-family:var(--f-body);margin-right:6px}
.labdots{display:flex;gap:6px;margin:4px 0 10px} .labdots i{flex:1;max-width:46px;height:8px;border-radius:4px;background:var(--line)}
.labdots i.done{background:var(--teal)} .labdots i.now{background:var(--gold)}
.kw{font:inherit;font-family:var(--f-text);font-size:1.05em;padding:2px 4px;margin:2px 0;border:0;border-bottom:3px solid transparent;border-radius:6px 6px 0 0;background:var(--card);color:var(--ink);cursor:pointer}
.kw.on{background:var(--mark);border-bottom-color:var(--orange)}
.kw.key{background:var(--mark);border-bottom-color:var(--teal);font-weight:700;cursor:default} .kw.extra{text-decoration:line-through;opacity:.6}
.kw:disabled{cursor:default;color:var(--ink);opacity:1} .kw.extra:disabled{opacity:.6}
.labeg .kw{background:transparent} .labeg .kw.key{background:var(--mark)}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.pick{font:inherit;font-weight:600;padding:10px 14px;border:2px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer}
.pick.on{border-color:var(--teal);background:var(--mint)} .pick.right{border-color:var(--ok-line);background:var(--ok-bg)} .pick.wrong{border-color:var(--bad-line);background:var(--bad-bg)}
.pick:disabled{cursor:default;color:var(--ink)}
.labplayer{margin:8px 0 12px;flex-wrap:wrap}
.ltrans p{font-family:var(--f-text);margin:.4em 0}
mark.lkey{background:var(--ok-bg);color:var(--ok);font-weight:700;border-bottom:2px solid var(--ok);padding:0 2px;border-radius:3px}
mark.ltrap{background:var(--peach);color:var(--orange);font-weight:700;border-bottom:2px dashed var(--orange);padding:0 2px;border-radius:3px}
.ltrans .legend{font-family:var(--f-body)} .trapnotes{margin:6px 0 0;padding-left:1.2em} .trapnotes li{margin:.2em 0}
/* Reading Lab: the text above each question, labelled paragraphs, conversations and gaps */
.rbox{margin:10px 0 12px;padding:12px 14px;border-radius:12px;background:var(--card);border-left:4px solid var(--teal);scroll-margin-top:12px}
.rbox p{font-family:var(--f-text);margin:.45em 0;line-height:1.55}
.rbox .legend,.rbox .trapnotes{font-family:var(--f-body)}
.rpass p{display:flex;gap:10px;align-items:flex-start}
.plabel{flex:0 0 26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:var(--f-body);font-size:.8rem;margin-top:1px}
.rconv b{font-family:var(--f-body)}
.rgap{display:inline-block;min-width:4.5em;border-bottom:2px solid var(--ink);margin:0 2px;height:1em;vertical-align:baseline}
.rgap.fill{min-width:0;height:auto;border-bottom:2px solid var(--ok);color:var(--ok);padding:0 3px}

.traptip{margin:.4em 0 0}
.lvchip{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1.5px solid currentColor;vertical-align:middle;white-space:nowrap}
.lvchip.lv0{color:var(--teal);background:var(--mint)} .lvchip.lv1{color:var(--gold);background:var(--gold-bg)} .lvchip.lv2{color:var(--orange);background:var(--peach)}
.qhead .lvchip{margin-left:auto;margin-right:8px}
.labdots i.done.l1{background:var(--gold)} .labdots i.done.l2{background:var(--orange)} .labdots i.now{box-shadow:0 0 0 2px var(--gold) inset;background:var(--gold-bg)}
.lvup,.lvdown{margin:0 0 10px;padding:10px 14px;border-radius:12px;font-weight:600}
.lvup{background:var(--gold-bg);border:2px solid var(--gold)} .lvup b{color:var(--gold)}
.lvdown{background:var(--mint);border:2px solid var(--teal)}
.lvpath{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:4px 0 8px}
.lvpath li{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:4.6em;padding:6px 8px;border-radius:10px;font-size:.75rem;font-weight:700;border:2px solid var(--line)}
.lvpath li span{font-size:1.1rem} .lvpath li.lv0{color:var(--teal)} .lvpath li.lv1{color:var(--gold)} .lvpath li.lv2{color:var(--orange)}
.lvpath li:not(.ok){opacity:.7;border-style:dashed} .lvpath li.ok{border-color:currentColor}
.traps{display:flex;flex-direction:column;gap:8px}
.trap{display:grid;grid-template-columns:9.5em 1fr auto auto;gap:10px;align-items:center}
.trap .sbar i{background:linear-gradient(90deg,#F0A07A,var(--orange))} .trap.weak .tname{color:var(--orange);font-weight:700}
@media (max-width:480px){ .trap{grid-template-columns:1fr auto;gap:4px 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
  .trap .tname{grid-column:1;grid-row:1} .trap .note{grid-column:2;grid-row:1;text-align:right}
  .trap .sbar{grid-column:1;grid-row:2;align-self:center} .trap .btn{grid-column:2;grid-row:2} }

/* Celebrations (js/celebrate.js): fixed colours, they sit over any theme */
#celebrate{position:fixed;inset:0;z-index:60;pointer-events:none}
.celfx{position:absolute;inset:0;width:100%;height:100%}
.celchip{position:absolute;left:50%;top:calc(70px + env(safe-area-inset-top, 0px));translate:-50% 0;padding:10px 20px;border-radius:999px;
  background:linear-gradient(135deg,#2B4C9E,#7B4FC4);color:#FFD54A;font:800 1.5rem var(--f-head);font-variant-numeric:tabular-nums;
  box-shadow:0 8px 24px rgba(0,0,0,.3);animation:celchip 2.4s ease-in-out forwards}
@keyframes celchip{0%{opacity:0;scale:.4}12%{opacity:1;scale:1.1}20%{scale:1}80%{opacity:1;translate:-50% 0}100%{opacity:0;translate:-50% -30px}}
.celbig{position:absolute;inset:0;pointer-events:auto;display:grid;place-items:center;overflow:hidden;cursor:pointer;
  background:radial-gradient(120% 90% at 50% 30%,rgba(36,71,110,.96),rgba(10,24,42,.97) 70%);animation:fade-in .3s;color:#fff;
  padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.celbig.out{opacity:0;transition:opacity .3s}
@keyframes fade-in{from{opacity:0}}
.celrays{position:absolute;left:50%;top:42%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;background:repeating-conic-gradient(rgba(255,213,74,.15) 0 10deg,transparent 10deg 20deg);animation:celspin 14s linear infinite}
@keyframes celspin{to{rotate:1turn}}
.celflash{position:absolute;inset:0;background:#fff;opacity:0;animation:celflash .5s}
@keyframes celflash{30%{opacity:.85}to{opacity:0}}
.celcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;max-width:24em}
.celbadge{width:136px;height:136px;margin-bottom:14px;border-radius:50%;display:grid;place-items:center;font-size:62px;position:relative;
  background:radial-gradient(circle at 35% 30%,#FFE58A,#F2B21B 55%,#B97C05);box-shadow:0 0 0 6px #FFF3C4,0 0 0 11px #E9A80F,0 10px 40px rgba(255,200,60,.6);animation:celstamp .7s cubic-bezier(.2,1.4,.4,1)}
.celbadge::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;animation:celshine 1.6s .7s ease-in-out}
@keyframes celstamp{0%{transform:scale(2.4) rotate(-25deg);opacity:0}60%{transform:scale(.9) rotate(4deg);opacity:1}}
@keyframes celshine{from{background-position:120% 0}to{background-position:-120% 0}}
.celtitle{margin:0;font:800 clamp(1.5rem,6vw,2rem)/1.15 var(--f-head);text-wrap:balance}
.celsub{margin:0;color:#BFD3E8}
.celxp{margin:4px 0 0;font:800 2rem var(--f-head);color:#FFD54A;font-variant-numeric:tabular-nums}
.celtap{margin:18px 0 0;color:#9FB6CF;font-size:.9rem;animation:celtap 1.6s 1.5s ease-in-out infinite both}
@keyframes celtap{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .celrays,.celtap,.celchip{animation:none} .celbadge,.celflash,.celbadge::after{animation-duration:.01s} .celchip{opacity:1} }

/* Results: Strong / Practise next */
.sumcards{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.sumcards{grid-template-columns:1fr 1fr}}
.sumcard{border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.sumcard p{margin:0}
.sumhead{font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.sumcard.good{background:var(--ok-bg);border:2px solid var(--ok-line)} .sumcard.good .sumhead{color:var(--ok)}
.sumcard.next{background:var(--peach);border:2px solid var(--orange)} .sumcard.next .sumhead{color:var(--orange)}
.sumchips{display:flex;flex-wrap:wrap;gap:6px}
.schip{font-weight:700;font-size:.9rem;padding:4px 10px;border-radius:999px;background:var(--card);color:var(--ink)}
.sumcard.good .schip{border:1px solid var(--ok-line)} .sumcard.next .schip{border:1px solid var(--orange)}
@media (prefers-reduced-motion:no-preference){
  .sumcard.flash{animation:sumflash 1.6s ease-in-out infinite}
  @keyframes sumflash{0%,100%{box-shadow:0 0 0 0 rgba(224,116,63,0)}50%{box-shadow:0 0 0 6px rgba(224,116,63,.45)}}
}
button.schip{cursor:pointer;font-family:inherit} .sumcard .btn{align-self:flex-start}
.dwhole{margin:4px 0 12px} .dwhole summary{cursor:pointer;color:var(--teal);font-weight:700}
/* Grammar Lab */
.glsteps{margin:0 0 14px;padding-left:22px;display:grid;gap:6px} .glsteps li b{margin-right:6px}
.glbar{display:flex;gap:4px;margin:4px 0 10px;flex-wrap:wrap} .glbar span{flex:1;min-width:64px;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 6px;border-radius:999px;background:var(--line);color:var(--muted)}
.glbar span.done{background:var(--mint);color:var(--teal)} .glbar span.now{background:var(--gold-bg);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--gold)}
.glscene{font-family:var(--f-text);font-size:1.05rem} .glscene p{margin:.45em 0} .glscene mark{background:var(--mark);color:inherit;padding:0 2px;border-radius:3px;font-weight:700}
.glquote{font-family:var(--f-text);font-size:1.1rem;margin:4px 0 10px;padding:10px 14px;border-left:4px solid var(--teal);background:var(--card);border-radius:8px}
.glmeter{margin:6px 0 12px} .glm-track{position:relative;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--bad-line),var(--gold),var(--ok-line))}
.glm-track i{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--card);border:3px solid var(--ink)}
.glm-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-top:6px} .glmeter .note{margin:4px 0 0}
.gltime{margin:6px 0 12px} .glt-line{position:relative;height:30px;border-radius:8px;background:var(--mint);border:1.5px solid var(--teal);display:flex;align-items:center;justify-content:center}
.glt-span{font-size:.8rem;font-weight:700;color:var(--teal)} .glt-dot{position:absolute;top:-8px;bottom:-8px;width:3px;margin-left:-1.5px;background:var(--orange);border-radius:2px}
.glt-ends{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-top:4px} .gltime .note{margin:4px 0 0}
.glsort{display:grid;gap:10px;margin:12px 0} .glrow{padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--card)}
.glrow p{margin:0 0 8px;font-family:var(--f-text);font-size:1.02rem} .glrow.ok{border-color:var(--ok-line);background:var(--ok-bg)} .glrow.bad{border-color:var(--bad-line);background:var(--bad-bg)}
.glbins{display:flex;gap:6px;flex-wrap:wrap} .glbin{font:inherit;font-size:.82rem;padding:6px 10px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.glbin.on{border-color:var(--teal);background:var(--teal);color:#fff} .glbin.ans{box-shadow:0 0 0 2px var(--ok-line)} .glbin:disabled{cursor:default}
.glclues ul{margin:6px 0 0;padding-left:0;list-style:none;display:grid;gap:6px} .glclues li{font-size:.95rem}
/* Grammar Lab verb helper and grammar-word sheet */
.glbank{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--card)}
.glbank summary{cursor:pointer;font-weight:600}
.glbank[open] summary{margin-bottom:8px}
.glbank-in{display:flex;flex-wrap:wrap;gap:6px}
.glbank-in span{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:.92rem}
.glbank .note{margin:8px 0 0}
/* Grammar Lab building blocks */
.glpath{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:.85rem;color:var(--muted)}
.glpath span{border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.glpath span.now{border-color:var(--teal);color:var(--ink);font-weight:600}
.glpath i{font-style:normal}
.glblocks{display:flex;flex-wrap:wrap;gap:6px}

/* Grammar Builder: the grammar tower (tower.js), the build HUD and the brick sheet */
:root{--tw-sky1:#CDEBFA;--tw-sky2:#F2FAFF;--tw-ground:#7FB36A;--tw-brick:#E9A93A;--tw-brick-line:#A8701A;--tw-build:#2BA59E;--tw-ghost:#8FA3B5;--tw-crane:#E2A21A;--tw-sun:#FFD54A;--tw-cloud:#FFFFFF}
@media (prefers-color-scheme: dark){ :root:not([data-mode=light]){--tw-sky1:#0E1B33;--tw-sky2:#1B2D4A;--tw-ground:#2F5A3A;--tw-brick:#F0B83C;--tw-brick-line:#8A6418;--tw-build:#2BA59E;--tw-ghost:#5E7286;--tw-crane:#F0B83C;--tw-sun:#E8E6D8;--tw-cloud:#2B3D5A}}
:root[data-mode=dark]{--tw-sky1:#0E1B33;--tw-sky2:#1B2D4A;--tw-ground:#2F5A3A;--tw-brick:#F0B83C;--tw-brick-line:#8A6418;--tw-build:#2BA59E;--tw-ghost:#5E7286;--tw-crane:#F0B83C;--tw-sun:#E8E6D8;--tw-cloud:#2B3D5A}
.tower{display:block;width:100%;height:auto;max-width:560px;margin:0 auto}
.tw-sky{fill:var(--tw-sky1)} .tw-ground{fill:var(--tw-ground)} .tw-sun{fill:var(--tw-sun)} .tw-cloud{fill:var(--tw-cloud);opacity:.85}
.tw-b{cursor:pointer;outline:none} .tw-b:focus-visible .tw-shell{stroke:var(--teal);stroke-width:3}
.tw-shell{stroke-width:1.5}
.tw-done .tw-shell,.tw-due .tw-shell{fill:var(--tw-brick);stroke:var(--tw-brick-line)}
.tw-shine{stroke:#fff;stroke-opacity:.55;stroke-width:2;stroke-linecap:round}
.tw-crack{fill:none;stroke:#5A3A10;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tw-build .tw-shell{fill:var(--surface);stroke:var(--tw-build);stroke-dasharray:4 3} .tw-fill{fill:var(--tw-build);opacity:.75}
.tw-next .tw-shell{fill:var(--surface);stroke:var(--teal);stroke-width:2.5}
.tw-todo .tw-shell{fill:none;stroke:var(--tw-ghost);stroke-dasharray:3 4;opacity:.7}
.tw-crane path{fill:none;stroke:var(--tw-crane);stroke-width:2.5;stroke-linecap:round} .tw-cab{fill:var(--tw-crane)} .tw-crane .tw-hookend{fill:var(--tw-crane);stroke:none}
.tower.small{max-height:150px}
@media (prefers-reduced-motion:no-preference){
  .tw-next .tw-shell{animation:twglow 1.6s ease-in-out infinite} @keyframes twglow{50%{stroke-opacity:.35;fill:var(--mint)}}
  .tw-hook{animation:twswing 2.4s ease-in-out infinite;transform-origin:50% 0;transform-box:fill-box} @keyframes twswing{50%{transform:rotate(2.5deg)}}
  .tw-due{animation:twwobble 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%} @keyframes twwobble{0%,80%,100%{transform:none}85%{transform:rotate(-2deg)}90%{transform:rotate(2deg)}}
  .tw-drop{animation:twdrop .7s cubic-bezier(.3,1.4,.6,1) both} @keyframes twdrop{0%{transform:translateY(-160px);opacity:0}60%{opacity:1}100%{transform:none}}
  .gbshake{animation:shake .35s} .gbstrip i.drop{animation:twdrop .5s cubic-bezier(.3,1.4,.6,1) both}
  .gbcombo.hot{animation:bump .5s} }
.gbtower{background:var(--card);border-radius:14px;padding:6px}
.gbmini{cursor:pointer;margin:6px 0}
.gbrank{display:flex;gap:12px;align-items:center;background:var(--gold-bg);border:2px solid var(--gold);border-radius:14px;padding:10px 14px;margin:0 0 12px}
.gbrank .bar{margin:6px 0 4px}
.gbbadge{font-size:2rem;line-height:1}
.gblegend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.85rem;color:var(--muted);margin:8px 2px 0}
.gblegend span{display:inline-flex;align-items:center;gap:6px}
.lg{display:inline-block;width:18px;height:11px;border-radius:3px;border:1.5px solid}
.lg.done{background:var(--tw-brick);border-color:var(--tw-brick-line)} .lg.build{background:linear-gradient(to top,var(--tw-build) 50%,transparent 50%);border-color:var(--tw-build);border-style:dashed}
.lg.next{border-color:var(--teal);border-width:2.5px} .lg.due{background:var(--tw-brick);border-color:#5A3A10;background-image:linear-gradient(115deg,transparent 45%,#5A3A10 46%,#5A3A10 52%,transparent 53%)}
.lg.todo{border-color:var(--tw-ghost);border-style:dashed}
.gbplan{margin:6px 0 10px;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:6px}
.gbhud{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.gbstrip{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.gbstrip i{flex:1 0 18px;max-width:34px;height:16px;border-radius:4px;border:1.5px dashed var(--tw-ghost)}
.gbstrip i.on{background:var(--tw-brick);border:1.5px solid var(--tw-brick-line)}
.gbstrip i.half{background:linear-gradient(to top,var(--tw-build) 55%,transparent 55%);border:1.5px solid var(--tw-build)}
.gbstrip i.x{background:var(--bad-bg);border:1.5px solid var(--bad-line)}
.gbcombo{font-weight:800;padding:4px 10px;border-radius:999px;background:var(--card);color:var(--muted);white-space:nowrap}
.gbcombo.hot{background:var(--orange);color:#fff}
.gbtoast{margin:10px 0;padding:10px 14px;border-radius:12px;background:var(--orange);color:#fff;font-weight:700;text-align:center}
.gbcrack{display:flex;gap:12px;align-items:flex-start;background:var(--peach);border:2px solid var(--orange);border-radius:14px;padding:10px 14px;margin:0 0 10px}
.gbcrack>span{font-size:1.8rem;line-height:1}
.gblesson{font-size:1.05rem}
.gtrow{display:flex;gap:2px;flex-wrap:nowrap}
.gtw{display:inline-block;width:9px;height:14px;border-radius:2px;border:1px solid var(--tw-ghost)}
.gtw.done{background:var(--tw-brick);border-color:var(--tw-brick-line)} .gtw.due{background:var(--tw-brick);border:2px solid var(--bad)}
.gtw.build{background:linear-gradient(to top,var(--tw-build) 50%,transparent 50%);border-color:var(--tw-build)} .gtw.next{border:2px solid var(--teal)}
.gtw.todo{border-style:dashed;opacity:.6}
.gbbrickh{display:inline-block;background:var(--tw-brick);color:#3A2600;border:2px solid var(--tw-brick-line);border-radius:10px;padding:6px 14px;box-shadow:inset 0 3px 0 rgba(255,255,255,.45),0 5px 0 var(--tw-brick-line)}
.gbprog{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;margin:8px 0}
.gbprog .bar{grid-column:1/-1;margin:0;order:3}

/* Sentence animator (anim.js): word tiles that slide, change and fade; a timeline; "Your turn" tiles */
.gban{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 14px 10px;margin:0 0 12px}
.anst{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;min-height:64px;padding:8px 0;cursor:pointer}
.at{display:inline-block;padding:7px 12px;border-radius:10px;background:var(--surface);border:2px solid var(--line);color:var(--ink);font-weight:700;font-size:1.05rem;line-height:1.2;
  transition:transform .6s cubic-bezier(.3,1.25,.5,1),background .3s,border-color .3s}
.at-s{border-color:#4F8FD8;background:color-mix(in srgb,#4F8FD8 16%,var(--surface))}
.at-o{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 16%,var(--surface))}
.at-v{border-color:var(--teal)} .at-by{border-color:#9C67C8;color:#9C67C8} .at-time{font-style:italic;font-weight:600;color:var(--muted)}
.at-new{border-color:var(--gold);background:var(--gold-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 30%,transparent)}
.at-bad{border-color:var(--bad);background:var(--bad-bg);text-decoration:line-through}
.at-out{opacity:0;transition:opacity .45s;pointer-events:none}
.ancap{text-align:center;font-size:1.02rem;margin:6px 0 4px;min-height:2.6em}
.antl:empty{display:none} .antlsvg{display:block;width:100%;max-width:420px;height:auto;margin:2px auto 0}
.an-axis{stroke:var(--muted);stroke-width:2} .an-arrow{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.an-now{stroke:var(--orange);stroke-width:2;stroke-dasharray:3 3} .an-bar{fill:var(--teal);opacity:.85} .an-dot{fill:var(--gold);stroke:var(--surface);stroke-width:2}
.an-lbl{font:600 10px var(--f-body);fill:var(--muted)}
.anctl{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.anb{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.3rem;line-height:1}
.andots{display:flex;gap:6px} .andot{width:10px;height:10px;border-radius:50%;border:none;background:var(--line);padding:0} .andot.on{background:var(--teal);transform:scale(1.25)}
.ankey{text-align:center;font-size:.85rem;color:var(--muted);margin:8px 0 0} .ankey .at{padding:2px 8px;font-size:.8rem}
.gbuildit{background:var(--card);border:2px dashed var(--teal);border-radius:14px;padding:12px 14px;margin:12px 0}
.gbuildit.bok{border-style:solid;border-color:var(--ok-line);background:var(--ok-bg)}
.bline{min-height:52px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;border-radius:10px;background:var(--surface);border:1.5px solid var(--line);margin-bottom:8px}
.bpool{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;min-height:40px}
.bt{cursor:pointer;font-size:1rem} .bt:disabled{cursor:default;opacity:.5}
.bmsg{margin:4px 0 8px;min-height:1.3em}
@media (prefers-reduced-motion:no-preference){
  .at-in{animation:atin .5s cubic-bezier(.3,1.4,.6,1)} @keyframes atin{from{opacity:0;transform:translateY(-18px) scale(.7)}}
  .at-morph{animation:atmorph .6s} @keyframes atmorph{0%{transform:rotateX(90deg)}60%{transform:rotateX(-12deg)}100%{transform:none}}
  .an-fade{animation:pop .35s ease-out} .an-bar{transform-box:fill-box;transform-origin:left;animation:anbar .8s ease-out} @keyframes anbar{from{transform:scaleX(0)}}
  .an-dot{transform-box:fill-box;transform-origin:center;animation:atin .5s} .bshake{animation:shake .35s} }
.gbuildit.bok .row,.gbuildit.bok .bpool{display:none}

/* Grammar scenes (scenes.js): cartoon stage with Zip and Nova; data-beat on .scn drives everything */
:root{--sc-wall:#F4E9D8;--sc-floor:#D2AE78;--sc-win:#BFE3F5;--sc-door:#9C6B3F;--sc-line:#B48A55}
@media (prefers-color-scheme: dark){ :root:not([data-mode=light]){--sc-wall:#2E3850;--sc-floor:#6A5236;--sc-win:#2B4A6B;--sc-door:#7A5232;--sc-line:#4A3A26}}
:root[data-mode=dark]{--sc-wall:#2E3850;--sc-floor:#6A5236;--sc-win:#2B4A6B;--sc-door:#7A5232;--sc-line:#4A3A26}
.scn{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 10px 8px;margin:0 0 12px}
.scnstage{border-radius:10px;overflow:hidden;cursor:pointer}
.scnsvg{display:block;width:100%;height:auto}
.sc-wall{fill:var(--sc-wall)} .sc-floor{fill:var(--sc-floor)} .sc-win{fill:var(--sc-win);stroke:var(--sc-line);stroke-width:3}
.sc-winx{stroke:var(--sc-line);stroke-width:2.5} .sc-tiles,.sc-bricks{stroke:#000;stroke-opacity:.12;stroke-width:1.5;fill:none} .sc-board{fill:var(--sc-line)} .sc-door{fill:var(--sc-door)} .sc-sign{font:800 11px var(--f-body);fill:var(--muted);letter-spacing:.08em}
.dirt{fill:#7A5A3A;opacity:.85;transition:opacity .6s} .spark{fill:#FFD54A;opacity:0;transition:opacity .5s}
.cl{transition:transform 1.6s cubic-bezier(.45,.05,.3,1)} .cA{transform:translateX(-40px)} .cB{transform:translateX(400px)}
.bowl,.bench,.hallface,.rewind{opacity:0;transition:opacity .6s}
.hallface{transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .7s .3s,transform .9s .3s cubic-bezier(.3,1.4,.5,1)}
.whee{font:900 18px var(--f-body);fill:var(--orange)} .rewind text{font:900 26px var(--f-body);fill:#fff;letter-spacing:.06em}
.mop{transform-box:fill-box;transform-origin:0 0;transition:opacity .3s}
.scn:is([data-beat="1"],[data-beat="2"],[data-beat="3"],[data-beat="5"]) .cA{transform:translateX(95px)}
.scn:is([data-beat="1"],[data-beat="2"],[data-beat="3"],[data-beat="5"]) .cB{transform:translateX(250px)}
.scn[data-beat="4"] .cA{transform:translateX(250px)} .scn[data-beat="4"] .cB{transform:translateX(316px)}
.scn[data-beat="1"] .dirt{opacity:0;transition:opacity 2.5s 1.4s} .scn:is([data-beat="2"],[data-beat="3"],[data-beat="4"],[data-beat="5"]) .dirt{opacity:0}
.scn:is([data-beat="2"],[data-beat="5"]) .spark{opacity:1}
.scn[data-beat="4"] :is(.bowl,.bench,.hallface){opacity:1} .scn[data-beat="4"] .hallface{transform:none} .scn[data-beat="4"] .mop{opacity:0}
.scn[data-beat="4"] .clbody{transform:translateY(5px)}
.scnsay{display:flex;gap:10px;align-items:flex-start;margin:10px 2px 6px}
.scnav{flex:0 0 46px;height:46px;border-radius:50%;background:var(--surface);border:2px solid var(--teal);display:grid;place-items:center;overflow:hidden}
.scnav .av{width:40px;height:40px}
.scn[data-who="zip"] .scnav{border-color:var(--orange)}
.scnbub{flex:1;margin:0;background:var(--surface);border:2px solid var(--teal);border-radius:4px 14px 14px 14px;padding:8px 12px;font-size:1rem;min-height:3.2em}
.scn[data-who="zip"] .scnbub{border-color:var(--orange)}
.scnsent{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:44px;align-items:center;margin:6px 0 2px}
.scnnote{text-align:center;margin:2px 0 6px;font-weight:700;color:var(--orange);min-height:1.2em}
@media (prefers-reduced-motion:no-preference){
  .scn:is([data-beat="1"],[data-beat="2"],[data-beat="5"]) .mop{animation:mopswing .55s ease-in-out infinite alternate}
  @keyframes mopswing{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
  .scn.walking .clbody{animation:walk .4s ease-in-out infinite alternate} @keyframes walk{to{transform:translateY(-2.5px)}}
  .leg{transform-box:fill-box;transform-origin:50% 0} .scn.walking .leg.l{animation:legs .4s ease-in-out infinite alternate} .scn.walking .leg.r{animation:legs .4s ease-in-out infinite alternate-reverse}
  @keyframes legs{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
  .scn.walking .mop{animation:none}
  .scn:is([data-beat="2"],[data-beat="5"]) .spark{animation:twinkle 1s ease-in-out infinite alternate} @keyframes twinkle{to{opacity:.3}}
  .harm{transform-box:fill-box} .harm.l{transform-origin:0 0} .harm.r{transform-origin:100% 0}
  .scn[data-beat="4"] .harm.l{animation:arml .5s ease-in-out infinite alternate} .scn[data-beat="4"] .harm.r{animation:armr .5s ease-in-out infinite alternate .25s}
  @keyframes arml{from{transform:rotate(-8deg)}to{transform:rotate(9deg)}} @keyframes armr{from{transform:rotate(8deg)}to{transform:rotate(-9deg)}}
  .scn[data-beat="4"] .pupil{animation:roll 1.2s ease-in-out infinite} @keyframes roll{25%{transform:translate(-5px,-3px)}75%{transform:translate(5px,2px)}}
  .scn[data-beat="4"] .whee{animation:bump .6s infinite}
  .scn[data-beat="4"] .steam{animation:steam 1.4s linear infinite} @keyframes steam{from{transform:translateY(2px);opacity:.9}to{transform:translateY(-6px);opacity:0}}
  .scn[data-beat="5"] .rewind{animation:rewind 1.1s ease-out}
  @keyframes rewind{0%,60%{opacity:1}100%{opacity:0}} }
.tw-b .tw-shell{pointer-events:all}
.gbscene{display:flex;gap:12px;align-items:center;margin:12px 0;padding:12px 14px;border-radius:14px;border:2px solid var(--orange);background:var(--peach);color:var(--ink);text-decoration:none}
.gbscene>span:last-child{display:flex;flex-direction:column;gap:2px}
.gbscav{display:flex;flex:0 0 auto} .gbscav .av{width:40px;height:40px} .gbscav .av+.av{margin-left:-8px}
.gblessons{margin:8px 0 12px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--card)}
.gblessons summary{cursor:pointer;font-weight:700} .gblessons ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:6px}
.gblessons a{color:var(--ink)}
.scn .scnbub.an-fade,.scn .scnsent.an-fade{animation:scfade .5s ease-out} @keyframes scfade{from{opacity:0;transform:translateY(6px)}}
.scn[data-beat="4"] .bowl{transition-delay:1.4s}

/* Grammar Quests (quests.js): quest cards, the hero, the hero maker, power buttons, cutscene stages (scenes.js CUTS) */
.qhero{display:block;width:44px;height:55px} .qhero.big{width:96px;height:120px}
.qherocard{display:flex;gap:14px;align-items:center;margin:12px 0;padding:12px 16px;border-radius:16px;background:linear-gradient(135deg,#2B1B5A,#2E6FB0);color:#fff}
.qherocard .note{color:#E6E9F5} .qherocard .btn.alt{background:#fff;color:#2B1B5A;border-color:#fff}
.qherocard.qmaker{justify-content:center;padding:18px} .qherocard.qmaker .qhero.big{width:120px;height:150px}
.qst{border-radius:16px;overflow:hidden;margin:12px 0;border:2px solid var(--line);background:var(--card)}
.qbanner{display:flex;gap:12px;align-items:center;padding:12px 16px;background:linear-gradient(135deg,var(--q1),var(--q2));color:#fff}
.qbanner h3{margin:0;color:#fff} .qbanner .eyebrow{color:#E6E9F5;margin:0}
.qicon{font-size:2rem;width:48px;height:48px;display:grid;place-items:center;background:rgba(255,255,255,.15);border-radius:10px}
.qbody{padding:10px 16px 12px}
.qst.locked{opacity:.65} .qst.locked .qbanner{filter:grayscale(.7)} .qst.cleared{border-color:var(--gold)}
.qlevels{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.qlevels li{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--surface);border:2px solid transparent}
.qlevels li.now{border-color:var(--teal)} .qlevels li.done{background:var(--gold-bg)}
.qnode{flex:0 0 32px;height:32px;border-radius:8px;display:grid;place-items:center;font-weight:800;background:var(--card);border:2px solid var(--line)}
.qlevels li.now .qnode{background:var(--teal);color:#fff;border-color:var(--teal)}
.qhome .qhomein{display:flex;gap:12px;align-items:center} .qhome h3{margin:0 0 4px}
.qhomeav{flex:0 0 64px;height:72px;border-radius:12px;background:linear-gradient(135deg,#2B1B5A,#2E6FB0);display:grid;place-items:center}
.qlink{border-color:var(--teal);background:var(--mint)} .qlink .gbscav{background:linear-gradient(135deg,#2B1B5A,#2E6FB0);border-radius:10px;padding:2px 6px}
.qpick{margin:14px 0} .qpick .row{margin-top:6px;gap:8px;flex-wrap:wrap}
.qsw{width:40px;height:40px;border-radius:8px;border:3px solid var(--line);cursor:pointer} .qsw.on{border-color:var(--ink);box-shadow:0 0 0 3px var(--teal)}
.qchip{padding:8px 14px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font-weight:700;cursor:pointer} .qchip.on{border-color:var(--teal);background:var(--mint)}
.qgearg{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-top:6px}
.qgearb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);text-align:center;font:inherit;cursor:pointer}
.qgearb>span:first-child{font-size:1.6rem} .qgearb.on{border-color:var(--gold);background:var(--gold-bg)} .qgearb:disabled{opacity:.55;cursor:default}
.qpw{display:flex;gap:4px;margin-left:auto} .gbcombo{margin-left:6px}
.qpwb{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:1.1rem;background:var(--card);border:2px solid var(--gold);padding:0}
button.qpwb:not(:disabled){cursor:pointer;animation:qpulse 1.4s ease-in-out infinite} .qpwb.used{opacity:.35;border-color:var(--line)} button.qpwb:disabled{opacity:.45}
@keyframes qpulse{50%{box-shadow:0 0 0 4px rgba(242,194,48,.35)}}
.opt.ko{opacity:.35;text-decoration:line-through}
.qwin{display:grid;place-items:center;padding:16px;margin:8px 0 12px;border-radius:16px;background:linear-gradient(135deg,var(--q1),var(--q2))}
.qtxt{font:900 14px var(--f-body);fill:#fff;letter-spacing:.04em}
.qme{transition:transform 1.6s cubic-bezier(.45,.05,.3,1);transform:translateX(160px)}
.scn[data-scene="q-time"][data-beat="5"] .qme,.scn[data-scene="q-robots"][data-beat="4"] .qme,.scn[data-scene="q-museum"][data-beat="4"] .qme{transform:none}
.scn[data-scene^="q-"] :is(.qagain,.qspark,.qhelp,.qmask){opacity:0;transition:opacity .5s}
.scn[data-scene="q-time"]:is([data-beat="1"],[data-beat="3"]) :is(.qagain,.qspark){opacity:1}
.scn[data-scene="q-robots"][data-beat="2"] .qhelp{opacity:1}
.qpizza,.qbots{transition:transform 1.4s cubic-bezier(.45,.05,.3,1)}
.scn[data-scene="q-robots"][data-beat="2"] .qpizza{transform:translate(-30px,40px) rotate(-12deg)} .scn[data-scene="q-robots"][data-beat="2"] .qbots{transform:translateX(-90px)}
.scn[data-scene="q-museum"][data-beat="2"] .qmask{opacity:1}
.qmask{transform:translate(200px,160px);transition:opacity .5s,transform 2.5s linear} .scn[data-scene="q-museum"][data-beat="2"] .qmask{transform:translate(110px,160px)}
@media (prefers-reduced-motion:no-preference){
  .qhand{animation:qspin 6s linear infinite} .scn[data-scene="q-time"]:is([data-beat="1"],[data-beat="3"]) .qhand{animation-duration:.5s}
  .qgear.g1{animation:qspin 4s linear infinite} .qgear.g2{animation:qspin 4s linear infinite reverse} @keyframes qspin{to{transform:rotate(360deg)}}
  .scn[data-scene="q-time"][data-beat="3"] .qgear{animation-duration:.4s}
  .qjaw{animation:qchomp .3s steps(2) infinite} @keyframes qchomp{50%{transform:translateY(3px)}}
  .qbeam{transform-origin:262px 120px;animation:qsweep 4s ease-in-out infinite alternate} @keyframes qsweep{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
  .qzzz{animation:qzz 1.6s ease-in-out infinite alternate} @keyframes qzz{to{opacity:.3;transform:translateY(-3px)}}
  .scn[data-scene="q-museum"][data-beat="2"] .qmask .leg{transform-box:fill-box;transform-origin:50% 0;animation:legs .3s ease-in-out infinite alternate}
  .scn[data-scene="q-museum"][data-beat="2"] .qmask .leg.r{animation-direction:alternate-reverse}
  .hr-flame{animation:qzz .2s infinite alternate} .hr-aura{animation:qzz 1.2s ease-in-out infinite alternate}
  .qwin.cheer .qhero{animation:qjump .6s ease-in-out 3} @keyframes qjump{50%{transform:translateY(-14px)}}
}

/* Listening speed dial (speed.js) */
.spd{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:8px 0 12px}
.spdl{font-weight:700;font-size:.9rem;color:var(--muted);margin-right:2px}
.spdb{padding:4px 8px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;min-height:36px}
.spdb.on{border-color:var(--teal);background:var(--teal);color:#fff}
.spdn{flex-basis:100%;margin:4px 0 0;padding:8px 12px;border-radius:12px;background:var(--gold-bg);border:2px solid var(--gold);font-weight:600}
.spdn .spdb{margin:0 2px}
.dodge .spd{justify-content:center;margin:6px 0}

/* Class reading test card on Home (student.js readTestCard): night-blue card with a day countdown and, per unit,
   three tappable progress rings (Reading Lab, Texts, Words); a full ring turns green and earns a star.
   Fixed colours: the card looks the same in light and dark mode. */
.rtcard{border-radius:18px;padding:16px;background:radial-gradient(120% 80% at 100% 0%,#2A3F6A 0%,#16212C 55%);border:1.5px solid #3B4F78;color:#E6EDF3;display:flex;flex-direction:column;gap:12px}
.rttop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.rteb{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9FC3FF}
.rtcard h3{font-size:1.25rem;color:#fff;margin:4px 0}
.rtcard p{margin:0;color:#B9C6D6;font-size:.9rem}
.rtdays{flex:0 0 auto;text-align:center;background:#E0743F;color:#fff;border-radius:14px;padding:8px 12px;box-shadow:0 0 0 4px rgba(224,116,63,.25);animation:rtpulse 2.4s ease-in-out infinite}
.rtdays b{display:block;font:800 1.9rem/1 var(--f-head)}
.rtdays small{font-size:.62rem;font-weight:800;letter-spacing:.1em}
@keyframes rtpulse{50%{box-shadow:0 0 0 8px rgba(224,116,63,.08)}}
.rtunits{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.rtunit{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:10px 6px;text-align:center}
.rtunit>b{display:block;font-size:1rem}
.rtname{display:block;color:#9AA8B5;font-size:.78rem;margin-bottom:8px}
.rtrings{display:flex;justify-content:space-around;gap:2px}
.rtring{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:#9AA8B5;font-size:.68rem;line-height:1.25;border-radius:12px;padding:4px 0;-webkit-tap-highlight-color:transparent}
.rtdial{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#2BA59E 0 var(--p),#33445A var(--p) 100%);transition:transform .15s}
.rtdial span{width:34px;height:34px;border-radius:50%;background:#1B2838;display:grid;place-items:center;font-size:1.05rem}
.rtring.full .rtdial{background:#6FD39C}
.rtring.full .rtlbl{color:#6FD39C}
.rtring:active .rtdial,.rtring:hover .rtdial{transform:scale(1.1)}
.rtring:focus-visible{outline:2px solid #9FC3FF}
.rtstars{margin-top:6px;font-size:1.1rem;letter-spacing:3px;color:#F0B83C}
.rtstars .off{color:#3A4A5E}
.rtgo{display:block;text-align:center;background:#F0B83C;color:#1A1205;border-radius:12px;padding:11px;font-weight:800;text-decoration:none;font-size:1.05rem}
.rtgo small{display:block;font-weight:600;font-size:.8rem;opacity:.8}
.rtgo.done{background:#163326;color:#6FD39C}
@media (prefers-reduced-motion: reduce){.rtdays{animation:none}}
/* Word Crossword: letter tiles on a night-sky stage with drifting letters; the active word glows, solved words flash gold
   and lock in, and the finished grid ripples through the rainbow. Fixed colours: the stage is night in both themes. */
.xstage{position:relative;overflow:hidden;border-radius:18px;padding:12px;background:radial-gradient(120% 90% at 20% 0%,#3B2F8F,#1A1446 55%,#0D0B26);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.18);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.xsky{position:absolute;inset:0;pointer-events:none}
.xsky i{position:absolute;left:calc(var(--i) * 10% + 2%);top:105%;font:800 1.6rem var(--f-head);font-style:normal;color:rgba(255,255,255,.07);
  animation:xdrift calc(14s + var(--i) * 1.3s) linear infinite;animation-delay:calc(var(--i) * -2.1s)}
@keyframes xdrift{to{transform:translateY(-130vh) rotate(25deg)}}
.xgrid{position:relative;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:3px;margin:0 auto;
  width:min(100%,calc(var(--cols) * 46px));aspect-ratio:var(--cols)/var(--rows)}
.xe{display:block}
.xc{position:relative;display:grid;place-items:center;padding:0;border:0;border-radius:5px;background:#F7F4EA;color:#16324F;
  box-shadow:0 2px 0 #B9B2A0;font:800 clamp(.8rem,4.2vw,1.35rem)/1 var(--f-body);transition:background .15s,box-shadow .15s}
.xc .xn{position:absolute;left:2px;top:1px;font:700 clamp(.42rem,2vw,.62rem)/1 var(--f-body);color:#5B6B7A}
.xc .xl{text-transform:uppercase}
.xc.on{background:#CFEFFF;box-shadow:0 2px 0 #7FB7D6}
.xc.cur{background:#FFC857;box-shadow:0 2px 0 #C98A0B,0 0 0 2px #FFF4CC,0 0 14px rgba(255,200,87,.9);z-index:1}
.xc.ok{background:linear-gradient(160deg,#8EF0B4,#2EAD5B);color:#0E3B22;box-shadow:0 2px 0 #1E7A4C}
.xc.ok.on{background:linear-gradient(160deg,#B6F7CF,#43C273)}
.xc.given .xl{color:#7B4FC4}
.xc.pop .xl{animation:xpop .22s ease-out}
@keyframes xpop{0%{scale:.4;opacity:0}70%{scale:1.25}100%{scale:1}}
.xc.win{animation:xwin .7s ease-out both;animation-delay:var(--d)}
@keyframes xwin{0%{scale:1}30%{scale:1.28;background:#FFE36E;box-shadow:0 0 0 3px #fff,0 0 24px 6px rgba(255,214,74,.95)}100%{scale:1}}
.xc.shake{animation:xshake .5s}
@keyframes xshake{0%,70%{background:#FFB3A7;box-shadow:0 2px 0 #B3402A}20%{translate:-4px}40%{translate:4px}60%{translate:-3px}80%{translate:2px}}
.xc.reveal{animation:xreveal .6s ease-out}
@keyframes xreveal{0%{transform:rotateY(90deg);background:#D9C8FF}100%{transform:rotateY(0)}}
.xc.wave{animation:xwave 1.4s ease-in-out both;animation-delay:var(--d)}
@keyframes xwave{0%,100%{translate:0}20%{translate:0 -8px;background:#FF8A65}40%{background:#FFD54A}60%{translate:0 0;background:#81C784}80%{background:#4FC3F7}}
.xspark{width:9px;height:9px;box-shadow:0 0 8px currentColor}
.xclue{display:flex;align-items:center;gap:8px;padding:8px;border-radius:14px;background:var(--navy);color:var(--on-dark);min-height:60px}
.game.cross{gap:10px}
.xclue.swap .xct{animation:xswap .3s ease-out}
@keyframes xswap{from{opacity:0;transform:translateX(14px)}}
.xct{flex:1;font-size:1.02rem;line-height:1.35}
.xct b{color:#FFD54A;white-space:nowrap}
.xex{display:block;margin-top:4px;font-family:var(--f-text);font-style:italic;color:#CFE6FF}
.xnav{flex:none;width:38px;height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1}
.xhelp{gap:8px;flex-wrap:nowrap} .xhelp .btn{flex:1;padding:8px 10px;white-space:nowrap} .xhelp .note{color:inherit;opacity:.75}
.xkeys{display:flex;flex-direction:column;gap:6px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.xkr{display:flex;justify-content:center;gap:5px}
.xk{flex:1;max-width:44px;height:42px;padding:0;border:0;border-radius:8px;background:var(--card);color:var(--ink);font-weight:800;font-size:1.05rem;
  box-shadow:0 3px 0 var(--line);transition:transform .06s,box-shadow .06s}
.xk.wide{max-width:66px;flex:1.5;background:var(--peach)}
.xk:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line);background:#FFC857;color:#16324F}
.xlist summary{cursor:pointer;font-weight:700;color:var(--teal)}
.xcols{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
@media (min-width:640px){ .xcols{grid-template-columns:1fr 1fr} }
.xcols ol{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.xcols li{padding:6px 8px;border-radius:8px;cursor:pointer;font-size:.93rem}
.xcols li.now{background:var(--mint)} .xcols li.done{opacity:.55;text-decoration:line-through}
.xln{display:inline-block;min-width:1.6em;font-weight:800;color:var(--orange)}
@media (prefers-reduced-motion: reduce){ .xsky i,.xc.win,.xc.wave,.xc.pop .xl,.xc.shake,.xc.reveal,.xclue.swap .xct{animation:none} }
.game.cross .ghud{scroll-margin-top:72px}
/* Escape Arcade (js/arcade.js): the Phaser game fills the screen above the app */
.arcade{position:fixed;inset:0;z-index:1000;background:#140a0e;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.arcade-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;touch-action:none}
.arcade-load{color:#d9c7a6;font-weight:700}
.arcade-quit{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);left:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.2rem;cursor:pointer}
body.arcade-on{overflow:hidden}

/* Unit test practice papers (Stage 8): part tabs, timer, word bank gap fill, typed gaps, review plan. */
.paper{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.paper>h2{margin-top:2px}
.phead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.phead .eyebrow{margin:0}
.pclock{font-weight:700;font-size:.9rem;color:var(--teal);background:var(--mint);border-radius:999px;padding:4px 12px;white-space:nowrap}
.pclock.over{color:var(--orange);background:var(--peach)}
.ptabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs button{flex:0 0 auto;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:.88rem;display:flex;gap:6px;align-items:center}
.ptabs button[aria-selected=true]{background:var(--navy);color:var(--on-dark);border-color:var(--navy)}
.ptabs small{font-size:.75rem;opacity:.75}
.ptabs small.full{color:var(--ok);opacity:1;font-weight:700}
.ptabs button[aria-selected=true] small.full{color:var(--on-dark)}
.pbank{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--gold-bg);border-radius:12px;padding:10px 12px}
@media (min-width:700px){.pbank{position:sticky;top:60px;z-index:2}}
.pbank>b{width:100%;font-size:.85rem;color:var(--gold)}
.pword{border:1.5px solid var(--gold);border-radius:8px;padding:2px 8px;font-size:.92rem;background:var(--surface)}
.pword.used{opacity:.45;text-decoration:line-through}
.ptext{font-family:var(--f-text);font-size:1.05rem;line-height:2.1}
.pvq{white-space:nowrap}
.pvq b{font-family:var(--f-body);font-size:.8rem;color:var(--muted);margin-right:2px}
.pvsel,.pgap{font:inherit;font-family:var(--f-body);font-size:.95rem;color:var(--ink);background:var(--surface);border:0;border-bottom:2px solid var(--teal);border-radius:6px 6px 0 0;padding:2px 6px;max-width:100%}
.pvsel{width:auto;min-width:7.5em;margin:0}
.paper .pvq{white-space:normal}
.pgap{width:9.5em;margin:0}
.pgap:focus,.pvsel:focus{outline:3px solid var(--focus);outline-offset:1px}
.pgram{margin:0;padding-left:2.2em;display:grid;gap:18px;font-family:var(--f-text);font-size:1.05rem;line-height:2}
.pnav{justify-content:space-between}
.linkpart{border:1.5px solid var(--line);text-align:left;color:var(--ink)}
.pplan{margin:0;padding-left:1.3em;display:grid;gap:8px}
.pplan li>*{vertical-align:middle}
.pplan li{padding-left:2px}
.pplan li>span:first-child{margin-right:8px}
.pplan li.done>span:first-child{color:var(--muted);text-decoration:line-through}
details.prev{background:var(--card);border-radius:12px;padding:10px 14px}
details.prev summary{font-weight:700;color:var(--teal);cursor:pointer}
details.prev .tbl{margin-top:8px}
.pwrong{color:var(--bad);text-decoration:line-through;text-decoration-color:var(--bad-line)}
/* Fair XP (guard.js): the slow-down pause after too many too-fast answers, and the guessing flag on the teacher page */
.slowdown{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,8,12,.72)}
.slowdown .panel{max-width:400px;width:100%;text-align:center;background:var(--surface);border:2px solid var(--gold)}
.slowdown .sdcount{font-size:2.4rem;font-weight:800;color:var(--gold);margin:0}
.fb.guardnote p{margin:4px 0 0}
.guessflag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:.78rem;font-weight:700;background:var(--gold-bg);color:var(--ink);border:1.5px solid var(--gold);white-space:nowrap}

/* Fix the copy: tap-to-choose pills inside a text */
.pills .para.later{opacity:.6}
.pill{display:inline-flex;align-items:center;gap:4px;margin:1px 2px;padding:1px 10px;border-radius:999px;border:1.5px solid var(--teal);background:var(--mint);color:var(--ink);font:inherit;font-weight:700;line-height:1.5;cursor:pointer;vertical-align:baseline}
.pill.empty{color:var(--teal);font-weight:600;font-style:italic;border-style:dashed}
.pill.open{outline:3px solid var(--gold);outline-offset:1px}
.pill.bad{border-color:var(--bad-line);background:var(--bad-bg);color:var(--bad);text-decoration:line-through}
.pill.ok{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok);cursor:default}
.pill.shown{border-color:var(--orange);background:var(--peach);color:var(--ink);cursor:default}
.pill.off{border:1.5px dashed var(--line);background:transparent;color:var(--muted);cursor:default;font-weight:400}
.pill .pcaret{font-size:.7em;opacity:.7}
.pillpick{position:sticky;bottom:76px;z-index:5;background:var(--surface);border:2px solid var(--gold);border-radius:12px;padding:10px 12px;margin:6px 0 10px 34px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.pillpick p{margin:0 0 6px}
.pillpick .btn.tried{text-decoration:line-through;opacity:.6}
.pills .text .fb,.pillclues{margin:0 0 12px 34px} .pillclues{border:1px dashed var(--teal);border-radius:10px;padding:8px 12px;background:var(--card)}
.pillclues p{margin:4px 0}
.rlist{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.rrow{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
/* Grammar Lab Unit 4: compound forge, camera switch, funny wrong-answer scenes, sentence upgrader */
.glforge{margin:6px 0 12px;padding:12px;border-radius:12px;background:var(--card);border:1px solid var(--line);text-align:center}
.glf-in{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:10px;transition:gap .4s}
.glf-tile{padding:8px 14px;border-radius:8px;background:var(--teal);color:#fff;font-weight:700;font-size:1.05rem}
.glf-plus{font-weight:700;color:var(--muted)}
.glforge.forged .glf-in{gap:0} .glforge.forged .glf-plus{opacity:0;width:0;overflow:hidden}
.glforge.forged .glf-tile{animation:glfhit .35s ease}
.glf-out{margin:4px 0 0;font-size:1.15rem} .glf-made{display:inline-block;padding:6px 12px;border-radius:8px;background:var(--gold);color:#222;font-weight:800;animation:glfpop .4s ease}
@keyframes glfhit{50%{transform:scale(.85) rotate(-4deg)}} @keyframes glfpop{0%{transform:scale(.3)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.glcam{margin:6px 0 12px} .glcam .note{margin:0 0 6px}
.glc-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.glc-btn{flex:1 1 140px;min-height:44px;padding:8px 10px;border-radius:10px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.glc-btn.on{border-color:var(--teal);background:var(--teal);color:#fff;font-weight:700}
.glcam .chip{font-size:.75rem;margin-left:4px}
.gllit{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;margin:8px 0;padding:8px 10px;border-radius:10px;background:var(--card);border:1px dashed var(--bad-line)}
.gll-pic{font-size:1.7rem;line-height:1.25;white-space:pre;max-width:100%;overflow:hidden} .gllit p{margin:0}
.glup .glup-now{font-family:var(--f-text);font-size:1.1rem;padding:10px 14px;border-left:4px solid var(--gold);background:var(--bg);border-radius:8px;margin:4px 0 8px}
.glup-dots{display:flex;gap:6px;margin-bottom:8px} .glup-dots i{width:22px;height:6px;border-radius:3px;background:var(--line)} .glup-dots i.on{background:var(--gold)}

/* Writing Lab: for and against essays (js/wlab.js) */
.wlhow{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
.wlhow span{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:.88rem}
.wlhow b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--teal);color:var(--on-dark);font-size:.78rem}
.wlhow.small span{font-size:.8rem} .wlhow span.on{border-color:var(--teal);background:var(--mint)} .wlhow span.ok b{background:var(--ok)}
.wltopics{display:grid;gap:10px}
.wltopic .row{gap:8px}
.wlrows{display:flex;flex-direction:column;gap:8px}
.wlrow{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:8px}
.wlrow p{margin:0} .wlrow.ok{border-color:var(--ok-line);background:var(--ok-bg)} .wlrow.shown{border-color:var(--orange);background:var(--peach)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font:inherit;font-size:.9rem;font-weight:600;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;min-height:36px}
.seg button.on{border-color:var(--teal);background:var(--teal);color:var(--on-dark)}
.seg button.bad{border-color:var(--bad-line);background:var(--bad-bg);color:var(--bad);text-decoration:line-through}
.seg button:disabled{cursor:default} .wlrow.ok .seg button:not(.on),.wlrow.shown .seg button:not(.on){opacity:.45}
.seg.big button{font-size:1rem;padding:10px 18px}
.wlclue{margin:0;font-size:.92rem;color:var(--ink)} .wlclue.shown{color:var(--muted)}
.wlquote{margin:0;padding:10px 14px;border-left:4px solid var(--teal);background:var(--card);border-radius:0 10px 10px 0;font-style:italic}
.wlsent{font:inherit;text-align:left;display:inline;padding:1px 3px;margin:0 -1px;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-decoration:underline dotted var(--teal);text-underline-offset:4px}
.wlsent.sel{background:var(--mint);outline:2px solid var(--teal)} .wlsent.wrong{background:var(--bad-bg);outline:2px solid var(--bad-line)}
.wlsent.right{background:var(--ok-bg);outline:2px solid var(--ok-line);text-decoration:none} .wlsent:disabled{cursor:default}
.wlpicks{display:flex;flex-direction:column;gap:8px}
.wlpick{font:inherit;text-align:left;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.wlpick.on{border-color:var(--teal);background:var(--mint);font-weight:600} .wlpick.on::before{content:"✓ ";color:var(--teal)} .wlpick:disabled{opacity:.5;cursor:default}
.wlnotes{border:1px dashed var(--teal);border-radius:10px;padding:8px 12px;background:var(--card)} .wlnotes p{margin:4px 0} .wlnotes ul{margin:4px 0;padding-left:20px}
.wlcheck summary{cursor:pointer;font-weight:700} .wlcheck ul{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}
.wlcheck li.ok{color:var(--ok)} .wlcheck li.miss{color:var(--bad)} .wlcheck li .note{color:var(--muted)}
.wlstarts{display:flex;flex-wrap:wrap;gap:6px} .wlstarts .chip{border:0;cursor:pointer;font-size:.85rem;padding:5px 10px}
.wlsofar{font-size:.95rem} .wlsofar p{margin:0 0 8px} .wlprev .chip{margin-right:4px}
.wlmodelp{background:var(--surface);border-radius:8px;padding:8px 10px;font-style:italic}
.wlexam{position:sticky;top:0;z-index:4;display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:8px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-weight:700}
.wlexam .late{color:var(--orange)} .wlexam .ok{color:var(--ok)} .wlexam .over{color:var(--orange)}
textarea.wlbig{min-height:360px;line-height:1.55}
.wlplan summary{cursor:pointer;font-weight:700;color:var(--teal)}
.wlself{gap:10px} .wlself label{display:flex;gap:10px;align-items:flex-start;font-weight:400} .wlself input{width:20px;height:20px;flex:0 0 20px;margin-top:2px}
.wlmarks{display:grid;gap:6px;margin:4px 0 8px}
.wlmarks div{display:grid;grid-template-columns:7.5em 1fr auto;gap:8px;align-items:center}
.wlbar{height:10px;border-radius:5px;background:var(--line);overflow:hidden} .wlbar i{display:block;height:100%;background:var(--teal)}
.wlfix{margin:0;padding-left:20px}
.wlessay{margin-top:8px;padding:10px;border-radius:10px;background:var(--surface);border:1px solid var(--line)} .wlessay p{margin:4px 0}
.wltext{white-space:normal;line-height:1.5}