/* The Brain Break: a late-night study. Charcoal desk, ivory chalk, scarlet for every answer and win. */
:root{
  --bg:#141013; --card:#1E181C; --line:#3A2F35; --ink:#F1E6E0; --dim:#A8979A; --accent:#E04A61; --accent-2:#8B0015; --ok:#5FC488; --no:#F07A8C; --tile:#2A2227;
  --display:"Bodoni Moda",Georgia,serif; --body:"Jost","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:300 17px/1.6 var(--body);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;background-attachment:fixed;background-position:-1px -1px}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at top,rgba(20,16,19,.4),var(--bg) 70%);z-index:-1}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.bb-head,.bb,.bb-foot{max-width:960px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bb-head{display:flex;justify-content:space-between;align-items:center;padding-block:18px;font-size:14px}
.back{text-decoration:none;color:var(--dim)}
.score{margin:0;font-family:var(--mono);color:var(--dim)}
.score b{color:var(--accent)}
.intro{padding-block:28px 24px;display:grid;gap:10px}
.kicker{margin:0;font:500 12px var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
h1{margin:0;font:400 clamp(44px,8vw,84px)/1 var(--display)}
h1 em{color:var(--accent)}
.intro p{margin:0;color:var(--dim);max-width:34em}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);font:500 14px var(--body);letter-spacing:.06em;padding:12px 14px;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--accent)}
.panel{padding-block:24px 48px;display:grid;gap:16px}
.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.bar label{display:grid;gap:4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
select,input{font:400 16px var(--body);background:var(--card);color:var(--ink);border:1px solid var(--line);padding:9px 10px}
.tally{margin-left:auto;font-family:var(--mono);font-size:14px;color:var(--dim)}
.card{background:var(--card);border:1px solid var(--line);padding:clamp(20px,4vw,36px);display:grid;gap:16px;min-width:0}
.card h2{margin:0;font:400 clamp(24px,3.4vw,34px)/1.25 var(--display)}
.meta{display:flex;gap:8px;flex-wrap:wrap}
.pill{font:500 11px var(--body);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:4px 8px;color:var(--dim)}
.dim{color:var(--dim);margin:0}
.go,.ghost{font:500 13px var(--body);letter-spacing:.1em;text-transform:uppercase;padding:12px 16px;cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:#141013}
.ghost{background:none;color:var(--ink);border-color:var(--line)}
.ghost:hover{border-color:var(--accent)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.answer{border-left:2px solid var(--accent);padding-left:14px}
.opts{display:grid;gap:10px}
.opt{text-align:left;background:var(--tile);border:1px solid var(--line);color:var(--ink);font:400 16px var(--body);padding:13px 14px;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt.right{border-color:var(--ok);color:var(--ok)}
.opt.wrong{border-color:var(--no);color:var(--no)}
.progress{height:3px;background:var(--line)}
.progress i{display:block;height:100%;background:var(--accent);transition:width .3s}
.feedback.ok{color:var(--ok)}.feedback.no{color:var(--no)}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.game{text-align:left;background:var(--card);border:1px solid var(--line);color:var(--ink);padding:18px;cursor:pointer;display:grid;gap:6px}
.game b{font:400 22px var(--display)}
.game span{color:var(--dim);font-size:14px}
.game:hover,.game[aria-pressed="true"]{border-color:var(--accent)}
.stats{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:14px;color:var(--dim)}
.stats b{color:var(--ink)}
.board{display:grid;gap:8px;max-width:520px;width:100%;margin:0 auto}
.tile{aspect-ratio:1;background:var(--tile);border:1px solid var(--line);color:var(--ink);font:400 clamp(22px,5vw,34px) var(--display);cursor:pointer;display:grid;place-items:center;transition:transform .15s,background .15s}
.tile.up{background:#F1E6E0;color:#141013}
.tile.done{background:var(--accent-2);color:#F1E6E0;border-color:var(--accent-2);cursor:default}
.tile.lit{background:var(--accent);border-color:var(--accent)}
.tile:disabled{cursor:default}
.simon{grid-template-columns:repeat(2,1fr);max-width:320px}
.simon .tile.flash{background:var(--accent);transform:scale(.96)}
.seq{font:600 clamp(22px,5vw,34px) var(--mono);letter-spacing:.04em;word-break:break-word}
.letters{font:600 clamp(28px,7vw,48px) var(--mono);letter-spacing:.3em}
.inline{display:flex;gap:10px;flex-wrap:wrap}
.inline input{flex:1;min-width:140px}
.reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.reel{background:var(--card);border:1px solid var(--line);display:grid;min-width:0}
.reel .media{position:relative;aspect-ratio:9/16;max-height:460px;background:var(--tile)}
.reel video,.reel iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.reel .txt{padding:14px;display:grid;gap:6px}
.reel h3{margin:0;font:400 20px var(--display)}
.empty{border:1px dashed var(--line);padding:28px;color:var(--dim)}
.bb-foot{padding-block:24px 40px;font-size:13px;color:var(--dim)}