/* ==================== RESPONSIVE STYLES FOR CONSOLES & MOBILE ==================== */
/* Optimizado para Steam Deck (1280x800), ROG Ally (1920x1080), móviles y tablets */

/* ==================== BREAKPOINTS ==================== */
/* 
  - 1920px+  : Desktop large
  - 1280px   : Steam Deck horizontal, tablets landscape
  - 1024px   : Tablets landscape
  - 800px    : Steam Deck vertical, móviles landscape
  - 768px    : Tablets portrait
  - 480px    : Móviles portrait
  - 375px    : Móviles pequeños
*/

/* ==================== BASE IMPROVEMENTS ==================== */
* {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html {
  font-size: 16px; /* Base font size */
}

body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* ==================== STEAM DECK & CONSOLES PORTÁTILES (1280x800) ==================== */
@media (max-width: 1280px) {
  .home-container {
    max-width: 100%;
    padding: 16px;
  }

  .home-content {
    gap: 48px;
  }

  /* Featured Carousel - Optimizado para Steam Deck */
  .featured-carousel-container {
    height: 420px;
    border-radius: 16px;
  }

  .carousel-slide {
    padding: 48px 40px;
  }

  .slide-content {
    max-width: 550px;
  }

  .slide-title {
    font-size: 2.25rem;
    line-height: 1.2;
  }

  .slide-description {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Platform Carousels */
  .games-scroll {
    gap: 16px;
    padding: 8px 4px;
  }

  .game-card-home {
    flex: 0 0 220px;
    min-width: 220px;
  }

  .game-card-image-home {
    height: 280px;
  }

  /* Classics Grid */
  .classics-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }

  /* Section Headers */
  .section-title-home {
    font-size: 1.625rem;
  }

  .section-icon-home {
    font-size: 1.625rem;
  }

  /* Botones más grandes para touch */
  .slide-btn,
  .game-card-btn-home {
    min-height: 44px;
    padding: 12px 24px;
    font-size: 0.95rem;
  }

  /* Navegación del carrusel */
  .carousel-nav {
    bottom: 24px;
    right: 24px;
  }

  .nav-dot {
    width: 12px;
    height: 12px;
  }
}

/* ==================== TABLETS LANDSCAPE (1024px) ==================== */
@media (max-width: 1024px) {
  .home-container {
    padding: 14px;
  }

  .home-content {
    gap: 40px;
  }

  .featured-carousel-container {
    height: 380px;
  }

  .carousel-slide {
    padding: 40px 32px;
  }

  .slide-title {
    font-size: 2rem;
  }

  .slide-description {
    font-size: 0.95rem;
  }

  /* Cards más pequeñas */
  .game-card-home {
    flex: 0 0 200px;
    min-width: 200px;
  }

  .game-card-image-home {
    height: 260px;
  }

  .classics-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
  }

  .classic-card-home {
    height: 280px;
  }
}

/* ==================== STEAM DECK VERTICAL & TABLETS (800px) ==================== */
@media (max-width: 800px) {
  .home-container {
    padding: 12px;
  }

  .home-content {
    gap: 36px;
  }

  /* Featured Carousel adaptado */
  .featured-carousel-container {
    height: 340px;
    border-radius: 12px;
  }

  .carousel-slide {
    padding: 32px 24px;
  }

  .slide-overlay {
    background: linear-gradient(90deg, rgba(10, 10, 15, 0.92) 0%, rgba(10, 10, 15, 0.75) 60%, rgba(10, 10, 15, 0.4) 100%);
  }

  .slide-content {
    max-width: 100%;
    width: 100%;
  }

  .slide-platform-badge {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  .slide-title {
    font-size: 1.75rem;
    margin-bottom: 12px;
  }

  .slide-description {
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .slide-meta {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }

  .slide-actions {
    flex-direction: column;
    gap: 10px;
  }

  .slide-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 1rem;
  }

  /* Platform Carousels */
  .platform-carousel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .see-all-link {
    align-self: flex-start;
  }

  .games-scroll {
    gap: 14px;
    padding: 6px 2px;
    scrollbar-width: thin;
  }

  .game-card-home {
    flex: 0 0 180px;
    min-width: 180px;
  }

  .game-card-image-home {
    height: 240px;
  }

  .game-card-title-home {
    font-size: 0.95rem;
  }

  /* Classics Grid */
  .classics-section {
    margin-bottom: 20px;
  }

  .classics-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .classics-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }

  .classic-card-home {
    height: 260px;
  }

  .classic-card-title-home {
    font-size: 0.9rem;
  }

  /* Section Headers */
  .section-title-home {
    font-size: 1.5rem;
  }

  .section-icon-home {
    font-size: 1.5rem;
  }

  /* Navegación del carrusel */
  .carousel-nav {
    bottom: 16px;
    right: 16px;
    gap: 8px;
  }

  .nav-dot {
    width: 10px;
    height: 10px;
  }

  /* Refresh button */
  .refresh-classics-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}

/* ==================== MÓVILES LANDSCAPE & PEQUEÑOS (768px) ==================== */
@media (max-width: 768px) {
  .home-container {
    padding: 10px;
  }

  .home-content {
    gap: 32px;
  }

  .featured-carousel-container {
    height: 300px;
  }

  .carousel-slide {
    padding: 24px 20px;
  }

  .slide-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .slide-description {
    font-size: 0.85rem;
    -webkit-line-clamp: 2;
  }

  .slide-meta {
    gap: 10px;
    margin-bottom: 14px;
  }

  .slide-meta-item {
    font-size: 0.85rem;
  }

  .slide-btn {
    padding: 12px 20px;
    font-size: 0.95rem;
  }

  /* Cards */
  .game-card-home {
    flex: 0 0 160px;
    min-width: 160px;
  }

  .game-card-image-home {
    height: 220px;
  }

  .game-card-title-home {
    font-size: 0.9rem;
  }

  .game-card-platform-home {
    font-size: 0.8rem;
  }

  .game-card-btn-home {
    padding: 10px 16px;
    font-size: 0.85rem;
  }

  /* Classics Grid */
  .classics-grid {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 10px;
  }

  .classic-card-home {
    height: 240px;
  }

  /* Section Headers */
  .section-header-home {
    gap: 10px;
    margin-bottom: 16px;
  }

  .section-title-home {
    font-size: 1.375rem;
  }

  .section-icon-home {
    font-size: 1.375rem;
  }
}

/* ==================== MÓVILES PORTRAIT (480px) ==================== */
@media (max-width: 480px) {
  .home-container {
    padding: 8px;
  }

  .home-content {
    gap: 28px;
  }

  /* Featured Carousel - Compacto */
  .featured-carousel-container {
    height: 280px;
    border-radius: 10px;
  }

  .carousel-slide {
    padding: 20px 16px;
  }

  .slide-platform-badge {
    padding: 5px 10px;
    font-size: 0.75rem;
    margin-bottom: 8px;
  }

  .slide-title {
    font-size: 1.25rem;
    margin-bottom: 8px;
    line-height: 1.3;
  }

  .slide-description {
    font-size: 0.8rem;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    margin-bottom: 12px;
  }

  .slide-meta {
    gap: 8px;
    margin-bottom: 12px;
  }

  .slide-meta-item {
    font-size: 0.75rem;
  }

  .slide-actions {
    gap: 8px;
  }

  .slide-btn {
    padding: 10px 16px;
    font-size: 0.875rem;
    min-height: 40px;
  }

  /* Platform Carousels - Scroll horizontal optimizado */
  .games-scroll {
    gap: 10px;
    padding: 4px 0;
    scroll-padding-left: 8px;
  }

  .game-card-home {
    flex: 0 0 140px;
    min-width: 140px;
  }

  .game-card-image-home {
    height: 200px;
    border-radius: 8px;
  }

  .game-card-content-home {
    padding: 10px;
  }

  .game-card-title-home {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 6px;
  }

  .game-card-platform-home {
    font-size: 0.75rem;
    margin-bottom: 8px;
  }

  .game-card-btn-home {
    padding: 8px 12px;
    font-size: 0.8rem;
    min-height: 36px;
  }

  /* Classics Grid - 2 columnas */
  .classics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .classic-card-home {
    height: 220px;
  }

  .classic-card-image-home {
    height: 140px;
  }

  .classic-card-content-home {
    padding: 8px;
  }

  .classic-card-title-home {
    font-size: 0.825rem;
    margin-bottom: 4px;
  }

  /* Section Headers */
  .section-header-home {
    gap: 8px;
    margin-bottom: 14px;
  }

  .section-title-home {
    font-size: 1.25rem;
  }

  .section-icon-home {
    font-size: 1.25rem;
  }

  .platform-carousel-header,
  .classics-header {
    margin-bottom: 12px;
  }

  .see-all-link,
  .refresh-classics-btn {
    font-size: 0.85rem;
    padding: 8px 16px;
  }

  /* Carousel Navigation */
  .carousel-nav {
    bottom: 12px;
    right: 12px;
    gap: 6px;
  }

  .nav-dot {
    width: 8px;
    height: 8px;
  }

  /* Loading states */
  .carousel-loading,
  .grid-empty {
    padding: 40px 20px;
  }

  .spinner {
    width: 40px;
    height: 40px;
  }
}

/* ==================== MÓVILES PEQUEÑOS (375px) ==================== */
@media (max-width: 375px) {
  .home-container {
    padding: 6px;
  }

  .featured-carousel-container {
    height: 260px;
  }

  .carousel-slide {
    padding: 16px 12px;
  }

  .slide-title {
    font-size: 1.125rem;
  }

  .slide-description {
    font-size: 0.75rem;
  }

  .game-card-home {
    flex: 0 0 130px;
    min-width: 130px;
  }

  .game-card-image-home {
    height: 180px;
  }

  .classic-card-home {
    height: 200px;
  }

  .classic-card-image-home {
    height: 120px;
  }

  .section-title-home {
    font-size: 1.125rem;
  }
}

/* ==================== LANDSCAPE ORIENTATION ==================== */
@media (max-height: 600px) and (orientation: landscape) {
  .featured-carousel-container {
    height: 320px;
  }

  .carousel-slide {
    padding: 24px 32px;
  }

  .slide-title {
    font-size: 1.5rem;
  }

  .slide-description {
    display: none; /* Ocultar en landscape muy bajo */
  }

  .slide-meta {
    margin-bottom: 12px;
  }

  .home-content {
    gap: 24px;
  }
}

/* ==================== TOUCH IMPROVEMENTS ==================== */
@media (hover: none) and (pointer: coarse) {
  /* Áreas táctiles más grandes */
  .slide-btn,
  .game-card-btn-home,
  .refresh-classics-btn,
  .see-all-link {
    min-height: 44px;
    padding: 12px 20px;
  }

  /* Feedback visual en toque */
  .slide-btn:active,
  .game-card-btn-home:active,
  .game-card-home:active,
  .classic-card-home:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  /* Eliminar hover effects */
  .game-card-home:hover,
  .classic-card-home:hover {
    transform: none;
  }

  /* Smooth scrolling para carruseles */
  .games-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==================== HIGH DPI DISPLAYS (Retina, etc) ==================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .slide-title,
  .section-title-home,
  .game-card-title-home {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ==================== DARK MODE ADJUSTMENTS ==================== */
@media (prefers-color-scheme: dark) {
  .carousel-slide {
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
  }

  .slide-overlay {
    background: linear-gradient(90deg, rgba(5, 5, 10, 0.95) 0%, rgba(5, 5, 10, 0.75) 50%, rgba(5, 5, 10, 0.3) 100%);
  }
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */
.carousel-slide,
.game-card-home,
.classic-card-home {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reducir animaciones en dispositivos de bajo rendimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .carousel-slide {
    transition: none;
  }
}

/* ==================== PRINT STYLES ==================== */
@media print {
  .carousel-nav,
  .slide-actions,
  .game-card-btn-home,
  .refresh-classics-btn {
    display: none;
  }

  .home-container {
    max-width: 100%;
  }
}