* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; overflow:hidden; background:#2a1e3f;
  font-family: ui-rounded, "Segoe UI", system-ui, sans-serif; }
#game { position:fixed; inset:0; width:100vw; height:100vh; touch-action:none; }

#damage-flash { position:fixed; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, transparent 40%, #ff4422cc 100%);
  transition:opacity .25s; }

#crosshair { display:none; position:fixed; left:0; top:0; pointer-events:none; }
.ch-ring { width:34px; height:34px; border:2px solid #ffcc66; border-radius:50%;
  opacity:.9; box-shadow:0 0 8px #ff884488; }
.ch-dot { position:absolute; left:50%; top:50%; width:4px; height:4px;
  background:#ffcc66; border-radius:50%; transform:translate(-50%,-50%); }

#hud { position:fixed; top:0; left:0; right:0; display:flex; align-items:flex-start;
  justify-content:space-between; padding:12px 16px; pointer-events:none;
  color:#f2e4c8; text-shadow:0 1px 3px #0008; }
.hud-label { font-size:13px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.hud-label b { color:#ffcc66; font-size:15px; }
#hp-bar { width:150px; height:10px; margin-top:6px; border:1px solid #f2e4c877;
  border-radius:6px; background:#00000055; overflow:hidden; }
#hp-fill { height:100%; width:100%; border-radius:6px;
  background:linear-gradient(90deg,#2fb3a8,#6fe8d8); transition:width .2s; }
.hud-center { text-align:center; display:flex; gap:18px; }
.hud-right { text-align:right; }

#touch-controls { position:fixed; bottom:0; left:0; right:0; display:none;
  justify-content:space-between; padding:16px 20px 26px; pointer-events:none; }
.pad-left, .pad-right { pointer-events:auto; }
.pad-row { display:flex; gap:10px; margin-top:10px; }
.tbtn { width:62px; height:56px; border-radius:14px; border:1px solid #f2e4c866;
  background:#2a1e3f99; color:#f2e4c8; font-size:20px; font-weight:700;
  touch-action:none; user-select:none; -webkit-user-select:none; }
.tbtn:active { background:#e8763c88; }
.tbtn-fire { width:88px; height:88px; border-radius:50%; margin-top:24px;
  background:#b2452ecc; border-color:#ffcc6688; font-size:16px; letter-spacing:.1em; }
@media (pointer: coarse) { #touch-controls { display:flex; } }
body.is-touch #touch-controls { display:flex; }

#overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 60%, #8a4a52cc, #2a1e3fee 70%); }
#overlay.show { display:flex; }
.panel { max-width:min(560px, 88vw); text-align:center; color:#f2e4c8; padding:32px; }
#overlay-tag { letter-spacing:.35em; font-size:12px; color:#6fe8d8; text-transform:uppercase; }
#overlay-title { font-size:clamp(26px, 5vw, 40px); margin:10px 0 14px; line-height:1.15;
  background:linear-gradient(90deg,#f2e4c8,#ffcc66); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
#overlay-sub { font-size:15px; line-height:1.6; opacity:.9; }
#overlay-sub b { color:#ffcc66; }
#overlay-btn { margin-top:22px; padding:14px 42px; font-size:17px; font-weight:700;
  letter-spacing:.06em; border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(90deg,#e8763c,#ffcc66); color:#2a1e3f; }
.hint { margin-top:14px; font-size:11px; opacity:.5; }

#radar { position:fixed; left:14px; bottom:14px; border-radius:50%;
  border:1px solid #f2e4c844; background:#1c133066; pointer-events:none; }
#wave-banner { position:fixed; left:50%; top:22%; transform:translateX(-50%);
  font-size:clamp(26px,5vw,44px); font-weight:800; letter-spacing:.3em; color:#ffcc66;
  text-shadow:0 2px 18px #e8763c; opacity:0; pointer-events:none;
  text-transform:uppercase; }
#wave-banner.show { animation:banner 2.2s ease-out forwards; }
@keyframes banner { 0%{opacity:0; transform:translateX(-50%) scale(.7)}
  15%{opacity:1; transform:translateX(-50%) scale(1.05)} 70%{opacity:1}
  100%{opacity:0; transform:translateX(-50%) scale(1.12)} }
@media (max-width:700px) { #radar { width:96px; height:96px; left:8px; bottom:8px; } }