/* ========================================
   AUDIO CONTROLS - SPOSTATI PIÙ IN ALTO
   ======================================== */

@media (max-width: 768px) {
    
    #audio-controls {
        /* ⭐ SPOSTATO PIÙ IN ALTO */
        position: fixed !important;
        bottom: auto !important;
        top: 70px !important;  /* Sotto la topbar */
        right: 10px !important;
        
        /* Layout compatto */
        padding: 8px 12px !important;
        gap: 8px !important;
        
        /* Z-index */
        z-index: 9000 !important;
        
        /* Visual */
        background: rgba(0, 0, 0, 0.8) !important;
        border-radius: 8px !important;
        border: 2px solid rgba(124, 58, 237, 0.5) !important;
    }
    
    #mute-btn {
        width: 35px !important;
        height: 35px !important;
        font-size: 18px !important;
        border-radius: 6px !important;
    }
    
    #volume-slider {
        width: 80px !important;
    }
    
    #volume-label {
        font-size: 11px !important;
        color: #fff !important;
    }
}

/* Desktop - mantieni bottom-right */
@media (min-width: 769px) {
    #audio-controls {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
    }
}
    
    /* ========================================
       ACTION BUTTONS - Ora statici nel layout!
       Rimossi stili fixed, usano action-buttons.css
       ======================================== */
    
    /* ========================================
       FULLSCREEN & INSTALL BUTTONS - Top
       ======================================== */
    
    #fullscreen-btn {
        top: 10px !important;
        right: 150px !important; /* A sinistra dei controlli audio */
        width: 45px !important;
        height: 45px !important;
    }
    
    #install-btn {
        top: 10px !important;
        right: 200px !important; /* A sinistra del fullscreen */
        width: 45px !important;
        height: 45px !important;
    }
    
    /* ========================================
       UPDATE TOAST - Ottimizzato mobile
       ======================================== */
    
    #update-toast {
        bottom: 80px !important;
        max-width: 90% !important;
        padding: 15px 20px !important;
    }
    
    #update-toast button {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    
    /* ========================================
       ADJUSTMENTS PER LANDSCAPE
       ======================================== */
    
    @media (max-height: 500px) and (orientation: landscape) {
        
        #audio-controls {
            padding: 6px 10px !important;
        }
        
        #mute-btn {
            width: 30px !important;
            height: 30px !important;
            font-size: 16px !important;
        }
        
        #volume-slider {
            width: 60px !important;
        }
    }
}

/* ========================================
   TABLET (768px - 1024px)
   ======================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    
    /* Audio controls: bottom-right ma più compatti */
    #audio-controls {
        padding: 12px !important;
        gap: 8px !important;
    }
    
    /* Trasferisci mood: mantieni right ma più in alto */
    #mood-transfer-btn {
        bottom: 140px !important;
        right: 20px !important;
        padding: 14px 22px !important;
        font-size: 17px !important;
    }
}

/* ========================================
   ANIMAZIONI SMOOTH
   ======================================== */

@media (max-width: 768px) {
    
    #audio-controls,
    #mood-transfer-btn,
    .next-phase-button {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Hover effects disabilitati su mobile (touch) */
    #audio-controls:hover,
    #mood-transfer-btn:hover,
    .next-phase-button:hover {
        transform: none !important;
    }
    
    /* Active states per feedback touch */
    #mood-transfer-btn:active {
        transform: translateX(-50%) scale(0.95) !important;
    }
    
    .next-phase-button:active {
        transform: translateX(-50%) scale(0.95) !important;
    }
    
    /* ⭐ FIX: Rimuovi translateX dal next-phase-button (ora è statico) */
    .next-phase-button:active {
    transform: scale(0.95) !important;  /* <-- CAMBIATO: rimosso translateX(-50%) */
}

/* ========================================
   SPACING ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    
    /* Assicura che i bottoni non si sovrappongano con elementi di gioco */
    #field-container {
        padding-top: 60px; /* Spazio per audio controls in alto */
        padding-bottom: 80px; /* Spazio per next phase in basso */
    }
    
    /* Zona amici: margine bottom per trasferisci mood */
    .friend-slots,
    .amici-row {
        margin-bottom: 60px !important;
    }
}