/* mobile.css */
/* Styles pour les écrans de moins de 768px de large */

@media (max-width: 768px) {
    main {
        /* Passe la grille en mode une seule colonne */
        grid-template-columns: 1fr;
        /* Définit l'ordre et la taille des zones verticales :
           - stats : hauteur automatique
           - main-content : hauteur basée sur son contenu
           - upgrades : prend tout l'espace restant */
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "stats"
            "main-content"
            "upgrades";
        /* Ajout crucial : empêche le conteneur main de déborder,
           forçant le scroll à se faire sur l'élément interne (.upgrades-container) */
        overflow: hidden;
    }

    .upgrades-container {
        border-right: none; /* Supprime la bordure de droite */
        border-top: 2px solid var(--couleur-bordure); /* Ajoute une bordure en haut */
        /* overflow-y: auto est déjà hérité du style desktop, ce qui le rend scrollable */
    }

    .stats-container {
        flex-direction: column; /* Empile les stats verticalement */
        gap: 10px;
        padding: 15px;
    }

    .stat-group-right {
        position: static; /* Annule la position absolue */
        display: flex;
        gap: 20px; /* Ajoute de l'espace entre les stats clic et auto */
        text-align: center;
    }
    
    .main-content-container {
        justify-content: center;
        gap: 10px; /* Réduit l'espace vertical */
        padding: 15px; /* Réduit le padding */
        overflow-y: auto; /* Ajoute un scroll si le contenu dépasse sur de très petits écrans */
    }
    
    #clicker-button {
        padding: 10px 25px; /* Padding réduit pour le bouton principal */
    }

    .flavor-image {
        max-height: 80px; /* Réduit la taille de l'image sur mobile */
        max-width: 120px;
        flex-shrink: 0; /* Empêche l'image de se réduire */
    }

    header h1 {
        font-size: 1.2em;
    }

    .header-button {
        padding: 6px 10px;
        font-size: 0.8em;
    }
    
    .flavor-container {
        min-height: auto; /* Retire la hauteur minimum sur mobile */
        padding-bottom: 0; /* Retire le padding du bas */
        flex-direction: row; /* Aligne l'image et le texte horizontalement */
        align-items: center; /* Centre les éléments verticalement */
        gap: 15px; /* Ajoute un espace entre l'image et le texte */
        width: 90%;
    }

    .flavor-text {
        text-align: left; /* Aligne le texte à gauche */
        font-size: 0.8em; /* Taille de police réduite pour le texte d'ambiance */
    }

    footer {
        display: none; /* Cache le footer sur les petits écrans */
    }
}