/* Wheel: SVG rotor under a gold pointer, a hub that shows the landed multiplier, legend of odds in the controls. */
.wheel-screen { align-content: center; gap: 12px; }
.wheel-stage { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 6px auto 0; }
.wheel-rotor {
  position: absolute; inset: 0; border-radius: 50%;
  transform: rotate(var(--rot, 0deg)); transition: transform var(--spin-ms, 0ms) cubic-bezier(0.12, 0.7, 0.12, 1);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 26px rgba(139, 92, 255, 0.35));
}
.wheel-rotor svg { width: 100%; height: 100%; display: block; }
.wheel-rotor path { transition: filter 200ms var(--ease), opacity 200ms var(--ease); }
.wheel-rotor path.is-hit { filter: brightness(1.35) drop-shadow(0 0 6px #fff); }
.seg-label { font: 800 8px var(--font); fill: #0b0920; }
.wheel-pointer {
  position: absolute; z-index: 2; left: 50%; top: -6px; width: 30px; height: 36px; transform: translateX(-50%);
  background: linear-gradient(180deg, #ffe08a, #e09200); clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 4px 8px rgba(255, 201, 64, 0.8));
}
.wheel-hub {
  position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a2457, #0d0b20 70%); box-shadow: 0 0 0 3px #0b0920, 0 0 0 5px rgba(177, 140, 255, 0.25);
}
.hub-mult { font: 800 clamp(22px, 3vw, 36px)/1 var(--display); color: #d9d3ff; letter-spacing: -0.02em; }
.hub-mult.is-win { color: var(--win); text-shadow: 0 0 20px rgba(31, 224, 138, 0.7); }
.hub-mult.is-lose { color: var(--lose); text-shadow: 0 0 18px rgba(255, 61, 110, 0.5); }
.w-legend-wrap { display: grid; gap: 8px; }
.w-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.lg { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 999px; background: var(--well); box-shadow: 0 0 0 1px var(--line-2) inset; font-size: var(--step--1); }
.lg .sw { width: 14px; height: 14px; border-radius: 5px; background: var(--c); }
.lg b { font-weight: 800; }
.lg small { color: var(--dim); font-weight: 700; }
.lg.is-hit { box-shadow: 0 0 0 2px var(--gold) inset, 0 0 14px -4px var(--gold); }
@media (prefers-reduced-motion: reduce) { .wheel-rotor { transition: none; } }