/* =============================================
   RESPONSIVO.CSS — Ajustes mobile, landscape, desktop
   ============================================= */

/* ---- LANDSCAPE MOBILE ---- */
@media (max-height: 500px) and (orientation: landscape) {
  .detalhes-capa-wrapper { aspect-ratio: 21/9; }
  .pagina-imagem-wrapper { aspect-ratio: 21/9; }

  .leitura-navegacao {
    padding: 12px 16px 20px;
  }
}

/* ---- TABLET / TELAS MÉDIAS ---- */
@media (min-width: 480px) {
  .historias-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .selos-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .detalhes-acoes {
    flex-direction: row;
    justify-content: center;
  }

  .detalhes-acoes .btn {
    flex: 1;
    max-width: 200px;
  }
}

/* ---- TABLET GRANDE ---- */
@media (min-width: 680px) {
  .historias-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .selos-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .quiz-corpo {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
  }
}

/* ---- DESKTOP ---- */
@media (min-width: 900px) {
  #app {
    max-width: 460px;
    margin: 0 auto;
    box-shadow: 0 0 80px rgba(0,0,0,0.5);
    min-height: 100vh;
    position: relative;
  }

  body {
    background: #0A1828;
  }

  .historias-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .selos-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Layout de livro para leitura */
  .tela-leitura .pagina-imagem-wrapper {
    border-radius: var(--raio-grande);
    margin: 12px 12px 0;
  }

  /* Detalhes com capa ao lado */
  .detalhes-capa-wrapper {
    aspect-ratio: 16/8;
  }
}

/* ---- AJUSTES DE ACESSIBILIDADE ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- TIPOGRAFIA FLUIDA ADICIONAL ---- */
@media (min-width: 380px) {
  .card-historia-nome { font-size: 0.9rem; }
}

/* ---- SAFE AREA (NOTCH/BARRA INFERIOR) ---- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .detalhes-acoes {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }

  .leitura-navegacao {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }

  .conquista-acoes {
    padding-bottom: env(safe-area-inset-bottom);
  }
}