/* ================================================= */
/* 📱 OPTIMISATIONS MOBILE SUPPLÉMENTAIRES */
/* ================================================= */

/* Désactiver le zoom sur les inputs pour iOS */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important; /* Évite le zoom automatique iOS */
    }
}

/* Touch-friendly : Augmenter la zone de clic sur mobile */
@media (max-width: 768px) {
    button,
    .game-card,
    .music-card,
    .playlist-card,
    .profile,
    #gear,
    #musicBtn {
        -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
        touch-action: manipulation; /* Désactive le double-tap zoom */
    }
}

/* Optimiser le scrolling sur mobile */
@media (max-width: 768px) {
    body {
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
    }
    
    .modal-overlay {
        -webkit-overflow-scrolling: touch;
    }
    
    .profile-modal,
    .music-modal {
        -webkit-overflow-scrolling: touch;
    }
}

/* Améliorer les performances des animations sur mobile */
@media (max-width: 768px) {
    * {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .game-card,
    .music-card,
    .profile-modal {
        will-change: transform;
    }
}

/* Éviter que le texte soit sélectionnable sur mobile (meilleure UX) */
@media (max-width: 768px) {
    .game-card,
    .music-card,
    button,
    .profile,
    #gear,
    .tab {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

/* Mode paysage sur mobile */
@media (max-width: 768px) and (orientation: landscape) {
    header {
        padding: 8px 15px;
    }
    
    .left h1 {
        font-size: 24px;
    }
    
    .profile-modal,
    .music-modal {
        max-height: 95vh;
        padding: 20px 15px;
    }
}

/* Optimisations spécifiques iPhone X et plus récents (notch) */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    header {
        padding-top: max(15px, env(safe-area-inset-top));
    }
    
    .mini-player {
        bottom: max(20px, env(safe-area-inset-bottom));
        left: max(20px, env(safe-area-inset-left));
        right: max(20px, env(safe-area-inset-right));
    }
}

/* Améliorer la lisibilité des petits textes sur mobile */
@media (max-width: 480px) {
    .game-description,
    .game-stat-label,
    .music-title,
    .form-group label {
        line-height: 1.5;
        letter-spacing: 0.3px;
    }
}

/* Focus visible pour l'accessibilité */
@media (max-width: 768px) {
    button:focus,
    input:focus,
    .game-card:focus {
        outline: 2px solid #667eea;
        outline-offset: 2px;
    }
}

/* Empêcher le débordement horizontal */
@media (max-width: 768px) {
    html {
        overflow-x: hidden;
    }
    
    body {
        overflow-x: hidden;
        position: relative;
    }
}

/* Optimiser les images pour mobile */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Améliorer les modales sur très petit écran */
@media (max-width: 360px) {
    .profile-modal,
    .music-modal {
        padding: 15px 10px;
        width: 98%;
    }
    
    .modal-overlay {
        padding: 5px;
    }
}

/* Animation de chargement pour mobile (optionnel) */
@media (max-width: 768px) {
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .game-card {
        animation: fadeIn 0.3s ease-out;
    }
}

/* Améliorer les hover states sur mobile (remplacer par active) */
@media (max-width: 768px) and (hover: none) {
    .game-card:hover {
        transform: none;
    }
    
    .game-card:active {
        transform: scale(0.98);
    }
    
    button:hover {
        transform: none;
    }
    
    button:active {
        transform: scale(0.95);
    }
}