:root{color-scheme:dark;--bg:#0b1218;--ink:#eef1e7;--muted:#899b9f;--lime:#c5fa69;--line:#29363c}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}body{color:var(--ink);font:16px Arial,Helvetica,sans-serif}.shell{max-width:1880px;margin:auto;padding:0 26px}header{height:82px;display:flex;align-items:center;justify-content:space-between;gap:25px}.wordmark{font-size:27px;font-weight:950;letter-spacing:-1.5px;white-space:nowrap}.wordmark>span:first-child{color:var(--lime)}.build{font:11px monospace;letter-spacing:1.8px;color:#73868e;margin-left:17px}.place{font:12px monospace;letter-spacing:1.5px;display:flex;align-items:center;gap:12px}.mapno{border:1px solid #485945;padding:6px;color:var(--lime)}.mode{color:#74868e;margin-left:10px;font-size:11px}nav{display:flex;gap:8px}button{font:12px monospace;letter-spacing:1px;color:var(--ink);border:1px solid #34444b;background:#152027;border-radius:4px;padding:11px 12px;cursor:pointer}button:hover{border-color:var(--lime);background:#263330}button:focus-visible{outline:2px solid var(--lime);outline-offset:4px}.arena{position:relative;aspect-ratio:16/9;width:min(100%,calc((100dvh - 147px)*16/9));margin:auto;border:1px solid #34464b;border-radius:6px;overflow:hidden;background:#10212a;box-shadow:0 14px 80px #0004}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:none;outline:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,#071216f5 0%,#09141deb 33%,#07121938 65%,#07121908)}.menu{margin-left:7%;width:430px;padding:24px 0}.eyebrow{color:#9bb0ad;letter-spacing:3px;font:12px monospace}h1{font-size:clamp(48px,7.5vw,112px);font-weight:950;line-height:.9;letter-spacing:-7px;margin:27px 0 18px}h1 span{color:var(--lime)}.intro{color:#b1c1be;line-height:1.6;font-size:16px;margin:0 0 26px}.start-actions{display:grid;gap:10px;max-width:306px}.primary{border:1px solid var(--lime);background:var(--lime);color:#17211d;text-align:left;font-weight:bold;padding:17px 19px;font-size:14px}.primary span{float:right;font-size:20px;line-height:15px}.primary:hover{background:#d5ff95;color:#17211d}.secondary{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;text-align:left}.secondary span{font:12px Arial;color:#8b9f9e;letter-spacing:0}.menu-hint{margin-top:28px;font:12px monospace;line-height:2.1;color:#bac7c3}.menu-hint>span{font:12px Arial;color:#7d9394}kbd{display:inline-block;font:11px monospace;min-width:19px;padding:3px 5px;line-height:1;border:1px solid #435453;border-bottom-width:2px;border-radius:3px;color:#cbd5ce;background:#213031;margin-right:3px}footer{max-width:1600px;margin:auto;min-height:58px;display:flex;justify-content:space-between;align-items:center;gap:20px}.key-row{display:flex;align-items:center;justify-content:center;gap:19px;flex-wrap:wrap;color:#91a49f;font:11px monospace}.new-control{color:var(--lime)}.footer-note{font:11px monospace;letter-spacing:1.7px;color:#617677;white-space:nowrap}.touch{display:none;justify-content:space-between;gap:8px;padding:8px 0}.touch div{display:flex;gap:7px}.touch button{touch-action:none;user-select:none;padding:14px 13px;letter-spacing:0}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.pause-overlay{justify-content:center;background:#071219bf;backdrop-filter:blur(8px)}.pause-panel{width:420px;max-width:92%;padding:35px;background:#112229;border:1px solid #455b55;border-radius:6px}.pause-panel h2{font-size:46px;letter-spacing:-2px;margin:15px 0 20px}.pause-panel p{color:#9db0ac;line-height:1.6}.pause-panel .primary{width:100%;margin:12px 0}.pause-panel .secondary{width:100%;margin-top:8px}.scores{display:flex;justify-content:space-between;font:14px monospace;margin:22px 0}.option{display:flex;align-items:center;gap:10px;color:#a8bcb5;font-size:14px;margin:18px 0}.option input{accent-color:var(--lime)}.arena:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;aspect-ratio:auto}.arena:fullscreen canvas{object-fit:contain}@media(max-width:1100px){.place .mode,.build,.footer-note{display:none}.key-row{gap:12px}header{height:65px}.arena{width:min(100%,calc((100dvh - 140px)*16/9))}.menu{width:370px}.intro{margin-bottom:18px}.menu-hint{margin-top:18px}}@media(max-height:760px){header{height:60px}.arena{width:min(100%,calc((100dvh - 117px)*16/9))}.menu-hint{margin-top:12px}.menu{padding:12px 0}h1{font-size:70px;margin:16px 0}.intro{font-size:14px;line-height:1.4;margin-bottom:17px}.primary{padding:14px 16px}.secondary{padding:11px 16px}.menu-hint{font-size:11px}footer{min-height:50px}}@media(pointer:coarse){.touch{display:flex}footer{display:none}.arena{width:100%}.shell{padding:0 12px}.arena{min-height:260px}.touch button{min-height:44px}}@media(max-width:650px){.shell{padding:0 8px}header{height:56px;gap:8px}.wordmark{font-size:23px}.place{display:none}nav{gap:5px}nav button{font-size:10px;padding:9px}nav span{display:none}.arena{width:100%;min-height:260px}h1{font-size:45px;letter-spacing:-3px;margin:12px 0}.menu{margin-left:6%;width:280px;max-width:80%;padding:12px 0}.eyebrow{font-size:10px;letter-spacing:2px}.intro{display:none}.start-actions{gap:7px;max-width:250px}.primary{font-size:12px;padding:12px 14px}.secondary{font-size:11px;padding:11px 14px}.menu-hint{margin-top:10px;font-size:10px}.menu-hint>span{font-size:10px}footer{padding:13px 0}.key-row{gap:9px}.pause-panel{padding:20px}.pause-panel h2{font-size:32px}.touch button{padding:12px 10px;font-size:11px}}
@media(max-width:650px){.menu-hint{display:none}}
.config-panel{width:700px;max-width:95%;max-height:94%;overflow:auto;background:#10232a;border:1px solid #455b55;border-radius:8px;padding:30px;box-shadow:0 18px 80px #0008;scrollbar-width:thin;scrollbar-color:#526b5d #10232a}.panel-heading{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:22px}.config-panel h2{font-size:34px;letter-spacing:-1.4px;margin:10px 0 0}.config-panel h3{font-size:15px;font-weight:600;color:#c8d7cd;margin:0 0 15px}.text-button{background:transparent;border-color:#415952;padding:9px 12px;font-size:11px}.map-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}.map-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid #3a5352;border-radius:5px;cursor:pointer;background:#0c1b22}.map-card:has(input:checked){border-color:#c5fa69;background:#152c28}.map-card input{position:absolute;top:18px;right:18px;accent-color:#c5fa69}.map-card svg{display:block;width:100%;height:96px;border-radius:3px}.map-card strong{font:13px monospace;color:#dce7d7}.map-card span{font-size:13px;line-height:1.45;color:#91aba4}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}.fields label{display:flex;flex-direction:column;gap:8px;color:#acc0b4;font-size:14px}select{width:100%;background:#0a1b22;color:#dce8db;border:1px solid #415b53;border-radius:4px;font:14px Arial,sans-serif;padding:11px;cursor:pointer}.field-note{font-size:13px!important;line-height:1.5!important;color:#8ca59d!important;margin:15px 0}.config-panel>.primary{width:100%;margin-top:5px}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}.bindings{display:grid;gap:8px}.bindings>div{display:flex;justify-content:space-between;align-items:center;color:#b6c9bb;font-size:14px}.bindings button{min-width:96px;padding:9px 10px}.bindings button.listening{color:#c5fa69;border-color:#c5fa69}.range-field{font-size:14px;color:#b5c9bb;display:block;margin-bottom:24px}.range-field output{float:right;font:12px monospace;color:#c5fa69}.range-field input{display:block;width:100%;margin:14px 0 0;accent-color:#c5fa69;cursor:pointer}.options-grid .option{font-size:13px;line-height:1.45}.result-table{width:100%;border-collapse:collapse;margin-top:24px;font:15px monospace}.result-table th{font-size:12px;color:#8ca79d;text-align:right;font-weight:normal;padding:12px}.result-table th:first-child,.result-table td:first-child{text-align:left}.result-table td{padding:15px 12px;text-align:right;border-top:1px solid #334d46}.you-row{background:#c5fa6909}.round-stats{display:flex;justify-content:space-between;gap:15px;margin:20px 0;color:#89a79a;font:11px monospace}.round-stats strong{display:block;color:#d9f0cb;font:bold 27px Arial,sans-serif;margin-bottom:7px}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-actions>.primary{grid-column:1/-1}.result-actions .secondary{font-size:11px;gap:8px}.result-actions .secondary span{font-size:11px}.pause-panel{max-height:94%;overflow:auto}.overlay[aria-modal=true]{z-index:2}header .place{gap:9px}.build{font-size:10px;margin-left:12px}nav button{font-size:11px;padding:10px}.menu h1{font-size:clamp(48px,6.5vw,94px);margin:20px 0 16px}.menu .intro{margin-bottom:20px}.menu .menu-hint{margin-top:18px}@media(max-width:1200px){.place .mode{display:none}}@media(max-height:760px){.menu h1{font-size:61px}.menu-hint{display:none}.menu .intro{font-size:14px;margin-bottom:14px}.config-panel{padding:22px}.map-card svg{height:75px}.panel-heading{margin-bottom:16px}.config-panel h2{font-size:28px}}@media(max-width:700px){.config-panel{padding:18px}.config-panel h2{font-size:25px}.options-grid{grid-template-columns:1fr;gap:25px}.map-card{padding:8px}.map-card span{font-size:12px}.map-card strong{font-size:11px}.map-card svg{height:60px}.fields{gap:12px}.result-table td,.result-table th{padding:10px 6px;font-size:12px}.round-stats{font-size:9px}.round-stats strong{font-size:23px}.result-actions{grid-template-columns:1fr}.result-actions>.primary{grid-column:auto}.menu h1{font-size:42px;margin:10px 0}.menu .intro{display:none}.start-actions{gap:6px}.menu .primary,.menu .secondary{padding:10px 12px}.menu{padding:10px 0}.map-choices{gap:9px}}

/* Touch mode uses the whole screen and keeps controls clear of the central fight. */
.mobile-hud,.mobile-toolbar,.mobile-controls,.rotate-hint{display:none}
html.mobile-mode,html.mobile-mode body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
.mobile-mode .shell{max-width:none;padding:0;height:100dvh}
.mobile-mode header,.mobile-mode footer{display:none}
.mobile-mode main{height:100%}
.mobile-mode .arena{width:100%;height:100%;min-height:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.mobile-mode .arena canvas{cursor:default}
.mobile-mode .mobile-toolbar{display:flex;position:absolute;z-index:8;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));gap:8px}
.mobile-toolbar button{height:44px;min-width:44px;padding:0;font:24px Arial;background:#10252be8;border-color:#47655c;border-radius:12px;touch-action:manipulation}
.mobile-mode .mobile-hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(118px,calc(env(safe-area-inset-right) + 106px));z-index:3;display:none;align-items:start;justify-content:space-between;pointer-events:none;gap:12px}
.mobile-mode[data-play-state=playing] .mobile-hud{display:flex}
.mobile-vitals{width:150px;padding:8px 12px;background:#081b21dd;border:1px solid #47655c66;border-radius:12px;flex-shrink:0}
.mobile-vitals>div:first-child{display:flex;align-items:center;gap:6px}
.mobile-vitals strong{font-size:24px;line-height:1;color:var(--lime)}
.mobile-vitals span{font:11px monospace;color:#9bb2a9}
#mobile-helmet{margin-left:auto;font-size:10px;letter-spacing:.2px}
.mobile-fuel{display:flex;align-items:center;gap:8px;margin-top:7px}
.mobile-fuel>div{width:100%;height:5px;background:#29444a;border-radius:3px;overflow:hidden}
.mobile-fuel i{display:block;width:100%;height:100%;background:#80d9e9}
.mobile-round{text-align:center;padding:7px 13px 9px;background:#081b21dd;border:1px solid #47655c66;border-radius:12px;white-space:nowrap}
.mobile-round strong{display:block;font:bold 21px monospace;letter-spacing:.5px}
.mobile-round span{display:block;font:11px monospace;color:#b4c9bc;margin-top:4px}
.mobile-mode .mobile-controls{position:absolute;inset:0;z-index:4;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mobile-mode[data-play-state=playing] .mobile-controls{display:block}
.stick{--size:clamp(130px,35dvh,166px);position:absolute;width:var(--size);height:var(--size);bottom:max(10px,env(safe-area-inset-bottom));pointer-events:auto;touch-action:none;border-radius:50%;-webkit-tap-highlight-color:transparent}
.move-stick{left:max(20px,env(safe-area-inset-left))}.aim-stick{right:max(20px,env(safe-area-inset-right))}
.stick-ring{position:absolute;inset:12%;border:1px solid #c5fa6960;background:#081d2255;border-radius:50%;box-shadow:inset 0 0 0 9px #c5fa6905;pointer-events:none}
.aim-stick .stick-ring{border-color:#80d9e960;box-shadow:inset 0 0 0 9px #80d9e906}
.stick-thumb{position:absolute;width:38px;height:38px;left:calc(50% - 19px);top:calc(50% - 19px);transform:translate(var(--stick-x,0px),var(--stick-y,0px));background:#b7df8170;border:1px solid #c5fa6990;border-radius:50%;box-shadow:0 2px 12px #06151855;pointer-events:none}
.aim-stick .stick-thumb{background:#80d9e960;border-color:#b0f2ff99}
.stick.active .stick-ring{background:#16342a6b;border-color:#c5fa69a0}.aim-stick.active .stick-ring{background:#16343c6b;border-color:#80d9e9bb}
.stick.active .stick-thumb{background:#c5fa69b0}.aim-stick.active .stick-thumb{background:#80d9e9b0}
.stick-caption{position:absolute;bottom:0;width:100%;text-align:center;font:11px monospace;letter-spacing:1px;color:#d4e8c9b3;pointer-events:none}
.stick-up{position:absolute;top:8px;left:0;width:100%;text-align:center;font:10px monospace;color:#c5fa6980}
.aim-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#b1f0ed55;top:calc(50% - 3px);left:calc(50% - 3px)}
.mobile-actions{position:absolute;bottom:max(26px,calc(env(safe-area-inset-bottom) + 12px));left:calc(max(20px,env(safe-area-inset-left)) + clamp(130px,35dvh,166px) + 16px);right:calc(max(20px,env(safe-area-inset-right)) + clamp(130px,35dvh,166px) + 16px);display:flex;justify-content:space-between;gap:12px}
.mobile-actions button{pointer-events:auto;touch-action:none;width:74px;min-height:66px;padding:8px;border-radius:14px;background:#10252bc9;border-color:#6a8b6e99;letter-spacing:.7px;-webkit-tap-highlight-color:transparent}
.mobile-actions button strong,.mobile-actions button span{display:block}.mobile-actions button strong{font:bold 26px Arial;color:var(--lime)}.mobile-actions button span{font:11px monospace;margin-top:4px;white-space:nowrap;letter-spacing:0}.mobile-actions button.cooling{opacity:.5}.mobile-actions button:active{background:#315043;border-color:var(--lime)}
#mobile-tip{position:absolute;bottom:max(9px,env(safe-area-inset-bottom));left:25%;right:25%;margin:0;text-align:center;font:12px Arial;color:#bbd0c2;pointer-events:none;text-shadow:0 1px 4px #000}
.mobile-mode .overlay{z-index:5;padding:54px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));overflow:auto;overscroll-behavior:contain}
.mobile-mode .menu{width:380px;max-width:90%;margin:0 0 0 5%;padding:8px 0;flex-shrink:0}
.mobile-mode .menu .eyebrow{font-size:11px;letter-spacing:2px}
.mobile-mode .menu h1{font-size:52px;line-height:.88;letter-spacing:-3px;margin:12px 0}
.mobile-mode .menu .intro{display:none}
.mobile-mode .start-actions{max-width:320px;gap:8px}
.mobile-mode .menu .primary,.mobile-mode .menu .secondary{min-height:44px;padding:12px 15px;font-size:13px}
.mobile-mode .menu .primary span{font-size:13px;line-height:15px}
.mobile-mode .menu .menu-hint{display:block;font:12px monospace;line-height:1.6;color:#a7beb0;margin-top:12px}
.mobile-mode .config-panel,.mobile-mode .pause-panel{max-height:100%;width:680px;max-width:100%;padding:20px;flex-shrink:0}
.mobile-mode .pause-panel{width:440px}
.mobile-mode .pause-panel h2{font-size:32px;margin:7px 0}
.mobile-mode .pause-panel p{margin:12px 0;font-size:14px}
.mobile-mode .pause-panel button,.mobile-mode .text-button,.mobile-mode .bindings button{min-height:44px}
.mobile-mode .options-grid{grid-template-columns:1fr}
.mobile-mode .options-grid>div:first-child,.mobile-mode label:has(#right-jet){display:none}
.mobile-mode .range-field{margin-bottom:18px}
.mobile-mode .pause-overlay{backdrop-filter:blur(4px)}
@media(max-height:400px) and (orientation:landscape){.mobile-mode .menu{display:grid;grid-template-columns:180px 290px;column-gap:25px;align-items:center;width:495px;max-width:100%}.mobile-mode .menu>.eyebrow{grid-column:1/-1}.mobile-mode .menu h1{grid-column:1;grid-row:2;font-size:62px}.mobile-mode .start-actions{grid-column:2;grid-row:2}.mobile-mode .menu .menu-hint{grid-column:1/-1;margin-top:12px}}
@media(orientation:portrait){.mobile-mode .mobile-hud{right:110px;flex-direction:column;gap:7px}.mobile-mode .mobile-round{text-align:left;padding:6px 10px}.mobile-mode .mobile-round strong{font-size:17px;display:inline}.mobile-mode .mobile-round span{font-size:10px}.mobile-mode .mobile-actions{left:calc(50% - 32px);right:auto;bottom:max(32px,env(safe-area-inset-bottom));flex-direction:column;gap:8px}.mobile-mode .mobile-actions button{width:64px;min-height:58px}.mobile-mode .stick{--size:130px}.mobile-mode .move-stick{left:6px}.mobile-mode .aim-stick{right:6px}.mobile-mode #mobile-tip{bottom:174px;left:15px;right:15px;font-size:13px}.mobile-mode .menu{margin:auto;width:310px}.mobile-mode .menu h1{font-size:70px}.mobile-mode .rotate-hint{display:block;position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;font:11px monospace;letter-spacing:.5px;color:#8faea0;z-index:6;pointer-events:none}.mobile-mode[data-play-state=playing] .rotate-hint{display:none}.mobile-mode .config-panel,.mobile-mode .pause-panel{max-height:calc(100% - 24px);margin-bottom:24px}}

@media(max-width:1050px){header .place{display:none}}

/* The online flow is deliberately one room and two players. */
.online-start{border-color:#c5fa6970;color:#d9fbb5}
.net-panel{width:500px}.net-panel h2{margin:12px 0 16px;font-weight:900;font-size:38px;letter-spacing:-1.6px}.net-intro{font-size:16px;line-height:1.6;color:#a8c0b3;margin:0 0 22px}.net-panel>.primary,.net-panel>.secondary{width:100%;margin:8px 0}.net-divider{font:12px monospace;letter-spacing:1.3px;color:#819e90;text-align:center;margin:25px 0 20px}.net-panel label{font-size:14px;color:#afc8b9}.net-code-row{display:flex;gap:10px;margin-top:9px}.net-code-row input{min-width:0;flex:1;background:#081a21;color:var(--lime);font:bold 25px monospace;letter-spacing:5px;border:1px solid #4b6c5d;border-radius:5px;padding:12px 15px;text-transform:uppercase}.net-code-row input:focus{outline:2px solid #c5fa69;outline-offset:2px}.net-code-row .primary{min-width:90px;text-align:center}.net-code-row input::placeholder{color:#4c695c}.net-panel button:disabled{opacity:.4;cursor:default}.net-panel button:disabled:hover{background:#152027;border-color:#34444b}.net-panel .primary:disabled:hover{background:var(--lime);border-color:var(--lime)}.room-code{font:bold 50px monospace;letter-spacing:10px;color:var(--lime);background:#c5fa6908;border:1px solid #c5fa6944;border-radius:8px;text-align:center;padding:20px 12px;margin:20px 0}.net-players{display:grid;gap:12px;font:14px monospace}.net-players>div{display:flex;align-items:center;gap:12px;padding:12px;background:#0b1e24;border-radius:5px}.player-chip{height:14px;width:14px;background:var(--lime);border-radius:50%}.player-chip.friend{background:#ff927d}.net-lobby-actions{display:grid;gap:9px}.net-lobby-actions>button{min-height:48px}.duel-result{display:flex;justify-content:center;align-items:center;gap:35px;margin:28px 0}.duel-result>div{text-align:center;display:grid;gap:8px}.duel-result>div span{font:14px monospace;color:#a8c1b3}.duel-result strong{font:bold 60px Arial;color:var(--lime)}.duel-result>div:last-child strong{color:#ff927d}.duel-result>span{font-size:35px;color:#6c8b80}
.mobile-mode .net-panel{width:500px}.mobile-mode .net-panel h2{font-size:30px}.mobile-mode .room-code{font-size:34px;letter-spacing:7px;padding:12px;margin:12px 0}.mobile-mode .net-intro{font-size:14px;line-height:1.5;margin-bottom:12px}.mobile-mode .net-panel .net-divider{margin:16px 0}.mobile-mode .net-players{grid-template-columns:1fr 1fr;gap:8px;font-size:12px}.mobile-mode .net-players>div{padding:10px;gap:8px}.mobile-mode .net-lobby-actions{grid-template-columns:1fr 1fr}.mobile-mode .net-lobby-actions button{font-size:12px;padding:12px}.mobile-mode .duel-result{margin:15px 0}.mobile-mode .duel-result strong{font-size:46px}.mobile-mode .net-code-row input{font-size:22px}