/* responsive.css */

/* ==========================================================================
   1. MODO PORTRAIT: Si el celular está en vertical, avisamos al usuario
   ========================================================================== */
   @media screen and (max-width: 900px) and (orientation: portrait) {
    body::before {
      content: "📱🔄\A\A ¡Para una mejor experiencia, gira tu dispositivo en posición horizontal!";
      white-space: pre-wrap;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: linear-gradient(135deg, #e0f2fe, #bae6fd);
      color: #0369a1;
      font-family: 'Fredoka', sans-serif;
      font-size: 22px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 30px;
      box-sizing: border-box;
      z-index: 99999;
    }
    
    /* Ocultamos el resto del juego mientras esté en vertical */
    body > * {
      display: none !important;
    }
  }
  
  /* ==========================================================================
     2. MODO LANDSCAPE: Ajustes generales para el menú principal e interfaces comunes
     ========================================================================== */
  @media screen and (max-width: 900px) and (orientation: landscape) {
    body {
      padding: 10px !important;
    }
    
    h1 {
      font-size: 24px !important;
      margin-bottom: 15px !important;
    }
  
    p.subtitle {
      font-size: 15px !important;
      margin-bottom: 15px !important;
    }
  
    /* Ajuste automático para cualquier contenedor tipo Grid en el menú */
    .grid {
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
      gap: 12px !important;
    }
  
    /* Ajuste automático para tarjetas generales */
    .card {
      padding: 10px !important;
    }
  
    .icono {
      font-size: 2.5em !important;
    }
  }
  
  /* ==========================================================================
     3. MODO LANDSCAPE ESPECÍFICO: Ajustes finos para las pantallas de juego (Teorías)
     ========================================================================== */
  @media screen and (max-width: 900px) and (orientation: landscape) {
    
    /* Compactamos el header para que no se coma el espacio vertical */
    header {
      padding: 10px 15px !important;
      border-radius: 0 0 20px 20px !important;
      box-shadow: 0 4px 0 #0284c7 !important;
    }
  
    header h1 {
      font-size: 1.6em !important;
    }
  
    header .autores {
      font-size: 0.75em !important;
      margin-top: 2px !important;
      line-height: 1.2 !important;
    }
  
    /* Reacomodamos el botón regresar para que no estorbe */
    .btn-regresar {
      position: absolute !important;
      left: 15px !important;
      top: 10px !important;
      padding: 6px 14px !important;
      font-size: 12px !important;
      box-shadow: 0 3px 0 #b91c1c !important;
    }
  
    /* Reducimos márgenes del contenedor de tarjetas */
    .contenedor {
      padding: 15px 10px !important;
      gap: 12px !important;
      max-width: 100% !important;
    }
  
    /* Transformamos las tarjetas en elementos 100% fluidos alineados en una fila */
    .card {
      width: calc(20% - 10px) !important; 
      min-width: 110px !important; 
      min-height: 165px !important; 
      padding: 10px 8px !important;
      border-radius: 20px !important;
      border-width: 3px !important;
      box-shadow: 0 6px 0 #cbd5e1 !important;
    }
    
    .card:active {
      transform: translateY(3px) !important;
      box-shadow: 0 3px 0 #cbd5e1 !important;
    }
  
    /* Redimensionamos las imágenes a escala móvil */
    .card img {
      width: 75px !important;
      height: 75px !important;
    }
  
    /* Ajustamos el tamaño del texto de las frases infantiles */
    .card p {
      margin: 8px 0 0 0 !important;
      font-size: 11px !important;
      line-height: 1.2 !important;
    }
  
    /* Encogemos el botón interactivo de Continuar */
    .btn-continuar {
      margin: 5px auto 15px auto !important;
      padding: 10px 40px !important;
      font-size: 18px !important;
      box-shadow: 0 5px 0 #ca8a04 !important;
    }
  }