:root{
  --bg:#04050a;
  --cyan:#37e6ff;
  --magenta:#ff2d95;
  --amber:#ffb020;
  --violet:#b14dff;
  --green:#39ff88;
  --ink:#cfeaff;
  --dim:#5f7fa6;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);}
body{
  font-family:'Share Tech Mono',monospace;
  color:var(--ink);
  position:fixed;inset:0;
  cursor:crosshair;
  user-select:none;-webkit-user-select:none;
}

#game{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;}

/* ---------- CRT / post overlay ---------- */
#crt{
  position:absolute;inset:0;z-index:40;pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 62%, rgba(0,0,0,.38) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0px, rgba(0,0,0,.07) 1px, transparent 2px, transparent 4px);
  mix-blend-mode:multiply;
}
#crt::after{
  content:"";position:absolute;left:0;right:0;height:160px;top:-160px;
  background:linear-gradient(180deg, rgba(120,220,255,0) 0%, rgba(120,220,255,.035) 50%, rgba(120,220,255,0) 100%);
  animation:beam 9s linear infinite;
}
@keyframes beam{from{transform:translateY(0);}to{transform:translateY(130vh);}}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;z-index:20;pointer-events:none;}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 26px;}
.hud-block.left{min-width:150px;}
.hud-block.right{text-align:right;}
.hud-block.center{text-align:center;}
.hud-label{font-size:11px;letter-spacing:3px;color:var(--dim);}
.hud-value{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:34px;line-height:1;
  color:#fff;text-shadow:0 0 8px var(--cyan),0 0 22px rgba(55,230,255,.6);
}
.waveval{color:#fff;text-shadow:0 0 8px var(--magenta),0 0 22px rgba(255,45,149,.6);}
.hiscoreval{font-size:22px;color:var(--amber);text-shadow:0 0 8px rgba(255,176,32,.7);}
#multwrap{margin-top:6px;height:14px;}
#mult{font-family:'Orbitron',sans-serif;font-weight:700;font-size:15px;color:var(--green);text-shadow:0 0 8px rgba(57,255,136,.7);}
#multbar{height:4px;margin-top:3px;background:rgba(57,255,136,.18);border-radius:2px;overflow:hidden;}
#multbar::after{content:"";display:block;height:100%;width:var(--mw,100%);background:linear-gradient(90deg,var(--green),var(--cyan));box-shadow:0 0 8px var(--green);transition:width .12s linear;}

.hud-bottom{position:absolute;left:26px;bottom:20px;display:flex;gap:22px;align-items:flex-end;}
#lives,#bombs{display:flex;gap:9px;}
.life-ico,.bomb-ico{filter:drop-shadow(0 0 5px var(--cyan));}
.bomb-ico{filter:drop-shadow(0 0 6px var(--amber));}

/* ---------- Banner ---------- */
#banner{position:absolute;inset:0;z-index:25;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
#banner-main{font-family:'Orbitron',sans-serif;font-weight:900;font-size:64px;letter-spacing:8px;color:#fff;text-shadow:0 0 12px var(--cyan),0 0 40px rgba(55,230,255,.7);}
#banner-sub{font-size:16px;letter-spacing:6px;color:var(--magenta);text-shadow:0 0 10px rgba(255,45,149,.8);margin-top:10px;}

/* ---------- Screens ---------- */
.screen{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(ellipse at center, rgba(4,5,10,.6) 0%, rgba(4,5,10,.42) 48%, rgba(4,5,10,.82) 100%);}
.logo-top{font-size:13px;letter-spacing:6px;color:var(--dim);margin-bottom:14px;}
.logo{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(52px,12vw,128px);line-height:.95;letter-spacing:6px;color:#fff;
  text-shadow:
    0 0 6px #fff,
    0 0 18px var(--cyan),0 0 40px rgba(55,230,255,.8),
    4px 4px 0 var(--magenta);
  animation:flicker 5s infinite;
}
.tagline{margin-top:16px;font-size:14px;letter-spacing:8px;color:var(--cyan);text-shadow:0 0 10px rgba(55,230,255,.7);}
.title-hi{margin-top:34px;font-size:16px;letter-spacing:4px;color:var(--amber);}
#title-hi{font-family:'Orbitron',sans-serif;font-weight:700;font-size:22px;}
.press{margin-top:30px;font-family:'Orbitron',sans-serif;font-weight:700;font-size:18px;letter-spacing:4px;color:#fff;text-shadow:0 0 10px var(--cyan);animation:pulse 1.1s ease-in-out infinite;}
.press.dim{color:var(--dim);text-shadow:none;animation:none;font-size:15px;}
.controls-card{margin-top:34px;border:1px solid rgba(55,230,255,.28);background:rgba(6,12,24,.55);backdrop-filter:blur(3px);padding:18px 26px;min-width:300px;}
.ctl-row{display:flex;justify-content:space-between;gap:30px;font-size:14px;padding:5px 0;color:var(--ink);}
.ctl-row b{color:var(--cyan);letter-spacing:2px;}
.foot{margin-top:26px;font-size:11px;letter-spacing:3px;color:var(--dim);}

.screen-title{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(40px,9vw,84px);letter-spacing:8px;color:#fff;text-shadow:0 0 12px var(--cyan),0 0 36px rgba(55,230,255,.7);}
.screen-title.dead{text-shadow:0 0 12px var(--magenta),0 0 40px rgba(255,45,149,.8);color:#ffd9ec;}
.newhi{margin-top:18px;font-family:'Orbitron',sans-serif;font-weight:700;color:var(--amber);letter-spacing:3px;text-shadow:0 0 12px rgba(255,176,32,.8);animation:pulse .9s ease-in-out infinite;}
.final-grid{margin-top:26px;display:flex;gap:40px;}
.final-grid>div{display:flex;flex-direction:column;gap:8px;}
.fg-label{font-size:11px;letter-spacing:3px;color:var(--dim);}
.fg-value{font-family:'Orbitron',sans-serif;font-weight:900;font-size:34px;color:#fff;text-shadow:0 0 10px var(--cyan);}

@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.28;}}
@keyframes flicker{
  0%,97%,100%{opacity:1;}
  98%{opacity:.6;}
  99%{opacity:.85;}
}

/* ---------- Touch controls ---------- */
#touch{position:absolute;inset:0;z-index:28;display:none;pointer-events:none;}
body.touch #touch{display:block;}
.tgroup{position:absolute;bottom:0;display:flex;gap:14px;padding:0 0 34px;}
.tleft{left:26px;}
.tright{right:26px;flex-direction:column;align-items:center;justify-content:flex-end;}
#touch button{
  pointer-events:auto;width:78px;height:78px;border-radius:50%;
  border:2px solid rgba(55,230,255,.5);background:rgba(10,20,40,.4);color:#fff;
  font-size:30px;font-family:'Orbitron',sans-serif;backdrop-filter:blur(2px);
  touch-action:none;display:flex;align-items:center;justify-content:center;
}
#touch button:active{background:rgba(55,230,255,.28);box-shadow:0 0 18px rgba(55,230,255,.6);}
.tfire{width:96px;height:96px;font-size:14px;letter-spacing:2px;border-color:rgba(255,45,149,.6);color:var(--magenta);}
.tthrust{border-color:rgba(57,255,136,.6);color:var(--green);}
.tbomb{font-size:13px;letter-spacing:1px;border-color:rgba(255,176,32,.6);color:var(--amber);}

/* ---------- Mute button ---------- */
#mutebtn{position:absolute;top:16px;right:16px;z-index:45;width:40px;height:40px;border-radius:8px;border:1px solid rgba(55,230,255,.3);background:rgba(6,12,24,.5);color:var(--cyan);font-size:18px;cursor:pointer;}
#mutebtn.off{color:var(--dim);}

.hidden{display:none !important;}

@media (max-width:640px){
  .hud-top{padding:12px 14px;}
  .hud-value{font-size:24px;}
  .hiscoreval{font-size:16px;}
  .final-grid{gap:20px;flex-wrap:wrap;justify-content:center;}
}