/* ══════════════════════════════════════════════════════════════
   KIN.ZONE — Pantallas anchas
   Cargado después de main.css (que es mobile-first).
   Contiene TODOS los @media (min-width:...) de la app.
   ══════════════════════════════════════════════════════════════ */


/* ── ≥ 640px — Tablets y móviles grandes ─────────────────────── */

@media (min-width: 640px) {

  /* Más padding lateral en contenedores estándar de página */
  .page-header  { padding-left: 20px; padding-right: 20px; }
  .page-main    { padding-left: 20px; padding-right: 20px; }

  /* Home: más espacio arriba y columna más ancha */
  .main         { padding-top: 24px; max-width: 720px; }

  /* Home: tarjeta del jardín más alta */
  .garden-card  { height: 220px; }

  /* Detalle de juego: padding lateral alineado */
  .game-hero    { padding-left: 20px; padding-right: 20px; }

}


/* ── ≥ 768px — Escritorio ────────────────────────────────────── */

@media (min-width: 768px) {

  /* Header: más padding, logo más grande */
  .app-header-inner  { padding: 14px 32px; }
  .header-logo img   { height: 45px; }

  /* Nav horizontal visible en escritorio */
  .header-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 1;
    padding-left: 32px;
  }
  .header-nav-item      { font-size: 0.9375rem; }
  .header-profile-label { display: inline; }

  /* En escritorio se usa la nav del header, no la inferior */
  .bottom-nav     { display: none !important; }
  .has-bottom-nav { padding-bottom: 0 !important; }

  /* Footer: más padding lateral */
  .app-footer-inner { padding: 20px 32px; }

}