:root{
 font-family:ui-rounded,"SF Pro Rounded","Trebuchet MS",system-ui,-apple-system,sans-serif;
 --ink:#183747;--soft-ink:#486675;--cream:#fff8e7;--sky:#bfe9f2;--deep:#174a63;--leaf:#4e9b72;--sun:#ffd26a;--coral:#f38d73;
 --panel:rgba(255,255,255,.9);--shadow:0 18px 50px rgba(24,55,71,.16);--tap:64px;--fs:1;
 --bg:radial-gradient(circle at 90% 0%,rgba(255,210,106,.7),transparent 23%),linear-gradient(180deg,#d9f3f7,#fff6df);
 --btn1:#ffd96c;--btn2:#f4b647;--btnEdge:#c9832f;--btnInk:#253b3f;--tile:#fff;--glow:#7fd3a6;
}
body.teen{--ink:#e6eef5;--soft-ink:#a9bccb;--deep:#7cc4e0;--leaf:#6fd1a0;--panel:rgba(22,34,48,.92);--shadow:0 18px 50px rgba(0,0,0,.35);
 --bg:radial-gradient(circle at 85% 0%,rgba(80,120,200,.35),transparent 30%),linear-gradient(180deg,#0f1b2a,#1b2838);
 --btn1:#7cc4e0;--btn2:#4e9bc0;--btnEdge:#2c6a88;--btnInk:#0c1a24;--tile:#22344a;--glow:#6fd1a0}
body.hc{--ink:#000;--soft-ink:#000;--deep:#000;--panel:#fff;--bg:#fff;--tile:#fff;--btn1:#ffe14d;--btn2:#ffe14d;--btnEdge:#000;--btnInk:#000;--glow:#0050ff}
body.hc .tile,body.hc .card,body.hc button{border:3px solid #000!important}
body.teen.hc{--ink:#fff;--soft-ink:#fff;--deep:#fff;--panel:#000;--bg:#000;--tile:#000;--btnInk:#000}
body.teen.hc .tile,body.teen.hc .card,body.teen.hc button{border-color:#fff!important}
body.dys{font-family:Verdana,"Comic Sans MS","Atkinson Hyperlegible",sans-serif;letter-spacing:.06em;word-spacing:.2em;line-height:1.6}
body.big{--tap:88px}
*{box-sizing:border-box}
html{font-size:calc(100% * var(--fs))}
html,body{margin:0;min-height:100%}
body{min-height:100dvh;background:var(--bg);background-attachment:fixed;color:var(--ink);-webkit-tap-highlight-color:transparent}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:4px solid var(--deep);outline-offset:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;flex-wrap:wrap}
.home-link{font-size:1.6rem;text-decoration:none;min-width:var(--tap);min-height:var(--tap);display:grid;place-items:center;border-radius:999px;background:var(--panel)}
.schedule{display:flex;gap:8px;list-style:none;margin:0 auto;padding:0}
.schedule li{padding:10px 16px;border-radius:999px;background:var(--panel);font-weight:800;opacity:.55;border:3px solid transparent}
.schedule li.on{opacity:1;border-color:var(--leaf)}
.schedule li.done{opacity:.85}
.tools{display:flex;gap:8px}
.tool{min-height:var(--tap);min-width:var(--tap);padding:0 18px;border:0;border-radius:999px;background:var(--panel);font-weight:800;cursor:pointer;box-shadow:var(--shadow)}
.progress{height:14px;margin:0 16px;border-radius:999px;background:var(--panel);overflow:hidden}
#progressFill{height:100%;width:0;background:var(--leaf);transition:width .6s}
.stage{max-width:1000px;margin:0 auto;padding:18px;outline:none}
.card{background:var(--panel);border-radius:38px;box-shadow:var(--shadow);padding:clamp(20px,4vw,44px);text-align:center}
h1{font-size:clamp(2.2rem,7vw,4rem);margin:.1em 0;line-height:1}
h2{font-size:clamp(1.6rem,4.5vw,2.4rem);margin:.2em 0}
p{font-size:1.25rem;line-height:1.5;color:var(--soft-ink);font-weight:650}
.eyebrow{font-size:.95rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--deep);margin:0 0 8px}
.big-btn{border:0;border-radius:999px;min-height:max(var(--tap),80px);padding:14px 44px;background:linear-gradient(180deg,var(--btn1),var(--btn2));color:var(--btnInk);font-size:clamp(1.4rem,4vw,2rem);font-weight:900;box-shadow:0 8px 0 var(--btnEdge),0 14px 26px rgba(0,0,0,.15);cursor:pointer;margin:10px}
.big-btn:active{transform:translateY(4px);box-shadow:0 4px 0 var(--btnEdge)}
.btn{border:0;border-radius:999px;min-height:var(--tap);padding:10px 26px;background:var(--panel);font-weight:800;font-size:1.1rem;cursor:pointer;box-shadow:inset 0 0 0 3px var(--soft-ink);margin:6px}
.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
input[type=text]{min-height:var(--tap);border-radius:20px;border:3px solid var(--soft-ink);padding:0 18px;font-size:1.3rem;background:var(--tile);width:min(320px,80vw)}
.items{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:20px 0}
.item{background:var(--tile);border-radius:28px;min-width:130px;min-height:130px;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.item .emo{font-size:4rem;line-height:1}.item .w{font-size:1.4rem;font-weight:800;margin-top:6px}
.item.word .w{font-size:2rem}
.item .num{font-weight:900;color:var(--deep)}
.pair{display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:14px;margin:20px auto;max-width:720px}
.grid.c4{grid-template-columns:repeat(2,1fr)}.grid.c6{grid-template-columns:repeat(3,1fr)}.grid.c9{grid-template-columns:repeat(3,1fr)}
.tile{border:0;background:var(--tile);border-radius:28px;min-height:max(var(--tap),110px);padding:10px;cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s,box-shadow .3s;position:relative}
.tile .emo{font-size:3rem}.tile .w{font-size:1.25rem;font-weight:800}
.tile[aria-pressed=true]{box-shadow:0 0 0 6px var(--deep),var(--shadow)}
.tile .badge{position:absolute;top:6px;left:12px;font-weight:900;color:var(--deep)}
.tile.faded{opacity:.22;pointer-events:none}
.tile.hint{box-shadow:0 0 0 6px var(--sun),0 0 24px 6px var(--sun)}
.tile.good,.glow{box-shadow:0 0 0 6px var(--glow),0 0 30px 10px var(--glow)}
.stars{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:16px 0}
.star{width:max(var(--tap),72px);height:max(var(--tap),72px);border-radius:50%;border:0;background:var(--tile);font-size:2.2rem;cursor:pointer;box-shadow:var(--shadow);opacity:.5}
.star.lit{opacity:1;background:var(--sun)}
.bins{display:flex;gap:20px;justify-content:center;margin:12px 0}
.bin{min-width:140px;min-height:100px;border-radius:28px;border:4px dashed;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding:8px;font-weight:800}
.dot{width:max(var(--tap),64px);height:max(var(--tap),64px);border-radius:50%;border:0;cursor:pointer;box-shadow:var(--shadow)}
.dot.small{width:28px;height:28px;cursor:default}
.waitbar{height:18px;border-radius:999px;background:rgba(127,127,127,.2);overflow:hidden;max-width:420px;margin:14px auto}
.waitbar div{height:100%;background:var(--sky);width:0}
body.teen .waitbar div{background:#4e9bc0}
.vault{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:1.8rem}
.overlay{position:fixed;inset:0;background:rgba(10,25,35,.55);display:grid;place-items:center;padding:16px;z-index:5;overflow:auto}
.overlay .card{max-width:760px;width:100%;text-align:left;max-height:92vh;overflow:auto}
.set{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(127,127,127,.25);font-size:1.15rem;font-weight:700}
.set input[type=checkbox]{width:44px;height:44px;min-width:44px;accent-color:var(--leaf)}
.set select,.set input[type=range]{min-height:48px}
.hold{position:relative;overflow:hidden}
.hold .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(78,155,114,.35)}
table{border-collapse:collapse;width:100%;font-size:1rem}td,th{padding:6px;border-bottom:1px solid rgba(127,127,127,.25);text-align:left}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:no-preference){body:not(.rm) .pop{animation:pop .18s ease-out}@keyframes pop{from{transform:scale(.97);opacity:.85}}}
body.rm *{transition:none!important;animation:none!important}
@media(max-width:560px){.grid.c9{grid-template-columns:repeat(3,1fr)}.tile .emo{font-size:2.2rem}.schedule li{padding:8px 10px;font-size:.9rem}}
.overlay[hidden],[hidden]{display:none!important}
.btn[aria-pressed=true]{background:var(--leaf);color:#fff;box-shadow:none}

select,option{background:var(--tile);color:var(--ink)}
select{border:3px solid var(--soft-ink);border-radius:14px;padding:6px 10px;min-height:48px}
body.hc select,body.hc option{background:#fff;color:#000}
body.teen.hc select,body.teen.hc option{background:#000;color:#fff}
body.hc .schedule li{opacity:1;color:var(--ink);background:var(--panel);border:3px dashed var(--ink)}
body.hc .schedule li.on{border:5px solid var(--ink);text-decoration:underline}
.tile[aria-pressed=true]::after{content:"✓";position:absolute;top:6px;right:12px;font-size:1.6rem;font-weight:900;color:var(--leaf)}
body.hc .tile[aria-pressed=true]{background:#ffe14d;color:#000;box-shadow:inset 0 0 0 8px #000}
body.teen.hc .tile[aria-pressed=true]{background:#ffe14d;color:#000}
body.hc .tile[aria-pressed=true]::after{color:#000}
body.hc :focus-visible{outline:5px dashed #0050ff;outline-offset:6px}
.headsup{background:var(--sun);color:#253b3f;border-radius:20px;padding:10px 16px;display:inline-block}
.linkish{background:none;border:0;text-decoration:underline;color:var(--soft-ink);min-height:44px;cursor:pointer;font-size:1rem}
#btnMusic[aria-pressed=false]{opacity:.7}
.replay-btn.playing{border-color:var(--sun,#ffd26a);background:#fffbe9;box-shadow:0 0 0 6px rgba(255,210,106,.5)}
.go-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;min-height:clamp(96px,14vh,140px);min-width:clamp(180px,30vw,320px);padding:10px 48px;background:#1f8a4c!important;color:#fff!important;font-size:clamp(2rem,6vh,3rem);font-weight:900;box-shadow:0 8px 0 #145c33;animation:goglow 2.8s ease-in-out infinite}
@keyframes goglow{0%,100%{box-shadow:0 8px 0 #145c33,0 0 0 0 rgba(31,138,76,.45)}50%{box-shadow:0 8px 0 #145c33,0 0 0 16px rgba(31,138,76,.18)}}
@media (min-width:700px) and (min-height:600px){.go-btn{min-height:120px;min-width:240px}}
body.rm .go-btn{animation:none}
@media (prefers-reduced-motion:reduce){.go-btn{animation:none}}
/* ---- shared NeuroQuest top bar, 5-dot strip and star reward ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;height:84px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-top:max(8px,env(safe-area-inset-top))}
.tools{display:flex;gap:8px}
.tool{width:68px;height:68px;min-width:0;min-height:0;border-radius:20px;border:0;background:rgba(255,255,255,.94);box-shadow:0 10px 30px rgba(24,55,71,.15);font-size:1.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding:4px;font-weight:400}
.tool small{font-size:.68rem;font-weight:800;margin-top:4px;white-space:nowrap}
.tool.home{width:84px;border:3px solid #174a63}
.tool[aria-pressed=false]{opacity:.75}
.tokens{display:flex;gap:10px;flex:none}
.tokens span{width:22px;height:22px;border-radius:50%;border:3px solid #174a63;background:#fff}
.tokens span.on{background:#ffd26a}
.reward{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);font-size:min(30vh,12rem);pointer-events:none;z-index:10;animation:rew 2s ease-out forwards}
.reward.small{font-size:min(16vh,6rem)}
@keyframes rew{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}25%{transform:translate(-50%,-50%) scale(1.05);opacity:1}75%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
body.rm .reward{animation:none}
@media (prefers-reduced-motion:reduce){.reward{animation:none}}
@media (max-height:700px){.topbar{height:76px}.tool{height:64px;width:64px}.tool.home{width:78px}}
@media (max-width:520px){.topbar{padding:8px 6px;gap:6px}.tools{gap:6px}.tool{width:58px;height:64px}.tool.home{width:64px}.tool small{font-size:.6rem}.tokens{gap:5px}.tokens span{width:14px;height:14px;border-width:2px}}