:root{--deep:#0d3b66;--lagoon:#1fb5c9;--sand:#ffe3a3;--sunset:#ff8a3d;--palm:#2f9e44;--ink:#14213d;--white:#fffdf6;--danger:#ff4d4d;--display:"Bungee", "Arial Black", system-ui, sans-serif;--body:"Nunito", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--body);color:var(--ink);background:var(--deep);font-weight:600;overflow:hidden}body.playing{cursor:default}[hidden]{display:none!important}button,select,input{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--sunset);outline-offset:3px}#menu{background:radial-gradient(120% 70% at 20% 110%, #1fb5c98c, transparent 60%), repeating-linear-gradient(-12deg, transparent 0 46px, #ffffff09 46px 50px), var(--deep);color:var(--white);grid-template-rows:1fr auto;grid-template-columns:minmax(300px,1fr) minmax(320px,520px);gap:24px 56px;padding:clamp(20px,5vw,64px);display:grid;position:fixed;inset:0;overflow:auto}.brand{align-self:center;max-width:620px}.title{font-family:var(--display);letter-spacing:-.01em;color:var(--sand);text-shadow:.05em .05em 0 var(--sunset), .1em .1em 0 var(--ink);transform-origin:0 100%;margin:0;font-size:clamp(64px,11vw,150px);font-weight:400;line-height:.86;transform:rotate(-3deg)}.title span{display:block}.title span+span{margin-left:.32em}.tagline{color:#bfe9f0;max-width:32ch;margin:28px 0 32px;font-size:20px;font-weight:800}.field-label{color:#bfe9f0;margin:0 0 8px;font-size:15px;font-weight:800;display:block}.panel .field-label{color:var(--ink);opacity:.75}.name-pick{gap:8px;margin-bottom:18px;display:flex}.name-pick select{appearance:none;cursor:pointer;background:var(--white);min-width:0;color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:12px;flex:1;padding:10px 14px;font-size:20px;font-weight:900}.dice{border:3px solid var(--ink);background:var(--sunset);cursor:pointer;width:56px;box-shadow:4px 4px 0 var(--ink);border-radius:12px;font-size:24px}.dice:active{box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}.toggle{cursor:pointer;align-items:center;gap:12px;margin:6px 0 16px;font-size:18px;font-weight:800;display:flex}.toggle input{opacity:0;position:absolute}.toggle-ui{border:3px solid var(--white);background:#fff3;border-radius:99px;flex:none;width:54px;height:30px;transition:background .15s;position:relative}.toggle-ui:after{content:"";background:var(--white);border-radius:50%;width:20px;height:20px;transition:transform .15s;position:absolute;top:2px;left:3px}.toggle input:checked+.toggle-ui{background:var(--palm)}.toggle input:checked+.toggle-ui:after{transform:translate(23px)}.toggle input:focus-visible+.toggle-ui{outline:3px solid var(--sunset);outline-offset:3px}.hint{color:#bfe9f0;max-width:46ch;margin:-6px 0 0;font-size:15px}.actions{flex-direction:column;align-self:center;gap:18px;display:flex}.panel{background:var(--sand);color:var(--ink);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:20px;padding:20px 22px}.panel h2{font-family:var(--display);margin:0 0 14px;font-size:26px;font-weight:400}.create{transform:rotate(.6deg)}.join{background:var(--lagoon);grid-template-columns:1fr auto;grid-template-areas:"h h""l l""i b";gap:0 12px;display:grid;transform:rotate(-.8deg)}.join h2{grid-area:h}.join .field-label{grid-area:l}.join .code-input{grid-area:i}.join .btn{grid-area:b}.code-input{width:100%;font-family:var(--display);letter-spacing:.32em;text-transform:uppercase;border:3px solid var(--ink);background:var(--white);background-image:repeating-linear-gradient(90deg,#0000 0 calc(20% - 2px),#14213d1f calc(20% - 2px) 20%);border-radius:12px;padding:8px 6px 8px 16px;font-size:34px}.code-input::placeholder{color:#14213d38}.seg{border:0;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;display:flex}.seg legend{opacity:.7;margin-bottom:6px;padding:0;font-size:14px;font-weight:800}.seg label{cursor:pointer}.seg input{opacity:0;position:absolute}.seg span{border:3px solid var(--ink);background:var(--white);border-radius:999px;padding:8px 14px;font-weight:900;display:inline-block}.seg input:checked+span{background:var(--ink);color:var(--sand)}.seg input:focus-visible+span{outline:3px solid var(--sunset);outline-offset:2px}.seg .soon{cursor:not-allowed;opacity:.55}.seg small{background:var(--sunset);color:var(--ink);vertical-align:2px;border-radius:6px;margin-left:4px;padding:1px 5px;font-size:11px;font-weight:900}.row-2{gap:14px;margin-bottom:16px;display:flex}.mini{flex-direction:column;flex:1;gap:6px;font-size:14px;font-weight:800;display:flex}.mini select{border:3px solid var(--ink);background:var(--white);border-radius:10px;padding:8px 10px;font-weight:900}.btn{font-family:var(--display);cursor:pointer;background:var(--sunset);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:14px;padding:10px 22px;font-size:20px;font-weight:400}.btn.big{width:100%;padding:14px;font-size:26px}.btn.ghost{color:var(--white);border-color:var(--white);box-shadow:none;background:0 0}.btn:active:not(:disabled){box-shadow:1px 1px 0 var(--ink);transform:translate(4px,4px)}.btn:disabled,.practice:disabled{opacity:.6;cursor:wait}.practice{text-align:left;color:var(--white);cursor:pointer;background:0 0;border:3px dashed #ffffff8c;border-radius:16px;flex-direction:column;gap:2px;padding:14px 18px;display:flex}.practice b{font-family:var(--display);font-size:20px;font-weight:400}.practice span{color:#bfe9f0}.practice:hover{border-color:var(--sand)}#menu-error{color:#ffd0c2;min-height:1.4em;margin:0;font-size:17px;font-weight:900}.keys{color:#9fd3dd;flex-wrap:wrap;grid-column:1/-1;gap:8px 18px;font-size:14px;display:flex}kbd{font-family:var(--body);color:var(--white);background:#ffffff1f;border:2px solid #ffffff4d;border-bottom-width:4px;border-radius:8px;padding:1px 7px;font-weight:900}.keys .pad{color:var(--sand);font-weight:800}@media (width<=860px){#menu{grid-template-columns:1fr}.title{font-size:64px}}#loading{color:var(--white);z-index:50;background:#0d3b66d9;place-content:center;justify-items:center;font-size:20px;font-weight:800;display:grid;position:fixed;inset:0}.spinner{border:6px solid #ffffff40;border-top-color:var(--sand);border-radius:50%;width:56px;height:56px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#game{pointer-events:none;position:fixed;inset:0}body.playing #game{pointer-events:auto}.game-canvas{display:block;position:absolute;inset:0}.hud-root{pointer-events:none;position:absolute;inset:0}.hud{color:var(--white);text-shadow:0 2px #00000059;position:absolute;overflow:hidden}.hud+.hud{border-top:3px solid var(--ink)}.hud-top{font-size:15px;font-weight:800;position:absolute;top:14px;left:16px}.hud-room{background:#0d3b6699;border-radius:10px;padding:6px 12px}.hud-room .code{font-family:var(--display);letter-spacing:.12em;color:var(--sand);font-weight:400}.hud-label{font-family:var(--display);background:var(--sunset);color:var(--ink);text-shadow:none;border-radius:8px;padding:3px 12px;font-size:18px;position:absolute;top:14px;left:50%;transform:translate(-50%)}.hud-feed{flex-direction:column;align-items:flex-end;gap:5px;display:flex;position:absolute;top:14px;right:16px}.feed-item{background:#14213d9e;border-radius:8px;align-items:center;gap:8px;padding:4px 10px;font-size:15px;transition:opacity .5s;display:flex}.feed-item.out{opacity:0}.feed-item .me{color:var(--sand)}.feed-gun{background:linear-gradient(90deg, var(--white) 0 70%, transparent 70%), var(--white);clip-path:polygon(0 0,100% 0,100% 45%,55% 45%,45% 100%,25% 100%,30% 45%,0 45%);width:22px;height:10px}.crosshair{--gap:8px;position:absolute;top:50%;left:50%}.crosshair i{background:var(--white);position:absolute;box-shadow:0 0 0 1px #00000073}.crosshair i:first-child,.crosshair i:nth-child(2){width:2px;height:9px;left:-1px}.crosshair i:first-child{bottom:var(--gap)}.crosshair i:nth-child(2){top:var(--gap)}.crosshair i:nth-child(3),.crosshair i:nth-child(4){width:9px;height:2px;top:-1px}.crosshair i:nth-child(3){right:var(--gap)}.crosshair i:nth-child(4){left:var(--gap)}.hitmarker{opacity:0;position:absolute;top:50%;left:50%}.hitmarker.on{opacity:1}.hitmarker i{background:var(--white);width:2px;height:10px;position:absolute;top:-5px;left:-1px}.hitmarker i:first-child{transform:rotate(45deg)translateY(-11px)}.hitmarker i:nth-child(2){transform:rotate(135deg)translateY(-11px)}.hitmarker i:nth-child(3){transform:rotate(225deg)translateY(-11px)}.hitmarker i:nth-child(4){transform:rotate(315deg)translateY(-11px)}.hitmarker.head i{background:var(--sand);height:13px}.dmg-layer{position:absolute;inset:0}.dmg{font-family:var(--display);color:var(--white);text-shadow:2px 2px 0 var(--ink);font-size:26px;animation:.9s ease-out forwards dmg;position:absolute;transform:translate(-50%,-50%)}.dmg.head{color:var(--sand);font-size:32px}@keyframes dmg{0%{opacity:1;transform:translate(-50%,-50%)scale(1.25)}to{opacity:0;transform:translate(-50%,-160%)scale(1)}}.hud-center{text-align:center;position:absolute;top:58%;left:50%;transform:translate(-50%)}.hud-center .dead{background:#14213d99;border-radius:14px;padding:12px 22px;font-size:22px;font-weight:800}.hud-center .dead span{font-family:var(--display);color:var(--sand);font-size:30px}.hud-center .click{font-family:var(--display);background:var(--sunset);color:var(--ink);text-shadow:none;border-radius:12px;padding:8px 18px;font-size:22px}.hud-banner{opacity:0;font-family:var(--display);color:var(--sand);text-shadow:3px 3px 0 var(--ink);white-space:nowrap;font-size:30px;position:absolute;top:30%;left:50%;transform:translate(-50%,-50%)scale(.6)}.hud-banner b{color:var(--white);font-weight:400}.hud-banner.on{animation:2.2s ease-out forwards banner}@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}12%{opacity:1;transform:translate(-50%,-50%)scale(1.08)}20%{transform:translate(-50%,-50%)scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}.hud-bottom{align-items:flex-end;gap:14px;display:flex;position:absolute;bottom:16px;left:16px;right:16px}.health{border:3px solid var(--ink);background:#14213da6;border-radius:10px;width:min(320px,40%);height:30px;position:relative;overflow:hidden}.health-fill{background:var(--palm);transition:width .15s;position:absolute;inset:0 auto 0 0}.health.low .health-fill{background:var(--danger)}.health span{text-align:center;font-family:var(--display);font-size:18px;line-height:24px;display:block;position:relative}.kills{font-family:var(--display);background:#14213da6;border-radius:10px;padding:1px 12px;font-size:20px}.kills:before{content:"Elims ";font-family:var(--body);color:#bfe9f0;font-size:14px;font-weight:900}.ammo{text-align:right;grid-template-columns:auto auto;align-items:baseline;gap:0 6px;margin-left:auto;display:grid}.ammo b{font-family:var(--display);font-size:40px;font-weight:400;line-height:1}.ammo small{color:#bfe9f0;font-size:18px;font-weight:900}.ammo em{color:var(--sand);grid-column:1/-1;min-height:1em;font-size:14px;font-style:normal;font-weight:900}.bars{flex-direction:column;gap:5px;width:min(320px,40%);display:flex}.bars .health{width:100%}.health.shield{border-width:2px;height:18px}.health.shield .health-fill{background:#3fa7ff}.health.shield span{font-size:13px;line-height:14px}.health.shield.empty{opacity:.55}.hud-right{flex-direction:column;align-items:flex-end;gap:6px;margin-left:auto;display:flex}.hud-right .ammo{margin-left:0}.slots{gap:6px;display:flex}.slot{width:74px;height:52px;box-shadow:inset 0 -16px 18px -10px var(--rar);background:#14213d9e;border:3px solid #14213de6;border-radius:10px;place-items:center;transition:transform .1s;display:grid;position:relative}.slot.on{border-color:var(--white);transform:translateY(-5px)}.slot img{object-fit:contain;filter:drop-shadow(0 2px 1px #00000080);width:64px;height:32px}.slot .key{opacity:.8;font-size:11px;font-weight:900;position:absolute;top:1px;left:5px}.slot small{text-align:center;white-space:nowrap;font-size:9px;font-weight:900;position:absolute;bottom:1px;left:0;right:0;overflow:hidden}.slot.empty{opacity:.55}.prompt{white-space:nowrap;background:#14213db8;border-radius:12px;padding:7px 14px;font-size:17px;font-weight:900;position:absolute;top:64%;left:50%;transform:translate(-50%)}.prompt kbd{text-align:center;background:var(--white);min-width:24px;color:var(--ink);text-shadow:none;font-family:var(--display);border-radius:6px;margin-right:6px;padding:0 6px;display:inline-block}.car-panel{background:#14213d9e;border-radius:12px;width:230px;padding:6px 12px;position:absolute;bottom:120px;left:16px}.car-panel .spd{font-family:var(--display);font-size:28px;font-weight:400}.car-panel small{margin-left:4px;font-weight:900}.car-hp{background:#0006;border-radius:6px;height:10px;margin-top:4px;overflow:hidden}.car-hp div{background:var(--sunset);height:100%}.car-panel em{opacity:.85;margin-top:4px;font-size:11px;font-style:normal;font-weight:800;display:block}.toasts{flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;bottom:130px;left:50%;transform:translate(-50%)}.toast{background:#14213db3;border-radius:10px;padding:4px 10px;font-size:15px;font-weight:900;transition:opacity .4s}.toast.out{opacity:0}.scope{background:radial-gradient(circle,#0000 0 34vmin,#000000eb 34.5vmin);display:none;position:absolute;inset:0}.scope.on{display:block}.scope i{background:#000c;height:1px;position:absolute;top:50%;left:0;right:0}.scope:after{content:"";background:#000c;width:1px;position:absolute;top:0;bottom:0;left:50%}.slot.axe{--rar:#8a6b45;width:52px}.axe-icon{font-size:26px;line-height:1}.mats{gap:8px;font-size:15px;font-weight:900;display:flex}.mat{background:#14213d9e;border:2px solid #0000;border-radius:8px;padding:2px 8px}.mat.on{border-color:var(--white)}.mat-wood b,b.mat-wood{color:#ffd08a}.mat-stone b,b.mat-stone{color:#e2e0da}.mat-metal b,b.mat-metal{color:#bfe0ff}.buildbar{align-items:stretch;gap:6px;display:flex}.bslot{background:#143c6eb3;border:3px solid #14213de6;border-radius:10px;place-items:center;width:62px;height:56px;transition:transform .1s;display:grid;position:relative}.bslot.on{background:#286ec8cc;border-color:#8fd0ff;transform:translateY(-5px)}.bslot svg{fill:#bee4ff59;stroke:#e8f6ff;stroke-width:2.4px;stroke-linejoin:round;width:30px;height:30px}.bslot .key{opacity:.8;font-size:11px;font-weight:900;position:absolute;top:1px;left:5px}.bslot small{text-align:center;font-size:9px;font-weight:900;position:absolute;bottom:1px;left:0;right:0}.bmat{background:#14213d9e;border-radius:10px;flex-direction:column;justify-content:center;padding:4px 10px;display:flex}.bmat b{font-size:15px}.bmat i{color:var(--sand);font-style:normal}.bmat i.low{color:var(--danger)}.bmat small{opacity:.85;font-size:10px;font-weight:800}.hud.small .bslot{width:50px;height:46px}.hud.small .slot{width:58px;height:42px}.hud.small .slot img{width:50px;height:25px}.hud.small .car-panel{bottom:100px}.hud.small .ammo b{font-size:30px}.hud.small .health{height:26px}.hud.small .health span{font-size:15px;line-height:20px}.scoreboard{border:3px solid var(--sand);min-width:320px;max-height:90%;text-shadow:none;background:#14213de6;border-radius:16px;padding:14px 18px;position:absolute;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)}.scoreboard h3{font-family:var(--display);color:var(--sand);margin:0 0 8px;font-weight:400}.scoreboard table{border-collapse:collapse;width:100%;font-size:16px}.scoreboard th{text-align:left;color:#9fd3dd;font-size:13px;font-weight:800}.scoreboard td{padding:4px 6px}.scoreboard td:nth-child(n+3),.scoreboard th:nth-child(n+3){text-align:right}.scoreboard tr.me td{color:var(--sand);font-weight:900}.scoreboard tr.mate td{color:#8fc1ff}.scoreboard small{opacity:.7;font-size:11px}.hurt-flash{opacity:0;position:absolute;inset:0;box-shadow:inset 0 0 120px #ff3232b3}.hurt-flash.on{animation:.45s ease-out hurt}@keyframes hurt{0%{opacity:1}to{opacity:0}}.overlay{z-index:20;background:#0d3b6699;place-items:center;display:grid;position:absolute;inset:0}.overlay-card{background:var(--ink);color:var(--white);border:3px solid var(--sand);text-align:center;border-radius:20px;flex-direction:column;gap:16px;min-width:300px;padding:26px 30px;display:flex;box-shadow:8px 8px #00000059}.overlay-card h2{font-family:var(--display);color:var(--sand);margin:0;font-size:32px;font-weight:400}.overlay-card p{margin:0}.slider{flex-direction:column;gap:6px;font-weight:800;display:flex}@media (prefers-reduced-motion:reduce){.hud-banner.on,.dmg,.hurt-flash.on,.spinner{animation-duration:10ms}}.minimap{border-radius:50%;width:170px;height:170px;position:absolute;top:12px;right:14px}.hud.has-map .hud-feed{top:194px}.hud.small .minimap{width:120px;height:120px}.hud.small.has-map .hud-feed{top:140px}.match-line{white-space:nowrap;background:#14213db3;border-radius:12px;padding:6px 14px;font-size:15px;font-weight:800;position:absolute;top:50px;left:50%;transform:translate(-50%)}.match-line kbd{background:var(--white);color:var(--ink);text-shadow:none;font-family:var(--display);border-radius:5px;padding:0 5px;font-size:12px}.match-line .warn{color:#d9a6ff}.hud-label+.match-line,.hud .hud-label~.match-line{top:46px}.storm-tint{pointer-events:none;opacity:0;background:radial-gradient(circle,#8c32dc26,#6e1ec88c);transition:opacity .4s;position:absolute;inset:0}.storm-tint.on{opacity:1}.revive-bar{border:3px solid var(--ink);background:#14213dbf;border-radius:13px;width:260px;height:26px;position:absolute;top:70%;left:50%;overflow:hidden;transform:translate(-50%)}.revive-bar div{background:#4fd35a;position:absolute;inset:0 auto 0 0}.revive-bar span{text-align:center;font-weight:900;line-height:20px;display:block;position:relative}.victory{flex-direction:column;align-items:center;gap:6px;display:flex}.victory b{font-family:var(--display);color:var(--sand);text-shadow:4px 4px 0 var(--ink);font-size:64px;font-weight:400}.victory span{background:#14213d99;border-radius:10px;padding:4px 14px;font-size:20px;font-weight:900}.victory.lost b{color:var(--white);font-size:52px}.hud-center .dead.knocked{background:#a01e28a6}.hud-center .dead .small{font-size:18px}.hud.small .victory b{font-size:40px}