/* --- Mobile Adaptation --- */
.mobile-only {
    display: none !important;
}

@media (max-width: 500px) or (max-height: 400px) {
    .mobile-only {
        display: flex !important;
    }

    /* Fix overlay scroll on mobile */
    .overlay {
        align-items: flex-start !important; /* Start from top to allow scrolling */
        overflow-y: auto !important;
        padding: 20px 0 calc(40px + env(safe-area-inset-bottom)) 0 !important; /* Utilise la zone de sécurité système */
        box-sizing: border-box !important;
    }

    .overlay-content {
        height: auto !important; /* Let it grow with content */
        min-height: min-content !important;
        margin: auto !important; /* Center horizontally */
    }

    .login-content {
        padding: 30px 20px 40px 20px !important; /* Un peu plus de padding en bas de la boîte */
        width: 95% !important;
        max-width: 400px !important;
        margin-bottom: 20px !important;
    }

    /* Fix deck selection overlay on mobile */
    #deck-selection-overlay h1 {
        text-align: center !important;
        width: 100% !important;
        font-size: 2rem !important; /* Légèrement plus petit sur mobile */
        padding: 0 10px !important;
    }

    #deck-selection-overlay .deck-options {
        width: 100% !important;
        justify-content: center !important;
    }

    #deck-selection-overlay .mode-btn {
        font-size: 1rem !important;
        padding: 15px 20px !important;
    }

    /* Fix sealed overlay on mobile */
    #sealed-overlay h1 {
        text-align: center !important;
        width: 100% !important;
        font-size: 2rem !important;
        padding: 0 10px !important;
    }

    #sealed-overlay p {
        text-align: center !important;
        width: 100% !important;
        padding: 0 10px !important;
    }

    #sealed-pool-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colonnes sur mobile au lieu de 3 */
        gap: 15px !important;
        padding: 15px !important;
    }

    #board {
        padding: 5px !important;
        gap: 5px !important;
    }

    .board-wrapper {
        gap: 5px !important;
        height: 200px !important; /* Augmenté de 180px pour le padding vertical sur mobile */
    }

    .board-zone {
        display: none !important; /* Hide all zones by default */
    }

    /* Shown zone based on active tab */
    body.show-market .market-zone,
    body.show-vertical .board-zone:not(.market-zone):not(.horizontal-zone),
    body.show-horizontal .board-zone.horizontal-zone {
        display: flex !important;
    }

    #compost-card-buy-container {
        display: none !important;
        left: -100px !important; 
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 150px !important; /* Zone de détection : dépasse de 50px sur l'écran (-100 + 150) */
        height: 200px !important;
        z-index: 15000 !important;
    }

    /* Show only when market tab is active */
    body.show-market #compost-card-buy-container {
        display: flex !important;
    }

    #compost-card-buy-container .card {
        transform: scale(0.4) !important;
        left: 35px !important; /* Repos : la carte est à -45px du bord */
        top: 0 !important;
        transform-origin: center center !important;
    }

    #compost-card-buy-container:hover .card {
        transform: scale(0.8) !important;
        left: 140px !important; /* Sortie : la carte est à +70px sur l'écran */
        z-index: 16000 !important;
    }

    #mobile-tabs {
        display: flex !important;
        justify-content: center;
        gap: 10px;
        margin-bottom: 10px;
        z-index: 5000;
    }

    .mobile-tab {
        padding: 6px 12px;
        background: rgba(0, 0, 0, 0.4);
        color: rgba(255, 255, 255, 0.6);
        border-radius: 15px;
        font-size: 0.8rem;
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-tab.active {
        background: #3498db;
        color: white;
        border-color: #fff;
    }

    .mobile-nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: #3498db;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        color: white;
        z-index: 10000;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        cursor: pointer;
        transition: background-color 0.2s, transform 0.1s;
    }

    .mobile-nav-arrow:active {
        background: #2980b9;
        transform: translateY(-50%) scale(0.95);
    }

    .mobile-nav-arrow.left { left: 5px; }
    .mobile-nav-arrow.right { right: 5px; }

    /* Tutorial small screen adjustments */
    .tutorial-message-content {
        font-size: 0.85rem !important;
        max-width: 85% !important;
    }
    #tutorial-message-text {
        font-size: 0.85rem !important;
    }

    /* Force entire game to fit in visible viewport */
    #game-container {
        height: 100dvh !important;
        padding-bottom: max(15px, env(safe-area-inset-bottom)) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #board {
        flex: 1 !important; /* Allow board to shrink/grow */
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .board-wrapper {
        height: auto !important;
        min-height: 120px !important;
        flex: 1 !important;
    }

    /* Fix stats containers on mobile */
    .stats-container {
        padding: 5px !important;
        gap: 10px !important;
    }

    #player-area, #opponent-area {
        padding: 0 5px !important;
        justify-content: space-between !important;
    }
    
    /* Ensure no overlap logic on mobile/small screen */
    #deck-pile, #opponent-deck-pile { margin-left: 0 !important; }
    #discard-pile, #opponent-discard-pile { margin-right: 0 !important; }
    
    /* Make hand containers wider on mobile */
    #hand-container, #opponent-hand-container {
        flex: 1 1 auto !important;
        min-width: 60% !important; /* Take at least 60% of available width */
        max-width: 70% !important; /* Cap at 70% to leave room for piles */
    }
    
    /* Reduce pile size on mobile to give more room to hands */
    #player-area .pile, #opponent-area .pile {
        width: 80px !important;
        transform: scale(0.8) !important;
    }

    .stat-svg-container {
        width: 80px !important; /* Restauré à la taille bureau comme demandé */
        height: 80px !important;
    }

    .stat-svg-container svg {
        width: 100% !important;
        height: 100% !important;
    }

    #hand-container, #opponent-hand-container {
        height: 120px !important;
        z-index: 100 !important;
        pointer-events: auto !important; /* Allow clicking on hand even when collapsed */
    }

    /* Dynamic Height Adjustment (Sliding) */
    #player-area {
        height: 90px !important; /* Augmenté de 60px à 90px */
        position: relative;
        background-color: transparent !important;
        overflow: visible !important;
        z-index: 1000;
    }

    #player-area::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 180px;
        background-color: #2c3e50;
        transform: translateY(90px); /* 90px visible at rest (180 - 90) */
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s;
        z-index: -1;
        border-top: 2px solid #34495e;
        pointer-events: auto;
    }

    #player-area:hover::before,
    #player-area.active-touch::before { /* Ajout d'une classe pour le tactile */
        transform: translateY(0);
        background-color: rgba(44, 62, 80, 0.98);
        box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
    }

    #player-area .pile, 
    #player-area #hand-container {
        transform: translateY(90px); /* Ajusté à 90px */
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #player-area #player-stats,
    #player-area #player-actions {
        transform: translate(-50%, 50%) translateY(90px) !important;
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    
    #player-area:hover .pile, 
    #player-area:hover #hand-container,
    #player-area.active-touch .pile,
    #player-area.active-touch #hand-container {
        transform: translateY(0);
    }

    #player-area:hover #player-stats,
    #player-area:hover #player-actions,
    #player-area.active-touch #player-stats,
    #player-area.active-touch #player-actions {
        transform: translate(-50%, 50%) translateY(0) !important;
    }

    #player-stats, #player-actions {
        left: 50% !important;
        bottom: 180px !important; /* Aligné sur la bordure haute du fond glissant (180px) */
        top: auto !important;
        gap: 3vw !important; /* Espacement proportionnel */
        z-index: 10000 !important;
        pointer-events: auto !important;
    }
    
    #player-area:hover,
    #player-area.active-touch {
        z-index: 5000;
    }

    #opponent-area {
        height: 30px !important;
        position: relative;
        background-color: transparent !important;
        overflow: visible !important;
        z-index: 1000;
        margin-bottom: 5px !important;
    }

    #opponent-area::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 120px; /* Augmenté pour inclure les stats */
        background-color: #2c3e50;
        transform: translateY(-90px); /* 30px visible at rest */
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s;
        z-index: -1;
        border-bottom: 2px solid #34495e;
        pointer-events: auto;
    }

    #opponent-area:hover::before {
        transform: translateY(0);
        background-color: rgba(44, 62, 80, 0.98);
        box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    }

    #opponent-area .pile, 
    #opponent-area #opponent-hand-container {
        transform: translateY(-90px);
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    
    #opponent-area:hover .pile, 
    #opponent-area:hover #opponent-hand-container {
        transform: translateY(0);
    }

    #opponent-stats {
        position: absolute !important;
        top: 120px !important; /* Positionné sur la bordure basse de la zone glissante (120px) */
        left: 50% !important;
        transform: translate(-50%, -50%) translateY(-90px) !important; /* Centré verticalement sur la bordure */
        margin: 0 !important;
        z-index: 10000 !important; /* Augmenté pour être au-dessus du plateau */
        width: auto !important;
        gap: 3vw !important; /* Espacement proportionnel */
        pointer-events: auto !important; /* INDISPENSABLE : permet de cliquer sur l'élément */
    }

    #opponent-area:hover #opponent-stats {
        transform: translate(-50%, -50%) translateY(0) !important;
    }

    #player-stats, #player-actions {
        left: 50% !important;
        bottom: 150px !important; /* Centre l'élément (60px) sur la ligne des 180px */
        gap: 3vw !important; /* Espacement proportionnel */
        z-index: 10000 !important;
        pointer-events: auto !important;
    }

    .stat-svg-container {
        width: 50px !important; /* Réduit de 80px à 50px */
        height: 50px !important;
    }

    .stat-circle {
        width: 40px !important; /* Réduit pour les boutons */
        height: 40px !important;
        font-size: 0.7rem !important;
    }

    .stat-circle svg {
        width: 20px !important;
        height: 20px !important;
    }

    .stat-value {
        font-size: 0.8rem !important; /* Réduit la police dans les cercles stat */
    }

    /* Reduce card elevation on hover for mobile */
    .card-vertical:not(.card-on-board):not(.sealed-card):not(#pile-cards-grid .card):hover:not(.dragging),
    .card-vertical:not(.card-on-board):not(.sealed-card):not(#pile-cards-grid .card).force-hover {
        bottom: 25px !important; /* Réduit de 55px à 25px */
    }

    .card-horizontal:not(.card-on-board):not(.sealed-card):not(#pile-cards-grid .card):hover:not(.dragging),
    .card-horizontal:not(.card-on-board):not(.sealed-card):not(#pile-cards-grid .card).force-hover {
        bottom: 15px !important; /* Réduit de 40px à 15px */
    }

    /* Retract areas if dragging a card */
    body.is-dragging #player-area::before,
    body.is-dragging #player-area .pile, 
    body.is-dragging #player-area #hand-container {
        transform: translateY(90px) !important;
    }

    body.is-dragging #player-area #player-stats,
    body.is-dragging #player-area #player-actions {
        transform: translate(-50%, 50%) translateY(90px) !important;
    }
    
    body.is-dragging #opponent-area::before,
    body.is-dragging #opponent-area .pile, 
    body.is-dragging #opponent-area #opponent-hand-container {
        transform: translateY(-90px) !important;
    }

    body.is-dragging #opponent-area #opponent-stats {
        transform: translate(-50%, -50%) translateY(-90px) !important;
    }
}