:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#f5f5ec;background:#111d30;--yellow:#ffdf30;--muted:#bac8d7}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,select,input,a{-webkit-tap-highlight-color:transparent}button,select,input{font:600 14px Arial;color:#f1f3ed;border:1px solid #7c92aa66;background:#1a2b40;border-radius:3px;padding:11px 13px;min-height:44px;min-width:0}button,select{cursor:pointer}button:hover,select:hover{background:#2b4058}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}button:active,.held{transform:translateY(1px)}button:disabled{opacity:.45;cursor:default}input{font-size:16px;font-weight:400}input::placeholder{color:#aebed0}a{color:inherit}button[hidden],[hidden]{display:none!important}
header{min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:10px 24px;gap:16px;z-index:3;background:#101c2e;border-bottom:1px solid #ffffff12}.brand{font-size:21px;letter-spacing:-1px;font-weight:900;color:#f4f3ec;text-decoration:none;white-space:nowrap}.brand span{color:var(--yellow);margin-left:3px}.brand small{font-size:10px;letter-spacing:1px;margin-left:8px;color:#b6c4d4;vertical-align:top}.toolbar{display:flex;align-items:center;gap:6px}.scoreboard{display:flex;gap:22px;align-items:center}.score-slot{display:flex;align-items:center;gap:7px;font-size:19px;font-weight:800}.score-head{width:10px;height:10px;display:block;border-radius:50%;background:var(--c)}.score-slot.out{opacity:.3}
main{position:relative;flex:1;min-height:0;background:#111d30;isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}body[data-mode=keys] canvas{cursor:crosshair}.arena-label{position:absolute;left:calc(var(--arena-left,0px) + 20px);top:calc(var(--arena-top,0px) + 15px);display:grid;gap:5px;pointer-events:none;color:#20322e;text-shadow:0 1px 4px #ffffff44}.arena-label span{font-size:12px;letter-spacing:2px;font-weight:700}.arena-label strong{font-size:14px;letter-spacing:1px}#round-note{position:absolute;right:calc(var(--arena-left,0px) + 20px);top:calc(var(--arena-top,0px) + 20px);color:#24302e;font-size:13px;font-weight:700;pointer-events:none}.light-label .arena-label,.light-label #round-note{color:#f1e9e0;text-shadow:0 1px 3px #0008}#announcement{position:absolute;top:24%;left:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#fffdf1;pointer-events:none;z-index:1}#announce-main{font-size:clamp(28px,5vw,68px);font-weight:900;font-style:italic;letter-spacing:-2px;text-shadow:0 3px 0 #1d2a28,0 6px 22px #0005}#announce-sub{font-size:clamp(13px,1.6vw,20px);font-weight:800;letter-spacing:3px;color:#ffe46b;text-shadow:0 2px 0 #1d2a28}#announce-sub:empty{display:none}#loadout{position:absolute;bottom:calc(var(--arena-top,0px) + 12px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:#f1f1e7;background:#17232adc;padding:9px 12px;border-radius:4px;font-size:12px;font-weight:700;pointer-events:none}.shield-meter{width:42px;height:4px;background:#65727b;display:inline-block}.shield-meter i{display:block;width:100%;height:100%;background:#ecedec}#health{color:#c4d2d1;font-weight:500}
body[data-screen=menu] #score,body[data-screen=lobby] #score{visibility:hidden}body[data-screen=menu] .arena-label,body[data-screen=menu] #round-note,body[data-screen=menu] #loadout,body[data-screen=menu] #announcement,body[data-screen=lobby] .arena-label,body[data-screen=lobby] #round-note,body[data-screen=lobby] #loadout{display:none}
/* The start screen shares the arena, with room creation as the main action. */
#menu{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;padding:26px 6% 20px;overflow-y:auto;background:linear-gradient(180deg,#101e36f5 0%,#142b48ed 47%,#152d49a8 75%,#13263ec7 100%)}.menu-top,.menu-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0;font-size:12px;letter-spacing:1.6px;font-weight:700;color:#d3deea}.catalog-link{text-decoration:none;padding:7px 0}.catalog-link:hover{color:var(--yellow)}.menu-top>span{color:#9fb2c8;white-space:nowrap}.menu-card{width:100%;max-width:1120px;align-self:center;display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,390px);gap:6%;align-items:center;flex:1;padding:24px 0 36px}.menu-title-block{transform:rotate(-4deg);padding-bottom:12px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:#d2dfec}h1{font-family:Arial Black,Arial,Helvetica,sans-serif;font-size:clamp(75px,10.6vw,152px);font-style:italic;font-weight:900;line-height:.84;letter-spacing:-7px;margin:26px 0 24px;text-shadow:5px 7px 0 #08132177}h1 span{color:var(--yellow)}#menu-description{font-size:18px;line-height:1.5;font-weight:600;color:#dbe6ef;margin:26px 0 0;max-width:330px}.menu-choices{padding-top:8px}.menu-choices h2{font-size:17px;letter-spacing:2px;font-weight:900;margin:0 0 24px}.online-entry label,.menu-setup label{display:block;font-size:14px;color:#b9cadd;margin:0 0 8px}.online-entry>input,.menu-setup select{width:100%}.online-entry>input{background:#0e1d32a8;border-color:#6d869f88}.primary{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--yellow);border:0;color:#132033;width:100%;padding:17px 20px;min-height:57px;font-size:20px;font-weight:800;border-radius:2px;box-shadow:0 4px 0 #998520}.primary:hover{background:#ffe965}.primary>span{font-size:26px;line-height:1}.online-entry .primary{margin:13px 0 15px}.join-row{display:flex;gap:9px}.join-row input{flex:1;width:0;letter-spacing:2px;text-transform:uppercase;font-size:14px;background:#0e1d32a8}.join-row button{background:#edf0e4;color:#162237;border:0;white-space:nowrap;padding-inline:16px}.join-row button:hover{background:#fff}.menu-divider{height:1px;background:#93acc83d;margin:24px 0 13px}.menu-option{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;border:0;border-radius:0;background:transparent;padding:10px 0;color:#dce6ef;font-size:17px;min-height:45px}.menu-option:hover{background:transparent;color:var(--yellow)}.menu-option span{font-size:21px;color:#92a8c2}#lobby-error{color:#ffb4a4;font-size:14px;line-height:1.4;margin:12px 0}#lobby-error:empty{display:none}.menu-setup select+label{margin-top:17px}.setup-note{color:#aebfd2;font-size:14px;margin:16px 0 22px}.secondary{width:100%;margin-top:12px;background:#172b40}.instructions{font-size:13px;line-height:1.8;color:#bfcddd;margin:22px 0 8px}.instructions b{color:#f0f5fc;font-weight:700}.fine{font-size:12px;letter-spacing:0;font-weight:400;color:#aebed1}.menu-bottom>span{font-size:11px;color:#aebed1}
.overlay{position:absolute;inset:0;z-index:6;background:#0b1723de;display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto}.panel{width:440px;max-width:100%;margin-block:auto;background:#172b43;padding:30px;border:1px solid #6e89a466;border-top:4px solid var(--yellow);border-radius:3px;box-shadow:0 18px 60px #0007}.panel h2{font-size:29px;margin:0 0 16px;letter-spacing:-.5px}.panel p{color:#c3d1de;font-size:14px;line-height:1.5}.panel label{display:block;font-size:14px;margin:16px 0 7px}.panel select,.panel input[type=range]{width:100%}.panel .primary{margin-top:20px}.code-row{display:flex;align-items:center;justify-content:space-between;gap:8px}#room-code{font:800 33px monospace;letter-spacing:4px;color:var(--yellow)}#room-players{list-style:none;padding:0;display:grid;gap:9px;margin:22px 0}#room-players li{padding:12px 14px;background:#0f2034;border-left:4px solid var(--player-color);font-size:15px}#room-players i{width:12px;height:12px;border-radius:50%}#connection-status{position:absolute;bottom:50px;right:18px;z-index:7;background:#17222fea;color:#ffe599;padding:10px;border-radius:5px;font-size:13px}#settings-panel{z-index:8}.settings-note{margin:20px 0 8px}#error{position:absolute;inset:20%;padding:30px;background:#19232c;z-index:9;border:1px solid #b75c5c}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
footer{height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:#a5b5c8;font-size:11px;letter-spacing:.35px;border-top:1px solid #ffffff12}
/* Adjustable transparent controls. Jump has a dedicated, separate target. */
body{--control-scale:1;--pad-size:min(calc(140px * var(--control-scale)),27vw,32vh);--button-size:min(calc(68px * var(--control-scale)),13vw,15vh);--jump-size:min(calc(82px * var(--control-scale)),16vw,18vh);--control-gap:12px}
#touch{position:absolute;inset:0;z-index:2;display:block;pointer-events:none;user-select:none;-webkit-user-select:none}
.touch-left,.touch-right{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));display:flex;align-items:end;gap:var(--control-gap);pointer-events:none}.touch-left{left:max(18px,env(safe-area-inset-left))}.touch-right{right:max(18px,env(safe-area-inset-right));display:grid;grid-template-columns:var(--button-size) var(--pad-size);grid-template-rows:auto auto;align-items:end}.touch-right>.jump-button{grid-column:2;grid-row:1;justify-self:end}.touch-actions{grid-column:1;grid-row:2;display:grid;gap:var(--control-gap)}.touch-right>.aim-pad{grid-column:2;grid-row:2}
.stick,.preview-stick{width:var(--pad-size);height:var(--pad-size);position:relative;border-radius:50%;background:#ffffff0c;border:2px solid #ffffff77;box-shadow:0 1px 6px #0002;pointer-events:auto;touch-action:none}
.nub,.preview-stick i{position:absolute;width:38%;height:38%;left:31%;top:31%;border-radius:50%;background:#f1f8ff20;border:2px solid #ffffff88;pointer-events:none}
.pad-label,.preview-stick span{position:absolute;left:0;bottom:12%;width:100%;text-align:center;font-size:clamp(11px,calc(12px * var(--control-scale)),17px);font-weight:700;color:#fff;text-shadow:0 1px 3px #000;letter-spacing:.3px;pointer-events:none}.aim-pad{border-color:#ffe77799}.aim-pad .nub{background:#ffdd3820;border-color:#ffe777aa}
.touch-button,.preview-jump{pointer-events:auto;width:var(--button-size);min-width:44px;height:var(--button-size);min-height:44px;padding:4px;font-size:clamp(11px,calc(12px * var(--control-scale)),17px);font-weight:700;color:#fff;background:#14233426;border:2px solid #ffffff70;text-shadow:0 1px 3px #000;border-radius:16px;touch-action:none}
.jump-button,.preview-jump{width:var(--jump-size);height:var(--jump-size);border-radius:50%;border-color:#ffe777bb;background:#ffdd381b;color:#fff5b5;font-size:clamp(13px,calc(15px * var(--control-scale)),21px)}.touch-button.held,.touch-button:active{background:#ffffff40;border-color:#fff}.stick:active{border-color:#fff}body[data-mode=touch] #loadout{bottom:auto;top:calc(var(--arena-top,0px) + 10px);background:#13233299;padding:6px 8px}
.control-size-setting{margin-top:18px;padding-top:3px}.setting-label{display:flex;justify-content:space-between;align-items:center;gap:16px}.panel .setting-label label{margin:0}.setting-label output{color:var(--yellow);font-size:16px;font-weight:700;white-space:nowrap}#control-size{padding:0;margin:12px 0 0;min-height:44px;accent-color:var(--yellow)}.panel #control-size-help{font-size:12px;margin:4px 0 12px;line-height:1.4}.control-preview{display:flex;align-items:center;justify-content:center;gap:20px;padding:14px 8px;background:#0c1c31;border:1px solid #ffffff18;min-height:160px}.preview-stick{flex-shrink:0;pointer-events:none}.preview-jump{display:grid;place-items:center;flex-shrink:0;pointer-events:none}
@media(max-width:1000px){header{padding:8px 16px;min-height:58px}.brand small{display:none}.scoreboard{gap:12px}.toolbar select{max-width:150px}#menu{padding-inline:5%}.menu-card{grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:5%}h1{font-size:clamp(77px,11vw,112px);letter-spacing:-5px}.menu-bottom>span{display:none}.menu-bottom{justify-content:flex-end}.menu-choices h2{margin-bottom:18px}}
@media(max-width:700px){header{flex-wrap:wrap;gap:8px}.toolbar{width:100%;justify-content:space-between}.toolbar select{max-width:none;flex:1}.toolbar button{padding-inline:10px}.scoreboard{gap:18px}.score-slot{font-size:16px}#menu{padding:14px 7%}.menu-card{display:flex;flex-direction:column;align-items:stretch;gap:20px;max-width:420px;padding:22px 0 30px}.menu-title-block{padding:0;transform:rotate(-3deg)}h1{font-size:76px;line-height:.88;letter-spacing:-5px;margin:15px 0 13px}h1 br{display:none}h1 span{display:inline-block;margin-left:10px}#menu-description{font-size:15px;margin:15px 0 0}.eyebrow{font-size:11px;letter-spacing:1.4px}.menu-choices{padding:0}.menu-choices h2{font-size:15px;margin-bottom:15px}.menu-top{font-size:11px;letter-spacing:1px}.menu-top>span{display:none}.primary{font-size:18px;min-height:52px}.menu-divider{margin-top:21px}.menu-bottom{justify-content:flex-start}.fine{font-size:11px}.menu-option{font-size:16px}.overlay{padding:16px}.panel{padding:23px}footer{padding:0 13px;font-size:10px}#footer-end{display:none}#round-note{max-width:110px;text-align:right;font-size:11px}.arena-label strong{max-width:160px}.touch-left{left:10px}.touch-right{right:10px}.touch-left,.touch-right{bottom:14px}body{--control-gap:8px}body[data-mode=touch] #loadout{font-size:9px;top:calc(var(--arena-top,0px) + 8px)}}
@media(max-height:650px) and (min-width:701px){header{min-height:48px;padding-block:4px}header button,header select{min-height:36px;padding-block:7px}#menu{padding-block:10px}.menu-card{padding:12px 0 18px;grid-template-columns:minmax(0,1fr) minmax(290px,340px)}h1{font-size:90px;margin:18px 0}#menu-description{font-size:16px}.menu-choices h2{margin-bottom:12px}.menu-divider{margin:15px 0 7px}.menu-option{min-height:38px;font-size:16px;padding-block:7px}.online-entry .primary{min-height:48px;padding-block:12px;margin-block:10px 12px}.menu-top,.fine{font-size:11px}.menu-setup select+label{margin-top:11px}.setup-note{margin:12px 0 16px}.instructions{margin:16px 0 6px}footer{height:24px}}
@media(prefers-reduced-motion:reduce){.menu-title-block{transform:none}}

.quick-match{width:100%;display:flex;justify-content:space-between;align-items:center;padding:13px 14px;margin:8px 0;font-size:18px;color:#ffea72;border-color:#b7a54599;background:#ffdf3010}.quick-match span{font-size:11px;letter-spacing:1px;color:#c7d1dd}.quick-match:hover{background:#ffdf3025}
.weapon-picker{margin-top:16px;border:1px solid #8098b34d;border-radius:3px;background:#0f2034aa}.weapon-picker summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px;cursor:pointer;font-size:14px;font-weight:700;list-style:none}.weapon-picker summary::-webkit-details-marker{display:none}.weapon-picker summary::after{content:'+';font-size:18px;color:var(--yellow)}.weapon-picker[open] summary::after{content:'−'}.weapon-picker summary span{margin-left:auto;font-size:12px;font-weight:400;color:#c3d1de}.weapon-picker fieldset{display:grid;grid-template-columns:1fr 1fr;gap:6px;border:0;padding:0 12px;margin:0;min-width:0}.weapon-picker fieldset label{display:flex;align-items:center;gap:8px;font-size:13px;margin:0;min-height:42px;color:#e4ebf3;cursor:pointer}.weapon-picker input[type=checkbox]{width:20px;height:20px;min-height:20px;min-width:20px;margin:0;accent-color:var(--yellow);cursor:pointer}.weapon-presets{display:flex;gap:8px;padding:10px 12px 12px}.weapon-presets button{flex:1;font-size:12px;min-height:40px;padding:8px}

.menu-motion{display:flex;gap:12px;align-items:center;height:34px;margin-top:18px}.menu-motion i{width:9px;height:9px;border-radius:50%;background:#e4eb7e;animation:menu-drift 2.2s ease-in-out infinite}.menu-motion i:nth-child(2){background:#79b9ef;animation-delay:-.5s}.menu-motion i:nth-child(3){background:#ed8d91;animation-delay:-1s}.menu-motion i:nth-child(4){background:#bda3ef;animation-delay:-1.5s}@keyframes menu-drift{50%{transform:translateY(-9px)}}@media(prefers-reduced-motion:reduce){.menu-motion i{animation:none}}

/* Win counters sit in the arena corners, like the original's optional win display. */
.wins{position:absolute;left:var(--arena-left,0px);top:var(--arena-top,0px);width:var(--arena-width,100%);height:var(--arena-height,100%);pointer-events:none;z-index:1}
.win-slot{position:absolute;display:flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:4px;background:#0d1720b8;color:#fff;font-size:20px;font-weight:900;border-bottom:3px solid var(--c);transition:opacity .2s}
.win-slot b{min-width:14px;text-align:center}.win-slot small{font-size:10px;font-weight:700;letter-spacing:.5px;color:#d8e2ea;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-slot .score-head{width:11px;height:11px;border-radius:50%;background:var(--c);display:block}.win-slot.out{opacity:.38}
.corner-0{left:14px;top:58px}.corner-1{right:14px;top:58px}.corner-2{left:14px;bottom:14px}.corner-3{right:14px;bottom:14px}
body[data-mode=touch] .wins{height:auto}body[data-mode=touch] .win-slot{position:static;font-size:15px;padding:3px 8px}body[data-mode=touch] .wins{display:flex;justify-content:center;gap:8px;top:calc(var(--arena-top,0px) + 44px)}
#boss-bar{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--arena-top,0px) + 14px);width:min(420px,60%);height:16px;background:#0d1720cc;border:2px solid #ff9a2e;border-radius:3px;z-index:2;pointer-events:none}#boss-bar span{position:absolute;left:8px;top:-1px;font-size:11px;font-weight:900;letter-spacing:2px;color:#fff;z-index:1;text-shadow:0 1px 2px #000}#boss-fill{display:block;height:100%;width:100%;background:#ff9a2e}
#toast{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--arena-bottom,0px) + 60px);background:#0d1720e6;color:#ffe9a8;padding:10px 16px;border-radius:4px;font-size:13px;font-weight:700;z-index:5;pointer-events:none}
.toggles{display:grid;gap:4px;margin:14px 0 4px}.toggle{display:flex!important;align-items:center;gap:10px;font-size:14px;color:#dce6ef;margin:0!important;min-height:38px;cursor:pointer}.toggle input{width:20px;height:20px;min-height:20px;margin:0;accent-color:var(--yellow)}
.setup-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.setup-row select{width:100%}.menu-setup .setup-row label,.panel .setup-row label{margin-top:16px}
.weapon-cats{display:grid;gap:4px;padding:0 12px;max-height:320px;overflow-y:auto}.weapon-cats fieldset{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;border:0;padding:4px 0;margin:0;min-width:0}.weapon-cats legend{font-size:11px;letter-spacing:1.5px;color:var(--yellow);font-weight:800;text-transform:uppercase;padding:6px 0 2px}.weapon-cats label{display:flex;align-items:center;gap:8px;font-size:13px;margin:0;min-height:36px;color:#e4ebf3;cursor:pointer}.weapon-cats input{width:18px;height:18px;min-height:18px;margin:0;accent-color:var(--yellow)}
.series-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px 8px;border:0;padding:0 12px 10px;margin:0}.series-list label{display:flex;align-items:center;gap:7px;font-size:13px;margin:0;min-height:36px;color:#e4ebf3}.series-list input{width:18px;height:18px;min-height:18px;margin:0;accent-color:var(--yellow)}
#local-slots{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}#local-slots li{padding:11px 13px;background:#0f2034;border-left:4px solid var(--player-color);font-size:14px;color:#dce6ef}#local-slots b{color:var(--player-color);margin-right:8px;letter-spacing:1px}
#practice-menu{padding-bottom:24px}.menu-setup label{margin-top:12px}.menu-setup>label:first-child{margin-top:0}.menu-setup .weapon-picker{margin-top:12px}.menu-setup .toggles{margin:10px 0 4px}
@media(min-width:701px){.menu-card{align-items:start}}

/* Aim stick: inner ring = aim only; the nub turns red when pushed far enough to attack. */
.aim-pad::after{content:"";position:absolute;left:35%;top:35%;width:30%;height:30%;border-radius:50%;border:1px dashed #ffe77755;pointer-events:none}.aim-pad.firing .nub{background:#ff5a4a66;border-color:#ffb0a6}

/* iPadOS 15.0-15.3 has no dvh: the vh sizes above apply; newer Safari uses the dynamic viewport. */
@supports (height:1dvh){body{--pad-size:min(calc(140px * var(--control-scale)),27vw,32dvh);--button-size:min(calc(68px * var(--control-scale)),13vw,15dvh);--jump-size:min(calc(82px * var(--control-scale)),16vw,18dvh)}}
