/* Shared navigation for the free games pages.
   Section tabs (underlined) switch between lists; pills inside the filter panel narrow the current list. */
.fg-tabs { display: flex; gap: 2px; margin: 0 0 16px 0; border-bottom: 1px solid var(--border-color); overflow-x: auto; scrollbar-width: none; /* undo the site header's global nav rules in case this is ever a <nav> */ height: auto; padding: 0; }
.fg-tabs::-webkit-scrollbar { display: none; }
.section-wrapper .fg-tabs .fg-tab, .fg-tabs .fg-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; margin-bottom: -1px; font-size: 1rem; font-weight: 800; color: var(--text-muted); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
.fg-tabs .fg-tab:hover { color: #fff; }
.fg-tabs .fg-tab.active { color: #fff; border-bottom-color: var(--accent-primary); }
.fg-tab-ico { font-size: 1.05em; }

/* Filter panel: a small label says what the pills filter, and link pills (store pages) look the same as in-page pills */
.fg-filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.fg-filter-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.fg-filters a.fg-chip { text-decoration: none; }
.fg-filters .fg-deck-link { white-space: nowrap; }

@media (max-width: 650px) {
    .fg-tabs { margin-bottom: 12px; }
    .section-wrapper .fg-tabs .fg-tab, .fg-tabs .fg-tab { flex: 1 1 0; justify-content: center; padding: 10px 6px; font-size: 0.82rem; gap: 4px; }
    .fg-filter-label { display: none; }
    .fg-tab-ico { display: none; }
    .fg-filter-group { flex: 1 1 100%; max-width: 100%; }
    .fg-filter-group .fg-chips { min-width: 0; max-width: 100%; }
}
@media (max-width: 360px) {
    .section-wrapper .fg-tabs .fg-tab, .fg-tabs .fg-tab { font-size: 0.76rem; padding: 9px 3px; }
    .fg-tab-ico { display: none; }
}
@media (max-width: 650px) {
    /* The Always free page swaps its pills for a drop-down on phones, so its label group goes too */
    .bf-filters .fg-filter-group { display: none; }
}
@media (max-width: 360px) {
    .fg-filters .fg-chips { flex-wrap: wrap; }
}