.app {
    gap: 1.5rem;
}

.board,
.main {
    img {
        height: 7rem;
    }

    display: flex;
    gap: 0.2rem;
}

.mainsJoueurs {
    display: flex;
    gap: 1.5rem;
}

.tapis {
    color: white;
}

.exercice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.carteSelectionnee {
    translate: 0 -0.5rem;
}

.carte:not(.carteSelectionnee) {
    filter: brightness(75%);
}

.mauvaiseReponse {
    box-shadow: 0px 0px 15px 10px rgb(255 0 0 / 58%);
}

.bonneReponse {
    box-shadow: 0px 0px 15px 10px rgba(38, 255, 0, 0.58);
}

/* téléphones portrait */
@media (max-width: 450px) {
    button {
        font-size: 0.7rem;
        height: 1.5rem;
    }

    img.carte {
        height: 4.5rem;
    }

    .exercice {
        gap: 4rem;
    }

    .mainsJoueurs {
        display : grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
        "j1 j2"
        "j3 j4";

        .j1{grid-area: j1;}        
        .j2{grid-area: j2;}        
        .j3{grid-area: j3;}        
        .j4{grid-area: j4;}        

        row-gap: 2.5rem;

        input {
            max-width: 6.4rem;
        }
    }
    .app { 
        gap: 3rem;
    }
}

/* telephone paysage */
@media (max-height: 450px) {}