/* /spin-the-wheel only: the SVG wheel and its fixed pointer. Scoped under #whlApp.
   The spin itself is a JS-driven transform (skipped under reduced motion), not a CSS animation. */
#whlApp .whl-stage { display: flex; justify-content: center; }
#whlApp .whl-wheel { display: block; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
#whlApp .whl-wheel:focus-visible { outline: 3px solid var(--bm-accent-ring); outline-offset: 4px; }
#whlApp .whl-wheel svg { width: 100%; height: 100%; display: block; }
#whlApp .whl-wheel .whl-rim { fill: none; stroke: var(--bm-ink); stroke-width: 3; }
#whlApp .whl-wheel .whl-hub { fill: var(--bm-surface); stroke: var(--bm-ink); stroke-width: 2; }
#whlApp .whl-wheel .whl-pointer { fill: var(--bm-ink); }
#whlApp .whl-wheel text { font-family: inherit; font-weight: 700; pointer-events: none; }
#whlApp .whl-wheel .whl-slice { stroke: var(--bm-surface); stroke-width: 1; }
#whlApp .whl-wheel .whl-slice.is-win { stroke: var(--bm-ink); stroke-width: 3; }
#whlApp .whl-actions { justify-content: center; }
#whlApp .whl-actions .bm-btn-primary { min-width: 160px; font-size: 1.05rem; }
@media (forced-colors: active) { #whlApp .whl-wheel .whl-slice { stroke: CanvasText; } #whlApp .whl-wheel .whl-pointer { fill: CanvasText; } }