/* ===== HIT EFFECTS ===== */
.hit-effect {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  animation: hitEffectAnim 0.3s ease-out forwards;
}
@keyframes hitEffectAnim {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}
.hit-effect .star {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, white 0%, var(--accent-gold) 30%, transparent 70%);
  border-radius: 50%;
}

/* ===== PROJECTILE ===== */
.projectile {
  position: absolute;
  z-index: 8;
  border-radius: 50%;
  animation: projectileGlow 0.15s ease-in-out infinite alternate;
}
@keyframes projectileGlow {
  0% { filter: brightness(1); box-shadow: 0 0 8px currentColor; }
  100% { filter: brightness(1.3); box-shadow: 0 0 16px currentColor; }
}

/* ===== CHI TRAIL ===== */
.chi-trail {
  position: absolute;
  z-index: 7;
  border-radius: 50%;
  pointer-events: none;
  animation: chiTrailFade 0.3s ease-out forwards;
}
@keyframes chiTrailFade {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3); }
}

/* ===== ANNOUNCER ===== */
.announcer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  font-family: 'Silkscreen', monospace;
  font-size: 48px;
  font-weight: 700;
  color: var(--accent-gold);
  text-shadow:
    3px 3px 0 rgba(0,0,0,0.8),
    0 0 40px rgba(255,204,0,0.5);
  pointer-events: none;
  animation: announceIn 0.3s ease-out;
}
@keyframes announceIn {
  0% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ===== HIT EFFECT HEAVY ===== */
.hit-effect.heavy .star {
  width: 56px;
  height: 56px;
  background: radial-gradient(circle, white 0%, #ff6644 25%, var(--accent-gold) 50%, transparent 70%);
}

/* ===== DAMAGE NUMBERS ===== */
.damage-number {
  position: absolute;
  z-index: 15;
  pointer-events: none;
  font-family: 'Silkscreen', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #ff4444;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.8), 0 0 6px rgba(255,0,0,0.3);
  animation: dmgFloat 0.8s ease-out forwards;
}
.damage-number.blocked {
  color: #8888aa;
  font-size: 10px;
}
.damage-number.miss {
  color: #ffffff;
  font-size: 14px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.8), 0 0 8px rgba(255,255,255,0.4);
}

/* Killing blow flash */
.ko-flash {
  position: absolute;
  inset: 0;
  background: white;
  pointer-events: none;
  z-index: 30;
  animation: koFlash 0.4s ease-out forwards;
}
@keyframes koFlash {
  0% { opacity: 0.9; }
  30% { opacity: 0.5; }
  100% { opacity: 0; }
}
.damage-number.heavy {
  font-size: 20px;
  color: #ffcc00;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.8), 0 0 12px rgba(255,200,0,0.4);
}
@keyframes dmgFloat {
  0% { transform: translateY(0) scale(1.3); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translateY(-40px) scale(0.8); opacity: 0; }
}

/* ===== SCREEN SHAKE ===== */
.screen-shake {
  animation: screenShake 0.15s ease-out;
}
@keyframes screenShake {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
}
.screen-shake-heavy {
  animation: screenShakeHeavy 0.2s ease-out;
}
@keyframes screenShakeHeavy {
  0%, 100% { transform: translate(0); }
  15% { transform: translate(-5px, 3px); }
  30% { transform: translate(5px, -4px); }
  45% { transform: translate(-4px, -2px); }
  60% { transform: translate(4px, 2px); }
  75% { transform: translate(-2px, 1px); }
  90% { transform: translate(2px, -1px); }
}

/* ===== STATUS OVERLAYS ===== */
.poison-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 80%), rgba(0,200,0,0.15), transparent 40%);
  animation: poisonPulse 1s ease-in-out infinite;
}
@keyframes poisonPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.freeze-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 70%), rgba(100,200,255,0.35), transparent 18%);
}