:root {
  --bg: #0a0d12;
  --acid: #4affd0;
  --orange: #ff5a2a;
  --gold: #ffe000;
  --danger: #ff4a4a;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; background:var(--bg); font-family:'Share Tech Mono', monospace; }
#game-wrap { position:fixed; inset:0; overflow:hidden; }
#canvas { display:block; touch-action:none; }

/* Overlays */
.overlay {
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 50% 30%, rgba(74,255,208,0.08), transparent 60%),
    linear-gradient(160deg, #0a0d12 0%, #12060a 100%);
  text-align:center; padding:24px; gap:18px;
}
.overlay.hidden, .hidden { display:none !important; }
.scanlines {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.02) 0 1px, transparent 1px 4px);
  z-index:1;
}
.overlay > *:not(.scanlines) { position:relative; z-index:2; }

.title {
  font-family:'Black Ops One', cursive;
  font-size:clamp(52px, 16vw, 130px); line-height:0.9; letter-spacing:2px;
  color:#e8f0ff;
  text-shadow:0 0 20px rgba(74,255,208,0.6), 4px 4px 0 var(--orange);
  animation:titleIn 0.6s cubic-bezier(.2,1.2,.3,1) both;
}
.title-accent { color:var(--orange); text-shadow:0 0 24px rgba(255,90,42,0.8), 4px 4px 0 #000; }
@keyframes titleIn { from{ opacity:0; transform:translateY(-40px) scale(0.8); } }

.tagline { font-size:clamp(13px,3.5vw,18px); color:var(--acid); letter-spacing:2px; opacity:0; animation:fadeUp .5s .3s both; }
@keyframes fadeUp { from{ opacity:0; transform:translateY(12px);} to{opacity:0.9;} }

.hs-badge {
  font-size:13px; color:#9aa7b8; letter-spacing:1px;
  padding:6px 16px; border:1px solid rgba(74,255,208,0.3); border-radius:20px;
  opacity:0; animation:fadeUp .5s .45s both;
}
.hs-badge b { color:var(--gold); }

.big-btn {
  font-family:'Black Ops One', cursive; font-size:clamp(24px,6vw,36px); letter-spacing:3px;
  color:#0a0d12; background:linear-gradient(135deg, var(--acid), #2ad4a8);
  border:none; padding:16px 54px; border-radius:8px; cursor:pointer;
  box-shadow:0 0 30px rgba(74,255,208,0.5), 0 6px 0 #1a8a6f;
  transition:transform .1s, box-shadow .2s;
  opacity:0; animation:fadeUp .5s .55s both, pulse 1.8s 1s infinite;
}
.big-btn:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(74,255,208,0.8), 0 8px 0 #1a8a6f; }
.big-btn:active { transform:translateY(4px); box-shadow:0 0 20px rgba(74,255,208,0.5), 0 2px 0 #1a8a6f; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 30px rgba(74,255,208,0.5), 0 6px 0 #1a8a6f;} 50%{ box-shadow:0 0 50px rgba(74,255,208,0.9), 0 6px 0 #1a8a6f;} }

.small-btn { font-family:'Share Tech Mono'; font-size:14px; color:#9aa7b8; background:transparent; border:1px solid #444; padding:10px 24px; border-radius:6px; cursor:pointer; letter-spacing:1px; }
.small-btn:hover { color:#fff; border-color:var(--acid); }

.legend { font-size:12px; color:#7a8699; letter-spacing:1px; margin-top:4px; opacity:0; animation:fadeUp .5s .7s both; }
.legend b { color:var(--acid); }
.desktop-only { display:inline; } .mobile-only { display:none; }
@media (hover:none) and (pointer:coarse) { .desktop-only{display:none;} .mobile-only{display:inline;} }

.remix { position:absolute; bottom:16px; font-size:12px; color:#5a6577; text-decoration:none; letter-spacing:1px; z-index:3; }
.remix:hover { color:var(--acid); }

.over-title { font-family:'Black Ops One', cursive; font-size:clamp(44px,12vw,90px); color:var(--danger); text-shadow:0 0 24px rgba(255,74,74,0.6), 3px 3px 0 #000; animation:titleIn .5s both; }
.over-stats { display:flex; flex-direction:column; gap:8px; font-size:15px; }
.over-stats div { display:flex; justify-content:space-between; gap:32px; min-width:260px; border-bottom:1px dashed rgba(255,255,255,0.1); padding:6px 0; }
.over-stats span { color:#7a8699; letter-spacing:1px; }
.over-stats b { color:#e8f0ff; }
.new-hs { color:var(--gold); font-family:'Black Ops One'; font-size:20px; letter-spacing:2px; text-shadow:0 0 16px rgba(255,224,0,0.7); animation:pulse2 .8s infinite alternate; }
@keyframes pulse2 { from{transform:scale(1);} to{transform:scale(1.08);} }

/* HUD */
#hud { position:absolute; inset:0; z-index:10; pointer-events:none; }
.hud-top { position:absolute; top:12px; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start; padding:0 16px; gap:10px; }
.hud-left, .hud-right { min-width:120px; }
.hud-right { text-align:right; }
#weapon-name { font-family:'Black Ops One'; font-size:clamp(15px,4vw,22px); letter-spacing:2px; text-shadow:0 0 10px currentColor; }
#ammo-bar { width:110px; height:5px; background:rgba(255,255,255,0.1); border-radius:3px; margin-top:5px; overflow:hidden; }
#ammo-fill { height:100%; width:0; background:#e8f0ff; transition:width .05s linear; }
.hud-center { flex:1; max-width:340px; text-align:center; }
.hud-label { font-size:11px; color:#9aa7b8; letter-spacing:2px; margin-bottom:4px; }
#xp-bar { height:8px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:4px; overflow:hidden; }
#xp-fill { height:100%; width:0; background:var(--acid); box-shadow:0 0 8px currentColor; transition:width .2s; }
#score { font-family:'Black Ops One'; font-size:clamp(22px,6vw,34px); color:var(--gold); text-shadow:0 0 12px rgba(255,224,0,0.5); }
.hud-sub { font-size:11px; color:#9aa7b8; letter-spacing:1px; }
.hud-sub span { color:#e8f0ff; }

.hud-bottom { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); }
#hp-bar { width:min(340px, 70vw); height:16px; background:rgba(0,0,0,0.5); border:2px solid rgba(255,255,255,0.15); border-radius:9px; overflow:hidden; }
#hp-fill { height:100%; width:100%; background:#4aff7a; box-shadow:0 0 10px currentColor; transition:width .15s, background .3s; }

.mute, .pause-hud {
  position:absolute; top:12px; pointer-events:auto; cursor:pointer;
  background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.2); color:#e8f0ff;
  width:40px; height:40px; border-radius:8px; font-size:18px;
}
.mute { right:60px; } .pause-hud { right:12px; font-size:14px; }
.mute.muted { color:#666; }
@media (max-width:600px){ .mute{top:auto; bottom:44px; right:12px;} .pause-hud{top:auto; bottom:44px; right:60px;} .hud-top{top:6px;} }

/* Banner */
.banner {
  position:absolute; top:38%; left:50%; transform:translate(-50%,-50%);
  z-index:15; pointer-events:none;
  font-family:'Black Ops One'; font-size:clamp(22px,6vw,40px); letter-spacing:3px;
  padding:12px 30px; border:2px solid; border-radius:8px;
  background:rgba(10,13,18,0.7); text-shadow:0 0 14px currentColor;
}
.banner-anim { animation:bannerPop 1.5s ease-out forwards; }
@keyframes bannerPop {
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.3);}
  15%{ opacity:1; transform:translate(-50%,-50%) scale(1.1);}
  25%{ transform:translate(-50%,-50%) scale(1);}
  75%{ opacity:1;}
  100%{ opacity:0; transform:translate(-50%,-55%) scale(1);}
}

/* Touch UI */
#touch-ui { position:absolute; inset:0; z-index:8; pointer-events:none; }
#stick-base {
  position:absolute; width:120px; height:120px; border-radius:50%;
  border:2px solid rgba(74,255,208,0.4); background:rgba(74,255,208,0.05);
  opacity:0; transition:opacity .15s;
}
#stick-knob {
  position:absolute; left:35px; top:35px; width:50px; height:50px; border-radius:50%;
  background:rgba(74,255,208,0.5); box-shadow:0 0 14px rgba(74,255,208,0.6);
}