.wheel-title { margin: 0; font-size: 1.15rem; text-align: center; }
.wheel { position: relative; width: min(100%, 26rem); aspect-ratio: 1; }
.wheel-disc { pointer-events: none; position: absolute; inset: 14px 0 0; margin: auto; width: calc(100% - 14px); aspect-ratio: 1; will-change: transform; }
.wheel-disc svg { display: block; width: 100%; height: 100%; }
.wheel-disc.is-spinning { transition: transform 4.6s cubic-bezier(0.12, 0.7, 0.08, 1); }
.wheel-pointer { position: absolute; top: 0; left: 50%; width: 28px; height: 24px; transform: translateX(-50%); z-index: 2; fill: var(--ink); }
.wheel-hub {
  position: absolute; left: 50%; top: calc(50% + 7px); transform: translate(-50%, -50%); z-index: 2;
  width: 64px; height: 64px; border-radius: 50%; padding: 0; background: var(--paper); border: 1px solid var(--line);
  font-weight: 700; font-size: 1.1rem; box-shadow: 0 1px 0 var(--line);
}
.wheel-hub:hover { background: var(--paper); color: var(--accent-red); }
.wheel-hub:active { transform: translate(-50%, -50%) scale(0.95); }
.wheel-seg-label { font-size: 9px; font-weight: 700; fill: var(--on-accent); font-family: var(--font-cjk); }
.wheel-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.wheel-gap { stroke: var(--paper); stroke-width: 1.2; }
.result-value.is-win { color: var(--accent-red); }