/* Mobile-first. <1024px: dropdown nav + bottom tab bar */
@media (max-width: 1023px) {
  body { padding-bottom: 76px; }
  .nav {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 4px); z-index: 30;
    flex-direction: column; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: 8px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 12px; color: var(--text); }
  .site-header__inner { padding-block: 16px 20px; }
  .tabbar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px; min-height: 56px;
    text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--text-muted); }
  .tabbar svg { width: 30px; height: 30px; }
  .tabbar a[aria-current="page"] { color: var(--primary); }

  /* Today: first card wide, middle cards in pairs, last wide */
  .today-card:first-child, .today-card:last-child:nth-child(n+3) {
    grid-column: 1 / -1; grid-template-columns: 38% 1fr; grid-template-areas: "img body" "img act"; grid-template-rows: 1fr auto;
  }
  .today-card:first-child .today-card__img, .today-card:last-child:nth-child(n+3) .today-card__img {
    height: auto; aspect-ratio: 4 / 3; align-self: start;
  }
  .today-card:first-child .today-card__actions, .today-card:last-child:nth-child(n+3) .today-card__actions { justify-content: flex-end; }
  .today-card:first-child .today-card__actions .btn, .today-card:last-child:nth-child(n+3) .today-card__actions .btn { flex: 0 0 auto; min-width: 130px; }
}
@media (max-width: 479px) {
  .today-card__title { font-size: 1.15rem; }
  .today-card__desc { font-size: .9rem; }
  .logo__line1, .logo__line2 { font-size: 1.25rem; }
  .logo__mark { display: none; }
  .theme-toggle button { width: 34px; }
}
@media (min-width: 480px) {
  :root { --gutter: 20px; }
  .tile { width: 140px; }
}
@media (min-width: 768px) {
  .game-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; padding: 20px; }
  .game-hero__play, .game-cta .btn { align-self: flex-start; width: auto; min-width: 220px; }
  .tiles--catalog { grid-template-columns: repeat(4, 1fr); }
  .filters { grid-template-columns: 1fr 200px 160px; }
  .field--search { grid-column: auto; }
}

/* Desktop: scenic hero, floating header, 4-up cards, grid catalog */
@media (min-width: 1024px) {
  :root { --gutter: 24px; }
  .only-mobile { display: none !important; }
  .only-desktop { display: inline; }
  .menu-button { display: none; }
  .nav { display: flex; gap: 22px; margin-inline: auto; }

  .site-header { position: absolute; inset: 0 0 auto 0; background: none; border: 0; }
  .site-header__inner {
    background: var(--surface); border-radius: 0 0 26px 26px; box-shadow: var(--shadow); max-width: 1160px; padding: 10px 28px;
  }
  .logo__text, :root[data-theme="dark"] .logo__text { color: var(--text); }
  .nav a { color: var(--text); }
  .nav a[aria-current="page"] { color: var(--primary); }
  .theme-toggle, :root[data-theme="dark"] .theme-toggle { background: var(--surface-2); }

  body.page-home {
    background:
      linear-gradient(var(--sky-overlay), var(--sky-overlay)) top / 100% 700px no-repeat,
      url("/assets/images/hero.svg") top center / 100% 700px no-repeat,
      var(--bg);
  }
  .page-home .hero { padding: 150px 0 20px; }
  .page-home .hero .container, .page-home main > .container { max-width: 1160px; }
  .hero__sub { display: block; }
  body:not(.page-home) main { padding-top: 90px; }

  .today__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .today-card { padding: 16px; border-radius: 22px; }
  .today-card__title { font-size: 1.55rem; }
  .today-card__desc { font-size: 1.05rem; min-height: 3em; }
  .today-card__kicker, .today-card__time { display: none; }
  .today-card__meta .pill { display: inline-block; }
  .today-card__actions .chev { display: none; }

  .ad--home-top, .ad--games-bottom, .ad--page-bottom, .ad--home-bottom { max-width: 728px; }
  .ad__box, .ad--home-bottom .ad__box { min-height: 90px; }

  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 18px; overflow: visible; }
  .tile { width: auto; }
  .tiles--catalog { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (min-width: 1440px) {
  .tiles, .tiles--catalog { grid-template-columns: repeat(6, 1fr); }
}