/* Tek kişilik doğru cevap — sinematik ekran FX katmanı */

.nova-sp-hero-arena__fx{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  overflow: hidden;
}
.nova-sp-hero-arena.is-active .nova-sp-hero-arena__fx.is-on{
  opacity: 1;
}

/* Global yumuşak perde (temaya göre renk) */
.nova-sp-hero-arena__fx::before{
  content: "";
  position: absolute;
  inset: 0;
  opacity: .85;
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(15, 23, 42, .55), transparent 70%);
  transform: scale(1.02);
}

.nova-sp-hero-arena__fx.fx-theme-blaze::before{
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(124,45,18,.55), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 48%, rgba(249,115,22,.25), transparent 66%);
}
.nova-sp-hero-arena__fx.fx-theme-star::before{
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(49,46,129,.55), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 48%, rgba(168,85,247,.22), transparent 66%);
}
.nova-sp-hero-arena__fx.fx-theme-turbo::before{
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(6,78,59,.55), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 48%, rgba(34,211,238,.18), transparent 66%);
}
.nova-sp-hero-arena__fx.fx-theme-mythic::before{
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(30,27,75,.58), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 48%, rgba(96,165,250,.20), transparent 66%),
    radial-gradient(ellipse 52% 40% at 50% 42%, rgba(253,224,71,.10), transparent 62%);
}
.nova-sp-hero-arena__fx.fx-theme-simsek::before{
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(2,6,23,.62), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 48%, rgba(14,165,233,.22), transparent 66%),
    radial-gradient(ellipse 52% 40% at 50% 42%, rgba(253,224,71,.12), transparent 62%);
}
.nova-sp-hero-arena__fx.fx-theme-buz::before{
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(2,6,23,.68), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 48%, rgba(34,211,238,.26), transparent 66%),
    radial-gradient(ellipse 52% 40% at 50% 42%, rgba(236,254,255,.16), transparent 62%);
}
.nova-sp-hero-arena__fx.fx-theme-bilge::before{
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(13,148,136,.55), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 48%, rgba(34,211,238,.20), transparent 66%),
    radial-gradient(ellipse 52% 40% at 50% 42%, rgba(253,224,71,.08), transparent 62%);
}

/* EPIC: enerji halkaları */
.nova-sp-hero-arena__fx::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(72vw, 520px);
  height: min(72vw, 520px);
  margin-left: calc(min(72vw, 520px) * -0.5);
  margin-top: calc(min(72vw, 520px) * -0.5);
  border-radius: 999px;
  opacity: 0;
  transform: scale(.25);
  filter: blur(.2px);
}
.nova-sp-hero-arena__fx.fx-variant-epic::after{
  opacity: .9;
  animation: novaSpFxRings 1.9s cubic-bezier(.22,1,.36,1) both;
}
.nova-sp-hero-arena__fx.fx-theme-blaze.fx-variant-epic::after{
  box-shadow:
    0 0 0 2px rgba(253,186,116,.55) inset,
    0 0 36px rgba(249,115,22,.35),
    0 0 90px rgba(249,115,22,.18);
}
.nova-sp-hero-arena__fx.fx-theme-star.fx-variant-epic::after{
  box-shadow:
    0 0 0 2px rgba(233,213,255,.5) inset,
    0 0 36px rgba(168,85,247,.32),
    0 0 90px rgba(168,85,247,.16);
}
.nova-sp-hero-arena__fx.fx-theme-turbo.fx-variant-epic::after{
  box-shadow:
    0 0 0 2px rgba(167,243,208,.5) inset,
    0 0 36px rgba(16,185,129,.28),
    0 0 90px rgba(34,211,238,.14);
}
.nova-sp-hero-arena__fx.fx-theme-mythic.fx-variant-epic::after{
  box-shadow:
    0 0 0 2px rgba(224,231,255,.48) inset,
    0 0 36px rgba(96,165,250,.30),
    0 0 90px rgba(124,58,237,.18);
}
.nova-sp-hero-arena__fx.fx-theme-simsek.fx-variant-epic::after{
  box-shadow:
    0 0 0 2px rgba(255,251,235,.48) inset,
    0 0 36px rgba(253,224,71,.26),
    0 0 90px rgba(14,165,233,.18);
}
.nova-sp-hero-arena__fx.fx-theme-buz.fx-variant-epic::after{
  box-shadow:
    0 0 0 2px rgba(236,254,255,.52) inset,
    0 0 42px rgba(34,211,238,.34),
    0 0 100px rgba(129,140,248,.22);
}
.nova-sp-hero-arena__fx.fx-theme-bilge.fx-variant-epic::after{
  box-shadow:
    0 0 0 2px rgba(236,254,255,.50) inset,
    0 0 36px rgba(34,211,238,.30),
    0 0 90px rgba(20,184,166,.18);
}

@keyframes novaSpFxRings{
  0%{ transform: scale(.22); opacity: 0; }
  20%{ opacity: .95; }
  65%{ transform: scale(1.06); opacity: .55; }
  100%{ transform: scale(1.22); opacity: 0; }
}

/* Parçacıklar */
.nova-sp-fx-particle{
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--p-s, 1));
  will-change: transform, opacity, filter;
  animation: novaSpFxParticle var(--p-d, 520ms) cubic-bezier(.22,1,.36,1) both;
}

/* Tipler */
.nova-sp-fx-particle.p-ember{
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(249,115,22,.85) 45%, rgba(124,45,18,0) 75%);
  filter: blur(.2px);
}
.nova-sp-fx-particle.p-star{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(196,181,253,.85) 45%, rgba(168,85,247,0) 75%);
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--p-s, 1));
}
.nova-sp-fx-particle.p-speed{
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,211,238,0), rgba(34,211,238,.95), rgba(167,243,208,0));
  transform: translate(-50%, -50%) rotate(-12deg) scaleX(var(--p-s, 1));
}

.nova-sp-fx-particle.p-spark{
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(253,224,71,.85) 42%, rgba(14,165,233,.35) 62%, rgba(2,6,23,0) 78%);
  filter: blur(.15px);
}
.nova-sp-fx-particle.p-frost{
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: radial-gradient(circle, rgba(255,255,255,.98), rgba(165,243,252,.9) 40%, rgba(34,211,238,.45) 65%, rgba(2,6,23,0) 80%);
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--p-s, 1));
  filter: blur(.12px);
  box-shadow: 0 0 6px rgba(236,254,255,.35);
}

@keyframes novaSpFxParticle{
  0%{ opacity: 0; transform: translate(-50%, -50%) scale(var(--p-s, 1)) translateY(10px); }
  15%{ opacity: .95; }
  70%{ opacity: .55; }
  100%{ opacity: 0; transform: translate(-50%, -50%) scale(var(--p-s, 1)) translateY(-38px); }
}

@media (prefers-reduced-motion: reduce){
  .nova-sp-hero-arena__fx.fx-variant-epic::after,
  .nova-sp-fx-particle{
    animation: none !important;
  }
  .nova-sp-hero-arena__fx{ transition: opacity .15s ease; }
}