.ruleta-box {
    max-width: 450px;
    text-align: center;
    background: radial-gradient(circle, #1a1a1a 0%, #000 100%);
    border: 2px solid var(--accent);
}

.wheel-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 20px auto;
}

.wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #333;
    background: conic-gradient(
        #ff3333 0deg 60deg, 
        #bc13fe 60deg 120deg, 
        #00ffff 120deg 180deg, 
        #ffcc00 180deg 240deg, 
        #ff00ff 240deg 300deg, 
        #33ff33 300deg 360deg
    );
    transition: transform 4s cubic-bezier(0.15, 0, 0.15, 1);
    box-shadow: 0 0 20px rgba(255,255,255,0.1);
}

.wheel-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid var(--accent);
    z-index: 10;
}

.ruleta-info-msg {
    margin-top: 15px;
    font-family: 'Orbitron';
    font-size: 13px;
    color: #00ffcc;
}

#wheelCanvas {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px var(--accent));
}

#ruletaModal {
    background: none !important; /* Quita el fondo negro de toda la pantalla */
    pointer-events: none; /* Permite hacer clic en lo de atrás... */
}

.ruleta-box {
    pointer-events: auto; /* ...pero que el modal SÍ reciba clics */
    box-shadow: 0 0 50px rgba(0,0,0,0.9); /* Sombra fuerte para que destaque sin el fondo negro */
}

.ruleta-info-msg {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 8px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #444;
}