/* ===== VFX Layer ===== */
    #vfxLayer{ position:absolute; inset:0; pointer-events:none; }
    .vfx{
      position:absolute;
      transform: translate(-50%,-50%);
      font-size: 18px;
      opacity: 0;
      will-change: transform, opacity, filter;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
    }
    @keyframes vfx_pop{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(-10deg);} 20%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-85%) scale(1.25) rotate(12deg);} }
    @keyframes vfx_ring{ 0%{opacity:.0; transform:translate(-50%,-50%) scale(.2);} 15%{opacity:.9;} 100%{opacity:0; transform:translate(-50%,-50%) scale(2.2);} }
    @keyframes vfx_zap{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.6) skewX(-12deg);} 15%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.4) skewX(10deg);} }
    @keyframes vfx_wave{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.4);} 25%{opacity:.9;} 100%{opacity:0; transform:translate(-50%,-50%) scale(2.8);} }
    @keyframes vfx_shards{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.7);} 20%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.6) rotate(40deg);} }

    .vfx.flash{ animation:vfx_zap .55s ease-out forwards; }
    .vfx.power{ animation:vfx_pop .7s ease-out forwards; font-size:20px; }
    .vfx.heal{ animation:vfx_pop .8s ease-out forwards; }
    .vfx.dash{ animation:vfx_zap .6s ease-out forwards; }
    .vfx.shield{ animation:vfx_ring .7s ease-out forwards; }
    .vfx.freeze{ animation:vfx_shards .75s ease-out forwards; }
    .vfx.bomb{ animation:vfx_wave .75s ease-out forwards; font-size:22px; }
    .vfx.swap{ animation:vfx_pop .65s ease-out forwards; }
    .vfx.vamp{ animation:vfx_pop .7s ease-out forwards; }
    .vfx.slow{ animation:vfx_ring .7s ease-out forwards; }
    .vfx.reflect{ animation:vfx_ring .75s ease-out forwards; font-size:20px; }
    .vfx.poison{ animation:vfx_pop .8s ease-out forwards; }
    .vfx.burn{ animation:vfx_pop .8s ease-out forwards; }
    .vfx.silence{ animation:vfx_ring .75s ease-out forwards; }
    .vfx.weaken{ animation:vfx_pop .75s ease-out forwards; }
    .vfx.pull{ animation:vfx_wave .7s ease-out forwards; }
    .vfx.knock{ animation:vfx_wave .7s ease-out forwards; }
    .vfx.pierce{ animation:vfx_zap .65s ease-out forwards; font-size:20px; }
    .vfx.fortify{ animation:vfx_ring .8s ease-out forwards; }
    .vfx.berserk{ animation:vfx_pop .7s ease-out forwards; font-size:20px; }
    .vfx.blink{ animation:vfx_zap .6s ease-out forwards; font-size:20px; }
    .vfx.precision{ animation:vfx_pop .65s ease-out forwards; }
    .vfx.counter{ animation:vfx_ring .7s ease-out forwards; }
    .vfx.stagger{ animation:vfx_pop .7s ease-out forwards; }
    .vfx.regen{ animation:vfx_pop .75s ease-out forwards; }
    .vfx.haste{ animation:vfx_zap .62s ease-out forwards; font-size:20px; }
    .vfx.ward{ animation:vfx_ring .85s ease-out forwards; font-size:20px; }
    .vfx.expose{ animation:vfx_pop .72s ease-out forwards; font-size:20px; }
    .vfx.cleanse{ animation:vfx_ring .78s ease-out forwards; }
    .vfx.thorns{ animation:vfx_pop .68s ease-out forwards; }
    .vfx.shockwave{ animation:vfx_wave .72s ease-out forwards; font-size:20px; }
    .vfx.mark{ animation:vfx_pop .74s ease-out forwards; }
    .vfx.rally{ animation:vfx_ring .80s ease-out forwards; }
    .vfx.execute{ animation:vfx_zap .66s ease-out forwards; font-size:20px; }
    .vfx.brace{ animation:vfx_ring .86s ease-out forwards; }
    .vfx.disarm{ animation:vfx_wave .70s ease-out forwards; }
    .vfx.echo{ animation:vfx_pop .76s ease-out forwards; font-size:20px; }
    .vfx.fortuna{ animation:vfx_pop .78s ease-out forwards; }


/* ===== Hit feedback ===== */
.char.hitRed{
  /* Subtle, sprite-shaped red tint (uses element's own pixels, not a circle overlay) */
  animation: hit_red_tint .14s ease-out forwards;
}

@keyframes hit_red_tint{
  0%{ filter: none; }
  35%{ filter: brightness(1.06) saturate(1.55) sepia(.20) hue-rotate(-20deg); }
  100%{ filter: none; }
}


/* Floating damage text */
@keyframes vfx_dmg{
  /* Match reference: small red number, light white edge, slow rise */
  0%{opacity:0; transform:translate(-50%, 6%) scale(.92); filter: blur(.25px);}
  18%{opacity:1; transform:translate(-50%, -6%) scale(1.02); filter: blur(0px);} 
  100%{opacity:0; transform:translate(-50%, -92%) scale(1.00); filter: blur(0px);} 
}
.vfx.dmg{
  animation: vfx_dmg 1.05s ease-out forwards;
  font-size: 19px;
  font-weight: 950;
  letter-spacing: .1px;
  color: #ff3b3b;
  /* Only RED fill + WHITE outline (no extra colors) */
  -webkit-text-stroke: 2px rgba(255,255,255,0.55);
  /* Strict: red fill + white outline ONLY */
  text-shadow: none;
  filter: none;
}