.smart-roulette {
    --roulette-accent: #8b5cf6;
    --roulette-border: rgba(167, 139, 250, .38);
    position: relative;
    min-width: 0;
}

.smart-roulette [data-roulette-view] { display: none; }
.smart-roulette[data-roulette-state="ready"] [data-roulette-view="ready"],
.smart-roulette[data-roulette-state="searching"] [data-roulette-view="searching"],
.smart-roulette[data-roulette-state="match"] [data-roulette-view="match"],
.smart-roulette[data-roulette-state="no_match"] [data-roulette-view="no_match"],
.smart-roulette[data-roulette-state="error"] [data-roulette-view="error"] { display: grid; }

.smart-roulette [data-roulette-view] {
    box-sizing: border-box;
    width: 100%;
    min-height: 9rem;
    place-items: center;
    gap: .75rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    overflow-wrap: anywhere;
    text-align: center;
}

.smart-roulette__activity {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, .14);
    border-top-color: var(--roulette-accent);
    border-radius: 50%;
    animation: smart-roulette-activity .8s linear infinite;
}

.smart-roulette button:focus-visible,
.smart-roulette input:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
.smart-roulette button[disabled] { cursor: wait; opacity: .62; }
.smart-roulette [role="alert"] { color: #fecaca; }
.smart-roulette [role="status"] { min-height: 1.5em; }

@keyframes smart-roulette-activity { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .smart-roulette [data-roulette-view] { min-height: 8rem; padding: 1rem; }
}

@media (max-width: 390px) {
    .smart-roulette [data-roulette-actions] { display: grid; width: 100%; gap: .65rem; }
    .smart-roulette [data-roulette-actions] > * { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .smart-roulette *,
    .smart-roulette *::before,
    .smart-roulette *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }
    .smart-roulette__activity { border-color: var(--roulette-border); border-top-color: var(--roulette-accent); }
}