.sw-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .sw-layout { grid-template-columns: 1fr; } }
.sw-stage { display: grid; gap: 14px; justify-items: center; }
.sw-wheel { position: relative; width: min(100%, 520px); aspect-ratio: 1; }
.sw-wheel canvas { width: 100%; height: 100%; display: block; cursor: pointer; border-radius: 50%; }
.sw-pointer { position: absolute; top: -4px; left: 50%; width: 34px; height: 44px; margin-left: -17px; transform-origin: 50% 20%; z-index: 2; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3)); }
.sw-pointer::before { content: ''; position: absolute; inset: 0; background: var(--ink); clip-path: polygon(50% 100%, 0 0, 100% 0); border-radius: 4px; }
.sw-flick { animation: sw-flick 0.12s ease-out; }
@keyframes sw-flick { 50% { transform: rotate(-14deg); } }
.sw-hub { position: absolute; top: 50%; left: 50%; width: 19%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid #fff; background: var(--grad); color: #fff; font: inherit; font-weight: 800; font-size: clamp(0.75rem, 2.4vw, 1.05rem); letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 6px 18px -6px rgba(40, 30, 140, 0.6); }
.sw-hub:disabled { cursor: not-allowed; opacity: 0.7; }
.sw-hub:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sw-stage:fullscreen { background: var(--bg); padding: 24px; align-content: center; overflow: auto; }
.sw-stage:fullscreen .sw-wheel { width: min(86vh, 92vw); }
.sw-stage:-webkit-full-screen { background: var(--bg); padding: 24px; align-content: center; }
.sw-stage:-webkit-full-screen .sw-wheel { width: min(86vh, 92vw); }
#sw-entries { min-height: 240px; }
#sw-results { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.sw-dialog { border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 28px 24px; background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow-lg); text-align: center; width: min(92vw, 440px); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.sw-dialog::backdrop { background: rgba(10, 14, 28, 0.55); }
.sw-dialog[open] { animation: sw-in 0.25s ease; }
@keyframes sw-in { from { transform: scale(0.85); opacity: 0; } }
.sw-winner { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.8rem); font-weight: 800; margin: 6px 0 18px; word-break: break-word; line-height: 1.15; }
.sw-dialog .row { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .sw-flick, .sw-dialog[open] { animation: none; } }