/* ==========================================================================
   7 LORDS OF HELL: DYNAMIC ANIMATED FLAMES, AURAS, HALOS & FX
   Pixel-perfect alignment matching the 320x320 battle sprite canvas.
   ========================================================================== */

/* Container positioning inside #battle .fighter.foe .u-spr
   Sized identically to the sprite and breaths in unison so auras stay
   anchored directly to the lord's head/horns without any drift. */
.lord-aura-bg, .lord-aura-fg {
  position: absolute;
  left: 50%;
  bottom: 0;
  pointer-events: none;
  width: calc(clamp(60px, 90cqw, 95px) * var(--us, 1));
  height: calc(clamp(60px, 90cqw, 95px) * var(--us, 1));
  translate: -50% calc(var(--padb, 0) * 100%);
  scale: var(--flip, 1) 1;
  transform-origin: 50% 100%;
  animation: unitBreath 3.4s ease-in-out infinite;
}
.lord-aura-bg { z-index: 1; } /* behind sprite */
.lord-aura-fg { z-index: 3; } /* in front of sprite */

/* ==========================================================================
   1. MAMMON: Living Hellfire Sigil & Gold Avarice Shimmer
   Flame location: center x=51.6%, y=11.6% (above horned skull bowl)
   ========================================================================== */
@keyframes mammonFlameDance {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    filter: drop-shadow(0 0 10px #ff9900) drop-shadow(0 0 24px #ff3300) brightness(1.2);
    opacity: 0.9;
  }
  20% {
    transform: translate(-50%, -52%) scale(1.12, 1.18) rotate(-2deg);
    filter: drop-shadow(0 -3px 18px #ffcc00) drop-shadow(0 0 34px #ff5500) brightness(1.5);
    opacity: 1;
  }
  45% {
    transform: translate(-50%, -49%) scale(0.94, 0.96) rotate(1.5deg);
    filter: drop-shadow(0 0 8px #ff7700) drop-shadow(0 0 20px #cc2200) brightness(1.05);
    opacity: 0.85;
  }
  70% {
    transform: translate(-50%, -51%) scale(1.08, 1.14) rotate(-1deg);
    filter: drop-shadow(0 -2px 16px #ffee44) drop-shadow(0 0 30px #ff4400) brightness(1.4);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    filter: drop-shadow(0 0 10px #ff9900) drop-shadow(0 0 24px #ff3300) brightness(1.2);
    opacity: 0.9;
  }
}

@keyframes mammonShimmerWave {
  0%, 100% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

@keyframes mammonAuraPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50% { opacity: 0.75; transform: scale(1.05); }
}

.mammon-sigil-core {
  position: absolute;
  left: 50.6%;
  top: 11.2%;
  width: 24%;
  height: 20%;
  border-radius: 50% 50% 35% 35%;
  background: radial-gradient(ellipse at 50% 65%,
    rgba(255, 255, 210, 0.95) 0%,
    rgba(255, 180, 30, 0.9) 35%,
    rgba(255, 70, 10, 0.6) 65%,
    transparent 85%
  );
  animation: mammonFlameDance 1.6s ease-in-out infinite;
  mix-blend-mode: screen;
}

.mammon-flame-shimmer {
  position: absolute;
  left: 50.6%;
  top: 10%;
  width: 16%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 210, 60, 0.6) 40%, transparent 75%);
  animation: mammonShimmerWave 1.1s ease-in-out infinite;
  mix-blend-mode: color-dodge;
}

.mammon-greed-glow {
  position: absolute;
  left: 10%;
  top: 15%;
  width: 80%;
  height: 70%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 190, 40, 0.28) 0%, rgba(180, 100, 10, 0.1) 50%, transparent 75%);
  animation: mammonAuraPulse 3.2s ease-in-out infinite;
  border-radius: 50%;
  mix-blend-mode: screen;
}

/* ==========================================================================
   2. ASMODEUS: Radiant Solar Corona & Golden Flare Sunburst
   Halo location: center x=47%, y=19% (behind horned head)
   ========================================================================== */
@keyframes asmodeusCoronaPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.96);
    filter: drop-shadow(0 0 16px rgba(255, 150, 20, 0.9)) drop-shadow(0 0 35px rgba(255, 60, 10, 0.7)) brightness(1.15);
    opacity: 0.85;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.08);
    filter: drop-shadow(0 0 28px rgba(255, 220, 60, 1)) drop-shadow(0 0 50px rgba(255, 90, 10, 0.9)) brightness(1.45);
    opacity: 1;
  }
  60% {
    transform: translate(-50%, -50%) scale(0.98);
    filter: drop-shadow(0 0 14px rgba(255, 130, 20, 0.8)) drop-shadow(0 0 30px rgba(220, 40, 5, 0.6)) brightness(1.1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.96);
    filter: drop-shadow(0 0 16px rgba(255, 150, 20, 0.9)) drop-shadow(0 0 35px rgba(255, 60, 10, 0.7)) brightness(1.15);
    opacity: 0.85;
  }
}

@keyframes asmodeusRaysSpin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.98);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.08);
    opacity: 0.95;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(0.98);
    opacity: 0.7;
  }
}

@keyframes asmodeusHeadGleam {
  0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 6px #ffcc00); }
  50% { opacity: 0.95; filter: drop-shadow(0 0 18px #ffffff) drop-shadow(0 0 28px #ff9900); }
}

@keyframes chestFissurePulse {
  0%, 100% { opacity: 0.65; filter: drop-shadow(0 0 6px #ff3300) drop-shadow(0 0 12px #ff9900); }
  50% { opacity: 1.0; filter: drop-shadow(0 0 16px #ff1100) drop-shadow(0 0 28px #ffff55); }
}

.asmodeus-sun-corona {
  position: absolute;
  left: 50.0%;
  top: 22.3%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 250, 190, 0.95) 0%,
    rgba(255, 170, 30, 0.85) 30%,
    rgba(255, 80, 10, 0.6) 55%,
    transparent 78%
  );
  animation: asmodeusCoronaPulse 2.4s ease-in-out infinite;
  mix-blend-mode: screen;
}

.asmodeus-sun-rays {
  position: absolute;
  left: 50.0%;
  top: 22.3%;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 220, 80, 0.65) 20deg,
    transparent 45deg,
    rgba(255, 180, 40, 0.55) 70deg,
    transparent 90deg,
    rgba(255, 240, 100, 0.7) 115deg,
    transparent 135deg,
    rgba(255, 190, 50, 0.6) 160deg,
    transparent 180deg,
    rgba(255, 220, 80, 0.65) 200deg,
    transparent 225deg,
    rgba(255, 180, 40, 0.55) 250deg,
    transparent 270deg,
    rgba(255, 240, 100, 0.7) 295deg,
    transparent 315deg,
    rgba(255, 190, 50, 0.6) 340deg,
    transparent 360deg
  );
  animation: asmodeusRaysSpin 8s linear infinite;
  mix-blend-mode: screen;
}

.asmodeus-head-shimmer {
  position: absolute;
  left: 50.0%;
  top: 22.0%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 230, 0.85) 0%, transparent 60%);
  animation: asmodeusHeadGleam 2.0s ease-in-out infinite;
  mix-blend-mode: color-dodge;
}

.asmodeus-chest-fissure {
  position: absolute;
  left: 49.4%;
  top: 40.5%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 38px;
  background: radial-gradient(ellipse at center, rgba(255,255,210,0.95) 0%, rgba(255,100,15,0.88) 50%, transparent 80%);
  border-radius: 40%;
  animation: chestFissurePulse 1.8s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* ==========================================================================
   3. LUCIFER: Celestial Eclipse Rune Halo & Golden Corona
   Halo location: center x=50.3%, y=22.3% (behind dark hair and head)
   ========================================================================== */
@keyframes luciferCoronaPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.96);
    filter: drop-shadow(0 0 16px #ffbb00) drop-shadow(0 0 32px #ff4400) brightness(1.2);
    opacity: 0.88;
  }
  35% {
    transform: translate(-50%, -50%) scale(1.07);
    filter: drop-shadow(0 0 28px #ffee44) drop-shadow(0 0 52px #ff3300) brightness(1.5);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(0.98);
    filter: drop-shadow(0 0 14px #dd9900) drop-shadow(0 0 26px #aa2200) brightness(1.1);
    opacity: 0.82;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.96);
    filter: drop-shadow(0 0 16px #ffbb00) drop-shadow(0 0 32px #ff4400) brightness(1.2);
    opacity: 0.88;
  }
}

@keyframes luciferRuneGleam {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
    opacity: 0.95;
    filter: drop-shadow(0 0 12px #ffff88);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
    opacity: 0.6;
  }
}

@keyframes luciferHaloShimmer {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.12); filter: drop-shadow(0 0 14px #ffffff); }
}

@keyframes wristFlameDance {
  0%, 100% { opacity: 0.75; transform: scale(0.95) translateY(0); filter: drop-shadow(0 0 8px #ff6600); }
  50% { opacity: 1.0; transform: scale(1.18) translateY(-3px); filter: drop-shadow(0 0 18px #ffdd22); }
}

.lucifer-eclipse-corona {
  position: absolute;
  left: 50.3%;
  top: 22.3%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 235, 120, 0.95) 0%,
    rgba(255, 180, 20, 0.85) 35%,
    rgba(230, 80, 10, 0.55) 60%,
    transparent 80%
  );
  animation: luciferCoronaPulse 2.8s ease-in-out infinite;
  mix-blend-mode: screen;
}

.lucifer-runic-gleam {
  position: absolute;
  left: 50.3%;
  top: 22.3%;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 220, 80, 0.75);
  animation: luciferRuneGleam 10s linear infinite;
  mix-blend-mode: screen;
}

.lucifer-halo-shimmer {
  position: absolute;
  left: 50.3%;
  top: 22.3%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 230, 0.9) 0%, rgba(255, 210, 80, 0.5) 45%, transparent 75%);
  animation: luciferHaloShimmer 1.8s ease-in-out infinite;
  mix-blend-mode: color-dodge;
}

.lucifer-wrist-flames {
  position: absolute;
  top: 48%;
  left: 36%;
  width: 20px;
  height: 26px;
  background: radial-gradient(ellipse at bottom, rgba(255,255,190,0.95) 0%, rgba(255,130,20,0.85) 50%, transparent 80%);
  border-radius: 50% 50% 30% 30%;
  animation: wristFlameDance 1.2s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* ==========================================================================
   4. LEVIATHAN: Volcanic Crimson Heatwave & Wing Fire
   ========================================================================== */
@keyframes leviathanHeatPulse {
  0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 12px #ff2200) drop-shadow(0 0 25px #aa0000); transform: scale(1); }
  50% { opacity: 0.95; filter: drop-shadow(0 0 24px #ff5500) drop-shadow(0 0 44px #ff0000); transform: scale(1.05); }
}

.leviathan-flame-aura {
  position: absolute;
  inset: 5% 5% 10% 5%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,60,0,0.28) 0%, rgba(180,10,0,0.16) 55%, transparent 75%);
  border-radius: 40%;
  animation: leviathanHeatPulse 2.2s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* ==========================================================================
   5. BEELZEBUB: Wing Flutter Vibration + Occult Sigil Blood Pulse
   ========================================================================== */
@keyframes beelzebubWingVibrate {
  0% { transform: scaleX(1) scaleY(1); opacity: 0.8; filter: drop-shadow(0 0 10px rgba(255, 180, 50, 0.55)); }
  25% { transform: scaleX(1.04) scaleY(0.96); opacity: 0.98; filter: drop-shadow(0 0 18px rgba(255, 205, 65, 0.75)); }
  50% { transform: scaleX(0.97) scaleY(1.03); opacity: 0.72; filter: drop-shadow(0 0 8px rgba(200, 100, 20, 0.4)); }
  75% { transform: scaleX(1.03) scaleY(0.97); opacity: 0.92; filter: drop-shadow(0 0 15px rgba(255, 165, 45, 0.65)); }
  100% { transform: scaleX(1) scaleY(1); opacity: 0.8; filter: drop-shadow(0 0 10px rgba(255, 180, 50, 0.55)); }
}

@keyframes sigilBloodGlow {
  0%, 100% { opacity: 0.45; filter: drop-shadow(0 0 6px #ff0033); }
  50% { opacity: 0.98; filter: drop-shadow(0 0 16px #ff2255); }
}

.beelzebub-wings-glow {
  position: absolute;
  top: 15%;
  left: 8%;
  right: 8%;
  height: 55%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 205, 65, 0.3) 0%, rgba(180, 80, 10, 0.14) 60%, transparent 80%);
  animation: beelzebubWingVibrate 0.16s ease-in-out infinite;
  mix-blend-mode: screen;
}

.beelzebub-sigil-glow {
  position: absolute;
  top: 32%;
  left: 45%;
  width: 34px;
  height: 52px;
  background: radial-gradient(circle, rgba(255, 30, 60, 0.65) 0%, transparent 70%);
  animation: sigilBloodGlow 1.5s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* ==========================================================================
   6. BELPHEGOR: Toxic Venom Maw Pulse & Noxious Miasma Vapors
   ========================================================================== */
@keyframes toxicMawGlow {
  0%, 100% { opacity: 0.75; transform: scale(1); filter: drop-shadow(0 0 8px #22ff44) drop-shadow(0 0 18px #00aa22); }
  50% { opacity: 1.0; transform: scale(1.14); filter: drop-shadow(0 0 18px #66ff88) drop-shadow(0 0 34px #22cc44); }
}

@keyframes toxicDripFall {
  0% { transform: translateY(0) scale(1); opacity: 0.95; }
  75% { transform: translateY(20px) scale(0.85); opacity: 0.75; }
  100% { transform: translateY(28px) scale(0.25); opacity: 0; }
}

@keyframes noxiousMiasmaRise {
  0%, 100% { opacity: 0.35; transform: translateY(0) scale(1); }
  50% { opacity: 0.7; transform: translateY(-7px) scale(1.06); }
}

.belphegor-toxic-maw {
  position: absolute;
  top: 24%;
  left: 53%;
  transform: translateX(-50%);
  width: 36px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(190, 255, 130, 0.95) 0%, rgba(40, 225, 50, 0.85) 50%, rgba(10, 120, 20, 0.3) 80%, transparent 100%);
  animation: toxicMawGlow 1.9s ease-in-out infinite;
  mix-blend-mode: screen;
}

.belphegor-venom-drip {
  position: absolute;
  top: 30%;
  left: 52%;
  width: 7px;
  height: 9px;
  border-radius: 40% 40% 60% 60%;
  background: #55ff66;
  animation: toxicDripFall 1.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
  filter: drop-shadow(0 0 5px #22ff44);
}

.belphegor-miasma {
  position: absolute;
  inset: 18% 8% 12% 8%;
  background: radial-gradient(circle at 50% 60%, rgba(30, 185, 60, 0.22) 0%, rgba(20, 100, 30, 0.09) 55%, transparent 75%);
  animation: noxiousMiasmaRise 3.2s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* ==========================================================================
   7. AZAZEL: Abyssal Shadow Wisp & Blade Sheen
   ========================================================================== */
@keyframes azazelShadowWaft {
  0%, 100% { opacity: 0.45; filter: drop-shadow(0 0 10px rgba(110, 20, 150, 0.65)); transform: scale(1); }
  50% { opacity: 0.88; filter: drop-shadow(0 0 22px rgba(170, 30, 210, 0.9)); transform: scale(1.06); }
}

@keyframes bladeSheenGlance {
  0%, 80%, 100% { opacity: 0; transform: translate(0, 0) scale(0.8); }
  85% { opacity: 1; transform: translate(-3px, -3px) scale(1.3); filter: drop-shadow(0 0 12px #ffffff); }
  90% { opacity: 0.15; transform: translate(-6px, -6px) scale(0.9); }
}

.azazel-shadow-aura {
  position: absolute;
  inset: 5% 12% 18% 12%;
  background: radial-gradient(ellipse at 55% 45%, rgba(130, 30, 190, 0.25) 0%, rgba(60, 10, 90, 0.12) 60%, transparent 80%);
  animation: azazelShadowWaft 2.8s ease-in-out infinite;
  mix-blend-mode: screen;
}

.azazel-blade-glint {
  position: absolute;
  top: 58%;
  left: 28%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  animation: bladeSheenGlance 3.2s ease-in-out infinite;
}