/* === CORRECTIONS MOBILES COMPLÈTES === */

/* Variables mobiles - CARTES BEAUCOUP PLUS PETITES */
:root {
  --mobile-header-height: 40px;
  --mobile-action-bar-height: 60px;
  --mobile-card-width: 35px;    /* Plus petit */
  --mobile-card-height: 49px;   /* ratio 1:1.4 */
}

/* === LAYOUT MOBILE PRINCIPAL === */
@media (max-width: 768px) {
  
  /* Container principal - hauteur contrôlée avec espace pour action-bar */
  .game-container {
    height: 100vh;
    height: 100dvh; /* Support moderne */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    margin: 0;
    
    /* Réserver l'espace pour la barre d'action fixe */
    padding-bottom: var(--mobile-action-bar-height) !important;
    box-sizing: border-box;
  }
  
  /* === HEADER MOBILE ULTRA-COMPACT === */
  .game-header {
    height: var(--mobile-header-height) !important;
    min-height: var(--mobile-header-height) !important;
    max-height: var(--mobile-header-height) !important;
    flex-shrink: 0;
    padding: 4px 8px !important; /* RÉDUIT le padding */
    background: rgba(0,0,0,0.95) !important;
    border-radius: 0 !important;
    
    /* GRID au lieu de FLEX pour éviter chevauchement */
    display: grid !important;
    grid-template-columns: 1fr 1.5fr 1fr !important; /* Plus d'espace pour boutons */
    align-items: center;
    gap: 4px; /* RÉDUIT le gap */
    
    font-size: 10px; /* RÉDUIT la taille de police */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    
    /* Position fixe en haut pour éviter chevauchement */
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
  
  /* Sections header SANS chevauchement */
  .header-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow: hidden;
  }
  
  .header-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden;
  }
  
  .header-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    overflow: hidden;
  }
  
  /* Phase info dans le header - ULTRA-COMPACT */
  .phase-info {
    text-align: center !important;
    font-size: 9px !important; /* ENCORE PLUS PETIT */
    color: #C8E6C9 !important;
    line-height: 1.1 !important; /* PLUS SERRÉ */
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 !important; /* SUPPRIMER TOUT PADDING */
    margin: 0 !important; /* SUPPRIMER TOUT MARGIN */
  }
  
  .turn-info {
    display: block !important;
    font-size: 8px !important; /* PLUS PETIT */
    opacity: 0.8 !important;
    margin-top: 0 !important; /* SUPPRIMER MARGIN */
    line-height: 1 !important; /* COMPACTER */
  }
  
  /* Boutons header ultra-compacts */
  .game-header button,
  .header-btn,
  .btn {
    padding: 3px 6px !important; /* ENCORE PLUS COMPACT */
    font-size: 9px !important; /* PLUS PETIT */
    min-height: 28px !important; /* PLUS BAS */
    max-height: 28px !important;
    min-width: 30px !important; /* PLUS ÉTROIT */
    margin: 0 !important;
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: white !important;
    border-radius: 3px !important; /* PLUS PETIT RADIUS */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1 !important; /* COMPACTER LE TEXTE */
  }
  
  /* Info panel compact - POSITIONNÉ SOUS LE HEADER RÉDUIT */
  .info-panel {
    height: 30px; /* RÉDUIT aussi */
    flex-shrink: 0;
    font-size: 10px; /* PLUS PETIT */
    padding: 4px 10px; /* RÉDUIT */
    margin-top: 6px; /* MOINS D'ESPACE */
    background: rgba(0,0,0,0.7);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* S'assurer qu'il ne chevauche pas le header */
    position: relative;
    z-index: 100;
  }
  
  /* Zone de jeu principale */
  .main-play-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 5px;
    padding: 5px;
  }
  
  /* === ZONE DES PILES - COMPACTE === */
  .piles-area {
    height: 80px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 10px;
  }
  
  /* PILES - Pioche et Défausse MÊME TAILLE */
  .pile-container {
    width: 45px !important;
    height: 60px !important;
  }
  
  .pile,
  .pile.deck,
  .pile.discard,
  #deckPile,
  #discardPile {
    width: 45px !important;
    height: 60px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    border-radius: 4px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.5) !important;
  }
  
  .discard-card,
  #discardTop {
    width: 100% !important;
    height: 100% !important;
    max-width: 45px !important;
    max-height: 60px !important;
  }
  
  .card-back {
    width: 35px !important;
    height: 49px !important;
  }
  
  /* CARTE dans les piles - MÊME TAILLE que toutes les autres cartes (35x49) */
  .discard-card .card,
  .pile .card,
  #discardPile .card,
  #discardTop .card,
  .center-zone .card:not(.meld .card) {
    width: 35px !important;
    height: 49px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    min-height: 49px !important;
    max-height: 49px !important;
    font-size: 7px !important;
  }
  
  /* === ZONE DES MELDS - SANS BLOCAGE === */
  .melds-zone,
  #meldsZone {
    min-height: 180px !important;
    max-height: none !important;
    width: 100% !important;
    padding: 4px !important;
    gap: 3px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
    pointer-events: none !important;
  }
  
  /* Cartes dans les melds - LISIBLES */
  .meld .card,
  .melds-zone .meld .card {
    width: 32px !important;
    height: 45px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    font-size: 7px !important;
    pointer-events: auto !important;
  }
  
  /* Chaque groupe meld - cliquable */
  .meld {
    padding: 3px !important;
    gap: 2px !important;
    min-height: 50px !important;
    margin: 2px !important;
    pointer-events: auto !important;
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 4px !important;
  }
  
  /* Zone de la main */
  .hand-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 4px;
  }
  
  /* Main des cartes */
  .hand-fan {
    flex: 1;
    position: relative;
    width: 100%;
    min-height: 70px;
    max-height: 100px;
    overflow: visible;
    margin-bottom: 5px;
  }
  
  /* === CARTES MOBILES - TAILLE RÉDUITE === */
  .hand-fan .card {
    position: absolute !important;
    width: var(--mobile-card-width) !important;
    height: var(--mobile-card-height) !important;
    transition: transform 0.3s ease, z-index 0.1s ease;
    transform-origin: bottom center;
    
    /* FONTE RÉDUITE POUR MOBILE */
    font-size: 7px !important;
    border-radius: 3px !important;
  }
  
  /* Texte des cartes plus petit */
  .hand-fan .card .rank {
    font-size: 7px !important;
    font-weight: bold;
  }
  
  .hand-fan .card .suit {
    font-size: 8px !important;
  }
  
  /* Cartes sélectionnées - NE PAS TOUCHER AU TRANSFORM */
  /* Cartes sélectionnées - GÉRÉ PAR JS */
  .hand-fan .card.selected,
  .hand-fan .card.is-selected {
    /* Z-index et transform gérés par JavaScript */
    /* Les cartes sélectionnées sont DERRIÈRE (z-index bas) */
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.6) !important;
    outline: 2px solid #4CAF50 !important;
  }
  
  /* === BARRE D'ACTIONS COMPACTE === */
  .action-bar {
    height: auto !important;
    min-height: 50px !important;
    max-height: 110px !important;
    flex-shrink: 0;
    
    background: rgba(0, 0, 0, 0.95) !important;
    border-radius: 0 !important;
    padding: 4px 2px !important;
    margin: 0 !important;
    
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    
    /* FORCER la visibilité au-dessus du navigateur */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    z-index: 9999 !important;
    
    /* Séparateur visuel */
    border-top: 2px solid rgba(255,255,255,0.2) !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.6) !important;
  }
  
  /* Boutons d'action mobiles - TRÈS COMPACTS */
  .action-bar button {
    flex: 0 0 auto !important;
    min-width: 45px !important;
    max-width: 60px !important;
    padding: 6px 3px !important;
    font-size: 8px !important;
    border-radius: 4px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: white !important;
    
    /* FORCE CLIQUABLE */
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  
  /* Bouton CARTE - TOUJOURS VISIBLE */
  .action-bar button#btnCarte {
    background: rgba(255, 152, 0, 0.3) !important;
    border-color: #FF9800 !important;
    flex: 0 0 auto !important;
    min-width: 50px !important;
  }
  
  /* Boutons d'action ACTIVÉS */
  .action-bar button:not(:disabled) {
    background: rgba(76, 175, 80, 0.3) !important;
    border-color: #4CAF50 !important;
  }
  
  /* Boutons d'action actifs */
  .action-bar button:enabled:hover,
  .action-bar button.active {
    background: rgba(76, 175, 80, 0.8) !important;
    border-color: #4CAF50 !important;
  }
  
  /* Masquer les zones non-essentielles */
  .players-area {
    display: none !important;
  }
  
  .melds-zone {
    max-height: 120px;    /* Plus d'espace pour voir les melds */
    overflow-y: auto;
    overflow-x: auto;     /* Scroll horizontal aussi */
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 8px;
    margin-left: 50px;    /* Éviter le joueur left */
    margin-right: 50px;   /* Éviter le joueur right */
    z-index: 5;           /* Sous les joueurs */
  }
  
  /* Popup mobile */
  .popup-content {
    max-width: 95vw !important;
    max-height: 90vh !important;
    padding: 15px !important;
    margin: 5px !important;
  }
}

/* === TRÈS PETITS ÉCRANS === */
@media (max-width: 480px) {
  :root {
    --mobile-card-width: 30px;   /* Encore plus petit */
    --mobile-card-height: 42px;  /* ratio 1:1.4 */
  }
  
  .hand-fan .card {
    font-size: 6px !important;
  }
  
  .hand-fan .card .rank {
    font-size: 6px !important;
  }
  
  .hand-fan .card .suit {
    font-size: 7px !important;
  }
  
  .action-bar button {
    font-size: 10px !important;
    padding: 10px 6px !important;
  }
}

/* === STAGING AREA MOBILE === */
@media (max-width: 768px) {
  .staging-area {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 10px !important;
    padding-bottom: 150px !important;
    overflow-y: auto !important;
    z-index: 3000 !important;
  }
  
  .staging-header {
    margin-bottom: 10px !important;
  }
  
  .staging-header h3 {
    font-size: 14px !important;
  }
  
  .staging-header p {
    font-size: 11px !important;
  }
  
  .staging-groups {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-height: 100px !important;
    margin-bottom: 10px !important;
    justify-content: center !important;
  }
  
  .staging-group {
    min-height: 60px !important;
    padding: 6px !important;
    gap: 4px !important;
  }
  
  .staging-group .card {
    width: 35px !important;
    height: 49px !important;
  }
  
  /* BOUTONS STAGING - BIEN VISIBLES */
  .staging-controls {
    position: fixed !important;
    bottom: 70px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px !important;
    background: rgba(0,0,0,0.95) !important;
    z-index: 3001 !important;
  }
  
  .staging-btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    min-height: 40px !important;
  }
  
  .staging-info {
    position: fixed !important;
    bottom: 10px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 8px !important;
    background: rgba(0,0,0,0.9) !important;
    font-size: 12px !important;
    z-index: 3001 !important;
  }
}

/* === CORRECTIONS SPÉCIFIQUES NAVIGATEURS MOBILES === */

/* Pour Safari iOS */
@supports (-webkit-touch-callout: none) {
  .action-bar {
    bottom: env(safe-area-inset-bottom) !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
}

/* Pour tous les navigateurs mobiles - force absolue */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  .action-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    transform: translateZ(0) !important; /* Force hardware acceleration */
  }
  
  /* S'assurer que le body ne cache pas la barre */
  body {
    padding-bottom: var(--mobile-action-bar-height) !important;
  }
}