/* MAMALI GAMES - واکنش‌گرایی (تبلت و موبایل) */
@media (max-width: 1100px) {
    .games-grid { grid-template-columns: repeat(3, 1fr); }
    .game-hero-inner { grid-template-columns: 340px 1fr; }
}

@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; gap: 30px; }
    .hero { padding: 40px 0 20px; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .game-hero-inner { grid-template-columns: 1fr; }
    .game-cover { max-width: 560px; }

    .menu-toggle { display: flex; }
    .header-search { display: none; }
    .main-nav { max-height: 0; overflow: hidden; transition: max-height .35s ease; border-top: 0; }
    .main-nav.open { max-height: 80vh; overflow-y: auto; border-top: 1px solid var(--border); }
    .nav-inner { flex-direction: column; padding: 10px 0 16px; overflow: visible; }
    .main-nav a { padding: 12px 14px; }
    .header-inner { justify-content: space-between; }
}

@media (max-width: 720px) {
    .games-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .card-body { padding: 12px; }
    .card-desc { font-size: .8rem; }
    .cta-box { flex-direction: column; text-align: center; padding: 26px 20px; }
    .spec-list { grid-template-columns: 1fr 1fr; }
    .section-head h2 { font-size: 1.2rem; }
    .search-panel { flex-direction: column; align-items: stretch; }
    .search-panel .field { width: 100%; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .sort-label { justify-content: space-between; }
    .sort-label select { flex: 1; }
}

@media (max-width: 480px) {
    .container { width: calc(100% - 24px); }
    .brand-text small { display: none; }
    .brand img { width: 40px; height: 40px; }
    .hero-search { flex-direction: column; }
    .hero-stats div { flex: 1; min-width: 0; padding: 8px; }
    .games-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .card-actions { grid-template-columns: 1fr; }
    .card-meta { font-size: .74rem; }
    .card-title { font-size: .95rem; }
    .category-grid { gap: 10px; }
    .category-tile { padding: 14px; }
    .footer-grid { grid-template-columns: 1fr; }
    .spec-list { grid-template-columns: 1fr; }
    .game-actions .btn { width: 100%; }
    .content-box { padding: 18px; }
}

@media (max-width: 360px) {
    .games-grid { grid-template-columns: 1fr; }
}