:root {
  --cyan: #37e8ff;
  --magenta: #ff3ce1;
  --amber: #ffb04d;
  --bg: #05070f;
  --dim: #6f8797;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: #dff3fb;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none;
}

#app { position: fixed; inset: 0; overflow: hidden; }
canvas#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#touchlayer { position: absolute; inset: 0; z-index: 1; }

/* ---------- virtual stick ---------- */
#joy {
  position: absolute; z-index: 2; width: 132px; height: 132px; border-radius: 50%;
  border: 2px solid rgba(55, 232, 255, 0.30);
  background: radial-gradient(circle, rgba(55,232,255,0.10), rgba(55,232,255,0.02) 70%);
  display: none; pointer-events: none;
}
#joyknob {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: rgba(55, 232, 255, 0.42);
  border: 2px solid rgba(55, 232, 255, 0.85); box-shadow: 0 0 18px rgba(55,232,255,0.5);
}

/* ---------- reticle ---------- */
#crosshair {
  position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s;
}
#crosshair.on { opacity: 1; }
#crosshair i {
  position: absolute; background: var(--cyan); box-shadow: 0 0 6px rgba(55,232,255,.9);
  transition: background .08s, transform .08s;
}
#crosshair i:nth-child(1) { left: 50%; top: 0;    width: 2px; height: 12px; margin-left: -1px; }
#crosshair i:nth-child(2) { left: 50%; bottom: 0; width: 2px; height: 12px; margin-left: -1px; }
#crosshair i:nth-child(3) { top: 50%; left: 0;    height: 2px; width: 12px; margin-top: -1px; }
#crosshair i:nth-child(4) { top: 50%; right: 0;   height: 2px; width: 12px; margin-top: -1px; }
#crosshair b {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  border-radius: 50%; background: #fff; opacity: .8;
}
#crosshair.hot i { background: var(--magenta); box-shadow: 0 0 8px rgba(255,60,225,.95); transform: scale(1.25); }
#crosshair.hit b { background: var(--magenta); transform: scale(3); }

/* ---------- HUD ---------- */
#hud {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
  opacity: 0; transition: opacity .3s;
}
#hud.on { opacity: 1; }
.label { font-size: 9px; letter-spacing: .18em; color: var(--dim); font-weight: 700; }

#hud-left { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); width: 150px; }
#hpbar { margin-top: 4px; height: 9px; background: rgba(255,255,255,.10); border: 1px solid rgba(55,232,255,.35); }
#hpfill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), #7dfbd6); transition: width .12s; }
#hpnum { font-size: 20px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
#hud-left.hurt #hpfill { background: linear-gradient(90deg, #ff4d4d, var(--magenta)); }

#hud-mid { position: absolute; left: 0; right: 0; top: max(14px, env(safe-area-inset-top)); text-align: center; }
#wavenum { font-size: 15px; font-weight: 800; letter-spacing: .12em; }
#wavenum span { color: var(--dim); font-weight: 600; }
#hostiles { font-size: 10px; letter-spacing: .16em; color: var(--magenta); margin-top: 2px; font-weight: 700; }

#hud-right { position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); text-align: right; }
#score { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

#bossbar { position: absolute; left: 50%; transform: translateX(-50%); top: 76px; width: min(58vw, 420px); display: none; text-align: center; }
#bossbar.on { display: block; }
#bossbar .track { margin-top: 3px; height: 7px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,60,225,.45); }
#bossfill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--magenta), #ff8a1f); transition: width .15s; }

/* ---------- weapon buttons ---------- */
#weapons {
  position: absolute; z-index: 3;
  right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  display: none; gap: 8px; flex-direction: column;
}
#weapons.on { display: flex; }
.wbtn {
  position: relative; width: 104px; padding: 9px 10px; font-family: inherit; cursor: pointer;
  background: rgba(6, 18, 30, .72); color: #cfe9f5; border: 1px solid rgba(55,232,255,.35);
  border-radius: 7px; overflow: hidden; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.wbtn b { font-size: 11px; letter-spacing: .12em; font-weight: 800; }
.wbtn i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0%; background: var(--cyan); }
.wbtn.active { border-color: var(--cyan); background: rgba(55,232,255,.20); color: #fff; box-shadow: 0 0 16px rgba(55,232,255,.30); }
.wbtn.locked { opacity: .32; pointer-events: none; }
.wbtn.locked b::after { content: " ◍"; }

/* ---------- feedback overlays ---------- */
#dmgvig {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(255,40,60,.62) 100%);
  transition: opacity .28s;
}
#muzzleflash {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 62% 78%, rgba(120,230,255,.30), transparent 42%);
}
#toast {
  position: absolute; z-index: 5; left: 50%; top: 30%; transform: translate(-50%, -50%);
  font-size: clamp(17px, 4.4vw, 30px); font-weight: 900; letter-spacing: .16em; text-align: center;
  color: var(--cyan); text-shadow: 0 0 22px rgba(55,232,255,.7); pointer-events: none;
  opacity: 0; transition: opacity .3s; white-space: nowrap;
}
#toast.on { opacity: 1; }

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: radial-gradient(ellipse at center, rgba(10,20,40,.90), rgba(5,7,15,.97));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  overflow-y: auto;
}
.screen.hidden { display: none; }
.panel { width: min(560px, 100%); text-align: center; }

h1 {
  font-size: clamp(38px, 12vw, 78px); font-weight: 900; letter-spacing: .04em; line-height: .95;
  color: #fff; text-shadow: 0 0 30px rgba(55,232,255,.55);
}
h1 span { color: var(--magenta); text-shadow: 0 0 30px rgba(255,60,225,.6); }
.tag { margin-top: 10px; color: var(--dim); font-size: clamp(12px, 3.2vw, 15px); }

h2 { font-size: clamp(26px, 8vw, 46px); font-weight: 900; letter-spacing: .06em; color: var(--magenta); text-shadow: 0 0 26px rgba(255,60,225,.5); }
h2.win { color: var(--cyan); text-shadow: 0 0 26px rgba(55,232,255,.55); }

button.big {
  margin-top: 22px; padding: 15px 44px; font-family: inherit; font-size: 15px; font-weight: 800;
  letter-spacing: .18em; cursor: pointer; color: #04121a; border: none; border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), #7dfbd6);
  box-shadow: 0 0 28px rgba(55,232,255,.45);
}
button.big:active { transform: translateY(1px); }

#bestline, #endbest { margin-top: 14px; font-size: 11px; letter-spacing: .12em; color: var(--dim); }
#endstats { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#endstats div {
  min-width: 88px; padding: 10px 12px; border: 1px solid rgba(55,232,255,.22);
  border-radius: 8px; background: rgba(55,232,255,.06);
}
#endstats span { display: block; font-size: 9px; letter-spacing: .16em; color: var(--dim); font-weight: 700; }
#endstats b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

.howto { margin-top: 26px; font-size: 11.5px; line-height: 1.9; color: #9fbccb; }
.howto b { color: var(--cyan); letter-spacing: .1em; font-size: 10px; }
.howto .dim { color: var(--dim); margin-top: 6px; font-size: 11px; }

#rotatehint { display: none; margin-top: 12px; font-size: 11px; color: var(--amber); letter-spacing: .1em; }
.loadtext { font-size: 13px; letter-spacing: .3em; color: var(--dim); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .3 } 50% { opacity: 1 } }

@media (orientation: portrait) and (pointer: coarse) { #rotatehint { display: block; } }
@media (max-height: 430px) {
  .howto { margin-top: 14px; line-height: 1.65; }
  button.big { margin-top: 14px; padding: 12px 36px; }
  .tag { margin-top: 6px; }
}