/* ==========================================================================
   THỦY HỬ 9v9 — BỘ HIỆU ỨNG ACTION CSS CHUẨN GAME CỔ TRANG THỦY MẶC
   QUY CHUẨN PHẲNG: Triệt tiêu viền tĩnh ở trạng thái nghỉ (idle).
   CHỈ HOVER hoặc CHỌN mới phát sáng (highlight) hào quang & kích hoạt hoạt ảnh.
   ========================================================================== */

/* 0. Base Icon Reset: Tuyệt đối không viền, không bóng đổ tĩnh, không nền */
.thuyhu-icon,
.icon-action-btn,
.icon-class-badge,
.icon-terrain-badge,
.icon-status-badge,
img[class*="icon-"] {
  display: inline-block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  filter: none;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.22s ease;
  will-change: transform, filter;
}

.thuyhu-icon {
  width: 48px;
  height: 48px;
}

/* Kích thước chuẩn theo từng vị trí UI */
.thuyhu-icon--sm { width: 28px; height: 28px; } /* Badge trên đầu tướng / Chỉ số nhỏ */
.thuyhu-icon--md { width: 44px; height: 44px; } /* Icon Binh chủng / Địa hình / Tab */
.thuyhu-icon--lg { width: 64px; height: 64px; } /* Nút Menu Sảnh chính / Ấn Boss */

/* Highlight hào quang hoàng kim CHỈ KHI Hover hoặc khi Selected / Active */
.thuyhu-icon:hover,
button:hover .thuyhu-icon,
a:hover .thuyhu-icon,
.btn:hover .thuyhu-icon,
.icon-action-btn:hover,
.group:hover .thuyhu-icon,
[role="button"]:hover .thuyhu-icon,
.selected .thuyhu-icon,
.active .thuyhu-icon,
button:hover img[class*="icon-"],
a:hover img[class*="icon-"],
.group:hover img[class*="icon-"] {
  filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.8)) brightness(1.15) !important;
}

/* 1. Nút bấm hành động chung (Hover & Click/Active Press) */
.icon-action-btn {
  cursor: pointer;
}
.icon-action-btn:hover {
  transform: translateY(-3px) scale(1.1);
  filter: drop-shadow(0 6px 12px rgba(212, 168, 75, 0.55)) brightness(1.12) !important;
}
.icon-action-btn:active {
  transform: translateY(1px) scale(0.93);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) brightness(0.95) !important;
  transition-duration: 0.08s;
}

/* 2. Huy hiệu 6 Binh chủng (Hover phản hồi chiến thuật) */
.icon-class-badge {
  cursor: pointer;
}
.icon-class-badge:hover {
  transform: scale(1.14) rotate(3deg);
  filter: drop-shadow(0 0 10px rgba(235, 195, 95, 0.65)) contrast(1.08) !important;
}

/* 3. Nhịp đập Trống Trận cho nút Xuất Chinh / Vượt Ải (CHỈ chạy khi Hover / Active) */
@keyframes thuyhuDrumBeat {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(220, 60, 40, 0.5)); }
  15% { transform: scale(1.09); filter: drop-shadow(0 0 16px rgba(255, 95, 50, 0.9)) brightness(1.18); }
  30% { transform: scale(0.98); }
  45% { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(255, 160, 60, 0.8)); }
}
.icon-drum-beat:hover,
button:hover .icon-drum-beat,
a:hover .icon-drum-beat,
.group:hover .icon-drum-beat,
.icon-drum-beat.active {
  animation: thuyhuDrumBeat 1.4s infinite ease-in-out !important;
}

/* 4. Hào quang Boss Mãnh Hổ & Cảnh báo Tử Chiến (CHỈ kích hoạt khi hover hoặc có cờ active) */
@keyframes thuyhuBossPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.65)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(255, 60, 40, 0.95)) brightness(1.12); }
}
.icon-boss-pulse:hover,
button:hover .icon-boss-pulse,
.group:hover .icon-boss-pulse,
.selected .icon-boss-pulse,
.epic-boss-active .icon-boss-pulse {
  animation: thuyhuBossPulse 1.8s infinite ease-in-out !important;
}

/* 5. Nút Auto / Hổ Phù đang kích hoạt (BẬT) */
@keyframes thuyhuAutoGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.55)); }
  50% { filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.95)) brightness(1.15); }
}
.icon-auto-active.is-on,
.icon-auto-active:hover,
button:hover .icon-auto-active {
  animation: thuyhuAutoGlow 1.5s infinite ease-in-out !important;
}

/* 6. Nút Tốc độ 2x đang kích hoạt */
@keyframes thuyhuSpeedDash {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); filter: drop-shadow(-4px 0 8px rgba(250, 204, 21, 0.75)) brightness(1.15); }
}
.icon-speed-toggle.is-2x,
.icon-speed-toggle:hover,
button:hover .icon-speed-toggle {
  animation: thuyhuSpeedDash 0.9s infinite ease-in-out !important;
}

/* 7. Khóa Ải lắc khi bấm vào ải chưa mở */
@keyframes thuyhuLockShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%, 60% { transform: translateX(-4px) rotate(-6deg); }
  40%, 80% { transform: translateX(4px) rotate(6deg); }
}
.icon-lock-shake:hover, .icon-lock-shake:active {
  animation: thuyhuLockShake 0.45s ease-in-out !important;
}

/* 8. Chuông đồng rung khi phát âm thanh / thoại tướng */
@keyframes thuyhuBellRing {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}
.icon-bell-ring.is-playing, .icon-bell-ring:hover, button:hover .icon-bell-ring {
  animation: thuyhuBellRing 0.5s infinite ease-in-out !important;
}

/* 9. Hiệu ứng Trạng thái Khống chế (Choáng / Đóng băng) trên đầu tướng trong trận */
@keyframes thuyhuDizzyWobble {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-3px) rotate(6deg); filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.8)); }
}
.icon-dizzy-spin.in-battle, .icon-dizzy-spin:hover {
  animation: thuyhuDizzyWobble 1.1s infinite ease-in-out;
}

@keyframes thuyhuFrostShimmer {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.65)); }
  50% { filter: drop-shadow(0 0 14px rgba(125, 211, 252, 1)) brightness(1.18); }
}
.icon-frost-shimmer.in-battle, .icon-frost-shimmer:hover {
  animation: thuyhuFrostShimmer 1.6s infinite ease-in-out;
}

/* 10. Hiệu ứng Trạng thái Sát thương duy trì (Thiêu đốt / Trúng độc) */
@keyframes thuyhuFlameFlicker {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.7)); }
  50% { transform: scale(1.07) translateY(-2px); filter: drop-shadow(0 0 14px rgba(249, 115, 22, 0.95)) brightness(1.15); }
}
.icon-flame-flicker.in-battle, .icon-flame-flicker:hover {
  animation: thuyhuFlameFlicker 0.85s infinite ease-in-out;
}

@keyframes thuyhuPoisonPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6)); }
  50% { filter: drop-shadow(0 0 14px rgba(74, 222, 128, 0.95)) hue-rotate(8deg); }
}
.icon-poison-pulse.in-battle, .icon-poison-pulse:hover {
  animation: thuyhuPoisonPulse 1.4s infinite ease-in-out;
}

/* 11. Hiệu ứng Bổ trợ Hộ Thể Kim Liên & Sinh Lực */
@keyframes thuyhuLotusAura {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.6)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 18px rgba(253, 224, 71, 0.95)) brightness(1.12); }
}
.icon-lotus-aura.in-battle, .icon-lotus-aura:hover, button:hover .icon-lotus-aura {
  animation: thuyhuLotusAura 2s infinite ease-in-out;
}

/* 12. Hiệu ứng Khiên Hộ Vệ / Viện Binh (CHỈ kích hoạt khi hover hoặc có viện binh sẵn sàng) */
@keyframes thuyhuShieldPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(52, 211, 153, 0.85)) brightness(1.15); transform: scale(1.05); }
}
.icon-shield-pulse:hover, button:hover .icon-shield-pulse, .group:hover .icon-shield-pulse, .active .icon-shield-pulse {
  animation: thuyhuShieldPulse 1.8s infinite ease-in-out !important;
}

/* 13. Hiệu ứng Tụ Nghĩa Sảnh Đường Hào Quang (CHỈ khi hover) */
@keyframes thuyhuHallGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5)); }
  50% { filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.85)) brightness(1.12); }
}
.icon-hall-glow:hover, button:hover .icon-hall-glow, .group:hover .icon-hall-glow, .active .icon-hall-glow {
  animation: thuyhuHallGlow 2.2s infinite ease-in-out !important;
}

/* 14. Hiệu ứng Binh Thư Bách Khoa Lấp Lánh (CHỈ khi hover) */
@keyframes thuyhuBookShimmer {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(217, 119, 6, 0.45)); }
  50% { filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.8)) brightness(1.15); }
}
.icon-book-shimmer:hover, button:hover .icon-book-shimmer, .group:hover .icon-book-shimmer, .active .icon-book-shimmer {
  animation: thuyhuBookShimmer 2.2s infinite ease-in-out !important;
}

/* 15. Hiệu ứng Bách Quái Đầu Lâu (CHỈ khi hover) */
@keyframes thuyhuSkullDeath {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(225, 29, 72, 0.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(244, 63, 94, 0.9)) brightness(1.1); transform: scale(1.04); }
}
.icon-skull-death:hover, button:hover .icon-skull-death, .group:hover .icon-skull-death, .selected .icon-skull-death {
  animation: thuyhuSkullDeath 1.8s infinite ease-in-out !important;
}

/* 16. Hiệu ứng Kim Bảo Tỏa Sáng (CHỈ khi hover) */
@keyframes thuyhuGoldShine {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.5)); }
  50% { filter: drop-shadow(0 0 16px rgba(250, 204, 21, 0.95)) brightness(1.2); }
}
.icon-gold-shine:hover, .icon-gold-sparkle:hover,
button:hover .icon-gold-shine, button:hover .icon-gold-sparkle,
.group:hover .icon-gold-shine, .group:hover .icon-gold-sparkle,
.active .icon-gold-shine, .selected .icon-gold-shine {
  animation: thuyhuGoldShine 1.8s infinite ease-in-out !important;
}

/* 17. Hiệu ứng Binh Khí Xoay Chém Nhẹ */
.icon-weapon-spin:hover, button:hover .icon-weapon-spin {
  transform: rotate(15deg) scale(1.12);
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8)) !important;
}

/* 18. Hiệu ứng Sóng Nước Thủy Bạc (CHỈ khi hover) */
@keyframes thuyhuWaveRipple {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.5)); }
  50% { transform: translateY(-2px); filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.85)); }
}
.icon-wave-ripple:hover, button:hover .icon-wave-ripple, .group:hover .icon-wave-ripple {
  animation: thuyhuWaveRipple 2s infinite ease-in-out !important;
}

/* 19. Hiệu ứng Đỉnh Non Gồ Cao Khí Thế */
.icon-buff-up:hover, button:hover .icon-buff-up {
  transform: translateY(-3px) scale(1.1);
  filter: drop-shadow(0 6px 12px rgba(234, 179, 8, 0.6)) !important;
}

/* 20. Hiệu ứng Chém Lướt Cận Chiến */
.icon-slash-hover:hover, button:hover .icon-slash-hover {
  transform: scale(1.15) rotate(6deg);
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.7)) !important;
}

/* 21. Hiệu ứng Chỉ Số Sinh Lực (HP Heartbeat) */
@keyframes thuyhuHeartBeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.12); }
  40% { transform: scale(0.97); }
  60% { transform: scale(1.06); }
}
.icon-stat-vitality:hover, button:hover .icon-stat-vitality {
  animation: thuyhuHeartBeat 1s ease-in-out !important;
}

/* 22. Hiệu ứng Vỡ Giáp & Khiên Bảo Vệ */
@keyframes thuyhuArmorBreak {
  0%, 100% { transform: translateX(0); filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.6)); }
  25% { transform: translateX(-3px) rotate(-4deg); }
  75% { transform: translateX(3px) rotate(4deg); }
}
.icon-armor-break.in-battle, .icon-armor-break:hover {
  animation: thuyhuArmorBreak 1s infinite ease-in-out;
}

@keyframes thuyhuShieldProtect {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.95)) brightness(1.15); transform: scale(1.06); }
}
.icon-shield-protect:hover, button:hover .icon-shield-protect, .group:hover .icon-shield-protect {
  animation: thuyhuShieldProtect 2s infinite ease-in-out !important;
}

/* 23. Hiệu ứng Câm Lặng / Phong Ma */
@keyframes thuyhuSilencePulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(148, 163, 184, 0.6)); opacity: 0.9; }
  50% { filter: drop-shadow(0 0 14px rgba(203, 213, 225, 0.95)) brightness(1.15); opacity: 1; }
}
.icon-silence-pulse.in-battle, .icon-silence-pulse:hover {
  animation: thuyhuSilencePulse 1.6s infinite ease-in-out;
}

/* 24. Hiệu ứng Khiêu Khích */
@keyframes thuyhuTauntShake {
  0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.6)); }
  25% { transform: scale(1.06) rotate(-4deg); }
  75% { transform: scale(1.06) rotate(4deg); filter: drop-shadow(0 0 14px rgba(251, 146, 60, 0.95)); }
}
.icon-taunt-shake.in-battle, .icon-taunt-shake:hover {
  animation: thuyhuTauntShake 1.2s infinite ease-in-out;
}

/* 25. Hiệu ứng Mù Mắt / Loạn Thị */
@keyframes thuyhuBlindFog {
  0%, 100% { filter: blur(0px) drop-shadow(0 0 6px rgba(163, 230, 53, 0.6)); }
  50% { filter: blur(1px) drop-shadow(0 0 14px rgba(190, 242, 100, 0.95)) brightness(1.15); }
}
.icon-blind-fog.in-battle, .icon-blind-fog:hover {
  animation: thuyhuBlindFog 1.8s infinite ease-in-out;
}

/* 26. Hiệu ứng Đẩy Lùi / Hất Văng */
@keyframes thuyhuKnockbackDash {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); filter: drop-shadow(0 0 12px rgba(234, 88, 12, 0.9)); }
}
.icon-knockback-dash.in-battle, .icon-knockback-dash:hover {
  animation: thuyhuKnockbackDash 0.9s infinite ease-in-out;
}

/* 27. Hiệu ứng Chảy Máu */
@keyframes thuyhuBleedPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.7)); }
  50% { transform: scale(1.08) translateY(2px); filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.95)) brightness(1.15); }
}
.icon-bleed-pulse.in-battle, .icon-bleed-pulse:hover {
  animation: thuyhuBleedPulse 1.1s infinite ease-in-out;
}

/* 28. Hiệu ứng Trừ Nộ / Đoạt Khí */
@keyframes thuyhuRageDrain {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.6)); }
  50% { transform: scale(0.94) rotate(-6deg); filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.95)); }
}
.icon-rage-drain.in-battle, .icon-rage-drain:hover {
  animation: thuyhuRageDrain 1.3s infinite ease-in-out;
}

/* 29. Hiệu ứng Hồi Nộ / Tụ Khí */
@keyframes thuyhuRageSurge {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.7)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 18px rgba(253, 224, 71, 1)) brightness(1.2); }
}
.icon-rage-surge.in-battle, .icon-rage-surge:hover {
  animation: thuyhuRageSurge 1s infinite ease-in-out;
}

/* 30. Hiệu ứng Phản Đòn */
@keyframes thuyhuCounterSpin {
  0%, 100% { transform: rotate(0deg); filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6)); }
  50% { transform: rotate(12deg) scale(1.06); filter: drop-shadow(0 0 14px rgba(125, 211, 252, 0.95)); }
}
.icon-counter-spin.in-battle, .icon-counter-spin:hover {
  animation: thuyhuCounterSpin 1.4s infinite ease-in-out;
}