/* corrections.css */

/* S'assurer que la police FredokaOne est bien utilisée pour le corps de l'application */
body {
    font-family: 'FredokaOne', cursive !important;
}

/* Améliorer l'affichage des mots dans les cartes */
.word-text {
    /* Utiliser une taille de police relative pour mieux s'adapter */
    font-size: 3.5vw; /* Taille de police réduite pour les mots longs */
    max-width: 100%; /* S'assurer que le texte ne dépasse pas la largeur du conteneur */
    max-width: 100%; /* S'assurer que le texte ne dépasse pas la largeur du conteneur */
    
    /* Assurer que le texte ne déborde pas */
    overflow-wrap: break-word;
    word-break: break-word;
    
    /* Ajuster la hauteur de ligne pour éviter le chevauchement */
    line-height: 1.2;
    
    /* Centrer le texte verticalement et horizontalement */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Définir une hauteur minimale pour les cartes pour éviter l'écrasement */
    min-height: 100%; 
    
    /* Réinitialiser les ajustements basés sur la longueur du mot pour utiliser la taille relative */
    letter-spacing: normal !important;
}

/* Rendre les cartes plus grandes et plus adaptées au tactile */
.memory-card {
    /* Styles par défaut pour les cartes */
    /* Utiliser des unités relatives pour la taille des cartes */
    width: 25vmin; /* Augmentation de la taille des cartes */
    height: 25vmin;
    max-width: 200px; /* Augmentation de la limite max */
    max-height: 200px;
}

/* Ajustements pour les petits écrans (mobiles) */
@media (max-width: 600px) {
    /* Styles par défaut pour les cartes sur mobile */
    .memory-card {
    /* Styles par défaut pour les cartes */
        /* Réduire la taille des cartes sur mobile pour en afficher plus sur une ligne */
        width: 20vmin;
        height: 20vmin;
        max-width: 150px;
        max-height: 150px;
    }

    .word-text {
        /* Réduire la taille de la police sur mobile pour éviter le débordement */
        font-size: 4vw;
        /* S'assurer que le texte peut se couper si nécessaire */
        word-break: break-word;
        overflow-wrap: break-word;
        /* Utiliser une taille de police minimale pour la lisibilité */
        min-font-size: 12px; 
    }
    
    /* Ajuster la taille de la police pour les mots longs sur mobile */
    .word-text.long-word {
        font-size: 3vw;
    }
    
    /* Pour les mots très longs sur mobile */
    .word-text.extra-long-word {
        font-size: 2.5vw;
    }
}
    margin: 1vmin; /* Marge relative */
}

/* Assurer que le conteneur des cartes est responsive */
#root > div {
    /* Assurer que le conteneur des cartes est responsive */
    /* Ajout d'une classe pour cibler le conteneur de cartes si nécessaire */
    /* Je vais supposer que #root > div est le conteneur principal des cartes */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 2vmin;
    min-height: 100vh; /* S'assurer que le conteneur prend toute la hauteur de la vue */
}

/* Styles pour forcer 4 cartes par ligne en série 2 */
.memory-card-container.level-2 .memory-card {
    /* Styles par défaut pour les cartes */
    /* Calculer la largeur pour 4 cartes par ligne, en tenant compte des marges */
    width: calc(25% - 2vmin); /* 25% pour 4 cartes, moins la marge totale */
    max-width: none; /* Supprimer la limite max-width pour que calc fonctionne */
    margin: 1vmin;
}

/* Ajustement pour les écrans plus petits (tablettes/mobiles) */
@media (max-width: 1024px) {
    .memory-card-container.level-2 .memory-card {
    /* Styles par défaut pour les cartes */
        /* On peut réduire la taille des marges ou laisser le calcul */
        width: calc(25% - 2vmin);
    }
}

@media (max-width: 768px) {
    /* Styles par défaut pour les cartes sur tablette */
    .memory-card-container.level-2 .memory-card {
    /* Styles par défaut pour les cartes */
        /* On peut passer à 3 cartes par ligne sur tablette */
        width: calc(33.33% - 2vmin);
    }
}

@media (max-width: 600px) {
    /* Styles par défaut pour les cartes sur mobile */
    .memory-card-container.level-2 .memory-card {
    /* Styles par défaut pour les cartes */
        /* On peut passer à 2 cartes par ligne sur mobile */
        width: calc(50% - 2vmin);
    }
}

/* Media queries pour ajuster la taille de la police sur les petits écrans */
@media (max-width: 768px) {
    /* Styles par défaut pour les cartes sur tablette */
    .word-text {
        font-size: 8vw; /* Augmenter la taille relative pour les petits écrans */
        line-height: 1.1;
    }
    .memory-card {
    /* Styles par défaut pour les cartes */
        width: 30vmin;
        height: 30vmin;
        margin: 1.5vmin;
    }
}

@media (max-width: 480px) {
    /* Styles par défaut pour les cartes sur très petit écran */
    .word-text {
        font-size: 10vw; /* Encore plus grand pour les très petits écrans */
        line-height: 1;
    }
    .memory-card {
    /* Styles par défaut pour les cartes */
        width: 45vmin; /* Augmentation pour les très petits écrans */
        height: 45vmin;
        margin: 2vmin;
    }
}