/**
 * Corrections mobiles forcées avec !important
 * Pour contourner les problèmes de cache et d'optimisation
 */

/* Menu du bas - Forcer les marges correctes */
@media (max-width: 600px) {
  .modern-bottom-nav {
    padding: 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  
  /* Bouton actif - Forcer la suppression de la surélévation */
  .modern-nav-item.active {
    transform: none !important;
    transform: translateY(0) !important;
  }
  
  /* Hover uniquement si pas actif */
  .modern-nav-item:hover:not(.active) {
    /* transform: translateY(-2px) !important; - Supprimé pour éviter le déplacement du texte */
    transform: none !important;
  }
  
  /* Padding uniforme pour les items */
  .modern-nav-item {
    padding: 6px 8px !important;
  }
}

/* Flashcards - Forcer les hauteurs uniformes */
.sg-card {
  min-height: 220px !important;
  height: 220px !important;
}

@media (max-width: 600px) {
  .sg-card {
    min-height: 200px !important;
    height: 200px !important;
  }
}

.sg-card-front,
.sg-card-back {
  height: 100% !important;
  padding: 20px !important;
}

@media (max-width: 600px) {
  .sg-card-front,
  .sg-card-back {
    padding: 15px !important;
  }
}

/* Images flashcards - Forcer les tailles */
.sg-card-front img {
  max-width: 180px !important;
  max-height: 150px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 600px) {
  .sg-card-front img {
    max-width: 150px !important;
    max-height: 130px !important;
  }
}

/* Avatars dans le classement - Forcer les tailles uniformes */
.leaderboard .player-avatar,
.leaderboard .avatar-preview,
.leaderboard .player-avatar-display,
.leaderboard .player-avatar-display img {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

@media (max-width: 600px) {
  .leaderboard .player-avatar,
  .leaderboard .avatar-preview,
  .leaderboard .player-avatar-display,
  .leaderboard .player-avatar-display img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
}

/* Forcer le display block pour les avatars */
.leaderboard .player-avatar {
  display: block !important;
}

/* Navigation flashcards - Rapprocher des cartes */
.sg-navigation {
  margin-top: 5px !important;
}

/* Fix pour la zone cliquable invisible - SUPPRIMÉ car causait un problème de centrage */
/* .sg-card-front {
  min-width: auto !important;
} */

/* Fix Firefox mobile menu du bas */
body.firefox-mobile .modern-bottom-nav {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.15) 100%
  ) !important;
  backdrop-filter: blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Force l'ordre de chargement des styles */
.sg-wrapper * {
  box-sizing: border-box !important;
}



/* Fix PWA layout */
@media (display-mode: standalone) {
  /* Forcer la hauteur correcte dans la PWA */
  .sg-wrapper {
    height: 100vh !important;
    height: -webkit-fill-available !important;
  }
  
  /* S'assurer que le contenu reste dans les limites */
  .main-section.active {
    max-height: calc(100vh - 110px) !important; /* Auth bar + tab menu */
    overflow-y: auto !important;
  }
  
  /* Transition douce */
  .sg-wrapper,
  .sg-container,
  .modern-bottom-nav {
    transition: all 0.3s ease !important;
  }
}

/* Forcer le menu du bas à rester visible et bien positionné */
@media (max-width: 600px) {
  .modern-bottom-nav {
    transform: translateZ(0) !important; /* Force GPU acceleration */
    will-change: transform !important;
  }
  
  /* Respect des safe areas */
  .modern-bottom-nav {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  
  /* Maintien du style glassmorphism */
  .modern-bottom-nav {
    /* Style glassmorphism */
    background: 
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.15) 100%
      ) !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 20px !important;
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.1),
      0 2px 8px rgba(0, 0, 0, 0.04),
      inset 0 1px 1px 0 rgba(255, 255, 255, 0.45) !important;
    
    /* Position et dimensions */
    width: calc(100% - 20px) !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    padding: 10px !important;
    padding-bottom: 10px !important;
  }
}