* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #efefef; }
body { font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; user-select: none; }
#game { position: fixed; inset: 0; display: block; }
.hidden { display: none !important; }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(239,239,239,0.96); color: #1a1a1a; text-align: center;
  letter-spacing: 0.08em; cursor: pointer;
}
.overlay h1 { font-size: clamp(40px, 9vw, 110px); color: #1a1a1a; }
.overlay h1 span { color: #ff2a1f; }
.overlay h2 { font-size: clamp(32px, 7vw, 80px); }
.overlay .red { color: #ff2a1f; }
.overlay .sub { margin-top: 12px; font-size: clamp(12px, 1.6vw, 18px); color: #777; }
.overlay .start { margin-top: 40px; font-size: clamp(14px, 2vw, 22px); color: #ff2a1f; }
.overlay .controls { margin-top: 56px; font-size: 12px; color: #999; line-height: 2; font-family: Arial, sans-serif; }
.overlay .controls .dim { color: #bbb; }
.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#intro { background: rgba(239,239,239,0.98); }
#introlevel { font-size: 14px; color: #999; letter-spacing: 0.4em; margin-bottom: 18px; }
#introtext { color: #ff2a1f; font-size: clamp(28px, 6vw, 72px); line-height: 1.2; white-space: pre-line; }

/* SUPER / HOT full-screen flash */
#flash {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
}
#flash span {
  font-size: clamp(80px, 22vw, 320px); color: #ff2a1f; letter-spacing: 0.05em;
  transform: scale(1); animation: slam 0.28s ease-out;
}
@keyframes slam { from { transform: scale(1.6); opacity: 0.2; } to { transform: scale(1); opacity: 1; } }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; color: #1a1a1a; }
#crosshair {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; background: #ff2a1f; border-radius: 50%;
  transition: transform 0.08s ease-out;
}
#crosshair.pop { transform: scale(2.6); }
#weaponbox {
  position: absolute; right: 28px; bottom: 24px; text-align: right;
  font-size: 20px; letter-spacing: 0.15em;
}
#ammo { display: block; margin-top: 6px; color: #ff2a1f; font-size: 16px; letter-spacing: 0.3em; }
#enemybox { position: absolute; left: 28px; bottom: 24px; font-size: 20px; letter-spacing: 0.2em; }
#enemycount { color: #ff2a1f; }
#levellabel { position: absolute; top: 20px; left: 0; right: 0; text-align: center; font-size: 12px; color: #999; letter-spacing: 0.5em; }
#prompt {
  position: absolute; left: 0; right: 0; top: 58%; text-align: center;
  font-size: 15px; color: #ff2a1f; letter-spacing: 0.3em;
}

/* damage / death vignette */
#vignette {
  position: fixed; inset: 0; z-index: 15; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(255,42,31,0.55) 100%);
  transition: opacity 0.15s;
}
#vignette.on { opacity: 1; }