/**
 * RC8 — Random Buy PNG wheel layout (presentation only).
 */

.bonus-wheel-overlay--fullstage .bonus-wheel-stage,
.bonus-wheel-overlay--png .bonus-wheel-stage {
  --rc8-wheel-size: min(68vmin, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bonus-wheel-wheel-unit {
  position: relative;
  width: var(--rc8-wheel-size);
  height: var(--rc8-wheel-size);
  margin: 0 auto;
  flex-shrink: 0;
}

.bonus-wheel-overlay--png .bonus-wheel-rim,
.bonus-wheel-overlay--png .bonus-wheel-disc-chrome,
.bonus-wheel-overlay--png .bonus-wheel-disc-inner,
.bonus-wheel-overlay--png .bonus-wheel-segment {
  display: none !important;
}

.bonus-wheel-overlay--png .bonus-wheel-disc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 42px rgba(255, 215, 0, 0.28),
    0 12px 36px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 50%;
}

.bonus-wheel-disc-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
  user-select: none;
}

.bonus-wheel-overlay--png .bonus-wheel-pointer-wrap {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -58%);
  z-index: 12;
  pointer-events: none;
  transform-origin: 50% 100%;
}

.bonus-wheel-overlay--png .bonus-wheel-pointer-glow {
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -20%);
}

.bonus-wheel-overlay--png .bonus-wheel-pointer {
  align-items: center;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65));
}

.bonus-wheel-pointer-img--rc8 {
  display: block;
  width: clamp(40px, 7vmin, 56px);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.bonus-wheel-pointer--css-fallback {
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 32px solid #f1c40f;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65));
}

.bonus-wheel-overlay--png .bonus-wheel-result-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 14;
}

.bonus-wheel-overlay--png .bonus-wheel-lights {
  inset: 0;
  pointer-events: none;
}

.bonus-wheel-overlay--png .bonus-wheel-light-bulb {
  transform: rotate(var(--bulb-angle)) translateY(calc(var(--rc8-wheel-size) / -2 - 8px));
}

.bonus-wheel-overlay--png .bonus-wheel-result-banner--visible {
  animation: rc8-wheel-banner-glow 1.2s ease-in-out 2;
}

@keyframes rc8-wheel-banner-glow {
  0%,
  100% {
    box-shadow: 0 8px 28px rgba(255, 215, 0, 0.35);
  }
  50% {
    box-shadow:
      0 8px 36px rgba(255, 215, 0, 0.65),
      0 0 24px rgba(255, 215, 0, 0.45);
  }
}

.bonus-wheel-overlay--png.bonus-wheel-overlay--spinning .bonus-wheel-disc-img {
  filter: brightness(1.04);
}

.bonus-wheel-overlay--png.bonus-wheel-overlay--stopped .bonus-wheel-disc-img {
  filter: brightness(1.12) drop-shadow(0 0 18px rgba(255, 215, 0, 0.35));
}

.bonus-wheel-overlay--png .bonus-wheel-pointer-wrap.bonus-wheel-pointer-wrap--tick {
  animation: rc8-pointer-tick 0.08s ease-out;
}

@keyframes rc8-pointer-tick {
  0% {
    transform: translate(-50%, -58%);
  }
  100% {
    transform: translate(-50%, -52%);
  }
}