.energy-ring {
  position: absolute;
  inset: -20px;
  z-index: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 18%, rgba(102, 230, 255, 0.5), transparent 34% 52%, rgba(255, 211, 106, 0.6), transparent 70% 100%);
  filter: blur(14px);
  opacity: 0.4;
  transform: scale(0.96);
  pointer-events: none;
}

.energy-ring::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 15%, rgba(255, 117, 117, 0.3), transparent 30% 60%, rgba(102, 230, 255, 0.3), transparent 75% 100%);
  animation: energySpinReverse 8s linear infinite;
  mix-blend-mode: screen;
}

.spark-field {
  position: absolute;
  inset: -28px;
  z-index: 5;
  border-radius: 50%;
  pointer-events: none;
}

.spark-field i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 32px;
  border-radius: 4px;
  background: linear-gradient(to top, var(--gold), transparent);
  box-shadow: 0 0 14px var(--gold);
  opacity: 0;
  transform: rotate(calc(var(--spark-index) * 30deg)) translateY(-38%) translateX(0);
}

.spark-field i:nth-child(1) { --spark-index: 1; }
.spark-field i:nth-child(2) { --spark-index: 2; }
.spark-field i:nth-child(3) { --spark-index: 3; }
.spark-field i:nth-child(4) { --spark-index: 4; }
.spark-field i:nth-child(5) { --spark-index: 5; }
.spark-field i:nth-child(6) { --spark-index: 6; }
.spark-field i:nth-child(7) { --spark-index: 7; }
.spark-field i:nth-child(8) { --spark-index: 8; }
.spark-field i:nth-child(9) { --spark-index: 9; }
.spark-field i:nth-child(10) { --spark-index: 10; }
.spark-field i:nth-child(11) { --spark-index: 11; }
.spark-field i:nth-child(12) { --spark-index: 12; }

.is-spinning .wheel {
  box-shadow:
    inset 0 0 0 8px rgba(255, 255, 255, 0.26),
    0 34px 110px rgba(0, 0, 0, 0.52),
    0 0 110px rgba(255, 211, 106, 0.42),
    0 0 170px rgba(102, 230, 255, 0.25);
}

.is-spinning .energy-ring {
  animation: energySpin 1s linear infinite, energyPulse 0.72s ease-in-out infinite alternate;
  opacity: 0.88;
}

.is-spinning .spark-field i {
  animation: sparkBurst 0.9s ease-out infinite;
  animation-delay: calc(var(--spark-index) * -0.06s);
}

.is-spinning .pointer {
  animation: pointerBeat 0.28s ease-in-out infinite alternate;
}

.is-spinning .wheel-center {
  animation: centerGlow 0.8s ease-in-out infinite alternate;
}

@keyframes energySpin {
  to { transform: scale(1.02) rotate(360deg); }
}

@keyframes energyPulse {
  from { filter: blur(16px) saturate(1); }
  to { filter: blur(24px) saturate(1.45); }
}

@keyframes energySpinReverse {
  to { transform: rotate(-360deg); }
}

.is-spinning .wheel-stage {
  animation: stagePulse 0.6s ease-in-out infinite alternate;
}

@keyframes stagePulse {
  to { transform: scale(1.02); }
}

@keyframes sparkBurst {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--spark-index) * 30deg)) translateY(-46px) scale(0.2);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--spark-index) * 30deg)) translateY(-340px) scale(1.2);
  }
}

@keyframes pointerBeat {
  to { transform: translateY(-4px) scale(1.08); }
}

@keyframes centerGlow {
  to { box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4), 0 0 34px rgba(255, 211, 106, 0.58); }
}

@media (prefers-reduced-motion: reduce) {
  .is-spinning .energy-ring,
  .is-spinning .spark-field i,
  .is-spinning .pointer,
  .is-spinning .wheel-center {
    animation: none;
  }
}