:root{
  color-scheme:dark;
  --ink:#0d1628;
  --ink2:#132038;
  --panel:rgba(13,22,40,.86);
  --panel2:rgba(26,40,68,.92);
  --solid:#15223b;
  --solid2:#1c2c4a;
  --line:rgba(255,255,255,.13);
  --blue:#2f8bff;
  --red:#ff4b3e;
  --gold:#ffcf33;
  --gold2:#e0a100;
  --mint:#5fe07c;
  --dust:#c9a7ff;
  --txt:#f3f6ff;
  --muted:#a3b3d3;
  --display:'Lilita One','Arial Black',Impact,sans-serif;
  --body:Nunito,'Segoe UI',system-ui,sans-serif;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}
html,body{height:100%;margin:0;background:var(--ink);overflow:hidden}
[hidden]{display:none!important}
#app{position:fixed;inset:0;font-family:var(--body);color:var(--txt);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overflow:hidden;background:var(--ink)}
#game,#game canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
button{font-family:var(--body);cursor:pointer;color:inherit}
button:disabled{cursor:not-allowed;opacity:.5}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
input,select{font-family:var(--body);font-weight:800;font-size:16px;color:var(--txt);background:var(--ink);border:2px solid var(--line);border-radius:9px;padding:10px 12px;user-select:text;-webkit-user-select:text}
.out{text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 1px #000}
.muted{color:var(--muted);font-weight:800}
.note{font-size:12px;color:var(--muted);font-weight:700;margin:0}
.note.warn{color:#ffb4ab}
.card{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:18px 20px;box-sizing:border-box}
.bigBtn{font-family:var(--display);font-size:20px;border:0;border-radius:10px;padding:10px 20px;background:var(--gold);color:#3a2800;box-shadow:0 4px 0 var(--gold2)}
.bigBtn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--gold2)}
.bigBtn.alt{background:var(--solid2);color:var(--txt);border:2px solid var(--line);box-shadow:none}
.ghostBtn{background:transparent;border:2px solid var(--line);border-radius:8px;padding:6px 12px;font-weight:900;font-size:13px}
.linkBtn{background:none;border:0;color:var(--muted);font-weight:800;text-decoration:underline;padding:6px}
.btnS{border:0;border-radius:8px;padding:7px 12px;font-weight:900;font-size:13px;background:var(--gold);color:#3a2800}
.btnS.alt{background:var(--solid2);color:var(--txt);border:1px solid var(--line)}
.seg{display:flex;background:var(--ink);border-radius:9px;padding:3px;gap:3px}
.seg button{border:0;background:transparent;font-weight:900;padding:8px 12px;border-radius:7px;font-size:13px;flex:1}
.seg button.sel{background:var(--gold);color:#3a2800}
.coin,.dust{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,var(--gold) 45%,var(--gold2));box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.dust{border-radius:3px;transform:rotate(45deg) scale(.85);background:linear-gradient(135deg,#f0e2ff,var(--dust))}
.logo{font-family:var(--display);font-weight:400;font-size:clamp(46px,9vw,92px);line-height:.88;margin:0;text-shadow:0 6px 0 rgba(0,0,0,.35)}
.logo .a,.brandS .a{color:#fff}.logo .n,.brandS .n{color:var(--gold);font-size:.62em;vertical-align:.18em;margin:0 .06em}.logo .c,.brandS .c{color:var(--red)}
.tag{font-weight:900;font-size:clamp(15px,2vw,19px);color:#dce6ff;margin:10px 0 0}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;overflow:auto;background:linear-gradient(180deg,rgba(13,22,40,.35),rgba(13,22,40,.9) 50%,rgba(13,22,40,.97));touch-action:pan-y}
.authWrap{min-height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;padding:calc(var(--sat) + 24px) 16px calc(var(--sab) + 24px)}
.authCard{width:min(380px,100%);display:flex;flex-direction:column;gap:8px}
.authCard label{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:6px}
.seg.wide{margin-bottom:6px}
.err{color:#ffb4ab;font-weight:800;font-size:13px;min-height:18px;margin:4px 0 0}
.hintTxt{font-size:12px;color:var(--muted);font-weight:700;margin:2px 0 0}

#topbarL{display:flex;align-items:center;gap:16px;padding:calc(var(--sat) + 10px) 16px 10px;background:rgba(13,22,40,.92);border-bottom:2px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brandS{font-family:var(--display);font-size:24px;margin-right:auto}
.me{display:flex;align-items:center;gap:8px}
.lvl{width:36px;height:36px;border-radius:9px;background:var(--gold);color:#3a2800;font-family:var(--display);font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:inset -3px -3px 0 rgba(0,0,0,.18)}
.meInfo b{font-size:15px}
.xpbar{width:120px;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:3px}
.xpbar i{display:block;height:100%;background:var(--mint)}
.cur{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.cur b{font-size:16px}.cur small{color:var(--muted);font-weight:800}
.onl{font-size:12px;color:var(--muted);font-weight:800}
#tabs{display:flex;gap:4px;padding:10px 16px 0;overflow-x:auto;scrollbar-width:none}
#tabs button{border:0;background:transparent;font-weight:900;font-size:14px;padding:10px 14px;border-radius:9px 9px 0 0;color:var(--muted);white-space:nowrap;position:relative}
#tabs button.sel{background:var(--solid);color:var(--txt)}
#tabs .dot{position:absolute;top:6px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red)}
#tabBody{background:var(--solid);margin:0 16px calc(var(--sab) + 90px);border-radius:0 12px 12px 12px;padding:18px;min-height:60vh;box-sizing:border-box}
.secT{font-family:var(--display);font-weight:400;font-size:22px;margin:0 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.secT small{font-family:var(--body);font-size:13px;color:var(--muted);font-weight:800}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.box{background:var(--solid2);border:1px solid var(--line);border-radius:12px;padding:14px}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;border-radius:99px;padding:3px 8px;background:rgba(255,255,255,.1)}
.pill.gold{background:rgba(255,207,51,.18);color:var(--gold)}
.pill.mint{background:rgba(95,224,124,.16);color:var(--mint)}
.pill.red{background:rgba(255,75,62,.18);color:#ff8d82}
.pill.dust{background:rgba(201,167,255,.18);color:var(--dust)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{flex:1}
.bar{height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold)}
.bar.mint i{background:var(--mint)}

/* play tab */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mode{border:3px solid transparent;border-radius:16px;padding:18px;text-align:left;background:var(--solid2);display:flex;flex-direction:column;gap:6px;min-height:170px;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.mode h3{font-family:var(--display);font-weight:400;font-size:30px;margin:0}
.mode p{margin:0;color:var(--muted);font-weight:700;font-size:14px}
.mode.free{background:linear-gradient(160deg,#1f3b6b,#15223b)}
.mode.ranked{background:linear-gradient(160deg,#4a2a1d,#15223b)}
.mode:hover:not(:disabled){border-color:var(--gold)}
.mode .go{margin-top:auto;font-family:var(--display);font-size:20px;color:var(--gold)}
.heroRow{display:flex;gap:8px;flex-wrap:wrap}
.hchip{display:flex;align-items:center;gap:8px;border:2px solid var(--line);background:var(--solid2);border-radius:10px;padding:6px 10px 6px 6px;font-weight:900;font-size:14px}
.hchip.sel{border-color:var(--gold)}
.hchip .sw{width:26px;height:26px;border-radius:6px;box-shadow:inset -4px -4px 0 rgba(0,0,0,.2)}
.hchip small{color:var(--muted);font-weight:800}
.hchip.locked{opacity:.45}

/* heroes tab */
.heroTabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.unl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:13px;font-weight:700}
.unl .l{font-weight:900;color:var(--muted)}
.unl .got{color:var(--mint)}
.cardPick{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.cp{border:2px solid var(--line);background:var(--solid);border-radius:10px;padding:8px;text-align:left;display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:800}
.cp.sel{border-color:var(--gold)}
.cp.sig{border-style:dashed;border-color:var(--mint)}
.cp .ic{width:20px;height:20px;border-radius:4px;box-shadow:inset -3px -3px 0 rgba(0,0,0,.25)}
.cp b{font-size:13px}
.cp small{color:var(--muted)}
.perkSel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.perkSel label{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:4px}
.perkSel select{width:100%}
.tiers{display:flex;gap:4px}
.tiers i{width:18px;height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.tiers i.on{background:var(--gold)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.tbl th{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;text-align:left;padding:6px}
.tbl td{padding:7px 6px;border-top:1px solid var(--line);font-weight:800}
.tbl tr.me td{color:var(--gold)}
.tblWrap{overflow-x:auto}
.crate{width:64px;height:64px;border-radius:10px;position:relative;box-shadow:inset -8px -8px 0 rgba(0,0,0,.22),inset 6px 6px 0 rgba(255,255,255,.25)}
.crate.silver{background:#b9c3d6}.crate.gold{background:var(--gold)}.crate.diamond{background:#8fe9ff}
.crate::after{content:"";position:absolute;inset:26px 8px;border-top:4px solid rgba(0,0,0,.25);border-bottom:4px solid rgba(0,0,0,.25)}
.drops{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.drop{display:flex;align-items:center;gap:10px;background:var(--solid2);border-radius:9px;padding:8px 12px;font-weight:900}
.chal{display:flex;flex-direction:column;gap:6px}
.league{font-family:var(--display);font-size:26px}
.league.bronze{color:#d8935a}.league.silver{color:#cfd8e6}.league.gold{color:var(--gold)}.league.pro{color:#8fe9ff}.league.placement{color:var(--muted)}

#queueBar{position:fixed;left:50%;bottom:calc(var(--sab) + 16px);transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:var(--panel2);border:2px solid var(--gold);border-radius:14px;padding:10px 14px;z-index:10;min-width:min(420px,92vw);box-sizing:border-box}
.qSpin{width:22px;height:22px;border-radius:5px;background:var(--gold);animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#ltoast{position:fixed;left:50%;top:calc(var(--sat) + 14px);transform:translateX(-50%);background:var(--panel2);border:2px solid var(--line);border-radius:10px;padding:8px 14px;font-weight:900;opacity:0;transition:opacity .3s;pointer-events:none;z-index:30;max-width:90vw;text-align:center}
.modalCard{max-width:460px;width:100%;text-align:center}
.modalCard h2{font-family:var(--display);font-weight:400;font-size:30px;margin:0 0 6px}

/* ---------- rank badges ---------- */
.rb{display:inline-block;font-family:var(--body);font-size:9px;font-weight:900;letter-spacing:.07em;padding:2px 5px;border-radius:4px;margin-right:5px;vertical-align:1px;line-height:1.1}
.rb.r1{background:var(--gold);color:#3a2800}
.rb.r2{background:linear-gradient(90deg,#ff4b3e,#b54bff);color:#fff}
.cn.r1,.pn.r1{color:var(--gold)!important}
.cn.r2,.pn.r2{color:#ff9ce8!important}
.dockTabs{margin:8px 10px 0}
#playerList{flex:1;overflow-y:auto;padding:6px 10px;display:flex;flex-direction:column;gap:2px}
.pl{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:7px;font-size:13px;font-weight:800}
.pl:hover{background:rgba(255,255,255,.05)}
.pl .pn{border:0;background:none;padding:0;font:inherit;font-weight:900;color:var(--txt);cursor:pointer;text-align:left}
.pl .lv{font-size:10px;color:var(--muted);font-weight:900}
.pl .st{margin-left:auto;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pl .st.match{color:#ff9d7a}.pl .st.queue{color:var(--mint)}
.staffGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}
.staffGrid button{border:0;border-radius:8px;padding:9px 6px;font-weight:900;font-size:13px;background:var(--solid2);border:1px solid var(--line)}
.staffGrid button.danger{background:rgba(255,75,62,.2);border-color:rgba(255,75,62,.5);color:#ffb4ab}
.modalCard input.full{width:100%;box-sizing:border-box;margin-top:6px}
.modalCard .lbl2{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left;margin-top:10px;display:block}

/* ---------- leaderboards ---------- */
.lbCats{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.lbCats button{flex:none;border:2px solid var(--line);background:var(--solid2);border-radius:99px;padding:7px 13px;font-weight:900;font-size:13px;white-space:nowrap}
.lbCats button.sel{border-color:var(--gold);background:var(--gold);color:#3a2800}
.lbCats .grp{flex:none;align-self:center;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 2px 0 8px}
.lbBar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 14px}
.lbBar .seg{flex:none}
.lbBar .seg button{white-space:nowrap;flex:none}
.lbBar select{padding:8px 10px;font-size:14px}
.lbMe{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lbMe .big{font-family:var(--display);font-size:34px;line-height:1;color:var(--gold)}
table.lbt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.lbt th{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;text-align:left;padding:6px 8px}
.lbt th.n,.lbt td.n{text-align:right}
.lbt td{padding:8px;border-top:1px solid var(--line);font-weight:800;font-size:14px}
.lbt td.val{font-family:var(--display);font-size:18px;font-weight:400;text-align:right}
.lbt tr.me td{background:rgba(255,207,51,.08)}
.lbt tr.me td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.lbt tr.gap td{border-top:2px dashed var(--line)}
.lbt .pn{border:0;background:none;padding:0;font:inherit;font-weight:900;cursor:pointer;color:var(--txt)}
.lbt .pn:disabled{cursor:default}
.lbt small{color:var(--muted);font-weight:700;margin-left:6px}
.rk{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:8px;font-family:var(--display);font-size:15px;background:rgba(255,255,255,.06)}
.rk.r1{background:linear-gradient(#ffe066,#e0a100);color:#3a2800}
.rk.r2{background:linear-gradient(#f2f5fb,#aeb8c9);color:#27303f}
.rk.r3{background:linear-gradient(#f0b27a,#b5652a);color:#2e1706}

/* ---------- friends & party ---------- */
#friendsPane{flex:1;display:flex;flex-direction:column;min-height:0}
#friendsPane .chatForm{border-top:0;border-bottom:1px solid var(--line)}
#friendsList{flex:1;overflow-y:auto;padding:4px 10px 10px;display:flex;flex-direction:column;gap:2px}
.fsec{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:10px 4px 4px}
.fr{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:8px}
.fr:hover{background:rgba(255,255,255,.05)}
.fr .dotS{width:9px;height:9px;border-radius:50%;background:#56627a;flex:none}
.fr .dotS.lobby{background:var(--mint)}.fr .dotS.queue{background:var(--gold)}.fr .dotS.match{background:#ff9d7a}
.fr .who{display:flex;flex-direction:column;min-width:0;flex:1}
.fr .who .pn{border:0;background:none;padding:0;font:inherit;font-weight:900;color:var(--txt);cursor:pointer;text-align:left;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr .who small{font-size:11px;color:var(--muted);font-weight:800}
.fr .acts{display:flex;gap:4px}
.fr .acts button{border:0;border-radius:7px;padding:5px 8px;font-size:11px;font-weight:900;background:var(--solid2);border:1px solid var(--line)}
.fr .acts button.go{background:var(--gold);color:#3a2800;border-color:transparent}
.fr.off{opacity:.55}
.emptyNote{font-size:12px;color:var(--muted);font-weight:700;padding:10px 4px}
.chCh.lobby{background:var(--solid);border:1px solid var(--line);color:var(--txt)}
.chCh.party{background:#9b5cff;color:#fff}
.cl .tag.party{color:#c9a7ff}
.partyBox{background:linear-gradient(160deg,#2a2150,#15223b);border:2px solid #6c4bd1;border-radius:14px;padding:12px 14px;margin-bottom:16px}
.partyBox h3{margin:0;font-family:var(--display);font-weight:400;font-size:20px;display:flex;align-items:center;gap:8px}
.pmembers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px}
.pm{background:rgba(0,0,0,.25);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:4px;min-width:0;position:relative}
.pm b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm .hsw{width:100%;height:6px;border-radius:3px}
.pm small{font-size:11px;color:var(--muted);font-weight:800}
.pm .lead{position:absolute;top:6px;right:8px;font-size:9px;font-weight:900;color:var(--gold);letter-spacing:.08em}
.pm .pmActs{display:flex;gap:4px;flex-wrap:wrap}
.pm .pmActs button{border:0;border-radius:6px;padding:3px 6px;font-size:10px;font-weight:900;background:rgba(255,255,255,.12)}
.pm.empty{border:2px dashed rgba(255,255,255,.15);background:none;align-items:center;justify-content:center;color:var(--muted);font-size:12px;font-weight:800;min-height:64px}
#invites{position:fixed;top:calc(var(--sat) + 70px);right:calc(var(--sar) + 16px);display:flex;flex-direction:column;gap:8px;z-index:40;width:min(320px,92vw)}
.invite{background:var(--panel2);border:2px solid #9b5cff;border-radius:12px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.invite b{display:block;margin-bottom:8px}
.invite .row{gap:6px}
.invite .bar{margin-top:8px;height:4px}
.invite .bar i{background:#9b5cff}
@media (max-width:760px){ .pmembers{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- chat ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#chatDock{position:fixed;right:calc(var(--sar) + 16px);bottom:calc(var(--sab) + 16px);width:340px;background:var(--panel2);border:2px solid var(--line);border-radius:12px;z-index:9;display:flex;flex-direction:column;overflow:hidden}
#chatHead{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:10px 12px;font-size:14px;text-align:left}
#chatHead .chev{width:9px;height:9px;border-right:3px solid var(--muted);border-bottom:3px solid var(--muted);transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
#chatDock.collapsed #chatHead .chev{transform:rotate(-135deg);margin-top:4px}
#chatDock.collapsed #chatBody{display:none}
#chatBody{display:flex;flex-direction:column;height:320px;border-top:1px solid var(--line)}
#chatLog{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;user-select:text;-webkit-user-select:text;overscroll-behavior:contain}
.cl{line-height:1.35;word-wrap:break-word;overflow-wrap:anywhere}
.cl .cn{border:0;background:none;padding:0;font:inherit;font-weight:900;color:#9fc6ff;cursor:pointer}
.cl .cn.admin{color:var(--gold)}
.cl .lv{font-size:10px;font-weight:900;color:var(--muted);margin-right:3px}
.cl.sys{color:var(--gold);font-style:italic}
.cl.err{color:#ffb4ab}
.chatForm{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.chatForm input{flex:1;min-width:0;font-size:14px;padding:8px 10px}
#tabBody{margin-bottom:calc(var(--sab) + 90px)}
#gchat{position:absolute;left:calc(var(--sal) + 16px);bottom:calc(var(--sab) + 110px);width:min(400px,40vw);display:flex;flex-direction:column;gap:6px;pointer-events:none;z-index:4}
#gchatLog{display:flex;flex-direction:column;gap:3px;font-size:13px;font-weight:800;text-shadow:0 1px 0 #000,0 0 3px #000}
#gchatLog .cl{transition:opacity .6s}
#gchatLog .cl.fade{opacity:0}
#gchat.open #gchatLog .cl.fade{opacity:1}
#gchat.open #gchatLog{background:rgba(13,22,40,.6);border-radius:8px;padding:6px 8px;max-height:200px;overflow-y:auto;pointer-events:auto}
#gchatForm{pointer-events:auto;background:var(--panel2);border:2px solid var(--gold);border-radius:10px;padding:6px}
.chCh{border:0;border-radius:7px;padding:0 10px;font-weight:900;font-size:12px;background:var(--blue);color:#fff}
.chCh.all{background:var(--gold);color:#3a2800}
.tag{font-size:10px;font-weight:900;margin-right:4px;opacity:.85}
.cb{color:#8fc0ff}.cr{color:#ff9d93}

/* ---------- HUD (in-game) ---------- */
#hud{position:absolute;inset:0;pointer-events:none}
#topbar{position:absolute;top:calc(var(--sat) + 8px);left:50%;transform:translateX(-50%);display:flex;align-items:flex-start;gap:10px;z-index:3}
.coreBox{width:190px;display:flex;flex-direction:column;gap:3px}
.coreBox .lbl{font-family:var(--display);font-size:14px;display:flex;justify-content:space-between}
.coreBox.red{text-align:right}.coreBox.red .lbl{flex-direction:row-reverse}
.cbar{height:14px;border-radius:4px;background:rgba(0,0,0,.45);border:2px solid rgba(0,0,0,.5);overflow:hidden;position:relative}
.cbar i{position:absolute;top:0;bottom:0;left:0;width:100%;transition:width .15s}
.blue .cbar i{background:linear-gradient(#6fb2ff,var(--blue))}
.red .cbar i{background:linear-gradient(#ff8a7f,var(--red));left:auto;right:0}
.coreBox .kills{font-size:12px;color:var(--muted);font-weight:800}
.coreBox.hit .cbar{border-color:#fff}
#phaseBox{min-width:118px;text-align:center;background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:4px 10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px}
#phaseName{font-family:var(--display);font-size:13px;color:var(--gold);letter-spacing:.06em}
#phaseName.combat{color:#ff9d7a}
#timer{font-family:var(--display);font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
#readyBtn{pointer-events:auto;margin-top:3px;border:0;border-radius:6px;background:var(--gold);color:#3a2800;font-weight:900;font-size:11px;padding:4px 8px}
#readyBtn.voted{background:var(--mint)}
#readyBtn kbd{font-family:var(--body);background:rgba(0,0,0,.15);border-radius:3px;padding:0 3px}
#mmWrap{position:absolute;top:calc(var(--sat) + 10px);left:calc(var(--sal) + 12px);background:var(--panel);border:2px solid var(--line);border-radius:8px;padding:3px;line-height:0}
#minimap{width:192px;height:96px;image-rendering:pixelated;border-radius:4px}
#netInfo{position:absolute;left:calc(var(--sal) + 14px);top:calc(var(--sat) + 118px);font-size:11px;font-weight:800;color:var(--muted);text-shadow:0 1px 0 #000}
#feed{position:absolute;top:calc(var(--sat) + 10px);right:calc(var(--sar) + 12px);display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:46vw}
.fe{background:var(--panel);border-radius:6px;padding:3px 9px;font-size:13px;font-weight:800;white-space:nowrap;transition:opacity .4s}
.fe .b{color:#7cb8ff}.fe .r{color:#ff8d82}.fe .w{color:var(--muted);font-weight:700;margin:0 5px}
.fe.me{border:2px solid var(--gold)}
#cross{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%)}
#cross::before,#cross::after{content:"";position:absolute;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.55)}
#cross::before{left:10px;top:0;width:2px;height:22px;clip-path:polygon(0 0,100% 0,100% 35%,0 35%,0 65%,100% 65%,100% 100%,0 100%)}
#cross::after{top:10px;left:0;height:2px;width:22px;clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%)}
#cross.dot::before,#cross.dot::after{clip-path:none;width:4px;height:4px;left:9px;top:9px;border-radius:2px}
#cross.build::before,#cross.build::after{background:var(--gold)}
#hitm{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%) rotate(45deg);opacity:0}
#hitm::before,#hitm::after{content:"";position:absolute;background:#fff}
#hitm::before{left:15px;top:0;width:4px;height:34px;clip-path:polygon(0 0,100% 0,100% 30%,0 30%,0 70%,100% 70%,100% 100%,0 100%)}
#hitm::after{top:15px;left:0;height:4px;width:34px;clip-path:polygon(0 0,30% 0,30% 100%,0 100%,0 0,70% 0,100% 0,100% 100%,70% 100%)}
#hitm.head::before,#hitm.head::after{background:var(--gold)}
#hitm.kill::before,#hitm.kill::after{background:#ff4b3e}
#vitals{position:absolute;left:calc(var(--sal) + 16px);bottom:calc(var(--sab) + 16px);display:flex;flex-direction:column;gap:5px;width:250px}
#heroTag{font-family:var(--display);font-size:20px;display:flex;align-items:baseline;gap:8px}
#heroTag small{font-family:var(--body);font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.hpbar{height:22px;border-radius:6px;background:rgba(0,0,0,.5);border:2px solid rgba(0,0,0,.55);position:relative;overflow:hidden}
.hpbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#8ff09e,#3dbb57);transition:width .1s}
.hpbar i.low{background:linear-gradient(#ff9a8f,#e2372b)}
.hpbar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;text-shadow:0 1px 0 #000;font-variant-numeric:tabular-nums}
#pts{display:flex;align-items:center;gap:7px;font-weight:900;font-size:15px;font-variant-numeric:tabular-nums}
.cube{width:14px;height:14px;background:var(--gold);border:2px solid var(--gold2);border-radius:3px;box-shadow:inset -3px -3px 0 rgba(0,0,0,.18)}
#pts small{color:var(--muted);font-weight:800;font-size:12px}
#weapon{position:absolute;right:calc(var(--sar) + 18px);bottom:calc(var(--sab) + 16px);text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
#ammo{font-family:var(--display);font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
#ammo small{font-size:20px;color:var(--muted)}
#ammo.reload{color:var(--gold)}
#wname{font-weight:800;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
#abil{display:flex;align-items:center;gap:8px;background:var(--panel);border-radius:8px;padding:5px 10px;border:2px solid var(--line)}
#abil.ready{border-color:var(--mint)}
#abil b{font-family:var(--display);font-size:15px;font-weight:400}
#abil kbd{font-family:var(--body);font-weight:900;font-size:11px;background:rgba(255,255,255,.14);border-radius:4px;padding:1px 5px}
#abCd{font-family:var(--display);font-size:15px;color:var(--gold);min-width:22px;font-variant-numeric:tabular-nums}
#hotbar{position:absolute;left:50%;bottom:calc(var(--sab) + 16px);transform:translateX(-50%);display:flex;gap:6px;pointer-events:auto;z-index:3}
.slot{width:62px;height:62px;border-radius:9px;background:var(--panel);border:2px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;padding:0}
.slot .ic{width:22px;height:22px;border-radius:4px;box-shadow:inset -4px -4px 0 rgba(0,0,0,.22),inset 3px 3px 0 rgba(255,255,255,.25)}
.slot .nm{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;max-width:58px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.slot .cs{font-size:10px;font-weight:800;color:var(--gold)}
.slot .k{position:absolute;top:2px;left:5px;font-size:10px;color:var(--muted);font-weight:900}
.slot.sel{border-color:var(--gold);background:var(--panel2);transform:translateY(-4px)}
.slot.poor{opacity:.45}
.slot.sig{border-style:dashed}
#hotbar.off .slot{opacity:.5;transform:none;border-color:var(--line)}
#modeTag{position:absolute;left:50%;bottom:calc(var(--sab) + 96px);transform:translateX(-50%);font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
#modeTag b{color:var(--gold)}
#toast{position:absolute;left:50%;top:26%;transform:translateX(-50%);font-family:var(--display);font-size:20px;background:var(--panel);border-radius:8px;padding:6px 14px;opacity:0;transition:opacity .3s;white-space:nowrap}
#announce{position:absolute;left:0;right:0;top:32%;text-align:center;pointer-events:none;opacity:0}
#announce .big{font-family:var(--display);font-size:clamp(40px,8vw,84px);line-height:1;color:var(--gold);text-shadow:0 5px 0 rgba(0,0,0,.4)}
#announce .sub{font-weight:900;font-size:clamp(14px,2.2vw,20px);margin-top:6px;text-shadow:0 2px 0 rgba(0,0,0,.5)}
#announce.show{animation:ann 2.6s ease forwards}
@keyframes ann{0%{opacity:0;transform:scale(1.4)}10%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
#vign{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(220,20,10,.65) 100%);opacity:0}
#heal{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(60,230,110,.45) 100%);opacity:0;transition:opacity .3s}
#zoomOv{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0,transparent 32vmin,rgba(0,0,0,.92) 33vmin);display:none}
#zoomOv::before{content:"";position:absolute;left:50%;top:calc(50% - 33vmin);width:1px;height:66vmin;background:rgba(0,0,0,.8)}
#zoomOv::after{content:"";position:absolute;top:50%;left:calc(50% - 33vmin);height:1px;width:66vmin;background:rgba(0,0,0,.8)}
#hint{position:absolute;left:50%;top:calc(50% + 70px);transform:translateX(-50%);font-size:12px;font-weight:900;text-shadow:0 1px 0 #000;white-space:nowrap}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;padding:16px;z-index:20}
#death{background:rgba(40,6,6,.35)}
#death .card{text-align:center;max-width:560px;width:100%}
#deathBy{font-family:var(--display);font-size:30px}
#deathBy .r{color:#ff8d82}#deathBy .b{color:#7cb8ff}
#respawnT{font-weight:900;color:var(--muted);margin:4px 0 8px}
.heroPick{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.heroPick button{background:var(--panel2);border:2px solid var(--line);border-radius:8px;padding:6px 10px;font-weight:900;font-size:13px}
.heroPick button.sel{border-color:var(--gold);color:var(--gold)}
.heroPick kbd{font-family:var(--body);color:var(--muted);margin-right:4px}
#pause,#end{background:rgba(8,14,28,.72)}
.pauseCard{text-align:center;max-width:380px;width:100%;display:flex;flex-direction:column;gap:10px}
.pauseCard h2,.endCard h2{margin:0;font-family:var(--display);font-weight:400;font-size:38px}
.endCard{max-width:880px;width:100%;display:flex;flex-direction:column;gap:14px;text-align:center;max-height:100%;overflow:auto}
#endTitle.win{color:var(--gold)}#endTitle.lose{color:#ff8d82}
.endCard .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.rew{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.rew .box{min-width:120px;text-align:center}
.rew b{font-family:var(--display);font-size:24px;font-weight:400;display:block}
#scoreboard{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px}
.sbWrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:860px;width:100%;text-align:left}
.sbTeam{background:var(--panel);border-radius:12px;padding:10px 12px;border-top:5px solid var(--blue)}
.sbTeam.red{border-top-color:var(--red)}
.sbTeam h3{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:20px;display:flex;justify-content:space-between}
.sbTeam table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.sbTeam th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;text-align:right;padding:2px 4px}
.sbTeam th:first-child,.sbTeam td:first-child{text-align:left}
.sbTeam td{padding:4px;text-align:right;font-weight:800;border-top:1px solid var(--line)}
.sbTeam tr.me td{color:var(--gold)}
.sbTeam td.dead{opacity:.5}
.sbTeam td small{color:var(--muted);font-weight:700;margin-left:4px}

/* touch */
#touch{position:absolute;inset:0;pointer-events:auto;display:none;z-index:2}
body.touch #touch{display:block}
#tzone{position:absolute;inset:0}
.tb{position:absolute;border-radius:50%;border:3px solid rgba(255,255,255,.55);background:rgba(15,25,45,.45);color:#fff;font-family:var(--display);font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;line-height:1;text-shadow:0 1px 0 #000;box-sizing:border-box;touch-action:none}
.tb small{font-family:var(--body);font-weight:900;font-size:11px;opacity:.9;margin-top:2px}
.tb.on{background:rgba(255,207,51,.55);border-color:var(--gold)}
.tb.dim{opacity:.45}
#tFire{width:92px;height:92px;right:calc(var(--sar) + 22px);bottom:calc(var(--sab) + 58px);font-size:19px;background:rgba(255,75,62,.45)}
#tJump{width:66px;height:66px;right:calc(var(--sar) + 126px);bottom:calc(var(--sab) + 26px)}
#tAlt{width:58px;height:58px;right:calc(var(--sar) + 132px);bottom:calc(var(--sab) + 112px);font-size:13px}
#tAbility{width:64px;height:64px;right:calc(var(--sar) + 36px);bottom:calc(var(--sab) + 166px);font-size:13px;background:rgba(95,224,124,.35)}
#tReload{width:48px;height:48px;right:calc(var(--sar) + 116px);bottom:calc(var(--sab) + 186px);font-size:12px}
#tBuild{width:56px;height:56px;right:calc(var(--sar) + 204px);bottom:calc(var(--sab) + 50px);font-size:12px;background:rgba(255,207,51,.3)}
#tBuild.act{background:rgba(255,207,51,.75);border-color:var(--gold)}
#tTop{position:absolute;right:calc(var(--sar) + 10px);top:calc(var(--sat) + 10px);display:flex;gap:6px}
#tTop button{width:42px;height:42px;border-radius:10px;border:2px solid rgba(255,255,255,.4);background:rgba(15,25,45,.6);font-weight:900;font-size:14px}
#joyBase{position:absolute;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;border:3px solid rgba(255,255,255,.35);background:rgba(15,25,45,.28);pointer-events:none}
#joyKnob{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.55);border:3px solid rgba(255,255,255,.8);pointer-events:none}
body.touch #weapon,body.touch #modeTag,body.touch #hint{display:none}
body.touch #hotbar{bottom:auto;top:calc(var(--sat) + 92px)}
body.touch #hotbar.off{display:none}
body.touch .slot{width:50px;height:50px}
body.touch .slot .nm{font-size:8px;max-width:46px}
body.touch .slot .k{display:none}
body.touch #vitals{left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + 8px);width:220px;align-items:center}
body.touch #vitals .hpbar{width:100%}
body.touch #heroTag{font-size:16px}
body.touch #feed{top:calc(var(--sat) + 60px)}
body.touch #readyBtn kbd{display:none}
body.touch .pcOnly{display:none}
body.touch #gchat{left:calc(var(--sal) + 12px);top:calc(var(--sat) + 150px);bottom:auto;width:min(360px,46vw)}
body.touch #gchat.open{left:50%;transform:translateX(-50%);top:calc(var(--sat) + 70px);width:min(520px,94vw);z-index:25}

@media (max-width:1100px) and (min-width:761px){
  #queueBar{left:calc(var(--sal) + 16px);transform:none}
}
@media (max-width:760px){
  .modes,.g2{grid-template-columns:1fr}
  .perkSel{grid-template-columns:1fr}
  .coreBox{width:96px}
  .coreBox .lbl{font-size:11px}
  #mmWrap{top:calc(var(--sat) + 72px)}
  #minimap{width:128px;height:64px}
  #netInfo{top:calc(var(--sat) + 142px)}
  .sbWrap{grid-template-columns:1fr}
  #tabBody{margin:0 8px calc(var(--sab) + 90px);padding:14px}
  #topbarL{gap:10px}
  #chatDock{left:calc(var(--sal) + 8px);right:calc(var(--sar) + 8px);width:auto;bottom:calc(var(--sab) + 8px)}
  #chatBody{height:min(360px,50vh)}
  #queueBar{bottom:calc(var(--sab) + 64px);left:50%;transform:translateX(-50%)}
  .onl{display:none}
}
@media (max-height:480px){
  body.touch #hotbar{top:calc(var(--sat) + 84px)}
  body.touch .slot{width:44px;height:44px}
  body.touch #mmWrap{top:calc(var(--sat) + 8px)}
  #minimap{width:128px;height:64px}
}
@media (prefers-reduced-motion:reduce){.qSpin{animation:none}}