:root{font-family:Arial,Helvetica,sans-serif;color:#eff4f7;background:#0b1117;--accent:#dcfa64;--muted:#8497a5;--edge:#2b3b48;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(ellipse at 80% 0,#203440 0,transparent 45%),#0b1117}main{max-width:1500px;margin:auto;padding:26px 34px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.brand{display:flex;align-items:center;gap:15px}.brand-emblem{display:grid;place-items:center;width:52px;height:58px;background:var(--accent);color:#10171e;font:bold italic 40px Arial;clip-path:polygon(14% 0,100% 0,100% 80%,50% 100%,0 80%,0 16%)}h1{font:bold italic 30px Arial;letter-spacing:-1px;margin:3px 0}h1 em{color:var(--accent);font-style:inherit}.eyebrow{font-size:10px;letter-spacing:2.7px;font-weight:700;color:var(--muted)}.header-tools,.session-tools{display:flex;align-items:center;gap:12px}#connection{font-size:9px;letter-spacing:1.6px;color:#a9bbc8}button{font:800 12px Arial;letter-spacing:.7px;border:1px solid transparent;background:var(--accent);color:#10171e;padding:14px 22px;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}button:hover:not(:disabled){background:#ebff9c;transform:translateY(-2px)}button:active:not(:disabled){transform:translateY(0)}button:disabled{cursor:default;opacity:.4}button span{margin-left:12px}.quiet,.icon-button{background:#1c2b36;color:#c1d0da;border-color:#314653}.quiet:hover:not(:disabled),.icon-button:hover:not(:disabled){background:#2e4554;color:white}.icon-button{font-size:10px;padding:10px 12px}.icon-button.selected{color:var(--accent);border-color:var(--accent)}button:focus-visible,input:focus-visible{outline:2px solid #a9e5ff;outline-offset:4px}.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;margin-bottom:18px;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}form{display:flex;gap:28px;align-items:center;flex:1}label{font-size:9px;letter-spacing:1.5px;color:var(--muted)}input{display:block;background:#111e28;color:white;border:1px solid #314553;border-radius:3px;font:600 14px Arial;padding:10px 12px;margin-top:6px;width:185px}#join-code{display:flex;align-items:end;gap:12px}#room{text-transform:uppercase;letter-spacing:3px;width:220px}.lobby{padding:26px;background:linear-gradient(145deg,#182731ea,#101c25ef);border:1px solid #2e434f;border-radius:4px;position:relative;overflow:hidden}.lobby:before{content:'';position:absolute;right:-40px;top:-130px;width:500px;height:500px;border:1px solid #ffffff06;transform:rotate(35deg);pointer-events:none}.lobby-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative}h2{margin:10px 0;font:900 italic 32px Arial;letter-spacing:-.5px}.lobby-heading h2{font-size:36px}.lobby p{color:#94aab9;font-size:12px;line-height:1.6;margin:7px 0}.lobby p[role=alert]{color:#dcfa64}.entry-tabs{display:flex;gap:24px;border-bottom:1px solid var(--edge);margin:18px 0 26px}.entry-tabs button{background:transparent;color:#7c95a7;padding:15px 0;border:0;clip-path:none;border-bottom:3px solid transparent}.entry-tabs button.selected{color:var(--accent);border-bottom-color:var(--accent)}.entry-tabs button:hover{background:none;transform:none;color:white}.setup-grid{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:24px;position:relative}.setup-grid:has(.appearance[hidden]){grid-template-columns:1fr}.settings{min-width:0;grid-column:1/-1}.setup-grid:has(.appearance:not([hidden])) .settings{grid-column:auto}.section-label{display:flex;align-items:center;gap:10px;margin:22px 0 12px}.section-label:first-child{margin-top:0}.section-label>span:first-child{background:#263c49;padding:4px 7px;color:#9fbece;font:bold 10px Arial}.section-label h3{font:bold 11px Arial;letter-spacing:1.4px;margin:0}.section-label .selected-map{margin-left:auto;color:var(--accent);font-size:11px;background:none;padding:0}h3{font-size:11px;letter-spacing:1.3px}.source-control{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;opacity:0;pointer-events:none}.mode-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.mode-card{background:#101d27;color:#91aaba;clip-path:none;border:1px solid #2b4150;border-radius:3px;display:flex;align-items:center;justify-content:center;gap:12px;padding:17px 12px;font-size:11px;letter-spacing:.2px;text-align:left;min-height:68px}.mode-card strong{max-width:90px}.mode-icon{font-size:29px;margin:0;font-weight:400;color:#688da4}.mode-card.selected{background:#22332c;border-color:var(--accent);color:#effad7;box-shadow:inset 0 -2px var(--accent)}.mode-card.selected .mode-icon{color:var(--accent)}.mode-card:hover:not(:disabled){background:#263b46}.map-cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:0 0 10px;scrollbar-width:thin;scrollbar-color:#436174 #101b24}.map-card{position:relative;flex:0 0 205px;height:104px;background:#14232e;padding:0;clip-path:none;border:2px solid #304653;border-radius:3px;overflow:hidden;scroll-snap-align:start;color:white;text-align:left}.map-card img{width:100%;height:100%;object-fit:cover;opacity:.65;display:block}.map-card strong{position:absolute;bottom:0;left:0;right:0;padding:28px 10px 9px;background:linear-gradient(transparent,#07101fe6);font-size:12px;font-style:italic;letter-spacing:.1px}.map-card.selected{border-color:var(--accent)}.map-card.selected:after{content:'✓';position:absolute;top:5px;right:7px;background:var(--accent);color:#10171e;padding:2px 5px;font-size:10px}.map-card.selected img{opacity:1}.map-card:hover:not(:disabled){background:#253e4e}#map-description{max-width:800px;font-size:11px;margin:5px 0 16px}.battle-options{display:flex;gap:35px;padding:16px 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);flex-wrap:wrap}.battle-options h3{font-size:9px;color:#8ca5b7;letter-spacing:1.2px;margin:0 0 9px}.choice-pills{display:flex;gap:6px}.choice-pills button{clip-path:none;background:#13232e;color:#9fb4c3;border:1px solid #314959;border-radius:3px;padding:9px 13px;font-size:11px;min-width:36px}.choice-pills button.selected{background:var(--accent);color:#121c24;border-color:var(--accent)}.choice-pills button:hover:not(:disabled){background:#a7c2d5;color:#111c24}.setup-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px}#slot-description{color:#d4e4ea;font-size:10px;font-weight:bold;letter-spacing:1px}#mode-description{font-size:11px;max-width:720px}.actions{display:flex;gap:8px;flex-shrink:0}.actions button{padding:18px 28px}.match-summary{align-self:center;position:relative;min-height:160px;padding:20px;overflow:hidden;border:1px solid #2b414f;border-left:3px solid var(--accent);background:#101e28}.match-summary:after{content:'⚑';position:absolute;right:20px;top:-28px;font-size:200px;color:#ffffff03;pointer-events:none}.match-summary h2{font-size:28px}.match-summary p{margin:10px 0 16px}.match-summary button{font-size:10px;padding:9px 13px}.appearance{border:1px solid #2b414f;display:flex;align-items:center;justify-content:space-between;padding:20px;background:#101e28;min-height:160px}.appearance canvas{width:80px;height:100px;image-rendering:pixelated;display:block;cursor:default}.appearance h3{font-size:19px;font-style:italic;margin:8px 0 16px}.appearance .choice-pills{gap:4px}.appearance .choice-pills button{padding:7px;min-width:27px;font-size:10px}.team-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:28px 0 20px;padding-top:22px;border-top:1px solid var(--edge)}.team-heading h2{font-size:29px}.title-dot{color:var(--accent);margin:0}.team-heading button{padding:19px 28px}.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:14px}.team-card{position:relative;padding:20px 16px 16px;border:1px solid #344b5b;border-top:3px solid var(--team-color);background:linear-gradient(145deg,#172933,#0c1923);border-radius:3px;overflow:hidden}.team-card.my-team{border-color:var(--team-light);box-shadow:inset 0 0 30px #ffffff05}.team-card h3{font:900 italic 25px Arial;margin:0;color:var(--team-light);letter-spacing:.5px}.team-emblem{position:absolute;top:16px;right:16px;background:var(--team-color);opacity:.75;color:#fff;clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%);width:35px;height:38px;display:grid;place-items:center;font:800 15px Arial}.team-card .team-count{font-size:9px;letter-spacing:.6px;margin:7px 0 14px}.team-card ul{list-style:none;margin:0 0 17px;padding:0}.team-card li{min-height:46px;display:flex;align-items:center;gap:7px;border-bottom:1px solid #2a3e4c;font-size:11px}.team-card li canvas{width:32px;height:40px;image-rendering:pixelated;flex-shrink:0}.team-card li span{flex:1;overflow-wrap:anywhere}.team-card small{font-size:8px;color:#a6bdcd;background:#203543;padding:3px 5px}.team-card .empty-slot{color:#526f82;font:9px Arial;letter-spacing:.7px;padding-left:6px;border-bottom-style:dashed}.remove-player{background:#4c2930;color:#ffc6ce;padding:3px 7px;clip-path:none;border-radius:3px;font-size:15px}.remove-player:hover:not(:disabled){background:#85434f;color:white}.team-actions{display:flex;gap:6px}.team-actions button{flex:1;padding:11px 5px;white-space:nowrap;font-size:9px}.team-actions button:first-child{background:var(--team-light);color:#15202a}.team-actions button+button{background:#223a4a;color:#bdced9;border-color:#344d60}.team-card.my-team .team-actions button:first-child{opacity:1;background:#243846;color:var(--team-light);border-color:var(--team-light)}#match-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#152531;font-size:11px;border:1px solid #314b5c;gap:20px}#match-bar button{padding:10px 14px}#arena{position:relative;height:min(72vh,800px);min-height:400px;overflow:hidden;background:#1c2932;border:1px solid #34404c;touch-action:none;user-select:none}#game{width:100%;height:100%;display:block;cursor:crosshair;outline:none;touch-action:none}.arena-tools{position:absolute;top:12px;right:12px;display:flex;gap:7px;z-index:7}#notice{position:absolute;bottom:76px;left:50%;transform:translateX(-50%);padding:10px 17px;background:#08131ddc;font-size:12px;pointer-events:none;text-align:center;width:max-content;max-width:90%;border:1px solid #607581}#hud{position:absolute;top:16px;left:18px;font-size:10px;white-space:pre-line;line-height:1.6;text-shadow:0 2px 3px #000;pointer-events:none;max-height:200px;overflow:hidden}#stats{position:absolute;top:56px;right:18px;color:#cedbe3;font-size:10px;text-align:right;white-space:pre-line;text-shadow:0 2px 3px #000;pointer-events:none}footer{display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#7e96a7;letter-spacing:.8px;padding:20px 0 8px}footer b{color:#c4d5e0}#help{color:#5d778c;font-size:10px;margin:4px 0}.mobile-help{display:none}
/* Original lower HUD artwork and registrations. */
#vitals{position:absolute;left:0;bottom:0;width:420px;height:60px;padding:0;border:0;background:linear-gradient(90deg,#091117e8 0,#091117df 99%,transparent 100%);pointer-events:none}.hud-art{position:absolute;width:420px;height:44px;left:0;top:0}.weapon-icon{position:absolute;width:44px;height:44px;object-fit:contain;top:10px}.weapon-icon.default{left:9px}.weapon-icon.special{left:57px}.weapon-icon.inactive{opacity:.45}#weapon-ammo{position:absolute;left:64px;top:46px;color:#ffd568;font-size:9px}#weapon-name{position:absolute;left:8px;top:0;font:9px Arial;color:#f4f4e2;text-shadow:1px 1px #000}.meter.original-health,.meter.original-shield{position:absolute;left:184.1px;width:177.9px;height:6px;border:0;background:transparent;overflow:hidden}.meter i{display:block;width:100%;height:100%}.meter.original-health{top:17px}.meter.original-shield{top:33px}.meter.original-health i{background:url('assets/ui/health.svg') left center/177.9px 6px no-repeat}#shield-bar i{background:url('assets/ui/shield.svg') left center/177.9px 6px no-repeat}.vital-value{position:absolute;left:370px;color:#fff;font-size:9px;text-shadow:1px 1px #000}.health-value{top:14px}.shield-value{top:30px}
/* Each touch element is 18% opaque, including the held state. */
#touch-controls{position:absolute;inset:0;pointer-events:none;z-index:6}#joystick{position:absolute;width:116px;height:116px;margin:-58px 0 0 -58px;border:2px solid white;border-radius:50%;background:#fff3;opacity:.18;display:grid;place-items:center;pointer-events:none}#joystick-knob{display:block;width:45px;height:45px;background:white;border:2px solid white;border-radius:50%}.touch-button{position:absolute;border:2px solid white;background:#ffffff40;color:white;clip-path:none;border-radius:50%;opacity:.18;pointer-events:auto;touch-action:none;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:30px;line-height:1;letter-spacing:0}.touch-button span{font:bold 10px Arial;margin:5px 0 0}.touch-button:hover:not(:disabled),.touch-button:active:not(:disabled){background:#ffffff40;transform:none;opacity:.18}.touch-button.fire{width:92px;height:92px;right:max(24px,env(safe-area-inset-right));bottom:max(34px,env(safe-area-inset-bottom));font-size:39px}.touch-button.jump{width:62px;height:62px;right:max(39px,env(safe-area-inset-right));bottom:140px}.touch-button.pickup{width:50px;height:50px;right:137px;bottom:84px}.touch-button.swap{width:50px;height:50px;right:136px;bottom:22px}.touch-hint{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.5px;color:#ffffff70;white-space:nowrap;pointer-events:none}.touch-device .desktop-help{display:none}.touch-device .mobile-help{display:block}.touch-device #vitals{top:8px;bottom:auto;transform:scale(.7);transform-origin:top left}.touch-device #hud{top:54px;left:12px;font-size:9px;max-height:80px}.touch-device #stats{display:none}.touch-device #notice{bottom:8px;font-size:10px;padding:6px 10px}.touch-device #game{cursor:default}
/* Native fullscreen, plus an immersive fallback for browsers without it. */
html.immersive{position:fixed;inset:0;overflow:auto;width:100%;height:100%}.game-fullscreen body.match-active main{max-width:none;padding:0}.game-fullscreen body.match-active header,.game-fullscreen body.match-active .bar,.game-fullscreen body.match-active footer,.game-fullscreen body.match-active #help{display:none}.game-fullscreen body.match-active #arena{height:100dvh;min-height:0;border:0}.game-fullscreen body.match-active #match-bar{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));z-index:8;background:transparent;border:0;padding:0;max-width:55%}.game-fullscreen body.match-active #match-title{display:none}.game-fullscreen body.match-active #hud{top:62px}.game-fullscreen body.match-active .arena-tools{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}.game-fullscreen .touch-device #hud{top:70px}.game-fullscreen .touch-device #vitals{top:47px}.game-fullscreen .touch-device #return-lobby{font-size:8px;padding:9px}.game-fullscreen main{padding-top:max(20px,env(safe-area-inset-top))}
@media(max-width:1050px){main{padding:20px}.mode-card{gap:7px;padding:15px 8px;font-size:10px}.mode-icon{font-size:23px}.battle-options{gap:22px}.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.setup-grid{grid-template-columns:minmax(0,1fr) 235px}.appearance{padding:15px}.lobby-heading h2{font-size:30px}.team-actions button{font-size:10px}}
@media(max-width:650px){main{padding:14px 12px}header{gap:8px;margin-bottom:14px}.brand{gap:9px}.brand-emblem{width:33px;height:39px;font-size:27px}h1{font-size:20px}.brand .eyebrow{font-size:7px;letter-spacing:1.8px}.header-tools{gap:6px;flex-direction:column;align-items:end}#connection{font-size:8px}.header-tools button{font-size:8px;padding:8px}.bar{flex-wrap:wrap;gap:10px;padding:12px 0;margin-bottom:14px}form{gap:12px;flex-wrap:wrap}input{width:145px}#room{width:175px;font-size:12px}#join-code{width:100%;gap:10px}.session-tools{gap:8px}.session-tools button{font-size:9px;padding:9px}.lobby{padding:18px 14px}.lobby-heading{align-items:start}.lobby-heading h2{font-size:26px;line-height:1.12}.lobby-heading .eyebrow{font-size:8px;letter-spacing:1.7px}.lobby-heading p{font-size:11px}.lobby-heading>button{font-size:8px;padding:9px;max-width:85px}.entry-tabs{gap:23px;margin:16px 0 22px}.entry-tabs button{font-size:10px}.mode-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.mode-card{min-height:57px;padding:11px;justify-content:start;font-size:11px}.mode-card:last-child{grid-column:1/-1}.mode-card strong{max-width:none}.mode-icon{font-size:25px}.map-card{flex-basis:170px;height:94px}.battle-options{gap:18px}.battle-options h3{font-size:8px}.choice-pills button{padding:8px 11px}.setup-bottom{flex-direction:column;align-items:start;gap:12px}.actions{width:100%}.actions button{width:100%;padding:17px}.setup-grid{grid-template-columns:1fr;gap:12px}.match-summary{padding:15px;min-height:140px}.match-summary h2{font-size:23px}.appearance{min-height:115px;padding:14px 18px}.appearance canvas{width:65px;height:81px}.appearance h3{margin:5px 0 12px;font-size:18px}.team-heading{margin:22px 0 15px;padding-top:18px;gap:12px;flex-wrap:wrap}.team-heading h2{font-size:25px}.team-heading p{font-size:10px}.team-heading button{width:100%;padding:17px}.team-grid{gap:9px}.team-card{padding:16px 10px 12px}.team-card h3{font-size:21px}.team-emblem{width:26px;height:29px;right:9px;top:14px;font-size:11px}.team-card .team-count{font-size:8px;margin:7px 0 10px}.team-card li{font-size:10px;min-height:42px;gap:3px}.team-card li canvas{width:25px;height:32px}.team-card small{font-size:7px;padding:2px}.team-actions{flex-direction:column}.team-actions button{font-size:9px;padding:10px 5px}.remove-player{font-size:13px;padding:3px 6px}footer{font-size:8px;line-height:1.8;gap:12px;padding-top:14px}footer>span:last-child{display:none}#match-bar{font-size:9px;padding:8px}#match-bar button{font-size:8px;padding:8px}#arena{min-height:350px;height:70svh}#vitals{transform:scale(.75);transform-origin:left bottom}#notice{font-size:10px}#stats{display:none}.arena-tools{top:8px;right:8px;gap:5px}.arena-tools button{font-size:8px;padding:8px}.touch-device.match-active main{padding:0}.touch-device.match-active header,.touch-device.match-active .bar,.touch-device.match-active footer,.touch-device.match-active #help{display:none}.touch-device.match-active #arena{height:calc(100svh - 43px);min-height:0;border:0}.game-fullscreen .touch-device.match-active #arena{height:100dvh}.touch-device #hud{max-height:70px}}
@media(max-height:500px) and (orientation:landscape){.touch-device.match-active main{padding:0}.touch-device.match-active header,.touch-device.match-active .bar,.touch-device.match-active footer,.touch-device.match-active #help{display:none}.touch-device.match-active #arena{height:calc(100svh - 40px);min-height:0;border:0}.game-fullscreen .touch-device.match-active #arena{height:100dvh}.touch-button.fire{width:78px;height:78px;bottom:18px;right:20px}.touch-button.jump{width:52px;height:52px;right:33px;bottom:106px}.touch-button.pickup{right:110px;bottom:69px;width:43px;height:43px}.touch-button.swap{right:110px;bottom:16px;width:43px;height:43px}.touch-hint{display:none}.touch-device #notice{bottom:10px}.touch-device #vitals{transform:scale(.65)}}
@media(prefers-reduced-motion:reduce){button{transition:none}button:hover:not(:disabled){transform:none}}
.touch-device .touch-hint{display:none}#phone-frame{display:block;margin-top:20px;border:1px solid #436174}@media(max-width:650px){.touch-device #vitals{top:47px}.touch-device #hud{top:86px;max-height:55px}}
@media(max-width:650px),(max-height:500px) and (orientation:landscape){.touch-device.match-active #match-bar{height:40px;padding:4px 10px}.touch-device.match-active #match-bar button{padding:8px 12px;font-size:9px}.touch-device.match-active #arena{height:calc(100svh - 40px)}.game-fullscreen .touch-device.match-active #arena{height:100dvh}.team-card h3{font-size:18px;letter-spacing:0}.team-emblem{width:23px;height:27px;font-size:10px}}
#controller-status{font-size:9px;color:#87bfae;letter-spacing:1px;margin:0 0 12px}dialog{color:#e8f3f8;background:#12232e;border:1px solid #496677;border-radius:6px;width:min(540px,94vw);padding:24px;max-height:90dvh}dialog::backdrop{background:#03101bd9}.controller-heading{display:flex;align-items:center;justify-content:space-between}.controller-heading h2{font-size:26px}.controller-heading button{padding:5px 12px;font-size:20px}.controller-bindings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0;font-size:12px}.controller-bindings span{color:#93b3c9;font-size:10px}dialog p{font-size:12px;line-height:1.6}dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;color:#a5c9db}.match-active #controller-status{display:none}@media(max-width:650px){.header-tools{flex-direction:row;flex-wrap:wrap;justify-content:end;max-width:160px}.arena-tools{gap:4px}.arena-tools button{padding:7px;font-size:7px}}