/* Layout: full-bleed canvas arena with HTML overlays (menu, online lobby, shop, achievements, pause, game over).
   Styled with the One Guillion Jollars site tokens (deep purple night, neon cyan panels, pink buttons,
   gold pixel titles, scanlines). Single dark look. */
:root{
  color-scheme:dark;
  --bg:#0b0820; --card:#17123a; --line:#2e2763; --fg:#e8e6ff; --muted:#9b96c9;
  --up:#39ff88; --down:#ff4d6d; --accent:#ff2e88; --neon:#00e5ff; --gold:#ffe14d; --alt:#3a2f86;
  --pixel:"Press Start 2P", ui-monospace, monospace;
  --body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:radial-gradient(circle at 50% -20%,#2a1a6b 0,var(--bg) 60%) fixed var(--bg);color:var(--fg);font:15px/1.45 var(--body)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
#game{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.playing #game{cursor:none}

.overlay{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;overflow:auto;
  padding-block:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:radial-gradient(circle at 50% -20%,rgba(42,26,107,.82) 0,rgba(11,8,32,.94) 60%)}
.overlay.show{display:flex}
.wrap{width:100%;max-width:760px;margin:auto;display:flex;flex-direction:column;gap:18px;text-align:center}
.wrap.wide{max-width:1040px}
.kicker{margin:0;font-family:var(--pixel);font-size:.62rem;line-height:1.8;letter-spacing:.5px;color:var(--neon);text-shadow:0 0 6px rgba(0,229,255,.55)}
.logo{margin:0;font-family:var(--pixel);font-weight:400;font-size:clamp(30px,8vw,64px);line-height:1.35;letter-spacing:.5px;color:var(--gold);
  text-shadow:0 0 8px rgba(255,225,77,.6),0 0 24px rgba(255,46,136,.35);text-wrap:balance}
.logo span{display:block;color:var(--accent);text-shadow:0 0 10px rgba(255,46,136,.7)}
.logo.sm{font-size:clamp(22px,5vw,36px)}
.tag{margin:0 auto;max-width:58ch;color:var(--muted);font-size:1.05rem;line-height:1.5}
.panel{background:var(--card);border:2px solid var(--neon);box-shadow:0 0 12px rgba(0,229,255,.25);border-radius:10px;padding:18px 16px;display:flex;flex-direction:column;gap:14px;align-items:center}
.panel[hidden]{display:none}
.press{font-family:var(--pixel);font-size:.6rem;color:var(--neon);text-shadow:0 0 6px rgba(0,229,255,.55);animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.btn{font-family:var(--pixel);font-size:.7rem;line-height:1.3;background:var(--accent);color:#fff;border:0;border-bottom:3px solid #a3004f;border-radius:4px;padding:13px 16px;cursor:pointer}
.btn:hover{filter:brightness(1.12)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn:active{transform:translateY(2px);border-bottom-width:1px}
.btn.alt{background:var(--alt);border-bottom-color:#1d1650}
.btn.gold{background:var(--gold);color:#1a1400;border-bottom-color:#a08a00}
.btn.sm{font-size:.55rem;padding:10px 12px}
.btn[disabled]{opacity:.4;cursor:not-allowed;filter:none;transform:none}
.btn[hidden]{display:none}
.note{margin:0;color:var(--muted);font-size:.85rem}
.note.err{color:var(--down)}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;text-align:left}
.tile{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0}
.tile h3{margin:0 0 8px;font-family:var(--pixel);font-weight:400;font-size:.6rem;line-height:1.6}
.tile p{margin:4px 0;font-size:.85rem;color:var(--muted);line-height:1.55}
kbd{font-family:var(--body);font-size:.78rem;color:var(--fg);background:#0f0b2b;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;white-space:nowrap}
.foot{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;align-items:center;font-size:.85rem;color:var(--muted)}
.foot .best{font-family:var(--pixel);font-size:.55rem}
.foot b{color:var(--gold);font-weight:400}
.touchnote{display:none;color:var(--gold);font-size:.85rem;margin:0}
@media (pointer:coarse){.touchnote{display:block}}
.startroom{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;font-family:var(--pixel);font-size:.55rem;color:var(--muted)}
.startroom b{color:var(--fg);font-weight:400;min-width:15ch}
.startroom[hidden]{display:none}
.profile{display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:center;align-items:flex-end;width:100%;border-top:1px dashed var(--line);padding-top:14px}
.account{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center}
.account[hidden],.account [hidden]{display:none}
.account .note{max-width:34ch}
.gbtn{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.gbtn svg{width:14px;height:14px;flex:none}
#gate{z-index:15;background-color:var(--bg,#0b0820)}
#gate .panel{max-width:440px;margin-inline:auto}
#gate.wait #gGoogle{visibility:hidden}
#gGoogle svg{width:18px;height:18px}
/* sub-screens (online, shop, achievements, ranking): pinned to the top so tabs never jump, with the way back always in view */
.overlay.sub{align-items:flex-start;padding-top:0}
.overlay.sub .wrap{margin-top:0}
.subbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 0 14px}
.subbar .btn{justify-self:start;font-size:.65rem;padding:12px 16px;border:2px solid var(--neon);border-bottom-width:4px;box-shadow:0 0 12px rgba(0,229,255,.35)}
.subbar h2{margin:0}
@media (max-width:520px){.subbar{grid-template-columns:auto 1fr}.subbar h2{text-align:right}}
#shopBody,#statsBody{min-height:60vh}
#statsBody,#achCls{display:flex;flex-direction:column;gap:14px}
/* ranking */
.rank{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;text-align:left}
.rank th{font-family:var(--pixel);font-weight:400;font-size:.5rem;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.rank td{padding:10px;border-bottom:1px solid var(--line);font-size:.95rem}
.rank td.n{font-family:var(--pixel);font-size:.6rem;color:var(--muted);width:3.5em}
.rank td.v{text-align:right;font-family:var(--pixel);font-size:.6rem;color:var(--gold)}
.rank th.v{text-align:right}
.rank tr.me td{background:rgba(0,229,255,.08);color:#fff}
.rank tr.me td.n{color:var(--neon)}
.rank tr:nth-child(1) td.n{color:var(--gold)}.rank tr:nth-child(2) td.n{color:#d8d8f0}.rank tr:nth-child(3) td.n{color:var(--orange,#ff9f40)}
.rank tr.gap td{text-align:center;color:var(--muted);border-bottom:0;padding:4px}

/* online lobby */
.field{display:flex;flex-direction:column;gap:6px;align-items:center;font-family:var(--pixel);font-size:.5rem;color:var(--muted)}
.field.chk{flex-direction:row;justify-content:center;gap:8px;font-family:inherit;font-size:.8rem;cursor:pointer;margin:4px 0}
.inp{font:600 16px var(--body);color:var(--fg);background:#0f0b2b;border:1px solid var(--line);border-radius:6px;padding:10px 12px;width:min(260px,100%);text-align:center}
.inp:focus{outline:2px solid var(--neon);outline-offset:1px}
.inp.code{font-family:var(--pixel);font-size:.9rem;letter-spacing:4px;text-transform:uppercase;width:11ch}
.or{font-family:var(--pixel);font-size:.5rem;color:var(--muted)}
.bigcode{font-family:var(--pixel);font-size:clamp(28px,7vw,48px);letter-spacing:8px;color:var(--gold);text-shadow:0 0 12px rgba(255,225,77,.6);user-select:all}
.lobby{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;width:100%}
.lobby .slot{display:flex;flex-direction:column;align-items:center;gap:6px;background:#0f0b2b;border:1px solid var(--line);border-radius:8px;padding:10px}
.lobby .slot.empty{opacity:.4;border-style:dashed;justify-content:center;min-height:120px}
.lobby .slot b{font-family:var(--pixel);font-weight:400;font-size:.55rem;line-height:1.6}
.lobby .slot small{font-family:var(--pixel);font-size:.45rem;color:var(--neon)}
.lobby canvas{width:56px;height:56px}

.big{margin:0;font-family:var(--pixel);font-weight:400;font-size:clamp(22px,6vw,46px);line-height:1.4;color:var(--down);text-shadow:0 0 10px rgba(255,77,109,.6);text-wrap:balance}
.big.calm{color:var(--neon);text-shadow:0 0 10px rgba(0,229,255,.55)}
.big.win{color:var(--gold);text-shadow:0 0 12px rgba(255,225,77,.7)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.stats .k{font-family:var(--pixel);font-size:.5rem;color:var(--muted);line-height:1.6}
.stats .v{font-family:var(--pixel);font-size:.95rem;margin-top:8px;color:var(--fg);font-variant-numeric:tabular-nums}
.stats .tile:first-child .v{color:var(--gold);text-shadow:0 0 8px rgba(255,225,77,.5)}
.stats .tile.earn .v{color:var(--up)}
.newbest{font-family:var(--pixel);font-size:.65rem;color:var(--gold);text-shadow:0 0 8px rgba(255,225,77,.6)}
#over .newbest:not([hidden]){display:inline-block;animation:stamp .5s cubic-bezier(.2,1.6,.4,1) .9s both}
@keyframes stamp{from{transform:scale(2.6) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(-3deg);opacity:1}}
#over .stats .tile{animation:tileIn .35s ease-out both}
@keyframes tileIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.stats .v.long{font-size:.72rem;margin-top:11px}
.stats .s{font-family:var(--pixel);font-size:.45rem;color:var(--muted);margin-top:6px;line-height:1.6}
.stats .tile.mvp{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,225,77,.35) inset}
.stats .tile.mvp .k::after{content:' \2605  MVP';color:var(--gold)}

/* shop + achievements */
.wallet{font-family:var(--pixel);font-size:.65rem;color:var(--muted)}
.wallet b{font-weight:400;color:var(--gold);text-shadow:0 0 8px rgba(255,225,77,.5);font-size:.9rem}
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tabs button{font-family:var(--pixel);font-size:.55rem;padding:11px 13px;background:var(--card);color:var(--muted);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.tabs button[aria-selected="true"]{color:#fff;border-color:var(--neon);box-shadow:0 0 10px rgba(0,229,255,.3)}
.tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;text-align:left}
.item{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px;min-width:0}
.item.own{border-color:rgba(0,229,255,.45)}
.item.eq{border-color:var(--gold);box-shadow:0 0 12px rgba(255,225,77,.22)}
.item.lock{opacity:.55}
.item .top{display:flex;gap:10px;align-items:center}
.item .ico{font-size:26px;line-height:1;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:none;background:#0f0b2b;border:1px solid var(--line);border-radius:6px}
.item canvas{width:64px;height:64px;flex:none;background:#0f0b2b;border:1px solid var(--line);border-radius:6px}
.item h3{margin:0;font-family:var(--pixel);font-weight:400;font-size:.55rem;line-height:1.7;color:var(--fg)}
.item p{margin:0;font-size:.84rem;color:var(--muted);flex:1;line-height:1.45}
.item .meta{font-family:var(--pixel);font-size:.5rem;color:var(--muted)}
.item .reward{font-family:var(--pixel);font-size:.5rem;color:var(--gold)}
.pips{display:flex;gap:4px}
.pips i{width:16px;height:6px;border-radius:2px;background:#0f0b2b;border:1px solid var(--line)}
.pips i.on{background:var(--up);border-color:var(--up)}
.item .btn{align-self:stretch}
.sec{font-family:var(--pixel);font-size:.62rem;color:var(--neon);margin:4px 0 0;text-align:left;line-height:1.7}
.bar{height:8px;background:#0f0b2b;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--neon)}
.item.done .bar i{background:var(--up)}

#toasts{position:fixed;z-index:40;left:max(12px,env(safe-area-inset-left,0px));bottom:44px;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:min(380px,calc(100% - 24px))}
.toast{background:var(--card);border:2px solid var(--gold);border-radius:8px;padding:10px 12px;box-shadow:0 0 14px rgba(255,225,77,.3);display:flex;gap:10px;align-items:center;animation:tin .3s ease-out}
.toast .ti{font-size:22px}
.toast b{display:block;font-family:var(--pixel);font-weight:400;font-size:.52rem;line-height:1.7;color:var(--gold)}
.toast span{font-size:.84rem;color:var(--fg)}
@keyframes tin{from{transform:translateY(12px);opacity:0}}

/* kept clear of a screen's scrollbar on the right */
.corner{position:fixed;z-index:20;top:calc(12px + env(safe-area-inset-top,0px));right:max(30px,calc(env(safe-area-inset-right,0px) + 18px));display:flex;gap:8px;align-items:stretch}
.lang{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card)}
.sndbtn{font:600 12px var(--body);color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer;white-space:nowrap}
.sndbtn[aria-pressed="true"]{color:var(--down);border-color:var(--down)}
.sndbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
body.playing .corner{display:none}
.lang button{font:600 12px var(--body);color:var(--fg);background:transparent;border:0;padding:6px 10px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--accent);color:#fff}
.lang button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* settings */
#settings{z-index:16}
.setlist{align-items:stretch;gap:0;text-align:left}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);font-family:var(--pixel);font-size:.55rem;line-height:1.7;color:var(--fg)}
.setrow:last-child{border-bottom:0}
.setrow .nowplay{color:var(--neon);font-weight:normal;text-align:right}
.setrow input[type=range]{width:min(220px,50%);accent-color:var(--accent);height:28px}
.seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex:none}
.seg button,.tog{font-family:var(--pixel);font-size:.5rem;color:var(--muted);background:#0f0b2b;border:0;padding:11px 12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.seg.xh{flex-wrap:wrap;flex:0 1 auto;justify-content:flex-end}.seg.xh button{padding:5px 7px;line-height:0}.seg.xh canvas{width:32px;height:32px}
.tog{border:1px solid var(--down);border-radius:6px;min-width:12ch;color:var(--down)}
.tog[aria-pressed="true"]{background:var(--up);color:#062a14;border-color:var(--up)}
.seg button:focus-visible,.tog:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#setTabs{margin-bottom:-4px}
.setlist[hidden]{display:none}
.keybtn{font-family:var(--pixel);font-size:.5rem;min-width:13ch;padding:10px 12px;background:#0f0b2b;color:var(--fg);border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;cursor:pointer;touch-action:manipulation}
.keybtn.wait{border-color:var(--gold);color:var(--gold)}
.keybtn.play{border-color:var(--up);color:var(--up)}
.keybtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.keybtn[disabled]{opacity:.35;cursor:not-allowed}
.setsec{font-family:var(--pixel);font-size:.55rem;color:var(--neon);padding:16px 4px 6px;line-height:1.7;border-bottom:1px solid var(--line)}
.setnote{font-size:.82rem;color:var(--muted);padding:8px 4px 4px;line-height:1.5}
.track{display:grid;grid-template-columns:2.4em 1fr auto;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);text-align:left}
.track:last-child{border-bottom:0}
.track .n{font-family:var(--pixel);font-size:.55rem;color:var(--muted)}
.track b{display:block;font-family:var(--pixel);font-weight:400;font-size:.55rem;line-height:1.7;color:var(--fg)}
.track small{display:block;color:var(--muted);font-size:.8rem;line-height:1.4}
.track.lock b{color:var(--muted)}
.track.on b{color:var(--gold)}
/* admin (only accounts in the server's ADMIN_EMAILS) */
.admin{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;width:100%;border:1px dashed var(--gold);border-radius:8px;padding:10px;font-family:var(--pixel);font-size:.5rem;color:var(--gold)}
.admin[hidden]{display:none}
.admin select{font:600 14px var(--body);color:var(--fg);background:#0f0b2b;border:1px solid var(--line);border-radius:6px;padding:8px;max-width:100%}
.admin label{display:flex;gap:6px;align-items:center;color:var(--fg)}
/* stats: general upgrades in one column per role; each class as one panel of nine squares */
canvas.px{display:block;image-rendering:pixelated}
.sico,.portrait{flex:none;display:flex;align-items:center;justify-content:center;background-color:#0e0a28;border:1px solid var(--line);border-radius:4px;
  background-image:linear-gradient(rgba(46,39,99,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(46,39,99,.7) 1px,transparent 1px);background-size:12px 12px;background-position:-1px -1px}
.tabs .clstab{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 4px;border-bottom:3px solid color-mix(in srgb,var(--cc) 45%,var(--line))}
.tabs .clstab canvas{width:28px;height:28px}
.tabs .clstab[aria-selected="true"]{border-color:var(--cc);box-shadow:0 0 10px color-mix(in srgb,var(--cc) 45%,transparent);color:#fff}
.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;text-align:left}
.role{display:grid;grid-template-rows:subgrid;grid-row:span var(--rows,5);row-gap:0;min-width:0;background:var(--card);border:2px solid var(--rc);border-radius:8px;box-shadow:0 0 12px color-mix(in srgb,var(--rc) 22%,transparent);overflow:hidden}
.rhead{display:flex;gap:10px;align-items:center;padding:10px;background:color-mix(in srgb,var(--rc) 14%,transparent);border-bottom:1px solid color-mix(in srgb,var(--rc) 40%,transparent)}
.rhead .sico{width:40px;height:40px;border-color:color-mix(in srgb,var(--rc) 50%,var(--line))}
.rhead h4{margin:0;min-height:3.2em;display:flex;align-items:flex-end;font-family:var(--pixel);font-weight:400;font-size:.55rem;line-height:1.6;color:var(--rc)}
.rhead small{font-family:var(--pixel);font-size:.45rem;color:var(--muted)}
.uprow{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:1fr auto;align-items:start;gap:8px 10px;padding:10px;border-bottom:1px solid var(--line)}
.uprow:last-child{border-bottom:0}
.uprow .sico{width:40px;height:40px}
.uhead,.shead{display:flex;justify-content:space-between;gap:4px 8px;align-items:baseline;flex-wrap:wrap}
.uprow h5{margin:0;font-family:var(--pixel);font-weight:400;font-size:.5rem;line-height:1.6;color:var(--fg)}
.lvl{font-family:var(--pixel);font-size:.42rem;color:var(--muted);white-space:nowrap}
.uprow p{margin:3px 0 0;font-size:.8rem;color:var(--muted);line-height:1.4}
.sfoot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sfoot .btn{min-width:9em}
.uprow.own .sico{border-color:rgba(0,229,255,.45)}
.uprow.max .lvl,.slot.max .lvl{color:var(--up)}
.dossier,.tabs .clstab{--ct:color-mix(in srgb,var(--cc),#fff 35%)}
/* every class panel sits in the same cell, only the open one visible: all tabs are as tall as the tallest */
.dstack{display:grid}
.dstack>.dossier{grid-area:1/1}
.dossier.off{visibility:hidden}
.dossier{background:var(--card);border:2px solid var(--cc);border-radius:10px;box-shadow:0 0 16px color-mix(in srgb,var(--cc) 28%,transparent);text-align:left;overflow:hidden}
.dhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 16px;align-items:center;padding:14px 16px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 20%,transparent),transparent 75%);border-bottom:1px solid color-mix(in srgb,var(--cc) 45%,transparent)}
.portrait{width:96px;height:96px;border:2px solid var(--cc);border-radius:6px;background-size:16px 16px}
.portrait canvas{width:88px;height:88px}
.dname{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.dname h3{margin:0;font-family:var(--pixel);font-weight:400;font-size:clamp(.8rem,2.4vw,1.05rem);line-height:1.5;color:var(--ct);text-shadow:0 0 8px color-mix(in srgb,var(--cc) 55%,transparent)}
.rbadge{display:inline-flex;align-items:center;gap:6px;font-family:var(--pixel);font-size:.45rem;line-height:1.4;color:var(--rc);border:1px solid var(--rc);border-radius:3px;padding:3px 7px 3px 4px}
.dinfo>p{margin:6px 0 8px;color:var(--muted);font-size:.9rem}
.dpref{display:flex;flex-direction:column;gap:6px;align-items:flex-end;max-width:250px;text-align:right}
.dpref .note{font-size:.75rem;line-height:1.4}
.dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px}
.slot{display:flex;flex-direction:column;gap:8px;background:#120e30;border:1px solid var(--line);border-radius:6px;padding:10px;min-width:0}
.slot.none{opacity:.55;border-style:dashed}
.slot.none .sico{display:none}
.shead small{font-family:var(--pixel);font-size:.42rem;line-height:1.6;color:var(--ct)}
.smain{display:flex;gap:10px;align-items:flex-start}
.smain .sico{min-width:58px;height:58px;padding:0 1px}
.stxt{min-width:0}
.stxt b{display:block;font-family:var(--pixel);font-weight:400;font-size:.55rem;line-height:1.6;color:var(--fg)}
.stxt p{margin:2px 0 0;font-size:.82rem;color:var(--muted);line-height:1.4}
.stxt p.strong{color:var(--fg)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{display:inline-flex;align-items:baseline;gap:5px;background:#0b0820;border:1px solid var(--line);border-radius:3px;padding:3px 6px;font-family:var(--pixel);font-size:.42rem;line-height:1.5;white-space:nowrap}
.chip i{font-style:normal;color:var(--muted)}
.chip b{font-weight:400;color:var(--fg)}
.chip em{font-style:normal;color:var(--up)}
.chip em::before{content:"";display:inline-block;border-left:4px solid var(--up);border-block:3px solid transparent;margin:0 5px 1px 1px;vertical-align:middle}
.sup{margin:auto 0 0;font-size:.78rem;color:var(--up);line-height:1.4}
.sup::before{content:"\25B2";font-size:.7em;margin-right:5px}
@media (max-width:980px){.roles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Stats on a desktop: the same width, title, wallet and tabs as the Skins screen, with a tighter class panel
   so it fits a 1920x1080 monitor's browser window without scrolling */
@media (min-width:1280px){
  #stats .dhead{padding:8px 14px}
  #stats .portrait{width:72px;height:72px}#stats .portrait canvas{width:64px;height:64px}
  #stats .dinfo>p{margin:3px 0 5px}
  #stats .dgrid{gap:8px;padding:8px 10px}
  #stats .slot{gap:5px;padding:6px 10px}
}
@media (max-width:860px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.dhead{grid-template-columns:auto minmax(0,1fr)}.dpref{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;max-width:none;text-align:left}}
@media (max-width:560px){.roles,.dgrid{grid-template-columns:1fr}.dgrid{padding:10px}.dhead{padding:12px}.portrait{width:72px;height:72px}.portrait canvas{width:64px;height:64px}}
@supports not (grid-template-rows:subgrid){.role{display:flex;flex-direction:column}.uprow{flex:1}}
/* phones and tablets */
.btn,.tabs button,.seg button,.tog,.sndbtn,.lang button{touch-action:manipulation}
.touchtile{display:none}
@media (pointer:coarse){.touchtile{display:block}.controls .kbtile{display:none}.foot .keys{display:none}}
@media (max-width:640px){
  .overlay:not(.sub){padding-top:58px}
  .subbar{padding-top:56px}
  .wrap{gap:14px}
  .panel{padding:14px 12px}
  .tag{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){.press{animation:none}.toast{animation:none}#over .newbest:not([hidden]),#over .stats .tile{animation:none}}

/* ---------------- Main menu: brand on the left, one action panel on the right; sized by --u so it fits the screen without scrolling ---------------- */
#menu{--u:clamp(13px,min(1.06vw,1.9dvh),28px);padding-top:max(52px,calc(env(safe-area-inset-top,0px) + 48px));padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
.mwrap{font-size:var(--u);width:min(100%,74em);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34em);grid-template-areas:"brand panel";
  align-items:center;column-gap:clamp(24px,4.5em,120px);row-gap:1.1em}
.mbrand{grid-area:brand;display:flex;flex-direction:column;gap:1.1em;text-align:left;min-width:0}
#menu .logo{font-size:3.25em;line-height:1.3;text-wrap:nowrap}
#menu .logo span{animation:neon 5s ease-in-out infinite}
@keyframes neon{0%,100%{text-shadow:0 0 10px rgba(255,46,136,.7)}50%{text-shadow:0 0 18px rgba(255,46,136,.95),0 0 36px rgba(255,46,136,.35)}}
#menu .tag{margin:0;font-size:1em;max-width:36ch;line-height:1.55}
.mstats{display:flex;flex-wrap:wrap;gap:.6em}
.mstats .best{font-family:var(--pixel);font-size:.56em;line-height:1.6;color:var(--muted);background:rgba(15,11,43,.75);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:6px;padding:.8em 1.1em}
.mstats b{display:block;margin-top:.35em;font-size:1.55em;font-weight:400;color:var(--gold);text-shadow:0 0 8px rgba(255,225,77,.45)}
.mpanel{grid-area:panel;position:relative;font-size:1em;padding:1.25em 1.3em;gap:.9em;align-items:stretch;
  background:linear-gradient(180deg,rgba(0,229,255,.07),transparent 32%),var(--card);box-shadow:0 0 0 1px rgba(0,229,255,.15) inset,0 0 26px rgba(0,229,255,.22)}
.mpanel .press{font-size:.6em;text-align:center}
.mplay{display:grid;grid-template-columns:1fr 1fr;gap:.75em;align-items:start}
.mslot{display:flex;flex-direction:column;gap:.5em;align-items:stretch;min-width:0}
#menu .btn{font-size:.62em;padding:1em 1.05em}
#menu .btn.mbig{font-size:1em;text-shadow:0 2px 0 rgba(0,0,0,.35);padding:1.05em .6em;border-bottom-width:5px;box-shadow:0 0 16px rgba(255,46,136,.45)}
#menu .btn.mbig.alt{box-shadow:0 0 14px rgba(58,47,134,.9),0 0 0 1px rgba(0,229,255,.35) inset}
#menu .btn.gold{box-shadow:0 0 12px rgba(255,225,77,.3)}
.mslot>.note{font-size:.72em;text-align:center;line-height:1.35}
#menu .startroom{font-size:.5em;gap:.6em;flex-direction:column}
.srpick{display:flex;align-items:center;gap:.6em;justify-content:center;width:100%}
#menu .srpick .btn{font-size:1em;padding:.7em .85em;flex:none}
#menu .startroom b{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.mweek{display:flex;flex-direction:column;gap:.45em;padding-top:.15em}
.mweek .btn{width:100%}
#menu .weeknote{font-size:.72em;line-height:1.4;text-align:center}
.msec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5em;border-top:1px dashed var(--line);padding-top:.9em}
#menu .msec .btn{font-size:.56em;padding:1.05em .9em}
#menu .profile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7em 1em;align-items:center;padding-top:.9em;text-align:left}
#menu .field{font-size:.5em;align-items:flex-start;gap:.7em}
#menu .field .inp{font-size:16px;width:12.5em;padding:.55em .8em;text-align:left}
#menu .account{display:grid;grid-template-columns:auto auto;justify-content:start;gap:.45em .6em;align-items:center}
#menu .account .note{grid-column:1/-1;font-size:.72em;line-height:1.35;max-width:none}
#menu .account .gbtn{white-space:nowrap}
#menu .account .gbtn svg{width:1.4em;height:1.4em}
/* hover / focus / pressed: easy to see with mouse, keyboard and gamepad */
.btn{transition:filter .12s,transform .08s,box-shadow .12s}
.btn:hover:not([disabled]){filter:brightness(1.15);transform:translateY(-1px)}
.btn:active:not([disabled]){transform:translateY(2px)}
.btn:focus-visible,body.padnav .btn:focus{outline:3px solid var(--gold);outline-offset:3px;box-shadow:0 0 0 6px rgba(255,225,77,.18),0 0 18px rgba(255,225,77,.45)}
body.padnav :is(input,select,a,.tabs button,.seg button,.tog,.sndbtn,.lang button):focus{outline:3px solid var(--gold);outline-offset:2px}
.admbtn{color:var(--gold);border-color:var(--gold)}
.admbtn[hidden]{display:none}
#admin .panel.admin{gap:1em 1.4em;padding:18px}
#admin .admin .field{font-size:.5rem;color:var(--gold)}
#admin .admin .field.chk{font-family:var(--body);font-size:.85rem}
/* admin tabs: players, global, log */
.admsec{display:flex;flex-direction:column;gap:14px}
.admsec[hidden]{display:none}
.admsearch,.admrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.admsearch .inp{width:min(340px,100%)}
.admlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.admlist[hidden]{display:none}
.admp{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;background:var(--card);color:var(--fg);border:1px solid var(--line);border-left:3px solid var(--neon);border-radius:6px;padding:10px 12px;cursor:pointer;font:600 .85rem var(--body);min-width:0}
.admp:hover{filter:brightness(1.2)}
.admp.banned{border-left-color:var(--down);opacity:.8}
.admp span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admpn{font-family:var(--pixel);font-size:.55rem;color:#fff}
.admps{color:var(--muted);font-size:.78rem}
.admpv{color:var(--gold);font-size:.8rem}
.tagadm,.tagban{font-style:normal;font-family:var(--pixel);font-size:.45rem;margin-left:8px;padding:3px 5px;border-radius:3px;vertical-align:middle}
.tagadm{color:#000;background:var(--gold)}
.tagban{color:#fff;background:var(--down)}
.admcard{align-items:stretch;text-align:left}
.admhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.admhead h3{margin:0;font-family:var(--pixel);font-size:.8rem;color:#fff}
.admid{word-break:break-all;font-size:.75rem}
.admfacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:0}
.admfacts dt{font-family:var(--pixel);font-size:.42rem;color:var(--muted);margin:0}
.admfacts dd{margin:3px 0 0;font:600 .9rem var(--body);color:var(--gold)}
.admgrp{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--line);padding-top:10px}
.admsec>.admgrp{border:2px solid var(--neon);border-radius:10px;padding:18px 16px;align-items:center}
.admgrp h3,.admgrp h4{margin:0;font-family:var(--pixel);font-size:.55rem;color:var(--gold)}
.admcard .admrow{justify-content:flex-start}
.inp.num{width:150px}
.inp.wide{width:min(560px,100%)}
.btn.danger{background:var(--down);border-bottom-color:#8a0020}
.btn.warn{background:#fff;color:#000;border-bottom-color:#999}
.admlog{display:flex;flex-direction:column;gap:4px;text-align:left}
.admlogr{display:grid;grid-template-columns:130px 130px minmax(0,1fr) auto;gap:10px;font-size:.8rem;padding:6px 8px;border-bottom:1px solid var(--line);align-items:baseline}
.admlogr b{color:var(--gold);font-weight:600}
.admlt,.admla{color:var(--muted)}
.admla{font-size:.72rem;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.admlogr{grid-template-columns:1fr 1fr}}
/* admins' notice on the menu (hidden when there is none) */
.mnotice{margin:0;font:600 .9em var(--body);color:#fff;background:rgba(255,225,77,.12);border:1px solid var(--gold);border-radius:6px;padding:.7em 1em;max-width:36em;line-height:1.4;overflow-wrap:anywhere}
.mnotice[hidden]{display:none}
#help .tag{max-width:62ch}
/* narrow or portrait: one column, brand on top */
@media (max-width:900px),(max-aspect-ratio:1/1){
  #menu{--u:clamp(13px,min(2.3vw,1.75dvh),20px)}
  .mwrap{grid-template-columns:minmax(0,36em);grid-template-areas:"brand" "panel";justify-content:center}
  .mbrand{text-align:center;align-items:center;gap:.8em}
  #menu .logo{font-size:min(2.9em,8.4vw)}
  .mstats{justify-content:center}
}
@media (max-width:420px){
  .mplay{grid-template-columns:1fr}
  #menu .profile{grid-template-columns:1fr}
  #menu .field .inp{width:100%}
}
@media (prefers-reduced-motion:reduce){#menu .logo span{animation:none}.btn{transition:none}.btn:hover:not([disabled]){transform:none}}

/* game version, bottom-left of the start screen (also in CHANGELOG.md and the git tag) */
#menu .mver{position:fixed;left:14px;bottom:10px;margin:0;font-family:var(--pixel);font-size:.5rem;letter-spacing:.08em;color:var(--muted);opacity:.7;pointer-events:none}
@media(max-width:700px){#menu .mver{position:static;text-align:center;margin:.4em 0 0}}