/* --- Grille et cellules --- */
.mm-row {
    display:flex;
    gap:10px;
    justify-content:center;
    margin-bottom:5px;
}

.mm-cell {
    width:50px;
    height:50px;
    border-radius:8px;
    background:#1F1F1F;
    color:#FFF;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.5em;
    cursor:pointer;
    user-select:none;
    transition: transform 0.3s, background 0.3s;
}

.mm-cell:hover {
    transform: scale(1.1);
}

/* --- Chrono --- */
#mm-timer {
    text-align:center;
    font-size:1.6em;
    margin:10px 0;
    color:#FFD700;
}

/* --- 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;
}

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

/* ===========================
   Mobile
=========================== */

@media (max-width:768px){
    .mm-cell {
        width:40px;
        height:40px;
        font-size:1.2em;
    }
    #mm-timer {
        font-size:1.3em;
    }
    .bouton {
        padding:8px 16px;
        font-size:0.9em;
    }
}

@media(max-width:600px){
#bingo-win-overlay h1{
font-size:1.2rem;
}	
}