/* Style pour l'ensemble du menu et ses éléments */
#menu {
    display: flex; /* Affiche les éléments du menu côte à côte */
    flex-direction: row; /* Oriente les éléments horizontalement */
    justify-content: center; /* Centre les éléments dans le conteneur */
    align-items: center; /* Alignement vertical au centre */
    padding: 10px;
    background: #f8f8f8; /* Couleur de fond pour le menu */
    border-bottom: 2px solid #e7e7e7; /* Ligne de séparation */
}
/* Style for the leaderboard button */
#menu a img {
    width: 40px; /* Adjust the width as needed */
    height: 40px; /* Adjust the height as needed */
    margin-left: 10px; /* Space to the left of the button */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: transform 0.3s ease; /* Smooth transition effect */
}

#menu a img:hover {
    transform: scale(1.1); /* Slightly increase the size on hover */
}

/* Style pour le sélecteur de carte */
#mapSelector, #colorSelector {
    padding: 10px;
    margin-right: 10px; /* Espace entre le sélecteur et le bouton */
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white; /* Couleur de fond pour le sélecteur de carte */
    cursor: pointer;
}

/* Style pour le bouton de lecture */
#buttonPlay, #buttonRandomPlay {
    padding: 10px 20px;
    margin-right: 10px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    background-color: #32CD32; /* Couleur du bouton vert */
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transition pour un effet au survol */
}

#buttonPlay:hover, #buttonRandomPlay:hover {
    background-color: #28a745; /* Couleur du bouton au survol */
}

#chronometer {
    font-size: 1.5em; /* Increase the font size for better visibility */
    margin-left: 10px; /* Space to the left of the chronometer */
    margin-right: 10px; /* Espace entre le sélecteur et le bouton */
    padding: 5px 10px; /* Padding inside the chronometer span */
    border: 1px solid #ccc; /* Border around the chronometer */
    border-radius: 5px; /* Rounded corners */
    background-color: #f8f8f8; /* Background color to match the menu */
    color: #333; /* Text color */
    display: inline-block; /* Ensures the span behaves like a block element */
    font-family: 'Courier New', Courier, monospace; /* Monospace font for a digital clock feel */
    text-align: center; /* Center the text inside the span */
}

/* Ajoutez éventuellement des médias queries pour adapter le style pour les petits écrans, si nécessaire */
@media (max-width: 600px) {
    #menu {
        flex-direction: column; /* Empile les éléments verticalement sur petits écrans */
    }
    #mapSelector {
        margin-bottom: 10px; /* Espace supplémentaire entre les sélecteurs et le bouton */
        margin-right: 0; /* Pas d'espace à droite du sélecteur */
    }
}



#grid {
    display: grid;
    grid-template-rows: repeat(3, 1fr); /* Crée trois lignes avec des hauteurs égales */
    grid-template-columns: repeat(3, 1fr); /* Crée trois colonnes avec des largeurs égales */
    gap: 10px; /* Espace entre les cases */
    width: 300px; /* Largeur du conteneur de la grille */
    height: 300px; /* Hauteur du conteneur de la grille */
    margin: auto; /* Centrer la grille horizontalement */
}

.line {
    display: contents; /* Cela permet de traiter les enfants comme s'ils étaient des enfants directs de #grid */
}

.case {
    border: 1px solid black; /* Bordure pour voir les cases de la grille */
    background-color: #f0f0f0; /* Couleur de fond des cases */
    display: flex; /* Utiliser flex pour centrer le contenu de la case si nécessaire */
    justify-content: center; /* Centrer horizontalement le contenu de la case */
    align-items: center; /* Centrer verticalement le contenu de la case */
    border-radius: 10%;
}

/* Style de la pop-up de victoire */
.popup-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Couleur de fond avec transparence */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Assurez-vous que la pop-up est au-dessus des autres éléments */
  }
  
  .popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    text-align: center;
  }
  
  .popup-content h2 {
    color: #32CD32; /* Couleur verte pour représenter la victoire */
  }
  
#username {
    margin-top: 10px; /* Add space above the input field */
    padding: 5px 10px; /* Padding inside the input field */
    border: 1px solid #ccc; /* Border around the input field */
    border-radius: 5px; /* Rounded corners */
    font-size: 1em; /* Font size */
}

#save-button, #close-popup {
    margin-top: 15px; /* Add space between the input field and buttons */
    padding: 10px 20px; /* Padding inside the buttons */
    border: none; /* Remove borders */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Cursor style */
    transition: background-color 0.3s ease; /* Transition for hover effect */
}

#save-button {
    background-color: #32CD32; /* Button color */
    color: white; /* Text color */
}

#close-popup {
    background-color: #dc3545; /* Button color */
    color: white; /* Text color */
}

#save-button:hover {
    background-color: #28a745; /* Button color on hover */
}

#close-popup:hover {
    background-color: #6d4545; /* Button color on hover */
}