/* roulette3d.css */

/* Conteneur de la roue */
#roulette-wheel {
    position: relative;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 5px solid #0ff;
    margin: 20px auto;
    overflow: hidden;
}

.roulette-wheel {
    position: relative;
    width: 500px;       /* taille de la roue */
    height: 500px;
    border-radius: 50%;
    border: 5px solid #0ff;
    margin: 20px auto;
    overflow: hidden;
    transform: rotate(0deg);
    transition: transform 5s cubic-bezier(0.25, 0.1, 0, 1);
}

.roulette-sector {
    position: absolute;
    width: 50%;          /* moitié du rayon pour partir du centre */
    height: 50%;
    top: 50%;
    left: 50%;
    transform-origin: 0 0; /* point de rotation au centre */
    display: flex;
    align-items: flex-start;  /* texte part du centre */
    justify-content: flex-start;
    padding-left: 15px;       /* distance du texte vers l’extérieur */
    font-weight: bold;
    color: #0ff;
    text-shadow: 0 0 5px #0ff;
}

/* --- Résultats --- */
.mm-ok, .mm-no {
    text-align:center;
    max-width:600px;
    margin:10px auto;
    padding:10px;
    border-radius:10px;
    font-weight:bold;
    display:none;
}

.mm-ok {
    border: dashed lightgreen;
    color:lightgreen;
}

.mm-no {
    border: dashed lightcoral;
    color:lightcoral;
}

/* Overlay WIN */
#bingo-win-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}

#bingo-win-overlay.show {
    opacity: 1;
    pointer-events: all;
}

#bingo-win-overlay h1 {
    font-size: 5rem;
    color: gold;
    text-shadow: 0 0 20px #fff, 0 0 40px gold;
    animation: scalePulse 1s infinite alternate;
}

#bingo-win-overlay .overlay-content {
    text-align: center;
}

#bingo-win-overlay p {
    margin-top: 20px;
    font-size: 2rem;
    color: #0ff;
    text-shadow: 0 0 15px #0ff, 0 0 30px #0ff;
}

@keyframes scalePulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.3); }
}

/* Responsive pour mobile */
@media (max-width: 600px) {
    #roulette-wheel {
        width: 300px;
        height: 300px;
    }
    .roulette-sector {
        font-size: 14px;
        padding: 5px;
    }
}