/* ==========================
   SÉLECTEUR DE GRILLE
========================== */
#board-selector {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 10px 0;
}

.board-choice {
    border: 2px solid #555;
    padding: 5px;
    cursor: pointer;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s;
}

.board-choice:hover {
    border-color: #1e90ff;
}

.info-session {
    margin-bottom: 15px;
    color: #ddd;
    font-weight: bold;
}

/* ==========================
   MINI-GRID DANS LE SELECTEUR
========================== */
.mini-grid {
    display: grid;
    grid-template-columns: repeat(5, 25px);
    gap: 2px;
    margin-top: 5px;
}

.mini-grid div {
    width: 25px;
    height: 25px;
    font-size: 0.7rem;
    text-align: center;
    border: 1px solid #555;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================
   GRILLES PRINCIPALES (JOUEUR + IA)
========================== */
#bingo-board, #bingo-board-ai {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 15px auto;
    max-width: 300px;	
}

.cell {
    background: #1f1f1f;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cell.marked {
    background: #1e90ff;
    color: white;
    font-weight: bold;
}

.cell.win {
    animation: cellWin 0.8s infinite alternate;
    box-shadow: 0 0 10px #0f0;
}

@keyframes cellWin {
    0% { transform: scale(1); background: #1e90ff; }
    100% { transform: scale(1.1); background: #28ff6a; }
}

/* ==========================
   INFO ET RESULTATS
========================== */
.bingo-info {
    margin: 10px 0;
}

.bingo-result-ok, .bingo-result-no {
    margin: 10px 0;
    padding: 10px;
    border-radius: 10px;
    display: none;
    font-weight: bold;
}

.bingo-result-ok {
    border: 1px dashed lightgreen;
    color: white;
	max-width: 600px;
	margin: 10px auto 10px auto;
}

.bingo-result-no {
    border: 1px dashed lightcoral;
    color: white;
	max-width: 600px;
	margin: 10px auto 10px auto;	
}

/* ==========================
   ANIMATION MESSAGE VICTOIRE
========================== */
.bingo-result-ok.win {
    color: lightgreen;
    text-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0;
    animation: bingoFlash 1s infinite alternate;
}

@keyframes bingoFlash {
    0% { text-shadow: 0 0 10px #0f0; }
    100% { text-shadow: 0 0 20px #0f0, 0 0 30px #0f0, 0 0 40px #0f0; }
}

@keyframes pop {
  0% { transform: scale(1); background: #1e90ff; }
  50% { transform: scale(1.3); background: #00ffcc; }
  100% { transform: scale(1); background: #1e90ff; }
}

.cell.marked.pop {
  animation: pop 0.4s ease;
}

@keyframes lineWin {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(-10deg); }
}

.cell.win {
  animation: lineWin 0.6s ease-in-out 3;
}

/* Grille IA cachée par défaut */
#bingo-board-ai {
    display: none; /* cachée au départ */
}

/* Une fois affichée, elle reprend le style normal */
#bingo-board-ai.show {
    display: grid;
}

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

/* Explosion des cellules */
.cell.explode {
    animation: explodeCell 1s forwards;
}

@keyframes explodeCell {
    0% { transform: scale(1) translate(0,0) rotate(0deg); opacity: 1; }
    100% { 
        transform: scale(2) translate(
            calc(50vw - 50%), 
            calc(50vh - 50%)
        ) rotate(720deg); 
        opacity: 0; 
    }
}

#drawn.show {
    padding: 5px;
    background-color: #121212;
    margin: 15px auto 0 auto;
    display: block;
    max-width: 600px;
    border-radius: 8px;
}

#bingo-info {
    display: none;
}

#bingo-info.show {
    display: block;
}

.grille-to-grille {
   display:flex;
   justify-content:center;
   gap:50px;
   margin-top:20px;
}

.flash-effect {
    animation: flash 0.3s ease-in-out;
}

@keyframes flash {
    0%   { background-color: rgba(255,255,255,0); }
    50%  { background-color: rgba(255,255,255,0.25); }
    100% { background-color: rgba(255,255,255,0); }
}

/* ==========================
   ADAPTATION MOBILE
========================== */
@media(max-width:800px){
    .mini-grid { grid-template-columns: repeat(5,20px); gap:1px; }
    .cell { padding: 8px; font-size: 1rem; }
    .btn-type-upload { padding: 8px 15px; font-size: 0.9rem; }
}

@media(max-width:500px){
	.grille-to-grille {
    display: block;
    margin-top: 0;
}
	
	
    #bingo-board, #bingo-board-ai { 
        flex-direction: column; /* vertical */
        align-items: center;    /* centre les board-choice */
        gap: 8px;               /* un petit écart entre chaque */
	}
    #board-selector {
        flex-direction: column; /* vertical */
        align-items: center;    /* centre les board-choice */
        gap: 8px;               /* un petit écart entre chaque */
    }

    .board-choice {
        width: 90%;             /* prend presque toute la largeur */
        max-width: 200px;       /* limite la largeur pour ne pas être trop large */
    }

    .mini-grid {
        grid-template-columns: repeat(5, 1fr); /* s’adapte à la largeur */
        gap: 2px;
    }

    .mini-grid div {
        width: 100%;
        aspect-ratio: 1/1;
        font-size: 0.6rem;
    }
    .cell { padding: 6px; font-size: 0.9rem; }
}