:root{
  --ink:#1b1030; --paper:#fdf6e3; --hot:#ff4d6d; --sun:#ffd166; --sky:#4cc9f0; --grass:#80ed99; --violet:#7b2cbf;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);font-family:'Nunito',sans-serif;color:var(--paper);user-select:none}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:10;background:radial-gradient(ellipse at 50% 28%, #191233 0%, #07070d 75%)}
.hidden{display:none !important}
h1.logo{font-family:'Press Start 2P',monospace;font-size:clamp(22px,4.5vw,52px);line-height:1.25;text-align:center;
  color:var(--sun); text-shadow:0 4px 0 var(--hot), 0 8px 0 #7b2cbf, 0 14px 30px rgba(0,0,0,.6);
  transform:rotate(-3deg); letter-spacing:2px}
h1.logo small{display:block;font-size:.25em;color:var(--sky);text-shadow:0 3px 0 #1b4965;transform:rotate(1.5deg);margin-top:8px;letter-spacing:6px}
.menu{display:flex;flex-direction:column;gap:12px;min-width:320px;align-items:stretch}
button.big{font-family:'Press Start 2P',monospace;font-size:13px;padding:14px 34px;border:none;border-radius:16px;cursor:pointer;
  color:var(--ink);background:var(--sun);box-shadow:0 6px 0 #c99700, 0 10px 18px rgba(0,0,0,.4);transition:transform .08s, box-shadow .08s;letter-spacing:1px}
button.big:hover{transform:translateY(-2px) rotate(-1deg)}
button.big:active{transform:translateY(4px);box-shadow:0 2px 0 #c99700}
button.big.alt{background:var(--sky);box-shadow:0 6px 0 #1b6f94,0 10px 18px rgba(0,0,0,.4)}
button.big.alt:active{box-shadow:0 2px 0 #1b6f94}
button.big.hot{background:var(--hot);color:#fff;box-shadow:0 6px 0 #a3122e,0 10px 18px rgba(0,0,0,.4)}
button.big.hot:active{box-shadow:0 2px 0 #a3122e}
button.big:disabled{filter:grayscale(.8);cursor:not-allowed;transform:none}
.row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
label.fld{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--sky)}
input[type=text]{font-family:'Nunito';font-weight:900;font-size:20px;padding:10px 14px;border-radius:12px;border:3px solid var(--violet);background:#120a24;color:var(--paper);width:220px;text-align:center;letter-spacing:2px}
input[type=text]:focus{outline:none;border-color:var(--sun)}
select{font-family:'Nunito';font-weight:900;font-size:18px;padding:10px;border-radius:12px;border:3px solid var(--violet);background:#120a24;color:var(--paper)}
.card{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);border-radius:20px;padding:22px 28px;backdrop-filter:blur(4px)}
.hint{font-size:13px;opacity:.75;text-align:center;max-width:520px;line-height:1.5}
.hint b{color:var(--sun)}
#hud{position:absolute;inset:0;pointer-events:none;z-index:5}
#roundBanner{position:absolute;top:18%;width:100%;text-align:center;font-family:'Press Start 2P';font-size:clamp(16px,3.4vw,34px);line-height:1.5;color:var(--sun);text-shadow:0 4px 0 var(--hot),0 8px 20px rgba(0,0,0,.7);opacity:0;transition:opacity .3s;transform:rotate(-2deg)}
#scoreStrip{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:10px}
.scoreChip{display:flex;align-items:center;gap:8px;background:rgba(10,5,25,.72);border-radius:999px;padding:5px 14px 5px 6px;font-weight:900;font-size:15px;border:2px solid rgba(255,255,255,.15)}
.scoreChip .dot{width:22px;height:22px;border-radius:50%;border:2px solid #fff}
.scoreChip.dead{opacity:.45;text-decoration:line-through}
.scoreChip .pts{color:var(--sun);font-family:'Press Start 2P';font-size:11px}
#ammoBox{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(10,5,25,.72);border-radius:14px;padding:8px 18px;font-weight:900;font-size:16px;border:2px solid rgba(255,255,255,.15);display:none}
#ammoBox .wname{color:var(--sun);font-family:'Press Start 2P';font-size:11px;letter-spacing:1px;margin-right:10px}
#netStatus{position:absolute;bottom:12px;right:14px;font-size:12px;font-weight:700;opacity:.7}
#roomCodeHud{position:absolute;top:12px;right:14px;font-size:13px;font-weight:900;background:rgba(10,5,25,.72);padding:6px 12px;border-radius:10px;border:2px solid rgba(255,255,255,.15);display:none}
#roomCodeHud b{color:var(--sun);letter-spacing:2px}
#lobbyList{display:flex;flex-direction:column;gap:8px;min-width:300px}
.lobbyRow{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);padding:8px 14px;border-radius:12px;font-weight:900}
.lobbyRow .dot{width:18px;height:18px;border-radius:50%;border:2px solid #fff}
.tag{font-size:11px;background:var(--violet);padding:2px 8px;border-radius:999px;margin-left:auto}
#matchOver{z-index:12}
#winnerName{font-family:'Press Start 2P';font-size:clamp(20px,4vw,44px);line-height:1.4;color:var(--sun);text-shadow:0 5px 0 var(--hot),0 10px 24px #000;transform:rotate(-2deg)}
.finalScores{display:flex;flex-direction:column;gap:6px;font-weight:900;font-size:20px;min-width:280px}
.finalScores .frow{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.07);border-radius:10px;padding:6px 16px}
.finalScores .dot{width:20px;height:20px;border-radius:50%;border:2px solid #fff}
.finalScores .p{margin-left:auto;color:var(--sun);font-family:'Press Start 2P';font-size:13px}
#toasts{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column-reverse;gap:6px;z-index:6;pointer-events:none}
.toast{background:rgba(10,5,25,.8);border-left:4px solid var(--hot);padding:6px 12px;border-radius:8px;font-weight:700;font-size:13px;animation:toastIn .2s ease-out}
@keyframes toastIn{from{transform:translateX(-20px);opacity:0}to{transform:none;opacity:1}}
.subttl{font-family:'Press Start 2P';font-size:16px;color:var(--sky);letter-spacing:1px}
#editorBar{position:absolute;top:10px;left:10px;z-index:9;display:flex;flex-direction:column;gap:6px;background:rgba(8,5,18,.85);padding:10px;border-radius:12px;border:2px solid rgba(255,255,255,.15);max-width:270px}
#editorBar .edrow{display:flex;gap:5px;flex-wrap:wrap}
.edbtn{font-family:'Press Start 2P',monospace;font-size:9px;padding:8px 9px;border:none;border-radius:8px;cursor:pointer;background:#2b2440;color:var(--paper);box-shadow:0 3px 0 #171126}
.edbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #171126}
.edbtn.on{background:var(--sun);color:var(--ink);box-shadow:0 3px 0 #c99700}
.edbtn.go{background:var(--grass);color:var(--ink);box-shadow:0 3px 0 #3f9e58}
.edbtn.hotb{background:var(--hot);color:#fff;box-shadow:0 3px 0 #a3122e}
#edName{font-family:'Press Start 2P';font-size:11px;padding:8px;border-radius:8px;border:2px solid var(--violet);background:#120a24;color:var(--sun);width:100%;text-align:center}
#edStatus{font-size:12px;font-weight:700;line-height:1.5;opacity:.9;min-height:18px;max-width:250px}
#edIOText{width:min(620px,90vw);height:180px;font-family:monospace;font-size:11px;background:#120a24;color:var(--paper);border:2px solid var(--violet);border-radius:10px;padding:10px}
.maptoggle{font-size:13px;font-weight:700;display:flex;gap:8px;align-items:center;justify-content:center;color:var(--sky)}
.maptoggle input{width:16px;height:16px;accent-color:var(--sun)}
.padfocus{outline:3px solid var(--sun) !important;outline-offset:3px;border-radius:6px}
#controlsMenu{justify-content:flex-start;padding:20px 12px;gap:12px;overflow-y:auto}
.ctabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ctab{font-family:'Press Start 2P';font-size:10px;padding:11px 15px;border-radius:10px;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--paper);cursor:pointer}
.ctab.on{border-color:var(--sun);background:rgba(255,209,102,.14);color:var(--sun)}
.cpage{display:flex;flex-direction:column;align-items:center;gap:12px}
.cdiag{width:min(660px,92vw);height:auto}
.cdiag .ck{font-family:'Press Start 2P',monospace;font-size:15px;fill:#1b1030;text-anchor:middle}
.cdiag .ck.sm{font-size:10px}
.cdiag .ck.lt{fill:#fdf6e3}
.cdiag .cl{font-family:'Press Start 2P',monospace;font-size:9px;fill:#4cc9f0;text-anchor:middle;letter-spacing:1px}
.clegend{display:grid;grid-template-columns:1fr 1fr;gap:7px 22px;max-width:min(720px,94vw)}
.clegend .li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.45;opacity:.92}
.clegend .li.wide{grid-column:1/-1}
.clegend .sw{width:12px;height:12px;border-radius:3px;flex:none;margin-top:4px;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.clegend b{font-family:'Press Start 2P';font-size:9px;letter-spacing:.5px;color:var(--sun);line-height:1.9}
@media (max-width:760px){ .clegend{grid-template-columns:1fr} }
.padedit{outline:3px solid var(--grass) !important;outline-offset:3px;animation:editpulse 1s infinite}
@keyframes editpulse{50%{outline-color:rgba(128,237,153,.35)}}
#touchUI{position:absolute;inset:0;pointer-events:none;z-index:7;touch-action:none;-webkit-user-select:none;user-select:none}
#touchUI>*{pointer-events:auto;touch-action:none}
.tstick{position:absolute;bottom:24px;left:24px;width:124px;height:124px;border-radius:50%;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.22)}
.tstick.right{left:auto;right:24px}
.tnub{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.38);transition:transform .04s}
.tstick.right .tnub{background:rgba(255,107,157,.28);border-color:rgba(255,107,157,.6)}
.tbtn{position:absolute;font-family:'Press Start 2P';font-size:9px;color:var(--paper);background:rgba(255,255,255,.09);border:2px solid rgba(255,255,255,.28);border-radius:50%;width:74px;height:74px;padding:0}
.tbtn:active{background:rgba(255,209,102,.3)}
#tJump{right:172px;bottom:110px}
#tGrab{right:64px;bottom:168px}
#tQuack{right:186px;bottom:34px;width:54px;height:54px;font-size:8px}
#tMenu{top:10px;right:10px;width:44px;height:44px;border-radius:10px;font-size:16px;font-family:'Nunito'}
html,body{overscroll-behavior:none}
.sumline{font-family:'Press Start 2P';font-size:9px;color:var(--sky);background:rgba(76,201,240,.1);border:2px solid rgba(76,201,240,.35);border-radius:999px;padding:8px 18px;letter-spacing:1px;line-height:1.8;text-align:center;max-width:90vw}
.modrow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.setrow{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:stretch;max-width:980px}
.setpanel{background:rgba(8,5,18,.55);border:2px solid rgba(255,255,255,.13);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.setpanel.grow{flex:1;min-width:300px;max-width:520px}
.setpanel.rules{min-width:260px}
.setlabel{font-family:'Press Start 2P';font-size:11px;color:var(--sky);letter-spacing:1px;line-height:1.6}
.setlabel small{display:block;font-family:'Nunito';font-size:11px;opacity:.7;text-transform:none;letter-spacing:0}
.mutquick{display:flex;gap:8px;justify-content:flex-end}
.modecard{display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(8,5,18,.55);border:2px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 14px;cursor:pointer;width:190px;text-align:center;transition:border-color .1s,transform .1s;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.modecard canvas{image-rendering:pixelated;width:44px;height:44px}
.modecard b{font-family:'Press Start 2P';font-size:11px;color:var(--paper)}
.modecard span{font-size:12px;opacity:.75;line-height:1.35}
.modecard.on{border-color:var(--sun);background:rgba(255,209,102,.1);transform:translateY(-3px)}
.modecard.on b{color:var(--sun)}
.rule{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rule>span{font-family:'Press Start 2P';font-size:9px;color:var(--paper);opacity:.85}
.stepper{display:flex;align-items:center;gap:2px;background:#120a24;border:2px solid var(--violet);border-radius:10px;padding:2px}
.stepper .val{font-family:'Press Start 2P';font-size:10px;color:var(--sun);min-width:86px;text-align:center}
.stepper .arr{font-family:'Nunito';font-weight:900;font-size:13px;color:var(--paper);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:7px}
.stepper .arr:active{background:rgba(255,255,255,.15)}
.mchip.wide{width:100%;font-size:9px;display:flex;justify-content:space-between;align-items:baseline;text-align:left;padding:10px 12px}
.mchip.wide small{margin:0}
#tourSlots{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:640px}
.tslot{display:flex;gap:6px;align-items:center}
.tslot input{font-family:'Press Start 2P';font-size:10px;padding:8px;border-radius:8px;border:2px solid var(--violet);background:#120a24;color:var(--paper);width:130px}
.tslot .ttype{font-family:'Press Start 2P';font-size:8px;padding:8px 6px;border-radius:8px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:var(--paper);cursor:pointer;min-width:70px;text-align:center}
.tslot .ttype.human{border-color:var(--grass);color:var(--grass)}
.tslot .ttype.bot{border-color:var(--sky);color:var(--sky)}
#bracketWrap{display:flex;gap:26px;align-items:center;max-width:95vw;overflow-x:auto;padding:10px}
.brRound{display:flex;flex-direction:column;gap:16px;justify-content:space-around}
.brMatch{background:rgba(8,5,18,.6);border:2px solid rgba(255,255,255,.15);border-radius:10px;min-width:150px}
.brMatch.next{border-color:var(--sun);box-shadow:0 0 14px rgba(255,209,102,.35)}
.brP{font-family:'Press Start 2P';font-size:9px;padding:8px 10px;color:var(--paper);opacity:.55}
.brP.win{color:var(--sun);opacity:1}
.brP.tbd{opacity:.3}
.brP+.brP{border-top:1px solid rgba(255,255,255,.12)}
.champ{font-family:'Press Start 2P';font-size:14px;color:var(--sun);text-align:center;line-height:2}
.mutgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mchip{font-family:'Press Start 2P';font-size:8px;padding:9px 6px;border-radius:9px;border:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);cursor:pointer;text-align:center;line-height:1.5;color:var(--paper)}
.mchip small{display:block;font-family:'Nunito';font-size:10px;opacity:.65;margin-top:2px}
.mchip.on{border-color:var(--grass);background:rgba(128,237,153,.14);color:var(--grass)}
#awards{display:flex;flex-direction:column;gap:4px;min-width:300px}
#awards .aw{display:flex;gap:10px;align-items:baseline;background:rgba(255,209,102,.1);border-radius:8px;padding:5px 14px;font-weight:900;font-size:14px}
#awards .aw b{font-family:'Press Start 2P';font-size:9px;color:var(--sun)}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} }

/* ---- matchmaking UI ---- */
.onlinebadge{display:inline-block;font-family:'Nunito';font-size:12px;font-weight:900;color:var(--ink);background:var(--sun);border-radius:999px;padding:1px 9px;margin-left:6px;vertical-align:middle}
.onlinebadge.off{background:#6b7280;color:#fdf6e3}
.searchspin{font-size:64px;animation:searchbob 1s ease-in-out infinite}
@keyframes searchbob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(6deg)}}
.roomlist{display:flex;flex-direction:column;gap:8px;width:min(560px,92vw);max-height:52vh;overflow-y:auto}
.roomrow{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.13);border-radius:12px;padding:10px 14px;cursor:pointer}
.roomrow:hover,.roomrow.padfocus{border-color:var(--sun)}
.roomrow .rcode{font-family:'Press Start 2P';font-size:14px;color:var(--sun);letter-spacing:2px}
.roomrow .rhost{flex:1;font-weight:700;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roomrow .rmode{font-size:11px;opacity:.6;text-transform:uppercase;letter-spacing:1px}
.roomrow .rcount{font-family:'Press Start 2P';font-size:11px}
.roomrow .rstatus{font-family:'Press Start 2P';font-size:8px;padding:4px 8px;border-radius:6px}
.rstatus.open{background:rgba(128,237,153,.2);color:var(--grass)}
.rstatus.ingame{background:rgba(255,209,102,.2);color:var(--sun)}
.rstatus.full{background:rgba(255,77,109,.2);color:var(--hot)}
.roomrow.dim{opacity:.5;cursor:default}
.mchip#lobbyVis.on{border-color:var(--grass);color:var(--grass);background:rgba(128,237,153,.14)}

/* ---- main menu grid + name nag + discord ---- */
.nameNag{font-size:13px;font-weight:800;color:var(--hot);min-height:16px;text-align:center;letter-spacing:.5px}
.discordLink{display:inline-block;margin-top:14px;color:#a9b0f5;font-weight:800;font-size:14px;text-decoration:none;opacity:.85}
.discordLink:hover{opacity:1;text-decoration:underline;color:#c3c8ff}

/* stepper "editing" mode (controller): distinct from plain focus */
.stepper.stepediting{outline:3px solid var(--grass);outline-offset:3px;border-radius:8px;animation:editpulse 1s infinite}