/* Shared wheel chrome — circular Fun Zone disc. No page/body rules. */
.wheel-stage{
  position:relative;
  width:min(280px, 72vw);
  aspect-ratio:1 / 1;
  height:auto;
  margin:0 auto 14px;
  user-select:none;
  touch-action:none;
}
.wheel{
  position:relative;
  width:100%;
  height:100%;
  aspect-ratio:1 / 1;
  overflow:visible;
  border-radius:50%;
}
.wheel.is-locked{opacity:.88; filter:saturate(.9)}

.rim{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:2;
  background:conic-gradient(from 0deg, #f4f7fa, #8b959f, #eef2f6, #5a636c, #f4f7fa);
  -webkit-mask:radial-gradient(circle closest-side, transparent 82%, #000 83.2%);
          mask:radial-gradient(circle closest-side, transparent 82%, #000 83.2%);
}

.disc-clip{
  position:absolute; inset:10.5%; border-radius:50%; overflow:hidden; z-index:4;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  aspect-ratio:1 / 1;
}
.disc{
  position:absolute; inset:0; border-radius:50%;
  transform-origin:50% 50%;
  will-change:transform;
}
.disc::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.28), transparent 42%);
}
.labs{
  position:absolute; inset:0; width:100%; height:100%; z-index:2;
  pointer-events:none; overflow:visible;
}
.labs text{paint-order:stroke fill; stroke:rgba(8,27,51,.35); stroke-width:.6px}

.hub{
  position:absolute; left:50%; top:50%; z-index:5; pointer-events:none;
  width:28%; height:28%; margin:-14% 0 0 -14%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f7f9fb 0%, #c8d0d8 42%, #6a7380 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.7);
}
.hub::after{
  content:""; position:absolute; inset:28%; border-radius:50%;
  background:#1a2430;
  box-shadow:inset 0 0 0 3px #c5cdd6;
}

.peg{
  position:absolute; left:50%; top:-4px; z-index:6;
  width:40px; height:52px; margin-left:-20px;
  pointer-events:none;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));
}
.lock-chip{
  position:absolute; left:50%; top:50%; z-index:7;
  transform:translate(-50%,-50%);
  padding:8px 14px; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(8,27,51,.82); border:1px solid rgba(245,247,250,.4); color:#fff;
  pointer-events:none; white-space:nowrap;
}
.wheel:not(.is-locked) .lock-chip{display:none}
.wheel.is-drag .disc-clip{cursor:grabbing}
.wheel:not(.is-locked):not(.is-done) .disc-clip{cursor:grab}

@media (prefers-reduced-motion: reduce){
  .disc{transition:none}
}