/* Animações por natureza do poder */
.vfx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 400;
  overflow: hidden;
}

.vfx-anim {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: vfx-fade-in 0.12s ease-out forwards;
}

@keyframes vfx-fade-in {
  to {
    opacity: 1;
  }
}

.vfx-burst--fire {
  background: radial-gradient(circle at 50% 55%, rgba(255, 120, 40, 0.55) 0%, rgba(255, 60, 0, 0.2) 35%, transparent 55%);
  animation: vfx-fade-in 0.12s ease-out forwards, vfx-pulse-fire 0.55s ease-out 0.1s forwards;
}

.vfx-burst--ember {
  background: radial-gradient(circle at 50% 60%, rgba(255, 80, 80, 0.45) 0%, rgba(80, 20, 20, 0.25) 40%, transparent 58%);
  animation: vfx-fade-in 0.12s ease-out forwards, vfx-pulse-fire 0.6s ease-out forwards;
}

@keyframes vfx-pulse-fire {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

.vfx-flow--nature {
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(60, 220, 120, 0.45), transparent 60%),
    radial-gradient(ellipse 50% 40% at 30% 80%, rgba(40, 180, 90, 0.25), transparent 50%);
  animation: vfx-fade-in 0.12s ease-out forwards, vfx-rise-green 0.7s ease-out forwards;
}

@keyframes vfx-rise-green {
  from {
    transform: translateY(12%);
    opacity: 0.9;
  }
  to {
    transform: translateY(-18%);
    opacity: 0;
  }
}

.vfx-flow--arcane {
  background: conic-gradient(from 120deg at 50% 50%, rgba(120, 200, 255, 0.35), transparent 40%, rgba(180, 120, 255, 0.3), transparent 75%);
  animation: vfx-fade-in 0.12s ease-out forwards, vfx-spin-soft 0.75s linear forwards;
}

@keyframes vfx-spin-soft {
  from {
    transform: rotate(0deg) scale(0.85);
    opacity: 0.85;
  }
  to {
    transform: rotate(120deg) scale(1.15);
    opacity: 0;
  }
}

.vfx-flow--void {
  background: radial-gradient(circle at 50% 30%, rgba(80, 40, 120, 0.5) 0%, rgba(20, 0, 40, 0.35) 45%, transparent 65%);
  animation: vfx-fade-in 0.12s ease-out forwards, vfx-drain 0.75s ease-in forwards;
}

@keyframes vfx-drain {
  from {
    transform: translateY(-5%) scale(1);
    opacity: 0.9;
  }
  to {
    transform: translateY(25%) scale(1.1);
    opacity: 0;
  }
}

.vfx-spiral--mind {
  background: repeating-conic-gradient(rgba(200, 100, 255, 0.12) 0deg 10deg, transparent 10deg 20deg);
  animation: vfx-fade-in 0.12s ease-out forwards, vfx-spin-mind 0.85s linear forwards;
}

@keyframes vfx-spin-mind {
  from {
    transform: rotate(0deg) scale(0.9);
    opacity: 0.75;
  }
  to {
    transform: rotate(-240deg) scale(1.2);
    opacity: 0;
  }
}

.vfx-storm {
  background: radial-gradient(circle at 20% 40%, rgba(200, 220, 255, 0.25), transparent 35%),
    radial-gradient(circle at 80% 50%, rgba(255, 255, 200, 0.2), transparent 40%),
    radial-gradient(circle at 50% 60%, rgba(100, 140, 200, 0.35), transparent 50%);
  animation: vfx-fade-in 0.1s ease-out forwards, vfx-shake 0.45s ease-in-out 2;
}

@keyframes vfx-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-6px, 3px);
  }
  50% {
    transform: translate(5px, -4px);
  }
  75% {
    transform: translate(-4px, -2px);
  }
}

.vfx-firestorm {
  background: radial-gradient(circle at 50% 50%, rgba(255, 200, 80, 0.55) 0%, rgba(255, 80, 30, 0.35) 40%, rgba(40, 20, 60, 0.4) 70%, transparent 75%);
  animation: vfx-fade-in 0.1s ease-out forwards, vfx-boom 0.55s ease-out forwards;
}

@keyframes vfx-boom {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.vfx-earth {
  background: radial-gradient(ellipse 90% 35% at 50% 100%, rgba(160, 110, 60, 0.55), transparent 55%);
  animation: vfx-fade-in 0.12s ease-out forwards, vfx-ground 0.65s ease-out forwards;
}

@keyframes vfx-ground {
  from {
    transform: scaleY(0.3);
    opacity: 0.9;
  }
  to {
    transform: scaleY(1);
    opacity: 0;
  }
}

.vfx-strike {
  background: linear-gradient(105deg, transparent 40%, rgba(255, 220, 120, 0.5) 50%, transparent 60%);
  animation: vfx-fade-in 0.08s ease-out forwards, vfx-slash 0.35s ease-out forwards;
}

@keyframes vfx-slash {
  from {
    transform: translateX(-30%) skewX(-12deg);
    opacity: 0.9;
  }
  to {
    transform: translateX(30%) skewX(-12deg);
    opacity: 0;
  }
}

.vfx-clash {
  background: radial-gradient(circle at 45% 50%, rgba(255, 255, 255, 0.35), transparent 45%),
    radial-gradient(circle at 55% 50%, rgba(255, 180, 80, 0.35), transparent 45%);
  animation: vfx-fade-in 0.08s ease-out forwards, vfx-clash-zoom 0.4s ease-out forwards;
}

@keyframes vfx-clash-zoom {
  0% {
    transform: scale(0.85);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.vfx-cast {
  background: radial-gradient(circle at 50% 100%, rgba(212, 166, 75, 0.35), transparent 45%);
  animation: vfx-fade-in 0.1s ease-out forwards, vfx-cast-up 0.45s ease-out forwards;
}

@keyframes vfx-cast-up {
  from {
    transform: translateY(25%) scale(0.9);
    opacity: 0.8;
  }
  to {
    transform: translateY(-15%) scale(1.05);
    opacity: 0;
  }
}

.portrait-img,
.portrait-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.portrait-fallback {
  background: radial-gradient(circle at 35% 25%, hsl(var(--ph, 38), 50%, 45%), hsl(var(--ph, 38), 40%, 18%) 75%);
}

.board-minion__art,
.hand-card__art,
.hero-plate__avatar-inner {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

.hero-plate__avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.board-minion__art .portrait-img,
.hand-card__art .portrait-img {
  border-radius: 6px;
}