/* BG-UI-W1.02-PC520 | desktop mouse/trackpad layout only.
   Never changes mobile/touch device presentation or game logic. */
@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
  /* Four main pages: a common portrait-width desktop frame. */
  html, body { background:#f2f5fa; }
  body { padding-inline:0; }
  .page { width:100%; max-width:520px; margin-inline:auto; box-shadow:0 0 24px rgba(45,74,116,.07); }
  .page .header { width:min(100%,520px); }
  .page .bottom { width:min(100%,520px); height:calc(var(--nav) + env(safe-area-inset-bottom)); }

  /* Home: preserve existing narrow-screen left category rail / one-card row. */
  .home-content { padding-inline:14px; }
  .hero { margin-inline:0; }
  .slides { border-radius:12px; }
  .ticker { height:25px; border-radius:9px; }
  .lobby { grid-template-columns:66px minmax(0,1fr); gap:10px; margin-top:10px; }
  .games-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  .rail { gap:4px; }
  .rail button { min-height:61px; border-radius:14px; }
  .rail b { font-size:12px; }

  /* Activity uses a grid; invite/profile keep their current vertical flex layouts. */
  .activity-content { padding-inline:14px; }
  .activity-tabs { margin-bottom:12px; }
  .activity-list { grid-template-columns:minmax(0,1fr); gap:12px; }
  .activity-card-main { min-height:124px; }

  .invite-content { padding-inline:14px; align-items:stretch; }

  .profile-content { padding-inline:14px; align-items:stretch; }
}