:root{color-scheme:dark;--bg:#101617;--panel:#1a2223;--line:#35413f;--text:#edf0df;--muted:#a6b3aa;--lime:#d4f16b;--orange:#f59b56;font-family:Inter,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button,select,input{border:1px solid var(--line);background:#1b2525;color:var(--text);border-radius:5px;padding:10px 13px}button:hover:not(:disabled){border-color:var(--lime);color:var(--lime)}a{color:inherit;text-decoration:none}a:hover{color:var(--lime)}:focus-visible{outline:2px solid var(--lime);outline-offset:4px}[hidden]{display:none!important}.shell{max-width:1504px;margin:auto;padding:0 48px}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:15px}.brand{display:flex;gap:12px;align-items:center;font-size:12px;letter-spacing:1.8px;font-weight:750}.brand-icon{background:var(--lime);color:#172222;display:grid;place-items:center;width:28px;height:28px;font-size:20px;font-style:italic;border-radius:3px}.muted{color:var(--muted)}.top-actions{display:flex;gap:9px;align-items:center;font-size:12px}.top-actions button{background:transparent;padding:8px 12px}.top-actions a{margin-left:10px}.title-row{display:flex;justify-content:space-between;align-items:center;padding:32px 0 27px}.eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--muted)}h1{font-size:clamp(48px,6.5vw,88px);line-height:1;margin:8px 0 0;letter-spacing:-5px;font-weight:900}.title-dot{color:var(--lime)}.title-row p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.title-row strong{font-weight:400;color:var(--text)}.arena{position:relative;border:1px solid #536056;border-radius:8px;overflow:hidden;background:#313d3e}.arena-top{position:absolute;z-index:2;top:0;width:100%;height:43px;background:#172222cb;border-bottom:1px solid #9aab8926;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:10px;letter-spacing:1.5px;font-weight:700}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:10px}canvas{width:100%;display:block;aspect-ratio:1200/640}.welcome{position:absolute;inset:43px 0 0;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;padding:36px 5%;gap:36px;background:linear-gradient(90deg,#152321bb,transparent 80%)}.welcome-copy{align-self:start;margin-top:9%}.welcome-copy .eyebrow{color:#d7e7ca}.welcome h2{font-size:clamp(32px,4vw,59px);letter-spacing:-2px;line-height:1.07;margin:18px 0;color:#fffce7}.welcome p{font-size:14px;color:#e3e6d7;line-height:1.6}.feature-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:25px}.feature-chips span{font-size:10px;border:1px solid #e3e6d75c;padding:7px 9px;border-radius:30px;background:#25373170}.setup{padding:24px;border:1px solid #637162;background:#152121ed;border-radius:8px;display:grid;gap:9px;max-width:350px;justify-self:end;width:100%;box-shadow:0 15px 50px #0003}.setup label{font-size:9px;font-weight:700;letter-spacing:1.5px;margin-top:2px}.setup input,.setup select{width:100%;font-size:12px;padding:10px}.primary{background:var(--lime);color:#20281a;border-color:var(--lime);font-size:11px;letter-spacing:.8px;font-weight:800;padding:14px 17px}.primary:hover:not(:disabled){background:#e3ff88;color:#111}.primary span{float:right;font-size:16px}.setup .primary{margin-top:8px}.join-row{display:grid;grid-template-columns:1fr auto;gap:8px}.join-row input{min-width:0;text-transform:uppercase}.join-row button{font-size:11px}.setup small{font-size:9px;color:var(--muted);text-align:center;line-height:1.5}.scene-caption{position:absolute;bottom:23px;left:28px;display:flex;gap:15px;align-items:center;font-size:9px;letter-spacing:1.4px;color:#d9ddc6;opacity:.8}.scene-caption strong{font-size:11px}.battle-banner{position:absolute;left:50%;top:18%;transform:translateX(-50%);max-width:90%;padding:16px 30px;background:#14211bed;border:1px solid var(--lime);border-radius:7px;text-align:center;font-size:20px;color:var(--lime);box-shadow:0 6px 50px #0006}#notice{min-height:44px;font-size:12px;color:var(--muted);padding:15px 0}#notice.error{color:#ffb39a}.session{display:flex;justify-content:space-between;align-items:center;border-block:1px solid var(--line);padding:12px 0;gap:14px}.session>div{display:flex;align-items:center;gap:14px}#copy-code{font-family:monospace;font-size:17px;letter-spacing:3px}#connection{font-size:11px;color:var(--muted)}.session-actions button{font-size:11px}.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px;margin:16px 0}.pilot{padding:13px;background:var(--panel);border:1px solid var(--line);border-radius:5px}.pilot.active{border-color:var(--lime)}.pilot.dead{opacity:.45}.pilot h3{font-size:12px;margin:0 0 10px}.pilot h3 i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px}.pilot p{font-size:10px;display:flex;justify-content:space-between;margin:8px 0 0;color:var(--muted)}.hp{height:3px;background:#4a4c42}.hp span{height:3px;display:block;background:var(--lime)}.controls{display:grid;grid-template-columns:1fr 1fr 1.15fr .8fr;gap:24px;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:6px}.control label{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;color:var(--muted)}output{font-size:20px;letter-spacing:-.5px;color:var(--text);font-weight:700}input[type=range]{width:100%;accent-color:var(--lime);padding:0;margin:18px 0 12px}.control>span{display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.weapon-control select{width:100%;font-size:12px;margin-top:9px}.energy{display:flex;align-items:center;justify-content:space-between;margin-top:7px}.energy label{font-size:9px}.energy input{width:60px;padding:3px 5px}.fire{width:100%;height:48px}.movement{display:flex;gap:6px;margin-top:7px}.movement button{width:50%;font-size:10px;padding:8px 2px}.shop{margin-top:35px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-heading h2{font-size:25px;letter-spacing:-.9px;margin:8px 0}.shop-account{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.shop-account label{font-size:10px}.shop-account select{font-size:12px}.shop-account strong{color:var(--lime);font-size:18px}.shop-filters{display:flex;gap:6px;margin:20px 0;flex-wrap:wrap}.shop-filters button{font-size:11px;background:transparent}.shop-filters .active{color:var(--lime);border-color:var(--lime)}.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.item{padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column}.item-head{display:flex;justify-content:space-between;align-items:center}.item-symbol{font-size:25px;color:var(--orange)}.item small{font-size:10px;color:var(--muted)}.item h3{font-size:14px;margin:14px 0 7px}.item p{font-size:11px;color:var(--muted);line-height:1.6;flex:1;margin:0 0 15px}.item button{font-size:11px;display:flex;justify-content:space-between;gap:5px}.guide{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:35px;margin:48px 0 40px}.guide h2{font-size:27px;letter-spacing:-1px;margin:12px 0}.step{font-size:10px;letter-spacing:1.5px;color:var(--orange)}.guide h3{font-size:15px;margin:16px 0 10px}.guide p,.about p{font-size:12px;line-height:1.8;color:var(--muted)}.about{padding:17px 0;border-block:1px solid var(--line);font-size:12px}.about summary{cursor:pointer}.about a{text-decoration:underline}footer{display:flex;justify-content:space-between;padding:28px 0;font-size:10px;letter-spacing:1px;color:var(--muted)}.shell:fullscreen{overflow:auto;background:var(--bg);max-width:none;padding:0 24px}.shell:fullscreen .title-row,.shell:fullscreen .guide,.shell:fullscreen .about,.shell:fullscreen footer{display:none}.shell:fullscreen .topbar{height:50px}.shell:fullscreen .arena{max-width:calc((100vh - 300px)*1.875);margin:12px auto 0}.shell:fullscreen .roster{margin:8px 0}.shell:fullscreen .controls{padding:12px}
@media(min-width:1500px){.welcome{padding-top:55px;padding-bottom:55px}}@media(max-width:1000px){.shell{padding:0 24px}.welcome{padding:20px 25px;gap:18px}.welcome-copy{margin-top:5%}.welcome h2{font-size:38px}.welcome-copy p{font-size:12px}.setup{padding:17px;gap:6px}.setup input,.setup select{padding:8px}.feature-chips{margin-top:14px}.scene-caption{display:none}.controls{gap:15px;padding:15px}.shop-grid{grid-template-columns:repeat(3,1fr)}.section-heading{align-items:flex-start;flex-direction:column}.guide{gap:20px}.topbar{height:66px}}
@media(max-width:700px){.shell{padding:0 14px}.topbar{height:60px}.brand{font-size:10px;gap:7px;letter-spacing:1px}.brand .muted,.top-actions a{display:none}.top-actions{gap:5px}.top-actions button{font-size:10px;padding:7px}.title-row{padding:22px 0}.title-row h1{font-size:53px;letter-spacing:-3px}.title-row p{font-size:10px}.eyebrow{font-size:8px}.arena:has(.welcome:not([hidden])){height:675px}.arena:has(.welcome:not([hidden])) canvas{height:100%;width:100%;object-fit:cover}.welcome{grid-template-columns:1fr;align-content:start;gap:17px;padding:20px;inset:43px 0 0}.welcome-copy{margin:0}.welcome h2{font-size:35px;margin:12px 0}.welcome-copy p{margin:0;font-size:12px}.welcome-copy p br{display:none}.feature-chips{margin-top:13px}.setup{justify-self:stretch;max-width:none;gap:7px;padding:15px}.setup input,.setup select{padding:9px}.setup .primary{padding:12px}.arena-top{padding:0 11px;font-size:8px;letter-spacing:.7px;height:36px}.session{align-items:flex-start;flex-direction:column}.session>div{gap:10px}.controls{grid-template-columns:1fr 1fr;gap:20px 15px}.shop-grid{grid-template-columns:repeat(2,1fr)}.item{padding:13px}.item h3{font-size:12px}.shop-account{gap:8px}.shop-account .primary{padding:12px}.roster{grid-template-columns:repeat(2,1fr)}.guide{grid-template-columns:1fr 1fr;gap:24px;margin:32px 0}.guide h2{font-size:24px}.battle-banner{font-size:14px;padding:10px 15px}.shell:fullscreen .arena{max-width:none}.shop-filters button{font-size:10px;padding:8px}.guide p{font-size:11px}footer{font-size:8px}.shop-account label{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(min-width:701px) and (max-width:1050px){.arena:has(.welcome:not([hidden])){min-height:470px}.arena:has(.welcome:not([hidden])) canvas{min-height:470px;object-fit:cover}}

.in-match .title-row{padding:16px 0}.in-match h1{font-size:44px;letter-spacing:-2px}.in-match .arena canvas{max-height:52vh;object-fit:contain}.in-match .arena{background:#283b37}.in-match .guide{margin-top:30px}
