:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:#050807}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050807;color:#fff}body{display:grid;place-items:center}button{font:inherit}#game-shell{position:relative;width:min(100vw,177.777vh);height:min(100vh,56.25vw);min-height:360px;background:#0a0f0c;overflow:hidden;box-shadow:0 0 80px #000}canvas{width:100%;height:100%;display:block;outline:0;cursor:crosshair;touch-action:none}#hud{position:absolute;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:28px;padding:22px 26px;pointer-events:none;text-shadow:0 2px 12px #000}.brand{font-size:13px;font-weight:900;letter-spacing:.12em}.brand span{color:#a6ff63}.bar{width:250px;height:10px;margin-top:8px;border:1px solid #ffffff55;background:#0009;transform:skewX(-12deg)}.bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#63ff89,#c6ff55);box-shadow:0 0 18px #7dff65}.sub{width:250px;display:flex;justify-content:space-between;font-size:11px;color:#c9d1ca;margin-top:4px}.hud-center{text-align:center}.wave{font-size:12px;letter-spacing:.25em}.wave b{display:block;font-size:32px;line-height:1;color:#fff}.remaining{margin-top:5px;font-size:10px;letter-spacing:.18em;color:#b4beb6}.hud-right{text-align:right}.weapon{font-size:12px;font-weight:900;letter-spacing:.13em;color:#b9ff82}.ammo{font-size:13px}.ammo b{font-size:38px;line-height:1}.ammo span{margin:0 5px;color:#6d746f}.ammo em{font-style:normal;color:#c2cbc4}.score{font-size:10px;letter-spacing:.16em;color:#b4beb6}.score b{color:#fff;font-size:14px}#crosshair{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 3px #000)}#crosshair i{position:absolute;background:#d8ffd1}#crosshair i:nth-child(1){width:8px;height:1px;left:0;top:12px}#crosshair i:nth-child(2){width:8px;height:1px;right:0;top:12px}#crosshair i:nth-child(3){height:8px;width:1px;top:0;left:12px}#crosshair i:nth-child(4){height:8px;width:1px;bottom:0;left:12px}#message{position:absolute;left:50%;top:18%;transform:translateX(-50%);font-weight:900;letter-spacing:.16em;font-size:15px;text-shadow:0 2px 10px #000;opacity:0;transition:opacity .2s;pointer-events:none}#message.show{opacity:1}#bossbar{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:min(560px,72%);text-align:center;font-size:11px;font-weight:900;letter-spacing:.18em;text-shadow:0 2px 8px #000}#bossbar div{height:9px;margin-top:7px;border:1px solid #ffffff55;background:#000a}#bossfill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3d4d,#ff8d3d)}.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,86%);padding:46px 52px;background:linear-gradient(145deg,#07110dec,#111a15f2);border:1px solid #baff8750;box-shadow:0 28px 90px #000b, inset 0 0 60px #70ff2210;backdrop-filter:blur(12px)}.panel:before{content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:#a2ff63}.eyebrow{margin:0 0 12px;color:#a5ff68;font-weight:900;font-size:11px;letter-spacing:.28em}.panel h1{margin:0;text-transform:uppercase;font-size:clamp(44px,6vw,78px);line-height:.84;letter-spacing:-.06em}.panel h1 span{color:#a9ff68}.panel h2{font-size:38px;margin:0 0 18px}.lead{max-width:610px;color:#c5cec7;line-height:1.55}.features{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.features span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;padding:8px 10px;background:#ffffff0d;border:1px solid #ffffff16}.panel button{border:0;padding:14px 20px;background:#a8ff68;color:#071006;font-weight:950;letter-spacing:.08em;cursor:pointer}.panel button:hover{filter:brightness(1.1)}.panel .secondary{background:#ffffff0b;color:#fff;border:1px solid #ffffff2c;margin-left:8px}.controls{font-size:11px;color:#88938b;margin:16px 0 0}.small{width:min(430px,86%);text-align:center}.upgrade{width:min(900px,92%)}#upgrade-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}#upgrade-cards button{text-align:left;min-height:130px;background:#0f1a13;border:1px solid #ffffff20;color:#fff}#upgrade-cards button:hover{border-color:#a8ff68;background:#15251a}#upgrade-cards b{display:block;color:#a8ff68;margin-bottom:8px;font-size:15px}#upgrade-cards span{font-size:12px;color:#c1c9c3;line-height:1.4}#touch{position:absolute;inset:0;pointer-events:none}.pad{position:absolute;bottom:30px;width:122px;height:122px;border:1px solid #ffffff25;border-radius:50%;background:#0005;pointer-events:auto;touch-action:none}.pad i{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;background:#ffffff1a;border:1px solid #ffffff2c;transform:translate(-50%,-50%)}#move-pad{left:30px}#aim-pad{right:30px}#touch button{position:absolute;bottom:166px;width:48px;height:48px;border-radius:50%;border:1px solid #ffffff30;background:#0008;color:#fff;font-weight:900;pointer-events:auto}#reload-btn{right:35px}#swap-btn{right:92px}@media (pointer:coarse),(max-width:800px){#touch{display:block!important}.controls{display:none}#crosshair{display:none}#hud{padding:12px;gap:8px}.brand{display:none}.bar,.sub{width:150px}.wave b{font-size:24px}.ammo b{font-size:28px}.panel{padding:28px}.panel h1{font-size:48px}#upgrade-cards{grid-template-columns:1fr}.upgrade{max-height:90%;overflow:auto}}
#combo{display:inline-block;margin-left:8px;padding:2px 6px;border:1px solid #a8ff6866;color:#a8ff68;background:#07100688;font-size:11px;transform:skewX(-8deg)}.build{margin:10px 0 0;color:#607067;font-size:9px;letter-spacing:.14em}.panel[hidden],#bossbar[hidden],#touch[hidden]{display:none!important}#pause-btn{right:149px}#game-shell:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 44%,#02040344 78%,#000b 100%);mix-blend-mode:multiply}.damage-flash{animation:damageFlash .18s linear}@keyframes damageFlash{0%{box-shadow:inset 0 0 0 9999px #ff223318}100%{box-shadow:inset 0 0 0 9999px transparent}}
@media (max-width:800px){#pause-btn{display:block;right:149px}.score{font-size:9px}.score b{font-size:12px}.hud-right{min-width:100px}.panel h2{font-size:30px}}

.district{margin-top:5px;font-size:9px;letter-spacing:.24em;color:#a7b3aa}.hud-center{min-width:120px}#dash-btn{right:206px;background:#15341ccc!important;border-color:#a8ff6866!important;color:#baff8f!important}.elite-legend{color:#ffe66c}@media (max-width:800px){#dash-btn{right:206px}.district{font-size:8px}}

.loadouts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.loadouts .loadout{min-height:76px;padding:12px;text-align:left;background:#0b1510;color:#fff;border:1px solid #ffffff1f}.loadouts .loadout b{display:block;color:#d7e0d9;font-size:12px}.loadouts .loadout span{display:block;margin-top:5px;color:#89958c;font-size:9px;line-height:1.35}.loadouts .loadout.active{border-color:#a8ff68;background:#14241a;box-shadow:inset 0 0 24px #8aff3410}.loadouts .loadout.active b{color:#a8ff68}@media(max-width:800px){.loadouts{grid-template-columns:1fr;gap:5px}.loadouts .loadout{min-height:52px}.features{display:none}}

/* v1.0 release UI */
.career{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 16px}.career span{padding:8px 10px;background:#050a0780;border:1px solid #ffffff18;color:#8e9b92;font-size:9px;letter-spacing:.12em}.career b{color:#eaffdc;font-size:11px}.menu-actions{display:flex;gap:8px;flex-wrap:wrap}.menu-actions .secondary,.panel .secondary{margin-left:0}.reward{color:#a8ff68;font-size:12px}.settings{width:min(560px,90%)}.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 20px}.setting-grid label{display:flex;flex-direction:column;gap:7px;padding:12px;background:#07100b;border:1px solid #ffffff18;color:#a8b3aa;font-size:10px;letter-spacing:.09em;text-transform:uppercase}.setting-grid select{width:100%;padding:10px;background:#111a15;color:#fff;border:1px solid #ffffff28}.setting-grid .check{flex-direction:row;align-items:center;text-transform:none;font-size:12px;letter-spacing:0}.setting-grid input{accent-color:#a8ff68}.settings-note{font-size:10px;color:#748078;line-height:1.5}.settings button{margin-top:6px}#ad-hooks{display:none!important}@media(max-width:800px){.career{margin:8px 0}.career span{padding:5px 7px}.menu-actions{gap:5px}.menu-actions button{padding:11px 13px}.setting-grid{grid-template-columns:1fr;gap:6px}.settings{max-height:92%;overflow:auto}}

/* v1.1 cinematic concept-art integration */
#game-shell:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,5,8,.92),rgba(4,7,8,.42) 48%,rgba(2,5,8,.72)),url("menu-concept.png") center/cover no-repeat;opacity:.34;pointer-events:none;z-index:0}
#game-shell canvas,#hud,#crosshair,#message,#bossbar,#touch,.panel{z-index:2}.cinematic-menu{width:min(1040px,94%);max-height:94%;overflow:auto;background:linear-gradient(100deg,rgba(5,10,13,.97),rgba(8,14,16,.89));border-color:#ff4a3348}.cinematic-menu:before{background:#e33227}.cinematic-menu .eyebrow,.cinematic-menu h1 span{color:#ff5143}.concept-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:-20px 0 18px}.concept-strip img{width:100%;height:138px;object-fit:cover;object-position:center;border:1px solid #ffffff25;box-shadow:0 8px 25px #0008}.cinematic-menu .loadout.active{border-color:#e43c2f;box-shadow:inset 0 0 20px #e43c2f20}.cinematic-menu #start{background:linear-gradient(#ff4d3b,#b81612);color:white;text-shadow:0 1px 2px #000}.district{color:#ffb29d;font-weight:900;letter-spacing:.18em}.cinematic-menu .features span{background:#170d0d99;border-color:#ff6b5b25}@media(max-width:800px){.concept-strip{grid-template-columns:1fr}.concept-strip img{height:95px}.cinematic-menu{padding:24px 24px}.cinematic-menu h1{font-size:40px}}

/* v1.2 final live-game cinematic pass */
#hud{background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 86%)}
.bar i{background:linear-gradient(90deg,#b72520,#ff5a43);box-shadow:0 0 18px #ff3c32}.weapon{color:#ffb09b}.brand span{color:#ff5948}.wave b{color:#ffede8}.eyebrow{color:#ff5948}.panel:before{background:#d52c24}.panel button{background:linear-gradient(#ff543f,#b71916);color:#fff}.loadouts .loadout.active b{color:#ff705d}.loadouts .loadout.active{border-color:#dd3d31;background:#251414}.reward{color:#ff7562}.setting-grid input{accent-color:#e83d31}#combo{border-color:#ff5e4d66;color:#ff846f;background:#1b090988}
#crosshair{filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 3px #ff5f4c)}#crosshair i{background:#ffe3dc}
#bossfill{background:linear-gradient(90deg,#7e0c0c,#ff4b34,#ff9a45);box-shadow:0 0 16px #ff3b2d88}
#message{color:#fff1ec;text-shadow:0 2px 12px #000,0 0 15px #d93225aa}

/* v2.0 true WebGL 3D renderer. The transparent 2D canvas remains the input/simulation surface. */
#game3d{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;background:#050807}
#game{position:absolute;inset:0;z-index:1;opacity:0;background:transparent}
.no-webgl #game{opacity:1}.no-webgl #game3d{display:none}
#hud,#crosshair,#message,#bossbar,#touch,.panel{z-index:3}
#game-shell:before{z-index:2}
#game-shell:has(#menu[hidden])::before{opacity:.08}