:root{--bg:#000;--bg2:#0b0b0b;--panel:#0d0f0e;--fg:#fff;--muted:#8d9490;--mint:#9DDFB0;--orange:#ff8a1f;--cheese:#ffcf3a;--red:#ff5a6a;--line:#1e1f1e;--line2:#2c2e2c;--font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;--px:"Silkscreen","Press Start 2P",ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{display:flex;flex-direction:column;height:100dvh}
.bar{flex:none;display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12px;background:var(--bg2);border-bottom:1px solid var(--line)}
.bar a{color:var(--mint);text-decoration:none;font-weight:600;white-space:nowrap}
.bar a:hover{text-decoration:underline;text-underline-offset:3px}
.bar .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-family:var(--px);font-size:12px;letter-spacing:.08em}
.bar .ttl a{font-family:var(--font);font-size:12px;letter-spacing:0;margin-left:4px}
.bar .sp{flex:1}
.net{font:10px var(--px);color:var(--mint);white-space:nowrap;border:1px solid rgba(157,223,176,.35);border-radius:999px;padding:4px 8px}
.mini{font:600 12px var(--font);color:var(--fg);background:transparent;border:1px solid var(--line2);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.mini:hover,.mini:focus-visible{border-color:var(--mint);outline:none}
.mini[aria-pressed=true]{background:var(--mint);color:#04120a;border-color:var(--mint)}
footer{flex:none;padding:5px 10px calc(5px + env(safe-area-inset-bottom));font-size:10px;line-height:1.5;color:var(--muted);text-align:center;background:var(--bg2);border-top:1px solid var(--line)}

#stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;touch-action:none}
#game{position:relative;flex:none;touch-action:none;box-shadow:0 0 0 1px rgba(157,223,176,.22),0 0 50px rgba(157,223,176,.07)}
#cv{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated;touch-action:none;background:#050806}

/* touch buttons (BUTTONS scheme) */
#pads{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:10px 10px 12px;pointer-events:none;z-index:2}
/* landscape: the pads sit in the black side gutters, never over the playfield */
#stage.land > #pads{padding:0 calc(14px + env(safe-area-inset-right)) 14px calc(14px + env(safe-area-inset-left));z-index:3}
#pads[hidden]{display:none}
#pads .pl,#pads .pr{display:flex;gap:8px;align-items:flex-end;pointer-events:auto}
.pad{font:700 13px var(--px);letter-spacing:.05em;color:var(--mint);background:rgba(5,10,7,.55);border:1px solid rgba(157,223,176,.7);border-radius:20px;width:66px;height:66px;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:pointer;padding:0;-webkit-user-select:none;user-select:none}
.pad.sm{width:48px;height:48px;border-radius:16px;border-color:rgba(157,223,176,.4)}
.pad.jmp{width:96px;height:96px;border-radius:28px;background:rgba(157,223,176,.85);color:#04120a}
.pad.on{transform:translateY(2px);filter:brightness(.8)}
.ar{width:0;height:0;display:block}
.ar.lf{border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:17px solid currentColor}
.ar.rt{border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:17px solid currentColor}
.ar.dw{border-left:10px solid transparent;border-right:10px solid transparent;border-top:13px solid currentColor}

/* overlays */
#ui{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10px;z-index:5;pointer-events:none;overflow:auto;touch-action:pan-y}
#ui.on{pointer-events:auto;background:rgba(0,0,0,.66)}
.panel{pointer-events:auto;width:min(94vw,420px);margin:auto;padding:18px 16px;text-align:center;background:rgba(10,13,11,.94);border:1px solid rgba(157,223,176,.35);border-radius:18px;box-shadow:0 0 60px rgba(157,223,176,.12)}
.panel.wide{width:min(96vw,560px)}
.panel[hidden]{display:none}
.logo{margin:0;font:11px var(--px);letter-spacing:.16em;color:var(--mint)}
h1{margin:6px 0 8px;font:700 clamp(46px,15vw,76px)/.9 var(--px);letter-spacing:.02em;color:#fff;text-shadow:0 0 0 #000,4px 4px 0 #3f8f5a,0 0 40px rgba(157,223,176,.4)}
h3{margin:0 0 8px;font:clamp(15px,4.6vw,20px) var(--px);color:var(--mint);letter-spacing:.08em}
.sub{font-size:13px;color:#c6ccc8;line-height:1.55;margin:0 0 12px}
.small{font-size:11px;color:var(--muted);margin:8px 0;line-height:1.55}
.small b{color:var(--cheese)}
.btn{display:inline-block;font:700 14px var(--px);letter-spacing:.06em;color:#04120a;background:var(--mint);border:1px solid var(--mint);border-radius:999px;padding:13px 22px;cursor:pointer;min-width:200px;text-decoration:none;touch-action:manipulation;box-shadow:0 0 30px rgba(157,223,176,.25)}
.btn:hover,.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn:active{transform:translateY(1px);filter:brightness(.9)}
.btn.sm{font-size:12px;min-width:0;padding:11px 18px}
.btn.ghost{background:#080808;color:#fff;border-color:var(--line2);box-shadow:none}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--mint);outline:none}
.btn:disabled{opacity:.4;cursor:default}
.rowb{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:10px}

.title{background:linear-gradient(180deg,rgba(5,8,6,.55),rgba(5,8,6,.9) 55%);border-color:rgba(157,223,176,.25)}
.title .tb{display:flex;flex-direction:column;align-items:center;gap:8px}
.title .tb .btn{width:min(100%,300px)}
.ctl{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;font:10px var(--px);color:var(--muted)}
.seg{font:10px var(--px);color:#fff;background:#080808;border:1px solid var(--line2);border-radius:999px;padding:7px 11px;cursor:pointer}
.seg[aria-pressed=true]{background:var(--mint);color:#04120a;border-color:var(--mint)}
.how{width:100%;text-align:left;font-size:12px;line-height:1.5;color:#d3d9d5;margin-top:4px}
.how summary{cursor:pointer;font:11px var(--px);color:var(--mint);text-align:center;list-style:none;padding:6px}
.how summary::-webkit-details-marker{display:none}
.how p{margin:0 0 6px}
.how b{font:10px var(--px);color:var(--mint);letter-spacing:.04em}

.mc{margin:2px 0 4px;font:700 clamp(30px,9vw,44px) var(--px);color:var(--mint);text-shadow:3px 3px 0 #1d4a2c}
#ovCard{display:block;width:100%;height:auto;border-radius:10px;border:1px solid rgba(157,223,176,.3);margin:6px 0 2px;background:#050806}
.tbl{width:100%;border-collapse:collapse;margin:10px 0 4px;font-size:12px}
.tbl th{font:9px var(--px);color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line2)}
.tbl td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl td.n{text-align:right;font-family:var(--px);font-size:11px}
.tbl tr.me td{color:var(--mint);font-weight:700}
.tbl caption{font:10px var(--px);color:var(--mint);text-align:left;padding:4px 6px;letter-spacing:.06em}
.tag{display:inline-block;font:8px var(--px);color:#9aa39e;border:1px solid #3a3f3c;border-radius:4px;padding:1px 3px;margin-left:5px;vertical-align:1px}
.roster{list-style:none;padding:0;margin:8px 0;text-align:left;font-size:13px}
.roster li{padding:5px 8px;border-bottom:1px solid var(--line)}
.roster li.me{color:var(--mint);font-weight:700}
.setup input{width:100%;font:16px var(--font);color:#fff;background:#060606;border:1px solid var(--line2);border-radius:12px;padding:12px;text-align:center;margin:4px 0}
.setup input:focus{outline:none;border-color:var(--mint)}
.cd{font:700 46px var(--px);color:var(--cheese);margin:6px 0}

#toast{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:6;font:11px var(--px);color:#04120a;background:var(--mint);border-radius:999px;padding:7px 12px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1}

/* arcade BUG / IDEA button (widget injects its own CSS only when first opened; match it up front) */
.bar .rfb-btn{font:700 11px/1 system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.04em;color:#000;background:#ffcf3a;border:2px solid #000;border-radius:999px;padding:6px 10px;cursor:pointer;white-space:nowrap;flex:none}
@media (max-width:480px){
  .bar{gap:6px;padding:7px 8px}
  .bar .ttl a{display:none}
  .mini{padding:6px 9px;font-size:11px}
  .bar .rfb-btn{padding:6px 8px}
}
@media (max-width:360px){ .bar .rfb-btn .rfb-l{display:none} }

/* online: tags, host controls, emotes, trophies, awards */
.tag.you{color:#04120a;background:var(--mint);border-color:var(--mint)}
.tag.hosttag{color:var(--cheese);border-color:rgba(255,207,58,.6)}
.tag.champ{color:#2a1d00;background:var(--cheese);border-color:var(--cheese)}
.dim{color:var(--muted);font-style:normal}
.roster li .tag{margin-left:6px}
.host{margin:8px 0 6px;padding:10px;border:1px solid rgba(157,223,176,.25);border-radius:14px;background:rgba(0,0,0,.35);display:flex;flex-direction:column;gap:8px;align-items:center}
.host .hrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;font:10px var(--px);color:var(--muted)}
.host .hrow>span{min-width:46px;text-align:right}
.host .hval{font:12px var(--px);color:#fff;min-width:18px;text-align:center}
.host .btn{width:min(100%,280px)}
.rowb.tight{margin-top:0}
.emos,.emorow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 2px}
.emo{font:10px var(--px);letter-spacing:.04em;color:#04120a;background:#fff;border:1px solid #fff;border-radius:999px;padding:7px 10px;cursor:pointer;touch-action:manipulation}
.emo:hover,.emo:focus-visible{background:var(--mint);border-color:var(--mint);outline:none}
#emoBox{position:absolute;right:calc(8px + env(safe-area-inset-right));top:8px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:calc(100% - 16px)}
#emoBox .emo.tog{background:rgba(0,0,0,.6);color:#fff;border-color:rgba(255,255,255,.5)}
#emoBox .emorow{margin:0;justify-content:flex-end;max-width:260px}
.troph{list-style:none;padding:0;margin:8px 0;text-align:left;font-size:12px;max-height:min(56vh,460px);overflow:auto}
.troph li{display:flex;flex-direction:column;gap:2px;padding:7px 8px;border-bottom:1px solid var(--line);color:var(--muted)}
.troph li b{font:10px var(--px);letter-spacing:.05em;color:#6b726e}
.troph li.got b{color:var(--cheese)}
.troph li.got{color:#d3d9d5}
.troph li.got b::after{content:" \2713";color:var(--mint)}
.awards{list-style:none;padding:0;margin:6px 0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:11px}
.awards li{border:1px solid rgba(255,207,58,.35);border-radius:999px;padding:4px 9px;color:#d3d9d5}
.awards li b{font:9px var(--px);color:var(--cheese);margin-right:6px}
.next b{font-family:var(--px);color:var(--cheese)}
#netNameErr.err,#codeErr.err{color:var(--red)}
.setup input.code{font:20px var(--px);letter-spacing:.3em;text-transform:uppercase}
.code{font-family:var(--px);letter-spacing:.08em}
.net{cursor:pointer}
@media (max-width:480px){ .host .hrow>span{min-width:0;width:100%;text-align:center} }
.title .tb .rowb.tight{width:min(100%,300px);flex-wrap:nowrap}
.title .tb .rowb.tight .btn{flex:1;width:auto;min-width:0;padding:11px 8px}
.title .tb #bTroph{width:auto;min-width:0;color:var(--cheese);border-color:rgba(255,207,58,.45)}
/* phones: lobby / results panels keep the bottom free for the chat button (the panel scrolls clear of it) */
body.chat-under #ui.on{padding-bottom:64px}
body.chat-under .rcht:not(.rcht-open) .rcht-log{max-height:76px}

/* wide screens: the painted chart panels fill the black side gutters (layout() in game.js sizes + shows them; the
   image URLs only resolve once a panel is shown, so phones never download them). Dimmed and vignetted toward the
   outer edge so the play column stays the focus; the climb slides them slowly (translateY on the inner layer). */
.side{position:absolute;top:0;bottom:0;overflow:hidden;pointer-events:none;z-index:0;background:#000}
.side i{position:absolute;left:0;right:0;top:0;height:112%;background:center/cover no-repeat;transform:translate3d(0,-10.7%,0);will-change:transform}
.side.on.l i{background-image:url(assets/panel-left.webp)}
.side.on.r i{background-image:url(assets/panel-right.webp)}
.side::after{content:"";position:absolute;inset:0}
.side.l::after{background:linear-gradient(180deg,rgba(0,0,0,.72) 0,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 72%,rgba(0,0,0,.9) 100%),linear-gradient(90deg,#000 0,rgba(0,0,0,.68) 34%,rgba(0,0,0,.56) 86%,rgba(0,0,0,.85) 100%)}
.side.r::after{background:linear-gradient(180deg,rgba(0,0,0,.72) 0,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 72%,rgba(0,0,0,.9) 100%),linear-gradient(270deg,#000 0,rgba(0,0,0,.68) 34%,rgba(0,0,0,.56) 86%,rgba(0,0,0,.85) 100%)}
@media (prefers-reduced-motion:reduce){ .side i{will-change:auto} }

/* title / trophies / online lobby: the painted key art behind the menu, dimmed top + bottom for the logo and buttons */
#ui.on.art{background:linear-gradient(180deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.4) 32%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.88) 100%),url(assets/keyart.webp) center 35%/cover no-repeat #000}
#ui.on.art .title{background:linear-gradient(180deg,rgba(5,8,6,.42),rgba(5,8,6,.86) 48%)}

/* brand wordmark on the title card (same family as SEWER SHOWDOWN / RAT STRIKE: site/rat/assets/logo-*.webp) */
.logo-h1{margin:6px 0;line-height:0}
.logo-h1 img{display:block;width:auto;height:auto;max-width:min(100%,80vw,560px);max-height:clamp(64px,24vh,220px);margin:0 auto;filter:drop-shadow(0 4px 14px #000)}
.logo-h1 span{line-height:1.2}
/* practice-chip stake of a private room (shared/wager.js stakePicker) */
#rrStake{margin:10px auto 4px;max-width:420px;text-align:left}
#rrStake:empty{display:none}
.title .tb .rat-live{width:min(100%,300px);margin:0;font-family:var(--font)}
.title .tb .rat-live .lj{padding:6px 10px}