.spin-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s;
}

.spin-overlay.bungmo-bg {
  background: rgba(12, 3, 10, 0.35);
}

.spin-overlay.squat-bg {
  background: rgba(8, 1, 6, 0.72);
}

.spin-wheel-container {
  position: relative;
}

.spin-wheel-container.bungmo {
  width: 55vmin;
  height: 55vmin;
}

.spin-wheel-container.squat {
  width: 65vmin;
  height: 65vmin;
}

.spin-pointer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  z-index: 10;
}

.spin-wheel-container.bungmo .spin-pointer {
  top: -2vmin;
  border-left: 2.2vmin solid transparent;
  border-right: 2.2vmin solid transparent;
  border-top: 4.5vmin solid var(--color-text);
  filter: drop-shadow(0 0 0.8vmin rgba(0,0,0,0.5));
  animation: pointerBungmo 0.28s ease-in-out infinite;
}

.spin-wheel-container.squat .spin-pointer {
  top: -2.5vmin;
  border-left: 3vmin solid transparent;
  border-right: 3vmin solid transparent;
  border-top: 6vmin solid var(--color-squat-primary);
  filter: drop-shadow(0 0 3vmin var(--color-squat-glow));
  animation: pointerSquat 0.45s ease-in-out infinite;
}

@keyframes pointerBungmo {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-0.8vmin); }
}

@keyframes pointerSquat {
  0%, 100% { transform: translateX(-50%) translateY(0) scaleY(1); }
  35% { transform: translateX(-50%) translateY(-1.8vmin) scaleY(1.15); }
}

.spin-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.spin-wheel canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.spin-reward {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20;
  text-align: center;
  white-space: nowrap;
  font-weight: 900;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
}

.spin-reward.bungmo-reward {
  transform: translate(-50%, -50%) scale(0);
  background: rgba(18, 6, 14, 0.93);
  color: var(--color-accent-secondary);
  padding: 2.5vmin 5vmin;
  border-radius: 2vmin;
  font-size: 4.5vmin;
  border: 0.3vmin solid var(--color-surface-border-active);
  box-shadow: 0 0 4vmin var(--color-accent-secondary-glow);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 18vmin;
  letter-spacing: 0.06em;
}

.spin-reward.squat-reward {
  transform: translate(-50%, -50%) scale(0);
  background: linear-gradient(135deg, rgba(20, 4, 14, 0.96), rgba(35, 8, 22, 0.95));
  color: var(--color-accent);
  padding: 3.5vmin 7vmin;
  border-radius: 3vmin;
  font-size: 5.5vmin;
  border: 0.4vmin solid rgba(255, 90, 140, 0.55);
  box-shadow:
    0 0 8vmin var(--color-squat-glow),
    0 0 22vmin var(--color-squat-glow-outer),
    inset 0 0 4vmin rgba(255, 90, 140, 0.12);
  transition: transform 0.5s cubic-bezier(0.17, 1.2, 0.3, 1);
  letter-spacing: 0.08em;
  text-shadow: 0 0 3vmin var(--color-squat-glow);
  min-width: 22vmin;
}

.spin-reward.show {
  transform: translate(-50%, -50%) scale(1);
}

/* Bung Mo */
.spin-wheel-container.bungmo .spin-wheel {
  animation: bungmoEnter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  border: 0.5vmin solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 3vmin var(--color-bungmo-glow);
}

@keyframes bungmoEnter {
  0% { opacity: 0; transform: scale(0.15) rotate(-120deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Squat entrance - grand */
.spin-wheel-container.squat .spin-wheel {
  animation: squatEnter 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  border: 0.8vmin solid rgba(255, 90, 140, 0.35);
  box-shadow:
    0 0 12vmin var(--color-squat-glow),
    0 0 28vmin var(--color-squat-glow-outer);
}

@keyframes squatEnter {
  0% {
    opacity: 0;
    transform: scale(0.08) translateY(-15vmin) rotate(-30deg);
    filter: blur(3vmin);
  }
  55% {
    transform: scale(1.04) translateY(0.4vmin) rotate(3deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
    filter: blur(0);
  }
}

/* Squat spinning glow pulse */
.spin-wheel-container.squat .spin-wheel.spinning {
  animation: squatPulse 2s ease-in-out infinite alternate;
  border-color: rgba(255, 90, 140, 0.55);
  box-shadow:
    0 0 15vmin var(--color-squat-glow),
    0 0 35vmin rgba(255, 90, 140, 0.35),
    0 0 55vmin var(--color-squat-glow-outer);
}

@keyframes squatPulse {
  0% {
    box-shadow:
      0 0 12vmin var(--color-squat-glow),
      0 0 28vmin rgba(255, 90, 140, 0.3),
      0 0 48vmin var(--color-squat-glow-outer);
  }
  100% {
    box-shadow:
      0 0 18vmin var(--color-squat-glow),
      0 0 45vmin rgba(255, 90, 140, 0.5),
      0 0 70vmin rgba(255, 40, 100, 0.35);
  }
}

/* Squat concentric rings */
.squat-outer-ring {
  position: absolute;
  width: calc(100% + 5vmin);
  height: calc(100% + 5vmin);
  top: -2.5vmin;
  left: -2.5vmin;
  border-radius: 50%;
  border: 0.25vmin solid rgba(255, 90, 140, 0.22);
  pointer-events: none;
  animation: outerRingPulse 3s ease-in-out infinite;
}

@keyframes outerRingPulse {
  0%, 100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.04);
  }
}

.squat-inner-ring {
  position: absolute;
  width: calc(100% - 5vmin);
  height: calc(100% - 5vmin);
  top: 2.5vmin;
  left: 2.5vmin;
  border-radius: 50%;
  border: 0.2vmin solid rgba(255, 125, 168, 0.2);
  border-style: dotted;
  pointer-events: none;
  animation: innerRingSpin 6s linear infinite;
}

@keyframes innerRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* Squat halo ring */
.squat-halo {
  position: absolute;
  width: calc(100% + 9vmin);
  height: calc(100% + 9vmin);
  top: -4.5vmin;
  left: -4.5vmin;
  border-radius: 50%;
  border: 0.45vmin solid rgba(255, 90, 140, 0.16);
  border-style: dashed;
  animation: squatHaloSpin 5.5s linear infinite;
  pointer-events: none;
}

@keyframes squatHaloSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Spark particles */
.spin-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.spin-spark {
  position: absolute;
  border-radius: 50%;
  animation: sparkBurst 1.5s ease-out forwards;
}

.spin-spark.bungmo-spark {
  width: 0.7vmin;
  height: 0.7vmin;
  box-shadow: 0 0 0.8vmin rgba(255, 125, 168, 0.8);
}

.spin-spark.squat-spark {
  width: 0.9vmin;
  height: 0.9vmin;
  box-shadow: 0 0 1.5vmin var(--color-accent), 0 0 3vmin var(--color-accent-deep);
}

@keyframes sparkBurst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--sx), var(--sy)) scale(0);
  }
}

/* Squat light beams */
.squat-beams {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.25;
}

.squat-beam {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2vmin;
  height: 50%;
  background: linear-gradient(to top, rgba(255, 90, 140, 0.55), transparent);
  transform-origin: bottom center;
  animation: beamRotate 2s linear infinite;
}

@keyframes beamRotate {
  0% { transform: translate(-50%, -100%) rotate(0deg); }
  100% { transform: translate(-50%, -100%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spin-pointer {
    animation: none;
  }
  .spin-wheel-container.bungmo .spin-wheel,
  .spin-wheel-container.squat .spin-wheel {
    animation: none;
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  .spinning,
  .squat-outer-ring,
  .squat-inner-ring,
  .squat-halo,
  .squat-beam {
    animation: none;
  }
  .spin-spark {
    animation: none;
    display: none;
  }
  .spin-reward {
    transition: none;
  }
}