/* ==========================================================================
   Endless Runner Arcade — responsive layer (mobile-first adjustments)
   style.css defines the mobile-appropriate base; this file scales it up
   and handles the narrow-viewport navigation drawer.
   ========================================================================== */

/* ----------------------------------------------- Small phones (<=420px) -- */
@media (max-width: 420px) {
  :root { --sp-8: 3rem; --sp-9: 4rem; }
  .wrap, .wrap-narrow { width: min(100% - 1.5rem, var(--wrap)); }
  .grid--games { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
  .game-card__body { padding: var(--sp-3); }
  .game-card__desc { display: none; }
  .hero-stats { gap: var(--sp-4); }
  .toolbar { padding: var(--sp-3); }
}

/* ------------------------------------------------ Phones / small tablets */
@media (max-width: 860px) {
  .nav-toggle { display: block; order: 3; }

  .main-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border);
    padding: var(--sp-4); max-height: calc(100vh - var(--header-h));
    overflow-y: auto; display: none; z-index: 99;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a { padding: .85rem .75rem; border-radius: var(--r-sm); font-size: var(--fs-500); }
  .main-nav li + li { border-top: 1px solid var(--c-border-soft); }

  .header-actions { margin-left: auto; order: 2; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }

  .section { padding-block: var(--sp-7); }
  .section-head { flex-direction: column; align-items: flex-start; }
  .author-box { flex-direction: column; }
}

/* ------------------------------------------------------------- Tablets -- */
@media (min-width: 720px) {
  .hero-cta .btn { padding: .95em 1.8em; }
}

/* ------------------------------------------------ Desktop hero 2-column -- */
@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1.05fr .95fr; gap: var(--sp-7); }
  .hero--simple .hero-inner { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------- Large desktop -- */
@media (min-width: 1400px) {
  :root { --wrap: 1280px; }
}

/* ------------------------------------------- Game page specific layout -- */
@media (min-width: 1024px) {
  .game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); align-items: start; }
  .game-sidebar { position: sticky; top: calc(var(--header-h) + 1rem); }
}

/* --------------------------------------------- Touch-only adjustments -- */
@media (hover: none) {
  .card:hover { transform: none; }
  .btn { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ------------------------------------------------ Landscape phone game -- */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { position: static; }
  .game-shell { margin-top: var(--sp-3); }
  .game-stage { max-height: 78vh; }
}