/* FarmBrawl - Roulette Premium (isolated from style.css) */

:root {
  /* Roulette premium theme tokens */
  --roulette-gold: #ffd700;
  --roulette-gold-dark: #b8860b;
  --roulette-ruby: #ef4444;
  --roulette-emerald: #10b981;
  --roulette-amethyst: #a855f7;
  --roulette-bg-deep: #080c18;
  --roulette-bg-panel: linear-gradient(170deg, #141b2d 0%, #0d1322 40%, #080c18 100%);
  --roulette-led-on: rgba(255, 247, 176, 0.95);
  --roulette-led-off: rgba(120, 90, 10, 0.35);
  --roulette-jackpot-halo: rgba(255, 215, 0, 0.55);
  --roulette-pointer-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 200, 0, 0.55);
  --roulette-gloss-light: rgba(255, 255, 255, 0.32);
  --roulette-spin-ease: cubic-bezier(0.1, 0.8, 0.15, 1);
}

#roulette-modal,
#roulette-modal.roulette-modal,
.modal#roulette-modal {
    z-index: 30000 !important;
    position: fixed !important;
    isolation: isolate !important;
    pointer-events: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

#roulette-modal::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        /* Spotlight cálido desde el centro de la rueda */
        radial-gradient(ellipse at 50% 38%, rgba(251, 191, 36, 0.04) 0%, transparent 45%),
        radial-gradient(ellipse at center, rgba(8,12,25,0.88) 0%, rgba(2,6,16,0.96) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#roulette-modal > div,
#roulette-modal .modal-content,
#roulette-modal .roulette-stage-shell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 1.5rem 1.15rem 1.2rem !important;
    gap: 10px !important;
    position: relative;
    z-index: 30010 !important;
    max-width: 400px;
    width: min(96vw, 400px);
    background: linear-gradient(165deg, rgba(36, 28, 18, 0.98) 0%, rgba(14, 12, 10, 0.99) 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 2px solid #0a0806 !important;
    border-radius: 0 !important;
    box-shadow:
        0 0 0 2px #c49a20,
        0 16px 48px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 220, 140, 0.08) !important;
    color: #e6ddd0;
    overflow: visible;
    box-sizing: border-box;
}

#roulette-modal .roulette-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 30;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0;
    gap: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0 !important;
    border: 2px solid #0a0806 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: none !important;
    color: #f0d060 !important;
    font-size: 0.95rem;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease;
    box-shadow: 0 0 0 1px rgba(196, 154, 32, 0.35);
}

#roulette-modal .roulette-modal-close:hover {
    background: rgba(30, 41, 59, 0.9) !important;
    color: #fff !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
    transform: scale(1.08);
}

#roulette-modal .roulette-modal-title {
    color: #f0d060 !important;
    font-family: var(--font-game, monospace) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #f0d060 !important;
    animation: none !important;
    text-shadow: 2px 2px 0 #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100%;
    padding: 0 36px !important;
    margin: 0 !important;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.25;
    white-space: normal;
}

#roulette-modal .roulette-modal-title i {
    color: #f0d060 !important;
    filter: none !important;
    -webkit-text-fill-color: #f0d060 !important;
}

@keyframes titleShine {
    to { background-position: 200% center; }
}

#roulette-modal .roulette-modal-desc {
    color: #c8b8a0 !important;
    font-family: "Nunito", system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    max-width: 100%;
    padding: 0 8px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
}
#roulette-modal .roulette-modal-desc strong {
    color: #6ee7b7 !important;
}

/* ========== STAGE PREMIUM ========== */
.roulette-stage-shell {
    position: relative;
    width: min(100%, 360px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0 0.1rem;
}

.roulette-stage-shell__halo {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.08) 30%, transparent 70%);
    filter: blur(18px);
    z-index: 0;
    animation: rouletteHaloPulse 2.8s ease-in-out infinite;
}

.roulette-ambient {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(6px);
    opacity: 0.65;
    animation: rouletteAmbientDrift 6s ease-in-out infinite;
}

.roulette-ambient--one {
    left: 2%;
    top: 14%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.38) 0%, transparent 70%);
}

.roulette-ambient--two {
    right: 2%;
    bottom: 10%;
    background: radial-gradient(circle, rgba(192, 38, 255, 0.3) 0%, transparent 70%);
    animation-delay: -3s;
}

@keyframes rouletteHaloPulse {
    0%, 100% { transform: scale(0.95); opacity: 0.55; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

@keyframes rouletteAmbientDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(8px, -10px, 0) scale(1.06); }
}

/* ========== WHEEL CONTAINER (3D depth) ========== */
.roulette-wheel-container {
    perspective: 1000px;
    position: relative;
    transform-style: preserve-3d;
}

.roulette-wheel-container.is-shaking {
    animation: screenShake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes screenShake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    10% { transform: translate3d(calc(var(--shake-intensity) * -1), calc(var(--shake-intensity) * 0.5), 0); }
    20% { transform: translate3d(calc(var(--shake-intensity) * 0.8), calc(var(--shake-intensity) * -0.7), 0); }
    30% { transform: translate3d(calc(var(--shake-intensity) * -0.6), calc(var(--shake-intensity) * 0.9), 0); }
    40% { transform: translate3d(calc(var(--shake-intensity) * 0.4), calc(var(--shake-intensity) * -0.5), 0); }
    50% { transform: translate3d(calc(var(--shake-intensity) * -0.3), calc(var(--shake-intensity) * 0.4), 0); }
    60% { transform: translate3d(calc(var(--shake-intensity) * 0.25), calc(var(--shake-intensity) * -0.2), 0); }
    70% { transform: translate3d(calc(var(--shake-intensity) * -0.2), 0, 0); }
    80% { transform: translate3d(calc(var(--shake-intensity) * 0.15), calc(var(--shake-intensity) * 0.15), 0); }
    90% { transform: translate3d(calc(var(--shake-intensity) * -0.1), calc(var(--shake-intensity) * -0.1), 0); }
}

/* ========== OUTER RING — CSS-only LED chaser ========== */
.roulette-outer-ring {
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        #2a2a4a 0%,
        #1a1a3a 40%,
        #0a0a1a 70%,
        #000000 100%);
    box-shadow:
        0 0 40px rgba(251, 191, 36, 0.25),
        inset 0 0 40px rgba(0, 0, 0, 0.8),
        inset 0 6px 20px rgba(255, 255, 255, 0.1);
    position: relative;
    transition: box-shadow 0.5s ease;
}

.roulette-wheel-container.is-spinning .roulette-outer-ring {
    /* Sin glow de luces al girar */
    box-shadow:
        0 0 24px rgba(0, 0, 0, 0.45),
        inset 0 0 40px rgba(0, 0, 0, 0.8),
        inset 0 6px 20px rgba(255, 255, 255, 0.08);
}

/* Bezel metálico estático (sin chase LED / luces animadas) */
.roulette-outer-ring::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #8a7a4a 0deg, #d4c48a 15deg, #fff8d4 30deg, #c4b47a 45deg,
        #7a6a3a 60deg, #b4a46a 75deg, #e8d8a0 90deg, #fff8d4 105deg,
        #c4b47a 120deg, #7a6a3a 135deg, #a4945a 150deg, #d4c48a 165deg,
        #fff8d4 180deg, #c4b47a 195deg, #7a6a3a 210deg, #b4a46a 225deg,
        #e8d8a0 240deg, #fff8d4 255deg, #c4b47a 270deg, #7a6a3a 285deg,
        #a4945a 300deg, #d4c48a 315deg, #fff8d4 330deg, #c4b47a 345deg,
        #8a7a4a 360deg
    );
    -webkit-mask: radial-gradient(circle, transparent 72%, #000 75%, #000 95%, transparent 100%);
    mask: radial-gradient(circle, transparent 72%, #000 75%, #000 95%, transparent 100%);
    opacity: 0.85;
    transform: rotate(0deg);
    animation: none;
    filter: none;
    z-index: 1;
}

/* Capa 2: bisel metálico interior (brillo direccional) */
.roulette-outer-ring::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, 
        rgba(255, 248, 200, 0.15) 0%,
        transparent 40%
    );
    box-shadow: 
        inset 0 2px 6px rgba(255, 255, 200, 0.10),
        inset 0 -2px 8px rgba(0, 0, 0, 0.30),
        inset 2px 0 4px rgba(255, 255, 200, 0.05),
        inset -2px 0 4px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 2;
}

/* Luces desactivadas: sin chase LED al girar / al estar activa */
.roulette-wheel-container.is-spinning .roulette-outer-ring::before,
.roulette-wheel-container.is-active .roulette-outer-ring::before {
    animation: none;
    filter: none;
}

.roulette-wheel-container.is-spinning .roulette-outer-ring::after {
    background: radial-gradient(circle at 35% 35%,
        rgba(255, 248, 200, 0.12) 0%,
        transparent 40%
    );
}

@keyframes rouletteLedChase {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ========== WHEEL CIRCLE (premium casino 3D) ========== */
@keyframes roulettePitch {
    0%   { transform: rotateX(8deg) rotateZ(0deg); }
    15%  { transform: rotateX(12deg) rotateZ(0deg); }
    70%  { transform: rotateX(5deg) rotateZ(0deg); }
    100% { transform: rotateX(4deg) rotateZ(0deg); }
}
.spin-wheel-circle {
    transform-style: preserve-3d;
    transform: rotate(0deg);
    transition: transform 4.5s cubic-bezier(0.15, 0.82, 0.12, 1);
    will-change: transform;
    border-radius: 50%;
    background:
        /* Depth overlay — "plato hondo" effect */
        radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,0.35) 100%),
        /* ═══ VIBRANT 8-segment conic ═══ */
        conic-gradient(
        from -22.5deg,
        /* Slice 0 — NADA: dark void */
        #1a1a2e 0deg 9deg,
        #12122a 9deg 18deg,
        #0e0e26 18deg 27deg,
        #0a0a22 27deg 36deg,
        #08081e 36deg 45deg,
        /* Slice 1 — Agua x3: electric blue */
        #00b0ff 45deg 54deg,
        #0090e0 54deg 63deg,
        #0070c0 63deg 72deg,
        #0058a0 72deg 81deg,
        #004080 81deg 90deg,
        /* Slice 2 — Insumo x1: lime green */
        #76ff03 90deg 99deg,
        #60e000 99deg 108deg,
        #4cc000 108deg 117deg,
        #38a000 117deg 126deg,
        #248000 126deg 135deg,
        /* Slice 3 — 3 BC: amber gold */
        #ffd600 135deg 144deg,
        #e6c000 144deg 153deg,
        #ccaa00 153deg 162deg,
        #b39500 162deg 171deg,
        #998000 171deg 180deg,
        /* Slice 4 — Escudo 24h: steel silver */
        #b0bec5 180deg 189deg,
        #98adb5 189deg 198deg,
        #809ca5 198deg 207deg,
        #688b95 207deg 216deg,
        #507a85 216deg 225deg,
        /* Slice 5 — Gemas x15: neon purple */
        #d500f9 225deg 234deg,
        #b800dd 234deg 243deg,
        #9c00c0 243deg 252deg,
        #8000a3 252deg 261deg,
        #640086 261deg 270deg,
        /* Slice 6 — Gemas x40: ruby red */
        #ff1744 270deg 279deg,
        #e0153c 279deg 288deg,
        #c01334 288deg 297deg,
        #a0102c 297deg 306deg,
        #800e24 306deg 315deg,
        /* Slice 7 — JACKPOT: neon emerald */
        #00e676 315deg 324deg,
        #00cc68 324deg 333deg,
        #00b35a 333deg 342deg,
        #00994c 342deg 351deg,
        #008040 351deg 360deg
    );
    box-shadow:
        inset 0 0 50px rgba(0, 0, 0, 0.4),
        inset 0 -6px 16px rgba(255, 255, 255, 0.12),
        inset 0 6px 16px rgba(0, 0, 0, 0.25),
        /* Casino wheel bisel stack */
        0 0 0 6px #1a0e04,
        0 0 0 10px #d4a04a,
        0 0 0 14px #1a0e04,
        0 0 0 16px rgba(212, 160, 74, 0.4),
        0 20px 60px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(255, 215, 0, 0.2);
    position: relative;
    overflow: hidden;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.15));
}

/* Soft top gloss (sky-light reflection) — directional for 3D feel */
.spin-wheel-circle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 18%,
        rgba(255, 255, 240, 0.40) 0%,
        rgba(255, 255, 240, 0.10) 20%,
        transparent 45%);
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 6;
    box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.2);
}

/* Segment divider lines — bright metallic gold, clearly visible */
.spin-wheel-circle::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        /* Segment divider lines — bright gold */
        repeating-conic-gradient(
            from -22.5deg,
            transparent 0deg 43.5deg,
            rgba(255, 220, 80, 0.55) 43.5deg 44.2deg,
            rgba(255, 248, 200, 0.35) 44.2deg 44.6deg,
            transparent 44.6deg 45deg
        ),
        /* Bottom shadow depth */
        radial-gradient(ellipse at 50% 100%,
            rgba(0, 0, 0, 0.50) 0%,
            rgba(0, 0, 0, 0.20) 30%,
            transparent 55%);
    pointer-events: none;
    z-index: 7;
}

/* El pitch/3D se aplica via JS inline transform para no colisionar con la rotacion */

/* Winning slice glow — dramatic pulsing highlight */
.prize-slice.is-winner::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.3),
                inset 0 0 24px rgba(255, 215, 0, 0.12);
    opacity: 0;
    transform: scale(0.8);
    animation: rouletteWinnerRing 0.6s ease-out 3;
    pointer-events: none;
    z-index: -1;
}

.prize-slice.is-winner > .prize-icon,
.prize-slice.is-winner > .prize-text {
    filter: drop-shadow(0 0 16px #fff) drop-shadow(0 0 28px #fbbf24) drop-shadow(0 0 40px rgba(255,215,0,0.5));
    animation: rouletteWinnerPulse 0.6s ease-in-out 3;
}

/* Legacy selector */
.prize-slice.is-winner > i,
.prize-slice.is-winner > span {
    filter: drop-shadow(0 0 14px #fff) drop-shadow(0 0 22px #fbbf24);
    animation: rouletteWinnerPulse 0.6s ease-in-out 3;
}

@keyframes rouletteWinnerPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.4); }
}

@keyframes rouletteWinnerRing {
    0%   { opacity: 1; transform: scale(0.85); }
    40%  { opacity: 0.6; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(1.3); }
}

/* ========== SEGMENT LABELS ========== */
.spin-wheel-labels {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 5;
}

.prize-slice {
    position: absolute;
    top: 0;
    left: 50%;
    width: 70px;
    height: 50%;
    margin-left: -35px;
    transform-origin: bottom center;
    transform: rotate(calc(var(--i) * 45deg));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 14px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 20px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,1);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    z-index: 8;
}

.prize-slice .prize-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8)) drop-shadow(0 0 10px rgba(255,255,255,0.4));
}

.prize-text {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.98)) drop-shadow(0 0 10px rgba(0,0,0,0.8));
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

.jackpot-text {
    font-size: 0.55rem;
    color: #ffff99;
    animation: jackpotPulse 1.3s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(251,191,36,1), 0 0 10px rgba(255,255,200,0.8), 0 2px 6px rgba(0,0,0,0.9);
    font-weight: 900;
    letter-spacing: 0.5px;
}

@keyframes jackpotPulse {
    0%, 100% { opacity: 0.9; transform: scale(1); filter: brightness(1); }
    50% { opacity: 1; transform: scale(1.2); filter: brightness(1.3); }
}

/* ========== NADA slice — slot vacío, se ve apagado/intencional ========== */
.prize-slice--nada .prize-icon {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8)) grayscale(0.3);
    opacity: 0.7;
}

.nada-text {
    font-size: 0.6rem !important;
    color: #6b7280 !important;
    letter-spacing: 1px !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    opacity: 0.8;
}

/* Jackpot halo: halo dorado pulsante */
.prize-slice--jackpot {
    position: relative;
}

.prize-slice--jackpot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--roulette-jackpot-halo) 0%, transparent 70%);
    animation: jackpotHalo 1.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
    filter: blur(4px);
}

@keyframes jackpotHalo {
    0%, 100% { opacity: 0.45; transform: scale(0.9); filter: blur(4px); }
    50%      { opacity: 0.95; transform: scale(1.15); filter: blur(6px); }
}

/* ========== PEGS METÁLICOS (8 pernos en bordes de segmento) ========== */
.roulette-pegs-ring {
    position: absolute;
    inset: 2%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 12;
}

.roulette-peg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #fffbe6 0%,
        #ffeb99 20%,
        #ffd700 45%,
        #ffb700 60%,
        #e6a800 80%,
        #8b6914 100%);
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.6),
        0 0 6px rgba(255, 215, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.5);
    transform-origin: 0 0;
    transform: rotate(calc(var(--i) * 45deg)) translateY(calc(-1 * (100% / 0.9) * 0.48));
    transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}

.roulette-peg.is-tick {
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.8),
        0 0 18px #fff,
        0 0 30px #ffd700,
        0 4px 12px rgba(255, 215, 0, 0.6);
    transform: rotate(calc(var(--i) * 45deg)) translateY(calc(-1 * (100% / 0.9) * 0.48)) scale(1.5);
}

.roulette-peg::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.3) 40%,
        transparent 70%);
}

/* ========== SPARKLES desactivados (sin efecto de luces) ========== */
.roulette-sparkles,
.roulette-wheel-container.is-spinning .roulette-sparkles {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none;
    animation: none !important;
}

.roulette-sparkles span {
    display: none !important;
    animation: none !important;
}

/* ========== POINTER — marcador dorado premium (apunta al vértice del premio) ========== */
.roulette-pointer {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 54px;
    z-index: 30;
    pointer-events: none;
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8))
        drop-shadow(0 0 18px rgba(255, 215, 0, 0.7));
    transition: transform 90ms cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: pointerBreath 2.5s ease-in-out infinite;
}

@keyframes pointerBreath {
    0%, 100% { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8)) drop-shadow(0 0 14px rgba(255,215,0,0.6)); }
    50% { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8)) drop-shadow(0 0 24px rgba(255,215,0,1)) drop-shadow(0 0 40px rgba(255,215,0,0.4)); }
}

.roulette-pointer.is-tick {
    transform: translateX(-50%) translateY(5px) scale(0.9);
}

/* Cuerpo de la flecha (base arriba, punta abajo) */
.roulette-pointer::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
    width: 44px;
    height: 48px;
    background: linear-gradient(180deg,
        #fef3c7 0%,
        #fde68a 12%,
        #fbbf24 38%,
        #f59e0b 62%,
        #b45309 100%);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* Bisel claro central para profundidad */
.roulette-pointer::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    width: 16px;
    height: 34px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    opacity: 0.7;
}

/* ========== CENTER HUB (premium metallic + spin-time pulse only) ========== */
.roulette-center {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%,
        #ffffff 0%,
        #fdf8ef 5%,
        #f5e6c8 10%,
        #e2c899 18%,
        #c9a86c 28%,
        #a88850 38%,
        #7a6340 48%,
        #5c4a30 58%,
        #3a2e1c 68%,
        #221a0e 80%,
        #0a0804 100%);
    border: 4px solid var(--roulette-gold);
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.6),
        0 0 24px rgba(255, 215, 0, 0.55),
        inset 0 -8px 18px rgba(0, 0, 0, 0.7),
        inset 0 8px 14px rgba(255, 255, 255, 0.3);
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 15;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pulse only while wheel is spinning */
.roulette-wheel-container.is-spinning .roulette-center {
    animation: rouletteCenterPulse 0.75s ease-in-out infinite;
}

@keyframes rouletteCenterPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.85), inset 0 -10px 24px rgba(0, 0, 0, 0.6), inset 0 10px 20px rgba(255, 255, 255, 0.35), inset 0 0 16px rgba(255, 215, 0, 0.15), 0 18px 44px rgba(0, 0, 0, 0.5); }
    50% { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 70px rgba(255, 215, 0, 1), inset 0 -10px 24px rgba(0, 0, 0, 0.6), inset 0 10px 20px rgba(255, 255, 255, 0.4), inset 0 0 16px rgba(255, 215, 0, 0.25), 0 22px 55px rgba(0, 0, 0, 0.6); }
}

/* Anillo dorado exterior (static, tight so it stays on the hub) */
.roulette-center::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(255, 215, 0, 0.55);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
    pointer-events: none;
}

.roulette-center i {
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.9)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

/* Star spins slowly during idle, faster during active game */
.roulette-wheel-container.is-active .roulette-center i {
    animation: rouletteStarSpin 30s linear infinite;
}

@keyframes rouletteStarSpin {
    from { transform: rotate(0deg) scale(1); }
    to   { transform: rotate(360deg) scale(1); }
}

/* ========== COST & BUTTON SECTION ========== */
#roulette-modal .w-full.rounded-xl {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(8, 12, 24, 0.8) 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.12) !important;
    border-radius: 16px !important;
    padding: 0.75rem 1rem !important;
    margin-top: 4px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

#roulette-modal .w-full.rounded-xl .flex.justify-between {
    margin-bottom: 0.5rem !important;
}

/* ========== SPIN BUTTON (farm gold) ========== */
#roulette-modal .roulette-spin-btn,
#roulette-modal #spin-wheel-btn,
#roulette-modal button#spin-wheel-btn.roulette-spin-btn,
button#spin-wheel-btn.roulette-spin-btn {
    background: linear-gradient(180deg, #f0d060, #c49a20) !important;
    border-radius: 0 !important;
    border: 2px solid #0a0806 !important;
    padding: 14px 16px !important;
    font-family: var(--font-game, monospace) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1a1208 !important;
    -webkit-text-fill-color: #1a1208 !important;
    text-shadow: none;
    box-shadow: 0 3px 0 #0a0806 !important;
    transition: filter 0.12s, transform 0.1s;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 50px !important;
}

#roulette-modal .roulette-spin-btn::before,
#roulette-modal #spin-wheel-btn::before {
    content: '';
    position: absolute;
    inset: -50% 0 auto -50%;
    height: 200%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: rotate(20deg);
    animation: rouletteButtonShine 3.2s linear infinite;
    pointer-events: none;
}

#roulette-modal .roulette-spin-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 55%);
    border-radius: inherit;
    pointer-events: none;
}

@keyframes rouletteButtonShine {
    0% { transform: translateX(-220%) rotate(20deg); }
    100% { transform: translateX(280%) rotate(20deg); }
}

#roulette-modal .roulette-spin-btn:hover:not(:disabled),
#roulette-modal #spin-wheel-btn:hover:not(:disabled),
button#spin-wheel-btn.roulette-spin-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #f5dc78, #d4aa28) !important;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 4px 0 #0a0806 !important;
}

#roulette-modal .roulette-spin-btn:active:not(:disabled),
#roulette-modal #spin-wheel-btn:active:not(:disabled) {
    transform: translate(1px, 2px);
    box-shadow: 0 1px 0 #0a0806 !important;
    background: linear-gradient(180deg, #c49a20, #a67c18) !important;
}

#roulette-modal .roulette-spin-btn:disabled,
#roulette-modal #spin-wheel-btn:disabled {
    opacity: 0.5;
    filter: grayscale(0.3);
    transform: none;
    box-shadow: 0 2px 0 #0a0806 !important;
}

/* ========== WIN MODAL ========== */
#roulette-win-modal {
    z-index: 30050 !important;
}
#roulette-win-modal.hidden {
    display: none !important;
}

#roulette-win-modal > div {
    animation: winSlam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    background: linear-gradient(160deg, rgba(20, 27, 45, 0.98) 0%, rgba(13, 19, 34, 0.99) 50%, rgba(8, 12, 24, 1) 100%) !important;
    backdrop-filter: blur(30px) saturate(1.6) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.35) !important;
    box-shadow:
        0 0 60px rgba(255, 215, 0, 0.15),
        0 25px 60px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

@keyframes winSlam {
    0% { opacity: 0; transform: scale(0.3) rotate(-8deg); }
    55% { opacity: 1; transform: scale(1.08) rotate(1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Hero animado del premio — premium glowing orb */
.win-prize-hero {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff7c0 0%, #ffd700 40%, #b8860b 80%, #704a00 100%);
    box-shadow:
        0 0 40px rgba(255,215,0,0.8),
        0 0 80px rgba(255,215,0,0.4),
        0 0 120px rgba(255,215,0,0.2),
        inset 0 -8px 16px rgba(0,0,0,0.4),
        inset 0 4px 12px rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    animation: winHeroPulse 2s ease-in-out infinite;
}

@keyframes winHeroPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* ─── Rarity glows ─── */
.win-prize-hero--common {
    box-shadow:
        0 0 30px rgba(255,255,255,0.3),
        0 0 60px rgba(255,255,255,0.15),
        inset 0 -8px 16px rgba(0,0,0,0.4),
        inset 0 4px 12px rgba(255,255,255,0.3);
}
.win-prize-hero--rare {
    box-shadow:
        0 0 40px rgba(168,85,247,0.6),
        0 0 80px rgba(168,85,247,0.3),
        0 0 120px rgba(168,85,247,0.15),
        inset 0 -8px 16px rgba(0,0,0,0.4),
        inset 0 4px 12px rgba(255,255,255,0.3);
    animation: winHeroPulse 1.8s ease-in-out infinite;
}
.win-prize-hero--epic {
    box-shadow:
        0 0 40px rgba(255,23,68,0.7),
        0 0 80px rgba(255,23,68,0.35),
        0 0 120px rgba(255,23,68,0.18),
        inset 0 -8px 16px rgba(0,0,0,0.4),
        inset 0 4px 12px rgba(255,255,255,0.3);
    animation: winHeroPulse 1.4s ease-in-out infinite;
}
.win-prize-hero--legendary {
    background: radial-gradient(circle at 30% 30%, #fff7c0 0%, #ffd700 35%, #ff8c00 70%, #b8860b 100%);
    box-shadow:
        0 0 50px rgba(255,215,0,0.9),
        0 0 100px rgba(255,215,0,0.5),
        0 0 150px rgba(255,215,0,0.25),
        inset 0 -8px 16px rgba(0,0,0,0.4),
        inset 0 4px 12px rgba(255,255,255,0.3);
    animation: winHeroPulse 1.2s ease-in-out infinite;
}

.win-prize-hero__rays {
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 10deg,
        rgba(255,215,0,0.35) 10deg 12deg,
        transparent 12deg 30deg,
        rgba(255,215,0,0.35) 30deg 32deg,
        transparent 32deg 60deg,
        rgba(255,215,0,0.35) 60deg 62deg,
        transparent 62deg 90deg,
        rgba(255,215,0,0.35) 90deg 92deg,
        transparent 92deg 120deg,
        rgba(255,215,0,0.35) 120deg 122deg,
        transparent 122deg 150deg,
        rgba(255,215,0,0.35) 150deg 152deg,
        transparent 152deg 180deg,
        rgba(255,215,0,0.35) 180deg 182deg,
        transparent 182deg 210deg,
        rgba(255,215,0,0.35) 210deg 212deg,
        transparent 212deg 240deg,
        rgba(255,215,0,0.35) 240deg 242deg,
        transparent 242deg 270deg,
        rgba(255,215,0,0.35) 270deg 272deg,
        transparent 272deg 300deg,
        rgba(255,215,0,0.35) 300deg 302deg,
        transparent 302deg 330deg,
        rgba(255,215,0,0.35) 330deg 332deg,
        transparent 332deg 360deg
    );
    animation: starSpin 8s linear infinite;
    pointer-events: none;
    filter: blur(0.5px);
}

.win-prize-hero__icon {
    font-size: 48px;
    line-height: 1;
    z-index: 2;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

/* Tier badge del premio */
.win-tier-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1.5px solid;
}

.win-tier-badge[data-tier="win"] {
    background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(52,211,153,0.1));
    color: #6ee7b7;
    border-color: rgba(16,185,129,0.5);
    box-shadow: 0 0 18px rgba(16,185,129,0.25);
}

.win-tier-badge[data-tier="nada"] {
    background: linear-gradient(135deg, rgba(107,114,128,0.2), rgba(75,85,99,0.1));
    color: #9ca3af;
    border-color: rgba(107,114,128,0.5);
    box-shadow: 0 0 12px rgba(107,114,128,0.15);
    animation: none;
}

.win-tier-badge[data-tier="big"] {
    background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(217,70,239,0.1));
    color: #e9d5ff;
    border-color: rgba(168,85,247,0.6);
    box-shadow: 0 0 22px rgba(168,85,247,0.35);
    animation: tierBadgeGlow 1.8s ease-in-out infinite;
}

.win-tier-badge[data-tier="jackpot"] {
    background: linear-gradient(135deg, rgba(239,68,68,0.25), rgba(255,215,0,0.2));
    color: #fde047;
    border-color: rgba(255,215,0,0.7);
    box-shadow:
        0 0 28px rgba(255,215,0,0.5),
        0 0 50px rgba(239,68,68,0.3);
    animation: tierBadgeGlow 1.2s ease-in-out infinite;
    font-size: 0.75rem;
}

@keyframes tierBadgeGlow {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* Capa de sparkles del win modal */
.win-sparkle-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.win-sparkle-layer span {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, rgba(255,247,176,0.8) 40%, transparent 70%);
    box-shadow: 0 0 6px rgba(255,247,176,0.8);
    animation: winSparkle 1.8s ease-in-out var(--delay, 0ms) infinite;
}

@keyframes winSparkle {
    0%, 100% { opacity: 0; transform: scale(0.3); }
    50%      { opacity: 1; transform: scale(1.3); }
}

/* Shimmer del win modal */
#roulette-win-modal > div::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 248, 196, 0.18) 45%,
        rgba(255, 248, 196, 0.35) 50%,
        rgba(255, 248, 196, 0.18) 55%,
        transparent 100%
    );
    transform: skewX(-18deg);
    animation: winShimmer 2.8s ease-in-out 0.4s infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes winShimmer {
    0%   { left: -120%; }
    55%  { left: 140%; }
    100% { left: 140%; }
}

/* ========== FREE SPIN GLOW (farm gold, no huge halo) ========== */
#spin-wheel-btn.free-spin-glow,
#roulette-modal .roulette-spin-btn.free-spin-glow {
    animation: freeSpinPulse 2.2s ease-in-out infinite !important;
}

@keyframes freeSpinPulse {
    0%, 100% {
        box-shadow:
            0 3px 0 #0a0806,
            0 0 10px rgba(110, 231, 183, 0.25) !important;
        filter: brightness(1);
    }
    50% {
        box-shadow:
            0 3px 0 #0a0806,
            0 0 18px rgba(110, 231, 183, 0.45) !important;
        filter: brightness(1.05);
    }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 400px) {
    #roulette-modal .modal-content {
        padding: 1.25rem 1rem 1rem !important;
    }
    #roulette-modal .w-[280px] {
        width: 240px !important;
        height: 240px !important;
    }
    .prize-slice {
        padding-top: 6px;
        width: 46px;
        margin-left: -23px;
    }
    .prize-slice .prize-icon {
        font-size: 1.1rem;
    }
    .prize-text {
        font-size: 0.6rem;
    }
    .roulette-center {
        width: 56px;
        height: 56px;
    }
    .roulette-pointer {
        width: 32px;
        height: 40px;
        top: -28px;
    }
    .roulette-peg {
        width: 7px;
        height: 7px;
        margin: -3.5px 0 0 -3.5px;
    }
    .win-prize-hero {
        width: 80px;
        height: 80px;
    }
    .win-prize-hero__icon {
        font-size: 40px;
    }
}

/* ========== PERFORMANCE MODE: desactiva animaciones infinitas ========== */
body.performance-mode .roulette-outer-ring::before,
body.performance-mode .roulette-sparkles span,
body.performance-mode .roulette-center,
body.performance-mode .roulette-center i,

/* Sizing missing from original block */
.roulette-wheel-container { width: 320px !important; height: 320px !important; margin: 0 auto !important; }
.roulette-outer-ring { position: absolute !important; inset: 0 !important; width: 320px !important; height: 320px !important; }
.spin-wheel-circle { width: 296px !important; height: 296px !important; margin: 12px auto !important; }
.roulette-pegs-ring { width: 296px !important; height: 296px !important; }
@media (max-width: 480px) {
  .roulette-wheel-container, .roulette-outer-ring { width: 280px !important; height: 280px !important; }
  .spin-wheel-circle, .roulette-pegs-ring { width: 260px !important; height: 260px !important; }
  .roulette-center { width: 72px !important; height: 72px !important; }
  .roulette-pointer { width: 34px !important; height: 42px !important; top: -28px !important; }
  .prize-slice { width: 50px !important; margin-left: -25px !important; }
  .prize-slice .prize-icon { font-size: 1.15rem !important; }
  .prize-text { font-size: 0.6rem !important; }
}

/* ============================================================
   RULETA FARM THEME — panel madera/oro como el resto del juego
   ============================================================ */

#roulette-modal::before {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(232, 184, 48, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(12, 10, 8, 0.88) 0%, rgba(6, 5, 4, 0.96) 100%) !important;
  backdrop-filter: blur(10px) !important;
}

#roulette-modal > div,
#roulette-modal .roulette-stage-shell {
  max-width: 380px !important;
  width: min(94vw, 380px) !important;
  background:
    linear-gradient(165deg, rgba(36, 28, 18, 0.98) 0%, rgba(14, 12, 10, 0.99) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 2px solid #0a0806 !important;
  border-radius: 0 !important;
  box-shadow:
    0 0 0 2px #c49a20,
    0 16px 48px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 220, 140, 0.08) !important;
  color: #e6ddd0 !important;
  gap: 12px !important;
  padding: 1.35rem 1.25rem 1.25rem !important;
}

#roulette-modal .roulette-modal-close {
  border-radius: 0 !important;
  border: 2px solid #0a0806 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #f0d060 !important;
  backdrop-filter: none !important;
  width: 32px !important;
  height: 32px !important;
}

#roulette-modal .roulette-modal-close:hover {
  background: rgba(232, 184, 48, 0.2) !important;
  color: #fff !important;
  border-color: #c49a20 !important;
  transform: none !important;
}

#roulette-modal .roulette-modal-title {
  font-family: var(--font-game, monospace) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #f0d060 !important;
  background: none !important;
  -webkit-text-fill-color: #f0d060 !important;
  text-shadow: 2px 2px 0 #000 !important;
  animation: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

#roulette-modal .roulette-modal-title i,
#roulette-modal .roulette-modal-title svg {
  color: #f0d060 !important;
  filter: none !important;
  -webkit-text-fill-color: #f0d060 !important;
}

#roulette-modal .roulette-modal-desc {
  font-family: "Nunito", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #c8b8a0 !important;
  max-width: 300px !important;
  line-height: 1.45 !important;
  text-align: center;
  margin: 0 !important;
}

#roulette-modal .roulette-modal-desc strong {
  color: #6ee7b7 !important;
  font-weight: 800;
}

/* Info rows (costo / giros) */
#roulette-modal .roulette-info-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid #0a0806;
  box-shadow: 0 0 0 1px rgba(196, 154, 32, 0.35);
  box-sizing: border-box;
}

#roulette-modal .roulette-info-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px;
  width: 100%;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #c8b8a0 !important;
  min-height: 22px;
}

#roulette-modal .roulette-info-row > span {
  color: #c8b8a0 !important;
  flex: 1 1 auto;
  text-align: left;
}

#roulette-modal .roulette-info-row strong,
#roulette-modal .roulette-info-row #roulette-cost-display,
#roulette-modal .roulette-info-row #roulette-spins-today {
  color: #facc15 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

#roulette-modal .roulette-info-row #roulette-spins-today {
  color: #f8f0e0 !important;
}

#roulette-modal .roulette-info-row #roulette-cost-display i {
  font-size: 12px !important;
  color: #6ee7b7 !important;
}

/* Spin button farm gold */
#roulette-modal .roulette-spin-btn,
#roulette-modal #spin-wheel-btn {
  width: 100% !important;
  min-height: 50px !important;
  font-family: var(--font-game, monospace) !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #1a1208 !important;
  background: linear-gradient(180deg, #f0d060, #c49a20) !important;
  border: 2px solid #0a0806 !important;
  border-radius: 0 !important;
  box-shadow: 0 3px 0 #0a0806 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

#roulette-modal .roulette-spin-btn:hover:not(:disabled),
#roulette-modal #spin-wheel-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

#roulette-modal .roulette-spin-btn:disabled,
#roulette-modal #spin-wheel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

#roulette-modal .roulette-spin-btn.free-spin-glow {
  box-shadow: 0 3px 0 #0a0806, 0 0 16px rgba(110, 231, 183, 0.35) !important;
}

/* Wheel stage */
#roulette-modal .roulette-stage-shell {
  /* shell IS the panel — wheel centered inside */
}

#roulette-modal .roulette-wheel-container {
  flex-shrink: 0;
  margin: 4px auto 8px !important;
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}

#roulette-modal .roulette-center {
  width: 72px !important;
  height: 72px !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle, #2a2010 0%, #120e0a 70%) !important;
  border: 3px solid #c49a20 !important;
  box-shadow: 0 0 0 2px #0a0806, 0 0 16px rgba(232, 184, 48, 0.35) !important;
  color: #f0d060 !important;
  z-index: 15 !important;
  pointer-events: none !important;
}

#roulette-modal .roulette-center i {
  color: #f0d060 !important;
  -webkit-text-fill-color: #f0d060 !important;
}

/* Win modal farm */
#roulette-win-modal .modal-box {
  background: linear-gradient(165deg, rgba(36, 28, 18, 0.98), rgba(14, 12, 10, 0.99)) !important;
  border: 2px solid #0a0806 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 2px #c49a20, 0 16px 40px rgba(0, 0, 0, 0.6) !important;
  color: #e6ddd0 !important;
}

#roulette-win-modal .modal-close {
  border-radius: 0 !important;
  border: 2px solid #0a0806 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #f0d060 !important;
}

#roulette-win-modal #win-congrats-text {
  font-family: var(--font-game, monospace) !important;
  color: #f0d060 !important;
}

#roulette-win-modal #win-prize-title {
  font-family: "Nunito", system-ui, sans-serif !important;
  color: #f8f0e0 !important;
}

#roulette-win-modal #win-prize-subtitle {
  color: #6ee7b7 !important;
  font-family: "Nunito", system-ui, sans-serif !important;
}

#roulette-win-modal .roulette-spin-btn {
  background: linear-gradient(180deg, #f0d060, #c49a20) !important;
  color: #1a1208 !important;
  border: 2px solid #0a0806 !important;
  border-radius: 0 !important;
  box-shadow: 0 3px 0 #0a0806 !important;
  font-family: "Nunito", system-ui, sans-serif !important;
  font-weight: 800 !important;
}