/*******SNAKE*******************/
.body.jeux-snake {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Empêche le défilement */
}

.game-container-snake {
    background-color: var(--secondary-color);
    border-radius: 20px;
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: space-evenly; 
    width: 100%; 
    max-width: 1200px; 
    margin-bottom: 20px;
}

.img-jeu-snake-snake, .img-jeu-snake-pomme {
    flex: 1;
    display: flex;
    justify-content: center; 
    align-items: center;
    padding: 20px;
}

.img-jeu-snake-snake img, .img-jeu-snake-pomme img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}




#board {
    background: linear-gradient(var(--tertiary-color), var(--secondary-color));
    width: 70vmin; /* Taille réduite */
    height: 72vmin;
    border: 2px solid black;
    display: grid;
    grid-template-rows: repeat(18, 1fr);
    grid-template-columns: repeat(18, 1fr);
}

.control-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

}

.control-row {
    display: flex;
    justify-content: center;
    margin: 5px;
}

.control-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 20px 30px;
    margin: 10px;
    font-size: 16px;
    cursor: pointer;
    width: 80px; /* Assurez-vous que tous les boutons ont la même largeur */
    border-color: var(--tertiary-color);
    border-style: solid;
    border-width: 5px;
}

.score-container {
    text-align: center;
}

#scoreBox, #hiscoreBox {
    font-size: 20px;
}

.head {
    background: linear-gradient(var(--primary-color), var(--secondary-color));
    border: 2px solid rgb(34, 4, 34);
    transform: scale(1.02);
    border-radius: 9px;
}

.snake {
    background-color: var(--primary-color);
    border: 0.25vmin solid white;
    border-radius: 12px;
}

.food {
    background: linear-gradient(rgb(183, 25, 7), rgb(228, 161, 4));
    border: 0.25vmin solid black;
    border-radius: 8px;
}


@media (max-width: 768px) {
    .game-container-snake {
        background-color: var(--secondary-color);
        border-radius: 0px;
        margin-bottom: 28%;
        flex-direction: column; /* Orientation verticale pour tous les éléments */
        align-items: center; /* Centrage des éléments */
        width: 100%; /* Utilise toute la largeur disponible */
    }

    .score-container {
        background-color: var(--secondary-color);
        display: flex;
        width: 100%; /* Utilisation de toute la largeur */
        justify-content: space-around; /* Répartition uniforme de l'espace entre les éléments */
        align-items: center; /* Alignement vertical des éléments */
        order: 1; /* Scores en premier */
        padding: 10px 0; /* Padding vertical pour séparation */
    }

    .img-jeu-snake-snake , .img-jeu-snake-pomme {
        width: 20%; /* Réduction de la largeur des images */
        height: auto; /* Hauteur automatique pour garder le ratio d'aspect */
        padding: 0 5px; /* Petit padding pour espacement */
    }

    .img-jeu-snake-snake img , .img-jeu-snake-pomme img {
        max-width: 100%; /* Ajustement de la largeur maximale */
        max-height: 50px; /* Limite la hauteur des images pour éviter l'encombrement */
        margin-top: -73%
    }
    .img-jeu-snake-snake{
    margin-left: 280px;
    }
    .img-jeu-snake-pomme{
        margin-right: 280px;
        margin-top: 15%;
    }
    #board {
        order: 2; /* Le plateau de jeu vient après les scores et les images */
        width: 90vmin; /* Ajustement de la taille pour mobile */
        height: 90vmin;
        margin-top: 10px; /* Espace au-dessus du jeu pour séparation */
        
    }

    .control-buttons {
        order: 3; /* Les contrôles viennent après le jeu */
        width: 100%; /* Ajuste la largeur pour une utilisation facile */
        margin-top: 5%;
    }
    .score-container{
        margin-bottom: -50px;
    }

    .control-row {
        justify-content: space-around; /* Espacement uniforme des boutons pour une accessibilité aisée */
    }
}




/***** PIERRE FEUILLE CISEAUX *******/

.selections {
    display: flex;
    justify-content: space-between; /* Garde un espacement uniforme entre les éléments */
    width: 100%; /* Utilise toute la largeur disponible */
    padding: 0 20px; /* Padding latéral pour éviter que les éléments touchent les bords */
}

.rock, .paper, .scissors {
    flex: 1; /* Chaque bouton utilise un espace égal dans le conteneur */
    margin: 5px; /* Petite marge pour éviter que les boutons se touchent */
    padding: 10px; /* Assez de padding pour la tactile */
    border-radius: 25px; /* Bords arrondis pour l'esthétique */
    transition: transform 100ms ease-in-out; /* Animation douce pour les interactions */
    
}

.rock:hover, .paper:hover, .scissors:hover {
    transform: scale(1.05); /* Légère augmentation de taille au survol */
    
}

.Results {
    background-color: var(--secondary-color);
    display: flex;
    justify-content: center;  /* Centre horizontalement les éléments enfants */
    align-items: center;      /* Centre verticalement les éléments enfants */
    text-align: center;  
}
.resultText{

    text-align: center;
}
.score{
    text-align: center;
    
}
.heading{
    font-size: 30px;
    text-align: center;
}

@keyframes count-in{
    0%{
        transform: translateY(0);
    }
    55%{
        transform: translateY(-100px);
    }
    100%{
        transform: translateY(0);
    }
}
.count-in{
    animation:.7s count-in 3
}
.selections{
    display:flex;
    justify-content: center;
}
.rock, .paper, .scissors{
    margin: 1%;
}
.rock,.paper,.scissors{
    background:none;
    border:none;
    outline:none;
    cursor:pointer;
    transition: 100ms;
    border-radius: 25px;
    margin-bottom: 2%;
}
.rock:hover,.paper:hover,.scissors:hover{
    transform:scale(1.1);
}

@media (max-width: 768px) {
    .heading {
        font-size: 24px; /* Taille ajustée pour les tablettes */
    }
    .selections {
        margin: 0 10px; /* Marges ajustées */
    }
    .rock, .paper, .scissors {
        padding: 10px 16px; /* Padding ajusté pour un peu plus d'espace */
    }
    .rock img, .paper img, .scissors img {
        max-height: 80px; /* Hauteur maximale plus grande pour les tablettes */
    }
    @keyframes count-in {
        0% {
            transform: translateY(0);
        }
        55% {
            transform: translateY(-50px); /* Déplacement encore plus réduit pour les mobiles */
        }
        100% {
            transform: translateY(0);
        }
    }
}



@media (max-width: 480px) {
    .heading {
        font-size: 18px; /* Plus petite pour économiser de l'espace */
    }
    .selections {
        flex-direction: row; /* Garde les boutons alignés horizontalement */
        justify-content: space-between; /* Espacement équitable */
        padding: 0 5px; /* Réduit le padding pour maximiser l'utilisation de l'espace */
    }
    .rock, .paper, .scissors {
        flex: 1; /* Utilisation égale de l'espace */
        margin: 1px; /* Marge minimale pour maximiser l'espace disponible */
        padding: 8px; /* Réduit le padding pour donner plus d'espace aux images */
    }
    .rock img, .paper img, .scissors img {
        width: auto; /* Permet aux images de maintenir leurs proportions originales */
        max-width: 100%; /* S'assure que les images ne dépassent pas le bouton */
        height: auto; /* Maintient la proportion hauteur/largeur */
        max-height: 50px; /* Réduit la hauteur maximale pour un meilleur ajustement */
    }
    @keyframes count-in {
        0% {
            transform: translateY(0);
        }
        55% {
            transform: translateY(-25px); /* Déplacement encore plus réduit pour les mobiles */
        }
        100% {
            transform: translateY(0);
        }
    }
}