/* game.css — Neon Arcade / Cyber Pop visual style for the game stage */

:root {
  --neon-cyan: #3ba7ff;
  --neon-pink: #ff7bf5;
  --neon-gold: #ffd23b;
  --bg-deep: #05070f;
  --panel-bg: rgba(12, 16, 30, 0.92);
  --panel-border: rgba(120, 180, 255, 0.25);
  --text-dim: #9fb3d9;
}

#game-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 12px;
}

#game-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 82vh;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #05070f;
  box-shadow: 0 0 0 1px var(--panel-border), 0 20px 60px rgba(0,0,0,0.6), 0 0 80px rgba(59,167,255,0.08);
}

/* A 3:2 landscape aspect on a narrow portrait phone leaves too little
   vertical room for the HUD and the game-over/pause overlays (they end up
   clipped) — switch to a taller aspect so the stage actually uses the
   available viewport height. The Canvas renderer letterboxes the fixed
   900x600 design space either way, so this only changes how much
   breathing room the DOM overlays get, never gameplay scale/physics. */
@media (max-width: 600px) {
  #game-stage {
    aspect-ratio: 3 / 4.2;
    max-height: 88vh;
  }
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

/* --- HUD --- */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Both rows anchor near the top (HP/timer/pause/mute live right under the
     score row) — the bottom of the stage is reserved for #ammo-indicator
     and the cannon only, so nothing overlaps on short mobile viewports. */
}

.hud-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hud-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(8, 12, 24, 0.55);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 4px 12px;
  min-width: 72px;
  backdrop-filter: blur(4px);
}

.hud-block .label {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.hud-block span:last-child {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 10px rgba(120,190,255,0.6);
}

#hud-combo { color: var(--neon-gold) !important; }
#hud-combo.hot { animation: comboGlow 0.5s ease infinite alternate; }
@keyframes comboGlow {
  from { text-shadow: 0 0 8px rgba(255,210,59,0.6); }
  to   { text-shadow: 0 0 20px rgba(255,210,59,1); }
}

.hp-hearts { display: flex; gap: 4px; pointer-events: auto; }
.heart { font-size: 20px; color: #ff3b5c; text-shadow: 0 0 8px rgba(255,59,92,0.7); }
.heart.empty { color: rgba(255,255,255,0.15); text-shadow: none; }

.hud-timer {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: rgba(8,12,24,0.55);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 4px 14px;
}
.hud-timer.low { color: #ff3b5c; animation: comboGlow 0.4s ease infinite alternate; }

.icon-btn {
  pointer-events: auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(8,12,24,0.55);
  border: 1px solid var(--panel-border);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn[hidden] { display: none !important; }

#ammo-indicator {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  align-items: center;
  pointer-events: none;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}
#ammo-indicator > div { display: flex; align-items: center; gap: 6px; }
.ammo-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.5);
}
#ammo-next .ammo-dot, #ammo-next { opacity: 0.55; }
#ammo-next { transform: scale(0.85); }

/* --- Banners --- */
#banner-layer {
  position: absolute;
  top: 22%;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 5;
}
.banner {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 4vw, 26px);
  padding: 6px 20px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-10px) scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.banner.show { opacity: 1; transform: translateY(0) scale(1); }
.banner-streak { background: rgba(255,210,59,0.15); color: #ffd23b; box-shadow: 0 0 24px rgba(255,210,59,0.5); border: 1px solid rgba(255,210,59,0.5); }
.banner-gold { background: rgba(255,210,59,0.15); color: #ffd23b; box-shadow: 0 0 24px rgba(255,210,59,0.5); border: 1px solid rgba(255,210,59,0.5); }
.banner-level { background: rgba(59,167,255,0.15); color: #3ba7ff; box-shadow: 0 0 24px rgba(59,167,255,0.5); border: 1px solid rgba(59,167,255,0.5); }
.banner-multiplier { background: rgba(255,123,245,0.15); color: #ff7bf5; box-shadow: 0 0 24px rgba(255,123,245,0.5); border: 1px solid rgba(255,123,245,0.5); }

/* --- Countdown --- */
#countdown-screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,15,0.55);
  z-index: 6;
}
#countdown-number {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(60px, 18vw, 120px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 40px rgba(59,167,255,0.9);
}
#countdown-number.pop { animation: countdownPop 0.7s ease; }
@keyframes countdownPop {
  0% { transform: scale(0.3); opacity: 0; }
  40% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .banner, #countdown-number.pop, #hud-combo.hot, .hud-timer.low { animation: none !important; transition: none !important; }
}