/* ==========================================================================
   THỦY HỬ 9V9 - BỘ HOẠT HỌA 17 TRẠNG THÁI (VFX OVERLAY & CHARACTER ANIMATIONS)
   Đồng bộ 1:1 tọa độ 512x512 của ảnh hoạt họa VFX phủ lên thân tướng (hero_target.png)
   ========================================================================== */

#statusTargetBodyBox {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#statusVfxOverlayImg {
  position: absolute;
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  user-select: none;
  z-index: 20;
  mix-blend-mode: screen;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform-origin: bottom center;
  will-change: opacity, filter;
}

/* [01] CHOÁNG VÁNG (Stun) */
.vfx-stun-stars {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxStunHaloOrbit 1.8s ease-in-out infinite;
}
.figure-anim-stun {
  animation: figStunDizzySway 2.4s ease-in-out infinite;
  transform-origin: bottom center;
  filter: brightness(0.88) saturate(0.85) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.9)) !important;
}

/* [02] ĐÓNG BĂNG (Freeze) - Khối băng tinh thể trong suốt phủ trọn thân tướng */
.vfx-ice-encase {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  mix-blend-mode: normal !important;
  animation: vfxIceCrystalPulse 3.0s ease-in-out infinite;
}
.figure-anim-freeze {
  transform-origin: bottom center;
  filter: saturate(0.58) brightness(1.04) contrast(1.05) drop-shadow(0 0 16px rgba(56, 189, 248, 0.82)) !important;
  animation: figFreezeTremor 2.8s ease-in-out infinite;
}

/* [03] CÂM LẶNG / PHONG MA (Silence) */
.vfx-silence-talisman {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxSilenceSealFloat 2.4s ease-in-out infinite;
}
.figure-anim-silence {
  transform-origin: bottom center;
  filter: saturate(0.72) brightness(0.92) drop-shadow(0 0 16px rgba(168, 85, 247, 0.78)) !important;
}

/* [04] KHIÊU KHÍCH (Taunt) */
.vfx-taunt-rage {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxTauntPulse 1.2s ease-in-out infinite;
}
.figure-anim-taunt {
  transform-origin: bottom center;
  animation: figTauntAgitation 1.1s ease-in-out infinite;
  filter: contrast(1.08) saturate(1.18) drop-shadow(0 0 16px rgba(239, 68, 68, 0.85)) !important;
}

/* [05] MÙ MẮT / LOẠN THỊ (Blind) */
.vfx-blind-smoke {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  mix-blend-mode: normal !important;
  animation: vfxBlindMistDrift 2.2s ease-in-out infinite;
}
.figure-anim-blind {
  transform-origin: bottom center;
  filter: brightness(0.76) contrast(1.06) saturate(0.80) !important;
  animation: figBlindStagger 2.6s ease-in-out infinite;
}

/* [06] ĐẨY LÙI / HẤT VĂNG (Knockback) */
.vfx-knockback-impact {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxKnockbackWave 0.85s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.figure-anim-knockback {
  transform-origin: bottom center;
  animation: figKnockbackRecoil 0.65s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
}

/* [07] CHẢY MÁU (Bleed) */
.vfx-bleed-slash {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxBleedSlashArc 1.4s ease-in-out infinite;
}
.figure-anim-bleed {
  transform-origin: bottom center;
  animation: figBleedFlinch 1.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 14px rgba(220, 38, 38, 0.85)) !important;
}

/* [08] THIÊU ĐỐT (Burn) - Lửa bùng cháy phủ toàn bộ giáp trụ và thân tướng */
.vfx-burn-flame {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  mix-blend-mode: screen !important;
  animation: vfxBurnFlameRise 0.85s ease-in-out infinite alternate;
}
.figure-anim-burn {
  transform-origin: bottom center;
  filter: sepia(0.18) saturate(1.35) brightness(1.05) drop-shadow(0 0 18px rgba(249, 115, 22, 0.90)) !important;
}

/* [09] TRÚNG ĐỘC (Poison) */
.vfx-poison-bubble {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxPoisonBubbleFloat 2.0s ease-in-out infinite;
}
.figure-anim-poison {
  transform-origin: bottom center;
  filter: hue-rotate(45deg) saturate(1.18) brightness(0.92) drop-shadow(0 0 14px rgba(34, 197, 94, 0.78)) !important;
}

/* [10] PHÁ GIÁP (Armor Break) */
.vfx-armor-shatter {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxArmorShatterBurst 1.5s ease-in-out infinite;
}
.figure-anim-armor-break {
  transform-origin: bottom center;
  animation: figArmorBreakStagger 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(234, 179, 8, 0.78)) !important;
}

/* [11] TRỪ NỘ / ĐOẠT KHÍ (Rage Drain) */
.vfx-rage-drain-swirl {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxRageDrainVortex 2.2s ease-in-out infinite;
}
.figure-anim-rage-drain {
  transform-origin: bottom center;
  filter: brightness(0.86) saturate(0.78) drop-shadow(0 0 16px rgba(129, 140, 248, 0.85)) !important;
}

/* [12] HỒI NỘ / TỤ KHÍ (Rage Surge) */
.vfx-rage-surge-dragon {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxRageSurgeAscend 1.5s ease-in-out infinite;
}
.figure-anim-rage-surge {
  transform-origin: bottom center;
  filter: brightness(1.10) drop-shadow(0 0 20px rgba(234, 179, 8, 0.92)) !important;
  animation: figPowerFloat 1.6s ease-in-out infinite;
}

/* [13] PHẢN ĐÒN (Counter / Reflect) */
.vfx-reflect-shield {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxBaguaThornsRotate 2.4s ease-in-out infinite;
}
.figure-anim-reflect {
  transform-origin: bottom center;
  filter: brightness(1.06) drop-shadow(0 0 16px rgba(245, 158, 11, 0.85)) !important;
}

/* [14] HỘ THỂ KIM LIÊN (Lotus Shield) */
.vfx-shield-lotus {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxLotusShieldBreathe 2.4s ease-in-out infinite;
}
.figure-anim-shield {
  transform-origin: bottom center;
  filter: brightness(1.06) drop-shadow(0 0 18px rgba(250, 204, 21, 0.85)) !important;
}

/* [15] BẤT TỬ (Immunity / Unyielding) */
.vfx-immortal-halo {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxImmortalSanctuary 2.0s ease-in-out infinite;
}
.figure-anim-immortal {
  transform-origin: bottom center;
  filter: brightness(1.12) drop-shadow(0 0 22px rgba(253, 224, 71, 0.92)) !important;
}

/* [16] CUỒNG NỘ (Berserk) */
.vfx-berserk-aura {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxBerserkSurge 0.85s ease-in-out infinite alternate;
}
.figure-anim-berserk {
  transform-origin: bottom center;
  filter: contrast(1.12) saturate(1.28) drop-shadow(0 0 20px rgba(220, 38, 38, 0.92)) !important;
  animation: figBerserkTremor 0.9s ease-in-out infinite;
}

/* [17] THẦN HÀNH (Swiftness) */
.vfx-swiftness-wind {
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  animation: vfxSwiftWindFlow 1.4s ease-in-out infinite;
}
.figure-anim-swift {
  transform-origin: bottom center;
  animation: figSwiftAfterimage 1.4s ease-in-out infinite;
  filter: drop-shadow(-8px 0 12px rgba(20, 184, 166, 0.78)) !important;
}

/* KEYFRAMES: Quang phổ & độ sáng sống động (chuyển động sóng lửa/khói/hào quang thực thi 60fps trên Canvas từ chính ảnh hoạt họa) */
@keyframes vfxStunHaloOrbit {
  0%, 100% { opacity: 0.92; filter: brightness(1.05) contrast(1.10) drop-shadow(0 0 14px rgba(250, 204, 21, 0.85)); }
  50% { opacity: 1; filter: brightness(1.22) contrast(1.18) drop-shadow(0 0 24px rgba(254, 240, 138, 1)); }
}
@keyframes figStunDizzySway {
  0%, 100% { transform: scaleY(0.994) skewX(-0.45deg); }
  50% { transform: scaleY(0.986) skewX(0.45deg); }
}
@keyframes vfxIceCrystalPulse {
  0%, 100% { opacity: 0.94; filter: brightness(1.02) contrast(1.06) drop-shadow(0 0 14px rgba(56, 189, 248, 0.75)); }
  50% { opacity: 1; filter: brightness(1.12) contrast(1.10) drop-shadow(0 0 22px rgba(125, 211, 252, 0.95)); }
}
@keyframes figFreezeTremor {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1); }
}
@keyframes vfxSilenceSealFloat {
  0%, 100% { opacity: 0.92; filter: brightness(1.04) contrast(1.12) drop-shadow(0 0 14px rgba(168, 85, 247, 0.82)); }
  50% { opacity: 1; filter: brightness(1.18) contrast(1.16) drop-shadow(0 0 22px rgba(192, 132, 252, 0.98)); }
}
@keyframes vfxTauntPulse {
  0%, 100% { opacity: 0.92; filter: brightness(1.05) contrast(1.12) drop-shadow(0 0 14px rgba(239, 68, 68, 0.82)); }
  50% { opacity: 1; filter: brightness(1.22) contrast(1.18) drop-shadow(0 0 24px rgba(248, 113, 113, 0.98)); }
}
@keyframes figTauntAgitation {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(1.012) scaleX(1.006); }
}
@keyframes vfxBlindMistDrift {
  0%, 100% { opacity: 0.90; filter: brightness(1.02) contrast(1.10); }
  50% { opacity: 0.98; filter: brightness(1.14) contrast(1.15); }
}
@keyframes figBlindStagger {
  0%, 100% { transform: scaleY(0.994) skewX(-0.45deg); }
  50% { transform: scaleY(0.988) skewX(0.45deg); }
}
@keyframes vfxKnockbackWave {
  0%, 100% { opacity: 0.88; filter: brightness(1.05) contrast(1.12) drop-shadow(0 0 14px rgba(249, 115, 22, 0.80)); }
  50% { opacity: 1; filter: brightness(1.24) contrast(1.18) drop-shadow(0 0 22px rgba(251, 191, 36, 0.96)); }
}
@keyframes figKnockbackRecoil {
  0% { transform: scaleY(1) skewX(0deg); }
  35% { transform: scaleY(0.98) skewX(1.8deg); }
  100% { transform: scaleY(1) skewX(0deg); }
}
@keyframes vfxBleedSlashArc {
  0%, 100% { opacity: 0.90; filter: brightness(1.06) contrast(1.12) drop-shadow(0 0 14px rgba(220, 38, 38, 0.85)); }
  50% { opacity: 1; filter: brightness(1.25) contrast(1.20) drop-shadow(0 0 22px rgba(239, 68, 68, 1)); }
}
@keyframes figBleedFlinch {
  0%, 100% { transform: scaleY(1); }
  25% { transform: scaleY(0.988); }
}
@keyframes vfxBurnFlameRise {
  0% { opacity: 0.92; filter: brightness(1.05) contrast(1.12) drop-shadow(0 0 14px rgba(249, 115, 22, 0.82)); }
  100% { opacity: 1; filter: brightness(1.24) contrast(1.18) drop-shadow(0 0 24px rgba(251, 146, 60, 0.98)); }
}
@keyframes vfxPoisonBubbleFloat {
  0%, 100% { opacity: 0.90; filter: brightness(1.04) contrast(1.12) drop-shadow(0 0 12px rgba(34, 197, 94, 0.80)); }
  50% { opacity: 1; filter: brightness(1.18) contrast(1.16) drop-shadow(0 0 20px rgba(74, 222, 128, 0.95)); }
}
@keyframes vfxArmorShatterBurst {
  0%, 100% { opacity: 0.90; filter: brightness(1.06) contrast(1.12) drop-shadow(0 0 14px rgba(234, 179, 8, 0.82)); }
  50% { opacity: 1; filter: brightness(1.24) contrast(1.18) drop-shadow(0 0 22px rgba(250, 204, 21, 0.98)); }
}
@keyframes figArmorBreakStagger {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  30% { transform: scaleY(0.988) scaleX(1.005); }
}
@keyframes vfxRageDrainVortex {
  0%, 100% { opacity: 0.90; filter: brightness(1.05) contrast(1.12) drop-shadow(0 0 14px rgba(168, 85, 247, 0.82)); }
  50% { opacity: 1; filter: brightness(1.22) contrast(1.18) drop-shadow(0 0 24px rgba(217, 70, 239, 0.98)); }
}
@keyframes vfxRageSurgeAscend {
  0%, 100% { opacity: 0.92; filter: brightness(1.06) contrast(1.12) drop-shadow(0 0 16px rgba(234, 179, 8, 0.85)); }
  50% { opacity: 1; filter: brightness(1.24) contrast(1.18) drop-shadow(0 0 26px rgba(250, 204, 21, 1)); }
}
@keyframes figPowerFloat {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(1.012) scaleX(1.006); }
}
@keyframes vfxBaguaThornsRotate {
  0%, 100% { opacity: 0.90; filter: brightness(1.05) contrast(1.12) drop-shadow(0 0 14px rgba(245, 158, 11, 0.82)); }
  50% { opacity: 1; filter: brightness(1.20) contrast(1.16) drop-shadow(0 0 22px rgba(251, 191, 36, 0.98)); }
}
@keyframes vfxLotusShieldBreathe {
  0%, 100% { opacity: 0.92; filter: brightness(1.04) contrast(1.10) drop-shadow(0 0 16px rgba(56, 189, 248, 0.78)); }
  50% { opacity: 1; filter: brightness(1.18) contrast(1.16) drop-shadow(0 0 24px rgba(250, 204, 21, 0.95)); }
}
@keyframes vfxImmortalSanctuary {
  0%, 100% { opacity: 0.92; filter: brightness(1.06) contrast(1.12) drop-shadow(0 0 18px rgba(250, 204, 21, 0.85)); }
  50% { opacity: 1; filter: brightness(1.24) contrast(1.18) drop-shadow(0 0 28px rgba(254, 240, 138, 1)); }
}
@keyframes vfxBerserkSurge {
  0% { opacity: 0.92; filter: brightness(1.06) contrast(1.12) drop-shadow(0 0 16px rgba(220, 38, 38, 0.85)); }
  100% { opacity: 1; filter: brightness(1.24) contrast(1.20) drop-shadow(0 0 26px rgba(239, 68, 68, 1)); }
}
@keyframes figBerserkTremor {
  0%, 100% { transform: scaleY(1.004) scaleX(1.003); }
  50% { transform: scaleY(1.014) scaleX(1.008); }
}
@keyframes vfxSwiftWindFlow {
  0%, 100% { opacity: 0.90; filter: brightness(1.04) contrast(1.12) drop-shadow(0 0 14px rgba(20, 184, 166, 0.80)); }
  50% { opacity: 1; filter: brightness(1.20) contrast(1.16) drop-shadow(0 0 22px rgba(45, 212, 191, 0.98)); }
}
@keyframes figSwiftAfterimage {
  0%, 100% { transform: skewX(-0.5deg); }
  50% { transform: skewX(-1.2deg); }
}

/* ==========================================================================
   FLOATING COMBAT TEXT (SỐ SÁT THƯƠNG BAY TRÊN KHÔNG & CHÍ MẠNG IN HOA)
   ========================================================================== */
@keyframes fctFloatUpNormal {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.7);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -12px) scale(1.12);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -22px) scale(1.0);
  }
  75% {
    opacity: 0.95;
    transform: translate(-50%, -50px) scale(0.98);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -75px) scale(0.85);
  }
}

@keyframes fctFloatUpCrit {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.6);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -15px) scale(1.25);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -24px) scale(1.12);
  }
  45% {
    opacity: 1;
    transform: translate(-50%, -32px) scale(1.15);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -55px) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80px) scale(0.9);
  }
}

.fct-item {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
  white-space: nowrap;
  will-change: transform, opacity;
}

.fct-damage-normal {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #ff4d6d;
  text-shadow: 
    0 0 4px rgba(255, 51, 102, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.9),
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  animation: fctFloatUpNormal 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fct-crit {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fef08a;
  text-shadow: 
    0 0 8px #f59e0b,
    0 0 16px #dc2626,
    0 2px 4px rgba(0, 0, 0, 0.95),
    -1.5px -1.5px 0 #7f1d1d,
    1.5px -1.5px 0 #7f1d1d,
    -1.5px 1.5px 0 #7f1d1d,
    1.5px 1.5px 0 #7f1d1d;
  animation: fctFloatUpCrit 1.25s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

.fct-speed {
  font-size: 11.5px;
  font-weight: 500;
  color: #38bdf8;
  text-shadow: 0 0 4px rgba(6, 182, 212, 0.7), 0 1px 2px #000;
  animation: fctFloatUpNormal 0.85s ease-out forwards;
}

.fct-dodge {
  font-size: 11.5px;
  font-weight: 500;
  color: #38bdf8;
  text-shadow: 0 0 6px #0284c7, 0 1px 2px #000;
  animation: fctFloatUpNormal 0.95s ease-out forwards;
}

.fct-heal {
  font-size: 12px;
  font-weight: 500;
  color: #34d399;
  text-shadow: 0 0 6px #059669, 0 1px 2px #000;
  animation: fctFloatUpNormal 0.95s ease-out forwards;
}

.fct-shield {
  font-size: 11.5px;
  font-weight: 500;
  color: #38bdf8;
  text-shadow: 0 0 6px #0284c7, 0 1px 2px #000;
  animation: fctFloatUpNormal 0.85s ease-out forwards;
}

.fct-god {
  font-size: 12.5px;
  font-weight: 600;
  color: #fde047;
  text-shadow: 0 0 8px #eab308, 0 1px 2px #000;
  animation: fctFloatUpCrit 1.1s ease-out forwards;
}

/* Floating Combat Text SVG Keyframes & Classes */
@keyframes fctSvgFloatNormal {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.85);
  }
  15% {
    opacity: 1;
    transform: translateY(-8px) scale(1.15);
  }
  35% {
    opacity: 1;
    transform: translateY(-22px) scale(1.0);
  }
  70% {
    opacity: 0.95;
    transform: translateY(-40px) scale(0.96);
  }
  100% {
    opacity: 0;
    transform: translateY(-56px) scale(0.88);
  }
}

@keyframes fctSvgFloatCrit {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.7);
  }
  15% {
    opacity: 1;
    transform: translateY(-12px) scale(1.25);
  }
  30% {
    opacity: 1;
    transform: translateY(-26px) scale(1.12);
  }
  65% {
    opacity: 1;
    transform: translateY(-46px) scale(1.02);
  }
  100% {
    opacity: 0;
    transform: translateY(-64px) scale(0.92);
  }
}

.fct-svg-normal {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
  animation: fctSvgFloatNormal 0.92s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fct-svg-crit {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
  animation: fctSvgFloatCrit 1.15s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}