/* ============================================================
   NAMBAWIN — WHEEL COMPONENT (PREMIUM)
   ============================================================ */

/* ---- WHEEL OUTER CONTAINER ---- */
:root {
  --wheel-size: 320px;
  --ball-offset: -132px;
}
@media (min-width: 900px) {
  :root {
    --wheel-size: 460px;
    --ball-offset: -190px;
  }
}

.wheel-container {
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Outer dark bezel */
.wheel-container::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    #1a0a00, #8B6914, #f5d06a, #d4af37, #f5d06a, #8B6914, #1a0a00,
    #8B6914, #f5d06a, #d4af37, #f5d06a, #8B6914, #1a0a00
  );
  z-index: 0;
}

/* Outer thick gold rim */
.wheel-container::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 8px solid transparent;
  background: 
    linear-gradient(#0a0010, #0a0010) padding-box,
    linear-gradient(135deg, #f5d06a, #8B6914, #f5d06a, #c9a227, #f5d06a) border-box;
  z-index: 1;
}

/* ---- THE ACTUAL SPINNING WHEEL ---- */
.wheel {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  overflow: hidden;
  /* No CSS transition — JS controls animation via requestAnimationFrame or direct style */
  background: repeating-conic-gradient(
    #c41e1e 0deg 20deg,
    #14532d 20deg 40deg
  );
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.7),
    inset 0 0 60px rgba(0,0,0,0.4);
  z-index: 2;
}

/* Segment divider lines overlay */
.wheel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    transparent 0deg 19.5deg,
    rgba(0,0,0,0.35) 19.5deg 20deg,
    transparent 20deg 39.5deg,
    rgba(0,0,0,0.35) 39.5deg 40deg
  );
  z-index: 1;
}

/* ---- WHEEL CENTER HUB ---- */
.wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe066, #c9a227 40%, #7a5800 80%, #3d2a00 100%);
  border: 4px solid #f5d06a;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.6),
    0 0 20px rgba(245,208,106,0.5),
    inset 0 2px 4px rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.4);
  z-index: 15;
}

/* Center screw dot */
.wheel-center::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff8dc, #a07800);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ---- MARQUEE LIGHT DOTS ---- */
.wheel-lights {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
}
.wheel-lights::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 230, 80, 0.6);
  box-shadow:
    0 0 8px rgba(255,230,80,0.4),
    inset 0 0 8px rgba(255,230,80,0.2);
  animation: lightFlicker 1.5s ease-in-out infinite;
}
@keyframes lightFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* ---- BALLS CONTAINER ---- */
.balls-container {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 25;
  transition: transform 20s cubic-bezier(0.05, 0.95, 0.2, 1);
}

/* ---- INDIVIDUAL BALLS ---- */
.ball {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,
    #ffffff 0%,
    #e8e8e8 30%,
    #b0b0b0 65%,
    #606060 100%
  );
  box-shadow:
    0 3px 12px rgba(0,0,0,0.95),
    0 1px 4px rgba(0,0,0,0.6),
    inset 0 2px 4px rgba(255,255,255,0.6);
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
  transform-origin: center center;
}

.ball-1 {
  transform: translateX(0px) translateY(var(--ball-offset));
}