/* ==================== SCROLL ESSENTIALS - LIMPIO Y SIN CONFLICTOS ==================== */
/* Versión minimalista que combina solo los fixes necesarios */

/* ==================== 1. CONFIGURACIÓN BÁSICA DE SCROLL ==================== */

html {
  height: 100%;
  overflow: hidden;
  scroll-behavior: auto; /* NO smooth para evitar scroll lento */
}

body {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==================== 2. HEADER STICKY (SIN CONFLICTOS) ==================== */

.header,
.modern-header,
#modernHeader {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  contain: none !important; /* ⭐ CRÍTICO: Permite que dropdown funcione */
}

/* ==================== 3. FIX DROPDOWN SETTINGS ==================== */

.settings-dropdown {
  position: relative;
  z-index: 1001;
}

.settings-dropdown-menu {
  position: absolute;
  z-index: 1002 !important;
  pointer-events: none;
}

.settings-dropdown-menu.active {
  pointer-events: auto;
}

/* ==================== 4. CONTENEDORES PRINCIPALES ==================== */

.app-container,
.main-content-wrapper,
.main-content,
.premium-content-area {
  overflow: visible;
  height: auto;
}

/* ==================== 5. SIDEBAR SCROLL ==================== */

.sidebar {
  overflow: hidden;
}

.sidebar-content {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 80px);
}

/* ==================== 6. MODALES CON SCROLL ==================== */

.modal-content-wrapper {
  overflow-y: auto !important;
  max-height: 90vh !important;
  -webkit-overflow-scrolling: touch !important;
}

body.modal-open {
  overflow: hidden !important;
}

body.modal-open .modal-content-wrapper {
  overflow-y: auto !important;
}

/* ==================== 7. FIX ROTATEGLOW (AUTO-SCROLL) ==================== */

.app-container::before {
  display: none !important; /* Prevenir auto-scroll de la animación */
}

/* ==================== 8. FOOTER ==================== */

.modern-footer,
footer {
  position: relative;
  overflow: hidden;
  margin-top: 60px;
}

/* ==================== 9. MOBILE ==================== */

@media (max-width: 768px) {
  body {
    -webkit-overflow-scrolling: touch;
  }
  
  .modal-content-wrapper {
    max-height: 95vh !important;
  }
}

/* ==================== 10. PERFORMANCE ==================== */

* {
  scroll-behavior: auto !important; /* Forzar auto en todo */
}

.game-card,
.platform-card,
.classic-card {
  contain: layout style;
  content-visibility: auto;
}