/* ===== ROULETTE — Royale Violet restyle. Green felt table kept (it's a roulette table). ===== */

/* --- the stage: violet card, gold hairline, faint gold glow up top --- */
.roulette-stage {
    --acc: #f5c451;
    width: 100%;
    max-width: 344px;
    margin: 0 auto 12px;
    padding: 16px 12px 12px;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(245, 196, 81, 0.10), transparent 60%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(245, 196, 81, 0.22);
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* wheel left, recent-7 rail on its right */
.roulette-display {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* --- recent results rail (last 7, newest on top) --- */
.roulette-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-top: 4px;
    min-width: 34px;
}
.roulette-rail-label {
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #6f6794;
}
.roulette-rail .roulette-history {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

/*
 * The wheel is the reference artwork (an <img>); the spin ROTATES it, so it
 * needs its own box. Rotating the element itself would spin its bounding box
 * too — the wrapper holds the layout size and the wheel turns inside it.
 */
.roulette-wheel-wrap {
    width: 232px;
    height: 232px;
    margin: 0 auto;
    position: relative;   /* anchor for the .roulette-marker pointer */
}

.roulette-wheel {
    width: 232px;
    height: 232px;
    display: block;
    border-radius: 50%;
    user-select: none;
    -webkit-user-drag: none;
    /* soft floor shadow so the wheel sits ON the table, not in it */
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
    will-change: transform;
    /* start at 0; the idle drift and every spin set the angle via inline style */
    transform: rotate(0deg);
}

/*
 * The winning marker — an inverted triangle pinned at the TOP of the wheel,
 * exactly where the drawn pocket comes to rest. Gold body, warm glow.
 * Sits ABOVE the image (z-index) and is NOT rotated by the spin — the wheel
 * turns under it, the pointer stays put, which is what makes the stop legible.
 */
.roulette-marker {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 30px;
    height: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

/* the inverted triangle itself */
.roulette-marker-tri {
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 20px solid #f5c451;
    filter: drop-shadow(0 0 6px rgba(245, 196, 81, 0.9));
    margin-top: 2px;
}

/*
 * Suspense: a slow glow pulse while the wheel is spinning, driven by the
 * .spinning class the JS adds to the wrapper. It settles when the class drops.
 */
.roulette-wheel-wrap.spinning .roulette-marker-tri {
    animation: roulette-marker-pulse 0.6s ease-in-out infinite;
}
@keyframes roulette-marker-pulse {
    0%, 100% {
        border-top-color: #f5c451;
        filter: drop-shadow(0 0 6px rgba(245, 196, 81, 0.9));
    }
    50% {
        border-top-color: #ffe9a8;
        filter: drop-shadow(0 0 14px rgba(255, 217, 106, 1));
    }
}

.roulette-history-item {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.roulette-history-item.red { background: radial-gradient(circle at 35% 30%, #ff6b6b, #c81e1e 72%); }
.roulette-history-item.black { background: radial-gradient(circle at 35% 30%, #4b5563, #14161a 72%); border: 1px solid #4b5563; }
.roulette-history-item.green { background: radial-gradient(circle at 35% 30%, #4ade80, #15803d 72%); }
.roulette-rail .roulette-history-item:first-child {
    outline: 2px solid #f5c451;
    outline-offset: 1px;
    transform: scale(1.12);
}

/* ===== the betting table — green felt, real roulette layout ===== */
.roulette-table {
    width: 100%;
    padding: 9px;
    border-radius: 16px;
    background:
        radial-gradient(130% 110% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
        linear-gradient(160deg, #177245, #0b4d2a 60%, #083d21);
    border: 2px solid rgba(245, 196, 81, 0.5);
    box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.08), inset 0 -12px 24px rgba(0, 0, 0, 0.35), 0 12px 26px rgba(0, 0, 0, 0.4);
}
.roulette-grid {
    display: grid;
    grid-template-columns: 36px repeat(4, 1fr);
    grid-auto-rows: 46px;
    gap: 4px;
}
.roulette-grid .zero { grid-row: span 3; }
.roulette-outside {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-top: 4px;
}
.roulette-outside .roulette-cell { height: 38px; }

.roulette-cell {
    position: relative;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: rgba(0, 0, 0, 0.28);
    color: #f5f0ff;
    font-weight: 800;
    font-size: 0.86rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s ease;
    -webkit-tap-highlight-color: transparent;
}
.roulette-cell:active { transform: scale(0.93); }
.roulette-cell.red { background: linear-gradient(160deg, #d42a2a, #a11616); }
.roulette-cell.black { background: linear-gradient(160deg, #2c313a, #101216); }
.roulette-cell.green { background: linear-gradient(160deg, #1d9e50, #116b34); }
.roulette-cell.outside { font-size: 0.64rem; letter-spacing: 0.02em; }
.roulette-cell.has-chip { border-color: #f5c451; box-shadow: 0 0 0 1px #f5c451, 0 0 12px rgba(245, 196, 81, 0.35); }

/* the chip sitting on a cell — dashed white edge, stacked total in the centre */
.roulette-chip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #9d7bff, #6d28d9 62%, #4c1d95);
    border: 3px dashed rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 0 #2e1065, 0 6px 10px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.56rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: roulette-chip-drop 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4);
    z-index: 2;
}
.roulette-outside .roulette-chip { width: 27px; height: 27px; font-size: 0.5rem; }
@keyframes roulette-chip-drop {
    0% { transform: translate(-50%, -90%) scale(0.7); opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.roulette-selected-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    min-height: 30px;
}
.roulette-selected {
    font-size: 0.8rem;
    font-weight: 600;
    color: #a79fc2;
    text-align: left;
}
.roulette-clear {
    flex-shrink: 0;
    border: 1px solid rgba(245, 196, 81, 0.25);
    background: rgba(245, 196, 81, 0.06);
    color: #fca5a5;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
}

/* compact screens: wheel shrinks so wheel + rail still fit */
@media (max-width: 380px) {
    .roulette-wheel-wrap, .roulette-wheel { width: 198px; height: 198px; }
    .roulette-cell { font-size: 0.78rem; }
    .roulette-grid { grid-auto-rows: 42px; grid-template-columns: 32px repeat(4, 1fr); }
    .roulette-stage { padding: 14px 10px 10px; }
}

/*
 * Winner stay: for the 3 seconds the wheel sits on the drawn pocket the
 * marker locks solid bright gold and throbs slowly — "this is the one".
 */
.roulette-wheel-wrap.winner-stay .roulette-marker-tri {
    animation: roulette-marker-winner 0.9s ease-in-out infinite;
}
@keyframes roulette-marker-winner {
    0%, 100% {
        border-top-color: #ffd76a;
        filter: drop-shadow(0 0 10px rgba(255, 215, 106, 1));
    }
    50% {
        border-top-color: #fff3c4;
        filter: drop-shadow(0 0 20px rgba(255, 230, 150, 1));
    }
}

/* the winning number itself, popped under the marker in its pocket colour */
.roulette-win-badge {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%) scale(0.4);
    z-index: 6;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 900;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.5), opacity 0.25s ease;
}
.roulette-win-badge.show { opacity: 1; transform: translateX(-50%) scale(1); }
.roulette-win-badge.red { background: radial-gradient(circle at 35% 30%, #ff6b6b, #c81e1e 70%); }
.roulette-win-badge.black { background: radial-gradient(circle at 35% 30%, #4b5563, #111318 70%); }
.roulette-win-badge.green { background: radial-gradient(circle at 35% 30%, #4ade80, #15803d 70%); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}