/* ============================================================
   RESPONSIVO — desktop / tablet
   Mobile-first: o style.css já cobre o celular.
   Aqui só melhoramos telas largas.
   ============================================================ */

/* Fundo ambiente no desktop (a coluna "celular" fica centralizada) */
@media (min-width: 720px) {
  body {
    background:
      radial-gradient(1200px 600px at 50% -10%, #1a2a16 0%, transparent 60%),
      radial-gradient(900px 500px at 10% 100%, #12202a 0%, transparent 55%),
      var(--bg);
    background-attachment: fixed;
  }

  .app {
    margin-top: 18px;
    margin-bottom: 18px;
    min-height: calc(100vh - 36px);
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
  }

  .header { border-radius: 26px 26px 0 0; }

  .bottom-nav {
    position: sticky;
    bottom: 0;
    left: auto; transform: none;
    margin: 0 auto;
    border-radius: 0 0 26px 26px;
  }

  /* sidebar e modais permanecem dentro da largura da coluna */
}

/* Em telas bem largas, deixamos a coluna um pouco maior e o grid com 3 colunas */
@media (min-width: 1100px) {
  :root { --maxw: 520px; }

  .game-grid { grid-template-columns: repeat(3, 1fr); }
  .game-card { aspect-ratio: 3 / 3.6; }
}

/* Modo paisagem / telas muito largas: espaço confortável ao redor */
@media (min-width: 1400px) {
  :root { --maxw: 560px; }
}

/* Acessibilidade: respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Foco visível para navegação por teclado */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 6px;
}