/* ============ games.html ============ */
.filter-bar {
  position: sticky; top: var(--nav-h); z-index: 40;
  display: flex; gap: 0.5rem; overflow-x: auto;
  padding: 0.9rem clamp(1rem,4vw,2rem);
  margin-inline: calc(clamp(1rem,4vw,2rem) * -1);
  background: rgba(9,39,30,0.72); backdrop-filter: blur(12px);
  border-block: 1px solid rgba(201,162,39,0.18);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.filter-bar::-webkit-scrollbar { height: 5px; }
.filter-bar::-webkit-scrollbar-thumb { background: var(--color-gold-bronze); border-radius: 5px; }
.filter-chip {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  font-weight: 600; font-size: 0.9rem; white-space: nowrap;
  color: var(--color-text-soft);
  background: rgba(242,239,227,0.03);
  border: 1px solid rgba(201,162,39,0.25);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.filter-chip:hover { transform: translateY(-2px); color: var(--color-text-primary); border-color: rgba(201,162,39,0.5); }
.filter-chip.is-active {
  color: #1c1503; background: var(--grad-gold); border-color: transparent;
  box-shadow: 0 8px 20px -10px var(--color-glow-shadow);
}
.filter-chip__count { font-size: 0.72rem; opacity: 0.8; }

.games-toolbar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-lg);
}
.games-search {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem; min-width: 240px;
  background: rgba(242,239,227,0.04); border: 1px solid rgba(201,162,39,0.25);
  border-radius: var(--radius-pill);
}
.games-search:focus-within { border-color: var(--color-gold-light); }
.games-search svg { width: 18px; height: 18px; color: var(--color-text-muted); flex: none; }
.games-search input { background: none; border: none; outline: none; width: 100%; font-size: 0.92rem; }
.games-search input::placeholder { color: var(--color-text-muted); }
.games-count { font-size: 0.9rem; color: var(--color-text-muted); }
.games-count b { color: var(--color-gold-light); }

.games-empty { text-align: center; padding: var(--space-3xl) 1rem; color: var(--color-text-muted); display: none; }
.games-empty.is-shown { display: block; }

.game-card.is-hidden { display: none; }