/* Waiting in Line Simulator, v2.5 interface.
   Tokens and component rules: DESIGN.md. Everything inside the screen is sized in cqw
   (1cqw = 1% of the screen's width; the 720px-wide reference makes 1cqw = 7.2px). */

/* ---------- fonts (bundled, SIL Open Font License: see src/fonts/) ---------- */
@font-face{font-family:"Press Start 2P";src:url("fonts/press-start-2p.woff2") format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/atkinson-hyperlegible-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/atkinson-hyperlegible-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;
  --bg:#1c1929; --panel:#272339; --panel-2:#312c48; --line:#463f66; --ink:#efebf7; --muted:#a49cc2;
  --ink-dark:#120f1c; --night:#272339; --night-hi:#3a3454; --night-lo:#1a1727;
  --paper:#fbf8ee; --paper-hi:#fffef9; --paper-lo:#ddd2b4; --inner-line:#b9cbee; --rule:#d3c8a8;
  --text:#2c2a3e; --text-muted:#6f6c86; --text-on-night:#efebf7; --muted-on-night:#a49cc2;
  --you:#f2b23a; --you-lo:#c98a14; --select:#3fc6ff; --fail:#e5574f; --fail-lo:#b8433d; --good:#6cc58a;
  --t-disciplined:#4a8ee8; --t-jumpy:#f2c23a; --t-hot:#e5574f;
  --game:"Press Start 2P", ui-monospace, monospace;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--body);-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]:not([hidden=until-found i]){display:none!important}
button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--you);outline-offset:2px}

/* ---------- page chrome ---------- */
.wrap{max-width:max(1100px,calc(240px * var(--k,4) + 40px));margin:0 auto;padding:16px 16px 40px;display:flex;flex-direction:column;gap:10px}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
h1{margin:0;font-family:var(--game);font-size:clamp(14px,2.2vw,22px);line-height:1.3;text-wrap:balance}
.sub{margin:6px 0 0;color:var(--muted);font-family:var(--game);font-size:9px;letter-spacing:.04em}
.settings{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);flex-wrap:wrap}
select,.ghost{font-family:var(--game);font-size:9px;color:var(--ink);background:var(--panel-2);border:2px solid var(--line);padding:8px 10px;cursor:pointer;min-height:36px}
.ghost[aria-pressed="false"]{color:var(--muted);border-style:dashed}   /* music or sound switched off */
.tabs{display:grid;grid-template-columns:minmax(0,.75fr) repeat(3,minmax(0,1fr));gap:6px}   /* the tutorial tab, then the three lines */
.tabs button{font-family:var(--game);text-align:left;color:var(--muted);background:var(--panel);border:2px solid var(--line);padding:9px 10px;cursor:pointer;min-width:0;display:flex;flex-direction:column;gap:6px}
.tabs button b{display:block;color:var(--ink);font-weight:400;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs button span{font-size:8px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs button[aria-pressed="true"]{border-color:var(--you);background:var(--panel-2)}

/* ---------- the screen ---------- */
/* Desktop: main.js sets --k, a whole-number scale, so the 240x160 scene keeps square pixels.
   Without it (very narrow windows, until the phone layout lands) the screen fills the width. */
.screen.snap{box-sizing:content-box;width:calc(240px * var(--k));align-self:center}
.screen{position:relative;width:100%;aspect-ratio:3/2;container-type:inline-size;overflow:hidden;background:#000;
  font-family:var(--game);border:4px solid #0b0a12;box-shadow:0 0 0 2px var(--line),0 16px 36px rgba(0,0,0,.45)}
.screen canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer}

/* ---------- textured panels ----------
   .fr   dark frame with pixel-stepped corners (step = --s)
   .fill the panel face inside it, one step smaller
   .paper / .night the two faces: dot texture, lighter top-left edge, darker bottom-right edge */
.fr{--s:max(2px,.42cqw);position:absolute;padding:var(--s);background:var(--ink-dark);
  clip-path:polygon(calc(var(--s)*2) 0,calc(100% - var(--s)*2) 0,calc(100% - var(--s)*2) var(--s),calc(100% - var(--s)) var(--s),calc(100% - var(--s)) calc(var(--s)*2),100% calc(var(--s)*2),100% calc(100% - var(--s)*2),calc(100% - var(--s)) calc(100% - var(--s)*2),calc(100% - var(--s)) calc(100% - var(--s)),calc(100% - var(--s)*2) calc(100% - var(--s)),calc(100% - var(--s)*2) 100%,calc(var(--s)*2) 100%,calc(var(--s)*2) calc(100% - var(--s)),var(--s) calc(100% - var(--s)),var(--s) calc(100% - var(--s)*2),0 calc(100% - var(--s)*2),0 calc(var(--s)*2),var(--s) calc(var(--s)*2),var(--s) var(--s),calc(var(--s)*2) var(--s))}
.fill{position:relative;width:100%;height:100%;
  clip-path:polygon(var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--s),100% var(--s),100% calc(100% - var(--s)),calc(100% - var(--s)) calc(100% - var(--s)),calc(100% - var(--s)) 100%,var(--s) 100%,var(--s) calc(100% - var(--s)),0 calc(100% - var(--s)),0 var(--s),var(--s) var(--s))}
.paper{color:var(--text);background-color:var(--paper);background-image:radial-gradient(rgba(140,115,60,.13) .14cqw,transparent .18cqw);background-size:.56cqw .56cqw;
  box-shadow:inset var(--s) var(--s) 0 var(--paper-hi),inset calc(var(--s)*-1) calc(var(--s)*-1) 0 var(--paper-lo)}
.paper::before{content:"";position:absolute;inset:calc(var(--s)*2);border:max(1px,.28cqw) solid var(--inner-line);pointer-events:none;
  clip-path:polygon(var(--s) 0,calc(100% - var(--s)) 0,100% var(--s),100% calc(100% - var(--s)),calc(100% - var(--s)) 100%,var(--s) 100%,0 calc(100% - var(--s)),0 var(--s))}
.night{color:var(--text-on-night);background-color:var(--night);background-image:radial-gradient(rgba(255,255,255,.05) .14cqw,transparent .18cqw);background-size:.56cqw .56cqw;
  box-shadow:inset var(--s) var(--s) 0 var(--night-hi),inset calc(var(--s)*-1) calc(var(--s)*-1) 0 var(--night-lo)}
.tab{position:absolute;top:0;left:2.2cqw;z-index:1;font-size:clamp(6px,.95cqw,10px);letter-spacing:.06em;line-height:1;padding:.6cqw 1.1cqw .75cqw;background:var(--ink-dark);color:var(--paper);
  clip-path:polygon(0 0,100% 0,100% calc(100% - .4cqw),calc(100% - .4cqw) calc(100% - .4cqw),calc(100% - .4cqw) 100%,.4cqw 100%,.4cqw calc(100% - .4cqw),0 calc(100% - .4cqw))}
.st{clip-path:polygon(.42cqw 0,calc(100% - .42cqw) 0,100% .42cqw,100% calc(100% - .42cqw),calc(100% - .42cqw) 100%,.42cqw 100%,0 calc(100% - .42cqw),0 .42cqw)}
.rule{height:0;border-top:max(1px,.28cqw) dashed var(--rule);margin:0 .8cqw 0 1.4cqw}

/* ---------- status bar ---------- */
.hud{left:1.1cqw;right:1.1cqw;top:1.1cqw;height:7.6cqw}
.hudin{display:flex;align-items:center;gap:2.6cqw;padding:0 2.2cqw}
.hud .it{display:flex;flex-direction:column;gap:.75cqw;min-width:0}
.hud .k{font-size:clamp(5px,.95cqw,10px);color:var(--muted-on-night);letter-spacing:.05em;display:flex;align-items:center;gap:.6cqw;white-space:nowrap;line-height:1}
.hud .k svg{width:1.4cqw;height:1.4cqw;fill:none;stroke:var(--muted-on-night);stroke-width:2}
.hud .v{font-size:clamp(8px,1.8cqw,18px);line-height:1;white-space:nowrap}
.hud .grow{flex:1}
.vsep{width:max(1px,.28cqw);align-self:stretch;margin:1.3cqw 0;background:repeating-linear-gradient(#5a527c 0 .56cqw,transparent .56cqw 1cqw)}
.pips,.blocks{display:flex;gap:.55cqw;height:1.8cqw;align-items:center}
.pip{width:1.15cqw;height:1.15cqw;background:#3a3454;box-shadow:0 0 0 max(1px,.28cqw) var(--ink-dark)}
.pip.on{background:var(--fail)}
.mv{width:1.7cqw;height:1.25cqw;background:#3a3454;box-shadow:0 0 0 max(1px,.28cqw) var(--ink-dark)}
.mv.on{background:var(--you)}
.hud .it.hot{background:var(--fail);margin:-.8cqw -1.1cqw;padding:.8cqw 1.1cqw;box-shadow:0 0 0 max(1px,.28cqw) var(--ink-dark)}
.hud .it.hot .k{color:#ffe1dd}
.hud .it.hot .mv{background:#b8433d}.hud .it.hot .mv.on{background:#fff}
.freechip{font-size:clamp(7px,1.25cqw,13px);line-height:1;color:#0f2a17;background:var(--good);padding:.35cqw .7cqw}

/* ---------- bottom band: target card + moves ---------- */
.band{position:absolute;left:1.1cqw;right:1.1cqw;bottom:1.1cqw;height:16.6cqw;display:flex;gap:1.1cqw}
.band .fr{position:relative;height:100%}
.cardp{flex:0 0 28cqw}
.movesp{flex:1 1 0;min-width:0}
.cardin{padding:3.3cqw 2.2cqw 1.1cqw;display:flex;flex-direction:column;gap:.7cqw;overflow:hidden}
.cardin>*{flex-shrink:0}
.cardin .nm{font-size:clamp(8px,1.6cqw,16px);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardin .sp{font-size:clamp(5px,1cqw,10px);color:var(--text-muted);line-height:1.3}
.cardin .row{display:flex;flex-wrap:wrap;gap:.6cqw;align-items:center}
.cardin .note{font-size:clamp(5px,.9cqw,9px);color:var(--text-muted);line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.cardin .note.hotnote{color:#a8302a}
.slot{font-size:clamp(5px,1cqw,10px);line-height:1;padding:.6cqw .8cqw .75cqw;border:max(1px,.28cqw) dashed #8a879c;color:var(--text-muted)}
.ttag{font-size:clamp(5px,1cqw,10px);line-height:1;padding:.6cqw .8cqw .8cqw;color:#fff;
  clip-path:polygon(.28cqw 0,calc(100% - .28cqw) 0,100% .28cqw,100% calc(100% - .28cqw),calc(100% - .28cqw) 100%,.28cqw 100%,0 calc(100% - .28cqw),0 .28cqw)}
.ttag.disciplined{background:#2f62b4;box-shadow:inset 0 -.42cqw 0 #1d4588}
.ttag.jumpy{background:#c8961c;color:#2a1d05;box-shadow:inset 0 -.42cqw 0 #94690a}
.ttag.hot{background:#c13d39;box-shadow:inset 0 -.42cqw 0 #8e2622}
.ttag.rival{background:#4a3f78;box-shadow:inset 0 -.42cqw 0 #2f2654}

.movesin{padding:3.4cqw 2cqw 1.7cqw}
.hintline{position:absolute;top:.75cqw;left:11.5cqw;right:2.2cqw;font-size:clamp(5px,.9cqw,9px);line-height:1.3;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.hintline.bad{color:#a8302a}
.grid{height:100%;display:grid;grid-template-columns:1.25fr repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:.85cqw}
.b{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5cqw;text-align:center;cursor:pointer;
  font-family:var(--game);font-size:clamp(6px,1.12cqw,12px);line-height:1.35;padding:0 .4cqw;min-height:5cqw;color:var(--text);background:#ece6d2;
  box-shadow:inset 0 .28cqw 0 #fffaf0,inset 0 -.56cqw 0 #cbbf9c;
  clip-path:polygon(.42cqw 0,calc(100% - .42cqw) 0,100% .42cqw,100% calc(100% - .42cqw),calc(100% - .42cqw) 100%,.42cqw 100%,0 calc(100% - .42cqw),0 .42cqw)}
.b .c{font-size:clamp(5px,.8cqw,8px);color:var(--text-muted);line-height:1;display:flex;align-items:center;gap:.4cqw}
.b .c svg{width:1cqw;height:1cqw;fill:none;stroke:currentColor;stroke-width:2}
.b:hover,.b.on{background:#f6f0dc}
.b.on{box-shadow:inset 0 .28cqw 0 #fffaf0,inset 0 -.56cqw 0 #cbbf9c,inset 0 0 0 max(1px,.28cqw) var(--select)}
.b.main{grid-row:span 2;font-size:clamp(7px,1.3cqw,14px);color:#2a1d05;background:var(--you);box-shadow:inset 0 .28cqw 0 #ffd27a,inset 0 -.7cqw 0 var(--you-lo)}
.b.main .c{color:#5a3b00}
.b.main:hover,.b.main.on{background:#f7c25a}
.b.main.on{box-shadow:inset 0 .28cqw 0 #ffd27a,inset 0 -.7cqw 0 var(--you-lo),inset 0 0 0 max(1px,.28cqw) var(--select)}
.b.wide{grid-column:span 2}
.b.off{color:#a3a1b4;background:#f3efe3;box-shadow:inset 0 -.28cqw 0 #e2dccb;cursor:default}
.b.main.off{background:#efe2c0;color:#9a8a68}
.b.wont{color:#8f8ca3;background:#f6f2e8;box-shadow:inset 0 0 0 max(1px,.28cqw) #c9c1a8}
.b.fail{color:#a8302a;background:#fde3df;box-shadow:inset 0 .28cqw 0 #fff3f1,inset 0 -.56cqw 0 var(--fail)}
.b.later{background:transparent;box-shadow:inset 0 0 0 max(1px,.28cqw) #d8d0b8;cursor:default}   /* a move the tutorial hasn't taught yet: an empty slot */
.b.later .l,.b.later .c{visibility:hidden}
.newtag{background:var(--you);color:#2a1d05;padding:.3cqw .5cqw;box-shadow:0 0 0 max(1px,.28cqw) var(--ink-dark)}
.b.pulse{animation:pulse 1.1s steps(2) infinite}
@keyframes pulse{50%{box-shadow:inset 0 .28cqw 0 #fffaf0,inset 0 -.56cqw 0 #cbbf9c,inset 0 0 0 max(2px,.42cqw) var(--you)}}
.dim .b{opacity:.55}

/* ---------- overlay: bubbles, X, tag reveals, sold-out label ---------- */
.ovl{position:absolute;inset:0;pointer-events:none}
.fx{position:absolute;left:0;top:0;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:.6cqw}
.bub{position:relative;max-width:34cqw;width:max-content;background:var(--paper);color:var(--text);font-size:clamp(6px,1.12cqw,12px);line-height:1.6;padding:.85cqw 1.15cqw;
  box-shadow:inset 0 0 0 max(1px,.42cqw) #2a2238,inset 0 -.85cqw 0 #ece4cc;text-align:center;
  clip-path:polygon(.42cqw 0,calc(100% - .42cqw) 0,100% .42cqw,100% calc(100% - .42cqw),calc(100% - .42cqw) 100%,.42cqw 100%,0 calc(100% - .42cqw),0 .42cqw)}
.bub.fail{background:#fff4f1}
.bub.good{background:#f1fbf3}
.tail{width:1.9cqw;height:1.25cqw;margin-top:-.7cqw;background:#2a2238;clip-path:polygon(0 0,100% 0,50% 100%);position:relative}
.tagwrap{position:relative}
.fx .ttag{font-size:clamp(6px,1.25cqw,13px);padding:.75cqw 1cqw 1cqw}
.newchip{position:absolute;right:-1.4cqw;top:-1.3cqw;font-size:clamp(5px,.8cqw,8px);line-height:1;padding:.35cqw .55cqw;background:var(--you);color:#2a1d05;box-shadow:0 0 0 max(1px,.28cqw) var(--ink-dark)}
.xmark{position:absolute;width:4.2cqw;height:4.2cqw;transform:translate(-50%,-50%);animation:xflash .3s steps(2) 4}
@keyframes xflash{50%{opacity:0}}
.cutlbl{position:absolute;transform:translate(-50%,0);font-size:clamp(5px,.85cqw,9px);line-height:1;padding:.5cqw .7cqw;background:var(--fail);color:#fff;white-space:nowrap;box-shadow:0 0 0 max(1px,.28cqw) var(--ink-dark),inset 0 -.42cqw 0 var(--fail-lo)}

/* ---------- tutorial goal banner: step pips and one line, under the status bar ---------- */
.goal{left:50%;transform:translateX(-50%);top:9.9cqw;max-width:94cqw;white-space:nowrap;pointer-events:none}
.goal .fill{padding:1.1cqw 1.8cqw 1.1cqw 1.4cqw;display:flex;align-items:center;gap:1.4cqw;font-size:clamp(6px,1.12cqw,12px);line-height:1}
.goal .steps{display:flex;gap:.55cqw}
.goal .steps i{width:1.15cqw;height:1.15cqw;background:#3a3454;box-shadow:0 0 0 max(1px,.28cqw) var(--ink-dark)}
.goal .steps i.done{background:var(--good)}.goal .steps i.now{background:var(--you)}
.goal b{color:var(--you);font-weight:400}
.goal.warn .fill{color:#ffc2bb}

/* ---------- intro / results ---------- */
.over{position:absolute;inset:0;background:rgba(16,13,26,.62);display:grid;place-items:center;padding:3cqw}
.overp{position:relative;width:min(82cqw,100%);max-height:100%}
.card{padding:4.2cqw 3.6cqw 3cqw;max-height:calc(66.6cqw - 8cqw);overflow:auto}
.card h2{margin:0 0 1.4cqw;font-family:var(--game);font-weight:400;font-size:clamp(12px,2.8cqw,28px);line-height:1.2}
.card h2.win{color:#2f8a4e}.card h2.lose{color:#c13d39}
.card p{margin:0 0 1.2cqw;font-size:clamp(6px,1.2cqw,12px);line-height:1.8}
.card .got{font-size:clamp(7px,1.35cqw,14px)}
.card .near{display:inline-block;background:#ffe2a0;color:#5a3b00;padding:.4cqw .9cqw}
/* results: overall grade block, factor rows with mini grades */
.reshead{display:flex;align-items:center;gap:2.6cqw;margin-bottom:1.4cqw}
.restitle{display:flex;flex-direction:column;gap:.9cqw;min-width:0}
.restitle h2{margin:0}
.restitle .line{margin:0;font-size:clamp(6px,1.15cqw,12px);color:var(--text)}
.restitle .nexthint{margin:0;font-size:clamp(5px,.95cqw,10px);color:var(--text-muted)}
.bigg{flex:none;width:11cqw;height:11cqw;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,5.6cqw,56px);line-height:1;padding-top:.6cqw;
  box-shadow:inset 0 0 0 max(2px,.56cqw) var(--ink-dark),inset 0 -1.2cqw 0 rgba(0,0,0,.22);
  clip-path:polygon(.56cqw 0,calc(100% - .56cqw) 0,100% .56cqw,100% calc(100% - .56cqw),calc(100% - .56cqw) 100%,.56cqw 100%,0 calc(100% - .56cqw),0 .56cqw)}
.mini{width:4.6cqw;height:4cqw;display:flex;align-items:center;justify-content:center;font-size:clamp(7px,1.6cqw,16px);line-height:1;padding-top:.2cqw;
  box-shadow:inset 0 0 0 max(1px,.42cqw) var(--ink-dark),inset 0 -.8cqw 0 rgba(0,0,0,.2);
  clip-path:polygon(.42cqw 0,calc(100% - .42cqw) 0,100% .42cqw,100% calc(100% - .42cqw),calc(100% - .42cqw) 100%,.42cqw 100%,0 calc(100% - .42cqw),0 .42cqw)}
.g-s{background:var(--you);color:#2a1d05}
.g-a{background:var(--good);color:#0f2a17}
.g-b{background:#7aa6ec;color:#0b1a33}
.g-c{background:#c9c4dd;color:#2c2a3e}
.g-f{background:var(--fail);color:#fff}
.grows{display:flex;flex-direction:column}
.grows .grow{display:grid;grid-template-columns:16cqw minmax(0,1fr) auto;align-items:center;gap:1.6cqw;padding:.9cqw 0}
.grows .gk{font-size:clamp(5px,1.05cqw,11px);color:var(--text-muted)}
.grows .gv{font-size:clamp(6px,1.4cqw,14px);color:var(--text)}
.grows .gv span{font-size:clamp(5px,1cqw,10px);color:var(--text-muted)}
.who{margin-top:1.4cqw}
.who summary{cursor:pointer;font-size:clamp(5px,1cqw,10px);color:var(--text-muted);padding:.6cqw 0}
.ticks{list-style:none;margin:0 0 1.2cqw;padding:0;display:flex;flex-direction:column;gap:.9cqw}   /* tutorial end card */
.ticks li{display:flex;gap:1.4cqw;align-items:center;font-size:clamp(6px,1.15cqw,12px);line-height:1.4}
.ticks li i{flex:none;width:2.4cqw;height:2.4cqw;background:var(--good);box-shadow:inset 0 0 0 max(1px,.28cqw) var(--ink-dark);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:clamp(5px,1cqw,10px);color:#0f2a17}
.card .meta{font-size:clamp(5px,1cqw,10px);color:var(--text-muted)}
.cast{list-style:none;margin:1cqw 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.3cqw 3cqw;font-size:clamp(5px,.95cqw,10px);line-height:1.6}
.cast li{display:flex;justify-content:space-between;gap:1cqw;border-bottom:max(1px,.28cqw) dashed var(--rule);padding-block:.4cqw}
.cast li span:last-child{color:var(--text-muted);text-align:right}
.btnrow{display:flex;gap:1.4cqw;flex-wrap:wrap;justify-content:flex-end;margin-top:1.6cqw}
.card button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:max(36px,5.4cqw);padding:0 2.6cqw;cursor:pointer;
  font-family:var(--game);font-size:clamp(7px,1.3cqw,13px);color:#2a1d05;background:var(--you);box-shadow:inset 0 0 0 max(1px,.42cqw) var(--ink-dark),inset 0 -.85cqw 0 var(--you-lo);
  clip-path:polygon(.42cqw 0,calc(100% - .42cqw) 0,100% .42cqw,100% calc(100% - .42cqw),calc(100% - .42cqw) 100%,.42cqw 100%,0 calc(100% - .42cqw),0 .42cqw)}
.card button.alt{background:#e7e4f2;color:var(--text);box-shadow:inset 0 0 0 max(1px,.42cqw) var(--ink-dark),inset 0 -.85cqw 0 #b9b4cf}
.card button:focus-visible{outline:none;box-shadow:inset 0 0 0 max(2px,.56cqw) var(--select),inset 0 -.85cqw 0 var(--you-lo)}

/* ---------- below the screen ---------- */
.timer{position:relative;height:16px;background:var(--panel);border:2px solid var(--line);overflow:hidden}
.timer i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--you)}
.timer i.low{background:var(--fail)}
.timer i.free{background:var(--good)}
.timer span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--game);font-size:7px;color:var(--ink);text-shadow:0 1px 0 #000}
.keys{margin:0;font-size:12.5px;color:var(--muted);line-height:1.9}
.keys kbd{font-family:var(--game);font-size:8px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;padding:1px 4px}
.below{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:860px){.below{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.panel{background:var(--panel);border:2px solid var(--line);padding:10px 12px;font-size:13.5px;line-height:1.45;min-width:0}
.panel summary{cursor:pointer;font-family:var(--game);font-size:9px;letter-spacing:.04em;padding:4px 0}
.log{display:flex;flex-direction:column;gap:3px;max-height:220px;overflow:auto;margin-top:6px}
.log div{color:var(--muted)}
.log div:last-child{color:var(--ink)}
.log .good{color:var(--good)}.log .bad{color:#ff8a83}.log .warn{color:var(--you)}
.help h5{margin:12px 0 2px;font-family:var(--game);font-size:8px;color:var(--you);font-weight:400;letter-spacing:.04em}
.help p,.help ul{margin:2px 0;color:var(--muted)}
.help ul{padding-left:18px}
.help b{color:var(--ink)}

@media (prefers-reduced-motion:reduce){.b.pulse,.xmark{animation:none}}