@charset "UTF-8";
/* Segoe UI draws the typographic apostrophe and quotes as a flat acute accent at heavy weights (LET´S DROP), so those
   code points come from Arial, which has the proper comma shapes. Missing locally, the faces simply fall through. */
@font-face{font-family:Quotes;font-weight:100 600;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica");unicode-range:U+2018-201F}
@font-face{font-family:Quotes;font-weight:700 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold");unicode-range:U+2018-201F}
/* Interface type scale, fluid with the viewport and never under 11 px. Labels, captions, hints and key caps use --fs-label,
   running text --fs-text, names and buttons --fs-name, HUD numerals --fs-num. Touch screens step every tier up by one so
   text stays readable at arm's length. Spacing follows one scale (--sp-*), and every panel shares one side gutter (--gutter). */
:root{color-scheme:dark;--cream:#fff5d8;--yellow:#ffda59;--yellow-light:#ffeb8f;--ink:#122f2c;--muted:#c1cdc1;--panel:#163c35;--fs-label:clamp(11px,.55vw + 6px,12px);--fs-text:clamp(12px,.6vw + 6.5px,13px);--fs-name:clamp(13px,.5vw + 8px,15px);--fs-num:clamp(22px,1vw + 12px,26px);--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--gutter:clamp(20px,3vw,34px);--tap:44px;--hud-chip:#0a2427cc;--display:Impact,"Arial Narrow","Franklin Gothic Heavy",sans-serif;font-family:Quotes,"Segoe UI",Arial,sans-serif;font-synthesis:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;color:var(--cream);background:#123d39}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{user-select:none}button,a,input,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button,input,select{font:inherit}button{border:0;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--yellow-light);outline-offset:5px}button{color:inherit}button:disabled{cursor:wait;opacity:.55}[hidden]{display:none!important}.icon{width:24px;height:24px;flex:none;vertical-align:middle}#game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0}#ui-root{position:fixed;inset:0;pointer-events:none}#ui-root [data-ui],button,a,input,select{pointer-events:auto}.screen{position:absolute;inset:0}.menu-screen{overflow:hidden;isolation:isolate}.menu-art,.menu-shade{position:absolute;inset:0;z-index:-2}.menu-art{background:#12473b url("assets/title-art.png") center center/cover no-repeat;animation:art-arrive 1.2s ease both}.menu-shade{z-index:-1;background:linear-gradient(90deg,rgba(2,24,22,.4),rgba(2,24,22,.18) 30%,transparent 61%),linear-gradient(0deg,rgba(5,30,25,.6),transparent 22%,transparent 85%,rgba(4,29,23,.25))}.menu-header{position:absolute;top:max(36px,calc(env(safe-area-inset-top) + 8px));left:max(5.2vw,env(safe-area-inset-left));right:max(4vw,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between}.wordmark{display:flex;align-items:center;gap:11px;font-weight:800;font-size:25px;letter-spacing:-1.2px}.wordmark>.icon{width:31px;height:31px;stroke-width:1.9}.brand-dot{color:var(--yellow)}.header-actions{display:flex;gap:10px}.icon-button{width:45px;height:45px;display:grid;place-items:center;background:rgba(11,35,31,.35);border:1px solid rgba(255,255,255,.17);border-radius:50%;transition:background .2s,transform .2s}.icon-button:hover{background:rgba(255,237,168,.2);transform:translateY(-2px)}.icon-button .icon{width:21px;height:21px}.menu-content{position:absolute;left:6.1vw;top:49%;transform:translateY(-43%);width:44vw;max-width:650px;animation:content-arrive .7s .15s both}.eyebrow{display:flex;align-items:center;gap:12px;font-size:var(--fs-label);font-weight:800;letter-spacing:2.3px;margin:0 0 24px;color:var(--yellow-light)}.eyebrow-line{width:28px;height:2px;background:var(--yellow-light)}.game-title{font-family:var(--display);font-size:clamp(86px,8.6vw,158px);font-weight:900;line-height:.79;letter-spacing:-1.7px;transform:skewY(-3deg);margin:0 0 34px;text-shadow:2px 5px 0 rgba(4,27,23,.15);display:inline-block}.game-title>span{display:block}.game-title>.title-arena{color:var(--yellow);letter-spacing:2px;margin-top:10px}.title-star{display:inline-block;font-family:Arial,sans-serif;font-size:.4em;vertical-align:top;margin:8px 0 0 12px;color:var(--yellow)}.menu-description{font-size:clamp(16px,1.35vw,23px);line-height:1.5;letter-spacing:.1px;margin:0 0 24px;color:#f4ecd1;font-weight:500}.match-tags{display:flex;align-items:center;gap:13px;font-size:var(--fs-label);font-weight:800;letter-spacing:1.5px;color:#d7e5d3;margin-bottom:22px}.match-tags>span{display:flex;align-items:center;gap:7px}.match-tags .icon{height:17px;width:17px}.tag-separator{width:3px;height:3px;background:#b4c6b5;border-radius:50%}.play-button{display:flex;align-items:center;justify-content:space-between;gap:35px;min-width:310px;padding:20px 25px;background:var(--yellow);color:#16352d;box-shadow:0 6px 0 #c49527,0 12px 30px #001f2433;border-radius:4px;font-size:19px;font-weight:900;letter-spacing:.9px;transition:transform .18s,background .18s,box-shadow .18s}.play-button>.icon{height:28px;width:28px;stroke-width:2.5}.play-button:hover{transform:translateY(-3px);background:var(--yellow-light);box-shadow:0 8px 0 #c49527,0 17px 30px #001f2440}.play-button:active{transform:translateY(4px);box-shadow:0 2px 0 #c49527}.play-caption{display:flex;align-items:center;gap:7px;margin-top:24px;font-size:var(--fs-label);font-weight:800;letter-spacing:1.35px;color:#c9d9c3;white-space:nowrap}.live-dot{height:5px;width:5px;border-radius:50%;background:#d4ea8d;box-shadow:0 0 9px #ddff9a66}.caption-divider{margin:0 4px;color:#81988b}.island-label{display:flex;gap:12px;align-items:center;position:absolute;bottom:103px;right:4vw;font-size:var(--fs-label);letter-spacing:2px;line-height:1.8;text-shadow:0 2px 4px #173d2b}.island-label strong{font-size:15px;letter-spacing:1.5px}.island-label-rule{height:38px;width:3px;background:var(--yellow)}.menu-footer{display:flex;align-items:center;justify-content:space-between;position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:max(5.2vw,env(safe-area-inset-left));right:max(4vw,env(safe-area-inset-right));gap:20px}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:none;padding:var(--sp-2) 0;font-size:var(--fs-label);font-weight:800;letter-spacing:1.2px;color:#e2e9d5;text-decoration:underline 1px transparent;text-underline-offset:7px;transition:color .15s,text-decoration-color .15s}.text-button:hover{color:var(--yellow);text-decoration-color:var(--yellow)}.text-button .icon{width:19px;height:19px}.footer-credit{font-size:var(--fs-label);color:#cad7c0;letter-spacing:.3px}.footer-credit span{color:var(--cream);margin-left:5px}.desktop-note{font-size:var(--fs-label);letter-spacing:1.2px;font-weight:700;color:#d8e4c8}

.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 25%,#235847,#12382f 75%);text-align:center}.loading-mark{width:90px;height:90px;border:1px solid #e4efc934;border-radius:50%;display:grid;place-items:center;margin-bottom:32px;animation:loading-bob 2s ease-in-out infinite}.loading-mark .icon{width:49px;height:49px;color:var(--yellow)}.loading-screen .eyebrow{margin-bottom:15px}.loading-screen h2{font-size:48px;font-family:var(--display);letter-spacing:.5px;text-transform:uppercase;font-weight:400;margin:0 0 30px}.loading-track{width:320px;height:5px;background:#79937e33;border-radius:5px;overflow:hidden}.loading-track>div{width:0;height:100%;background:var(--yellow);transition:width .2s ease}.loading-screen #loading-text{font-size:12px;color:#b8d0bc;margin-top:16px}

.hud{position:absolute;inset:0;pointer-events:none;text-shadow:0 1px 3px #001b2870}.hud-top-left{position:absolute;top:24px;left:25px}.hud-brand{display:inline-flex;align-items:center;gap:7px;font-size:17px;font-weight:800;letter-spacing:-.7px;filter:drop-shadow(0 2px 4px #09262a44)}.hud-brand .icon{width:23px;height:23px}.score-cluster{display:flex;margin-top:17px;gap:5px}.score-item{display:flex;align-items:center;gap:7px;background:#0c292cbb;backdrop-filter:blur(10px);height:43px;padding:0 12px;border-radius:4px;border:1px solid #ebf9e21a}.score-item .icon{width:18px;height:18px;color:#e0e8c7}.score-item strong{font-size:23px;font-weight:900;letter-spacing:-1px;line-height:1}.score-item span{font-size:var(--fs-label);font-weight:800;letter-spacing:1px;color:#bfcfbc}.alive-item{border-top:2px solid var(--yellow)}.kill-feed{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:14px;max-width:325px}.feed-line{display:flex;align-items:center;gap:8px;background:#102c2b92;padding:5px 8px;border-radius:3px;font-size:var(--fs-label);color:#e5e9df;animation:feed-in .2s ease both}.feed-line strong{font-weight:700}.feed-line .icon{width:17px;height:17px;opacity:.65}.feed-line.you{border-left:2px solid var(--yellow);color:var(--yellow-light)}.storm-pill{position:absolute;left:50%;top:22px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:9px 18px 9px 13px;background:#18293dcc;border:1px solid #ffffff20;border-radius:6px;min-width:175px;box-shadow:0 4px 12px #142a2820}.storm-pill>.icon{width:29px;height:29px;color:#d6bbff}.storm-pill>div{display:flex;flex-direction:column;gap:2px}.storm-pill span{font-size:var(--fs-label);font-weight:800;letter-spacing:1.3px;color:#ddd0f0}.storm-pill strong{font-size:23px;line-height:1;font-variant-numeric:tabular-nums}.storm-pill.danger{background:#642e43db;border-color:#ff7370;animation:danger-pulse 1s infinite}.storm-pill.danger>.icon{color:#ffad9c}.hud-top-right{position:absolute;right:24px;top:22px;width:190px}.minimap-frame{position:relative;border:3px solid #ffefd0d9;border-radius:7px;box-shadow:0 4px 18px #071b2633;overflow:hidden;background:#2f786d;aspect-ratio:1}#minimap{width:100%;height:100%;display:block;cursor:default}#minimap.drop-active{cursor:crosshair}.map-north{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:var(--fs-label);font-weight:900;color:#fffbce;text-shadow:0 1px 3px #002a35}.map-location{position:absolute;bottom:0;left:0;right:0;display:block;padding:7px;background:linear-gradient(transparent,#102e36cc);text-align:center;color:#fff5d9;font-size:var(--fs-label);font-weight:900;letter-spacing:1.25px;pointer-events:none}.map-caption{display:flex;align-items:center;justify-content:space-between;margin-top:7px;gap:8px}.map-caption>span{font-size:var(--fs-label);letter-spacing:.7px;font-weight:800;max-width:128px;color:#f0f6df}.pause-button{display:flex;align-items:center;gap:3px;background:#122c30b8;border-radius:3px;padding:3px 5px;color:var(--cream)}.pause-button:hover{background:#234a42}.pause-button>.icon{width:11px;height:11px}.pause-button kbd{font-size:var(--fs-label);border:0;background:none;padding:0;min-width:0;box-shadow:none}.drop-banner{position:absolute;left:50%;top:28%;transform:translateX(-50%);text-align:center;background:linear-gradient(90deg,transparent,#102d30c9 15%,#102d30d9 85%,transparent);padding:24px 68px 22px;min-width:620px}.drop-banner>.eyebrow{justify-content:center;font-size:var(--fs-label);margin:0 0 10px}.drop-banner>h2{font-family:var(--display);font-size:40px;font-weight:400;letter-spacing:1px;margin:0;color:var(--cream)}.drop-banner>p{font-size:12px;color:#dde8d4;margin:9px 0 0}.drop-countdown{display:flex;gap:9px;align-items:center;justify-content:center;margin-top:16px}.drop-countdown>span{font-size:29px;font-weight:900;line-height:1;color:var(--yellow)}.drop-countdown>small{font-size:var(--fs-label);font-weight:700;letter-spacing:1px}.award-banner{position:absolute;top:19%;left:50%;transform:translate(-50%,-15px) scale(.93);text-align:center;opacity:0;transition:opacity .25s,transform .25s;filter:drop-shadow(0 4px 0 #1638308f);pointer-events:none}.award-banner.visible{opacity:1;transform:translate(-50%,0) scale(1);animation:award-pop .35s ease}.award-kicker{display:block;letter-spacing:3px;font-size:var(--fs-label);font-weight:900;color:#fff9d5;text-shadow:0 2px 8px #103d2d;margin-bottom:6px}.award-banner>strong{display:block;font-family:var(--display);font-size:clamp(34px,4vw,62px);letter-spacing:2px;color:var(--yellow);line-height:1;white-space:nowrap}.award-rule{display:block;width:80px;height:3px;margin:10px auto 0;background:var(--yellow);transform:skewX(-25deg)}

.hud-bottom-left{position:absolute;left:29px;bottom:29px;width:300px}.vitals{filter:drop-shadow(0 2px 5px #122d2455)}.vital-numbers{display:flex;align-items:center;gap:17px;margin-bottom:7px}.health-label,.shield-label{display:flex;align-items:center;gap:6px}.health-label>.icon{width:16px;height:16px;color:#ffebc4}.shield-label>.icon{width:15px;height:15px;color:#74d9fa}.vital-numbers strong{font-size:23px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}.shield-label strong{font-size:17px;color:#a8eaff}.player-label{font-size:var(--fs-label);letter-spacing:1.6px;font-weight:900;margin-left:auto;color:#f9f5d5}.health-track{height:14px;padding:2px;background:#102d2acc;border:1px solid #f3ffdd45;border-radius:3px}.health-track>div{height:100%;background:linear-gradient(90deg,#96d672,#d3ee91);border-radius:1px;width:100%;transition:width .15s}.health-track>div.low{background:#ff7e66}.shield-track{height:7px;margin-top:4px;background:#112f37ba;border:1px solid #e1f5e526;border-radius:2px;overflow:hidden}.shield-track>div{width:0;height:100%;background:#78d9ff;transition:width .15s}.survival-tools{display:flex;align-items:center;gap:16px;margin-top:12px;color:#e2edda}.survival-tools>span{display:flex;align-items:center;gap:5px;font-size:var(--fs-label);font-weight:800;letter-spacing:.4px}.survival-tools .icon{width:14px;height:14px;color:#ddedac}.survival-tools strong{font-size:12px}.survival-tools kbd{padding:3px 4px;min-width:19px}.interaction-prompt{position:absolute;left:50%;bottom:26%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#0e2c2be8;border:1px solid #f5e7b945;box-shadow:0 4px 14px #0b202833;padding:10px 16px 10px 10px;border-radius:5px;font-size:var(--fs-text);font-weight:900;letter-spacing:1px}.interaction-prompt kbd{background:var(--cream);color:#17382c;border:0;box-shadow:0 2px 0 #c8b77f;min-width:25px;padding:5px 7px}.hud-bottom-right{position:absolute;right:28px;bottom:27px;width:356px}.ammo-readout{display:flex;align-items:baseline;justify-content:flex-end;gap:9px;margin-bottom:10px;filter:drop-shadow(0 2px 4px #15352777)}.ammo-readout>strong{font-size:40px;font-weight:900;line-height:1;letter-spacing:-1.5px;color:#fff6d6;font-variant-numeric:tabular-nums}.ammo-readout>.empty-ammo{color:#ffa17d}.ammo-readout.beam>strong:after,.ammo-readout.beam>#reserve-count:after{content:"s";margin-left:2px;font-size:17px;font-weight:800;letter-spacing:0;color:#dee6cc}.energy-bar{position:relative;height:8px;margin:-2px 0 10px;box-sizing:border-box;border:1px solid #dcebb340;border-radius:5px;background:var(--hud-chip);overflow:hidden;box-shadow:0 2px 4px #15352755}.energy-bar[hidden]{display:none}.energy-bar>i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,color-mix(in srgb,var(--weapon-color,#ff7fe0) 55%,#fff6d6),var(--weapon-color,#ff7fe0))}.energy-bar:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--cells,4) - 1.5px),#0a2427 calc(100% / var(--cells,4) - 1.5px) calc(100% / var(--cells,4)))}.energy-bar.low>i{background:#ffa17d}@media(prefers-reduced-motion:no-preference){.energy-bar.low>i{animation:energy-low .6s ease-in-out infinite alternate}@keyframes energy-low{to{opacity:.55}}}.ammo-divider{color:#e4e8cd8f;font-size:24px;font-weight:300}.ammo-readout>#reserve-count{font-size:17px;font-weight:700;color:#dee6cc}.ammo-readout>kbd{align-self:center;margin-left:5px}.reload-label{font-size:var(--fs-label);font-weight:900;letter-spacing:1px;color:var(--yellow-light);align-self:center;margin-right:7px}.weapon-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.weapon-slot{position:relative;display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:10px;padding:14px 11px 13px;background:#153631ce;border:1px solid #dcebb333;border-bottom:3px solid var(--weapon-color,#95c5b4);border-radius:4px;min-height:72px;opacity:.75}.weapon-slot.active{background:#f9f4d7;border:1px solid #fff9d4;border-bottom:3px solid var(--weapon-color,#ffdc63);color:#173b33;opacity:1;text-shadow:none;box-shadow:0 3px 9px #143b2922}.weapon-slot>kbd{position:absolute;left:5px;top:-10px;min-width:18px;padding:2px 4px;background:#17382f;color:var(--cream);border:1px solid #d1e8b76b;box-shadow:none}.weapon-drawing{display:flex;align-items:center;justify-content:center;width:41px}.weapon-drawing>.icon{width:38px;height:38px;transform:rotate(-12deg)}.weapon-name{flex:1 1 0;min-width:0}.weapon-meta{flex:1 0 100%;min-width:0;display:flex;flex-direction:column;gap:3px}.weapon-tag{font-size:var(--fs-label);font-weight:700;letter-spacing:.8px;line-height:1.15;text-transform:uppercase;color:#d7e2c6}.weapon-tag[hidden]{display:none}.tier-row{display:flex;align-items:center;gap:var(--sp-2);min-width:0}.tier-pips{display:inline-flex;gap:3px;flex:none}.tier-pips i{width:7px;height:7px;box-sizing:border-box;border-radius:50%;border:1px solid #d9e4c88c}.tier-pips i.on{background:var(--weapon-color,#d7ef7c);border-color:var(--weapon-color,#d7ef7c)}.weapon-slot.empty .tier-pips{display:none}.weapon-name{font-size:var(--fs-text);font-weight:900;text-transform:uppercase;line-height:1.1;letter-spacing:.2px}.weapon-rarity{font-size:var(--fs-label);font-weight:800;letter-spacing:1.15px;opacity:.8;color:color-mix(in srgb,var(--weapon-color,#d7ef7c) 40%,#fff6d6)}.weapon-slot.empty{opacity:.7;border-style:dashed;border-bottom-width:1px}.weapon-slot.empty .weapon-drawing{opacity:.45}.weapon-slot.empty .weapon-rarity{letter-spacing:.6px}.weapon-hint{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-label);font-weight:700;letter-spacing:.35px;margin-top:9px;color:#e0e9d0}.weapon-hint>span:first-child{max-width:230px}.weapon-hint>span:last-child{white-space:nowrap}.game-toast{position:absolute;left:50%;bottom:15%;transform:translate(-50%,8px);opacity:0;transition:opacity .2s,transform .2s;background:#0e302bd4;border-left:3px solid var(--yellow);padding:10px 17px;font-size:var(--fs-text);letter-spacing:.7px;font-weight:800;border-radius:3px;max-width:430px;text-align:center}.game-toast.visible{opacity:1;transform:translate(-50%,0)}.fps-counter{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font:var(--fs-label) monospace;color:#d7f4ce99}.crosshair{position:absolute;top:0;left:0;pointer-events:none;filter:drop-shadow(0 1px 2px #10281f);width:0;height:0}.crosshair.over-ui{opacity:0}.crosshair>i{position:absolute;width:2px;height:6px;background:#fff9cf;left:-1px;top:-12px;box-shadow:0 0 0 1px #10281fe6}.crosshair>i:nth-child(2){transform:rotate(90deg);left:8px;top:-3px}.crosshair>i:nth-child(3){top:6px}.crosshair>i:nth-child(4){transform:rotate(90deg);left:-10px;top:-3px}.crosshair>b{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--yellow-light);left:-1.5px;top:-1.5px;box-shadow:0 0 0 1px #10281fe6}body.aim-cursor #game-canvas{cursor:none}.damage-flash{position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 150px 35px #ff563987;pointer-events:none}.damage-flash.flash{animation:damage-flash .45s ease-out}.hit-marker{position:absolute;left:50%;top:50%;width:12px;height:12px;opacity:0;border:2px solid #fff6c8;transform:translate(-50%,-50%) rotate(45deg)}.hit-marker.hit{animation:hit .15s ease-out}

.scrim-screen{background:#0a272bcc;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;text-align:center}.pause-content>.eyebrow{justify-content:center;margin-bottom:20px}.display-title{font-family:var(--display);font-weight:400;font-size:100px;line-height:.91;letter-spacing:.5px;margin:0;color:var(--cream)}.pause-content>p:not(.eyebrow){color:#c6d6c2;font-size:16px;margin:20px 0 35px}.pause-content>.play-button{margin:auto;min-width:335px}.pause-links{display:flex;gap:22px;justify-content:center;margin-top:30px}.pause-links .text-button{font-size:var(--fs-label)}.pause-links .icon{width:16px;height:16px}.result-screen{display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 15%,#305d4de8,#092f29f2 80%);backdrop-filter:blur(6px)}.result-screen.victory{background:radial-gradient(ellipse at 50% 0%,#477d4ee0,#14392ff2 75%)}.result-sunburst{position:absolute;inset:-80%;background:repeating-conic-gradient(from 0deg,transparent 0deg 14deg,#c4df9c06 14deg 28deg);animation:sunburst 120s linear infinite;pointer-events:none}.result-content{position:relative;z-index:1;max-width:670px;width:90%;padding:25px 0}.result-emblem{display:inline-flex;color:var(--yellow);margin-bottom:20px}.result-emblem>.icon{width:50px;height:50px;stroke-width:1.4}.result-content>.eyebrow{justify-content:center;font-size:var(--fs-label);margin-bottom:18px}.result-content>.display-title{font-size:clamp(68px,6.7vw,110px);transform:skewY(-2deg);color:var(--yellow-light)}.result-content>#result-reason{font-size:13px;color:#d3e1c8;margin:22px 0 24px}.result-stats{display:flex;justify-content:center;gap:0;margin:0 auto;max-width:460px}.result-stats>div{flex:1 1 0;min-width:0;padding:0 var(--sp-2);border-right:1px solid #d2e0bc2b;display:flex;flex-direction:column;gap:8px}.result-stats>div:last-child{border-right:0}.result-stats strong{font-size:37px;line-height:1;font-weight:900;letter-spacing:-1px}.result-stats span{font-size:var(--fs-label);font-weight:900;letter-spacing:1.4px;color:#bcd0b5}.result-breakdown{font-size:var(--fs-text);color:#c3dac0;margin:18px 0 26px}.result-content>.play-button{margin:0 auto;min-width:325px}.result-settings{margin-top:23px;font-size:var(--fs-label)}.flawless-badge{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-label);font-weight:900;letter-spacing:1px;background:#f5e7ad15;border:1px solid #ffeb8e51;padding:9px 12px;color:var(--yellow-light);margin:-3px 0 20px;border-radius:4px}.flawless-badge>.icon{width:14px;height:14px}.error-screen{display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 30%,#24564a,#14352f);text-align:center;padding:25px}.error-icon{color:var(--yellow);margin-bottom:28px}.error-icon>.icon{width:70px;height:70px}.error-screen>.eyebrow{margin-bottom:15px}.error-screen>h2{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:48px;max-width:650px;margin:0 0 16px}.error-screen>#error-message{font-size:14px;line-height:1.7;max-width:530px;color:#cfddc7;margin:0 0 29px}.error-screen>.play-button{min-width:260px}.error-note{font-size:var(--fs-label);color:#adc8b1;margin:32px 0 0;max-width:450px;line-height:1.6}.no-script{position:fixed;inset:0;display:grid;place-items:center;padding:30px;background:#163c35;font-size:24px;text-align:center}

.modal-backdrop{position:absolute;inset:0;background:#062920c4;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,30px);padding-left:max(clamp(12px,3vw,30px),env(safe-area-inset-left));padding-right:max(clamp(12px,3vw,30px),env(safe-area-inset-right));z-index:20}
/* Every dialog is a flex column that never outgrows the window: header and footer keep their height, only the body scrolls, so the primary action is always on screen. */
.settings-panel,.controls-panel,.character-panel{display:flex;flex-direction:column;width:min(820px,100%);max-height:100%;background:#173d34;border:1px solid #d6e7bf24;border-radius:8px;box-shadow:0 25px 100px #00190e66;overflow:hidden}
.panel-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffda5973 transparent;background:linear-gradient(#173d34 30%,#173d3400) top/100% 28px no-repeat local,linear-gradient(#173d3400,#173d34 70%) bottom/100% 28px no-repeat local,radial-gradient(farthest-side at 50% 0,#00190e66,#00190e00) top/100% 12px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,#00190e66,#00190e00) bottom/100% 12px no-repeat scroll}
.panel-header{display:flex;flex:none;align-items:center;justify-content:space-between;padding:var(--sp-5) var(--gutter);border-bottom:1px solid #f7f1cb1a;gap:var(--sp-5)}.panel-header .eyebrow{font-size:var(--fs-label);letter-spacing:1.8px;margin-bottom:var(--sp-2)}.panel-header h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,1.6vw + 14px,34px);letter-spacing:.7px;margin:0;line-height:1}.panel-header>.icon-button{flex:none;background:transparent;width:36px;height:36px}.panel-header>.icon-button .icon{width:18px;height:18px}.settings-tabs{display:flex;flex:none;align-self:flex-start;gap:var(--sp-1);margin:var(--sp-4) var(--gutter) 0;padding:var(--sp-1);background:#0e3029;border-radius:8px;box-shadow:inset 0 1px 3px #00190e8c}.settings-tab{display:flex;flex:1 1 0;align-items:center;justify-content:center;gap:var(--sp-2);min-height:36px;padding:0 var(--sp-5);border-radius:5px;background:none;color:#b0c7ac;font-size:var(--fs-label);font-weight:800;letter-spacing:1.4px;transition:background .15s,color .15s}.settings-tab .icon{flex:none;width:16px;height:16px}.settings-tab:hover{color:var(--cream)}.settings-tab[aria-selected=true]{background:var(--yellow);color:#12362a;box-shadow:0 2px 0 #c49527}.settings-tab:focus-visible{outline-offset:2px}
.settings-panes{display:grid;align-content:start;padding:var(--sp-5) var(--gutter)}.settings-pane{grid-area:1/1;min-width:0}.settings-pane:not(.on){visibility:hidden}.pane-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) calc(var(--gutter) + 8px);align-items:start}.pane-column{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}.pane-wide,.pane-hero{grid-column:1/-1}.pane-wide{padding-top:var(--sp-4);border-top:1px solid #f7f1cb1a}.pane-hero{padding-bottom:var(--sp-4);border-bottom:1px solid #f7f1cb1a}.settings-pane :is(.slider-setting,.toggle-setting,.select-setting){margin:0}.slider-setting{display:block;margin:0 0 21px}.slider-setting>span{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-text);font-weight:600;margin-bottom:12px}.slider-setting output{color:#bed0b5;font-size:var(--fs-label);font-variant-numeric:tabular-nums}.slider-setting input{display:block;width:100%;height:24px;margin:0;appearance:none;background:none;cursor:pointer}.slider-setting input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--yellow) var(--range,70%),#e9f3d033 var(--range,70%))}.slider-setting input::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--yellow) var(--range,70%),#e9f3d033 var(--range,70%))}.slider-setting input::-webkit-slider-thumb{appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--cream);border:2px solid #173d34;box-shadow:0 0 0 1px #efedc980;transition:box-shadow .15s}.slider-setting input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--cream);border:2px solid #173d34;box-shadow:0 0 0 1px #efedc980}.slider-setting input:focus-visible{outline:0}.slider-setting input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #ffeb8fcc}.slider-setting input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px #ffeb8fcc}.difficulty-setting{--thumb:16px}.setting-aside{display:flex;align-items:baseline;gap:var(--sp-3)}.setting-note{font-size:var(--fs-label);font-style:normal;font-weight:600;color:#dcc774;transition:opacity .25s}.setting-note:empty{opacity:0}
.range-field{position:relative}.range-field input{position:relative}.range-ticks{position:absolute;inset:0 calc(var(--thumb) / 2);pointer-events:none}.range-ticks i{position:absolute;top:50%;width:2px;height:12px;margin:-6px 0 0 -1px;border-radius:1px;background:#e9f3d05c}
.difficulty-stops{display:grid;margin:var(--sp-1) calc(var(--thumb) / 2) 0;padding:0;list-style:none}.difficulty-stops li{text-align:center;font-size:var(--fs-label);font-weight:700;line-height:1.3;letter-spacing:.3px;color:#a8bfa8;transition:color .2s}.difficulty-stops li.on{color:var(--yellow-light)}
.difficulty-text{display:grid;margin:var(--sp-3) 0 0;font-size:var(--fs-text);line-height:1.5;color:#c8d9bd;text-wrap:pretty}.difficulty-text>span{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.difficulty-text>span.on{opacity:1;visibility:inherit}
.toggle-setting{display:flex;position:relative;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;cursor:pointer}.toggle-setting>span,.select-setting>span{font-size:var(--fs-text);font-weight:600;line-height:1.4}.toggle-setting small,.select-setting small{display:block;font-size:var(--fs-label);font-weight:400;color:#a8bfa8;margin-top:3px;line-height:1.5}.toggle-setting>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:2;cursor:pointer}.toggle-setting>i{display:block;width:32px;height:18px;background:#63816e66;border-radius:12px;flex:none;position:relative;transition:background .15s}.toggle-setting>i:after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#e4ebcd;transition:transform .15s}.toggle-setting>input:checked+i{background:#e2c766}.toggle-setting>input:checked+i:after{transform:translateX(14px);background:#183c31}.toggle-setting>input:focus-visible{outline:0}.toggle-setting>input:focus-visible+i{outline:3px solid var(--yellow-light);outline-offset:3px}.select-setting{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}.select-setting select{background:#0e3029;color:var(--cream);border:1px solid #c5dcb03b;border-radius:3px;padding:7px 8px;font-size:var(--fs-label);cursor:pointer}.panel-footer{flex:none;padding:var(--sp-4) var(--gutter);background:#10352c;border-top:1px solid #f7f1cb1a;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5)}.panel-footer>span{font-size:var(--fs-text);line-height:1.5;color:#b0c7ac;text-wrap:pretty}.small-button{display:flex;flex:none;align-items:center;justify-content:center;gap:var(--sp-4);min-height:var(--tap);color:#12362a;background:var(--yellow);padding:0 var(--sp-4) 0 var(--sp-5);border-radius:4px;box-shadow:0 3px 0 #c49527;font-size:var(--fs-text);font-weight:900;letter-spacing:1px;white-space:nowrap;transition:background .15s,transform .15s,box-shadow .15s}.small-button .icon{width:17px;height:17px}.small-button:hover{background:var(--yellow-light)}.small-button:active{transform:translateY(2px);box-shadow:0 1px 0 #c49527}.panel-footer kbd{margin:0 2px}.controls-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--sp-6);padding:var(--sp-5) var(--gutter) var(--sp-4)}.controls-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-right:1px solid #d4e9c21f;padding-right:30px}.wasd{display:flex;flex-direction:column;gap:5px;align-items:center;margin-bottom:22px}.wasd>div{display:flex;gap:5px}.wasd kbd{display:flex;align-items:center;justify-content:center;width:37px;height:37px;font-size:16px;font-weight:800;color:#173e32;background:#e9edc9;border:1px solid #fff5d8;box-shadow:0 3px 0 #94b492}.wasd>kbd{color:#173e32;background:var(--yellow);border-color:#ffefbd;box-shadow:0 3px 0 #ba9b42}.controls-hero>strong{font-size:var(--fs-label);font-weight:900;letter-spacing:1.5px;color:var(--yellow-light);margin-bottom:10px}.controls-hero>span{font-size:var(--fs-text);color:#c0d0b7;line-height:1.7}.control-list{margin:0;display:flex;flex-direction:column;gap:10px}.control-list>div{display:flex;align-items:center;gap:15px}.control-list dt{display:flex;justify-content:flex-end;gap:4px;min-width:72px}.control-list dd{font-size:var(--fs-text);color:#d4e0c6;margin:0}.control-list kbd{font-size:var(--fs-label);min-width:26px;padding:4px 7px;white-space:nowrap}kbd{display:inline-block;font:700 var(--fs-label) "Segoe UI",Arial,sans-serif;text-align:center;letter-spacing:.3px;line-height:1;background:#18382ed4;border:1px solid #e4ecc561;border-radius:3px;box-shadow:0 2px 0 #09291e8f;min-width:23px;padding:4px 6px;color:#f8f4d2}.how-to-win{display:flex;align-items:center;gap:15px;border-top:1px solid #e9edc71a;margin:0 var(--gutter);padding:var(--sp-4) 0 var(--sp-5)}.how-to-win>.icon{width:30px;height:30px;color:var(--yellow);flex:none}.how-to-win>p{font-size:var(--fs-text);line-height:1.65;color:#b9cfb1;margin:0;text-wrap:pretty}.how-to-win strong{color:#eaf0d0;font-size:var(--fs-label);letter-spacing:.6px}

@keyframes art-arrive{from{transform:scale(1.025);opacity:.6}to{transform:scale(1);opacity:1}}@keyframes content-arrive{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}@keyframes loading-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes feed-in{from{transform:translateX(-6px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes award-pop{0%{transform:translate(-50%,0) scale(.85)}65%{transform:translate(-50%,0) scale(1.04)}100%{transform:translate(-50%,0) scale(1)}}@keyframes damage-flash{0%{opacity:.8}100%{opacity:0}}@keyframes hit{0%{opacity:1;scale:1.3}100%{opacity:0;scale:.9}}@keyframes danger-pulse{0%,100%{border-color:#ff7370}50%{border-color:#ffdeac}}@keyframes sunburst{to{transform:rotate(360deg)}}

@media(min-width:1800px){.menu-content{left:7vw}.menu-header,.menu-footer{left:6vw}.menu-description{margin-bottom:30px}.match-tags{font-size:12px;margin-bottom:27px}.play-button{min-width:355px;padding:24px 28px;font-size:22px}.play-caption{font-size:12px;margin-top:28px}.eyebrow{font-size:13px;margin-bottom:32px}.menu-footer{bottom:35px}.footer-credit{font-size:12px}.desktop-note{font-size:12px}.menu-footer .text-button{font-size:12px}.wordmark{font-size:29px}.hud-top-right{width:220px}.hud-bottom-left{width:340px}.hud-bottom-right{width:390px}.weapon-slot{min-height:80px}.weapon-name{font-size:12px}.hud-top-left{top:30px;left:32px}.hud-top-right{top:28px;right:30px}.hud-bottom-left{left:35px;bottom:35px}.hud-bottom-right{right:35px;bottom:35px}}
@media(max-width:1100px){.menu-content{left:5vw;width:47vw;top:48%}.game-title{font-size:9vw;margin-bottom:25px}.menu-description{font-size:16px;margin-bottom:20px}.eyebrow{margin-bottom:22px}.match-tags{gap:8px;margin-bottom:20px}.play-button{min-width:275px;padding:18px 22px;font-size:17px}.play-caption{letter-spacing:1px}.island-label{display:none}.desktop-note{display:none}.menu-footer{bottom:24px}.hud-top-right{width:160px}.hud-top-left{left:18px;top:18px}.hud-top-right{right:18px;top:18px}.hud-bottom-left{width:250px;left:20px;bottom:22px}.hud-bottom-right{width:300px;right:20px;bottom:22px}.weapon-slot{gap:5px;padding:13px 7px 10px;min-height:64px}.weapon-drawing{width:30px}.weapon-drawing .icon{width:30px;height:30px}.weapon-rarity{letter-spacing:.8px}.weapon-hint>span:first-child{max-width:165px}.survival-tools{gap:9px}.storm-pill{top:18px}.drop-banner{min-width:500px;padding:20px 35px}.drop-banner>h2{font-size:32px}.settings-panel,.controls-panel{width:min(750px,100%)}}
@media(max-height:680px){.menu-header{top:22px}.menu-content{top:48%;transform:translateY(-43%)}.game-title{font-size:min(8.6vw,100px);margin-bottom:23px}.menu-description{font-size:15px;line-height:1.4;margin-bottom:17px}.menu-content>.eyebrow{margin-bottom:17px}.match-tags{margin-bottom:17px}.play-button{padding:16px 22px;font-size:17px;min-width:280px}.play-caption{margin-top:19px}.menu-footer{bottom:16px}.island-label{display:none}.hud-top-right{width:145px}.hud-brand{font-size:14px}.hud-brand .icon{width:19px;height:19px}.score-cluster{margin-top:10px}.score-item{height:35px}.score-item strong{font-size:19px}.score-item .icon{width:15px;height:15px}.kill-feed{margin-top:10px}.feed-line{padding:4px 6px}.hud-bottom-left{bottom:16px}.hud-bottom-right{bottom:16px}.drop-banner{top:25%;padding:17px 35px}.drop-banner>h2{font-size:29px}.drop-banner>p{font-size:11px}.drop-countdown{margin-top:10px}.award-banner{top:21%}.pause-content>.display-title{font-size:80px}.pause-content>p:not(.eyebrow){margin:14px 0 25px}.pause-links{margin-top:22px}.result-content{padding:15px 0}.result-emblem{margin-bottom:12px}.result-emblem .icon{width:36px;height:36px}.result-content>.display-title{font-size:72px}.result-content>.eyebrow{margin-bottom:12px}.result-content>#result-reason{margin:15px 0 17px}.result-stats strong{font-size:29px}.result-breakdown{margin:14px 0 20px}.result-settings{margin-top:15px}.panel-header{padding-block:var(--sp-4)}.panel-header h2{font-size:29px}.settings-tabs{margin-top:var(--sp-3)}.settings-panes{padding-block:var(--sp-4)}.pane-columns{row-gap:var(--sp-4)}.pane-column{gap:var(--sp-4)}.panel-footer{padding-block:var(--sp-3)}.controls-grid{padding-block:var(--sp-4) var(--sp-3)}.control-list{gap:8px}.how-to-win{padding-block:var(--sp-3) var(--sp-4)}.loading-screen h2{font-size:38px}}
@media(max-width:700px){.menu-art{background-position:64% center}.menu-shade{background:linear-gradient(90deg,#032e2ad9,#062d2a77 55%,#062d2a11),linear-gradient(0deg,#072e29e6,#072e29b3 34%,#072e2900 72%)}.menu-header{left:max(6vw,env(safe-area-inset-left));right:max(6vw,env(safe-area-inset-right));top:max(25px,calc(env(safe-area-inset-top) + 8px))}.wordmark{font-size:22px}.wordmark>.icon{width:26px;height:26px}.icon-button{width:38px;height:38px}.menu-content{width:85%;left:7vw;top:47%;transform:translateY(-40%)}.game-title{font-size:clamp(76px,15vw,104px);margin-bottom:25px}.menu-description{font-size:16px}.menu-content>.eyebrow{letter-spacing:1.7px}.menu-footer{left:7vw;right:7vw;align-items:flex-end}.footer-credit{max-width:150px;line-height:1.6;text-align:right}.footer-credit span{display:block}.play-button{width:min(100%,310px);min-width:0}.pane-columns{grid-template-columns:1fr;gap:var(--sp-4)}.pane-column{gap:var(--sp-4)}.settings-tabs{align-self:stretch}.settings-tab{padding:0 var(--sp-2);letter-spacing:1px}.panel-header .eyebrow{letter-spacing:1.2px}.panel-footer>span{max-width:200px}.controls-grid{grid-template-columns:1fr;gap:20px}.controls-hero{border-right:0;border-bottom:1px solid #d4e9c21f;padding:0 0 20px}.controls-hero .wasd{margin-bottom:15px}.control-list{max-width:320px;margin:auto;width:100%}.how-to-win{gap:10px}.how-to-win>.icon{width:25px}.hud-top-right{width:110px;top:14px;right:12px}.hud-top-left{left:12px;top:14px}.score-item{height:32px;padding:0 8px;gap:5px}.score-item span{display:none}.score-item strong{font-size:18px}.score-item .icon{width:15px;height:15px}.hud-brand{font-size:13px}.hud-brand .icon{width:17px;height:17px}.storm-pill{top:14px;min-width:117px;padding:7px 9px;gap:7px}.storm-pill>.icon{width:20px;height:20px}.storm-pill span{letter-spacing:.6px}.storm-pill strong{font-size:18px}.map-caption>span{display:none}.map-caption{justify-content:flex-end}.map-location{letter-spacing:.5px;padding:5px}.hud-bottom-left{left:12px;bottom:16px;width:180px}.hud-bottom-right{right:12px;bottom:16px;width:210px}.vital-numbers{gap:10px}.vital-numbers strong{font-size:18px}.shield-label strong{font-size:14px}.player-label{letter-spacing:.5px}.survival-tools{gap:7px}.survival-tools>span:nth-child(n+2){display:none}.weapon-slot{padding:12px 6px 8px;min-height:53px;gap:3px}.weapon-drawing{display:none}.weapon-hint{display:none}.ammo-readout{gap:6px;margin-bottom:8px}.ammo-readout>strong{font-size:29px}.ammo-readout>#reserve-count{font-size:13px}.drop-banner{min-width:0;width:100%;padding:20px;top:30%}.drop-banner>h2{font-size:26px}.interaction-prompt{bottom:30%;white-space:nowrap}.award-banner>strong{font-size:32px}.award-kicker{letter-spacing:1.5px}.kill-feed{max-width:200px}.feed-line{gap:4px;padding:3px 5px}.game-toast{bottom:26%;min-width:240px}.result-content>.display-title{font-size:66px}.result-stats strong{font-size:29px}.result-stats span{letter-spacing:.6px}.result-stats>div{flex:1 1 auto;padding:0 var(--sp-1)}.result-content>.play-button{min-width:0;width:min(100%,310px)}.pause-content>.display-title{font-size:76px}.pause-content>.play-button{min-width:0;width:min(100%,310px)}.pause-links{gap:15px}.error-screen>h2{font-size:37px}.error-screen>#error-message{font-size:12px}}
/* A phone has no mouse to stand in for, so no crosshair; wherever the crosshair is not drawn, the arrow is not hidden either. */
@media(max-width:700px) and (pointer:coarse){.crosshair{display:none}body.aim-cursor #game-canvas{cursor:auto}}
/* HUD text sits straight on the world, so the top and bottom edges carry a soft wash of the panel green: it holds labels and numerals above 4.5:1 over sand and lawn alike without boxing anything in. */
.hud{isolation:isolate}.hud:before,.hud:after{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none}.hud:before{bottom:0;height:min(220px,32vh);background:linear-gradient(0deg,rgba(9,38,32,.68),rgba(9,38,32,.3) 58%,transparent)}.hud:after{top:0;height:min(150px,22vh);background:linear-gradient(180deg,rgba(9,38,32,.55),rgba(9,38,32,.2) 62%,transparent)}
/* Fullscreen button in the corner of the pause screen, the line that tells a mouse player how to resume, and the prompt shown when the browser has not locked the mouse (one click does it). */
.screen-corner{position:absolute;top:max(var(--sp-4),env(safe-area-inset-top));right:max(var(--sp-4),env(safe-area-inset-right))}
.pause-content>p.resume-hint{margin:var(--sp-4) 0 0;font-size:var(--fs-text);line-height:1.5;color:#b0c7ac}.resume-hint kbd{margin:0 2px}
.lock-prompt{position:absolute;left:50%;bottom:max(var(--sp-4),env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);background:var(--hud-chip);border:1px solid #ffffff2b;border-radius:999px;color:var(--cream);font-size:var(--fs-text);font-weight:700;letter-spacing:.2px;white-space:nowrap;pointer-events:none}.lock-prompt .icon{flex:none;width:16px;height:16px;color:var(--yellow-light)}
@media(max-width:700px){.lock-prompt{bottom:auto;top:64px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.play-button:hover,.play-button:active,.icon-button:hover,.small-button:active,.character-chip:hover,.character-chip:active{transform:none}}

/* Independent sticks and action buttons remain usable with multiple fingers. */
.touch-controls{--touch-btn:56px;position:fixed;inset:0;z-index:5;pointer-events:none;touch-action:none}
.touch-controls[hidden]{display:none}.touch-stick,.touch-actions button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
.touch-stick{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));width:124px;height:124px;border:2px solid #e4f9d878;border-radius:50%;background:#103e3cb8;box-shadow:0 5px 18px #09241f55;display:grid;place-items:center}
.move-stick{left:max(15px,env(safe-area-inset-left))}.aim-stick{right:max(15px,env(safe-area-inset-right));background:#643c24a8;border-color:#ffeaa078}
.touch-stick span{position:absolute;bottom:12px;font-size:var(--fs-label);font-weight:900;letter-spacing:1px;color:#fff8d5}.touch-stick i{display:block;width:46px;height:46px;border-radius:50%;background:#e2f4d6b0;border:2px solid #fff8;box-shadow:0 2px 8px #0004;pointer-events:none}
.touch-actions{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,var(--touch-btn));gap:var(--sp-3);pointer-events:none}
.touch-actions button{height:var(--touch-btn);border-radius:50%;padding:0 var(--sp-1);background:#174d43ed;border:1px solid #d9f5b576;color:#fff6d8;font-size:var(--fs-label);font-weight:900;line-height:1.2;letter-spacing:.2px;box-shadow:0 3px 9px #0004}
.touch-actions button:active{background:#f4d75e;color:#123a30}.touch-playing .hud-bottom-left,.touch-playing .hud-bottom-right{bottom:158px}.touch-playing .survival-tools,.touch-playing .weapon-hint{display:none}.touch-playing #game-canvas{touch-action:none}.touch-playing .interaction-prompt{bottom:40%}
@media(max-width:460px){.touch-stick{width:96px;height:96px}.touch-stick i{width:36px;height:36px}.touch-stick span{bottom:8px}.touch-actions{bottom:max(12px,env(safe-area-inset-bottom))}.touch-playing .hud-bottom-left,.touch-playing .hud-bottom-right{bottom:132px}.touch-playing .hud-bottom-left{width:140px}.touch-playing .hud-bottom-right{width:160px}.touch-playing .weapon-slot{min-height:43px;padding:6px 4px}.touch-playing .interaction-prompt{bottom:42%}}

/* Compact touch HUD: keep the playfield clear and the essential actions reachable. */
.touch-playing .hud-brand,.touch-playing .kill-feed,.touch-playing .player-label,.touch-playing .hud kbd,.touch-playing .weapon-rarity,.touch-playing .weapon-tag,.touch-playing .map-caption>span,.touch-playing .map-location{display:none}
.touch-playing .touch-actions{bottom:max(22px,env(safe-area-inset-bottom))}
.touch-playing .touch-actions button{background:#173e36d9;box-shadow:0 2px 8px #0a242766}
.touch-playing .touch-stick{background:#123d3755;border-color:#efffd84d;box-shadow:none}
.touch-playing .hud-bottom-left,.touch-playing .hud-bottom-right{bottom:130px}
.touch-playing .hud-bottom-left{width:32%;max-width:180px}
.touch-playing .hud-bottom-right{width:47%;max-width:240px}
.touch-playing .weapon-slot{min-height:35px;padding:6px}.touch-playing .ammo-readout>strong{font-size:25px}.touch-playing .ammo-readout.beam>strong:after,.touch-playing .ammo-readout.beam>#reserve-count:after{font-size:13px}.touch-playing .energy-bar{height:6px;margin:0 0 5px}.touch-playing .weapon-slot{row-gap:3px}.touch-playing .weapon-name{display:flex;align-items:center;min-height:2.2em;font-size:var(--fs-label);letter-spacing:0}.touch-playing .weapon-meta{gap:0}.touch-playing .tier-pips{gap:2px}.touch-playing .tier-pips i{width:5px;height:5px}
.touch-playing .interaction-prompt{display:none}.touch-playing .score-cluster{margin-top:0}
.touch-playing .hud-top-left{top:max(14px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left))}.touch-playing .hud-top-right{top:max(14px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}.touch-playing .storm-pill{top:max(14px,env(safe-area-inset-top))}.touch-playing .hud:before{height:min(300px,40vh)}
.touch-playing .hud-top-right{width:86px}.touch-playing .pause-button{justify-content:center;padding:0;border-radius:50%;background:var(--hud-chip);border:1px solid #ffffff2b}.touch-playing .pause-button>.icon{width:18px;height:18px}
@media(max-height:500px){.touch-playing .hud-bottom-left,.touch-playing .hud-bottom-right{bottom:110px}.touch-playing .touch-stick{width:90px;height:90px}.touch-playing .hud-top-right{width:72px}}

/* Storm cues. The last two circles name the place they close on, in the storm pill. The compass is a chip that orbits the player (who is at the
   middle of the screen) towards the safe zone: calm and urgent while the circle is coming, red once the player is in the storm. */
.storm-pill small{display:block;margin-top:2px;max-width:23ch;font-size:var(--fs-label);font-weight:900;line-height:1.25;letter-spacing:.7px;color:#ffe27a;text-wrap:balance}
.storm-pill small[hidden]{display:none}
.storm-compass{position:absolute;left:50%;top:50%;z-index:1;display:flex;align-items:center;gap:var(--sp-2);padding:5px var(--sp-3) 5px 5px;border:1px solid #e2b1ff88;border-radius:999px;background:var(--hud-chip);color:var(--cream);white-space:nowrap;pointer-events:none;text-shadow:0 1px 3px #0b241d;transition:transform .12s linear}
.storm-compass[hidden]{display:none}
.compass-arrow{flex:none;box-sizing:border-box;width:32px;height:32px;padding:6px;border-radius:50%;background:#e2b1ff;color:#2b1741;transition:transform .12s linear}
.storm-compass>span{display:flex;flex-direction:column;gap:1px;line-height:1.1}
.storm-compass strong{font-size:var(--fs-name);font-weight:900;font-variant-numeric:tabular-nums}
.storm-compass small{font-size:var(--fs-label);font-weight:800;letter-spacing:.9px;color:#dccdf2}
.storm-compass[data-level="urgent"]{border-color:#ffe27a;box-shadow:0 0 0 2px #ffe27a40}
.storm-compass[data-level="urgent"] .compass-arrow{background:#ffe27a;color:#3a2a08}
.storm-compass[data-level="danger"]{border-color:#ff7370;background:#642e43f0}
.storm-compass[data-level="danger"] .compass-arrow{background:#ff8f86;color:#4a1217}
@media(prefers-reduced-motion:no-preference){.storm-compass[data-level="danger"]{animation:danger-pulse 1s infinite}}
@media(prefers-reduced-motion:reduce){.storm-compass,.compass-arrow{transition:none}}

/* Landscape phones and other very short windows: the dialogs hand every spare pixel to their body. The panel turns into a grid where the title
   and the one primary button (which also closes the dialog, so the header's close icon goes) share a single slim bar above the scrolling body. */
@media(max-height:500px){
 .modal-backdrop{padding-block:var(--sp-2)}
 .settings-panel,.controls-panel,.character-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr)}
 .panel-header{grid-area:1/1;padding-block:var(--sp-2);border-bottom:0}
 .panel-header .eyebrow,.panel-header>.icon-button,.panel-footer>span{display:none}
 .panel-header h2{font-size:24px}
 .panel-footer{grid-area:1/2;padding:var(--sp-2) var(--gutter) var(--sp-2) 0;background:none;border-top:0}
 .panel-scroll{grid-area:2/1/3/3;border-top:1px solid #f7f1cb1a}
 .settings-panel{grid-template-columns:auto minmax(0,1fr) auto}
 .settings-tabs{grid-area:1/2;align-self:center;justify-self:center;margin:0}
 .settings-tab{gap:6px;padding:0 var(--sp-2);letter-spacing:1px}
 .settings-panel .panel-footer{grid-area:1/3}
 .settings-panel .panel-scroll{grid-area:2/1/3/4}
}
/* From 600 px wide the settings keep two columns of single-line rows (label, slider, value) and the key list runs in two columns, so nothing needs scrolling. */
@media(max-height:500px) and (min-width:600px){
 .settings-panes{padding:var(--sp-3) var(--gutter)}
 .pane-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-1) var(--gutter)}
 .pane-column{gap:var(--sp-1)}
 .pane-wide{padding-top:var(--sp-1)}
 .pane-hero{padding-bottom:var(--sp-2)}
 .slider-setting{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr) 3em;align-items:center;column-gap:var(--sp-3);margin:0;min-height:var(--tap)}
 .slider-setting>span{display:contents}
 .slider-setting input{order:1}
 .slider-setting output{order:2;text-align:right}
 .toggle-setting,.select-setting{margin:0;min-height:var(--tap)}
 .toggle-setting small,.select-setting small{margin-top:1px;line-height:1.3}
 .difficulty-setting{display:block;min-height:0}
 .difficulty-setting>span{display:flex;margin-bottom:0}
 .difficulty-setting input{order:0}
 .difficulty-setting output{order:0}
 .difficulty-text{margin-top:var(--sp-2)}
 .controls-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr);gap:var(--sp-4);padding:var(--sp-2) var(--gutter);align-items:start}
 .controls-hero{border-right:1px solid #d4e9c21f;border-bottom:0;padding:0 var(--sp-4) 0 0}
 .controls-hero .wasd{display:none}
 .controls-hero>strong{margin-bottom:var(--sp-1)}
 .controls-hero>span{line-height:1.4}
 .control-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1) var(--sp-5);max-width:none;margin:0}
 .control-list>div{min-width:0;gap:var(--sp-2)}
 .control-list dt{min-width:56px}
 .how-to-win{padding-block:var(--sp-2)}
 .how-to-win>p{line-height:1.5}
}

/* Coarse pointers: one step up in type and a 44 px floor under every control. min-* beats the fixed sizes set earlier in the cascade. */
@media(pointer:coarse){
 :root{--fs-label:12px;--fs-text:13px;--fs-name:14px}
 .icon-button,.text-button,.small-button,.wordmark,.pause-button{min-width:var(--tap);min-height:var(--tap)}
 .select-setting select{min-height:var(--tap);padding-inline:var(--sp-3)}
 .toggle-setting{min-height:var(--tap)}
 .slider-setting input{height:var(--tap)}
 .slider-setting input::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}
 .slider-setting input::-moz-range-thumb{width:20px;height:20px}
 .difficulty-setting{--thumb:24px}
 .fine-only{display:none}
 .settings-pane .fullscreen-setting{grid-column:1/-1}
 .settings-tab{min-height:var(--tap)}
}