/* ── VFX Layer ────────────────────────────────────── */
#layer-vfx {
  pointer-events: none;
  z-index: 6;
}

/* ── VFX Particle Base ────────────────────────────── */
.vfx-particle {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  border-radius: 50%;
  top: 0;
  left: 0;
}

.vfx-particle-sharp {
  border-radius: 2px;
}

.vfx-text {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  top: 0;
  left: 0;
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  font-weight: 700;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
  white-space: nowrap;
}

.vfx-ring {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  border-radius: 50%;
  border-style: solid;
  top: 0;
  left: 0;
}

.vfx-beam {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
}

/* ── Keyframes ────────────────────────────────────── */

@keyframes vfx-burst {
  0% {
    transform: translate(var(--vfx-ox), var(--vfx-oy)) scale(1);
    opacity: var(--vfx-alpha, 0.9);
  }
  100% {
    transform: translate(
      calc(var(--vfx-ox) + var(--vfx-dx)),
      calc(var(--vfx-oy) + var(--vfx-dy))
    ) scale(0);
    opacity: 0;
  }
}

@keyframes vfx-rise-fade {
  0% {
    transform: translate(var(--vfx-ox), var(--vfx-oy)) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--vfx-ox), calc(var(--vfx-oy) - 3rem)) scale(0.7);
    opacity: 0;
  }
}

@keyframes vfx-ring-expand {
  0% {
    transform: translate(var(--vfx-ox), var(--vfx-oy)) translate(-50%, -50%) scale(0.3);
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--vfx-ox), var(--vfx-oy)) translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

@keyframes vfx-afterimage {
  0% {
    opacity: var(--vfx-alpha, 0.5);
    transform: translate(var(--vfx-ox), var(--vfx-oy)) scale(var(--vfx-scale, 1));
  }
  100% {
    opacity: 0;
    transform: translate(var(--vfx-ox), var(--vfx-oy)) scale(calc(var(--vfx-scale, 1) * 0.6));
  }
}

@keyframes vfx-beam-down {
  0% {
    clip-path: inset(0% 35% 100% 35%);
    opacity: 0.8;
  }
  40% {
    clip-path: inset(0% 25% 0% 25%);
    opacity: 1;
  }
  100% {
    clip-path: inset(100% 40% 0% 40%);
    opacity: 0;
  }
}

@keyframes vfx-swirl {
  0% {
    transform: translate(var(--vfx-ox), var(--vfx-oy))
               rotate(var(--vfx-rot, 0deg))
               translateX(var(--vfx-radius, 2rem))
               scale(0);
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: translate(var(--vfx-ox), var(--vfx-oy))
               rotate(calc(var(--vfx-rot, 0deg) + 180deg))
               translateX(calc(var(--vfx-radius, 2rem) * 0.5))
               scale(1);
  }
  100% {
    transform: translate(var(--vfx-ox), var(--vfx-oy))
               rotate(calc(var(--vfx-rot, 0deg) + 360deg))
               translateX(0)
               scale(0.3);
    opacity: 0;
  }
}

@keyframes vfx-confetti {
  0% {
    transform: translate(var(--vfx-ox), -0.5rem) rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translate(
      calc(var(--vfx-ox) + var(--vfx-dx)),
      calc(var(--vfx-oy) + 12rem)
    ) rotate(720deg);
    opacity: 0;
  }
}

/* ── Game Over grayscale wash ─────────────────────── */
/* Apply to game layers only — NOT to animation-slot overlays so the   */
/* Game Over splash, buttons, and text remain full-color.              */
#game-viewport.vfx-gameover #layer-background,
#game-viewport.vfx-gameover #layer-effects,
#game-viewport.vfx-gameover #low-health-vignette,
#game-viewport.vfx-gameover #layer-gameplay,
#game-viewport.vfx-gameover #layer-vfx,
#game-viewport.vfx-gameover #layer-hud {
  filter: grayscale(0.8) brightness(0.7);
  transition: filter 0.6s ease;
}

/* ── Confetti piece (dedication modal) ────────────── */
.confetti-piece {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  border-radius: 2px;
  top: 0;
  left: 0;
}

/* ── Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vfx-particle,
  .vfx-text,
  .vfx-ring,
  .vfx-beam {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}