/* ============================================================
   Moban 8-10-33 — Responsive breakpoints
   ============================================================ */

/* Tablets & small desktops */
@media (min-width: 768px) {
  .container { padding: 0 22px; }

  .app-topbar-inner { padding: 12px 0; }
  .app-logo img { height: 38px; }

  .app-hero { padding: 40px 36px 34px; }
  .app-hero h1 { font-size: 34px; }

  .game-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  .news-card { grid-template-columns: 200px 1fr; }
  .news-card-title { font-size: 16px; }

  .feature-grid { grid-template-columns: repeat(4, 1fr); }

  .post-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }

  .single-wrap { padding: 30px 34px 38px; }
  .single-title { font-size: 28px; }

  .slide-card { flex-basis: 46%; }
}

/* Large desktops */
@media (min-width: 1024px) {
  .game-grid { grid-template-columns: repeat(4, 1fr); }
  .app-hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; }
  .slide-card { flex-basis: 32%; }
}

/* Small phones */
@media (max-width: 480px) {
  body { font-size: 14px; }
  .container { padding: 0 12px; }

  .app-logo img { height: 30px; }
  .app-auth .btn { padding: 6px 10px; font-size: 12px; }

  .app-hero { padding: 22px 15px 18px; }
  .app-hero h1 { font-size: 22px; }
  .app-hero-actions .btn { flex: 1; }

  .game-grid { gap: 10px; }
  .game-body { padding: 8px 10px 10px; }
  .game-name { font-size: 13px; }

  .news-card { grid-template-columns: 96px 1fr; }
  .news-card-body { padding: 10px 12px; }

  .feature-grid { grid-template-columns: 1fr; }

  .section-title { font-size: 17px; }
  .back-to-top { width: 40px; height: 40px; right: 12px; }
}