:root{--night: #14163a;--night-2: #1d2050;--ink: #06071a;--paper: #f3f0ff;--muted: #a9aedb;--pink: #ff4d6d;--yellow: #ffd23f;--blue: #4da3ff;--skew: -10deg;--font: "Bahnschrift", "DIN Alternate", "Arial Narrow", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--night);color:var(--paper);font-family:var(--font)}button,input,select{font-family:inherit}#game{position:fixed;inset:0;width:100vw;height:100vh;display:block}#ui{position:fixed;inset:0;pointer-events:none}#ui>*{pointer-events:auto}.screen{position:absolute;inset:0;overflow-y:auto;padding:clamp(16px,4vh,48px) clamp(16px,5vw,72px);display:flex;flex-direction:column;gap:20px}.screen.dim{background:linear-gradient(100deg,#0a0b22eb,#0a0b22b8 45%,#0a0b2259)}.screen.solid{background:radial-gradient(ellipse at 70% 20%,var(--night-2),var(--night) 70%)}.screen.clear{pointer-events:none}.screen.clear>*{pointer-events:auto}.hidden{display:none!important}.wordmark{margin:0;line-height:.82;font-stretch:condensed;font-weight:800;font-size:clamp(56px,11vw,150px);letter-spacing:-.02em;transform:skew(var(--skew));transform-origin:left bottom;color:var(--paper);-webkit-text-stroke:3px var(--ink);text-shadow:6px 6px 0 var(--pink),12px 12px 0 var(--ink)}.wordmark span{display:block}.wordmark span+span{color:var(--yellow);margin-left:.35em}.tagline{margin:6px 0 0;color:var(--muted);font-size:17px;max-width:46ch}.slabs{display:flex;flex-direction:column;gap:12px;margin-top:18px;width:min(420px,100%)}.slab{position:relative;display:flex;align-items:baseline;gap:14px;padding:14px 26px;border:3px solid var(--ink);cursor:pointer;background:var(--paper);color:var(--ink);font-size:26px;font-weight:700;font-stretch:condensed;text-align:left;transform:skew(var(--skew));box-shadow:6px 6px 0 var(--ink);transition:transform .08s ease-out,box-shadow .08s ease-out,background .08s}.slab>*{transform:skew(calc(var(--skew) * -1))}.slab small{font-size:14px;font-weight:500;color:#4a4d72;font-stretch:normal}.slab:hover,.slab:focus-visible{background:var(--yellow);transform:skew(var(--skew)) translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink);outline:none}.slab:active{transform:skew(var(--skew)) translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}.slab.primary{background:var(--pink);color:var(--paper)}.slab.primary small{color:#ffe3ea}.slab.primary:hover,.slab.primary:focus-visible{background:#ff6b86}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);font-size:17px;font-weight:700;cursor:pointer;transform:skew(var(--skew));box-shadow:4px 4px 0 var(--ink);transition:transform .08s,box-shadow .08s,background .08s}.btn>*{transform:skew(calc(var(--skew) * -1))}.btn:hover,.btn:focus-visible{background:var(--yellow);outline:none;transform:skew(var(--skew)) translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}.btn.go{background:var(--pink);color:var(--paper);font-size:22px;padding:12px 34px}.btn.go:hover{background:#ff6b86}.btn.ghost{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:none}.btn.ghost:hover{background:#ffffff1a}.btn:disabled{opacity:.45;cursor:not-allowed;transform:skew(var(--skew));box-shadow:4px 4px 0 var(--ink);background:var(--paper)}.topbar{display:flex;align-items:center;gap:16px}.topbar h2{margin:0;font-size:clamp(30px,4vw,46px);font-stretch:condensed;font-weight:800;transform:skew(var(--skew))}.spacer{flex:1}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.muted{color:var(--muted)}.hint{color:var(--muted);font-size:14px}.error{color:#ff8fa3;font-weight:600}.select-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.25fr);gap:28px;align-items:start}@media(max-width:860px){.select-layout{grid-template-columns:1fr}}.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:12px}.fighter-tile{position:relative;border:3px solid var(--ink);background:var(--c);color:var(--paper);padding:10px 10px 8px;cursor:pointer;text-align:left;min-height:116px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;box-shadow:4px 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}.fighter-tile canvas{position:absolute;inset:0;width:100%;height:100%}.fighter-tile .name{position:relative;font-size:22px;font-weight:800;font-stretch:condensed;-webkit-text-stroke:1px var(--ink);text-shadow:2px 2px 0 var(--ink)}.fighter-tile .arch{position:relative;font-size:13px;color:var(--paper);text-shadow:1px 1px 0 var(--ink)}.fighter-tile:hover,.fighter-tile:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);outline:none}.fighter-tile.selected{outline:4px solid var(--yellow);outline-offset:2px}.fighter-tile .badge{position:absolute;top:6px;right:6px;background:var(--ink);color:var(--yellow);font-size:12px;font-weight:700;padding:2px 6px}.detail{border:3px solid var(--ink);background:#06071abf;box-shadow:8px 8px 0 var(--ink);display:grid;grid-template-columns:220px 1fr}@media(max-width:1100px){.detail{grid-template-columns:1fr}}.detail .stage{background:linear-gradient(180deg,var(--c2),var(--ink));border-right:3px solid var(--ink);min-height:280px;position:relative}.detail .stage canvas{width:100%;height:100%;position:absolute;inset:0}.detail .info{padding:18px 20px;display:flex;flex-direction:column;gap:12px}.detail h3{margin:0;font-size:40px;font-weight:800;font-stretch:condensed;color:var(--c);-webkit-text-stroke:1px var(--ink)}.detail .arch-line{margin:-6px 0 0;color:var(--muted)}.detail p{margin:0;line-height:1.45;max-width:62ch}.stats{display:grid;grid-template-columns:110px 1fr;gap:5px 12px;font-size:14px}.stat-bar{display:flex;gap:4px;align-items:center}.stat-bar i{width:26px;height:10px;background:#ffffff1f;transform:skew(var(--skew))}.stat-bar i.on{background:var(--c)}.specials{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:14px;align-items:baseline}.specials kbd,.kbd{display:inline-block;min-width:26px;padding:2px 6px;text-align:center;font-family:inherit;font-weight:700;font-size:13px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}.specials b{color:var(--paper)}.specials span{color:var(--muted)}.passive{font-size:14px;color:var(--muted);border-left:4px solid var(--c);padding-left:10px}.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}.field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}.field>span{font-weight:600}.seg{display:flex;flex-wrap:wrap;gap:6px}.seg button{padding:7px 12px;background:transparent;color:var(--paper);border:2px solid var(--muted);cursor:pointer;font-size:15px;font-weight:600;transform:skew(var(--skew))}.seg button.on{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:3px 3px 0 var(--pink)}.seg button:focus-visible{outline:2px solid var(--yellow)}input[type=text]{padding:10px 12px;font-size:18px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);min-width:0}input[type=text]:focus{outline:3px solid var(--yellow)}input[type=range]{width:100%;accent-color:var(--pink)}label.check{display:flex;gap:10px;align-items:center;color:var(--paper);font-size:15px;cursor:pointer}label.check input{width:18px;height:18px;accent-color:var(--pink)}.panel{border:3px solid var(--ink);background:#06071ab3;box-shadow:6px 6px 0 var(--ink);padding:18px 20px}.panel h3{margin:0 0 12px;font-size:22px;font-stretch:condensed}.binds{display:grid;grid-template-columns:1fr auto auto;gap:8px 14px;align-items:center;font-size:15px}.binds button{min-width:84px}.binds .listening{background:var(--yellow)}.lobby{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}@media(max-width:900px){.lobby{grid-template-columns:1fr}}.code{font-size:clamp(44px,7vw,76px);font-weight:800;letter-spacing:.12em;color:var(--yellow);font-stretch:condensed;-webkit-text-stroke:2px var(--ink);text-shadow:5px 5px 0 var(--ink);cursor:copy;user-select:all}.players{display:flex;flex-direction:column;gap:8px}.player-row{display:grid;grid-template-columns:10px 1fr auto auto;gap:12px;align-items:center;background:#ffffff0f;border:2px solid var(--ink);padding:8px 12px 8px 0}.player-row .strip{align-self:stretch;background:var(--c)}.player-row .who{display:flex;flex-direction:column}.player-row .who b{font-size:18px}.player-row .who small{color:var(--muted)}.tag{font-size:13px;font-weight:700;padding:3px 8px;border:2px solid currentColor}.tag.ready{color:#5ee08a}.tag.wait{color:var(--muted)}.tag.off{color:#ff8fa3}.mini-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}.mini-roster button{border:3px solid var(--ink);background:var(--c);color:var(--paper);font-weight:800;font-size:16px;padding:14px 6px;cursor:pointer;text-shadow:1px 1px 0 var(--ink)}.mini-roster button.on{outline:3px solid var(--yellow);outline-offset:1px}.controls-help{position:absolute;left:16px;top:16px;padding:10px 12px;background:#06071ab3;border:2px solid var(--ink);font-size:13px;display:grid;grid-template-columns:auto auto;gap:4px 10px;color:var(--muted);pointer-events:none}.controls-help b{color:var(--paper);font-weight:600}.pause-menu{margin:auto;display:flex;flex-direction:column;align-items:center;gap:16px}.pause-menu h2{font-size:64px;margin:0;font-stretch:condensed;transform:skew(var(--skew));-webkit-text-stroke:2px var(--ink);text-shadow:5px 5px 0 var(--pink)}.pause-menu .slabs{align-items:stretch}.results{display:flex;flex-direction:column;gap:22px;max-width:980px;margin:0 auto;width:100%}.winner{font-size:clamp(48px,8vw,104px);font-weight:800;font-stretch:condensed;margin:0;transform:skew(var(--skew));-webkit-text-stroke:3px var(--ink);text-shadow:7px 7px 0 var(--ink);color:var(--c);line-height:.95}.ranking{display:flex;flex-direction:column;gap:8px}.rank-row{display:grid;grid-template-columns:54px 10px 1fr repeat(3,90px);gap:12px;align-items:center;background:#06071ab3;border:2px solid var(--ink);padding:10px 14px 10px 0;font-size:16px}.rank-row .place{font-size:30px;font-weight:800;text-align:center}.rank-row .strip{align-self:stretch;background:var(--c)}.rank-row .num{text-align:right;font-variant-numeric:tabular-nums}.rank-row .num small{display:block;color:var(--muted);font-size:12px}.rank-row.first{background:#ffd23f24;border-color:var(--yellow)}.toast{position:absolute;left:50%;bottom:32px;transform:translate(-50%);background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:10px 18px;font-weight:700;z-index:10}@media(prefers-reduced-motion:reduce){.slab,.btn,.fighter-tile{transition:none}}