/* Layout: a phone-width column. Board = 3 cells across, 4 gear rows down.
   Deliberately single-theme: this mocks the Sunset skin the live site ships,
   so the palette is Coroplay's, not the viewer's. */
/* :root is supplied by app.css, per skin */
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--display);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:20px 40px;
}
.wrap{max-width:430px;margin:0 auto}

.top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.brand{font-weight:700;font-size:19px;letter-spacing:-.01em}
.brand span{color:var(--accent)}
.score{display:flex;align-items:center;gap:9px}
.scorebox{position:relative;background:var(--ink);color:var(--bg);border-radius:11px;
  padding:5px 13px 6px;text-align:right;min-width:88px}
.scorebox i{display:block;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;opacity:.62;line-height:1}
.scorebox b{display:block;font-size:23px;font-weight:700;line-height:1.08;
  font-variant-numeric:tabular-nums}
.pop{position:absolute;right:11px;top:3px;font-size:17px;font-weight:700;color:var(--good);
  pointer-events:none;animation:pop 1s ease-out forwards;text-shadow:0 1px 0 var(--card)}
@keyframes pop{
  0%{opacity:0;transform:translateY(6px) scale(.8)}
  18%{opacity:1;transform:translateY(-6px) scale(1.14)}
  70%{opacity:1;transform:translateY(-26px) scale(1)}
  100%{opacity:0;transform:translateY(-40px) scale(1)}}
.scorebox.bump{animation:bump .42s ease-out}
@keyframes bump{40%{transform:scale(1.11)}}

/* the banner that announces the double when a player lands on it */
.worth{display:block;background:var(--g4);color:var(--on-ink);border-radius:10px;
  padding:11px 13px;margin-bottom:12px;animation:slam .5s cubic-bezier(.2,1.5,.4,1)}
.worth u{display:block;text-decoration:none;font-size:19px;font-weight:700;letter-spacing:.07em;
  line-height:1.1}
.worth i{display:block;font-style:normal;font-size:12px;font-weight:600;opacity:.88;margin-top:2px}
@keyframes slam{
  0%{opacity:0;transform:scale(.55) rotate(-4deg)}
  55%{opacity:1;transform:scale(1.07) rotate(1deg)}
  100%{opacity:1;transform:none}}

/* big verdict */
/* ---- player setup ---- */
.setup{background:var(--card);border:2px solid var(--sunk);border-radius:13px;
  padding:16px;margin-bottom:13px}
.stitle{margin:0 0 3px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.ssub{margin:0 0 13px;font-size:13px;color:var(--muted);line-height:1.5}
.modes{display:flex;gap:8px;margin-bottom:4px}
.modes button{flex:1 1 0;border:2px solid var(--ink);background:transparent;color:var(--ink);
  border-radius:10px;padding:11px 9px;font:600 14px var(--display);cursor:pointer;line-height:1.3}
.modes button small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:2px}
.modes button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.modes button[aria-pressed="true"] small{color:var(--bg);opacity:.72}

.addrow{display:flex;gap:7px;margin:13px 0 0}
.addrow input{flex:1 1 auto;min-width:0;border:2px solid var(--sunk);border-radius:9px;
  padding:10px 11px;font:600 15px var(--display);background:var(--bg);color:var(--ink)}
.addrow input:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.addrow button{flex:0 0 auto;border:2px solid var(--ink);background:var(--ink);color:var(--bg);
  border-radius:9px;padding:10px 15px;font:600 14px var(--display);cursor:pointer}
.plist{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.plist li{display:flex;align-items:center;gap:7px;background:var(--sunk);border-radius:999px;
  padding:6px 7px 6px 13px;font-size:14px;font-weight:600}
.plist button{border:0;background:var(--faint);color:var(--bg);width:20px;height:20px;
  border-radius:50%;font-size:12px;line-height:1;cursor:pointer;padding:0}
.turns{margin:11px 0 0;font-size:12.5px;color:var(--faint)}
.turns b{color:var(--ink)}
.turns.warn b{color:var(--accent)}

/* ---- per-player score chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chip{display:flex;align-items:baseline;gap:7px;border:2px solid var(--sunk);background:var(--card);
  border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;position:relative}
.chip b{font-size:16px;font-variant-numeric:tabular-nums}
.chip.now{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.chip.lead b{color:var(--good)}
.chip.now.lead b{color:var(--bg)}
.chip .cpop{position:absolute;right:9px;top:-3px;font-size:14px;font-weight:700;color:var(--good);
  pointer-events:none;animation:pop 1s ease-out forwards}
.chip.bump{animation:bump .42s ease-out}
.whose{margin:0 0 11px;font-size:14px;color:var(--muted)}
.whose b{color:var(--ink);font-size:17px}

/* ---- standings ---- */
.stand{list-style:none;margin:13px 0 0;padding:0;text-align:left}
.stand li{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;
  font-size:15px;font-weight:600;margin-bottom:5px;background:var(--bg)}
.stand li.win{background:var(--good);color:var(--on-ink)}
.stand .rk{flex:0 0 auto;width:21px;font-size:12px;color:var(--faint)}
.stand li.win .rk{color:var(--on-ink);opacity:.8}
.stand .nm{flex:1 1 auto;min-width:0}
.stand .sc{flex:0 0 auto;font-variant-numeric:tabular-nums}

.done{background:var(--card);border:2px solid var(--sunk);border-radius:13px;
  padding:17px 16px;margin-top:13px;text-align:center}
.dtitle{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.dscore{margin:3px 0 13px;font-size:15px;color:var(--muted)}
.dscore b{font-size:33px;font-weight:700;color:var(--good);display:block;
  font-variant-numeric:tabular-nums;line-height:1.15}
.dopts{display:flex;flex-direction:column;gap:7px}
.dopts .btn{width:100%}
.btn.danger{border-color:var(--accent);color:var(--accent)}
.btn.danger:hover{background:var(--accent);color:var(--on-ink)}
.dnote{margin:12px 0 0;font-size:12px;color:var(--faint);line-height:1.5}

.verdict{margin:14px 0 0;font-size:31px;font-weight:700;letter-spacing:.01em;line-height:1.1;
  color:var(--good);animation:vin .3s ease-out}
.verdict.no{font-size:19px;color:var(--accent)}
@keyframes vin{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

.note{font-size:12.5px;color:var(--muted);line-height:1.45;margin:0 0 16px}

/* ---- breadcrumbs: on the round screen this is the ONLY way out, so it has to
   read as tappable, not as a logo ---- */
.crumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:30px}
.crumbs button{border:0;background:transparent;padding:4px 2px;cursor:pointer;
  font:700 15px var(--display);color:var(--accent);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:2px}
.crumbs button:hover{color:var(--ink)}
.crumbs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
.crumbs b{font-size:15px;font-weight:700;color:var(--ink)}
.crumbs span{color:var(--faint);font-size:14px}

/* ---- screen 1: Coroplay ---- */
.hero{text-align:center;padding:16px 0 22px}
.logo{font-size:38px;font-weight:700;margin:0;letter-spacing:-.02em}
.tag{color:var(--muted);font-size:15px;margin:5px 0 0}
.fams{display:flex;flex-direction:column;gap:10px}
.fam{display:block;width:100%;text-align:left;border:2px solid var(--sunk);
  background:var(--card);border-radius:14px;padding:16px;cursor:pointer;font-family:var(--display)}
.fam:hover{border-color:var(--ink)}
.fam b{display:block;font-size:21px;color:var(--ink);margin-bottom:3px}
.fam small{display:block;font-size:13.5px;color:var(--muted);line-height:1.5}
.fam i{display:inline-block;font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:9px}
.fam.soon{opacity:.5;cursor:default}
.fam.soon:hover{border-color:var(--sunk)}

/* ---- screen 2: the Numbers landing ---- */
.scTitle{font-size:27px;margin:4px 0 2px;letter-spacing:-.01em}
.scSub{color:var(--muted);font-size:14px;margin:0 0 20px}
/* the prose under the board - for a first-time visitor and for search, and
   quiet enough that it never competes with the board above it. */
.nprose{margin:30px auto 0;padding-top:20px;border-top:2px solid var(--sunk);max-width:430px}
.nprose h2{font-size:18px;margin:0 0 10px;color:var(--ink);letter-spacing:-.01em}
.nprose p{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 11px;max-width:62ch}
.nprose p:last-child{margin-bottom:0}
/* The category picker IS a board - Rick's son's idea: "the category choices should
   also look like a Jeopardy board, and each cell would have the category." Two
   columns of cells styled like the game's cells; tap one and the round setup
   (gears, clock, who's playing) appears beneath it. */
/* 3 x 3 since tier 3 landed (24 Oct). Two across orphaned the seventh. */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:20px}
.cat{min-width:0;aspect-ratio:1.3;border:2px solid var(--tv-bezel);border-radius:8px;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px),
    linear-gradient(152deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.04) 34%,rgba(255,255,255,0) 56%),
    linear-gradient(177deg,var(--tv-top) 0%,var(--tv-bot) 66%);
  color:var(--tv-ink);cursor:pointer;padding:8px 6px;
  display:grid;place-content:center;text-align:center;gap:3px;
  font-family:var(--display);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22),
    inset 0 -5px 12px rgba(0,0,0,.5),
    0 2px 0 var(--tv-bot),
    0 3px 7px rgba(0,0,0,.2);
  transition:transform .09s ease, filter .15s ease}
.cat:hover{filter:brightness(1.13)}
.cat:active{transform:scale(.96)}
.cat:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cat[aria-pressed="true"]{
  border-color:var(--accent);filter:brightness(1.2);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.3),
    inset 0 -5px 12px rgba(0,0,0,.42),
    0 0 0 3px var(--accent),
    0 3px 8px rgba(0,0,0,.24);
}
.cat b{display:block;font-size:14px;line-height:1.15;color:var(--tv-ink);
  text-shadow:0 0 12px rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.7)}
.setupfor{font:700 20px var(--display);color:var(--ink);margin:4px 0 14px}
.setupfor small{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:3px;line-height:1.45}
.setupfor i{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.cat em{display:block;font-style:normal;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tv-dim)}
.gearpick{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
/* the one-line summary of what you are about to play, and the quiet link that
   opens the controls. Both exist so a first-time player presses one button. */
.setsum{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0 0 6px}
.setsum i{font-style:normal;opacity:.45;padding:0 2px}
.linky{background:none;border:0;padding:4px 0;margin:0 0 14px;cursor:pointer;
  font:600 13px var(--display);color:var(--accent);text-decoration:underline;
  text-underline-offset:3px}
.linky:hover{opacity:.78}
.linky:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
#setMore{margin-bottom:4px}
.levelpick{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
/* one choice, not four - so a radio, not a checkbox */
#levelpick .tick{border-radius:50%}
.gp{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:2px solid var(--sunk);background:var(--card);border-radius:11px;
  padding:11px 13px;cursor:pointer;font-family:var(--display)}
.gp:hover{border-color:var(--faint)}
.gp[aria-pressed="true"]{border-color:var(--ink)}
.gp .tick{flex:0 0 auto;width:21px;height:21px;border-radius:6px;border:2px solid var(--faint);
  display:grid;place-items:center;font-size:12px;color:transparent}
.gp[aria-pressed="true"] .tick{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.gp .gname{flex:1 1 auto;font-size:15px;font-weight:600;color:var(--ink)}
.gp .gval{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--faint);
  font-variant-numeric:tabular-nums}
.gp[aria-pressed="false"] .gname{color:var(--muted)}
.quick{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 17px}
.quick button{border:2px solid var(--sunk);background:transparent;color:var(--muted);
  border-radius:999px;padding:6px 12px;font:600 12px var(--display);cursor:pointer}
.quick button:hover{border-color:var(--ink);color:var(--ink)}
.btn.big{width:100%;padding:15px;font-size:16px;margin-top:4px}
.carry{background:var(--sunk);border-radius:12px;padding:13px 15px;margin-bottom:17px}
.carry p{margin:0 0 7px;font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.carry .row{display:flex;justify-content:space-between;font-size:14.5px;font-weight:600;
  padding:3px 0}
.carry .row span:last-child{font-variant-numeric:tabular-nums}
.switch{display:flex;gap:6px;background:var(--sunk);padding:4px;border-radius:11px;margin-bottom:18px}
.switch button{
  flex:1;min-width:0;border:0;border-radius:8px;background:transparent;
  font:600 13px var(--display);color:var(--muted);padding:9px 4px;cursor:pointer;
}
.switch button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(59,31,58,.14)}
.switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.heads{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:9px}
.heads div{
  min-width:0;text-align:center;font-weight:600;font-size:11.5px;line-height:1.25;
  color:var(--ink);padding:0 2px;hyphens:auto;
}

.gear{margin-bottom:11px}
.gearlab{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;
}
.pip{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
/* Each cell is a small CRT in a video wall - bezel, screen lit from above,
   glass sheen, scanlines, and the point value glowing in its gear's colour.
   The sheen and scanlines are BACKGROUND LAYERS, not pseudo-elements, so they
   sit behind the number instead of washing over it, and there is no extra box
   for a stray [hidden] or display rule to fight with. Every colour is derived
   from the skin by tvVars() in src/skins.mjs; nothing here is per-theme. */
.cell{
  min-width:0;aspect-ratio:1.45;border:2px solid var(--tv-bezel);border-radius:8px;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px),
    linear-gradient(152deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.04) 34%,rgba(255,255,255,0) 56%),
    linear-gradient(177deg,var(--tv-top) 0%,var(--tv-bot) 66%);
  color:var(--lit,var(--g1-lit));
  font:700 19px var(--display);font-variant-numeric:tabular-nums;
  text-shadow:0 0 13px currentColor,0 1px 0 rgba(0,0,0,.7);
  cursor:pointer;display:grid;place-items:center;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22),
    inset 0 -5px 12px rgba(0,0,0,.5),
    0 2px 0 var(--tv-bot),
    0 3px 7px rgba(0,0,0,.2);
  transition:transform .09s ease, filter .15s ease;
}
.cell:hover{filter:brightness(1.13)}
.cell:active{transform:scale(.96)}
.cell:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Played = the screen is off. NOT opacity: on a light skin that blends the
   cell toward the page and a dead screen comes out as a pale grey blob. A
   brightness filter keeps it dark on every background, and dropping the top
   highlight is what actually reads as "powered down". */
.cell[data-done="1"]{
  color:transparent;text-shadow:none;cursor:default;
  filter:brightness(.6) saturate(.7);
  box-shadow:inset 0 2px 9px rgba(0,0,0,.6);
}
.cell[data-done="1"]:hover{filter:none}
.cell[data-done="1"]:active{transform:none}
/* the double cell is INDISTINGUISHABLE until someone lands on it.
   .dbl is applied only after it has been played, so the board remembers -
   and that one screen stays lit when every other has gone dark. */
.cell.dbl[data-done="1"]{
  filter:none;color:var(--g4-lit);
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px),
    linear-gradient(152deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.04) 34%,rgba(255,255,255,0) 56%),
    linear-gradient(177deg,var(--tv-top) 0%,var(--tv-bot) 66%);
  text-shadow:0 0 13px currentColor,0 1px 0 rgba(0,0,0,.7);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.22),inset 0 -5px 12px rgba(0,0,0,.45);
}

/* question view */
.qv{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:18px 16px 16px}
.qtag{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px;margin-bottom:12px}
.q{font-size:20px;font-weight:600;line-height:1.35;margin:0 0 18px;text-wrap:balance}
.step{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;margin:0 0 10px;animation:in .22s ease}
.step .num{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--sunk);color:var(--ink);
  font-size:11.5px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.step b{color:var(--accent)}
.step.ask{font-weight:600}
.step.ask .num{background:var(--accent);color:var(--on-ink)}
.step.ask>span:last-child{color:var(--ink)}
.vz{margin:9px 0 2px 31px}

/* operation chain: value -op-> value -op-> value */
.chain{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.chain .v{background:var(--sunk);border-radius:7px;padding:5px 9px;font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.chain .v.end{background:var(--good);color:var(--on-ink)}
.chain .op{display:flex;flex-direction:column;align-items:center;min-width:42px}
.chain .op i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--accent);white-space:nowrap}
.chain .op u{text-decoration:none;color:var(--faint);line-height:.8;font-size:15px}

/* side-by-side: scale both offers to a common count, compare the money */
.vs{display:grid;grid-template-columns:auto auto auto;gap:5px 7px;align-items:center;width:max-content}
.vs .cap{grid-column:1/-1;font-size:10.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px}
.vs .lab{background:var(--sunk);border-radius:7px;padding:5px 9px;font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.vs .mul{font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap;text-align:center}
.vs .res{border:2px solid var(--sunk);border-radius:7px;padding:4px 9px;font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.vs .res.win{background:var(--good);border-color:var(--good);color:var(--on-ink)}

/* open number line (Ontario glossary headword; "empty number line" is the older name) */
.nline{width:100%;overflow-x:auto}
.nline svg{display:block;min-width:270px;width:100%;height:auto}
@keyframes in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ans{border-top:2px dashed var(--sunk);padding-top:14px;margin-top:4px}
.ansval{font-size:27px;font-weight:700;color:var(--good);margin:0;font-variant-numeric:tabular-nums}
[hidden]{display:none !important}   /* .try is display:flex, which beat the hidden attribute: the typed box showed on tap-to-choose cells */
.try{display:flex;gap:7px;margin-top:16px}
.try input{
  flex:1 1 auto;min-width:0;border:2px solid var(--ink);border-radius:9px;
  padding:11px 12px;font:600 16px var(--display);background:var(--card);color:var(--ink);
}
.try input:focus{outline:3px solid var(--accent);outline-offset:1px}
.try input.wrong{border-color:var(--accent);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.try button{flex:0 0 auto;border:2px solid var(--accent);background:var(--accent);color:var(--on-ink);
  border-radius:9px;padding:11px 16px;font:600 14px var(--display);cursor:pointer}
.opts{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.opt{border:2px solid var(--ink);background:var(--card);border-radius:9px;padding:12px 13px;
  font:600 15px var(--display);color:var(--ink);cursor:pointer;text-align:left;
  font-variant-numeric:tabular-nums}
.opt:hover:not(:disabled){background:var(--sunk)}
.opt.no{opacity:.4;text-decoration:line-through;cursor:default}
.opt.yes{background:var(--good);border-color:var(--good);color:var(--on-ink)}
.sndbtn{border:0;background:transparent;font-size:17px;cursor:pointer;padding:2px 4px;line-height:1}
.top{position:relative}
/* Text on an INK background is the page background colour, not --on-ink: a skin's
   --on-ink is "text on the accent", and in Arcade both ink and on-ink are black. */
.skinbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0}
.skinchip{display:block;width:19px;height:19px;border-radius:50%;box-sizing:border-box;border:1.5px solid var(--ink);position:relative;
  background:conic-gradient(var(--c1,var(--g1)) 0 25%,var(--c2,var(--g2)) 25% 50%,var(--c3,var(--g3)) 50% 75%,var(--c4,var(--g4)) 75% 100%);box-shadow:0 0 0 2px var(--sbg,var(--bg))}
.skinpop{position:absolute;z-index:60;top:40px;right:0;width:min(300px,calc(100vw - 20px));background:var(--card);border:2px solid var(--ink);border-radius:13px;box-shadow:0 10px 26px rgba(0,0,0,.22);padding:11px 13px 5px}
.skinpop-t{font:700 15px var(--display);color:var(--accent);margin:0 0 6px}
.skinrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:10px 6px;padding:4px 2px 8px}
.skin{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:var(--ink);text-align:center}
.skin .skinchip{width:44px;height:44px;margin:0 auto 5px;border-width:2px;box-shadow:0 0 0 3px var(--sbg)}
.skin .skinchip::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--sbg);border:1.5px solid var(--ink)}
.skin[aria-pressed="true"] .skinchip{box-shadow:0 0 0 3px var(--sbg),0 0 0 6px var(--accent)}
.skin-n{display:block;font-size:10.5px;line-height:1.2;font-weight:700}
.sndbtn[aria-pressed="false"]{opacity:.32}
.sndbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nudge{font-size:13px;color:var(--muted);margin:9px 0 0;min-height:1px}
.nudge.hit{color:var(--good);font-weight:600}
.btns{display:flex;gap:8px;margin-top:14px}
.btn{
  flex:1;min-width:0;border:2px solid var(--ink);border-radius:9px;padding:11px 8px;
  font:600 14px var(--display);cursor:pointer;background:var(--card);color:var(--ink);
}
.btn.filled{background:var(--accent);border-color:var(--accent);color:var(--on-ink)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.mic{display:flex;align-items:center;gap:10px;margin:9px 0 2px}
#micBtn{font:600 15px/1 inherit;padding:10px 15px;border-radius:11px;cursor:pointer;
  border:2px solid var(--ink);background:var(--card);color:var(--ink)}
#micBtn:active{transform:translateY(1px)}
#micBtn[data-on="1"]{background:var(--accent);color:var(--on-ink);border-color:var(--accent)}
#micBtn[disabled]{opacity:.45;cursor:default}
/* currentColor rather than a literal, so the pulse follows the theme */
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 9px transparent}}
#micBtn[data-on="1"]{animation:micpulse 1.3s ease-out infinite}
.micmsg{font-size:13px;opacity:.75;min-height:1.2em}
.micmsg b{font-weight:700;opacity:1}
.cat .cbest{display:block;font-style:normal;font-size:11.5px;font-weight:700;color:var(--g2-lit);margin-top:2px}
.clock{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:8px;
  background:var(--sunk);color:var(--ink)}
.clock.low{background:var(--accent);color:var(--on-ink)}
.chbar{border:2px solid var(--accent);background:var(--card);border-radius:12px;padding:9px 12px;margin:0 0 12px;font-size:13.5px;line-height:1.4}
.chbar b{color:var(--accent);font-family:var(--display);letter-spacing:.06em;text-transform:uppercase;font-size:11px;display:block;margin-bottom:2px}
.chbanner{border:2px solid var(--accent);background:var(--card);border-radius:14px;padding:14px 16px;margin:0 0 18px;
  display:flex;flex-direction:column;gap:6px}
.chbanner b{font-size:18px}
.chbanner span{font-size:14px;color:var(--muted)}
.chbanner .chbeat{font-size:16px;color:var(--ink)}
.chbanner .chbeat b{font-size:22px;color:var(--accent)}
.chbanner .btn{margin-top:6px}
.best{margin:6px 0 2px;font-weight:700;color:var(--good)}
.chdone{margin:10px 0 6px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.chvs{display:flex;gap:18px;align-items:center;margin:4px 0 0;font-size:14px;color:var(--muted)}
.chvs span{display:flex;flex-direction:column;align-items:center}
.chvs b{font-size:26px;color:var(--ink)}
.chvs .vs{font-size:13px}
.chverdict{font-size:20px;font-weight:700;margin:0;color:var(--accent)}
.chready,.chnote{font-size:14px;margin:0;color:var(--muted)}
.chready b{color:var(--ink)}
.chlink{width:100%;margin:0}
.chlink input{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:8px 10px;border:2px solid var(--sunk);
  border-radius:9px;background:var(--card);color:var(--ink)}

.crumbs a{color:inherit;text-decoration:none}.crumbs a:hover{text-decoration:underline}