/* ============================================================
   STACK — iPad / Tablet tier (768px to 1023px)
   ============================================================ */

@media (min-width: 768px) {

  /* ── Topbar: taller, more relaxed spacing ── */
  .topbar {
    height: calc(64px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 24px 0;
  }
  .topbar__logo { height: 32px; }

  /* ── Bottom nav: hidden on tablet (no bottom nav) ── */
  .bottom-nav { display: none !important; }

  /* ── Main content: no bottom-nav padding ── */
  .main-content,
  .dashboard__content,
  .shell__main {
    padding-bottom: 24px;
  }

  /* ── Sidebar: narrower drawer (still overlay) ── */
  .sidebar {
    width: 320px;
    max-width: 400px;
  }

  /* ── Grids: 2-column at tablet ── */
  .game-grid {
    grid-template-columns: repeat(auto-fill, 116px);
    gap: 16px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* ── Game cards taller ── */
  .game-card__media { height: 140px; }

  /* ipad.css is linked after style.css, so this file's 140px wins on source
     order over the base rule. The mines banner is 3:4 portrait and must keep
     its full height here, so it opts back out. */
  .game-card__media.game-card__media--mines {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    min-height: 0 !important;
    display: block;
  }

  /* ── Hero: wider aspect ratio ── */
  .hero-section { aspect-ratio: 21 / 9; }

  /* ── Desktop shell: still hidden ── */
  #desktop-shell,
  .desktop-view {
    display: none !important;
  }

  /* ── Tablet 72px icon rail (activated by assets/tablet-shell.js) ── */
  body.dx-tablet-active .dashboard-layout {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
  }

  body.dx-tablet-active .sidebar {
    position: static;
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    transform: none;
    border-right: 1px solid var(--border);
    padding: 12px 4px;
  }

  body.dx-tablet-active .sidebar__section-title,
  body.dx-tablet-active .side-link span:not(.badge-pill),
  body.dx-tablet-active .badge-pill,
  body.dx-tablet-active .sidebar__user-info,
  body.dx-tablet-active .sidebar__user-name,
  body.dx-tablet-active .sidebar__user-email {
    display: none !important;
  }

  body.dx-tablet-active .side-link {
    justify-content: center;
    padding: 12px 0;
    min-height: 48px;
  }

  body.dx-tablet-active .side-link__icon {
    width: 22px;
    height: 22px;
  }

  body.dx-tablet-active .sidebar__user .side-link {
    justify-content: center;
  }

  body.dx-tablet-active .bottom-nav {
    display: none !important;
  }

  body.dx-tablet-active .main-content,
  body.dx-tablet-active .shell__main {
    padding-bottom: 24px;
  }
}