/* Edge Lab · After Hours. Base components: desks, cards, dice, chips, screens. */
:root{
  --bg:#050a08; --surface:rgba(10,17,14,.78); --sunk:rgba(255,255,255,.055); --ink:#efe8d8; --muted:#97a69b; --line:rgba(239,232,216,.13);
  --felt:#4fd39a; --felt-soft:rgba(79,211,154,.14); --bid:#5f8fff; --ask:#ff5f52; --gold:#dcb65e;
  --table:#135a42; --table-2:#08281d; --table-ink:#eef3ea; --rail:#3e2614; --screen:#03070a; --screen-ink:#dbeee4; --screen-dim:#6e8a7e; --up:#4fe0a2; --down:#ff7566; --scr-bid:#8fb2ff; --scr-ask:#ff9d8e; --paper:#f5f0e3; --pip:#141414; --card-red:#b8242e; --cardback:#5e1019;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(48px,calc(env(safe-area-inset-right,0px) + 48px))}
.wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;padding-block:32px 80px}
@media (max-width:900px){.wrap{grid-template-columns:minmax(0,1fr);gap:24px}}
nav.rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 20px);align-self:start;max-height:calc(100vh - 40px);overflow:auto;font-family:var(--f-display);font-size:14px}
@media (max-width:900px){nav.rail{position:static;max-height:none;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface)}}
nav.rail h2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:18px 0 6px;font-weight:600}
nav.rail a{display:flex;justify-content:space-between;gap:8px;color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:1px dotted var(--line)}
nav.rail a:hover{color:var(--felt)}
nav.rail a .tick{color:var(--felt);font-family:var(--f-mono);font-size:12px}
.prog{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-top:4px}
.bar{height:6px;background:var(--sunk);border-radius:3px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--felt);width:0}

main{min-width:0}
header.hero{border-bottom:2px solid var(--ink);padding-bottom:22px;margin-bottom:28px}
.eyebrow{font-family:var(--f-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--felt);font-weight:700}
h1{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:clamp(40px,7vw,76px);line-height:.95;margin:8px 0 14px;letter-spacing:-.02em;text-wrap:balance}
h1 em{font-style:normal;color:var(--felt)}
.lede{font-size:19px;max-width:62ch;color:var(--ink)}
.ticker{font-family:var(--f-mono);font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px}
.ticker b{color:var(--ink)}

.part{margin-top:64px}
.part-head{display:flex;align-items:baseline;gap:14px;border-top:2px solid var(--ink);padding-top:10px}
.part-head span{font-family:var(--f-mono);color:var(--muted);font-size:13px}
.part-head h2{font-family:var(--f-display);font-stretch:112%;font-size:30px;margin:0;font-weight:800;text-wrap:balance}
section.mod{margin-top:40px;scroll-margin-top:20px}
section.mod>h3{font-family:var(--f-display);font-stretch:105%;font-size:24px;margin:0 0 6px;font-weight:750;text-wrap:balance}
.meta{font-family:var(--f-mono);font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px}
.meta .tag{border:1px solid var(--line);padding:1px 7px;border-radius:20px}
p{max-width:66ch;margin:.6em 0}
.mono,code{font-family:var(--f-mono);font-size:.88em}
.formula{font-family:var(--f-mono);background:var(--sunk);padding:10px 14px;border-radius:6px;display:inline-block;margin:6px 0;font-size:15px;max-width:100%;overflow-x:auto}
ul.steps{padding-left:1.2em;max-width:66ch}ul.steps li{margin:.25em 0}

.tip{border-left:4px solid var(--gold);background:var(--surface);padding:10px 14px;margin:14px 0;max-width:66ch;border-radius:0 6px 6px 0}
.tip b.lbl{font-family:var(--f-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:2px}
.tip ul{margin:4px 0;padding-left:1.1em}

.desk{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;margin:16px 0;min-width:0}
.desk-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--f-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
label{font-family:var(--f-display);font-size:13px;color:var(--muted)}
input[type=number],input[type=text],select{font-family:var(--f-mono);font-size:15px;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);width:110px}
input[type=text]{width:150px}
input[type=range]{accent-color:var(--felt);width:180px;max-width:100%}
button{font-family:var(--f-display);font-weight:650;font-size:14px;padding:8px 14px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
button:hover{border-color:var(--ink)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--felt);outline-offset:2px}
button.go{background:var(--felt);color:var(--surface);border-color:var(--felt)}
button.buy{background:var(--bid);color:#fff;border-color:var(--bid)}
button.sell{background:var(--ask);color:#fff;border-color:var(--ask)}
button.done-btn{font-size:12px;padding:4px 10px}
button.done-btn[aria-pressed="true"]{background:var(--felt-soft);border-color:var(--felt);color:var(--felt)}
.quote{font-family:var(--f-mono);font-size:26px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.quote .b{color:var(--bid)}.quote .a{color:var(--ask)}
.quote small{font-size:12px;color:var(--muted)}
.stat{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.stats{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--f-mono);font-size:14px;font-variant-numeric:tabular-nums}
.stats b{display:block;font-size:20px;color:var(--ink)}
.stats span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.out{font-family:var(--f-mono);font-size:14px;background:var(--sunk);border-radius:6px;padding:10px 12px;margin-top:10px;white-space:pre-wrap;min-height:2.6em;overflow-x:auto}
.good{color:var(--felt)}.bad{color:var(--ask)}.warn{color:var(--gold)}
.card{display:inline-flex;align-items:center;justify-content:center;width:44px;height:62px;border:1px solid var(--line);border-radius:6px;background:var(--bg);font-family:var(--f-mono);font-size:18px;font-weight:600;margin:2px}
.card.r{color:var(--ask)}.card.back{background:repeating-linear-gradient(45deg,var(--felt-soft),var(--felt-soft) 4px,var(--sunk) 4px,var(--sunk) 8px);color:transparent}
canvas{width:100%;max-width:100%;height:auto;display:block;background:var(--bg);border-radius:6px}
.tbl{overflow-x:auto}
table{border-collapse:collapse;font-size:14px;min-width:100%}
th,td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
th{font-family:var(--f-display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
td.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}
.sites{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.site{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--surface)}
.site a{font-family:var(--f-display);font-weight:700;color:var(--felt);text-decoration:none;font-size:16px}
.site p{font-size:15px;margin:.3em 0}
.site .kind{font-family:var(--f-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
details.deep{border:1px solid var(--line);border-radius:8px;background:var(--surface);margin:16px 0;max-width:78ch}
details.deep>summary{cursor:pointer;padding:11px 14px;font-family:var(--f-display);font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:10px}
details.deep>summary::-webkit-details-marker{display:none}
details.deep>summary::after{content:"+";color:var(--felt);font-family:var(--f-mono)}
details.deep[open]>summary::after{content:"−"}
.deep-body{padding:0 14px 14px;min-width:0}
.deep h4{font-family:var(--f-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--felt);margin:18px 0 4px;font-weight:700}
table.sym td:first-child{font-family:var(--f-mono);white-space:nowrap;color:var(--felt);font-weight:600;width:1%}
table.sym td{font-size:15px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--f-mono);font-size:12px;color:var(--muted);margin:6px 0}
.legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.scrub{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10vh);bottom:calc(env(safe-area-inset-bottom,0px) + 10vh);right:calc(env(safe-area-inset-right,0px) + 8px);width:28px;z-index:20;touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none}
.scrub:focus-visible{outline:2px solid var(--felt);outline-offset:4px;border-radius:14px}
.scrub-track{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:var(--line);border-radius:2px}
.scrub-fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--felt);border-radius:2px}
.scrub-mk{position:absolute;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--surface);border:2px solid var(--line);transition:transform .15s}
.scrub-mk.part{width:12px;height:12px;margin:-6px 0 0 -6px;border-color:var(--muted);border-radius:3px}
.scrub-mk.passed{border-color:var(--felt)}
.scrub-mk.done{background:var(--felt);border-color:var(--felt)}
.scrub-mk.cur{transform:scale(1.5)}
.scrub-thumb{position:absolute;left:50%;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--felt);box-shadow:0 0 0 3px var(--bg)}
.scrub-label,.scrub-tip{position:absolute;right:30px;transform:translateY(-50%);white-space:nowrap;font-family:var(--f-display);font-size:12px;font-weight:650;padding:4px 9px;border-radius:5px;pointer-events:none;transition:opacity .2s}
.scrub-label{top:50%;background:var(--ink);color:var(--bg);opacity:0}
.scrub-label b{font-family:var(--f-mono);font-weight:600;margin-right:6px;opacity:.75}
.scrub-tip{background:var(--surface);color:var(--ink);border:1px solid var(--line);opacity:0}
.scrub.show .scrub-label,.scrub:focus-visible .scrub-label{opacity:1}
.scrub.hover:not(.drag) .scrub-tip{opacity:1}
@media (hover:none){.scrub-tip{display:none}}
@media (prefers-reduced-motion:reduce){.scrub-mk,.scrub-label,.scrub-tip{transition:none}}
.snd{margin-top:10px;font-size:12px;padding:4px 10px}
.snd[aria-pressed="true"]{border-color:var(--felt);color:var(--felt)}
.small{font-size:12px}
.duo{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;margin:10px 0}
.mm{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px;margin:10px 0}
@media (max-width:680px){.duo,.mm{grid-template-columns:minmax(0,1fr)}}
.scene{position:relative;background:radial-gradient(ellipse at 50% 30%,var(--table),var(--table-2));color:var(--table-ink);border-radius:12px;padding:14px 16px;min-height:120px;overflow:hidden;min-width:0}
.scene .lbl,.screen .dim.lbl{font-family:var(--f-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.scene-q{font-size:17px;font-weight:600;margin:4px 0 8px}
.items{min-height:58px;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.settle{margin-top:8px;font-family:var(--f-mono);font-size:14px;min-height:1.5em}
.screen{position:relative;background:var(--screen);color:var(--screen-ink);border-radius:10px;padding:12px 14px;font-family:var(--f-mono);overflow:hidden;min-width:0}
.screen .dim{color:var(--screen-dim)}.screen .up{color:var(--up)}.screen .dn{color:var(--down)}
.bigq{font-size:30px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin:6px 0;font-variant-numeric:tabular-nums}
.bidc{color:var(--scr-bid)}.askc{color:var(--scr-ask)}
.screen .timer{background:rgba(255,255,255,.1)}
.timer{height:5px;background:var(--sunk);border-radius:3px;overflow:hidden;margin:8px 0 2px}
.timer i{display:block;height:100%;background:var(--gold);transform-origin:left}
.term{min-width:0;font-size:14px}
.term th{color:var(--screen-dim);border-color:rgba(255,255,255,.08);font-family:var(--f-mono)}
.term td{border-color:rgba(255,255,255,.08);color:var(--screen-ink)}
.term input{accent-color:var(--up);width:18px;height:18px}
.die{display:inline-grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:46px;height:46px;padding:6px;border-radius:10px;background:var(--paper);box-shadow:0 3px 0 rgba(0,0,0,.3),inset 0 -2px 0 rgba(0,0,0,.08);margin:3px;vertical-align:middle}
.die i{width:8px;height:8px;border-radius:50%;background:var(--pip);place-self:center;visibility:hidden}
.die i.on{visibility:visible}
.die.q{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-weight:600;font-size:20px;color:var(--pip);opacity:.75}
.die.sm{width:30px;height:30px;padding:4px;border-radius:7px;margin:2px}.die.sm i{width:5px;height:5px}.die.sm.q{font-size:14px}
.rolling{animation:roll .5s ease-out}
@keyframes roll{0%{transform:rotate(-220deg) translateY(-16px) scale(.75)}65%{transform:rotate(12deg)}100%{transform:none}}
.pc{display:inline-flex;flex-direction:column;justify-content:space-between;width:46px;height:66px;padding:4px 5px;border-radius:6px;background:var(--paper);color:var(--pip);font-family:var(--f-mono);font-weight:600;font-size:14px;line-height:1;box-shadow:0 2px 0 rgba(0,0,0,.3);margin:3px;vertical-align:middle}
.pc .s2{align-self:flex-end;transform:rotate(180deg)}
.pc.red{color:var(--card-red)}
.pc.back{background:repeating-linear-gradient(45deg,var(--cardback),var(--cardback) 4px,var(--card-red) 4px,var(--card-red) 8px);border:3px solid var(--paper)}
.pc.slot{background:transparent;border:2px dashed rgba(255,255,255,.35);box-shadow:none}
.pc.big{width:78px;height:110px;font-size:24px;padding:7px 8px;border-radius:9px}
.pc.sm{width:36px;height:52px;font-size:12px}
.deal{animation:deal .35s ease-out both}
@keyframes deal{from{transform:translateY(-18px) rotateY(90deg);opacity:0}to{transform:none;opacity:1}}
.coin{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f3d27a,#b8862b);color:#3d2b0a;font-family:var(--f-mono);font-weight:700;font-size:13px;margin:2px;vertical-align:middle;box-shadow:0 2px 0 rgba(0,0,0,.3)}
.chips{display:inline-flex;align-items:flex-end;gap:4px;min-height:20px}
.chipstack{display:inline-flex;flex-direction:column-reverse;align-items:center;padding-top:5px}
.chip{display:block;width:34px;height:11px;border-radius:50%;margin-top:-5px;border:2px dashed rgba(255,255,255,.75);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.chip.c1{background:#cfcabd;border-color:rgba(60,60,60,.5)}.chip.c5{background:#c0392b}.chip.c25{background:#1e8449}.chip.c100{background:#1b1b1b}
.pop{position:absolute;font-family:var(--f-mono);font-weight:700;font-size:18px;pointer-events:none;animation:pop 1.1s ease-out forwards;z-index:5;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.pop.g{color:var(--up)}.pop.b{color:var(--down)}
@keyframes pop{from{transform:translateY(0);opacity:1}to{transform:translateY(-44px);opacity:0}}
.stamp{display:inline-block;font-family:var(--f-display);font-weight:800;font-stretch:125%;letter-spacing:.06em;border:3px solid currentColor;border-radius:6px;padding:2px 10px;transform:rotate(-5deg);animation:stamp .3s ease-out}
.stamp.g{color:var(--up)}.stamp.b{color:var(--down)}
@keyframes stamp{from{transform:rotate(-5deg) scale(2);opacity:0}to{transform:rotate(-5deg) scale(1);opacity:1}}
.hud{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;font-family:var(--f-mono);font-size:11px;letter-spacing:0;text-transform:none}
.pill{border:1px solid var(--line);border-radius:20px;padding:2px 9px;background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.pill input{margin:0}
.queue{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.tr{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:11px;font-weight:600;background:rgba(255,255,255,.12);color:var(--table-ink);border:2px solid transparent;transition:transform .2s}
.tr.now{border-color:var(--gold);transform:scale(1.12)}.tr.n{background:rgba(255,255,255,.3)}.tr.i{background:var(--down);color:#fff}
.ladder{display:grid;grid-template-columns:1fr 112px 1fr;font-family:var(--f-mono);font-size:13px;background:var(--screen);color:var(--screen-ink);border-radius:10px;overflow:hidden}
.ladder div{padding:3px 8px;border-bottom:1px solid rgba(255,255,255,.05);min-height:22px}
.ladder .px{white-space:nowrap;text-align:center;color:var(--screen-dim);font-variant-numeric:tabular-nums}
.ladder .px.fair{color:var(--up);font-weight:600}
.ladder .b,.ladder .a{cursor:pointer;font-weight:600}
.ladder .b{text-align:right}
.ladder .b:hover{background:rgba(143,180,255,.18)}.ladder .a:hover{background:rgba(255,154,138,.18)}
.ladder .b.on{background:var(--bid);color:#fff}.ladder .a.on{background:var(--ask);color:#fff}
.ladder .hit{animation:hitf .9s}
@keyframes hitf{from{background:var(--gold);color:#000}}
.meter{position:relative;height:10px;background:rgba(255,255,255,.1);border-radius:5px;margin:6px 0 2px}
.meter b{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:var(--screen-dim)}
.meter i{position:absolute;top:0;bottom:0;border-radius:5px;transition:all .25s}
.tape{height:190px;overflow:auto;font-size:12px;line-height:1.55;margin-top:4px;white-space:pre}
.dotr{display:inline-block;width:10px;height:10px;border-radius:50%;margin:1px}.dotr.h{background:var(--felt)}.dotr.m{background:var(--ask)}
.ptable{position:relative;background:radial-gradient(ellipse at 50% 45%,var(--table),var(--table-2));border:10px solid var(--rail);border-radius:140px;padding:18px 14px;color:var(--table-ink);display:flex;flex-direction:column;align-items:center;gap:8px;min-height:300px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
@media (max-width:560px){.ptable{border-radius:48px;border-width:6px}}
.ptable .items{justify-content:center;min-height:0}
.chipline{display:flex;align-items:flex-end;gap:8px;font-family:var(--f-mono);font-size:12px}
.pstamp{position:absolute;right:22px;top:18px}
.seat-lbl{font-family:var(--f-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
canvas.felt{background:transparent}
footer{margin-top:60px;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ================= After Hours: lobby + tables ================= */
html{background:var(--bg)}
body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;min-height:100svh}
#stage{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;display:block;z-index:0;background:var(--bg);border-radius:0}
.veil{position:fixed;inset:0;z-index:0;pointer-events:none}
.veil-lobby{background:linear-gradient(90deg,rgba(5,10,8,.97) 0%,rgba(5,10,8,.86) 30%,rgba(5,10,8,.25) 56%,rgba(5,10,8,0) 100%)}
.veil-game{background:linear-gradient(rgba(5,10,8,.85),rgba(5,10,8,0) 26%),radial-gradient(ellipse 80% 70% at 50% 55%,rgba(5,10,8,.42),rgba(5,10,8,.9))}
html.no-3d #stage,html.no-3d .veil{display:none}
html.no-3d body{background:radial-gradient(ellipse at 72% 18%,#14503a,#050a08 62%) fixed}
@media (max-width:760px){.veil-lobby{background:linear-gradient(180deg,rgba(5,10,8,.15) 0%,rgba(5,10,8,.5) 34%,rgba(5,10,8,.94) 52%)}}

/* curtain: fade between pages */
.curtain{position:fixed;inset:0;z-index:100;background:#020403;pointer-events:none;opacity:0;transition:opacity .42s ease}
.curtain.in{animation:lift .8s .05s ease both}
@keyframes lift{from{opacity:1}to{opacity:0}}
body.leaving .curtain{animation:none;opacity:1}

/* top bar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) max(18px,env(safe-area-inset-right,0px)) 18px max(18px,env(safe-area-inset-left,0px));
  background:linear-gradient(rgba(5,10,8,.94),rgba(5,10,8,.6) 60%,rgba(5,10,8,0))}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.brand i{display:inline-block;width:22px;height:22px;border-radius:50%;border:3px dashed var(--gold);box-shadow:inset 0 0 0 3px #7a1420;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tb-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tb-prog{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.14em}
.tb-btn{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border-radius:5px;border:1px solid var(--line);background:rgba(5,10,8,.6);color:var(--ink);text-decoration:none;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:border-color .2s,color .2s}
.tb-btn:hover{border-color:var(--gold)}
.tb-btn.gold{border-color:rgba(220,182,94,.6);color:var(--gold)}
.tb-btn[aria-pressed="true"]{border-color:var(--felt);color:var(--felt)}
.gtitle{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.gtitle small{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.gtitle b{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- lobby ---------- */
.lobby{position:relative;z-index:1;min-height:100svh;display:grid;grid-template-columns:minmax(0,540px) 1fr;
  padding:calc(env(safe-area-inset-top,0px) + 88px) max(20px,4vw) 32px max(20px,4vw);pointer-events:none}
.lobby-l{pointer-events:auto;display:flex;flex-direction:column;justify-content:center}
.kicker{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.lobby h1{font-family:var(--f-display);font-weight:300;text-transform:uppercase;font-size:clamp(42px,4.8vw,74px);line-height:.9;letter-spacing:.005em;margin:12px 0 12px;max-width:12ch;text-wrap:balance;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.lobby h1 b{font-weight:800;color:var(--gold)}
.lobby .lede{font-size:16.5px;max-width:44ch;color:rgba(239,232,216,.78);margin:0 0 22px;animation:rise 1.1s .1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:.001;transform:translateY(22px)}to{opacity:1;transform:none}}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow-x:auto;scrollbar-width:none}
.tab{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:10px 12px 9px;margin-bottom:-1px;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.tab span{opacity:.6;margin-left:4px}
.tab:hover{color:var(--ink);border-color:transparent}
.tab[aria-selected="true"]{color:var(--gold);border-bottom-color:var(--gold)}
.floor{list-style:none;margin:0;padding:0;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.floor a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:14px;row-gap:1px;align-items:baseline;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;border-radius:8px;transition:background .25s,padding .3s cubic-bezier(.2,.7,.2,1)}
.floor .no{font-family:var(--f-mono);font-size:12px;color:var(--gold);grid-row:1/3;align-self:center}
.floor .nm{font-family:var(--f-display);font-weight:700;font-size:21px;line-height:1.15;letter-spacing:.05em;text-transform:uppercase}
.floor .tick{grid-column:3;grid-row:1;color:var(--felt);font-family:var(--f-mono);font-size:13px;justify-self:end}
.floor .ds{grid-column:2;font-size:14px;color:var(--muted)}
.floor .go{grid-column:3;grid-row:2;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.floor a:hover,.floor a:focus-visible{background:rgba(220,182,94,.08);padding-left:16px}
.floor a:hover .go,.floor a:focus-visible .go{opacity:1;transform:none}
.foot{font-size:12.5px;color:var(--muted);margin:18px 0 0;max-width:52ch}
.foot a{color:var(--gold)}
.stagehud{position:fixed;right:max(24px,4vw);bottom:30px;z-index:2;max-width:420px;font-family:var(--f-mono);font-size:13px;line-height:1.65;color:var(--ink);background:rgba(5,10,8,.66);border:1px solid var(--line);border-left:3px solid var(--gold);padding:12px 16px;border-radius:4px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.stagehud:empty{display:none}
.stagehud b{color:var(--gold);font-weight:600}
@media (max-width:760px){
  .lobby{display:block;padding-top:calc(env(safe-area-inset-top,0px) + 44svh)}
  .stagehud{position:absolute;left:16px;right:16px;top:calc(env(safe-area-inset-top,0px) + 70px);bottom:auto;max-width:none;font-size:12px;padding:9px 12px}
  .floor .go{display:none}
  .floor .nm{font-size:19px}
}

/* ---------- game page ---------- */
.gstage{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--tb,76px) + 14px) max(14px,3vw) 34px;pointer-events:none}
.game{pointer-events:auto;width:min(1120px,100%);display:flex;flex-direction:column;gap:18px;animation:rise .8s .15s cubic-bezier(.2,.7,.2,1) both}
.game>.desk{position:relative;margin:0;background:rgba(8,14,11,.82);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2.4vw,28px);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);box-shadow:0 30px 90px rgba(0,0,0,.55)}
.game>.desk::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(220,182,94,.6),transparent)}
.game .desk-h{color:var(--gold);font-size:11px;margin-bottom:14px}
.game .scene{min-height:170px;padding:18px 20px}
.game .duo,.game .mm{align-items:start}
.game canvas{background:#060c09}
.game .scene-q{font-size:19px}
.game .screen{padding:16px 18px}
.game .bigq{font-size:40px}
.game .row{margin:14px 0}
.game .row button{padding:11px 18px;font-size:14px}
.game .stats{gap:10px 28px}
.game .pc{width:54px;height:78px;font-size:16px}
.game .pc.big{width:92px;height:130px;font-size:28px}
.game .pc.sm{width:40px;height:58px;font-size:13px}
.game .die{width:52px;height:52px}
.game .die i{width:9px;height:9px}
.game .die.sm{width:32px;height:32px}.game .die.sm i{width:5px;height:5px}
.ref{max-width:900px;align-self:center;width:100%}
.ref .tip,.ref p{max-width:none}
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.pager a{color:var(--muted);text-decoration:none;padding:8px 4px;transition:color .2s}
.pager a:hover{color:var(--gold)}
.pager a:last-child{text-align:right}
.pager .lob{color:var(--gold);border:1px solid rgba(220,182,94,.35);border-radius:999px;padding:8px 16px}
body.is-fs .pager{display:none}
@media (max-width:760px){
  .topbar{flex-wrap:wrap;row-gap:10px;padding-bottom:12px;background:rgba(5,10,8,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .game-page .tb-r{width:100%;justify-content:flex-start;margin-left:0}
  .gtitle b{font-size:20px}
  .gstage{align-items:flex-start}
  .game-page .tb-r{gap:6px}
  .game-page .tb-btn{padding:7px 9px;font-size:10px;letter-spacing:.1em}
  #fsBtn,#sndBtn{font-size:0!important;width:34px;padding:7px 0!important;text-align:center}
  #fsBtn::before{content:"\2922";font-size:14px}
  #sndBtn::before{content:"\266A";font-size:14px}
  #sndBtn[aria-pressed="false"]{opacity:.6}
  .game .bigq{font-size:30px}
  .pager{grid-template-columns:1fr 1fr}.pager .lob{grid-column:1/-1;grid-row:1;text-align:center}
}

/* buttons & inputs on dark glass */
label,button,details.deep>summary{font-family:var(--f-body)}
button{font-weight:600;background:rgba(255,255,255,.05);border-color:var(--line);color:var(--ink);transition:border-color .2s,transform .15s}
button:hover{border-color:var(--gold)}
button:active{transform:translateY(1px)}
button.go{background:var(--gold);color:#17120a;border-color:var(--gold)}
input[type=number],input[type=text],select{background:rgba(0,0,0,.4);border-color:var(--line);color:var(--ink)}
.out{background:rgba(0,0,0,.38);color:var(--ink)}
.pill{background:rgba(0,0,0,.35)}
.desk{background:rgba(255,255,255,.028);border-color:var(--line);border-radius:12px}
main canvas{background:rgba(0,0,0,.3)}
.scene{box-shadow:inset 0 0 0 1px rgba(220,182,94,.18),inset 0 -40px 80px rgba(0,0,0,.35)}
.desk-h,.scene .lbl,.screen .dim.lbl,.tip b.lbl,.deep h4,th,.seat-lbl{font-family:var(--f-mono);font-weight:600;letter-spacing:.14em}
th{font-size:11px}
.formula{background:rgba(255,255,255,.05);border-left:2px solid var(--gold);border-radius:4px;color:var(--ink)}
.tip{background:rgba(220,182,94,.07)}
details.deep{background:rgba(255,255,255,.028);border-color:var(--line)}
.site{background:rgba(255,255,255,.035);border-color:var(--line)}
.site a{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold)}

/* ---------- briefing dialog ---------- */
dialog.tut{width:min(720px,calc(100vw - 24px));max-width:none;max-height:none;padding:0;border:1px solid rgba(220,182,94,.38);border-radius:20px;background:rgba(8,14,11,.95);color:var(--ink);box-shadow:0 40px 140px rgba(0,0,0,.75);overflow:hidden}
dialog.tut::backdrop{background:rgba(2,4,3,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.tut[open]{animation:tutIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes tutIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.tut-in{display:flex;flex-direction:column;max-height:min(86vh,860px);max-height:min(86svh,860px)}
.tut-h{padding:24px 28px 12px;border-bottom:1px solid var(--line)}
.tut-h small{font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.tut-h h2{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,5vw,42px);line-height:1;letter-spacing:.03em;text-transform:uppercase;margin:6px 0 0}
.tut-h .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tut-h .tag{font-family:var(--f-mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:1px 9px}
.tut-b{overflow:auto;padding:8px 28px 14px;overscroll-behavior:contain}
.tut-b p,.tut-b li{color:rgba(239,232,216,.88)}
.tut-b>h3{font-family:var(--f-display);font-size:20px;text-transform:uppercase;letter-spacing:.04em;margin:22px 0 6px}
.tut-f{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 28px 20px;border-top:1px solid var(--line)}
.tut-f .hint{font-size:13px;color:var(--muted)}
.tut-f .hint b{color:var(--gold);font-weight:600}
.chip-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;border:0;background:var(--gold);color:#17120a;font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 0 0 4px rgba(220,182,94,.18),inset 0 0 0 2px rgba(0,0,0,.18);transition:transform .2s,box-shadow .2s}
.chip-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 7px rgba(220,182,94,.24),inset 0 0 0 2px rgba(0,0,0,.18)}
@media (max-width:560px){.tut-h,.tut-b,.tut-f{padding-left:18px;padding-right:18px}.tut-f .hint{display:none}.tut-f .chip-btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================= v4: accounts, gauntlet, leaderboard, languages, app ================= */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button.link{background:none;border:0;padding:0;color:var(--gold);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dim{color:var(--muted)}

/* language picker */
.langsel select{appearance:none;-webkit-appearance:none;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.1em;padding:8px 26px 8px 11px;border-radius:5px;border:1px solid var(--line);
  background:rgba(5,10,8,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23dcb65e' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center;color:var(--ink);width:auto;cursor:pointer}
.langsel select:hover{border-color:var(--gold)}
.langhint{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:6px;background:rgba(8,14,11,.95);border:1px solid rgba(220,182,94,.5);border-radius:999px;padding:6px 6px 6px 18px;box-shadow:0 18px 50px rgba(0,0,0,.6);animation:rise .5s .8s both}
.langhint a{color:var(--gold);text-decoration:none;font-weight:600}
.langhint button{border:0;background:rgba(255,255,255,.08);width:30px;height:30px;padding:0;border-radius:50%}

/* account chip + menu */
.tb-btn.acct{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;text-transform:none;letter-spacing:.02em;font-size:12px}
.tb-btn.acct .lbl{padding:3px 4px 3px 0;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--gold)}
.tb-btn.acct .ic{color:var(--gold);margin-left:6px}
.tb-btn.acct .nm{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.av.ph,.ph{display:inline-flex;align-items:center;justify-content:center;background:#7a1420;color:var(--gold);font-family:var(--f-display);font-weight:800;font-size:13px;border-radius:50%}
.av.lg{width:40px;height:40px;font-size:18px}
.acct-menu{position:fixed;z-index:80;width:min(320px,calc(100vw - 24px));background:rgba(8,14,11,.97);border:1px solid rgba(220,182,94,.38);border-radius:14px;padding:14px;box-shadow:0 30px 90px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:tutIn .3s cubic-bezier(.2,.7,.2,1)}
.am-h{display:flex;gap:12px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.am-h b{display:block;font-size:15px}
.am-h small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:2px}
.am-row{display:block;width:100%;text-align:left;padding:9px 8px;border-radius:8px;border:0;background:none;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}
.am-row:hover{background:rgba(220,182,94,.1)}
.am-out{color:var(--muted)}
.am-rename{padding:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:6px 0}
.am-rename label{display:block;font-size:12px;margin-bottom:6px}
.am-rename div{display:flex;gap:6px}.am-rename input{flex:1;width:auto;min-width:0}
.am-msg{display:block;font-size:12px;color:var(--felt);min-height:1em;margin-top:4px}
.am-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 14px;border-radius:999px;background:#fff;color:#1f1f1f;border:0;font-size:14.5px;font-weight:600}
.am-google:hover{background:#f1f1f1}
.am-note{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:10px}

/* lobby: daily + leaderboard callouts */
.daily-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:0 0 18px}
.daily-cta,.lb-link{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;text-decoration:none;color:var(--ink);border:1px solid rgba(220,182,94,.45);background:linear-gradient(135deg,rgba(220,182,94,.16),rgba(122,20,32,.18));transition:transform .25s,box-shadow .25s,border-color .25s}
.daily-cta:hover,.lb-link:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.daily-cta .k,.lb-link .k{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:.05em;text-transform:uppercase}
.daily-cta .k b{color:var(--gold);font-weight:700}
.daily-cta .t,.lb-link .t{font-size:13.5px;color:rgba(239,232,216,.75)}
.daily-cta .go{position:absolute;right:16px;top:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lb-link{background:rgba(5,10,8,.5);border-color:var(--line);justify-content:center;min-width:150px}
@media (max-width:560px){.daily-row{grid-template-columns:1fr}.daily-cta .go{position:static;margin-top:6px}}

/* ---------- Daily Gauntlet ---------- */
.gx{width:min(860px,100%)}
.gx-title{font-family:var(--f-display);font-weight:300;font-size:clamp(34px,5vw,58px);line-height:.95;text-transform:uppercase;margin:6px 0 16px}
.gx-title b{font-weight:800;color:var(--gold)}
.gx-rules{margin:0 0 14px;padding-left:1.1em}
.gx-rules li{margin:.3em 0;color:rgba(239,232,216,.85)}
.gx-status{font-size:14.5px;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);max-width:none}
.gx-streak{font-family:var(--f-mono);font-size:13px;color:var(--muted);min-height:1.2em;max-width:none}
.gx-streak b{color:var(--gold)}
.gx-top{display:flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.gx-dots{display:flex;gap:5px;flex:1;justify-content:center}
.gx-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12)}
.gx-dots i.g{background:var(--up)}.gx-dots i.r{background:var(--down)}.gx-dots i.now{background:var(--gold);transform:scale(1.25)}
.gx-clock{color:var(--gold);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.gx-timer{height:4px;margin:12px 0 18px}.gx-timer i{transition:none;width:100%}
.gx-tag{display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(220,182,94,.4);border-radius:999px;padding:3px 10px}
.gx-q{font-size:clamp(19px,2.4vw,24px);line-height:1.45;font-weight:500;margin:14px 0 14px;max-width:none}
.gx-vis{margin:0 0 16px}
.gx-quote{font-family:var(--f-mono);font-size:44px;display:flex;gap:12px;align-items:baseline}
.gx-quote i{font-style:normal;color:var(--muted)}
table.gx-t{min-width:0;width:auto;font-family:var(--f-mono)}
table.gx-t td,table.gx-t th{padding:5px 16px 5px 0}
.gx-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.gx-opt{display:flex;align-items:center;gap:12px;text-align:left;padding:15px 16px;border-radius:12px;font-size:17px;font-weight:600;background:rgba(255,255,255,.05);border:1px solid var(--line);transition:transform .15s,border-color .15s,background .15s}
.gx-opt:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px)}
.gx-opt kbd{font-family:var(--f-mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.gx-opt.ok{background:rgba(79,224,162,.18);border-color:var(--up)}
.gx-opt.no{background:rgba(255,117,102,.16);border-color:var(--down)}
.gx-opt:disabled{cursor:default}
.gx-res{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:6px 0 8px}
.gx-score{font-family:var(--f-display);font-weight:800;font-size:clamp(84px,14vw,150px);line-height:.85;color:var(--gold)}
.gx-of{font-family:var(--f-mono);font-size:13px;color:var(--muted);margin-top:6px}
.gx-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;width:min(360px,100%)}
.gx-grid i{aspect-ratio:1;border-radius:6px;background:var(--down)}.gx-grid i.g{background:var(--up)}
.gx-note{max-width:none;font-size:14.5px}
.gx-share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 6px}
.gx-share button{display:inline-flex;align-items:center;gap:8px}
.gx-share button.li{background:#0a66c2;border-color:#0a66c2;color:#fff}
.gx-share button.li:hover{background:#0b5cad}
.gx-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;margin-top:18px}
@media (max-width:760px){.gx-cols{grid-template-columns:1fr}}
.gx-cols h3{font-family:var(--f-display);font-size:20px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}
.gx-cols .more{display:inline-block;margin-top:8px;color:var(--gold);font-size:13px;text-decoration:none}
.gx-review{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;padding-right:4px}
.gx-review li{border:1px solid var(--line);border-left:3px solid var(--up);border-radius:8px;padding:9px 12px;background:rgba(255,255,255,.025)}
.gx-review li.r{border-left-color:var(--down)}
.gx-review .tg{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.gx-review p{margin:.25em 0;font-size:14px;max-width:none}
.gx-review .why{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}

/* leaderboard lists */
ol.lb{list-style:none;margin:0;padding:0}
ol.lb li{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line)}
ol.lb .rk{font-family:var(--f-mono);width:24px;color:var(--gold);text-align:right}
ol.lb img,ol.lb .ph,.who img,.who .ph{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
ol.lb .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ol.lb .sc{font-family:var(--f-mono);font-weight:600}
ol.lb li.me,table.lbt tr.me td{background:rgba(220,182,94,.1)}
.lbx{width:min(900px,100%);align-self:center}
.lbx .tabs{margin:4px 0 12px}
.lb-you{font-size:14.5px;max-width:none;min-height:1.4em}
table.lbt td{vertical-align:middle;font-size:15px}
table.lbt .rk{width:44px;font-size:16px}
table.lbt .sc{font-weight:700;color:var(--gold);font-size:16px}
.who{display:inline-flex;align-items:center;gap:10px}
.sq{display:inline-grid;grid-template-columns:repeat(10,9px);gap:3px}
.sq i{width:9px;height:9px;border-radius:2px;background:var(--down)}.sq i.g{background:var(--up)}
@media (max-width:560px){.hide-s{display:none}}

/* install help dialog */
dialog.tut.sm{width:min(520px,calc(100vw - 24px))}

/* top bar density with more controls */
.lobby-page .tb-r{gap:6px}
@media (max-width:900px){.lobby-page .tb-prog{display:none}}
@media (max-width:760px){
  .langsel select{padding:7px 22px 7px 8px;font-size:10px;letter-spacing:.04em;background-position:right 7px center}
  .tb-btn.acct .nm,.tb-btn.acct .lbl{display:none}.tb-btn.acct{padding:4px}.tb-btn.acct .ic{margin:4px 5px}
  .game-page .langsel{display:none}
  #installBtn{font-size:10px;padding:7px 9px}
}

/* CJK: the condensed Latin display face has no CJK glyphs; soften tracking and use system CJK faces */
html:lang(zh-Hans){--f-body:"Instrument Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;--f-display:"Big Shoulders Display","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
html:lang(ja){--f-body:"Instrument Sans","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;--f-display:"Big Shoulders Display","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif}
html:lang(zh-Hans) .lobby h1,html:lang(ja) .lobby h1,html:lang(zh-Hans) .gx-title,html:lang(ja) .gx-title{font-weight:500;line-height:1.12;letter-spacing:.02em}
html:lang(zh-Hans) .lobby h1 b,html:lang(ja) .lobby h1 b{font-weight:800}
html:lang(zh-Hans) .kicker,html:lang(ja) .kicker,html:lang(zh-Hans) .tab,html:lang(ja) .tab,html:lang(zh-Hans) .desk-h,html:lang(ja) .desk-h,html:lang(zh-Hans) .tb-btn,html:lang(ja) .tb-btn,html:lang(zh-Hans) .gtitle small,html:lang(ja) .gtitle small,html:lang(zh-Hans) .tut-h small,html:lang(ja) .tut-h small{letter-spacing:.06em}
html:lang(zh-Hans) .floor .nm,html:lang(ja) .floor .nm,html:lang(zh-Hans) .gtitle b,html:lang(ja) .gtitle b,html:lang(zh-Hans) .tut-h h2,html:lang(ja) .tut-h h2{font-weight:600;letter-spacing:.02em}
html:lang(es) .lobby h1{max-width:14ch}