@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root { --ink:#e9edf2; --muted:#8b95a3; --orange:#ff6b2c; --acid:#d8ff3e; --panel:#0c1018; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#05070b; color:var(--ink); font-family:"Noto Sans SC",sans-serif; overflow:hidden; }
body { background-image:radial-gradient(circle at 50% 25%,#17202c 0,#090d14 35%,#040508 75%); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
button { font:inherit; }
.game-shell { width:min(1180px,100vw); height:100vh; min-height:540px; margin:auto; display:grid; grid-template-rows:64px 1fr 42px; padding:0 24px; position:relative; }
.topbar, footer { display:flex; align-items:center; justify-content:space-between; text-transform:uppercase; letter-spacing:.12em; font:600 12px "Barlow Condensed",sans-serif; color:var(--muted); }
.brand { display:flex; align-items:center; gap:14px; color:#cfd5dd; }
.brand-mark { font-weight:800; font-size:18px; color:var(--acid); letter-spacing:-.04em; border:1px solid #3e4631; padding:5px 8px; }
.status { display:flex; align-items:center; gap:9px; }.status-dot { width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 14px var(--acid); }
.game-frame { position:relative; min-height:0; overflow:hidden; border:1px solid #29303b; background:#05070a; cursor:crosshair; box-shadow:0 24px 70px #0008, inset 0 0 0 1px #ffffff08; user-select:none; touch-action:none; }
.game-frame::before { content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0,#0000 3px,#0003 4px);mix-blend-mode:multiply; }
.game-frame::after { content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 110px #000, inset 0 0 2px 2px #000; }
canvas { display:block; width:100%; height:100%; }
.hud { position:absolute; z-index:5; pointer-events:none; }
.hud-top { left:22px;right:22px;top:18px;display:flex;gap:8px; }
.hud-block { min-width:86px;padding:8px 12px 9px;border-left:2px solid var(--orange);background:linear-gradient(90deg,#07090ed9,#080a0da8);transform:skew(-5deg); }
.hud-block.score { min-width:132px; }.hud-block>* { display:block;transform:skew(5deg); }
.hud small,.meter-label { color:#7f8997;text-transform:uppercase;letter-spacing:.15em;font:600 10px "Barlow Condensed",sans-serif; }
.hud strong { font:700 24px "Barlow Condensed",sans-serif; letter-spacing:.06em; }
.hud-bottom { left:24px;right:24px;bottom:20px;display:flex;align-items:flex-end;justify-content:space-between; }
.health-panel { width:210px; }.meter-label { display:flex;justify-content:space-between;margin-bottom:7px; }.meter-label b { color:var(--ink);font-size:14px; }.meter { height:7px;background:#26303a;clip-path:polygon(0 0,100% 0,97% 100%,0 100%); }.meter i { display:block;width:100%;height:100%;background:var(--acid);box-shadow:0 0 16px #d8ff3e88;transition:width .25s,background .25s; }
.ammo-panel { display:flex;align-items:baseline;gap:6px;background:#07090dcc;padding:8px 10px 8px 14px;border-right:2px solid var(--orange); }.ammo-panel .ammo-icon {color:var(--orange);font-size:15px;}.ammo-panel strong{font-size:34px;line-height:1}.ammo-panel small{font-size:13px}.ammo-panel button{pointer-events:auto;margin-left:9px;border:1px solid #3a424d;background:#151a22;color:#aeb6c2;padding:6px 9px;font:600 10px "Barlow Condensed";letter-spacing:.08em;cursor:pointer;}
.crosshair { position:absolute;z-index:6;width:56px;height:56px;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;transition:width .05s,height .05s;filter:drop-shadow(0 0 4px #000); }
.crosshair i {position:absolute;background:#e9edf2;}.crosshair i:nth-child(1){width:15px;height:1px;left:0;top:50%}.crosshair i:nth-child(2){width:15px;height:1px;right:0;top:50%}.crosshair i:nth-child(3){width:1px;height:15px;left:50%;top:0}.crosshair i:nth-child(4){width:1px;height:15px;left:50%;bottom:0}.crosshair b{position:absolute;width:4px;height:4px;border:1px solid var(--orange);left:calc(50% - 2px);top:calc(50% - 2px);transform:rotate(45deg)}
.crosshair.kick { width:68px;height:68px; }.hit-marker{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);font:300 36px Arial;color:white;opacity:0;pointer-events:none;text-shadow:0 0 8px var(--orange)}.hit-marker.show{animation:hit .18s ease-out}.damage-flash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle,transparent 30%,#ff3c1f99);}.damage-flash.show{animation:damage .35s}
.overlay { position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(28px,7vw,90px);background:linear-gradient(90deg,#05070af5 0%,#05070ac9 45%,#05070a21 78%);opacity:0;visibility:hidden;transition:.3s;cursor:default; }.overlay.active{opacity:1;visibility:visible}.overlay .eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--acid);font:700 12px "Barlow Condensed";margin-bottom:12px}.overlay .danger{color:var(--orange)}
.overlay h1,.overlay h2{font:800 clamp(50px,8vw,92px)/.82 "Barlow Condensed","Noto Sans SC",sans-serif;text-transform:uppercase;letter-spacing:-.04em;margin:0;max-width:620px}.overlay h1 em{color:transparent;-webkit-text-stroke:1px var(--orange);font-style:normal}.overlay h2{font-size:clamp(50px,7vw,78px)}.overlay p{max-width:430px;color:#a6afba;line-height:1.75;font-size:14px;margin:26px 0}.primary-btn{border:0;background:var(--orange);color:#08090b;min-width:270px;padding:0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;clip-path:polygon(0 0,94% 0,100% 27%,100% 100%,0 100%);box-shadow:0 0 30px #ff6b2c33}.primary-btn span{padding:17px 20px;font-weight:900;letter-spacing:.08em}.primary-btn kbd{margin-right:20px;font:600 10px "Barlow Condensed";letter-spacing:.08em}.primary-btn:hover{filter:brightness(1.16)}.controls{display:flex;gap:24px;margin-top:22px;color:#6f7885;font:500 11px "Barlow Condensed";letter-spacing:.1em;text-transform:uppercase}.controls b{color:#c9d0d8;margin-right:5px}.results{display:flex;gap:50px;margin:28px 0}.results div{display:flex;flex-direction:column}.results small{color:#77818f;text-transform:uppercase;letter-spacing:.12em;font-size:10px}.results strong{font:700 38px "Barlow Condensed";color:var(--acid)}
.mobile-hint{display:none;position:absolute;z-index:5;top:18px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.12em;color:#aeb6c2;background:#090c11aa;padding:7px 10px;pointer-events:none}.build{color:#4e5967}
@keyframes hit{0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1.5)}100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.8)}}
@keyframes damage{0%{opacity:1}100%{opacity:0}}
@media(max-width:700px){.game-shell{padding:0;height:100dvh;grid-template-rows:48px 1fr 32px}.topbar,footer{padding:0 14px}.brand{font-size:10px}.brand-mark{font-size:14px;padding:3px 6px}.game-frame{border-left:0;border-right:0}.hud-top{top:56px;left:12px;right:12px}.hud-block{min-width:64px;padding:6px 8px}.hud-block.score{min-width:100px}.hud strong{font-size:19px}.hud-bottom{left:12px;right:12px;bottom:14px}.health-panel{width:130px}.ammo-panel strong{font-size:27px}.ammo-panel button{display:none}.overlay{padding:30px;background:linear-gradient(90deg,#05070af2,#05070a99)}.overlay p{max-width:310px}.controls{display:none}.primary-btn{min-width:240px}.mobile-hint{display:block}footer{font-size:9px}.build{display:none}}