/* === Responsive === */

/* Tablet */
@media (max-width: 1024px) {
    .container { padding: 0 12px; }
    .home-sidebar { width: 280px; }
    .game-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .ign-list { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 768px) {
    .header-inner { height: auto; padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
    .main-nav { display: none; /* Will add hamburger later */ order: 3; width: 100%; }
    .main-nav.active { display: block; }
    .header-actions { margin-left: auto; }
    .header-search input { width: 140px; }
    .header-search input:focus { width: 160px; }

    .site-main { margin-top: 80px; }
    .home-layout { flex-direction: column; }
    .home-sidebar { width: 100%; }

    .game-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }

    .game-card-title { font-size: 12px; min-height: 32px; }
    .game-card-body { padding: 8px 10px 10px; }
    .game-card-meta { font-size: 11px; }
    .game-card-desc { display: none; }

    .ign-list { grid-template-columns: 1fr; }
    .ign-item { padding: 10px; }
    .ign-item-thumb { width: 80px; height: 56px; }
    .ign-item-title { font-size: 13px; }

    .section-title { font-size: 16px; }

    .sidebar-widget { padding: 12px; }

    .pagination a, .pagination span { min-width: 30px; height: 30px; font-size: 12px; }
}

/* Small Mobile */
@media (max-width: 480px) {
    .header-search input { width: 110px; font-size: 12px; }
    .header-search input:focus { width: 130px; }
    .header-actions { gap: 4px; }
    .btn-login { font-size: 12px; padding: 4px 10px; }
    .site-logo { font-size: 17px; margin-right: 12px; }

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