/* Spin & Win (/spin-win) */
.sw-page {
    --sw-border: var(--vr-gray-200, #e5e7eb);
    --sw-surface: var(--vr-gray-50, #f9fafb);
    --sw-muted: var(--vr-gray-500, #6b7280);
    --sw-accent: var(--vr-color-main, #19bc9c);
    --sw-good: #16a34a;
    --sw-bad: #dc2626;
    max-width: 720px;
    margin: 24px auto 48px;
}

[data-bs-theme="dark"] .sw-page {
    --sw-border: var(--vr-gray-700, #374151);
    --sw-surface: var(--vr-gray-800, #1f2937);
    --sw-muted: var(--vr-gray-400, #9ca3af);
}

.sw-head { text-align: center; margin-bottom: 20px; }
.sw-title { font-size: 2rem; font-weight: 800; margin: 0 0 8px; }
.sw-lead { color: var(--sw-muted); margin: 0 auto; max-width: 540px; }

.sw-notice, .sw-card {
    border: 1px solid var(--sw-border);
    background: var(--sw-surface);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}
.sw-notice { text-align: center; }
.sw-h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 12px; }

.sw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.sw-stat { border: 1px solid var(--sw-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; min-width: 0; }
.sw-stat span, .sw-stat small { color: var(--sw-muted); font-size: 12px; }
.sw-stat strong { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Wheel */
.sw-wheel-wrap { position: relative; width: min(340px, 86vw); aspect-ratio: 1; margin: 6px auto 0; }
.sw-wheel { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .18)); }
#swRotor { transform-box: fill-box; transform-origin: center; }
.sw-label-sm { font-size: 8px !important; }
.sw-label { fill: #fff; font-size: 10px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .25); stroke-width: 2px; }
.sw-rim { fill: none; stroke: #fff; stroke-width: 4; }
.sw-pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 28px solid var(--sw-bad);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3));
    z-index: 2;
}
.sw-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--sw-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* Stake picker */
.sw-stake { margin-top: 18px; text-align: center; }
.sw-stake-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sw-muted); margin-bottom: 8px; }
.sw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sw-chip {
    min-width: 64px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 2px solid var(--sw-border);
    background: var(--vr-body-bg, #fff);
    color: inherit;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
}
.sw-chip:active { transform: scale(.95); }
.sw-chip.is-active { border-color: var(--sw-accent); background: color-mix(in srgb, var(--sw-accent), transparent 85%); }
.sw-chip:disabled { opacity: .45; cursor: not-allowed; }
.sw-custom { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.sw-input {
    width: 150px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 2px solid var(--sw-border);
    background: var(--vr-body-bg, #fff);
    color: inherit;
    font-weight: 700;
    text-align: center;
}
.sw-input:focus { outline: none; border-color: var(--sw-accent); }
.sw-range { color: var(--sw-muted); font-size: 13px; }

.sw-actions { text-align: center; margin-top: 18px; }
.sw-btn { min-width: 200px; padding: 12px 28px; font-size: 1.1rem; font-weight: 800; border-radius: 999px; }
.sw-state { margin-top: 10px; min-height: 20px; color: var(--sw-muted); font-size: 14px; }
.sw-state.is-blocked { color: var(--sw-bad); font-weight: 700; }

.sw-result { margin: 16px auto 0; max-width: 420px; padding: 12px 14px; border-radius: 10px; font-weight: 800; text-align: center; font-size: 1.05rem; }
.sw-result.is-win { background: rgba(22, 163, 74, .12); color: var(--sw-good); animation: sw-pop .5s ease; }
.sw-result.is-lose { background: rgba(220, 38, 38, .1); color: var(--sw-bad); }
.sw-result.is-even { background: rgba(37, 99, 235, .1); color: #2563eb; }
@keyframes sw-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* Prizes and history */
.sw-prizes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; }
.sw-prizes li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sw-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.sw-prize-label { font-weight: 700; }
.sw-mult { margin-left: auto; font-weight: 800; }
.sw-chance { min-width: 52px; text-align: right; color: var(--sw-muted); }
.sw-rules { margin: 16px 0 0; padding-left: 18px; color: var(--sw-muted); font-size: 14px; }

.sw-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sw-table th { color: var(--sw-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--sw-border); }
.sw-table td { padding: 8px; border-bottom: 1px solid var(--sw-border); }
.sw-table .sw-empty { text-align: center; color: var(--sw-muted); }
.sw-row-win td { color: var(--sw-good); font-weight: 700; }
.sw-row-lose .sw-net { color: var(--sw-bad); }

@media (max-width: 575px) {
    .sw-stats { grid-template-columns: 1fr; }
    .sw-prizes { grid-template-columns: 1fr; }
    .sw-card { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    #swRotor { transition-duration: 300ms !important; }
}