/* =============================================================================
   PRIMAL — ANIMATION SHEET  (primal-animations.css)

   ROOT FIX (v3):
   .card.anim-active NO LONGER sets position:relative.
   The old rule had specificity (0,2,0) which beat .gcard { position:absolute }
   at (0,1,0), causing the card to collapse and hide its image every time a
   status effect was applied. Removed entirely — .gcard is already
   position:absolute and needs no override.

   All inset box-shadow removed from kf-pulse-glow and kf-kill-glow.
   Colour is communicated via OUTER box-shadow glow only.
   filter is NEVER applied to persistent status effects.
============================================================================= */


/* =============================================================================
   SECTION 0 — VARIABLES
============================================================================= */

:root {
  --anim-stun-color:      #93c5fd;
  --anim-poison-color:    #84cc16;
  --anim-bleed-color:     #dc2626;
  --anim-hemorrhage-color:#7f1d1d;
  --anim-burn-color:      #f97316;
  --anim-para-color:      #a855f7;
  --anim-freeze-color:    #38bdf8;
  --anim-sleep-color:     #818cf8;
  --anim-exhaust-color:   #64748b;
  --anim-broken-color:    #94a3b8;
  --anim-ensnare-color:   #d1d5db;
  --anim-blind-color:     #f8fafc;
  --anim-terrify-color:   #6ee7b7;
  --anim-disease-color:   #4d7c0f;
  --anim-wound-color:     #8c0909;
  --anim-charm-color:     #f472b6;
  --anim-confuse-color:   #d946ef;
  --anim-taunt-color:     #fb923c;
  --anim-mark-color:      #f43f5e;
  --anim-ward-color:      #06b6d4;
  --anim-camo-color:      #10b981;
  --anim-heal-color:      #4ade80;
  --anim-shield-color:    #7dd3fc;
  --anim-gold-color:      #fbbf24;
  --anim-death-color:     #1e1e2e;
  --anim-nuclear-color:   #bef264;
}

/*
  .card.anim-active — INTENTIONALLY EMPTY.
  Previously set position:relative which overrode .gcard { position:absolute }
  and caused cards to collapse, hiding their images. Removed.
  .gcard is already positioned (absolute) — no override needed.
*/

/* Particle container injected by JS engine */
.anim-particle-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  overflow: visible;
}


/* =============================================================================
   SECTION 1 — KEYFRAME LIBRARY
============================================================================= */

/* --- Shakes & physical transforms --- */
@keyframes kf-shake-hard {
  0%,100% { transform: translateX(0) rotate(0deg); }
  10%     { transform: translateX(-6px) rotate(-2deg); }
  20%     { transform: translateX(6px)  rotate(2deg); }
  30%     { transform: translateX(-5px) rotate(-1.5deg); }
  40%     { transform: translateX(5px)  rotate(1.5deg); }
  50%     { transform: translateX(-4px) rotate(-1deg); }
  60%     { transform: translateX(4px)  rotate(1deg); }
  70%     { transform: translateX(-2px) rotate(-0.5deg); }
  80%     { transform: translateX(2px)  rotate(0.5deg); }
  90%     { transform: translateX(-1px) rotate(0deg); }
}
@keyframes kf-shake-light {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-3px); }
  50%     { transform: translateX(3px); }
  75%     { transform: translateX(-2px); }
}
@keyframes kf-wobble {
  0%,100% { transform: rotate(0deg); }
  20%     { transform: rotate(-4deg); }
  40%     { transform: rotate(4deg); }
  60%     { transform: rotate(-3deg); }
  80%     { transform: rotate(2deg); }
}
@keyframes kf-squeeze {
  0%,100% { transform: scale(1, 1); }
  25%     { transform: scale(0.88, 1.08); }
  50%     { transform: scale(1.06, 0.94); }
  75%     { transform: scale(0.94, 1.04); }
}
@keyframes kf-thump {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.07); }
  30%  { transform: scale(0.95); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes kf-droop {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(4px) rotate(-1.5deg); }
}
@keyframes kf-scale-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.12); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes kf-scale-in {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes kf-collapse-x {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(0.92) scaleY(1.04); }
  100% { transform: scaleX(1); }
}
@keyframes kf-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes kf-spin-fast {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(1.04); }
  50%  { transform: rotate(180deg) scale(0.97); }
  75%  { transform: rotate(270deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes kf-orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r, 38px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-r, 38px)) rotate(-360deg); }
}
@keyframes kf-trample-slam {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-8px) scale(1, 0.96); }
  55%  { transform: translateY(4px) scale(1.08, 0.92); }
  75%  { transform: translateY(-2px) scale(0.98, 1.02); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes kf-web-tighten {
  0%,100% { transform: scale(1); }
  40%     { transform: scale(0.96) rotate(-1deg); }
  60%     { transform: scale(0.97) rotate(0.5deg); }
}

/* --- Glows (OUTER box-shadow only — no inset) --- */
@keyframes kf-pulse-glow {
  0%,100% { box-shadow: 0 0 6px 2px currentColor; }
  50%     { box-shadow: 0 0 22px 7px currentColor; }
}
@keyframes kf-ripple-out {
  0%   { box-shadow: 0 0 0 0px currentColor; opacity: 1; }
  100% { box-shadow: 0 0 0 28px currentColor; opacity: 0; }
}
@keyframes kf-taunt-pulse {
  0%,100% { box-shadow: 0 0 0 0 #fb923c00; transform: scale(1); }
  30%     { box-shadow: 0 0 0 10px #fb923c88; transform: scale(1.04); }
  60%     { box-shadow: 0 0 0 4px #fb923c44; transform: scale(0.98); }
}
@keyframes kf-target-ping {
  0%   { box-shadow: 0 0 0 0 #f43f5ecc; }
  70%  { box-shadow: 0 0 0 20px #f43f5e00; }
  100% { box-shadow: 0 0 0 0 #f43f5e00; }
}
@keyframes kf-ward-dome {
  0%   { box-shadow: 0 0 0 0 #06b6d4aa; }
  50%  { box-shadow: 0 0 16px 6px #06b6d488; }
  100% { box-shadow: 0 0 0 0 #06b6d400; }
}
@keyframes kf-shatter-ripple {
  0%   { box-shadow: 0 0 0 0 #94a3b8aa, 0 0 0 0 #94a3b855; }
  50%  { box-shadow: 0 0 0 12px #94a3b844, 0 0 0 22px #94a3b822; }
  100% { box-shadow: 0 0 0 20px transparent, 0 0 0 36px transparent; }
}
@keyframes kf-constrict-ring {
  0%,100% { box-shadow: 0 0 0 0 #166534aa; transform: scale(1); }
  40%     { box-shadow: 0 0 0 8px #166534cc; transform: scale(0.95) rotate(-1deg); }
  70%     { box-shadow: 0 0 0 4px #166534aa; transform: scale(0.97) rotate(0.5deg); }
}
@keyframes kf-water-ripple {
  0%   { box-shadow: 0 0 0 0 #38bdf8aa, 0 0 0 0 #0ea5e988; }
  100% { box-shadow: 0 0 0 24px #38bdf800, 0 0 0 40px #0ea5e900; }
}
@keyframes kf-death-burst-ring {
  0%   { box-shadow: 0 0 0 0 #dc2626cc, 0 0 0 0 #7f1d1d88; }
  100% { box-shadow: 0 0 0 40px #dc262600, 0 0 0 70px #7f1d1d00; }
}
@keyframes kf-aoe-shockwave {
  0%   { box-shadow: 0 0 0 0 #f97316cc; transform: scale(1); }
  30%  { box-shadow: 0 0 0 20px #f9731688; transform: scale(1.06); }
  60%  { box-shadow: 0 0 0 40px #f9731622; transform: scale(1.02); }
  100% { box-shadow: 0 0 0 60px transparent; transform: scale(1); }
}
@keyframes kf-electric-arc {
  0%,100% { box-shadow: none; filter: brightness(1); }
  10%     { box-shadow: 0 0 14px 5px #a855f7; filter: brightness(1.6); }
  20%     { box-shadow: none; filter: brightness(1); }
  35%     { box-shadow: 0 0 10px 3px #a855f7; filter: brightness(1.4); }
  50%     { box-shadow: none; filter: brightness(1); }
  65%     { box-shadow: 0 0 12px 4px #a855f7; filter: brightness(1.5); }
  80%     { box-shadow: none; filter: brightness(1); }
}
@keyframes kf-lifesteal-pulse {
  0%   { box-shadow: 0 0 0 0 #dc2626aa; }
  50%  { box-shadow: 0 0 24px 8px #dc262688; }
  100% { box-shadow: 0 0 0 0 #dc262600; }
}
@keyframes kf-shield-flash {
  0%   { box-shadow: 0 0 0 0 #7dd3fccc; filter: brightness(1); }
  20%  { box-shadow: 0 0 20px 8px #7dd3fcaa; filter: brightness(1.3); }
  60%  { box-shadow: 0 0 8px 2px #7dd3fc44; filter: brightness(1.1); }
  100% { box-shadow: 0 0 0 0 #7dd3fc00; filter: brightness(1); }
}
@keyframes kf-heal-burst {
  0%   { box-shadow: 0 0 0 0 #4ade80cc; filter: brightness(1); }
  25%  { box-shadow: 0 0 22px 8px #4ade8088; filter: brightness(1.25); }
  70%  { box-shadow: 0 0 6px 2px #4ade8033; filter: brightness(1.05); }
  100% { box-shadow: 0 0 0 0 #4ade8000; filter: brightness(1); }
}
@keyframes kf-nuke-wave {
  0%   { box-shadow: 0 0 0 0 #bef26499; transform: scale(1); filter: brightness(1); }
  20%  { filter: brightness(2.5); transform: scale(1.05); }
  50%  { box-shadow: 0 0 60px 0 #bef26411; filter: brightness(1.2); }
  100% { box-shadow: 0 0 100px 0 transparent; transform: scale(1); filter: brightness(1); }
}

/* --- Brightness-only filters (safe — used only in one-shot animations) --- */
@keyframes kf-flash {
  0%,100% { filter: brightness(1); }
  25%     { filter: brightness(2.0); }
  75%     { filter: brightness(0.85); }
}
@keyframes kf-white-flash {
  0%   { filter: brightness(1); }
  15%  { filter: brightness(2.5); }
  40%  { filter: brightness(1.1); }
  100% { filter: brightness(1); }
}
@keyframes kf-freeze-frame {
  0%   { filter: brightness(1); transform: scale(1); }
  20%  { filter: brightness(1.5); transform: scale(1.02); }
  60%  { filter: brightness(1.2); transform: scale(1.01); }
  100% { filter: brightness(1); transform: scale(1); }
}
@keyframes kf-drain-down {
  0%,100% { filter: brightness(1); transform: translateY(0); }
  50%     { filter: brightness(0.85); transform: translateY(2px); }
}
@keyframes kf-dormant-pulse {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(0.9); }
}
@keyframes kf-radiation-flicker {
  0%,100% { filter: brightness(1); }
  15%     { filter: brightness(1.6); }
  30%     { filter: brightness(1); }
  55%     { filter: brightness(1.4); }
  70%     { filter: brightness(1); }
}
@keyframes kf-stat-buff {
  0%   { filter: brightness(1); transform: translateY(0) scale(1); }
  30%  { filter: brightness(1.4); transform: translateY(-3px) scale(1.04); }
  60%  { filter: brightness(1.15); transform: translateY(-1px) scale(1.01); }
  100% { filter: brightness(1); transform: translateY(0) scale(1); }
}
@keyframes kf-stat-debuff {
  0%   { filter: brightness(1); transform: scale(1); }
  30%  { filter: brightness(0.8); transform: scale(0.96); }
  60%  { filter: brightness(0.9); transform: scale(0.98); }
  100% { filter: brightness(1); transform: scale(1); }
}
@keyframes kf-mind-wave {
  0%,100% { transform: scale(1); filter: brightness(1); }
  25%     { transform: scale(1.03); filter: brightness(1.2); }
  50%     { transform: scale(0.98); filter: brightness(0.95); }
  75%     { transform: scale(1.02); filter: brightness(1.15); }
}
@keyframes kf-revive-rise {
  0%   { transform: translateY(12px) scale(0.9); opacity: 0; filter: brightness(2.5); }
  40%  { transform: translateY(-4px) scale(1.06); opacity: 1; filter: brightness(1.6); }
  100% { transform: translateY(0) scale(1); opacity: 1; filter: brightness(1); }
}
@keyframes kf-blur-pulse {
  0%,100% { filter: blur(0px) brightness(1); }
  30%     { filter: blur(1.5px) brightness(1.2); }
  60%     { filter: blur(0.5px) brightness(0.95); }
}

/* --- Miscellaneous --- */
@keyframes kf-strobe {
  0%,20%,40%,60%,80%,100% { opacity: 1; }
  10%,30%,50%,70%,90%     { opacity: 0.55; }
}
@keyframes kf-float-up {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-40px); opacity: 0; }
}
@keyframes kf-fade-in-out {
  0%,100% { opacity: 0; }
  30%,70% { opacity: 1; }
}
@keyframes kf-hearts-drift {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-50px) scale(0.5) rotate(20deg); opacity: 0; }
}
@keyframes kf-ember-drift {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 1; }
  100% { transform: translateY(-55px) translateX(calc(var(--drift, 1) * 20px)) scale(0.3); opacity: 0; }
}
@keyframes kf-dot-drip {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(30px) scale(0.6); opacity: 0; }
}
@keyframes kf-camo-fade {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.72; }
}


/* =============================================================================
   SECTION 2 — STATUS EFFECT CLASSES
   Only transform + outer box-shadow. No inset. No face-covering.
============================================================================= */

/* ── STUNNED  💫 */
.card.anim-stunned {
  animation: kf-shake-hard 0.6s ease-in-out,
             kf-pulse-glow 1.4s ease-in-out infinite;
  color: var(--anim-stun-color);
}

/* ── PARALYSED  ⚡ */
.card.anim-paralysed {
  animation: kf-electric-arc 0.9s steps(1) infinite;
}

/* ── FROZEN  🧊 */
.card.anim-frozen {
  animation: kf-freeze-frame 0.5s ease-out,
             kf-shake-light 0.5s ease-in-out,
             kf-pulse-glow 1.8s ease-in-out 0.5s infinite;
  color: var(--anim-freeze-color);
}
/* Thin border ring on frozen — outline only, never covers image */
.card.anim-frozen::after {
  content: '';
  position: absolute; inset: -2px;
  border: 2px solid rgba(56,189,248,0.5);
  border-radius: inherit;
  background: transparent;
  pointer-events: none; z-index: 13;
}

/* ── SLEEPING  💤 */
.card.anim-sleeping {
  animation: kf-droop 2.5s ease-in-out infinite,
             kf-pulse-glow 2.5s ease-in-out infinite;
  color: var(--anim-sleep-color);
}

/* ── ENVENOMATED  🧪 */
.card.anim-envenomated {
  animation: kf-pulse-glow 1.8s ease-in-out infinite;
  color: var(--anim-poison-color);
}

/* ── LACERATED  🩸 */
.card.anim-lacerated {
  animation: kf-droop 2s ease-in-out infinite,
             kf-pulse-glow 2s ease-in-out infinite;
  color: var(--anim-bleed-color);
}

/* ── HAEMORRHAGING  💥 */
.card.anim-hemorrhage {
  animation: kf-ripple-out 1s ease-out infinite,
             kf-pulse-glow 1s ease-in-out infinite;
  color: var(--anim-hemorrhage-color);
}

/* ── BURNT  🔥 */
.card.anim-burnt {
  animation: kf-pulse-glow 1.2s ease-in-out infinite;
  color: var(--anim-burn-color);
}

/* ── EXHAUSTED  🥱 */
.card.anim-exhausted {
  animation: kf-drain-down 2.5s ease-in-out infinite,
             kf-pulse-glow 2.5s ease-in-out infinite;
  color: var(--anim-exhaust-color);
}

/* ── BROKEN  🦴 */
.card.anim-broken {
  animation: kf-shatter-ripple 0.5s ease-out,
             kf-shake-light 0.3s ease-in-out;
}
.card.anim-broken-persistent {
  animation: kf-dormant-pulse 3s ease-in-out infinite,
             kf-pulse-glow 3s ease-in-out infinite;
  color: var(--anim-broken-color);
}

/* ── ENSNARED  🕸️ */
.card.anim-ensnared {
  animation: kf-web-tighten 1.6s ease-in-out infinite,
             kf-collapse-x 1.6s ease-in-out infinite,
             kf-pulse-glow 1.6s ease-in-out infinite;
  color: var(--anim-ensnare-color);
}

/* ── BLINDED  🙈 (intentional 1.5px blur — capped so image remains readable) */
.card.anim-blinded {
  animation: kf-white-flash 0.4s ease-out,
             kf-blur-pulse 2s ease-in-out 0.4s infinite;
}

/* ── TERRIFIED  😱 */
.card.anim-terrified {
  animation: kf-wobble 0.5s ease-in-out infinite,
             kf-pulse-glow 0.7s ease-in-out infinite;
  color: var(--anim-terrify-color);
}

/* ── DISEASED  🦠 */
.card.anim-diseased {
  animation: kf-wobble 4s ease-in-out infinite,
             kf-pulse-glow 3s ease-in-out infinite;
  color: var(--anim-disease-color);
}

/* ── WOUNDED  🩹 */
.card.anim-wounded {
  animation: kf-droop 3s ease-in-out infinite,
             kf-pulse-glow 2.5s ease-in-out infinite;
  color: var(--anim-wound-color);
}

/* ── CHARMED  💖 */
.card.anim-charmed {
  animation: kf-scale-pop 1.5s ease-in-out infinite,
             kf-pulse-glow 1.5s ease-in-out infinite;
  color: var(--anim-charm-color);
}

/* ── CONFUSED  🌀 */
.card.anim-confused {
  animation: kf-wobble 2.5s ease-in-out infinite,
             kf-pulse-glow 1.8s ease-in-out infinite;
  color: var(--anim-confuse-color);
}

/* ── PROVOKED / TAUNTED  🗯️ */
.card.anim-taunted {
  animation: kf-taunt-pulse 0.9s ease-in-out infinite;
}

/* ── MARKED  🎯 */
.card.anim-marked {
  animation: kf-target-ping 1s ease-out infinite;
  color: var(--anim-mark-color);
}

/* ── WARDED  🛡️ */
.card.anim-warded {
  animation: kf-ward-dome 1.8s ease-in-out infinite;
}

/* ── CAMOUFLAGED  🍃 */
.card.anim-camouflaged {
  animation: kf-camo-fade 2.5s ease-in-out infinite,
             kf-pulse-glow 2.5s ease-in-out infinite;
  color: var(--anim-camo-color);
}


/* =============================================================================
   SECTION 3 — ABILITY TRIGGER ANIMATIONS (one-shot)
============================================================================= */

.card.anim-trigger-heal      { animation: kf-heal-burst 0.7s ease-out forwards; }
.card.anim-trigger-shield    { animation: kf-shield-flash 0.6s ease-out forwards; }
.card.anim-trigger-apply-status {
  animation: kf-pulse-glow 0.5s ease-out forwards;
  color: #a855f7;
}
.card.anim-trigger-dot       { animation: kf-aoe-shockwave 0.4s ease-out forwards; color: var(--anim-poison-color); }
.card.anim-trigger-recoil    { animation: kf-death-burst-ring 0.5s ease-out forwards; }
.card.anim-trigger-lifesteal { animation: kf-lifesteal-pulse 0.7s ease-out forwards; }
.card.anim-trigger-aoe       { animation: kf-aoe-shockwave 0.8s ease-out forwards; }
.card.anim-trigger-damage-reduction {
  animation: kf-flash 0.3s ease-out forwards, kf-scale-pop 0.3s ease-out forwards;
}
.card.anim-trigger-cond-bonus  { animation: kf-stat-buff 0.5s ease-out forwards; }
.card.anim-trigger-stat-buff   { animation: kf-stat-buff 0.6s ease-out forwards; }
.card.anim-trigger-stat-debuff { animation: kf-stat-debuff 0.6s ease-out forwards; }


/* =============================================================================
   SECTION 4 — UNIQUE MECHANIC ANIMATIONS
============================================================================= */

/* ── SUBMERGE  🌊 */
.card.anim-trigger-submerge { animation: kf-water-ripple 0.6s ease-out forwards; }
.card.anim-submerged {
  animation: kf-pulse-glow 2.5s ease-in-out infinite;
  color: var(--anim-freeze-color);
}

/* ── FLOATING LOG  🐊 */
.card.anim-floating-log {
  animation: kf-wobble 4s ease-in-out infinite,
             kf-pulse-glow 4s ease-in-out infinite;
  color: #15803d;
}

/* ── CONSTRICT  🐍 */
.card.anim-trigger-constrict {
  animation: kf-constrict-ring 1.2s ease-in-out forwards,
             kf-squeeze 1.2s ease-in-out forwards;
}

/* ── MIND CONTROL  🧠 */
.card.anim-trigger-mind-control { animation: kf-mind-wave 1s ease-in-out forwards; }

/* ── CARNIVOROUS TRAP  🌿 */
.card.anim-trigger-trap {
  animation: kf-squeeze 0.3s ease-in 0s,
             kf-aoe-shockwave 0.4s ease-out 0.3s forwards;
}

/* ── TRAMPLE  🦏 */
.card.anim-trigger-trample { animation: kf-trample-slam 0.5s ease-out forwards; }

/* ── REVIVE ONCE  🔥 */
.card.anim-trigger-revive { animation: kf-revive-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* ── DEATH BURST  💀 */
.card.anim-trigger-death-burst { animation: kf-death-burst-ring 0.6s ease-out forwards; }

/* ── MARK FOR DEATH  🎯 */
.card.anim-trigger-mark-death { animation: kf-target-ping 0.3s ease-out 3; }

/* ── GENETIC SCRAMBLE  🧬 */
.card.anim-trigger-genetic-scramble {
  animation: kf-spin-fast 0.4s linear 2,
             kf-mind-wave 0.8s ease-in-out 0.4s forwards;
}

/* ── NUCLEAR STRIKE  ☢️ */
.card.anim-trigger-nuclear   { animation: kf-nuke-wave 1.2s ease-out forwards; }
.card.anim-nuclear-fallout {
  animation: kf-radiation-flicker 2s ease-in-out infinite,
             kf-pulse-glow 2s ease-in-out infinite;
  color: var(--anim-nuclear-color);
}

/* ── ABILITY SUPPRESSION  🔇 */
.card.anim-trigger-suppressed {
  animation: kf-stat-debuff 0.5s ease-out forwards,
             kf-pulse-glow 0.5s ease-out forwards;
  color: var(--anim-exhaust-color);
}

/* ── STACKING REGEN ON KILL  ♻️ */
.card.anim-trigger-regen-stack {
  animation: kf-heal-burst 0.5s ease-out forwards,
             kf-scale-pop 0.5s ease-out forwards;
}

/* ── WHIPSHOT  🎯 */
.card.anim-trigger-whipshot {
  animation: kf-thump 0.25s ease-out forwards;
  transform-origin: left center;
}

/* ── CHARM ATTACKER  💘 */
.card.anim-trigger-charm {
  animation: kf-scale-pop 0.5s ease-out forwards,
             kf-pulse-glow 0.5s ease-out forwards;
  color: var(--anim-charm-color);
}

/* ── ECHOLOCATION  🦇 */
.card.anim-trigger-echolocation {
  animation: kf-water-ripple 0.7s ease-out forwards,
             kf-flash 0.3s ease-out forwards;
}

/* ── REACTIVE LANE SHIFT  ↔️ */
.card.anim-trigger-lane-shift { animation: kf-thump 0.4s ease-out forwards; }

/* ── PATHOGEN: SPREADING DAMAGE  🦠 */
.card.anim-trigger-pathogen-spread { animation: kf-aoe-shockwave 0.7s ease-out forwards; }

/* ── PATHOGEN: COUNTDOWN KILL  💀⏱️ */
.card.anim-pathogen-countdown { animation: kf-strobe 0.8s steps(1) infinite; }
.card.anim-pathogen-countdown-final {
  animation: kf-strobe 0.2s steps(1) infinite,
             kf-pulse-glow 0.2s ease-in-out infinite;
  color: var(--anim-bleed-color);
}

/* ── PATHOGEN: BERSERK VIRUS  😡🦠 */
.card.anim-pathogen-berserk {
  animation: kf-shake-light 0.4s ease-in-out infinite,
             kf-pulse-glow 0.6s ease-in-out infinite;
  color: #dc2626;
}

/* ── PATHOGEN: DEATH CASCADE  💀💀 */
.card.anim-trigger-death-cascade { animation: kf-death-burst-ring 0.8s ease-out forwards; }


/* =============================================================================
   SECTION 5 — PARTICLE ELEMENT STYLES
============================================================================= */

.anim-bird {
  position: absolute;
  font-size: 14px; top: 50%; left: 50%;
  --orbit-r: 42px;
  animation: kf-orbit 1.2s linear infinite;
  transform-origin: 0 0;
}
.anim-z {
  position: absolute;
  font-size: 18px; color: #818cf8;
  font-weight: 900; font-family: serif; bottom: 5px;
  animation: kf-float-up 2s ease-out forwards;
}
.anim-heart {
  position: absolute;
  font-size: 16px; color: #f472b6;
  animation: kf-hearts-drift 1.2s ease-out forwards;
}
.anim-ember {
  position: absolute;
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(#fef08a, #f97316);
  animation: kf-ember-drift 1.1s ease-out forwards;
}
.anim-bubble {
  position: absolute;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(#a3e635aa, #4d7c0f88);
  border: 1px solid #84cc16;
  animation: kf-float-up 1.5s ease-in-out forwards;
}
.anim-drip {
  position: absolute;
  width: 4px; border-radius: 0 0 4px 4px; background: #dc2626;
  animation: kf-dot-drip 1s ease-in forwards;
}
.anim-sparkle {
  position: absolute;
  width: 6px; height: 6px; background: var(--anim-heal-color);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: kf-float-up 1s ease-out forwards;
}
.anim-stat-number {
  position: absolute;
  font-size: 13px; font-weight: 800; font-family: monospace;
  pointer-events: none;
  text-shadow: 0 1px 3px #000a;
  animation: kf-float-up 1.2s ease-out forwards;
}
.anim-stat-number.buff   { color: var(--anim-gold-color); }
.anim-stat-number.debuff { color: var(--anim-bleed-color); }
.anim-sonar-ring {
  position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid #c4b5fdaa;
  animation: kf-ripple-out 0.8s ease-out forwards;
  color: #c4b5fd;
}
.anim-radiation-symbol {
  position: absolute; top: 4px; right: 4px;
  font-size: 16px; opacity: 0.85;
  animation: kf-spin 4s linear infinite, kf-fade-in-out 2s ease-in-out infinite;
}


/* =============================================================================
   SECTION 6 — ACTIVE TURN INDICATOR
============================================================================= */

@keyframes kf-active-turn {
  0%, 100% {
    box-shadow: 0 0 0 3px #fbbf24, 0 0 15px #fbbf24aa;
    filter: brightness(1.1);
    transform: scale(1.04) translateY(-4px);
  }
  50% {
    box-shadow: 0 0 0 5px #fde047, 0 0 25px #fde047;
    filter: brightness(1.25);
    transform: scale(1.07) translateY(-8px);
  }
}
.gcard.anim-active-turn {
  animation: kf-active-turn 1.2s ease-in-out infinite !important;
  z-index: 50 !important;
}


/* =============================================================================
   SECTION 7 — COMBAT IMPACT REACTIONS
============================================================================= */

.action-icon-overlay {
  position: absolute; top: 50%; left: 50%;
  width: 42px; height: 42px; pointer-events: none; z-index: 25;
  animation: kf-action-icon 0.5s ease-out forwards;
}
@keyframes kf-action-icon {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.85; }
  35%  { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

@keyframes kf-hit-glow {
  0%   { box-shadow: none; }
  20%  { box-shadow: 0 0 0 3px #ef4444; }
  100% { box-shadow: none; }
}
.anim-flash {
  animation: kf-hit-glow 0.4s ease-out, kf-shake-hard 0.35s ease-in-out !important;
}

/* Kill: brief brightness dip — fast, reads as a death moment */
@keyframes kf-kill-glow {
  0%   { box-shadow: none; filter: brightness(1); }
  20%  { box-shadow: 0 0 0 5px #7f1d1d; filter: brightness(0.6); }
  65%  { filter: brightness(0.4); }
  100% { box-shadow: none; filter: brightness(1); }
}
.anim-kill {
  animation: kf-kill-glow 0.7s ease-out forwards, kf-shake-hard 0.35s ease-in-out;
}

@keyframes kf-heal-glow {
  0%   { box-shadow: none; }
  30%  { box-shadow: 0 0 0 4px #4ade80; }
  100% { box-shadow: none; }
}
.anim-healed { animation: kf-heal-glow 0.65s ease-out; }

@keyframes kf-buff-glow {
  0%   { box-shadow: none; transform: scale(1); }
  30%  { box-shadow: 0 0 0 4px #fbbf24; transform: scale(1.04); }
  100% { box-shadow: none; transform: scale(1); }
}
.anim-buffed { animation: kf-buff-glow 0.6s ease-out; }

@keyframes kf-debuff-glow {
  0%   { box-shadow: none; }
  30%  { box-shadow: 0 0 0 4px #a855f7; }
  100% { box-shadow: none; }
}
.anim-debuffed { animation: kf-debuff-glow 0.55s ease-out; }