/* ============================================================
   games.css — Games listing (all cards redirect to affiliate)
   ============================================================ */

.games-toolbar {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(6,20,15,0.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); padding-block: 1rem; margin-bottom: 2rem;
}
.games-search { position: relative; max-width: 460px; margin-bottom: 1rem; }
.games-search input {
  width: 100%; padding: 0.85rem 1rem 0.85rem 2.9rem; border-radius: var(--radius-pill);
  background: var(--color-surface); border: 1px solid var(--border-strong); color: var(--text-primary);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.games-search input::placeholder { color: var(--text-muted); }
.games-search input:focus { outline: none; border-color: var(--color-gold-line); box-shadow: var(--glow-gold); }
.games-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-muted); }

.filter-tabs { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.filter-tab {
  padding: 0.55rem 1.1rem; border-radius: var(--radius-pill); font-size: 0.86rem; font-weight: 700;
  color: var(--text-secondary); border: 1px solid var(--border-strong); background: rgba(13,42,32,0.5);
  transition: all var(--dur); white-space: nowrap;
}
.filter-tab:hover { color: var(--text-primary); border-color: var(--color-gold-line); }
.filter-tab.is-active { color: #1a1405; background: var(--grad-gold); border-color: transparent; box-shadow: var(--glow-gold); }

.games-count { font-size: 0.86rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.games-count b { color: var(--color-gold-bright); }

.games-grid {
  display: grid; gap: clamp(0.7rem, 1.6vw, 1.1rem);
  grid-template-columns: repeat(2, 1fr);
}
.games-grid .game-card.is-hidden { display: none; }
.games-empty { text-align: center; padding: 3rem 1rem; color: var(--text-muted); grid-column: 1 / -1; }

.games-cta-band {
  margin-top: 2.6rem; padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: var(--radius-lg);
  background: var(--grad-surface); border: 1px solid var(--color-gold-line);
  box-shadow: var(--shadow-inset-gold); text-align: center;
}
.games-cta-band h2 { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: 0.7rem; }

@media (min-width: 560px) { .games-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .games-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .games-grid { grid-template-columns: repeat(5, 1fr); } }