.ox-ws { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.ox-ws-stage { position: relative; width: 100%; max-width: 520px; margin-inline: auto; padding-top: 18px; }
.ox-ws-canvas { width: 100%; aspect-ratio: 1; height: auto; display: block; cursor: pointer; border-radius: 50%; touch-action: manipulation; }
.ox-ws-pointer { position: absolute; left: 50%; top: 0; z-index: 2; width: 0; height: 0; margin-left: -16px; border-left: 16px solid transparent; border-right: 16px solid transparent;
  border-top: 34px solid var(--text); filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); transform-origin: 50% 0; }
.ox-ws-pointer.tick { animation: ox-ws-tick .12s ease-out; }
@keyframes ox-ws-tick { 0% { transform: rotate(-14deg); } 100% { transform: rotate(0); } }
.ox-ws-spin { width: 100%; min-height: 54px; font-size: 1.15rem; }
.ox-ws-custom { gap: 8px; }
.ox-ws-color { width: 52px; height: 44px; padding: 0; border: 2px solid var(--line); border-radius: 12px; background: none; cursor: pointer; flex: 0 0 auto; }
.ox-ws-result { margin-top: 18px; text-align: center; padding: 22px; border-radius: var(--r); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), color-mix(in srgb, var(--accent-2) 24%, var(--surface))); animation: ox-pop .4s ease-out; }
.ox-ws-label { display: block; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.ox-ws-win { display: block; font: 900 clamp(1.8rem, 6vw, 3rem) var(--font-round); color: var(--accent); word-break: break-word; }
@media (max-width: 760px) { .ox-ws { grid-template-columns: 1fr; } }