/* ================================
   Hit FX (APNG) – 32×32 by default
   ================================ */

:root {
  --fx-size: 64px;
  --fx-fade: 120ms; /* small fade-out duration */
}

.hit-effect {
  position: absolute;
  width: var(--fx-size);
  height: var(--fx-size);
  pointer-events: none;
  z-index: 5000;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;

  /* no sprite animation here; we just fade opacity */
  animation: none;
  opacity: 1;
  transition: opacity var(--fx-fade) linear;
}

/* Pick the correct APNG for each variant */
.hit-effect-1 { background-image: url('Effects/Hit_1\(12frames\).png'); }
.hit-effect-2 { background-image: url('Effects/Hit_2\(12frames\).png'); }
.hit-effect-3 { background-image: url('Effects/Hit_3\(12frames\).png');
}
.arrow_hit { background-image: url('Effects/Arrow_Hit.png'); }

@keyframes fx-pop {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}



/* generic styles for any player-locked VFX */
.player-vfx {
  /* the JS sets size / image / anim; you can style glow, etc. here */
  will-change: transform, opacity;
}