/* Optimisations mobiles pour résolutions spécifiques */
/* Résolutions ciblées: 390x844, 430x932, 414x896, 800x600, 393x852, 412x915 */

/* SMOOTH MOMENTUM SCROLLING - Effet de glissement */
* {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}

/* Containers avec scroll smooth */
.overflow-y-auto,
.overflow-x-auto,
.overflow-auto,
[style*="overflow-y: auto"],
[style*="overflow-y: scroll"],
[style*="overflow-x: auto"],
[style*="overflow-x: scroll"] {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* Messages container avec momentum */
.messages-container,
.chat-container,
.scroll-container {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  scroll-snap-type: y proximity;
}

/* Smooth scroll sur tous les appareils */
@supports (scroll-behavior: smooth) {
  html,
  body,
  * {
    scroll-behavior: smooth;
  }
}

/* Base mobile optimizations (tous les petits écrans) */
@media (max-width: 450px) {
  /* Réduction globale des paddings */
  .container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* TopBar optimizations */
  .top-bar-container {
    padding: 0.25rem !important;
    gap: 0.25rem !important;
  }

  /* Réduction de la taille des boutons */
  button {
    font-size: 0.875rem !important;
    padding: 0.375rem 0.75rem !important;
  }

  /* ActionInput optimizations */
  .action-input-container {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }

  /* Input text plus petit */
  input[type="text"],
  textarea {
    font-size: 0.875rem !important;
    padding: 0.5rem !important;
  }

  /* Stats display compact */
  .stats-grid {
    gap: 0.5rem !important;
  }

  .stat-card {
    padding: 0.75rem !important;
  }

  .stat-value {
    font-size: 1.5rem !important;
  }

  .stat-label {
    font-size: 0.625rem !important;
  }

  /* Message bubbles */
  .chat-bubble {
    max-width: 90% !important;
    font-size: 0.875rem !important;
    padding: 0.75rem !important;
  }

  /* Portrait et images */
  .character-portrait {
    width: 60px !important;
    height: 60px !important;
  }

  /* Scene images */
  .scene-image {
    max-height: 200px !important;
  }
}

/* iPhone 12/13 (390x844) et similaires (393x852) */
@media (min-width: 390px) and (max-width: 395px) and (min-height: 844px) and (max-height: 852px) {
  /* Ajustements spécifiques pour cette résolution */
  .game-container {
    padding: 0.5rem !important;
  }

  /* TopBar très compact */
  .stat-bar {
    height: 1rem !important;
    font-size: 0.7rem !important;
  }

  /* Action input optimisé */
  .action-input-wrapper {
    padding: 0.5rem !important;
  }

  /* Messages plus compacts */
  .message-container {
    margin-bottom: 0.5rem !important;
  }

  /* Réduction des margins entre sections */
  .section-spacing {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
}

/* iPhone 6/7/8 Plus (414x896) et similaires (412x915) */
@media (min-width: 412px) and (max-width: 415px) and (min-height: 896px) and (max-height: 915px) {
  /* Légèrement plus d'espace que les plus petits */
  .game-container {
    padding: 0.75rem !important;
  }

  /* TopBar avec plus de respiration */
  .top-bar-container {
    padding: 0.5rem !important;
  }

  /* Action input */
  .action-input-container {
    padding: 0.75rem !important;
  }

  /* Stats display */
  .stat-card {
    padding: 1rem !important;
  }

  .stat-value {
    font-size: 1.75rem !important;
  }
}

/* iPhone 14 Pro Max (430x932) */
@media (min-width: 430px) and (max-width: 431px) and (min-height: 932px) {
  /* Plus grand écran, plus d'espace */
  .game-container {
    padding: 1rem !important;
  }

  /* Garde les éléments proportionnés */
  .character-portrait {
    width: 70px !important;
    height: 70px !important;
  }

  /* Scene images un peu plus grandes */
  .scene-image {
    max-height: 250px !important;
  }

  /* Stats */
  .stat-value {
    font-size: 2rem !important;
  }
}

/* Écran 800x600 (ratio différent) */
@media (min-width: 800px) and (max-width: 800px) and (max-height: 600px) {
  /* Layout horizontal optimisé */
  .game-container {
    display: flex;
    flex-direction: row !important;
  }

  /* TopBar en sidebar */
  .top-bar-container {
    flex-direction: column !important;
    width: 200px !important;
  }

  /* Zone de jeu compacte verticalement */
  .scene-image {
    max-height: 150px !important;
  }

  /* Messages en scroll */
  .messages-container {
    max-height: 400px !important;
    overflow-y: auto !important;
  }

  /* Action input au bottom */
  .action-input-wrapper {
    position: fixed !important;
    bottom: 0 !important;
    left: 200px !important;
    right: 0 !important;
  }
}

/* Optimisations générales pour tous les mobiles */
@media (max-width: 640px) {
  /* Touch targets plus grands */
  button,
  a,
  .clickable {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Scroll smooth */
  html {
    scroll-behavior: smooth;
  }

  /* Prévenir le zoom sur les inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Images responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Modals full screen sur mobile */
  .modal-content {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* Menu mobile optimisé */
  .mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
  }

  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden !important;
  }

  /* Full width containers */
  .w-full-mobile {
    width: 100% !important;
  }

  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }
}

/* Landscape mode optimizations pour petits écrans */
@media (max-height: 450px) and (orientation: landscape) {
  /* Réduire les hauteurs fixes */
  .scene-image {
    max-height: 120px !important;
  }

  /* TopBar plus compact */
  .top-bar-container {
    padding: 0.25rem !important;
    min-height: 40px !important;
  }

  /* Messages très compacts */
  .chat-bubble {
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
  }

  /* Action input minimal */
  .action-input-container {
    padding: 0.25rem !important;
  }
}

/* Optimisations pour les hautes résolutions mobiles */
@media (min-width: 390px) and (max-width: 450px) and (min-height: 844px) {
  /* Meilleure utilisation de la hauteur */
  .messages-container {
    max-height: 500px !important;
  }

  /* Scene image peut être plus grande */
  .scene-image {
    max-height: 300px !important;
  }

  /* Plus d'espace pour le contenu */
  .content-area {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Dark mode adjustments pour mobile */
@media (max-width: 640px) and (prefers-color-scheme: dark) {
  /* Contraste amélioré sur petits écrans */
  .text-gray-400 {
    color: #d1d5db !important;
  }

  .text-gray-500 {
    color: #e5e7eb !important;
  }

  /* Backgrounds plus sombres */
  .bg-slate-900 {
    background-color: #0f172a !important;
  }
}

/* Performance optimizations pour mobile */
@media (max-width: 640px) {
  /* Désactiver les animations complexes sur mobile */
  .complex-animation {
    animation: none !important;
    transition: none !important;
  }

  /* Simplifier les blurs */
  .backdrop-blur-xl {
    backdrop-filter: blur(8px) !important;
  }

  /* Réduire les shadows pour performance */
  .shadow-2xl {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
  }
}

/* Safe areas pour iPhone avec notch */
@supports (padding: max(0px)) {
  @media (max-width: 450px) {
    .top-bar-container {
      padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
    }

    .action-input-wrapper {
      padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
    }

    .mobile-menu {
      padding-top: max(1rem, env(safe-area-inset-top)) !important;
      padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }
  }
}