:root{--sun:#f4a83a;--moon:#3ac8f4;--bg:#121621;--panel:#141a26eb;--panel2:#20283af2;--line:#ffffff1f;--text:#e9edf5;--dim:#9aa4b8;--gold:#ffd166;--hp:#5fd16b;--mp:#4f9cff;--danger:#ff5f5f;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-user-select:none;user-select:none;touch-action:none;margin:0;font:14px/1.3 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#scene{width:100%;height:100%;display:block;position:fixed;inset:0}button{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--line);cursor:pointer;border-radius:8px;padding:8px 12px}button:hover{border-color:#ffffff4d}button.primary{color:#1c1305;background:linear-gradient(#f6b34d,#d9861d);border-color:#ffcf7a;font-weight:700}button:disabled{opacity:.45;cursor:default}input{font:inherit;color:var(--text);border:1px solid var(--line);background:#0c1018;border-radius:8px;width:100%;padding:9px 10px}[hidden]{display:none!important}.screen{z-index:20;background:radial-gradient(at 50% 20%,#2834508c,#080a10d1);justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0;overflow:auto}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:12px;width:min(420px,100%);margin:auto;padding:22px;display:flex;box-shadow:0 20px 60px #00000080}.panel.center{align-items:center}.logo{letter-spacing:2px;background:linear-gradient(90deg, var(--sun), #fff3d6 50%, var(--moon));color:#0000;text-align:center;-webkit-background-clip:text;background-clip:text;margin:0;font-size:40px}.logo.small{text-align:left;font-size:26px}.sub{color:var(--dim);text-align:center;margin:0}label{color:var(--dim);flex-direction:column;gap:4px;font-size:12px;display:flex}.row{gap:8px;display:flex}.divider{text-align:center;color:var(--dim);border-top:1px solid var(--line);margin-top:6px;font-size:12px}.divider span{background:#171d2a;padding:0 8px;position:relative;top:-9px}.error{color:var(--danger);text-align:center;min-height:1em;margin:0}.spinner{border:3px solid var(--line);border-top-color:var(--sun);border-radius:50%;width:34px;height:34px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#code-input{text-transform:uppercase;letter-spacing:3px;font-weight:700}.panel.lobby{gap:8px;width:min(960px,100%);padding:16px 18px}.lobby-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.lobby-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.invite{align-items:center;gap:10px;display:flex}.invite .code{letter-spacing:4px;color:var(--gold);font-size:24px;font-weight:800}#mode-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}#mode-row button.on{border-color:var(--gold);color:var(--gold)}#teams{grid-template-columns:1fr 1fr;gap:10px;display:grid}.team{border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:6px;padding:8px;display:flex}.team h3{justify-content:space-between;align-items:center;margin:0;font-size:14px;display:flex}.team.t0{border-color:#f4a83a80}.team.t0 h3{color:var(--sun)}.team.t1{border-color:#3ac8f480}.team.t1 h3{color:var(--moon)}.seat{background:#ffffff0a;border-radius:8px;align-items:center;gap:8px;min-height:34px;padding:4px 8px;display:flex}.seat .sname{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.seat .shero{color:var(--dim);font-size:12px}.seat.me{outline:1px solid var(--gold)}.seat.off{opacity:.5}.seat button{padding:3px 8px;font-size:12px}.seat select{color:var(--text);border:1px solid var(--line);background:#0c1018;border-radius:6px;font-size:12px}.pill{background:#2c7a3a;border-radius:6px;padding:2px 6px;font-size:11px}.pill.wait{background:#444b5c}.team-tools{flex-wrap:wrap;gap:6px;display:flex}.team-tools button{padding:4px 8px;font-size:12px}#hero-cards{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.hcard{text-align:left;border-radius:10px;flex-direction:column;gap:4px;padding:8px 10px;display:flex}.hcard.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}.hcard.taken{opacity:.4}.hcard .hname{font-size:16px;font-weight:800}.hcard .htitle{color:var(--dim);font-size:12px}.hcard .swatch{border-radius:3px;width:100%;height:6px}.hcard ul{color:var(--dim);margin:0;padding-left:14px;font-size:11px;line-height:1.25}.hcard ul b{color:var(--text)}.profile{color:var(--dim);grid-template-columns:50px 1fr 50px 1fr;align-items:center;gap:1px 6px;font-size:10px;display:grid}.profile i{background:var(--gold);border-radius:3px;height:5px;display:block}#lobby-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}#lobby-actions button{min-width:120px}h2{color:var(--dim);margin:4px 0 0;font-size:15px}#hud{pointer-events:none;z-index:5;position:fixed;inset:0}#hud button,#hud #shop,#hud #omen,#hud #minimap,#hud #sendbar{pointer-events:auto}#topbar{top:calc(6px + var(--safe-t));background:var(--panel);border:1px solid var(--line);border-radius:12px;align-items:center;gap:12px;padding:6px 12px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.beacon{align-items:center;gap:6px;font-size:12px;display:flex}.beacon .bbar{background:#0b0e14;border-radius:5px;width:120px;height:10px;overflow:hidden}.beacon .bfill{transform-origin:0;width:100%;height:100%}#beacon-0 .bfill{background:var(--sun)}#beacon-1 .bfill{background:var(--moon)}#beacon-0 .bname{color:var(--sun)}#beacon-1 .bname{color:var(--moon)}.beacon .bhp{font-variant-numeric:tabular-nums;min-width:42px}.beacon.mine .bname:before{content:"★ "}.beacon.hit{animation:.4s hit}@keyframes hit{30%{filter:brightness(1.8);transform:scale(1.12)}}#clock{text-align:center;min-width:96px}#clock-time{font-variant-numeric:tabular-nums;font-size:20px;font-weight:800}#clock-sub{color:var(--dim);white-space:nowrap;font-size:11px}#clock.dusk #clock-time{color:#ff9a5c}#clock.night #clock-time{color:#b9a2ff}#sidebar{top:calc(8px + var(--safe-t));right:calc(8px + var(--safe-r));flex-direction:column;align-items:flex-end;gap:8px;width:230px;display:flex;position:absolute}#minimap{border:1px solid var(--line);background:#0a0d14d9;border-radius:8px;width:140px;height:200px}#omen{flex-direction:column;gap:4px;width:100%;display:flex}.omen-title{color:var(--dim);text-transform:uppercase;letter-spacing:1px;text-align:right;font-size:11px}.wb{background:var(--panel);border:1px solid var(--line);border-radius:8px;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 8px;font-size:12px;display:flex}.wb .eta{font-variant-numeric:tabular-nums;min-width:30px;font-weight:800}.wb.in{border-left:3px solid var(--danger)}.wb.out{border-left:3px solid var(--gold);opacity:.85}.wb.danger{animation:.6s infinite alternate blink}@keyframes blink{to{background:#ff3c3c59}}.wb .ci{align-items:center;gap:2px;display:inline-flex}.dot{border-radius:50%;width:10px;height:10px;display:inline-block}.tag{background:#ffffff26;border-radius:3px;padding:0 3px;font-size:9px;font-weight:800}#feed{left:calc(8px + var(--safe-l));top:calc(64px + var(--safe-t));flex-direction:column;gap:3px;max-width:280px;font-size:12px;display:flex;position:absolute}#feed div{background:#0a0d14b3;border-radius:6px;padding:3px 8px;animation:6s forwards fade}@keyframes fade{0%,80%{opacity:1}to{opacity:0}}#viewtag{top:calc(60px + var(--safe-t));border:1px solid var(--moon);background:#3ac8f440;border-radius:8px;padding:4px 12px;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}#spirit-banner{text-align:center;text-shadow:0 2px 8px #000;font-size:18px;font-weight:700;position:absolute;top:38%;left:50%;transform:translate(-50%)}#bottom{left:50%;bottom:calc(52px + var(--safe-b));background:var(--panel);border:1px solid var(--line);border-radius:12px;align-items:flex-end;gap:10px;padding:8px 10px;display:flex;position:absolute;transform:translate(-50%)}#herobox{align-items:center;gap:8px;display:flex}#portrait{border:2px solid var(--line);pointer-events:auto;border-radius:10px;width:48px;height:48px;position:relative}#plevel{border:1px solid var(--gold);color:var(--gold);background:#0b0e14;border-radius:8px;padding:0 5px;font-size:11px;font-weight:800;position:absolute;bottom:-6px;right:-6px}#bars{flex-direction:column;gap:3px;width:160px;display:flex}.bar{background:#0b0e14;border-radius:4px;height:14px;position:relative;overflow:hidden}.bar .fill{transform-origin:0;width:100%;height:100%}.bar span{text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000;font-size:10px;line-height:14px;position:absolute;inset:0}.bar.hp .fill{background:var(--hp)}.bar.mp .fill{background:var(--mp)}.bar.xp{height:5px}.bar.xp .fill{background:var(--gold)}#abilities{gap:6px;display:flex}.ab{border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:52px;height:52px;padding:0;font-size:10px;line-height:1.1;display:flex;position:relative;overflow:hidden}.ab .key{color:var(--gold);font-size:11px;font-weight:800;position:absolute;top:2px;left:4px}.ab .rank{color:var(--dim);font-size:9px;position:absolute;bottom:2px;right:4px}.ab .cost{color:var(--mp);font-size:9px;position:absolute;bottom:2px;left:4px}.ab .nm{text-align:center;padding:0 3px}.ab .cd{transform-origin:bottom;background:#000000a6;justify-content:center;align-items:center;font-size:16px;font-weight:800;display:flex;position:absolute;inset:0}.ab.nomana{box-shadow:inset 0 0 0 2px #4f9cff99}.ab.locked{opacity:.35}.ab.ult{width:58px;height:58px}#items{grid-template-columns:repeat(3,24px);gap:3px;display:grid}.item{border:1px solid var(--line);background:#0b0e14;border-radius:5px;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:9px;font-weight:800;display:flex;position:relative}.item small{font-size:8px;position:absolute;bottom:0;right:1px}#econ{flex-direction:column;gap:4px;display:flex}#gold-btn{flex-direction:column;align-items:center;min-width:70px;padding:4px 10px;display:flex}#gold{color:var(--gold);font-variant-numeric:tabular-nums;font-size:18px;font-weight:800}#income{color:var(--dim);font-size:11px}#quickbuy{padding:3px 6px;font-size:11px}#sendbar{left:50%;bottom:calc(4px + var(--safe-b));align-items:stretch;gap:4px;display:flex;position:absolute;transform:translate(-50%)}#sends{gap:4px;display:flex}.send{border-radius:8px;flex-direction:column;justify-content:space-between;align-items:flex-start;width:62px;height:44px;padding:2px 4px;font-size:10px;display:flex;position:relative;overflow:hidden}.send .sk{color:var(--gold);font-weight:800;position:absolute;top:1px;right:4px}.send .sc{color:var(--gold);font-weight:700}.send .si{color:#9fe0a0}.send .sn{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-weight:700;overflow:hidden}.send .pips{gap:1px;display:flex}.send .pips i{background:var(--gold);border-radius:1px;width:5px;height:4px}.send .pips i.e{background:#39404f}.send .rs{background:#9fe0a0;height:2px;position:absolute;bottom:0;left:0}.send.locked{opacity:.4}.send.poor{filter:saturate(.3)}.send.good{box-shadow:inset 0 0 0 1px #6fe07a}.send.flash{animation:.3s sflash}@keyframes sflash{50%{background:#4b6a2e}}#hold-btn{padding:2px 8px;font-size:11px;font-weight:800}#hold-btn.on{background:#7a3dbb;border-color:#c79bff}#touchbar{display:none}#shop{right:calc(8px + var(--safe-r));bottom:calc(120px + var(--safe-b));background:var(--panel);border:1px solid var(--line);z-index:8;border-radius:12px;flex-direction:column;gap:8px;width:420px;max-height:60vh;padding:10px;display:flex;position:absolute;overflow:auto}#shop h3{justify-content:space-between;align-items:center;margin:0;display:flex}.shop-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.sitem{text-align:left;flex-direction:column;align-items:flex-start;gap:2px;padding:6px;font-size:11px;display:flex}.sitem .sw{border-radius:2px;width:100%;height:4px}.sitem b{font-size:12px}.sitem .price{color:var(--gold);font-weight:700}.sitem.rec{border-color:#6fe07a}.sitem.poor .price{color:var(--danger)}.shop-sec{color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-size:11px}#labels,#popups{pointer-events:none;z-index:4;position:fixed;inset:0;overflow:hidden}.hlabel{text-shadow:0 1px 2px #000;white-space:nowrap;will-change:transform;flex-direction:column;align-items:center;gap:1px;font-size:10px;display:flex;position:absolute;transform:translate(-50%,-100%)}.hlabel .hb{background:#0b0e14;border-radius:2px;width:46px;height:5px;overflow:hidden}.hlabel .hb i{transform-origin:0;height:100%;display:block}.pop{text-shadow:0 1px 3px #000;will-change:transform;font-size:13px;font-weight:800;animation:.9s forwards rise;position:absolute;transform:translate(-50%,-50%)}.pop.gold{color:var(--gold);font-size:11px}@keyframes rise{to{opacity:0;transform:translate(-50%,-190%)}}#countdown{color:#fff;text-shadow:0 4px 24px #000000b3;pointer-events:none;z-index:15;justify-content:center;align-items:center;font-size:96px;font-weight:900;display:flex;position:fixed;inset:0}#banner{text-shadow:0 3px 14px #000c;pointer-events:none;z-index:15;text-align:center;font-size:30px;font-weight:900;animation:2.6s forwards ban;position:fixed;top:28%;left:50%;transform:translate(-50%)}@keyframes ban{0%{opacity:0;transform:translate(-50%,20px)}12%,75%{opacity:1;transform:translate(-50%)}to{opacity:0}}#toast{background:var(--panel);border:1px solid var(--danger);z-index:30;border-radius:10px;padding:8px 14px;position:fixed;bottom:50%;left:50%;transform:translate(-50%)}.move-mark{border:2px solid #8dff8d;border-radius:50%;width:18px;height:18px;animation:.45s forwards mm;position:absolute;transform:translate(-50%,-50%)scale(1.4)}@keyframes mm{to{opacity:0;transform:translate(-50%,-50%)scale(.3)}}.panel.end{width:min(760px,100%)}#end-title{text-align:center;margin:0;font-size:38px}#end-title.win{color:var(--gold)}#end-title.lose{color:#9aa4b8}#end-chart{background:#0b0e14;border-radius:8px;width:100%;height:auto}#end-table table{border-collapse:collapse;width:100%;font-size:12px}#end-table th,#end-table td{text-align:right;border-bottom:1px solid var(--line);white-space:nowrap;padding:4px 6px}#end-table th:first-child,#end-table td:first-child{text-align:left}#end-table tr.t0 td:first-child{border-left:3px solid var(--sun)}#end-table tr.t1 td:first-child{border-left:3px solid var(--moon)}#end-table .badge{color:var(--gold);background:#5a4413;border-radius:4px;margin-left:4px;padding:1px 4px;font-size:10px}#end-table{overflow-x:auto}#end-actions{justify-content:center;gap:10px;display:flex}body.touch #sendbar{display:none}body.touch #sendbar.open{left:calc(70px + var(--safe-l));bottom:calc(6px + var(--safe-b));background:var(--panel);border:1px solid var(--line);z-index:9;border-radius:12px;flex-direction:column;gap:6px;padding:6px;display:flex;position:absolute;transform:none}body.touch #sendbar.open #sends{grid-template-columns:repeat(2,66px);gap:6px;display:grid}body.touch #hold-btn{min-height:44px}body.touch .send{width:66px;height:56px}body.touch #touchbar{left:calc(6px + var(--safe-l));bottom:calc(6px + var(--safe-b));pointer-events:auto;z-index:10;flex-direction:column;gap:6px;display:flex;position:absolute}body.touch #touchbar button{width:58px;min-height:48px;padding:4px;font-size:12px;font-weight:700}body.touch #touchbar button.on{border-color:var(--gold);color:var(--gold)}body.touch #bottom{left:auto;right:calc(6px + var(--safe-r));bottom:calc(6px + var(--safe-b));grid-template-columns:auto auto;align-items:center;gap:6px;max-width:calc(100% - 76px);padding:6px;display:grid;transform:none}body.touch #abilities{grid-area:2/1/auto/-1;justify-content:flex-end}body.touch #herobox{grid-row:1}body.touch #econ{flex-direction:row;grid-row:1;align-items:center}body.touch #items{display:none}body.touch .ab{width:64px;height:64px}body.touch .ab.ult{width:76px;height:76px}body.touch #bars{width:104px}body.touch #portrait{width:36px;height:36px}body.touch #gold-btn{min-width:64px;min-height:44px}body.touch #quickbuy{max-width:84px;min-height:44px;font-size:10px}body.touch #shop{left:calc(70px + var(--safe-l));width:auto;max-height:62vh;padding-bottom:calc(10px + var(--safe-b));z-index:11;border-radius:14px 0 0;bottom:0;right:0}body.touch .shop-grid{grid-template-columns:repeat(2,1fr)}body.touch .sitem{min-height:64px}body.touch #feed{display:none}.aim-ring{pointer-events:none;z-index:6;border:2px dashed #ffdc78cc;border-radius:50%;position:fixed;transform:translate(-50%,-50%)}@media (max-width:700px){#topbar{gap:6px;max-width:calc(100% - 12px);padding:4px 6px}.beacon .bbar{width:56px}.beacon .bname{display:none}.beacon .bhp{min-width:0}#clock{min-width:64px}#clock-time{font-size:16px}#sidebar{top:calc(52px + var(--safe-t));width:150px}#minimap{width:70px;height:100px}#bars{width:110px}#portrait{width:38px;height:38px}#teams,#hero-cards{grid-template-columns:1fr}.hcard ul{display:none}.wb{padding:3px 6px;font-size:11px}}@media (max-height:480px){#sidebar{top:calc(46px + var(--safe-t))}#minimap{width:70px;height:100px}#omen .wb:nth-child(n+4){display:none}body.touch #bottom{grid-template-columns:auto auto auto;max-width:calc(100% - 140px)}body.touch #abilities{grid-area:1/3}body.touch #herobox{grid-column:1}body.touch #econ{flex-direction:column;grid-column:2}body.touch .ab{width:56px;height:56px}body.touch .ab.ult{width:64px;height:64px}body.touch #touchbar{grid-template-columns:58px 58px;display:grid}body.touch #sendbar.open{left:calc(132px + var(--safe-l))}body.touch #sendbar.open #sends{grid-template-columns:repeat(4,62px)}body.touch .send{width:62px;height:48px}body.touch #shop{left:calc(132px + var(--safe-l));max-height:88vh}body.touch .shop-grid{grid-template-columns:repeat(3,1fr)}#topbar{padding:3px 8px}.panel{padding:14px}}