/* ============ NEON FPS · 霓虹射击 ============ */
:root{
  --cyan:#00f0ff; --mag:#ff2d95; --amber:#ffa200; --bg:#04050c;
  --fd:'Orbitron',ui-monospace,monospace;
  --fb:'Rajdhani','PingFang SC','Microsoft YaHei',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg)}
body{font-family:var(--fb);color:#dff6ff;-webkit-user-select:none;user-select:none}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}

/* ============ scanlines / vignette ============ */
#scanlines{position:fixed;inset:0;pointer-events:none;z-index:24;opacity:.32;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:22;opacity:0;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(255,20,70,.55) 100%)}

/* ============ HUD ============ */
#hud{position:fixed;inset:0;pointer-events:none;z-index:20}
.hud-corner{position:fixed;text-shadow:0 0 12px rgba(0,240,255,.45)}
.hud-corner .label{font:600 11px var(--fb);letter-spacing:5px;color:rgba(0,240,255,.65)}
.tl{top:26px;left:30px}
.tl #score{font:700 38px var(--fd);color:#f2feff;line-height:1.05}
#combo{font:700 15px var(--fd);letter-spacing:2px;color:var(--mag);margin-top:4px;
  opacity:0;transition:opacity .15s;text-shadow:0 0 12px var(--mag)}
#combo.on{opacity:1}
#combo.hot{color:#fff}
.tc{top:24px;left:50%;transform:translateX(-50%);text-align:center}
#wave{font:700 20px var(--fd);letter-spacing:6px;color:#eafcff}
#wave-bar{width:180px;height:3px;margin:7px auto 0;background:rgba(0,240,255,.15);overflow:hidden}
#wave-bar i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);
  transform:scaleX(0);transform-origin:left}
.tr{top:26px;right:30px;text-align:right}
.tr #best{font:700 26px var(--fd);color:#bfefff}
.bl{bottom:30px;left:30px}
#health-bar{width:230px;height:9px;margin-top:7px;border:1px solid rgba(0,240,255,.4);
  background:rgba(0,20,30,.5);padding:1px}
#health-bar i{display:block;height:100%;width:100%;transform-origin:left;
  background:linear-gradient(90deg,#00f0ff,#39ff88);box-shadow:0 0 10px rgba(0,240,255,.7);
  transition:transform .12s ease-out}
#hud.low #health-bar i{background:linear-gradient(90deg,#ff2d95,#ff3b3b);animation:lowPulse .7s infinite}
@keyframes lowPulse{50%{filter:brightness(1.7)}}
#health-num{font:700 22px var(--fd);color:#eafcff;margin-top:6px}
.br{bottom:30px;right:30px;text-align:right}
#ammo{font:700 42px var(--fd);color:#f2feff;line-height:1}
#ammo .res{font-size:18px;color:rgba(0,240,255,.55);margin-left:4px}
#ammo.low{color:var(--amber)}
#reload-hint{font:600 11px var(--fb);letter-spacing:3px;color:rgba(0,240,255,.5);margin-top:6px}
#reload-hint.on{color:var(--amber);animation:blink .4s infinite}
@keyframes blink{50%{opacity:.25}}
#mute-tag{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  font:600 10px var(--fb);letter-spacing:3px;color:rgba(160,220,255,.35)}

/* crosshair */
#crosshair{position:fixed;left:50%;top:50%;--spread:7px}
.ch{position:absolute;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.ch.t{width:2px;height:9px;left:-1px;top:calc(-11px - var(--spread))}
.ch.b{width:2px;height:9px;left:-1px;top:calc(2px + var(--spread))}
.ch.l{width:9px;height:2px;top:-1px;left:calc(-11px - var(--spread))}
.ch.r{width:9px;height:2px;top:-1px;left:calc(2px + var(--spread))}
.ch.dot{width:2px;height:2px;left:-1px;top:-1px;border-radius:50%}
#hitmarker{position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  font:700 24px var(--fb);color:#fff;opacity:0;text-shadow:0 0 10px var(--cyan)}
#hitmarker.show{animation:hitpop .2s ease-out}
#hitmarker.kill{color:var(--mag);text-shadow:0 0 14px var(--mag)}
@keyframes hitpop{0%{opacity:1;transform:translate(-50%,-50%) scale(1.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}

/* banner */
#banner{position:fixed;left:50%;top:23%;transform:translateX(-50%);text-align:center;opacity:0;pointer-events:none}
#banner h2{font:900 46px var(--fd);letter-spacing:10px;color:#f2feff;white-space:nowrap;
  text-shadow:0 0 18px var(--cyan),0 0 60px rgba(0,240,255,.5)}
#banner p{font:600 15px var(--fb);letter-spacing:7px;color:var(--mag);margin-top:8px;text-shadow:0 0 12px var(--mag)}
#banner.show{animation:bannerIn 2.6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes bannerIn{0%{opacity:0;transform:translateX(-50%) scale(1.18);filter:blur(8px)}
  12%{opacity:1;transform:translateX(-50%) scale(1);filter:blur(0)}80%{opacity:1}100%{opacity:0}}

/* popups */
#popups{position:fixed;inset:0;overflow:hidden}
.pop{position:absolute;font:700 15px var(--fd);color:var(--cyan);white-space:nowrap;
  text-shadow:0 0 10px var(--cyan);transform:translate(-50%,-50%);animation:popFloat .9s ease-out forwards}
.pop.kill{color:#fff;text-shadow:0 0 14px var(--mag);font-size:19px}
@keyframes popFloat{0%{opacity:0;margin-top:8px}15%{opacity:1}100%{opacity:0;margin-top:-48px}}

/* ============ screens ============ */
.screen{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 118%,rgba(255,45,149,.10),transparent 55%),
             radial-gradient(ellipse at 50% -18%,rgba(0,240,255,.09),transparent 55%),
             rgba(3,4,10,.66);
  backdrop-filter:blur(3px)}
.menu-inner{text-align:center;padding:20px}
.tag{font:600 12px var(--fb);letter-spacing:6px;color:rgba(0,240,255,.55)}
.title{font:900 clamp(56px,11vw,148px)/0.95 var(--fd);letter-spacing:.05em;color:#f2feff;
  text-shadow:0 0 10px rgba(0,240,255,.9),0 0 42px rgba(0,240,255,.5),0 0 95px rgba(0,240,255,.3);
  animation:titlePulse 3.4s ease-in-out infinite}
.title span{display:block;color:#fff;
  text-shadow:0 0 10px var(--mag),0 0 42px var(--mag),0 0 95px rgba(255,45,149,.45)}
@keyframes titlePulse{50%{text-shadow:0 0 16px rgba(0,240,255,1),0 0 60px rgba(0,240,255,.65),0 0 120px rgba(0,240,255,.4)}}
.subtitle{font:600 17px var(--fb);letter-spacing:14px;color:rgba(223,246,255,.75);margin:14px 0 4px}
.best-line{font:700 13px var(--fd);letter-spacing:3px;color:var(--amber);margin:10px 0 26px;
  text-shadow:0 0 12px rgba(255,162,0,.6)}
.controls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 44px;max-width:520px;margin:0 auto 34px}
.controls-grid div{display:flex;flex-direction:column;gap:2px}
.controls-grid b{font:700 15px var(--fd);letter-spacing:2px;color:var(--cyan);text-shadow:0 0 10px rgba(0,240,255,.6)}
.controls-grid i{font:600 13px var(--fb);font-style:normal;letter-spacing:3px;color:rgba(200,230,255,.5)}
button{font:700 15px var(--fd);letter-spacing:4px;color:var(--cyan);background:rgba(0,240,255,.05);
  border:1px solid rgba(0,240,255,.6);padding:16px 44px;cursor:pointer;transition:.18s;pointer-events:auto}
button:hover{background:rgba(0,240,255,.15);color:#fff;
  box-shadow:0 0 26px rgba(0,240,255,.45),inset 0 0 20px rgba(0,240,255,.14)}
button.ghost{border-color:rgba(255,45,149,.55);color:var(--mag);background:rgba(255,45,149,.05);margin-top:12px}
button.ghost:hover{background:rgba(255,45,149,.14);box-shadow:0 0 26px rgba(255,45,149,.4)}
.foot{margin-top:30px;font:600 10px var(--fb);letter-spacing:4px;color:rgba(150,200,230,.35)}
.panel{text-align:center;padding:24px}
.panel h2{font:900 52px var(--fd);letter-spacing:10px;color:#eafcff;text-shadow:0 0 20px var(--cyan)}
.panel h2.danger{color:#fff;text-shadow:0 0 20px var(--mag),0 0 60px rgba(255,45,149,.5)}
.panel .dim{font:600 14px var(--fb);letter-spacing:5px;color:rgba(200,230,255,.5);margin:12px 0 28px}
.stats{display:flex;gap:44px;justify-content:center;margin:26px 0 34px}
.stats div{display:flex;flex-direction:column;gap:6px}
.stats span{font:600 11px var(--fb);letter-spacing:4px;color:rgba(0,240,255,.6)}
.stats b{font:700 34px var(--fd);color:#f2feff;text-shadow:0 0 14px rgba(0,240,255,.5)}

/* ============ touch ============ */
#touch-ui{position:fixed;inset:0;z-index:26;pointer-events:none}
#joy{position:fixed;left:36px;bottom:90px;width:124px;height:124px;border-radius:50%;
  border:1px solid rgba(0,240,255,.4);background:rgba(0,240,255,.04);pointer-events:auto;touch-action:none}
#joy-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:rgba(0,240,255,.18);border:1px solid rgba(0,240,255,.7);box-shadow:0 0 16px rgba(0,240,255,.4)}
#touch-fire{position:fixed;right:34px;bottom:96px;width:96px;height:96px;border-radius:50%;
  border-color:rgba(255,45,149,.7);color:var(--mag);background:rgba(255,45,149,.08);pointer-events:auto;touch-action:none}
#touch-reload{position:fixed;right:150px;bottom:120px;width:52px;height:52px;border-radius:50%;padding:0;pointer-events:auto;touch-action:none}
#touch-pause{position:fixed;top:20px;right:20px;width:44px;height:44px;padding:0;border-radius:8px;pointer-events:auto;touch-action:none}

@media (max-width:760px){
  .hud-corner.tl{top:16px;left:16px}.hud-corner.tr{top:16px;right:16px}
  .hud-corner.bl{bottom:16px;left:16px}.hud-corner.br{bottom:16px;right:16px}
  #health-bar{width:150px}#ammo{font-size:32px}#banner h2{font-size:30px;letter-spacing:6px}
  .controls-grid{grid-template-columns:repeat(2,1fr)}
}