:root{--bg:#070a14;--panel:#0a0e1cdb;--panel-border:#94a3b840;--text:#e5e7eb;--muted:#94a3b8;--accent:#7dd3fc;--danger:#ef4444;--ok:#86efac;--font-display:"Orbitron", system-ui, sans-serif;--font-mono:"Share Tech Mono", ui-monospace, monospace;--bar-h:52px;--hint-h:60px}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font-mono);margin:0;overflow:hidden}#app{position:fixed;inset:0}#board{position:absolute;inset:0}#board canvas{display:block}#hud{pointer-events:none;position:absolute;inset:0}#hud>*{pointer-events:auto}#hud .banner,#hud .log,#hud .hint,#hud .toast,#hud .tooltip{pointer-events:none}#hud .hint button{pointer-events:auto}button{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--text);cursor:pointer;background:#7dd3fc1f;border:1px solid #7dd3fc73;border-radius:6px;padding:8px 12px;font-size:12px;transition:background 80ms,transform 80ms}button:hover{background:#7dd3fc40}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}button.primary{border-color:var(--accent);background:#7dd3fc59}button.danger{border-color:var(--danger);background:#ef444426}select,input{font-family:var(--font-mono);color:var(--text);border:1px solid var(--panel-border);background:#0b1020;border-radius:6px;padding:6px 8px}.topbar{border-bottom:1px solid var(--panel-border);background:linear-gradient(#070a14f2,#070a1499);flex-wrap:wrap;align-items:center;gap:6px 16px;min-height:52px;padding:6px 16px;display:flex;position:absolute;top:0;left:0;right:0}.topbar .brand{font-family:var(--font-display);letter-spacing:.18em;color:var(--accent);align-items:center;min-height:44px;margin:-2px 0;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex}.topbar .brand:hover,.topbar .brand:focus-visible{text-decoration:underline}.topbar .turn{color:var(--muted);white-space:nowrap;font-size:13px}.topbar .player{font-family:var(--font-display);border:1px solid;border-radius:4px;padding:4px 10px;font-size:13px}.topbar .scoreboard{align-items:baseline;gap:14px;font-size:13px;display:flex}.topbar .scoreboard .label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px}.topbar .scoreboard .score b{font-weight:400}.topbar .scoreboard .score.local{font-size:15px}.topbar .scoreboard .score.local b{font-weight:700}.topbar .scoreboard .score.out{opacity:.45;text-decoration:line-through}.topbar .scoreboard .score{white-space:nowrap;flex-direction:column;line-height:1.2;display:inline-flex}.topbar .scoreboard .income{opacity:.75;font-size:10px}.topbar .controls{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 16px;margin-left:auto;display:flex}.topbar label{color:var(--muted);align-items:center;gap:6px;font-size:12px;display:flex}.panel{background:var(--panel);border:1px solid var(--panel-border);backdrop-filter:blur(6px);border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.45;position:absolute}.panel h3{font-family:var(--font-display);letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin:0 0 6px;font-size:12px}.panel .row{justify-content:space-between;gap:12px;display:flex}.panel .muted{color:var(--muted)}.unitpanel{width:280px;bottom:16px;left:16px}.unitpanel .actions{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.unitpanel .classes,.buildmenu .item .classes{color:var(--accent);letter-spacing:.06em;font-size:11px}.unitpanel .capturing{color:#fde68a;font-size:12px}.oddspanel{width:300px;bottom:16px;right:16px}.oddspanel .bar{background:#94a3b826;border-radius:5px;height:10px;margin:4px 0 8px;position:relative;overflow:hidden}.oddspanel .bar span{background:var(--danger);opacity:.7;position:absolute;top:0;bottom:0}.oddspanel .bar i{background:#fff;width:2px;position:absolute;top:0;bottom:0}.oddspanel .cbar span{background:var(--accent)}.oddspanel .big{font-family:var(--font-display);font-size:20px}.oddspanel .breakdown{color:var(--muted);margin-top:6px;font-size:11px}.buildmenu{width:320px;max-height:70vh;bottom:16px;left:16px;overflow:auto}.buildmenu .item{cursor:pointer;border:1px solid #0000;border-radius:6px;grid-template-columns:1fr auto;gap:2px 10px;padding:8px;display:grid}.buildmenu .item:hover{border-color:var(--panel-border);background:#7dd3fc14}.buildmenu .item.off{opacity:.4;cursor:default}.buildmenu .item .name{font-family:var(--font-display);font-size:12px}.buildmenu .item .cost{color:var(--ok)}.buildmenu .item .classes{grid-column:1/-1}.buildmenu .item .role,.buildmenu .item .matchup{color:var(--muted);grid-column:1/-1;font-size:11px}.buildmenu .item .matchup .strong{color:var(--ok)}.buildmenu .item .matchup .weak{color:#fdba74}.log{left:16px;top:calc(var(--bar-h) + 12px);width:320px;color:var(--muted);pointer-events:none;font-size:11px;line-height:1.5;position:absolute}.log .entry{opacity:.85}.log .entry:last-child{color:var(--text);opacity:1}.log .entry .sub{padding-left:14px}.log .detail{color:var(--muted);opacity:.75}.hint{color:var(--muted);pointer-events:none;white-space:nowrap;text-align:center;font-size:11px;line-height:1.6;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.hint .legend{flex-wrap:wrap;justify-content:center;align-items:center;gap:0 10px;display:flex}.hint .togglerow{margin-bottom:3px}.hint button.toggle{align-items:center;gap:5px;padding:2px 8px;font-size:10px;display:inline-flex}.hint button.toggle .swatch{opacity:.35;border-radius:2px;width:9px;height:9px;display:inline-block}.hint button.toggle.on{background:#f43f5e38;border-color:#f43f5e}.hint button.toggle.on .swatch{opacity:.9}.hint button.helptoggle{display:none}.hint button.helptoggle[aria-pressed=true]{border-color:var(--accent);background:#7dd3fc59}@media (height<=500px){.hint.touch button.helptoggle{display:inline-flex}.hint.touch:not(.open) .help,.hint.touch:not(.open) .legend{display:none}}.hint .legend .item{align-items:center;gap:4px;display:inline-flex}.hint .legend .sep{opacity:.5}.hint .legend .swatch{opacity:.75;border-radius:2px;width:10px;height:10px;display:inline-block}.endconfirm{right:16px;top:calc(var(--bar-h) + 8px);width:280px}.endconfirm .actions{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.leaveconfirm{left:16px;top:calc(var(--bar-h) + 8px);width:280px;max-width:calc(100% - 32px)}.leaveconfirm .actions{justify-content:flex-end;gap:8px;margin-top:8px;display:flex}.tooltip{background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;max-width:300px;padding:6px 9px;font-size:12px;line-height:1.45;position:absolute}.tooltip .muted{color:var(--muted)}.tooltip .warn{color:#fdba74}.tooltip .ok{color:var(--ok)}.replaybar{left:50%;bottom:calc(var(--hint-h) + 16px);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;width:max-content;max-width:calc(100% - 32px);padding:8px 10px;display:flex;transform:translate(-50%)}.replaybar .where,.replaybar .keys{align-items:center;gap:6px;display:flex}.replaybar .label{color:var(--muted);white-space:nowrap;font-size:12px}.replaybar select{padding:4px 6px;font-size:12px}.replaybar button{white-space:nowrap}.replaybar button.icon{padding:7px 10px;line-height:0}.topbar .replaybadge{font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:#fde68a;background:#fde68a1a;border:1px solid #fde68a;border-radius:4px;padding:4px 10px;font-size:12px}.topbar.replaying [data-el=end],.topbar.replaying [data-el=resign],.topbar.watching [data-el=end],.topbar.watching [data-el=resign]{display:none}.oddspanel .asof{margin-top:6px;font-size:11px}.oddspanel.readonly{top:calc(var(--bar-h) + 12px);bottom:auto}@media (height<=500px){.oddspanel.readonly{padding:8px 12px}.oddspanel.readonly .bar,.oddspanel.readonly .usually,.oddspanel.readonly .breakdown{display:none}}.banner{pointer-events:none;opacity:0;flex-direction:column;justify-content:center;align-items:center;height:96px;display:flex;position:absolute;top:36%;left:0;right:0}.banner .bg{background:linear-gradient(90deg, transparent, var(--banner-color,#7dd3fc) 20%, var(--banner-color,#7dd3fc) 80%, transparent);opacity:.18;position:absolute;inset:0;transform:scaleX(0)}.banner .line{background:var(--banner-color,#7dd3fc);opacity:.6;height:1px;position:absolute;left:0;right:0}.banner .line.t{top:0}.banner .line.b{bottom:0}.banner .title{font-family:var(--font-display);letter-spacing:.22em;color:#fff;text-shadow:0 0 18px var(--banner-color,#7dd3fc);font-size:34px;font-weight:700;position:relative}.banner .sub{font-family:var(--font-display);letter-spacing:.3em;color:var(--banner-color,#7dd3fc);margin-top:6px;font-size:14px;position:relative}.overlay{background:#04060ed1;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay .card{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;width:min(560px,92vw);padding:24px 26px}.overlay h1{font-family:var(--font-display);letter-spacing:.2em;color:var(--accent);margin:0 0 4px;font-size:26px}.overlay h2{font-family:var(--font-display);letter-spacing:.1em;margin:18px 0 8px;font-size:16px}.overlay .tagline{color:var(--muted);margin:0 0 18px}.overlay .grid{grid-template-columns:1fr 1fr;gap:10px 16px;display:grid}.overlay .grid label{color:var(--muted);flex-direction:column;gap:4px;font-size:12px;display:flex}.overlay .buttons{justify-content:flex-end;gap:10px;margin-top:20px;display:flex}.overlay .share-row{flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0;font-size:12px;display:flex}.overlay .share-row .muted{color:var(--muted)}.overlay table{border-collapse:collapse;width:100%;font-size:12px}.overlay td,.overlay th{border-bottom:1px solid var(--panel-border);text-align:right;padding:4px 6px}.overlay td:first-child,.overlay th:first-child{text-align:left}.toast{top:calc(var(--bar-h) + 12px);border:1px solid var(--danger);color:#fecaca;opacity:0;background:#ef444433;border-radius:8px;padding:8px 14px;font-size:12px;position:absolute;left:50%;transform:translate(-50%)}.fxlab .lab{top:calc(var(--bar-h) + 8px);width:300px;position:absolute;right:16px}.fxlab .lab .item{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;padding:6px 0;display:flex}a.button{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--text);background:#7dd3fc1f;border:1px solid #7dd3fc73;border-radius:6px;padding:8px 12px;font-size:12px;text-decoration:none;display:inline-block}a.button.primary{border-color:var(--accent);background:#7dd3fc59}a.button.danger{border-color:var(--danger);background:#ef444426}a.button:hover{background:#7dd3fc40}.topbar .scoreboard .score.leaderless{opacity:.6}.topbar .clockchip{color:var(--muted);white-space:nowrap;font-size:12px}.topbar .clockchip.late,#pvp-side .late{color:#fca5a5}.overlay .card p.warn,#pvp-side .warn{color:#fdba74}.overlay .card p.ok,#pvp-side .ok{color:var(--ok)}.overlay .card .muted{color:var(--muted);font-size:12px}.overlay .signin{flex-wrap:wrap;gap:8px;margin:6px 0 10px;display:flex}.overlay .signin input{flex:1;min-width:200px}.overlay .commit label{margin:4px 0;font-size:12px;display:block}.overlay .commit button{margin-top:8px}.overlay .commit .gates{color:var(--muted);margin-left:22px;font-size:11px;display:block}#app.pvp{--side-w:320px}@media (width>=721px){#app.pvp:not(.pvp-collapsed) #board,#app.pvp:not(.pvp-collapsed) #hud{right:var(--side-w)!important}#app.pvp:not(.pvp-collapsed) #hud .topbar{right:calc(-1 * var(--side-w))}}#app.pvp #hud .hint{white-space:normal;max-width:calc(100% - 32px)}#pvp-side{top:var(--bar-h);width:var(--side-w,320px);background:var(--panel);border-left:1px solid var(--panel-border);z-index:2;flex-direction:column;font-size:13px;line-height:1.45;display:flex;position:absolute;bottom:0;right:0}#app.pvp-collapsed #pvp-side{display:none}#pvp-side .head{border-bottom:1px solid var(--panel-border);padding:12px 14px 8px}#pvp-side .head .title{font-family:var(--font-display);letter-spacing:.08em;color:var(--accent);justify-content:space-between;align-items:center;gap:8px;font-size:13px;display:flex}#pvp-side .head .title button{padding:3px 8px;font-size:10px}#pvp-side .head .clockline{margin-top:4px}#pvp-side .yourturn{color:var(--ok)}#pvp-side .muted{color:var(--muted)}#pvp-side .small{font-size:11px}#pvp-side button.link{color:var(--muted);background:0 0;border:none;padding:0 0 0 6px;font-size:10px;text-decoration:underline}#pvp-side .choices{border-bottom:1px solid var(--panel-border);background:#ef44440f;padding:10px 14px}#pvp-side .choices p{margin:0 0 8px}#pvp-side .choices .row{flex-wrap:wrap;gap:8px;margin-bottom:6px;display:flex}#pvp-side .feed{flex:1;padding:8px 14px;overflow-y:auto}#pvp-side .feed .line{overflow-wrap:anywhere;padding:2px 0}#pvp-side .feed .line.sys{color:var(--muted);font-size:12px}#pvp-side .feed .line.turn{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-top:1px solid var(--panel-border);margin-top:8px;padding-top:6px;font-size:11px}#pvp-side .feed .line.chat.mine{opacity:.9}#pvp-side .feed button.mute{opacity:.6;margin-left:4px;padding:1px 6px;font-size:9px}#pvp-side .feed button.mute:hover{opacity:1}#pvp-side .chatbar{border-top:1px solid var(--panel-border);gap:8px;padding:10px 14px 4px;display:flex}#pvp-side .chatbar input{flex:1;min-width:0}#pvp-side [data-el=chatNote]{padding:0 14px 10px}#hud .panelopen{right:8px;top:calc(var(--bar-h) + 8px);padding:4px 10px;font-size:10px;display:none;position:absolute}#app.pvp-collapsed #hud .panelopen{display:block}#hud .pvptabs{display:none}#hud .awaycard{left:50%;top:calc(var(--bar-h) + 12px);width:min(420px,90%);transform:translate(-50%)}#hud .awaycard .actions{gap:8px;margin-top:8px;display:flex}@media (width<=720px),(height<=500px){.topbar{gap:6px 8px;padding:6px 8px;font-size:12px}.topbar .brand{letter-spacing:.06em;justify-content:center;min-width:44px;font-size:11px}.topbar .controls{gap:6px}.topbar button{letter-spacing:.02em;padding:6px;font-size:10px}.topbar label .name{display:none}.topbar select{padding:3px 4px;font-size:11px}.topbar .clockchip{font-size:10px}.topbar .scoreboard .label{display:none}.topbar .scoreboard{flex-wrap:wrap;gap:2px 12px}}@media (width<=720px){.hint{white-space:normal;max-width:calc(100% - 32px)}#app.pvp #pvp-side{width:100%;top:calc(var(--bar-h) + 40px);background:var(--bg);border-left:none;display:none}#app.pvp.pvp-tab-match #pvp-side{display:flex}#app.pvp-collapsed #hud .panelopen{display:none}#app.pvp #hud .pvptabs{top:calc(var(--bar-h) + 4px);gap:4px;display:flex;position:absolute;right:8px}#hud .pvptabs button{padding:4px 10px;font-size:10px}#hud .pvptabs button.on{border-color:var(--accent);background:#7dd3fc59}.unitpanel,.buildmenu{width:calc(100vw - 32px);bottom:8px;left:16px}.oddspanel{width:calc(100vw - 32px);bottom:200px;left:16px;right:auto}.log{display:none}.banner .title{font-size:22px}}#hud .coach{z-index:5;background:var(--panel);border:1px solid var(--accent);border-radius:10px;width:min(300px,100vw - 32px);padding:10px 12px;font-size:13px;line-height:1.45;position:fixed;box-shadow:0 6px 24px #00000073}#hud .coach .actions{align-items:center;gap:12px;margin-top:8px;display:flex}#hud .coach.arrow:after{content:"";left:calc(var(--arrow-x) - 6px);background:var(--panel);border:1px solid var(--accent);width:12px;height:12px;position:absolute;transform:rotate(45deg)}#hud .coach.arrow.below:after{border-bottom:none;border-right:none;top:-7px}#hud .coach.arrow.above:after{border-top:none;border-left:none;bottom:-7px}#hud .coach button.link{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;text-decoration:underline}#pvp-side .clockline.overdue{border-left:3px solid #fca5a5;padding-left:6px}#hud .drawbanner{left:50%;top:calc(var(--bar-h) + 12px);border-color:var(--accent);z-index:3;width:min(420px,90%);transform:translate(-50%)}#hud .drawbanner .actions{gap:8px;margin-top:8px;display:flex}