/* ============ games.css ============ */
.games-hero { background: var(--color-gradient-hero); padding-block: var(--space-16); text-align: center; }
.games-hero h1 { font-size: clamp(2.1rem, 6vw, 2.75rem); }
.games-hero p { max-width: 56ch; margin: var(--space-4) auto 0; }

/* Sticky filter bar */
.filter-bar { position: sticky; top: var(--header-height); z-index: 500; background: rgba(10,10,15,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); }
.filter-bar .container { display: flex; flex-direction: column; gap: var(--space-3); }
.search-wrap { position: relative; }
.search-wrap input { width: 100%; padding: var(--space-3) var(--space-4) var(--space-3) 44px; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-primary); }
.search-wrap input::placeholder { color: var(--color-text-muted); }
.search-wrap input:focus { border-color: var(--color-accent-gold); outline: none; }
.search-wrap .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; }
.filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--color-bg-secondary); border: 1px solid var(--color-border); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-base); white-space: nowrap; }
.pill:hover { border-color: var(--color-accent-gold); color: var(--color-text-primary); }
.pill.active { background: var(--color-gradient-gold); color: #0a0a0f; border-color: transparent; }
.sort-wrap { display: flex; align-items: center; gap: var(--space-2); }
.sort-wrap label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.sort-wrap select { padding: var(--space-2) var(--space-3); background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-primary); cursor: pointer; }

/* Games grid */
.games-count { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.games-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 560px) { .games-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .games-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1200px){ .games-grid { grid-template-columns: repeat(4,1fr); } }
.no-results { text-align: center; padding: var(--space-24) var(--space-4); color: var(--color-text-muted); }
.game-card.hidden { display: none; }