/* ============================================================
   VOID BREACH — HUD Animations & Effects
   ============================================================ */

/* ── Floating damage numbers ─────────────────────────────── */
.damage-number {
  position: fixed;
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  pointer-events: none;
  z-index: 15;
  animation: floatUp 1.2s forwards ease-out;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

@keyframes floatUp {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  30%  { opacity: 1; transform: translateY(-20px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}

/* ── Shield hit pulse ────────────────────────────────────── */
@keyframes shieldPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7); }
  70%  { box-shadow: 0 0 0 20px rgba(0, 229, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}

/* ── Score pop ───────────────────────────────────────────── */
@keyframes scorePop {
  0%   { transform: scale(1.4); color: #ffb800; }
  100% { transform: scale(1); color: #00e5ff; }
}

#score-display.pop { animation: scorePop 0.3s ease-out forwards; }

/* ── Bar flash on critical ───────────────────────────────── */
@keyframes barCritical {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.bar-fill.critical { animation: barCritical 0.5s infinite; }

/* ── Combo text ──────────────────────────────────────────── */
#combo-display {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  text-align: right;
  font-family: 'Orbitron', monospace;
  pointer-events: none;
}

#combo-count {
  font-size: 40px;
  font-weight: 900;
  color: var(--col-warn);
  text-shadow: 0 0 20px rgba(255,184,0,0.7);
  opacity: 0;
  transition: opacity 0.3s;
}

#combo-label {
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(255,184,0,0.6);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s;
}

#combo-count.visible,
#combo-label.visible { opacity: 1; }

@keyframes comboScale {
  0%   { transform: scale(1.5); }
  100% { transform: scale(1); }
}

#combo-count.bump { animation: comboScale 0.2s ease-out; }

/* ── Boss health bar ─────────────────────────────────────── */
#boss-bar-container {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  max-width: 80vw;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

#boss-bar-container.visible { opacity: 1; }

#boss-name {
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--col-accent);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 5px;
  text-shadow: var(--glow-red);
}

#boss-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,45,120,0.4);
  border-radius: 2px;
  overflow: hidden;
}

#boss-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff2d78, #ff6b6b);
  box-shadow: var(--glow-red);
  border-radius: 2px;
  transition: width 0.2s ease;
}

/* ── Crosshair ───────────────────────────────────────────── */
#crosshair {
  position: fixed;
  pointer-events: none;
  z-index: 12;
  transform: translate(-50%, -50%);
  transition: transform 0.05s;
}

#crosshair svg {
  filter: drop-shadow(0 0 4px #00e5ff);
  transition: opacity 0.1s;
}

/* ── Thruster indicator ──────────────────────────────────── */
#thruster-indicator {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: 'Orbitron', monospace;
}

.thruster-label {
  font-size: 7px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
}

.thruster-dots {
  display: flex;
  gap: 4px;
}

.thruster-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.1s;
}

.thruster-dot.active {
  background: var(--col-warn);
  box-shadow: 0 0 6px var(--col-warn);
}

/* ── Screen flash effects ────────────────────────────────── */
#screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  opacity: 0;
}

@keyframes whiteFlash {
  0%   { opacity: 0.7; }
  100% { opacity: 0; }
}

#screen-flash.white-flash {
  background: white;
  animation: whiteFlash 0.4s forwards;
}

/* ── Minimap ─────────────────────────────────────────────── */
#minimap {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid var(--col-border);
  border-radius: 50%;
  background: rgba(0,20,40,0.6);
  overflow: hidden;
  pointer-events: none;
}

#minimap canvas {
  width: 100%;
  height: 100%;
}

/* ── Achievement toast ───────────────────────────────────── */
#achievement-toast {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: var(--col-panel);
  border: 1px solid var(--col-warn);
  box-shadow: 0 0 20px rgba(255,184,0,0.3);
  padding: 12px 24px;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 280px;
  pointer-events: none;
}

#achievement-toast.show { transform: translateX(-50%) translateY(0); }

.ach-label {
  font-size: 8px;
  letter-spacing: 4px;
  color: var(--col-warn);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.ach-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: white;
}

.ach-desc {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-family: 'Rajdhani', sans-serif;
  margin-top: 3px;
}