/* mobile.css - Styles pour les écrans de petite taille */

/* Media query pour les téléphones (portrait et paysage) */
@media (max-width: 768px) {


/* --- STYLES FORUM (MOBILE) --- */
.post-container {
    flex-direction: column; /* Empile l'auteur et le contenu verticalement */
    gap: 8px; /* Réduit l'écart entre les deux blocs */
}

.post-author-info {
    width: 100%; /* L'info auteur prend toute la largeur */
    text-align: left; /* Aligne le nom à gauche (plus propre sur mobile) */
}

.post-content {
    padding: 10px; /* Réduit légèrement le padding du message */
}

.post-body {
    overflow-x: auto; /* Ajoute un défilement horizontal AU MESSAGE SEULEMENT si nécessaire */
    word-wrap: break-word; /* Coupe les mots longs qui pourraient déborder */
}

/* Cible spécifiquement les tables (rapports) à l'intérieur des messages */
.post-body table {
    width: 100%; /* S'assure qu'ils essaient de tenir */
    display: block; /* Nécessaire pour que overflow-x fonctionne bien sur une table */
    overflow-x: auto; /* Ajoute un scroll horizontal DANS la table elle-même */
}

/* Cible spécifiquement les blocs de code (souvent <pre>) */
.post-body pre {
    overflow-x: auto; /* Permet aux blocs de code de défiler */
    white-space: pre; /* Conserve le formatage du code */
}

    /* --- STYLES DE BASE --- */
    body {
        padding: 5px; /* Moins de marge sur les petits écrans */
        min-height: 100%; /* S'assurer que le body prend toute la hauteur */
    }

    #game-wrapper, #game-wrapper.active {
        gap: 10px; /* Réduire l'espace entre la sidebar et le contenu principal */
        padding: 5px 0;
    }

    /* --- BARRE LATÉRALE (SIDEBAR) --- */
    #sidebar {
        padding: 10px;
        flex-direction: row; /* Mettre les sections côte à côte */
        flex-wrap: wrap; /* Permettre le retour à la ligne */
        justify-content: space-around; /* Mieux espacer les éléments */
        gap: 15px;
    }
    .sidebar-section {
        flex-grow: 1; /* Permettre aux sections de grandir */
        min-width: 250px; /* Largeur minimale avant de passer à la ligne */
    }
    .sidebar-section h2 {
        font-size: 1.1em;
    }

    /* --- CONTENU PRINCIPAL --- */
    #tab-content-container {
        padding: 10px;
    }

    /* --- ONGLETS DE NAVIGATION PRINCIPALE --- */
    #main-tabs {
        padding: 0;
        justify-content: center; /* Centrer les onglets */
        gap: 5px;
    }
    .main-tab-button {
        padding: 10px 8px; /* Réduire le padding */
        font-size: 0.8em; /* Réduire la taille de la police */
        flex-grow: 1; /* Les boutons prennent la même largeur */
        text-align: center;
    }
    .main-tab-button .fas {
        margin-right: 5px;
    }

    /* --- SOUS-ONGLETS --- */
    .sub-tabs {
        gap: 6px;
        margin-bottom: 15px;
    }
    .sub-tab-button {
        padding: 6px 10px;
        font-size: 0.9em;
    }

    /* ================================================================= */
    /* == NOUVELLE APPROCHE PLUS ROBUSTE POUR LES CARTES SUR MOBILE == */
    /* ================================================================= */
    .item-card.horizontal {
        /* On passe en flexbox pour un meilleur contrôle */
        display: flex;
        flex-direction: column; /* Les éléments s'empilent verticalement */
        gap: 15px; /* Espace entre les sections de la carte */
        text-align: center;
        /* On retire la grille qui posait problème */
        grid-template-columns: 1fr;
    }

    .item-card.horizontal .item-image {
        width: 100px;
        height: 100px;
        margin: 0 auto; /* Centrer l'image */
        flex-shrink: 0; /* Empêche l'image de rétrécir */
    }

    .item-card.horizontal .item-details {
        align-items: center; /* Centrer les détails */
        padding: 0;
        width: 100%;
        gap: 8px; /* Ajoute un peu d'espace dans les détails */
    }
    
    .item-card.horizontal .item-details p {
        min-height: 0; /* Permet à la description d'être plus courte */
    }

    /* On s'assure que les stats s'affichent correctement */
    .unit-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px; /* Un peu plus d'espace */
    }

    .item-card.horizontal .item-actions {
        width: 100%;
        max-width: none; /* On retire la largeur max qui posait problème */
        margin: 0;
        padding: 15px 0 0 0;
        border-top: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .item-card.horizontal .costs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .item-card.horizontal .cost-item {
        font-size: 0.9em;
    }
    
    /* Conteneur pour la formation d'unités (Caserne) */
    .item-card.horizontal .train-controls {
        display: grid;
        grid-template-columns: 1fr auto; /* Input prend la place, bouton Max à côté */
        gap: 10px;
        width: 100%;
        max-width: 280px; /* On limite la largeur du groupe */
        margin-bottom: 10px;
    }

    .item-card.horizontal .train-controls input {
        text-align: center;
        padding: 8px;
    }
    
    /* Le bouton principal de formation prend toute la largeur */
    .item-card.horizontal .train-button {
        grid-column: 1 / -1; /* S'étend sur toutes les colonnes */
    }
    
    /* Le bouton principal d'action (Construire/Améliorer) */
    .item-card.horizontal .build-action-btn {
        width: 100%; /* Prend toute la largeur */
        max-width: 280px;
    }

    .unit-equipment-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        padding-top: 15px;
    }
    /* ================= FIN DE LA NOUVELLE APPROCHE ================= */


    /* --- DISPOSITIONS SPÉCIFIQUES --- */
    .expedition-layout, .armee-layout, .attack-layout, .fosse-layout, .territoire-layout {
        gap: 15px;
    }
    
    /* --- CHAT & MESSAGES --- */
    .mp-layout {
        grid-template-columns: 1fr; /* S'assurer que c'est une seule colonne */
    }
    #chat-messages,
    #alliance-chat-messages,
    .mp-chat-messages {
        min-height: 0; /* Annuler la hauteur minimale des styles de base */
        height: 60vh;  /* Définir une hauteur fixe pour activer le défilement */
    }
    .chat-message {
        max-width: 90%;
    }

    /* --- TABLEAUX (CLASSEMENT) --- */
    .ranking-container, .bourse-layout {
        overflow-x: auto; /* Permettre le défilement horizontal */
        border: 1px solid var(--border-color);
        border-radius: 8px;
    }
    .ranking-table, .bourse-table {
        min-width: 650px; /* Largeur minimale pour forcer le défilement */
    }

    /* --- MODALES --- */
    .modal-content, .confirmation-modal-content {
        padding: 15px;
        width: 95%; /* Laisser un peu d'espace sur les côtés */
        max-height: 85vh;
    }
    .army-comparison {
        grid-template-columns: 1fr; /* Une seule colonne */
    }

    /* --- AUTHENTIFICATION --- */
    #auth-container.active {
        background-attachment: fixed; /* Keeps the background in place on scroll */
    }

    .welcome-section h1,
 	.welcome-text, 
    #player-count {
        display: none;
    }
   
    #auth-container.active {
        background-image: url('https://i.ibb.co/fGHXD5fZ/Gemini-Generated-Image-czy7smczy7smczy7.png') !important;
    }

    .auth-box {
        padding: 20px;
	    height: 62%;
        width: 90%;
        transform: scale(0.7);
    }
    .auth-title {
        font-size: 2.2em;
    }

    /* --- CHAT INPUT--- */
    .chat-input-area {
        flex-direction: column;
        align-items: stretch;
    }
    .chat-input-area > button {
        width: 100%;
    }

    /* --- STYLES CERCLE DES PARIEURS (MOBILE) --- */
    .fight-card-container {
        flex-direction: column;
        gap: 15px;
    }

    .fighter-card {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }
    
    .fighter-card img {
        width: 150px;
        height: 150px;
    }

    .vs-separator {
        font-size: 2em;
        margin: 10px 0;
    }

    .betting-form-container {
        padding: 15px;
    }

    .bet-inputs {
        grid-template-columns: 1fr;
    }

    .table-container {
        overflow-x: auto;
    }
    
    .table-container table {
        min-width: 500px;
    }

    /* ================================================= */
    /* === CORRECTIF ARÈNE COMPAGNONS (MOBILE) === */
    /* ================================================= */

    /* 1. Écran de Matchmaking (Le VS avant combat) */
    .arena-vs-layout {
        flex-direction: column; /* Empile l'équipe joueur et l'équipe adverse */
        align-items: center;
        gap: 10px;
    }

    .vs-separator {
        margin: 10px 0;
        transform: rotate(90deg); /* Tourne le "VS" pour qu'il pointe vers le bas */
        font-size: 2em; /* Réduit un peu la taille */
    }

    .vs-team {
        width: 100%; /* Prend toute la largeur disponible */
        border: 1px solid var(--border-color); /* Unifie les bordures */
        /* Réinitialise les bordures spécifiques gauche/droite du desktop */
        border-left: 1px solid var(--border-color); 
        border-right: 1px solid var(--border-color);
    }

    /* On remet la couleur spécifique via une bordure haute/basse ou un fond léger */
    .vs-team.player {
        border-top: 3px solid var(--accent-blue);
    }
    .vs-team.opponent {
        border-bottom: 3px solid var(--accent-red);
    }

    /* 2. Écran de Combat (L'animation en direct) - CONTENEUR */
    .arena-combat-teams {
        flex-direction: column; /* Empile les équipes verticalement */
        gap: 15px;
        padding: 5px;
        width: 100%;
        box-sizing: border-box; /* Empêche le padding de dépasser */
    }

    /* 3. Colonnes d'équipe (Joueur ET Adversaire) - UNIFICATION */
    .arena-combat-team, 
    .arena-combat-team.opponent,
    .arena-combat-team.player {
        width: 100% !important; /* Prend toute la largeur */
        align-items: center !important; /* FORCE LE CENTRAGE DES CARTES */
        display: flex;
        flex-direction: column;
    }

    /* 4. La Carte du Compagnon (Unité) - STANDARDISATION VISUELLE */
    .arena-combat-unit,
    .arena-combat-team.player .arena-combat-unit,
    .arena-combat-team.opponent .arena-combat-unit {
        width: 95% !important; /* Prend presque toute la largeur disponible */
        max-width: 350px !important; /* Limite la taille pour que ça reste joli */
        margin: 5px auto !important; /* Centre la carte */
        box-sizing: border-box;
        padding: 8px 12px !important;
        min-height: 70px; /* Réduit la hauteur minimale */
        
        /* Force l'affichage normal (Image Gauche / Texte Droite) pour TOUT LE MONDE */
        flex-direction: row !important; 
        justify-content: flex-start !important;
        display: flex !important;
    }

    /* 5. Texte et Infos - ALIGNEMENT GAUCHE */
    .arena-combat-unit-info,
    .arena-combat-team.player .arena-combat-unit-info,
    .arena-combat-team.opponent .arena-combat-unit-info {
        text-align: left !important; /* Force l'alignement à gauche */
        flex: 1 !important; /* Force le texte à prendre l'espace restant */
        min-width: 0; /* Empêche le texte de déborder ou d'écraser la carte */
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden; /* Cache ce qui dépasse */
    }

    .arena-combat-unit-info strong {
        font-size: 0.95em; /* Nom plus petit */
        display: block;
        white-space: nowrap; /* Empêche le nom de passer à la ligne */
        overflow: hidden;
        text-overflow: ellipsis; /* Ajoute "..." si le nom est trop long */
    }

    .arena-combat-unit-info small {
        font-size: 0.8em;
    }

    /* 6. Ajustement des images */
    .arena-combat-unit img,
    .arena-combat-team.player .arena-combat-unit img,
    .arena-combat-team.opponent .arena-combat-unit img {
        width: 50px !important; /* Taille fixe plus petite sur mobile */
        height: 50px !important;
        flex-shrink: 0 !important; /* Empêche l'image de s'écraser */
        margin-right: 15px !important; /* Marge standard à droite */
        margin-left: 0 !important; /* Pas de marge à gauche */
    }

    /* 7. S'assure que les barres de vie/énergie sont visibles */
    .arena-combat-team.player .arena-hp-bar,
    .arena-combat-team.player .arena-energy-bar,
    .arena-combat-team.opponent .arena-hp-bar,
    .arena-combat-team.opponent .arena-energy-bar {
        width: 100% !important;
        display: block !important;
    }

    /* 8. Journal de combat (Log) */
    .arena-combat-log-container {
        height: 200px; /* Moins haut sur mobile pour voir le combat au-dessus */
        font-size: 0.85em; /* Texte plus petit */
    }

    /* 9. Slots d'équipe (Sélection) */
    .arena-team-slots-container {
        flex-direction: row; /* Affiche les 3 slots en ligne horizontale scrollable si besoin */
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 5px;
        
        /* === CORRECTIF BUG CLIC & CROIX === */
        /* Ajout de padding-top pour éviter que la croix soit coupée */
        padding-top: 15px; 
        /* Position relative et z-index pour passer au-dessus des marges/titres invisibles */
        position: relative;
        z-index: 5;
    }

    /* Désactive les effets de mouvement sur mobile pour stabiliser le clic */
    .arena-slot-card:hover, .arena-assign-card:hover {
        transform: none !important; 
    }

    .arena-slot-card {
        min-width: 100px; /* Largeur minimale pour ne pas être écrasé */
        font-size: 0.8em;
        padding: 5px;
        position: relative; /* Assure que le bouton X se positionne par rapport à la carte */
    }

    .arena-slot-card img {
        width: 45px;
        height: 45px;
    }
    
    /* Assure que la croix est bien accessible et au-dessus de tout */
    .arena-slot-remove-btn {
        z-index: 10;
        cursor: pointer;
    }

}

/* Styles pour les écrans très petits (en dessous de 480px) */
@media (max-width: 480px) {
    #main-tabs {
        flex-wrap: wrap;
    }
    .main-tab-button {
        flex-basis: 45%;
        font-size: 0.75em;
    }

    .fosse-room-content, .army-comparison {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .fosse-vs-icon {
        transform: rotate(90deg);
    }
    
    .wb-sub-tabs-bar {
        flex-direction: column;
    }
    
    .wb-sub-tab-button {
        border-bottom: 1px solid var(--border-color);
    }
    
    .wb-sub-tab-button.active {
        border-bottom-color: var(--accent-orange);
    }

    /* Grilles d'objets */
    .corvus-items-grid, .inventory-grid, .treasure-chests-grid, .unit-selection-grid, #attack-unit-selection-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 10px;
    }

    .unit-select-card-wb {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
/* CORRECTION : Boutons d'action profil tronqués */
.profile-actions {
    flex-wrap: wrap !important; /* Autorise les boutons à passer à la ligne */
    gap: 8px !important; /* Réduit un peu l'espace entre les boutons */
}

.profile-actions button {
    flex: 1 1 40%; /* Les boutons prennent ~40% de largeur (2 par ligne) et s'étirent */
    min-width: 100px; /* Largeur minimale pour ne pas écraser le texte */
    margin: 0 !important; /* Nettoie les marges */
    font-size: 0.9em; /* Ajuste légèrement la taille du texte */
    padding: 10px 5px !important; /* Optimise l'espace interne */
    white-space: nowrap; /* Empêche le texte du bouton de se couper bizarrement */
}
}