/* ============================================================
   MOBAN 8-10-34 — Responsive breakpoints
   ============================================================ */

/* ---------- ≤ 768px ---------- */
@media (max-width: 768px) {
    .container { padding: 0 14px; }
    .game-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .footer-widgets { grid-template-columns: 1fr; gap: 18px; }
    .app-hero-grid { grid-template-columns: 1fr; }
    .topbar-logo img { height: 34px; }
    .btn-topbar { padding: 7px 12px; font-size: 12px; }
    .section-title { font-size: 18px; }
    .single-title, .page-title { font-size: 21px; }
    .promo-card { flex-basis: 78%; }
    .app-hero-stats { gap: 4px; }
}

/* ---------- ≤ 480px ---------- */
@media (max-width: 480px) {
    body { font-size: 14px; }
    .game-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .app-hero-row { flex-direction: column; align-items: center; text-align: center; }
    .app-hero-meta { justify-content: center; flex-wrap: wrap; }
    .app-hero-actions { justify-content: center; }
    .app-hero-actions .btn { flex: 1 1 auto; }
    .news-link { flex-direction: column; align-items: stretch; }
    .news-thumb { width: 100%; height: 160px; }
    .notice-item { flex-wrap: wrap; }
    .notice-time { width: 100%; text-align: right; }
    .tab-label { font-size: 10px; }
    .tab-ico { font-size: 19px; }
    .promo-card { flex-basis: 86%; }
    .cta-title { font-size: 20px; }
    .topbar-actions { gap: 6px; }
    .btn-login { display: none; }
}

/* ---------- ≥ 900px (desktop) ---------- */
@media (min-width: 900px) {
    .app-hero-grid { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
    .game-grid { grid-template-columns: repeat(4, 1fr); }
    .promo-card { flex-basis: 32%; }
    .news-list { grid-template-columns: repeat(2, 1fr); }
    .tabbar { max-width: 480px; left: 50%; right: auto; transform: translateX(-50%); border-radius: 14px 14px 0 0; border: 1px solid var(--line); border-bottom: none; }
}