/* Gabarito and Nunito, served from meralearn.com itself (TR4), never Google.
   Latin only: the site is in English. Licences: /fonts/OFL-Gabarito.txt and
   /fonts/OFL-Nunito.txt. */
@font-face{font-family:Gabarito; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/gabarito-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:Gabarito; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/gabarito-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:Gabarito; font-style:normal; font-weight:800; font-display:swap; src:url(/fonts/gabarito-latin-800-normal.woff2) format('woff2');}
@font-face{font-family:Gabarito; font-style:normal; font-weight:900; font-display:swap; src:url(/fonts/gabarito-latin-900-normal.woff2) format('woff2');}
@font-face{font-family:Nunito; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/nunito-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:Nunito; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/nunito-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:Nunito; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/nunito-latin-700-normal.woff2) format('woff2');}

/* MeraLearn site stylesheet. One tactile system for every page: flat brand
   colour, hard offset shadows, Gabarito display type, glossy tiles, two emblems
   (the Tile for Terminology, the Mask for Role Player) and a slow puzzle sky. */
:root{
  --paper:#f3faf8; --card:#ffffff; --ink:#1b1a2e; --ink-2:#514d6c; --muted:#625e7a;
  --line:#dbe8e4; --line-strong:#c5d8d2; --dot:#cfe0db;
  --teal:#13b5a4; --teal-deep:#0b8a7d; --teal-soft:#d6f3ef; --on-teal:#063a34; --link:#077367; --mera:#0b8a7d; --ring:#6a4bf0; --grape-btn:#6a4bf0; --grape-on:#fff; --grape-shadow:#4a30c4;
  --sun:#ffc531; --sun-deep:#d69a0f; --sun-soft:#fff1c2; --on-sun:#3a2a00;
  --coral:#ff6a55; --coral-deep:#d14a38; --on-coral:#3a0d05;
  --grape:#7a5cff; --sky:#2f9bff; --orange:#f5622a;
  --sheen:rgba(255,255,255,.3); --gloss:rgba(255,255,255,.4);
  --foot:#1b1a2e; --foot-ink:#eeeafc;
  --display:"Gabarito","Nunito",system-ui,sans-serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:22px; --r-sm:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121122; --card:#1b1a2f; --ink:#f2f0fb; --ink-2:#b7b2d1; --muted:#a29dbf;
    --line:#2b2944; --line-strong:#3b385c; --dot:#2a2843;
    --teal:#22cdb9; --teal-deep:#119c8d; --teal-soft:#163f3c; --link:#22cdb9; --mera:#22cdb9; --ring:#957dff; --grape-btn:#957dff; --grape-on:#121122; --grape-shadow:#5b3fd6;
    --sun:#ffd04a; --sun-deep:#c9960e; --sun-soft:#3d3416;
    --coral:#ff8068; --coral-deep:#cc5340;
    --grape:#957dff; --sky:#63b3ff; --orange:#ff7a46;
    --sheen:rgba(255,255,255,.14); --gloss:rgba(255,255,255,.07);
    --foot:#0c0b19; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121122; --card:#1b1a2f; --ink:#f2f0fb; --ink-2:#b7b2d1; --muted:#a29dbf;
  --line:#2b2944; --line-strong:#3b385c; --dot:#2a2843;
  --teal:#22cdb9; --teal-deep:#119c8d; --teal-soft:#163f3c; --link:#22cdb9; --mera:#22cdb9; --ring:#957dff; --grape-btn:#957dff; --grape-on:#121122; --grape-shadow:#5b3fd6;
  --sun:#ffd04a; --sun-deep:#c9960e; --sun-soft:#3d3416;
  --coral:#ff8068; --coral-deep:#cc5340;
  --grape:#957dff; --sky:#63b3ff; --orange:#ff7a46;
  --sheen:rgba(255,255,255,.14); --gloss:rgba(255,255,255,.07);
  --foot:#0c0b19; color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:90px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--paper)}
#bg{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  background:radial-gradient(50vw 50vw at 22% 28%, rgba(19,181,164,.09), transparent 70%), radial-gradient(45vw 45vw at 82% 72%, rgba(255,197,49,.10), transparent 70%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #bg{background:radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.5) 100%), radial-gradient(50vw 50vw at 22% 28%, rgba(34,205,185,.12), transparent 70%), radial-gradient(45vw 45vw at 82% 72%, rgba(255,197,49,.09), transparent 70%)}}
:root[data-theme="dark"] #bg{background:radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.5) 100%), radial-gradient(50vw 50vw at 22% 28%, rgba(34,205,185,.12), transparent 70%), radial-gradient(45vw 45vw at 82% 72%, rgba(255,197,49,.09), transparent 70%)}
.offscreen, .offscreen *, .offscreen *::before, .offscreen *::after{animation-play-state:paused !important}
main,.ticker,.foot{position:relative; z-index:1}
h1,h2,h3,h4{margin:0; font-family:var(--display); line-height:1.02; letter-spacing:-.025em; text-wrap:balance}
h1{font-size:clamp(2.6rem,5.8vw,4.5rem); font-weight:900}
h2{font-size:clamp(2rem,4.2vw,3.1rem); font-weight:900}
h3{font-size:1.3rem; font-weight:800; letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit}
.wrap{
  max-width:1120px; margin:0 auto;
  padding-left:max(16px, min(4vw,32px), env(safe-area-inset-left,0px));
  padding-right:max(16px, min(4vw,32px), env(safe-area-inset-right,0px));
}
section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.sec-head{max-width:42rem; display:grid; gap:1rem; margin-bottom:clamp(2rem,5vw,3.2rem)}
.sec-head p{font-size:1.15rem; color:var(--ink-2); max-width:60ch}
.band{background:color-mix(in srgb,var(--card) 86%,transparent); border-block:2px solid var(--line)}
:focus-visible{outline:3px solid var(--ring); outline-offset:3px}

/* Scroll reveals: html.armed is set by script, so without it the page sits finished. */
html.armed .rv{opacity:0; transform:translateY(26px)}
html.armed .rv.in{opacity:1; transform:none; transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0ms)}

/* Glossy surfaces: a sheen that follows the pointer, plus a fixed top gloss. */
.glass{position:relative; --mx:50%; --my:50%}
.glass::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:radial-gradient(260px circle at var(--mx) var(--my), var(--sheen), transparent 65%); opacity:0; transition:opacity .35s}
.glass:hover::before{opacity:1}
.glass::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(172deg, var(--gloss) 0%, transparent 45%)}
[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); transition:transform .2s ease-out, box-shadow .2s ease-out}
[data-tilt]:active{--lift:3px}

/* ── Buttons: the pressed edge ───────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:50px; padding:.8rem 1.5rem; border:0; border-radius:16px; cursor:pointer;
  font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:-.01em; text-decoration:none;
  background:var(--teal); color:var(--on-teal); box-shadow:0 5px 0 var(--teal-deep), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(5px); box-shadow:0 0 0 var(--teal-deep)}
.btn.sun{background:var(--sun); color:var(--on-sun); box-shadow:0 5px 0 var(--sun-deep), inset 0 1px 0 rgba(255,255,255,.45)}
.btn.sun:active{box-shadow:0 0 0 var(--sun-deep)}
.btn.ghost{background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 2px var(--line-strong), 0 5px 0 var(--line-strong)}
.btn.ghost:active{box-shadow:inset 0 0 0 2px var(--line-strong), 0 0 0 var(--line-strong)}
.btn.sm{min-height:42px; padding:.5rem 1.05rem; font-size:.95rem; border-radius:13px; box-shadow:0 4px 0 var(--teal-deep)}
.btn.sm.sun{box-shadow:0 4px 0 var(--sun-deep)}
.btn.sm.ghost{box-shadow:inset 0 0 0 2px var(--line-strong), 0 4px 0 var(--line-strong)}
.btn.sm:active{transform:translateY(4px)}
.btn.big{min-height:58px; padding:1rem 2rem; font-size:1.2rem}
.btn:disabled{opacity:.6; cursor:default; filter:none}

/* ── Nav ─────────────────────────────────────────────────────────── */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb,var(--paper) 86%,transparent); backdrop-filter:blur(12px); border-bottom:2px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:1.2rem; height:72px}
.progress{position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--teal); transition:width .1s linear}
.logo{display:flex; align-items:center; gap:.6rem; text-decoration:none; font-family:var(--display); font-weight:900; font-size:1.45rem; letter-spacing:-.03em}
.logo svg{width:34px; height:34px}
.logo em{font-style:normal; color:var(--mera)}
.links{display:flex; gap:.2rem; margin-left:auto}
.links a{text-decoration:none; font-family:var(--display); font-weight:700; color:var(--ink-2); padding:.55rem .85rem; border-radius:12px; display:inline-flex; align-items:center; min-height:44px}
.links a:hover{color:var(--ink); background:var(--teal-soft)}
.nav-cta{display:flex; gap:.6rem; align-items:center}
.links .m-only{display:none}
.burger{display:none; margin-left:auto; width:44px; height:44px; border:0; background:none; cursor:pointer; place-items:center; border-radius:12px}
@media (max-width:920px){
  .burger{display:grid}
  .links{display:none; position:absolute; top:72px; left:0; right:0; flex-direction:column; gap:.1rem; padding:.6rem max(16px, env(safe-area-inset-left,0px)) 1rem; background:var(--paper); border-bottom:2px solid var(--line)}
  .nav.open .links{display:flex}
  .links .m-only{display:inline-flex; border-top:2px solid var(--line); border-radius:0; margin-top:.3rem; padding-top:.9rem}
  .nav-cta .ghost{display:none}
}

/* ── Emblems: the Tile (Terminology) and the Mask (Role Player) ───── */
.char{overflow:visible; transform:rotate(var(--tilt,0deg)); transition:transform .3s ease-out}
.char .body{transform-box:fill-box; transform-origin:50% 100%; animation:breathe 3.6s ease-in-out infinite}
.sunny .body{animation:sway 6s ease-in-out infinite}
.sunny .torso{transform-box:fill-box; transform-origin:50% 100%; animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.015,.98)}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.tilo .bar,.tilo .bar-glow{transform:translateX(calc(var(--ex,0px)*3.4)); transition:transform .16s ease-out}
.tilo .bar-glow{animation:glow 3.2s ease-in-out infinite}
@keyframes glow{50%{opacity:.45}}
.sunny .pupil{transform:translate(calc(var(--ex,0px)*.7),calc(var(--ey,0px)*.45)); transition:transform .14s ease-out}
.m-happy,.m-oops{display:none}
.char:hover .m-smile,.char.happy .m-smile,.char.oops .m-smile{display:none}
.char:hover .m-happy,.char.happy .m-happy{display:block}
.char.oops .m-happy{display:none}
.char.oops .m-oops{display:block}
.tilo.happy .body{animation:hop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes hop{35%{transform:translateY(-9px) scale(.98,1.03)}70%{transform:translateY(0) scale(1.03,.97)}}
.tilo.oops .body{animation:wobble .45s ease}
@keyframes wobble{25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}
.sunny.happy .body{animation:bow .7s ease-in-out}
@keyframes bow{35%{transform:rotate(6deg) translateY(4px)}70%{transform:rotate(-1.5deg)}}
.beam{opacity:0}
.sunny:hover .beam,.sunny.happy .beam{animation:beam 1s ease-out}
@keyframes beam{0%{opacity:0; transform:translateX(-30px) skewX(-14deg)}30%{opacity:1}100%{opacity:0; transform:translateX(120px) skewX(-14deg)}}
.sunny .spot{animation:spot 4.2s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 50%}
@keyframes spot{50%{transform:scale(1.06); opacity:.3}}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(2rem,4vw,3.4rem) clamp(3rem,6vw,5rem); overflow-x:clip}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4rem); align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero-copy{display:grid; gap:1.4rem; max-width:34rem}
.hero-copy .lede{font-size:clamp(1.1rem,1.8vw,1.3rem); color:var(--ink-2); max-width:36rem}
.cta-row{display:flex; gap:.8rem; flex-wrap:wrap}
.facts{display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; list-style:none; margin:0; padding:0; color:var(--ink-2); font-weight:600; font-size:.95rem}
.facts li{display:inline-flex; align-items:center; gap:.45rem}
.facts svg{width:18px; height:18px; flex:none}
.join{display:inline-flex; align-items:stretch; gap:.3rem; padding:.3rem; background:var(--card); border:2px solid var(--line-strong); border-radius:18px; box-shadow:0 5px 0 var(--line-strong); transition:border-color .2s, box-shadow .2s}
.join:has(.pin-in:focus){border-color:var(--teal); box-shadow:0 5px 0 var(--teal-deep)}
.pin-in{width:11ch; min-width:0; border:0; background:transparent; color:var(--ink); font-family:var(--display); font-weight:800; font-size:1.25rem; letter-spacing:.14em; text-transform:uppercase; padding:0 .9rem}
.pin-in::placeholder{color:var(--muted); font-size:.95rem; letter-spacing:.08em; font-weight:700}
.pin-in:focus{outline:none}
.pin-in:focus-visible{outline:3px solid var(--ring); outline-offset:-3px; border-radius:12px}
.join .btn{min-height:46px; border-radius:13px; padding-inline:1.25rem}
.join .btn:focus-visible{outline-color:var(--on-sun); outline-offset:-6px}

/* ── The playable round ──────────────────────────────────────────── */
.board-wrap{position:relative; padding-top:6.1rem}
.board{
  position:relative; z-index:1; background:var(--card); border:2px solid var(--line-strong); border-radius:var(--r);
  box-shadow:0 7px 0 var(--line-strong); padding:1rem; display:grid; grid-template-rows:auto auto auto auto; gap:.9rem; overflow:hidden;
}
.board-top{display:grid; grid-template-columns:1fr auto; align-items:center; gap:.7rem .8rem}
.board-top h3{font-size:1.05rem; grid-column:1; grid-row:1}
.board-top .timer{grid-column:2; grid-row:1}
.board-top .deck{grid-column:1/-1; justify-self:start}
.board-top,.answers,.board-foot{position:relative; z-index:3}
.board[data-game="role"] .timer{visibility:hidden}
.deck{display:inline-flex; flex-wrap:wrap; gap:.5rem; padding:.35rem; background:var(--paper); border-radius:999px; border:2px solid var(--line)}
.deck button{border:0; background:none; cursor:pointer; padding:.3rem .75rem; border-radius:999px; font-family:var(--display); font-weight:700; font-size:.88rem; color:var(--ink-2); min-height:32px}
.deck button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.deck button:disabled{cursor:default}
.deck button:focus-visible{outline-offset:2px}
.timer{position:relative; width:52px; height:52px; display:grid; place-items:center; flex:none}
.timer svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.timer circle{fill:none; stroke-width:5}
.timer .track{stroke:var(--line)}
.timer .ring{stroke:var(--teal); stroke-linecap:round; transition:stroke .3s}
.timer b{font-family:var(--display); font-weight:900; font-size:1.15rem; font-variant-numeric:tabular-nums}
.late .timer .ring{stroke:var(--coral)}
.late .timer b{color:var(--ink); animation:pulse .5s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.18)}}
.stage{
  position:relative; height:200px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--paper) radial-gradient(var(--dot) 1.2px, transparent 1.3px) 0 0/18px 18px; overflow:hidden;
}
.term{
  --dir:1; position:relative; z-index:2; padding:.9rem 1.7rem; background:var(--card); border:2px solid var(--line-strong);
  border-radius:18px; box-shadow:0 5px 0 var(--line-strong), inset 0 1px 0 var(--gloss); font-family:var(--display); font-weight:800;
  font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.02em; max-width:92%; text-align:center; text-wrap:balance;
}
.term.in{animation:termIn .32s cubic-bezier(.2,1.4,.4,1) both}
.term.out{animation:termOut .26s ease-in forwards}
.term.wrong{animation:shake .45s ease both; border-color:var(--coral); box-shadow:0 5px 0 var(--coral)}
@keyframes termIn{from{transform:translateY(30px) scale(.86) rotate(-3deg); opacity:0}}
@keyframes termOut{to{transform:translateX(calc(var(--dir)*150%)) rotate(calc(var(--dir)*14deg)); opacity:0}}
@keyframes shake{10%,50%,90%{transform:translateX(-8px)}30%,70%{transform:translateX(8px)}}
.burst{position:absolute; inset:0; pointer-events:none; z-index:3}
.burst i{position:absolute; left:50%; top:50%; width:10px; height:10px; border-radius:3px; background:var(--c); animation:fly .6s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes fly{to{transform:translate(var(--tx),var(--ty)) rotate(200deg) scale(.4); opacity:0}}
.answers{display:grid; gap:.7rem}
.answers.cats{grid-template-columns:1fr 1fr}
.answers.cats .btn{min-height:56px; font-size:1.05rem; padding-inline:1rem}
.answers.opts{grid-template-columns:1fr}
.answers.opts .btn{min-height:44px; justify-content:flex-start; text-align:left; padding:.55rem 1rem; font-family:var(--body); font-weight:700; font-size:.95rem; line-height:1.3}
.answers.gates{grid-template-columns:repeat(3,1fr)}
.answers.gates .btn{min-height:52px; font-size:.95rem; padding-inline:.4rem}
.answers .btn.hint,.answers .btn.good{outline:4px solid var(--teal); outline-offset:3px}
.answers .btn.bad{outline:4px solid var(--coral); outline-offset:3px}
.term.clue{font-family:var(--body); font-weight:600; font-size:1.05rem; line-height:1.4; max-width:86%}
.term.scene{font-family:var(--body); font-weight:600; font-size:.98rem; line-height:1.45; max-width:90%}
.verdict{position:absolute; left:50%; bottom:.6rem; transform:translateX(-50%); z-index:4; margin:0; padding:.35rem .85rem; border-radius:14px; background:var(--ink); color:var(--paper); font-weight:700; font-size:.82rem; line-height:1.3; text-align:center; width:max-content; max-width:92%; animation:termIn .3s cubic-bezier(.2,1.4,.4,1) both}
.verdict[hidden]{display:none}
.rocket{position:absolute; top:8px; left:50%; width:46px; height:46px; z-index:3; transform:translate(-50%,0); transition:transform .6s cubic-bezier(.5,0,.3,1)}
.rocket svg{width:100%; height:100%; transform:rotate(135deg)}
.rocket.shake{animation:shake .45s ease}
.rocket[hidden]{display:none}
.board-foot{display:flex; justify-content:space-between; align-items:center; color:var(--ink-2); font-weight:600; font-size:.95rem}
.board-foot b{font-family:var(--display); font-weight:900; color:var(--ink); font-size:1.15rem; display:inline-block; font-variant-numeric:tabular-nums}
.stat.bump b{animation:bump .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{50%{transform:scale(1.45); color:var(--link)}}
.overlay{
  position:absolute; inset:-.45rem -1rem -1rem; grid-column:1; grid-row:2/-1; z-index:5; display:grid; place-items:center; align-content:center; gap:.9rem; text-align:center;
  padding:1.4rem; background:color-mix(in srgb,var(--card) 90%,transparent); backdrop-filter:blur(3px); border-radius:0 0 20px 20px;
}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.overlay p{color:var(--ink-2); max-width:30ch}
.overlay[hidden]{display:none}
.result{display:grid; gap:.9rem; justify-items:center}
.result .big-num{font-family:var(--display); font-weight:900; font-size:clamp(2.6rem,6vw,3.8rem); line-height:1; letter-spacing:-.04em}
.result .big-num small{font-size:.4em; color:var(--muted); font-weight:800; letter-spacing:0}
.result dl{display:flex; gap:1.6rem; margin:0; font-size:.95rem; color:var(--ink-2)}
.result dt{display:inline}
.result dd{display:inline; margin:0; font-family:var(--display); font-weight:900; color:var(--ink)}
.result .btn-row{display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center}
.hero-char{position:absolute; top:0; left:1rem; width:108px; height:auto; z-index:0}

/* ── Real screens: the hero phone and its dock ───────────────────── */
@property --p{syntax:'<percentage>'; inherits:false; initial-value:0%}
.show{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem 1.1rem; align-items:center}
.show-cap{grid-column:1/-1; margin:0; display:grid; gap:.2rem; max-width:34rem; min-height:4rem}
.show-tags{display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:.5rem 0 0; padding:0}
.show-tags li{font-family:var(--display); font-weight:700; font-size:.78rem; color:var(--ink-2); padding:.25rem .6rem; border-radius:999px; border:2px solid var(--line-strong); background:var(--card)}
.show-cap b{font-family:var(--display); font-weight:800; font-size:1.1rem}
.show-cap span{color:var(--ink-2); font-weight:600; font-size:.95rem; line-height:1.4}
.dock{display:grid; gap:.35rem; padding:.45rem; background:var(--card); border:2px solid var(--line-strong); border-radius:22px; box-shadow:0 5px 0 var(--line-strong); z-index:2}
.dock button{position:relative; display:grid; place-items:center; width:48px; height:48px; padding:0; border:0; border-radius:14px; background:transparent; cursor:pointer; transition:background .2s}
.dock .ico{position:relative; width:40px; height:40px; border-radius:12px; background:var(--c); display:grid; place-items:center; transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.dock .ico svg{width:22px; height:22px}
.dock button>span:last-child{position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); white-space:nowrap; background:var(--ink); color:var(--paper); font-family:var(--display); font-weight:700; font-size:.8rem; line-height:1; padding:.4rem .6rem; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .15s; z-index:6}
.dock button:hover>span:last-child,.dock button:focus-visible>span:last-child{opacity:1}
.dock button:focus-visible{outline-offset:1px}
.dock button:hover{background:var(--paper)}
.dock button:hover .ico{transform:scale(1.1) rotate(-6deg)}
.dock button[aria-pressed="true"] .ico{transform:scale(1.06)}
.dock button[aria-pressed="true"] .ico::after{content:""; position:absolute; inset:-6px; border-radius:16px; padding:3px; background:conic-gradient(var(--teal) var(--p), transparent 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; animation:dockProg 4s linear forwards}
@keyframes dockProg{from{--p:0%}to{--p:100%}}
.show.manual .dock .ico::after{display:none}
.hp-wrap{position:relative; padding-top:3.9rem; z-index:1; justify-self:start}
.hp-wrap .hero-char{top:.1rem; left:auto; right:-8px; width:92px}
.hp{position:relative; z-index:1; width:min(248px,78vw); aspect-ratio:390/844; border-radius:38px; padding:8px; background:#15131f; box-shadow:0 34px 56px -26px rgba(0,0,0,.55), 0 10px 0 -4px #0d0b14, inset 0 0 0 1.5px #343147}
.hp-screen{position:relative; width:100%; height:100%; border-radius:31px; overflow:hidden; background:#0d0b14; isolation:isolate}
.hp-shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:translateY(10px) scale(1.02); transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1)}
.hp-shot[data-on]{opacity:1; transform:none; z-index:1}
.real-tag{position:absolute; bottom:-8px; left:-14px; z-index:3; white-space:nowrap; background:var(--sun); color:var(--on-sun); font-family:var(--display); font-weight:800; font-size:.78rem; padding:.3rem .7rem; border-radius:999px; box-shadow:0 3px 0 var(--sun-deep); transform:rotate(-5deg)}
@media (max-width:960px){
  .show{grid-template-columns:minmax(0,1fr); justify-items:center}
  .hp-wrap{order:1; justify-self:center} .dock{order:2; grid-auto-flow:column; border-radius:999px} .show-cap{order:3; text-align:center; justify-items:center}
  .dock{grid-template-columns:repeat(7,minmax(0,1fr)); width:100%; max-width:26rem} .dock button{border-radius:50%; width:100%; min-width:0; max-width:52px; justify-self:center} .dock .ico{border-radius:50%; max-width:100%} .dock button[aria-pressed="true"] .ico::after{border-radius:50%}
  .dock button>span:last-child{left:50%; top:auto; bottom:calc(100% + 10px); transform:translateX(-50%)}
}
@media (max-width:420px){.dock{gap:.1rem; padding:.3rem} .dock button{height:44px} .dock .ico{width:min(36px,100%); height:36px} .dock .ico svg{width:20px; height:20px}}

/* ── The taster: the moves, stripped bare ────────────────────────── */
.taster{margin-top:1.6rem; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.2rem,3vw,2.6rem); align-items:center; padding:clamp(1.2rem,3vw,2rem); border-radius:28px; border:2px dashed var(--line-strong); background:color-mix(in srgb,var(--card) 55%,transparent)}
.taster-copy{display:grid; gap:.8rem; max-width:42ch}
.taster-copy p{color:var(--ink-2)}
.taster .board-wrap{width:100%; max-width:30rem; justify-self:center}
@media (max-width:900px){.taster{grid-template-columns:1fr}}

/* ── Term ticker ─────────────────────────────────────────────────── */
.ticker{padding-block:0; border-block:2px solid var(--line); background:color-mix(in srgb,var(--card) 86%,transparent); overflow:hidden}
.ticker .row{display:flex; gap:.6rem; width:max-content; padding-block:.55rem; animation:slide 48s linear infinite}
.ticker .row.rev{animation-direction:reverse}
.ticker:hover .row{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.chip{display:inline-flex; align-items:center; padding:.35rem .9rem; border-radius:999px; border:2px solid var(--line); background:var(--paper); font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--ink-2); white-space:nowrap}
.chip.hi{background:var(--teal-soft); border-color:transparent; color:var(--ink)}
.ticker-label{display:flex; justify-content:center; padding:.9rem 1rem .2rem; color:var(--muted); font-weight:600; font-size:.9rem}

/* ── Three moves ─────────────────────────────────────────────────── */
.moves{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; list-style:none; margin:0; padding:0}
@media (max-width:900px){.moves{grid-template-columns:1fr}}
.move{display:grid; gap:.8rem; align-content:start; min-width:0}
.move-num{width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:var(--ink); color:var(--paper); font-family:var(--display); font-weight:900; font-size:1.25rem; box-shadow:0 4px 0 var(--teal)}
.move p{color:var(--ink-2)}
.mock{margin-top:.4rem; background:var(--card); border:2px solid var(--line-strong); border-radius:var(--r-sm); box-shadow:0 5px 0 var(--line-strong); padding:1rem; display:grid; gap:.6rem; min-height:150px; overflow:hidden}
.topic{grid-template-columns:auto 1fr; align-items:center; gap:.9rem}
.topic .ic{width:46px; height:46px; border-radius:12px; background:var(--teal-soft); display:grid; place-items:center}
.topic b{font-family:var(--display); font-weight:800; font-size:1.1rem; display:block}
.topic small{color:var(--muted); font-weight:600}
.topic .terms{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:.4rem}
.topic .terms span{font-size:.82rem; padding:.2rem .6rem; border-radius:999px; background:var(--paper); border:2px solid var(--line); font-weight:700; color:var(--ink-2)}
.pin small{color:var(--muted); font-weight:700; letter-spacing:.04em}
.pin .code{font-family:var(--display); font-weight:900; font-size:clamp(2.2rem,4vw,2.8rem); letter-spacing:.12em; line-height:1; color:var(--ink)}
.joined{display:flex; align-items:center; gap:.6rem; margin-top:.2rem}
.avs{display:flex}
.av{width:28px; height:28px; border-radius:50%; border:3px solid var(--card); margin-left:-9px; background:var(--c); display:grid; place-items:center; transition:transform .35s cubic-bezier(.2,1.6,.4,1) calc(var(--i)*70ms)}
.av:first-child{margin-left:0}
.joined b{font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums}
.live-dot{width:9px; height:9px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 var(--teal); animation:ping 1.6s infinite}
@keyframes ping{to{box-shadow:0 0 0 9px transparent}}
.report{gap:.75rem}
.rrow{display:grid; grid-template-columns:1fr auto; gap:.2rem .6rem; align-items:center}
.rrow b{font-family:var(--display); font-weight:800}
.rrow .bar{grid-column:1/-1; height:10px; border-radius:999px; background:var(--paper); border:2px solid var(--line); overflow:hidden}
.rrow .bar i{display:block; height:100%; width:var(--w); background:var(--teal); border-radius:999px; transition:width 1s cubic-bezier(.2,.8,.3,1) calc(var(--i)*150ms)}
.rrow.flag .bar i{background:var(--coral)}
.tag{font-size:.78rem; font-weight:800; font-family:var(--display); padding:.15rem .55rem; border-radius:999px; background:var(--teal-soft); color:var(--ink)}
.tag.warn{background:var(--coral); color:var(--on-coral)}
.rrow small{color:var(--muted); font-weight:600}

/* ── Three moves: a working rehearsal ────────────────────────────── */
.lesson{background:var(--card); border:2px solid var(--line-strong); border-radius:var(--r); box-shadow:0 7px 0 var(--line-strong); padding:clamp(1rem,2.5vw,1.6rem); display:grid; gap:1.2rem; overflow:hidden}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{width:100%; display:flex; gap:.7rem; align-items:center; padding:.65rem .8rem; border-radius:14px; border:2px solid var(--line); background:transparent; text-align:left; color:inherit; cursor:default; transition:border-color .2s, background .2s}
.step .num{width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:11px; background:var(--line); color:var(--ink-2); font-family:var(--display); font-weight:900}
.step div{min-width:0}
.step b{font-family:var(--display); font-weight:800; display:block; line-height:1.15}
.step small{color:var(--muted); font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.step.on{border-color:var(--teal); background:color-mix(in srgb,var(--teal) 10%,transparent)}
.step.on .num{background:var(--ink); color:var(--paper); box-shadow:0 3px 0 var(--teal)}
.step.done{cursor:pointer}
.step.done:hover{border-color:var(--line-strong)}
.step.done .num{background:var(--teal); color:var(--on-teal)}
.step.done .num i{display:none}
.step.done .num::after{content:"✓"}
.step.done small{color:var(--ink)}
.lpane{display:grid; gap:1rem; animation:paneIn .45s cubic-bezier(.2,.8,.2,1) both}
.lpane[hidden]{display:none}
.topics{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem}
@media (max-width:900px){.topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.topics{grid-template-columns:minmax(0,1fr)}}
.topic-card{display:grid; gap:.35rem; align-content:start; text-align:left; padding:.9rem; border-radius:16px; border:2px solid var(--line-strong); background:var(--paper); box-shadow:0 4px 0 var(--line-strong); cursor:pointer; color:inherit; transition:transform .15s, box-shadow .15s, border-color .15s}
.topic-card:hover{transform:translateY(-3px); box-shadow:0 7px 0 var(--line-strong)}
.topic-card:active{transform:translateY(2px); box-shadow:0 2px 0 var(--line-strong)}
.topic-card[aria-pressed="true"]{border-color:var(--teal); box-shadow:0 4px 0 var(--teal-deep)}
.tsub{width:max-content; font-family:var(--display); font-weight:800; font-size:.68rem; letter-spacing:.02em; padding:.15rem .5rem; border-radius:999px; background:color-mix(in srgb,var(--c) 20%,var(--card)); color:var(--ink); box-shadow:inset 0 0 0 2px var(--c)}
.topic-card b{font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:-.01em}
.topic-card small{color:var(--muted); font-weight:600; line-height:1.35; overflow-wrap:anywhere}
.topic-card{min-width:0}
.lnote{color:var(--ink-2); font-weight:600; font-size:.95rem; max-width:52ch}
.gpick{display:flex; flex-wrap:wrap; gap:.6rem}
.gchip{display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .9rem .45rem .5rem; border-radius:999px; border:2px solid var(--line-strong); background:var(--paper); box-shadow:0 3px 0 var(--line-strong); font-family:var(--display); font-weight:800; font-size:.95rem; cursor:pointer; color:inherit; transition:transform .12s, box-shadow .12s, background .15s}
.gchip i{width:26px; height:26px; border-radius:8px; background:var(--c); flex:none}
.gchip small{color:var(--ink-2); font-weight:700; font-family:var(--body); font-size:.78rem}
.gchip[aria-pressed="true"]{border-color:var(--teal); background:var(--teal-soft); box-shadow:0 3px 0 var(--teal-deep)}
.gchip[aria-pressed="true"] small{color:var(--ink)}
.gchip[aria-pressed="true"]::after{content:"✓"; font-weight:900; color:var(--link)}
.gchip:active{transform:translateY(2px); box-shadow:0 1px 0 var(--line-strong)}
.lrow{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}
.ready-card{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:1.2rem; padding:1.1rem 1.2rem; border-radius:18px; background:var(--paper); border:2px solid var(--line-strong)}
@media (max-width:700px){.ready-card{grid-template-columns:minmax(0,1fr)}}
.rc-left,.rc-right{display:grid; gap:.55rem; align-content:start; min-width:0}
.ready-card small{color:var(--muted); font-weight:700; letter-spacing:.04em}
.rc-left > b{font-family:var(--display); font-weight:900; font-size:1.55rem; letter-spacing:-.02em; line-height:1.05}
.rc-games{display:flex; flex-wrap:wrap; gap:.4rem}
.rc-games span{font-size:.82rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; background:var(--card); border:2px solid var(--line)}
.rc-class{display:flex; gap:.5rem; align-items:center; color:var(--ink-2); font-weight:600; font-size:.92rem; flex-wrap:wrap}
.rc-class em{font-style:normal; color:var(--link); font-weight:800}
.rc-right .code{font-family:var(--display); font-weight:900; font-size:clamp(2rem,4vw,2.6rem); letter-spacing:.14em; line-height:1}
.rc-right .av{animation:avin .4s cubic-bezier(.2,1.6,.4,1) both; animation-delay:calc(var(--i)*90ms)}
@keyframes avin{from{transform:scale(0)}}
.linkish{background:none; border:0; color:var(--muted); font-weight:700; cursor:pointer; text-decoration:underline; justify-self:start; padding:0}
.controls{margin-top:clamp(2rem,5vw,3rem); display:grid; gap:1.1rem}
.controls h3{font-size:1.35rem}
.ctrl{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
@media (max-width:900px){.ctrl{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ctrl{grid-template-columns:1fr}}
.ctrl li{display:grid; gap:.5rem; align-content:start; padding:1rem; border-radius:16px; border:2px solid var(--line); background:color-mix(in srgb,var(--card) 70%,transparent)}
.ctrl .ck{width:36px; height:36px; border-radius:11px; background:var(--c); display:grid; place-items:center; box-shadow:0 3px 0 rgba(0,0,0,.18)}
.ctrl b{font-family:var(--display); font-weight:800; font-size:1.05rem}
.ctrl p{color:var(--ink-2); font-size:.95rem}

/* ── Students ────────────────────────────────────────────────────── */
.checks{list-style:none; margin:0; padding:0; display:grid; gap:1rem}
.checks li{display:grid; grid-template-columns:34px 1fr; gap:.9rem; align-items:start}
.checks .ck{width:34px; height:34px; border-radius:11px; background:var(--teal); display:grid; place-items:center; box-shadow:0 3px 0 var(--teal-deep); margin-top:.1rem}
.checks b{font-family:var(--display); font-weight:800; font-size:1.08rem; display:block; letter-spacing:-.01em}
.checks p{color:var(--ink-2)}
.stu-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
@media (max-width:900px){.stu-grid{grid-template-columns:1fr}}
.stu-copy{display:grid; gap:1.3rem}
.stu-copy .lede{font-size:1.15rem; color:var(--ink-2)}
.stu-visual{display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:center}
@media (max-width:560px){.stu-visual{grid-template-columns:1fr; justify-items:center}}
.phone{width:min(236px,100%); border-radius:30px; background:var(--ink); padding:.6rem; box-shadow:0 8px 0 var(--line-strong)}
.phone-in{background:var(--paper); border-radius:24px; padding:1rem .9rem; display:grid; gap:.8rem; min-height:380px; align-content:start}
.ph-top{display:grid; gap:.2rem}
.ph-live{display:inline-flex; align-items:center; gap:.4rem; width:max-content; background:var(--teal-soft); color:var(--ink); font-family:var(--display); font-weight:800; font-size:.72rem; padding:.2rem .6rem; border-radius:999px}
.ph-top b{font-family:var(--display); font-weight:800; font-size:1.05rem}
.ph-top small{color:var(--muted); font-weight:600; font-size:.78rem}
.ph-stage{display:grid; place-items:center; min-height:120px; border-radius:14px; background:radial-gradient(var(--dot) 1.2px, transparent 1.3px) 0 0/16px 16px}
.ph-term{font-family:var(--display); font-weight:800; font-size:1.4rem; background:var(--card); border:2px solid var(--line-strong); box-shadow:0 4px 0 var(--line-strong); border-radius:14px; padding:.6rem 1rem}
.ph-cats{display:grid; gap:.5rem}
.ph-cats .btn{min-height:40px; font-size:.9rem; pointer-events:none}
.ph-bar{display:flex; justify-content:space-between; font-weight:700; color:var(--ink-2); font-size:.88rem; padding-top:.2rem}
.ph-bar b{font-family:var(--display); font-weight:900; color:var(--ink)}
.ph-bar svg{width:14px; height:14px; vertical-align:-2px; margin-right:.2rem}
.board-card{background:var(--card); border:2px solid var(--line-strong); border-radius:var(--r); box-shadow:0 6px 0 var(--line-strong); padding:1rem; display:grid; gap:.7rem; min-width:0; width:100%}
.bc-head{display:flex; justify-content:space-between; align-items:center; gap:.6rem; font-family:var(--display); font-weight:800}
.lb{list-style:none; margin:0; padding:0; display:grid; gap:.5rem; counter-reset:lb}
.lb li{display:grid; grid-template-columns:1.1rem auto 1fr auto; gap:.6rem; align-items:center; padding:.5rem .65rem; border-radius:12px; background:var(--paper); border:2px solid var(--line)}
.lb li::before{counter-increment:lb; content:counter(lb); font-family:var(--display); font-weight:900; font-size:.8rem; color:var(--muted)}
.lb i{width:28px; height:28px; border-radius:50%; background:var(--c); display:grid; place-items:center; font:800 .6rem var(--display); font-style:normal; color:#07060f}
.lb span{font-weight:700; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lb b{font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums}
.lb b::after{content:" pts"; font-weight:700; font-size:.8em; color:var(--muted)}
.lb .you{border-color:var(--grape); background:color-mix(in srgb,var(--grape) 10%,transparent)}

/* ── Flip the room ───────────────────────────────────────────────── */
.flip-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
@media (max-width:900px){.flip-grid{grid-template-columns:1fr}}
.flip-copy{display:grid; gap:1.2rem}
.flip-copy p{color:var(--ink-2); font-size:1.1rem}
.seg{display:inline-flex; padding:.3rem; gap:.3rem; border-radius:16px; background:var(--paper); border:2px solid var(--line-strong); width:max-content}
.seg button{border:0; background:none; cursor:pointer; padding:.6rem 1.2rem; border-radius:12px; font-family:var(--display); font-weight:800; font-size:1rem; color:var(--ink-2); min-height:44px; transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.room{
  display:grid; grid-template-columns:repeat(8,1fr); gap:.7rem; padding:1.2rem; border-radius:var(--r); overflow:hidden;
  background:var(--card) radial-gradient(var(--dot) 1.2px, transparent 1.3px) 0 0/18px 18px; border:2px solid var(--line-strong); box-shadow:0 7px 0 var(--line-strong);
}
.seat{position:relative; aspect-ratio:1; border-radius:50%; background:var(--line); color:var(--ink); display:grid; place-items:center; transition:background .4s calc(var(--i)*30ms), transform .4s cubic-bezier(.2,1.5,.4,1) calc(var(--i)*30ms)}
.seat svg{width:62%; height:62%}
.seat .face{opacity:.35; transition:opacity .4s}
.seat .tick{position:absolute; right:-4px; bottom:-4px; width:40%; height:40%; border-radius:50%; background:var(--sun); display:grid; place-items:center; transform:scale(0); transition:transform .35s cubic-bezier(.2,1.6,.4,1) calc(var(--i)*35ms + .1s)}
.seat .zz{position:absolute; top:-10px; right:-6px; font-family:var(--display); font-weight:900; font-size:.8rem; color:var(--muted); opacity:0; transition:opacity .3s}
.room[data-mode="lecture"] .seat.awake{background:var(--teal); color:var(--on-teal)}
.room[data-mode="lecture"] .seat.awake .face{opacity:1}
.room[data-mode="lecture"] .seat.sleepy .zz{opacity:1; animation:drift 2.4s ease-in-out infinite}
@keyframes drift{50%{transform:translateY(-5px)}}
.room[data-mode="game"] .seat{background:var(--teal); color:var(--on-teal); transform:scale(1.04)}
.room[data-mode="game"] .seat .face{opacity:1}
.room[data-mode="game"] .seat .tick{transform:scale(1)}
.room-cap{margin-top:1rem; font-weight:600; color:var(--ink-2)}
.room-cap b{font-family:var(--display); font-weight:900; font-size:1.3rem; color:var(--ink); font-variant-numeric:tabular-nums}

/* ── Two kinds of game ───────────────────────────────────────────── */
.kind{display:grid; gap:1.4rem; padding:clamp(1.2rem,3vw,2rem); border-radius:28px; border:2px solid var(--line); background:color-mix(in srgb,var(--card) 70%,transparent)}
.kind + .kind{margin-top:1.6rem}
.kind-head{display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:end}
@media (max-width:600px){.kind-head{grid-template-columns:1fr}}
.kind-head .char{width:116px; height:auto}
.kind-head .copy{display:grid; gap:.5rem; max-width:52ch}
.kind-head p{color:var(--ink-2)}
.kind-tag{display:inline-flex; align-items:center; gap:.4rem; width:max-content; font-family:var(--display); font-weight:800; font-size:.9rem; padding:.3rem .8rem; border-radius:999px}
.kind-tag.teal{background:var(--teal); color:var(--on-teal); box-shadow:0 3px 0 var(--teal-deep)}
.kind-tag.sun{background:var(--sun); color:var(--on-sun); box-shadow:0 3px 0 var(--sun-deep)}
.shelf{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; list-style:none; margin:0; padding:0}
@media (max-width:860px){.shelf{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.shelf{grid-template-columns:1fr; gap:.7rem}}
.game{display:grid; min-width:0}
.game .tile{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; gap:.2rem .9rem; align-items:center; text-decoration:none; color:inherit; padding:.8rem; border-radius:18px; background:var(--card); border:2px solid var(--line-strong); box-shadow:0 5px 0 var(--line-strong); height:100%; overflow:hidden}
.game .tile:hover{box-shadow:0 9px 0 var(--line-strong)}
.game .art{position:relative; width:64px; height:64px; border-radius:16px; background:var(--c); display:grid; place-items:center; overflow:hidden; grid-row:1/4; grid-column:1}
.game .art svg{width:52%; height:52%; transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.game .tile:hover .art svg{transform:scale(1.15) rotate(-8deg)}
.game .art::after{content:""; position:absolute; right:-30%; bottom:-45%; width:80%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.18)}
.game .art::before{content:""; position:absolute; top:-30%; bottom:-30%; left:-50%; width:35%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); opacity:0; z-index:1}
.game .tile:hover .art::before{animation:glint .8s ease-out}
@keyframes glint{0%{left:-50%; opacity:1}100%{left:130%; opacity:1}}
.game b{font-family:var(--display); font-weight:800; font-size:1.08rem; display:block; letter-spacing:-.01em; align-self:end; grid-column:2; grid-row:2; min-width:0}
.game small{color:var(--muted); font-weight:600; display:block; align-self:start; line-height:1.35; grid-column:2; grid-row:3}
.status{grid-column:2; grid-row:1; align-self:end; justify-self:start; white-space:nowrap; margin-bottom:.15rem; z-index:3; font-family:var(--display); font-weight:800; font-size:.7rem; letter-spacing:.03em; padding:.15rem .5rem; border-radius:999px}
.status.live{background:var(--teal); color:var(--on-teal)}
.status.dev{background:var(--sun); color:var(--on-sun)}
.status.soon{background:transparent; color:var(--muted); box-shadow:inset 0 0 0 2px var(--line-strong)}
.game.soon .tile{border-style:dashed; box-shadow:none; background:transparent}
.game.soon .art{opacity:.75}
.workshop{color:var(--ink-2); font-weight:600; font-size:.95rem}
.workshop b{color:var(--ink)}

/* ── Teacher dashboard tour ──────────────────────────────────────── */
.tour{display:grid; grid-template-columns:.8fr 1.25fr; gap:clamp(1.5rem,4vw,3rem); align-items:start}
@media (max-width:960px){.tour{grid-template-columns:1fr}}
.tour-tabs{display:grid; gap:.6rem; position:sticky; top:96px}
@media (max-width:960px){.tour-tabs{position:static; grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tour-tabs{grid-template-columns:1fr}}
.tab{position:relative; overflow:hidden; text-align:left; display:grid; gap:.25rem; padding:1rem 1.1rem; border-radius:16px; border:2px solid var(--line); background:transparent; cursor:pointer; transition:border-color .2s, background .2s}
.tab b{font-family:var(--display); font-weight:800; font-size:1.05rem}
.tab span{color:var(--ink-2); font-size:.95rem}
.tab:hover{border-color:var(--line-strong)}
.tab[aria-pressed="true"]{border-color:var(--teal); background:color-mix(in srgb,var(--teal) 10%,transparent)}
.tab .prog{position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--teal)}
.tab[aria-pressed="true"] .prog{animation:prog 6.5s linear forwards}
.tour.paused .prog,.tour.offscreen .prog{animation-play-state:paused}
.tour.manual .prog{display:none}
@keyframes prog{to{width:100%}}
/* The app frame is a device screen: deliberately dark in both themes. */
.app{--a-bg:#15142a; --a-panel:#1f1e38; --a-line:#2f2d4d; --a-ink:#f2f0fb; --a-mute:#a39ec2;
  display:block; background:var(--a-bg); color:var(--a-ink); border-radius:22px; border:2px solid var(--a-line);
  box-shadow:0 8px 0 #0c0b19; overflow:hidden; min-height:660px; font-size:.86rem; --sheen:rgba(255,255,255,.12); --gloss:rgba(255,255,255,.06)}
@media (max-width:640px){.app{grid-template-columns:1fr} .app .app-side{display:none}}
.app-side{background:#111026; padding:.9rem .7rem; display:grid; gap:.3rem; align-content:start; border-right:2px solid var(--a-line)}
.alogo{display:flex; align-items:center; gap:.4rem; font-family:var(--display); font-weight:900; margin-bottom:.6rem; padding:.2rem .3rem; color:#fff}
.alogo i{width:20px; height:20px; border-radius:6px; background:#13b5a4}
.alogo em{font-style:normal; font-size:.58rem; background:#ffc531; color:#3a2a00; padding:.1rem .35rem; border-radius:999px; margin-left:auto}
.aitem{display:flex; align-items:center; gap:.5rem; padding:.42rem .5rem; border-radius:10px; color:var(--a-mute); font-weight:700; font-size:.82rem}
.aitem i{width:16px; height:16px; border-radius:50%; background:var(--c)}
.aitem.on{background:#15423d; color:#fff}
.app-main{padding:1rem 1.1rem 1.2rem; display:grid; gap:.8rem; align-content:start; min-width:0}
.date{display:inline-block; background:#ffc531; color:#3a2a00; font-family:var(--display); font-weight:800; font-size:.62rem; letter-spacing:.06em; padding:.15rem .5rem; border-radius:999px}
.app h4{font-size:1.35rem; margin-top:.3rem; color:#fff}
.app .sub{color:var(--a-mute)}
.pane{display:grid; gap:.7rem; animation:paneIn .5s cubic-bezier(.2,.8,.2,1) both}
.pane[hidden]{display:none}
@keyframes paneIn{from{opacity:0; transform:translateY(14px)}}
.banner{background:#ffc531; color:#3a2a00; border-radius:14px; padding:.9rem 1rem; display:grid; grid-template-columns:1fr auto; gap:.7rem; align-items:center; box-shadow:0 4px 0 #d69a0f}
.banner b{font-family:var(--display); font-weight:900; font-size:1.05rem; display:block}
.abtn{background:#1b1a2e; color:#fff; font-family:var(--display); font-weight:800; padding:.5rem .8rem; border-radius:10px; white-space:nowrap; font-size:.82rem}
.pick{display:grid; gap:.45rem}
.pick-row{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.pick-row small{color:var(--a-mute); font-weight:700; width:50px; flex:none}
.pk{padding:.22rem .6rem; border-radius:999px; border:2px solid var(--a-line); color:var(--a-mute); font-weight:700; font-size:.76rem}
.pk.on{border-color:#13b5a4; color:#fff; background:#15423d}
.ready{display:flex; align-items:center; justify-content:space-between; gap:.6rem; background:var(--a-panel); border-radius:12px; padding:.6rem .8rem; flex-wrap:wrap}
.ready b{font-family:var(--display); font-weight:900; letter-spacing:.1em; color:#ffc531}
.sess{display:grid; gap:.45rem}
.srow{display:grid; grid-template-columns:auto 1fr auto; gap:.6rem; align-items:center; background:var(--a-panel); border-radius:12px; padding:.55rem .7rem}
.srow i{width:30px; height:30px; border-radius:9px; background:var(--c); display:grid; place-items:center}
.srow b{display:block; font-family:var(--display); font-weight:800; color:#fff}
.srow small{color:var(--a-mute)}
.badge{font-family:var(--display); font-weight:800; font-size:.64rem; letter-spacing:.06em; padding:.2rem .5rem; border-radius:999px; background:#2a2946; color:#fff; display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap}
.badge::before{content:""; width:7px; height:7px; border-radius:50%; background:#13b5a4}
.badge.live::before{background:#ff6a55; animation:ping2 1.2s infinite}
.badge.wait::before{background:#ffc531}
@keyframes ping2{50%{opacity:.35}}
.two{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.panel{background:var(--a-panel); border-radius:14px; padding:.8rem; min-width:0}
.panel h5{margin:0 0 .5rem; font-family:var(--display); font-size:.95rem; color:#fff}
.stu{display:grid; grid-template-columns:auto 1fr auto; gap:.5rem; align-items:center; padding:.3rem 0}
.stu i{width:26px; height:26px; border-radius:50%; background:var(--c); display:grid; place-items:center; font:800 .6rem var(--display); color:#1b1a2e}
.stu b{display:block; font-family:var(--display); font-weight:800; font-size:.86rem; color:#fff; white-space:nowrap}
.stu small{color:var(--a-mute)}
.stu .pct{font-family:var(--display); font-weight:900; text-align:right; color:#fff}
.stu .pct i{display:block; width:48px; height:5px; border-radius:999px; background:#2f2d4d; margin-top:.25rem; overflow:hidden}
.stu .pct i::after{content:""; display:block; height:100%; width:var(--w); background:#13b5a4; border-radius:999px}
.stu.low .pct i::after{background:#ff6a55}
.reteach{display:grid; gap:.4rem}
.reteach div{display:flex; justify-content:space-between; gap:.5rem; align-items:center}
.reteach b{font-family:var(--display); font-weight:800; color:#fff; white-space:nowrap}
.reteach small{color:var(--a-mute)}
.search{display:flex; align-items:center; gap:.5rem; background:var(--a-panel); border:2px solid var(--a-line); border-radius:12px; padding:.55rem .8rem; color:var(--a-mute); font-weight:600}
.search kbd{margin-left:auto; font:700 .7rem var(--body); border:1px solid var(--a-line); border-radius:6px; padding:.1rem .35rem}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem}
@media (max-width:560px){.stats{grid-template-columns:1fr 1fr}}
.stat-tile{background:var(--a-panel); border-radius:14px; padding:.8rem; display:grid; gap:.15rem}
.stat-tile i{width:28px; height:28px; border-radius:9px; background:var(--c); margin-bottom:.3rem}
.stat-tile b{font-family:var(--display); font-weight:900; font-size:1.5rem; line-height:1; font-variant-numeric:tabular-nums; color:#fff}
.stat-tile small{color:var(--a-mute)}
.subjects{display:flex; gap:.4rem; flex-wrap:wrap}
.app-head{display:flex; justify-content:space-between; gap:.8rem; align-items:flex-start; flex-wrap:wrap}
.app-head h4{font-size:1.3rem; margin:0}
.chips{display:flex; gap:.35rem; flex-wrap:wrap; align-items:center}
.mchip{font-family:var(--display); font-weight:800; font-size:.6rem; letter-spacing:.06em; padding:.2rem .5rem; border-radius:999px; background:#2a2946; color:#fff; white-space:nowrap}
.mchip.hi{background:#ffc531; color:#3a2a00}
.abtn.teal{background:#13b5a4; color:#063a34}
.abtn.ghost{background:transparent; border:2px solid var(--a-line); color:#fff}
.jump{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.jump small{color:var(--a-mute); font-weight:700}
.pk em{font-style:normal; background:#1b1a2e; color:#fff; border-radius:999px; padding:0 .35rem; margin-left:.3rem; font-size:.66rem}
.map-wrap{background:var(--a-panel); border-radius:14px; padding:.3rem}
.map{width:100%; height:auto; display:block; max-height:330px}
.map .spoke{stroke-width:1; opacity:.5}
.map .dot{transform-box:fill-box; transform-origin:50% 50%; animation:dotin .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay:calc(var(--i)*10ms)}
@keyframes dotin{from{transform:scale(0); opacity:0}}
.map .node{font:800 8.5px var(--display); fill:#fff; text-anchor:middle}
.map .cnt{font:900 8px var(--display); fill:#1b1a2e; text-anchor:middle}
.cal-bar{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.cal-bar b{font-family:var(--display); font-weight:900; font-size:1rem; margin-right:auto; color:#fff}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; background:var(--a-line); border:2px solid var(--a-line); border-radius:12px; overflow:hidden}
.cal-h{background:#111026; color:var(--a-mute); font-family:var(--display); font-weight:800; font-size:.56rem; letter-spacing:.08em; text-align:center; padding:.35rem 0}
.cell{background:var(--a-bg); min-height:66px; padding:.3rem; display:grid; gap:.2rem; align-content:start; min-width:0}
.cell small{font-family:var(--display); font-weight:800; font-size:.62rem; color:var(--a-mute); width:1.2rem; height:1.2rem; display:grid; place-items:center; border-radius:999px}
.cell.today small{background:#13b5a4; color:#063a34}
.ev{font-size:.56rem; font-weight:700; color:#fff; background:var(--a-panel); border-left:3px solid var(--c,#13b5a4); border-radius:6px; padding:.15rem .3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ev.plan{border:1px dashed var(--a-line); border-left:3px dashed var(--c,#13b5a4); background:transparent; color:var(--a-mute)}
@media (max-width:560px){.cell{min-height:48px} .ev{font-size:.5rem}}
.tabsrow{display:flex; gap:1rem; border-bottom:2px solid var(--a-line); font-family:var(--display); font-weight:700; font-size:.8rem; color:var(--a-mute)}
.tabsrow span{padding:.3rem 0 .4rem; margin-bottom:-2px}
.tabsrow .on{color:#22cdb9; border-bottom:2px solid #22cdb9}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:separate; border-spacing:0 .3rem; font-size:.78rem; min-width:460px}
.tbl th{text-align:left; font-family:var(--display); font-weight:800; font-size:.58rem; letter-spacing:.06em; color:var(--a-mute); padding:0 .6rem}
.tbl td{background:var(--a-panel); padding:.45rem .6rem; white-space:nowrap; color:var(--a-mute)}
.tbl td:first-child{border-radius:10px 0 0 10px; font-weight:700; color:#fff}
.tbl td:last-child{border-radius:0 10px 10px 0; text-align:right}
.tbl .id{font:700 .7rem ui-monospace,SFMono-Regular,Menlo,monospace; background:#111026; border-radius:6px; padding:.1rem .4rem; color:#fff}
.tbl .pts{color:#fff; font-family:var(--display); font-weight:800}
.badge.warn{background:#3d3416; color:#ffc531}
.badge.warn::before{background:#ffc531}
.badge.ok{background:#15423d; color:#9ff7ea}
.badge.ok::before{background:#22cdb9}
.tfoot{display:flex; justify-content:space-between; align-items:center; color:var(--a-mute); font-size:.76rem; gap:.6rem; flex-wrap:wrap}
.gtabs{display:flex; gap:.15rem; flex-wrap:wrap; background:var(--a-panel); border-radius:12px; padding:.3rem}
.gtabs span{font-family:var(--display); font-weight:800; font-size:.7rem; color:var(--a-mute); padding:.3rem .6rem; border-radius:999px}
.gtabs .on{background:#fff; color:#1b1a2e}
.panel .hint{font-size:.74rem; color:var(--a-mute); margin:-.2rem 0 .6rem}
.drop{border:2px dashed var(--a-line); border-radius:12px; min-height:112px; display:grid; place-items:center; align-content:center; gap:.3rem; color:var(--a-mute); font-size:.74rem; text-align:center; padding:.8rem; margin-bottom:.6rem}
.drop.slim{min-height:54px; grid-auto-flow:column; justify-content:start; text-align:left}
.drop svg{width:20px; height:20px}

/* ── Final call ──────────────────────────────────────────────────── */
.call{padding-block:clamp(3rem,7vw,5.5rem)}
.call-card{
  position:relative; overflow:hidden; background:var(--teal); color:var(--on-teal); border-radius:28px;
  padding:clamp(2rem,5vw,4rem); display:grid; gap:1.3rem; box-shadow:0 8px 0 var(--teal-deep);
  background-image:radial-gradient(rgba(255,255,255,.22) 1.4px, transparent 1.5px); background-size:24px 24px;
}
.call-card h2{max-width:14ch}
.call-card p{max-width:50ch; font-size:1.1rem; font-weight:600}
.call-card .cta-row .btn.ghost{background:var(--on-teal); color:#fff; box-shadow:0 5px 0 rgba(0,0,0,.35)}
.call-card .mail{font-weight:700; font-size:.95rem; color:var(--on-teal)}
.call-card .mail span{font-family:var(--display); font-weight:800; user-select:all}
.call-card :focus-visible{outline-color:var(--on-teal); outline-offset:4px}
.foot :focus-visible{outline-color:#b6a8ff}
.call-card .char{position:absolute; right:clamp(1rem,4vw,3rem); bottom:12px; width:clamp(120px,17vw,190px); height:auto}
@media (max-width:720px){.call-card .char{display:none}}

/* ── Footer ──────────────────────────────────────────────────────── */
.foot{background:var(--foot); color:var(--foot-ink); padding-block:3rem 2rem}
.foot-cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem}
@media (max-width:800px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot .foot-h{font-size:1rem; line-height:1.3; letter-spacing:0; margin-bottom:.8rem; color:var(--foot-ink)}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.foot a{color:color-mix(in srgb,var(--foot-ink) 82%,var(--foot)); text-decoration:none; font-weight:600; overflow-wrap:anywhere}
.foot a:hover{color:var(--foot-ink); text-decoration:underline}
.foot-bar{margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.9rem; color:color-mix(in srgb,var(--foot-ink) 82%,var(--foot))}
.foot .sign{display:flex; gap:1.2rem}


/* ── Site chrome shared by every page ────────────────────────────── */
.skip{position:absolute; left:1rem; top:-4rem; z-index:60; background:var(--card); color:var(--ink); padding:.6rem 1rem; border-radius:var(--r-sm); box-shadow:0 4px 0 var(--line-strong)}
.skip:focus{top:1rem}
main:focus{outline:none}
.links a[aria-current="page"]{color:var(--ink); background:var(--teal-soft)}
.theme-toggle{display:grid; place-items:center; width:42px; height:42px; flex:none; cursor:pointer; border:2px solid var(--line-strong); border-radius:999px; background:var(--card); padding:0; box-shadow:0 4px 0 var(--line-strong); transition:transform .08s ease, box-shadow .08s ease}
.theme-toggle:active{transform:translateY(4px); box-shadow:none}
.motion-toggle{color:var(--ink-2)}
.motion-toggle .i-play{display:none}
.motion-toggle[aria-pressed="true"]{background:var(--teal-soft); color:var(--ink)}
.motion-toggle[aria-pressed="true"] .i-play{display:block}
.motion-toggle[aria-pressed="true"] .i-pause{display:none}
.links .motion-m,.links .theme-m{border:0; background:none; cursor:pointer; text-align:left; font-family:var(--display); font-weight:700; font-size:1rem; color:var(--ink-2); padding:.55rem .85rem; border-radius:12px; min-height:44px}
.links .motion-m[aria-pressed="true"]{color:var(--ink); background:var(--teal-soft)}
.links .motion-m:hover,.links .theme-m:hover{color:var(--ink); background:var(--teal-soft)}
.links .motion-m[aria-pressed="true"]::after{content:"On"; margin-left:.6rem; font-size:.75rem; padding:.1rem .45rem; border-radius:999px; background:var(--card); border:2px solid var(--line-strong)}
@media (max-width:920px){
  .nav-cta .motion-toggle{display:none}
  .links .motion-m,.links .theme-m{border-top:0; margin-top:0; padding-top:.55rem; border-radius:12px}
}
/* The theme switch sits in the header while there is room, and in the menu when there is not. */
@media (min-width:392px) and (max-width:920px){.links .theme-m{display:none}}
@media (max-width:391px){
  .nav-cta #theme{display:none}
  .nav-in{gap:.5rem}
  .logo{font-size:1.25rem; gap:.45rem}
  .logo svg{width:30px; height:30px}
  .burger{flex:none}
  .nav-cta{gap:.4rem}
  .nav-cta .btn.sm{padding-inline:.85rem}
}
@media (max-width:350px){
  .logo{font-size:1.15rem}
  .nav-cta .btn.sm{padding-inline:.6rem; font-size:.85rem}
}
html.still .rv{opacity:1 !important; transform:none !important; transition:none !important}
.theme-toggle .i-moon{stroke:var(--grape)}
.theme-toggle .i-sun{stroke:var(--sun-deep); display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
.btn.orange{background:var(--orange); color:#3a1405; box-shadow:0 5px 0 #c9491a}
.btn.coral{background:var(--coral); color:var(--on-coral); box-shadow:0 5px 0 var(--coral-deep)}
.btn.grape{background:var(--grape-btn); color:var(--grape-on); box-shadow:0 5px 0 var(--grape-shadow)}
.btn.sky{background:var(--sky); color:#04213d; box-shadow:0 5px 0 #1a73c9}
.btn.teal{background:var(--teal); color:var(--on-teal); box-shadow:0 5px 0 var(--teal-deep)}
.btn.orange:active,.btn.coral:active,.btn.grape:active,.btn.sky:active,.btn.teal:active{box-shadow:0 0 0 transparent}

/* ── Inner pages: header, prose, lists ───────────────────────────── */
.page-head{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.2rem,3vw,2rem)}
.page-head .wrap{display:grid; gap:1rem; justify-items:start}
.page-head h1{font-size:clamp(2.4rem,5vw,3.8rem); max-width:18ch}
.page-head .lede{font-size:clamp(1.05rem,1.8vw,1.25rem); color:var(--ink-2); max-width:60ch}
.page-head .updated{color:var(--ink-2); font-weight:600; font-size:.9rem}
.jump{display:flex; gap:.5rem; flex-wrap:wrap}
.jump a{text-decoration:none; font-family:var(--display); font-weight:700; color:var(--ink-2); padding:.4rem .9rem; border-radius:999px; border:2px solid var(--line); background:var(--card)}
.jump a:hover{border-color:var(--teal); color:var(--ink)}
.prose{max-width:46rem; display:grid; gap:2.2rem; padding-block:1rem clamp(3rem,7vw,5rem)}
.prose section{display:grid; gap:.9rem; padding-block:0}
.nav .btn{white-space:nowrap}
@media (max-width:860px){.nav-in{gap:.6rem} .nav-cta{gap:.4rem} .nav-cta .btn.sm{padding-inline:.8rem}}
.game-row:has(.shot){grid-template-columns:300px 1fr}
@media (max-width:760px){.game-row:has(.shot){grid-template-columns:1fr}}
.prose h2{font-size:clamp(1.5rem,3vw,2rem)}
.prose h3{font-size:1.15rem}
.prose p,.prose li{color:var(--ink-2); line-height:1.65}
.prose p strong,.prose li strong{color:var(--ink)}
.prose a{color:var(--link); font-weight:700; text-decoration-thickness:2px; text-underline-offset:3px}
.dots{margin:0; padding-left:1.2rem; display:grid; gap:.5rem}
.dots li::marker{color:var(--teal)}
.stepno{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--ink); color:var(--paper); font-size:1rem; margin-right:.7rem; vertical-align:middle; box-shadow:0 3px 0 var(--teal)}
.toc{background:var(--card); border:2px solid var(--line); border-radius:var(--r); padding:1.1rem 1.3rem}
.toc-h{font-family:var(--display); font-weight:800; margin:0 0 .5rem}
.toc ol{margin:0; padding-left:1.2rem; columns:2; column-gap:2rem}
@media (max-width:600px){.toc ol{columns:1}}
.toc li{padding:.15rem 0; break-inside:avoid}
.toc a{color:var(--ink-2); text-decoration:none; font-weight:600}
.toc a:hover{color:var(--link); text-decoration:underline}
.note{background:var(--sun-soft); border:2px solid var(--sun); border-radius:var(--r-sm); padding:.9rem 1.1rem}
.note p{color:var(--ink)}
.table-wrap{overflow-x:auto}
.services{width:100%; min-width:520px; border-collapse:separate; border-spacing:0; border:2px solid var(--line); border-radius:var(--r-sm); overflow:hidden; font-size:.95rem}
.services th,.services td{text-align:left; padding:.7rem .8rem; vertical-align:top; border-bottom:2px solid var(--line); color:var(--ink-2)}
.services thead th{background:var(--card); font-family:var(--display); font-weight:800; color:var(--ink)}
.services tbody th{font-weight:800; color:var(--ink); white-space:nowrap}
.services tr:last-child td,.services tr:last-child th{border-bottom:0}
.page-cta{padding-block:0 clamp(3rem,6vw,5rem)}

/* ── Games page ──────────────────────────────────────────────────── */
.games-page{display:grid; gap:clamp(3rem,6vw,4.5rem); padding-block:1rem clamp(3rem,6vw,5rem)}
.cat-head{display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:end; margin-bottom:1.6rem}
@media (max-width:600px){.cat-head{grid-template-columns:1fr}}
.cat-head .char{width:104px; height:auto}
.cat-head .copy{display:grid; gap:.5rem; max-width:60ch}
.cat-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.cat-head p{color:var(--ink-2); font-size:1.1rem}
.rows{display:grid; gap:1.1rem}
.game-row{display:grid; grid-template-columns:220px 1fr; gap:1.4rem; padding:1.2rem; border-radius:var(--r); background:var(--card); border:2px solid var(--line-strong); box-shadow:0 6px 0 var(--line-strong); align-items:start; overflow:hidden}
@media (max-width:760px){.game-row{grid-template-columns:1fr}}
.game-art{aspect-ratio:4/3; border-radius:16px; background:var(--g); display:grid; place-items:center; position:relative; overflow:hidden}
.game-art svg{width:34%; height:34%}
.game-art::after{content:""; position:absolute; right:-25%; bottom:-40%; width:75%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.18)}
.game-art.video{aspect-ratio:16/9; background:#000; align-self:center}
.game-art.video video{width:100%; height:100%; display:block; object-fit:cover}
.game-art.video::after{display:none}
.game-art.video video:focus-visible{outline:none}
.game-art.video:has(video:focus-visible)::after{display:block; content:""; position:absolute; inset:0; border:5px solid var(--ring); box-shadow:inset 0 0 0 3px #fff; border-radius:inherit; pointer-events:none; z-index:2; background:none; width:auto; height:auto; aspect-ratio:auto}
.transcript{margin:.1rem 0 .7rem; color:var(--ink-2)}
.transcript summary{cursor:pointer; font-family:var(--display); font-weight:700; color:var(--link); min-height:32px; display:inline-flex; align-items:center}
.transcript p{margin:.4rem 0 0; font-size:.95rem; max-width:60ch}
.game-art.screen img{position:absolute; top:1rem; left:50%; transform:translateX(-50%); width:66%; height:auto; display:block; border-radius:22px 22px 0 0; border:5px solid #15131f; border-bottom:0; box-shadow:0 -12px 30px -12px rgba(0,0,0,.45)}
.game-art.screen::after{display:none}
.game-copy{display:grid; gap:.7rem; min-width:0}
.game-copy h3{font-size:1.5rem}
.game-desc{color:var(--ink-2); font-size:1.05rem}
.how{margin:0; padding:0; list-style:none; display:grid; gap:.45rem; counter-reset:how}
.how li{position:relative; padding-left:2.2rem; color:var(--ink-2)}
.how li::before{counter-increment:how; content:counter(how); position:absolute; left:0; top:.1rem; width:1.6rem; height:1.6rem; border-radius:8px; background:var(--teal-soft); color:var(--ink); font-family:var(--display); font-weight:900; font-size:.85rem; display:grid; place-items:center}
.game-tags{display:flex; gap:.4rem; flex-wrap:wrap}
.chip.tag{font-size:.8rem; padding:.2rem .65rem}
.chip.live{background:var(--teal); border-color:transparent; color:var(--on-teal)}
.chip.soon{color:var(--muted)}
.chip.flag{background:var(--coral); border-color:transparent; color:var(--on-coral)}
.game-act{padding-top:.2rem}

/* ── Teachers page ───────────────────────────────────────────────── */
.t-hero .hero-copy h1{font-size:clamp(2.4rem,5vw,3.9rem)}
.live-card{display:grid; gap:.9rem; background:var(--card); border:2px solid var(--line-strong); border-radius:var(--r); box-shadow:0 7px 0 var(--line-strong); padding:1.1rem}
.live-top{display:flex; justify-content:space-between; align-items:center; gap:.6rem; font-family:var(--display); font-weight:800}
.live-join{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center; padding:.8rem 1rem; border-radius:14px; background:var(--paper); border:2px solid var(--line)}
.live-join small{color:var(--muted); font-weight:700; letter-spacing:.04em; display:block}
.live-join .code{font-family:var(--display); font-weight:900; font-size:clamp(1.8rem,3vw,2.3rem); letter-spacing:.14em; line-height:1}
.pains{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width:860px){.pains{grid-template-columns:1fr}}
.pain{display:grid; gap:.6rem; align-content:start; padding:1.2rem; border-radius:var(--r); background:var(--card); border:2px solid var(--line-strong); box-shadow:0 5px 0 var(--line-strong)}
.pain-q{font-family:var(--display); font-weight:800; font-size:1.2rem; letter-spacing:-.01em}
.pain-a{color:var(--ink-2); padding-left:1rem; border-left:3px solid var(--teal)}
.game-art.shot{aspect-ratio:auto; min-height:200px; padding:.9rem; align-items:start; background:var(--g)}
.game-art.shot::after{display:none}
.glimpse{width:100%; background:var(--card); border:2px solid var(--line-strong); border-radius:14px; padding:.8rem; display:grid; gap:.55rem; font-size:.85rem; box-shadow:0 4px 0 var(--line-strong)}
.glimpse-bar{display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-family:var(--display); font-weight:800}
.mock-table{width:100%; border-collapse:collapse; font-size:.8rem}
.mock-table th{text-align:left; color:var(--muted); font-family:var(--display); font-weight:800; font-size:.7rem; letter-spacing:.04em; padding:.2rem .3rem}
.mock-table td{padding:.3rem; border-top:2px solid var(--line); color:var(--ink-2)}
.mock-table td:first-child{font-weight:800; color:var(--ink)}
.glimpse-foot{color:var(--muted); font-weight:600; display:flex; align-items:center; gap:.4rem}
.mini-tiles{display:inline-flex; gap:.25rem}
.mini-tiles i{width:14px; height:14px; border-radius:4px; display:inline-block}
.mock-field{display:flex; justify-content:space-between; gap:.5rem; padding:.45rem .6rem; border-radius:10px; background:var(--paper); border:2px solid var(--line)}
.mock-field small{color:var(--muted); font-weight:700}
.mock-field span{font-weight:700}
.mock-choice{display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem; border-radius:10px; border:2px solid var(--line); color:var(--ink-2)}
.mock-choice i{width:14px; height:14px; border-radius:50%; border:2px solid var(--line-strong); flex:none}
.mock-choice.on{border-color:var(--teal); color:var(--ink)}
.mock-choice.on i{background:var(--teal); border-color:var(--teal)}
.mock-choice small{color:var(--muted)}
.mock-btn{justify-self:start; pointer-events:none}
.rt-row{display:grid; gap:.25rem}
.report-row{display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-weight:800}
.rt-row .bar,.handed .bar{height:8px; border-radius:999px; background:var(--paper); border:2px solid var(--line); overflow:hidden}
.rt-row .bar i,.handed .bar i{display:block; height:100%; background:var(--coral); border-radius:999px}
.rt-row.ok .bar i,.handed .bar i{background:var(--teal)}
.rt-row small,.handed small{color:var(--muted); font-weight:600}
.pairs{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.pairs span{padding:.2rem .6rem; border-radius:999px; background:var(--paper); border:2px solid var(--line); font-weight:700; font-size:.8rem}
.handed{display:grid; gap:.25rem}
.cue{display:grid; gap:.2rem; padding:.6rem .7rem; border-radius:10px; background:var(--sun-soft); border:2px solid var(--sun)}
.cue small{color:var(--muted); font-weight:700}
.cue b{font-family:var(--display)}
.why-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
@media (max-width:760px){.why-list{grid-template-columns:1fr}}
.why-list li{display:grid; grid-template-columns:34px 1fr; gap:.9rem; align-items:start; padding:1rem; border-radius:16px; border:2px solid var(--line); background:color-mix(in srgb,var(--card) 70%,transparent)}
.why-list b{font-family:var(--display); font-weight:800; font-size:1.05rem; display:block}
.why-list small{color:var(--ink-2); font-size:.95rem; display:block}
.faq{display:grid; gap:.6rem; max-width:52rem}
.faq details{background:var(--card); border:2px solid var(--line-strong); border-radius:16px; box-shadow:0 4px 0 var(--line-strong); padding:0 1.1rem}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:56px; font-family:var(--display); font-weight:800; font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-weight:900; font-size:1.4rem; color:var(--link); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2); padding:0 0 1rem}
.faq details p a{color:var(--link); font-weight:700}

/* ── Contact ─────────────────────────────────────────────────────── */
.cards-wrap{display:grid; gap:1.6rem; padding-block:1rem clamp(3rem,6vw,5rem)}
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem}
@media (max-width:700px){.cards{grid-template-columns:1fr}}
.card{display:grid; gap:.7rem; align-content:start; padding:1.3rem; border-radius:var(--r); background:var(--card); border:2px solid var(--line-strong); box-shadow:0 6px 0 var(--line-strong)}
.card .tile{width:52px; height:52px; border-radius:14px; display:grid; place-items:center}
.tile.teal{background:var(--teal)}
.tile.sun{background:var(--sun)}
.tile.coral{background:var(--coral)}
.tile.grape{background:var(--grape)}
.card h2{font-size:1.35rem}
.card p{color:var(--ink-2)}
.card p a{color:var(--link); font-weight:700}
.card .btn{justify-self:start}
.direct{text-align:center; color:var(--ink-2); font-weight:600}
.direct a{color:var(--link); font-weight:800}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .ticker .row{animation:none}
  [data-tilt]{transform:none !important}
  .pane{animation:none}
  .tab .prog{display:none}
  .dock .ico::after{display:none}
}
/* Paused with the header button: the same rules as the system setting. */
html.still *, html.still *::before, html.still *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
html.still{scroll-behavior:auto}
html.still .ticker .row{animation:none}
html.still [data-tilt]{transform:none !important}
html.still .pane{animation:none}
html.still .tab .prog{display:none}
html.still .dock .ico::after{display:none}