/* ========================================
   MOBILE CSS - Layout Verticale Dedicato
   ======================================== */

@media (max-width: 768px) {
    
    /* BODY - Permetti scroll verticale E non bloccare scroll orizzontale figli */
    body {
        overflow-y: auto;
        overflow-x: visible; /* CAMBIATO: non bloccare scroll x dei figli! */
    }
    
    /* GAME CONTAINER - Layout verticale */
    #game-container {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        padding: 5px;
    }
    
    /* ========================================
       TOP ROW: Mood Deck + Header + Main Deck
       ======================================== */
    
    #game-header {
        display: grid;
        grid-template-columns: 80px 1fr 80px;
        grid-template-rows: auto;
        padding: 10px 5px;
        margin-bottom: 10px;
        gap: 8px;
        align-items: center;
    }
    
    /* Mood Deck - Alto Sinistra */
    #mood-deck-area {
        grid-column: 1;
        grid-row: 1;
        order: unset;
    }
    
    .deck-stack {
        width: 70px;
        height: 98px;
    }
    
    .deck-label {
        font-size: 8px;
    }
    
    .deck-count {
        font-size: 18px;
    }
    
    /* Header Info - Centro */
    .header-info {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    
    #turn-info {
        font-size: 14px;
    }
    
    #phase-indicator {
        font-size: 18px;
    }
    
    #cfu-info {
        font-size: 14px;
        margin-right: 0;
    }
    
    /* Main Deck - Alto Destra */
    #main-deck-area {
        grid-column: 3;
        grid-row: 1;
    }
    
    #exit-btn {
        position: fixed;
        top: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
        font-size: 18px;
        z-index: 10000;
    }
    
    /* ========================================
       PLAYFIELD - Campo da gioco
       ======================================== */
    
    #playfield {
        flex: none;
        height: auto;
        max-height: none;
        overflow: visible;
        padding: 10px 5px;
        gap: 10px;
    }
    
    /* PLAYER ZONE - Colonne verticali */
    #player-zone {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    
    /* ========================================
       CAMPO GIOCO - Sessione e Aula
       ======================================== */
    
    #center-area {
        order: 0;
        width: 100%;
    }
    
    #player-session {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-bottom: 10px;
    }
    
    #player-aula {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    
    .area-label {
        font-size: 11px;
        padding: 4px 10px;
        margin-bottom: 8px;
    }
    
    .card-slot {
        width: 80px;
        height: 112px;
    }
    
    /* ========================================
       PREVIEW ROW - Tutor + Preview + Rimandi
       ======================================== */
    
    #preview-row-mobile {
        display: grid;
        grid-template-columns: 90px 1fr 90px;
        gap: 8px;
        padding: 10px 5px;
        align-items: center;
        justify-items: center;
    }
    
    /* Tutor - Sinistra (verticale) */
    #tutor-area-mobile {
        grid-column: 1;
    }
    
    #tutor-slot {
        width: 80px;
        height: 112px;
    }
    
    /* Card Preview - Centro (QUADRATA) */
    #card-preview-area {
        grid-column: 2;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 200px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.3);
        padding: 10px;
    }
    
    #card-preview-area .preview-label {
        font-size: 9px;
        margin-bottom: 5px;
    }
    
    #card-preview-area .preview-card-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .preview-card-webp {
        max-width: 180px;
        max-height: 180px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    
    /* Rimandi - Destra */
    #rimandi-area-mobile {
        grid-column: 3;
    }
    
    #rimandi-area {
        width: 80px;
        height: 112px;
    }
    
    .rimandi-label {
        font-size: 8px;
    }
    
    .rimandi-count {
        font-size: 18px;
    }
    
    /* ========================================
       HAND AREA - Mano in basso
       ======================================== */
    
    #hand-area {
        padding: 15px 5px;
        padding-top: 20px;
        min-height: 130px;
        overflow-x: scroll; /* scroll invece di auto - più affidabile */
        overflow-y: visible;
        gap: 8px;
        justify-content: flex-start;
        
        /* FIX SCROLL TOUCH ANDROID/iOS */
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x !important; /* Solo pan-x, non pan-y */
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        
        /* Nascondi scrollbar ma permetti scroll */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        
        /* Force rendering */
        will-change: scroll-position;
        transform: translateZ(0);
        
        /* Position relative per pseudo-elementi */
        position: relative;
    }
    
    /* Nascondi scrollbar WebKit (Chrome/Safari) */
    #hand-area::-webkit-scrollbar {
        display: none;
    }
    
    /* Scroll indicator - Sfumature ai lati */
    #hand-area::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
        pointer-events: none;
        z-index: 10;
        opacity: 0.5;
    }
    
    #hand-area::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
        pointer-events: none;
        z-index: 10;
        opacity: 0.5;
    }
    
    .hand-card {
        width: 80px;
        height: 112px;
        flex-shrink: 0;
        
        /* DISABILITA DRAG SU MOBILE - Ma permetti touch scroll! */
        user-select: none;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
        
        /* IMPORTANTE: Non touch-action: none! Blocca scroll! */
        pointer-events: auto;
    }
    
    /* Disabilita completamente drag su mobile */
    .hand-card[draggable="true"] {
        pointer-events: auto; /* Permetti click */
        -webkit-user-drag: none; /* Blocca drag */
    }
    
    /* ========================================
       CLICK-TO-PLAY - Feedback Visivi
       ======================================== */
    
    /* Carta selezionata */
    .hand-card.selected {
        border: 3px solid #ffcc00 !important;
        box-shadow: 0 0 20px rgba(255, 204, 0, 0.8) !important;
        transform: translateY(-10px);
    }
    
    /* Slot validi evidenziati */
    .card-slot.valid-target {
        border: 3px dashed #44ff44 !important;
        background: rgba(68, 255, 68, 0.2) !important;
        animation: pulse-slot 1s infinite;
    }
    
    @keyframes pulse-slot {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }
    
    /* Slot invalidi */
    .card-slot.invalid-target {
        border: 3px solid #ff4444 !important;
        background: rgba(255, 68, 68, 0.1) !important;
    }
    
    /* RIMUOVO ZOOM HOVER E TOUCH */
    .hand-card:hover {
        transform: none !important;
        z-index: auto !important;
    }
    
    .hand-card.touched {
        transform: none !important;
        position: static !important;
    }
    
    /* DISABILITA DRAG SU MOBILE */
    .hand-card {
        -webkit-user-drag: none;
        user-drag: none;
    }
    
    /* ========================================
       UI ELEMENTS
       ======================================== */
    
    #next-phase-btn {
    /* Rimuovi posizionamento fixed su mobile */
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    
    /* Stili mobile */
    padding: 12px 24px;
    font-size: 14px;
    margin: 15px auto;
    display: block;
    width: 90%;
    max-width: 300px;
}
    
    .phase-overlay {
        padding: 20px;
    }
    
    .phase-name {
        font-size: 28px;
    }
    
    #start-screen {
        padding: 20px;
    }
    
    #start-game-btn {
        font-size: 16px;
        padding: 15px 40px;
    }
    
    .setup-rules {
        font-size: 11px;
        padding: 15px;
    }
    
    /* Mini cards - Font più piccolo */
    .mini-card-name {
        font-size: 8px;
        letter-spacing: 0.2px;
    }
    
    .mini-stat-mh,
    .mini-stat-anno {
        font-size: 9px;
        padding: 2px 5px;
    }
}

/* ========================================
   MOBILE LANDSCAPE
   ======================================== */

@media (max-width: 900px) and (orientation: landscape) {
    
    #player-zone {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    #center-area {
        flex: 1;
        min-width: 50%;
    }
    
    #preview-row-mobile {
        grid-template-columns: 70px 150px 70px;
    }
    
    #card-preview-area {
        width: 150px;
        height: 150px;
    }
    
    .preview-card-webp {
        max-width: 130px;
        max-height: 130px;
    }
}

/* ========================================
   MOBILE VERY SMALL
   ======================================== */

@media (max-width: 400px) {
    
    .hand-card,
    .card-slot {
        width: 65px;
        height: 91px;
    }
    
    .deck-stack {
        width: 60px;
        height: 84px;
    }
    
    #card-preview-area {
        width: 160px;
        height: 160px;
    }
    
    .preview-card-webp {
        max-width: 140px;
        max-height: 140px;
    }
    
    #hand-area {
        gap: 5px;
    }
}