/* Wheel of names - names textarea beside a spinning canvas wheel, then result + spin.
   Reuses base .field / .btn; colors come from theme tokens only (the canvas itself reads
   the same tokens via getComputedStyle). */

.wheel-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-bottom: 16px; }
@media (max-width: 720px) { .wheel-layout { grid-template-columns: 1fr; } }

.wheel-names-field { display: flex; flex-direction: column; gap: 6px; }
.wheel-field-label { font-size: 14px; color: var(--muted); font-weight: 600; }
.wheel-names { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.5; }

.wheel-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.wheel-canvas-wrap { position: relative; width: 100%; max-width: 440px; }
.wheel-canvas { display: block; width: 100%; height: auto; }

/* Pointer at the top, pointing down into the wheel. */
.wheel-pointer {
    position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; z-index: 1;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 26px solid var(--accent-strong);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}

.wheel-result {
    margin: 0; font-size: 40px; font-weight: 800; line-height: 1.1; text-align: center;
    color: var(--accent-strong); min-height: 1.1em; word-break: break-word;
}
.wheel-result.is-pop { animation: pop-in .28s ease-out; } /* @keyframes pop-in in base.css */
@media (prefers-reduced-motion: reduce) {
    .wheel-result.is-pop { animation: none; }
}

.wheel-spin { min-width: 160px; font-size: 16px; }
.wheel-spin:disabled { opacity: .6; cursor: not-allowed; }

.wheel-error { margin: 0 0 16px; }