/* ============================================================
   GAMES PAGE — search bar, filter tabs, empty state
   (game-card / games-grid styles already live in main.css)
   ============================================================ */

/* ---------- SEARCH + FILTER BAR ---------- */
.games-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.games-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
}
.games-search svg {
  position: absolute;
  top: 50%; left: 16px;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.games-search input[type="search"] {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.games-search input[type="search"]::placeholder { color: var(--color-text-muted); }
.games-search input[type="search"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--red-glow-sm);
}
.games-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.filter-tabs__btn {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: all var(--dur-base) var(--ease-out);
}
.filter-tabs__btn:hover { border-color: var(--color-border-red); color: var(--color-text-primary); }
.filter-tabs__btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 16px var(--red-glow-sm);
}

@media (max-width: 700px) {
  .games-toolbar { flex-direction: column; align-items: stretch; }
  .games-search { max-width: none; }
}

/* ---------- EMPTY STATE ---------- */
.games-empty {
  text-align: center;
  padding-block: var(--space-20);
  color: var(--color-text-secondary);
}
.games-empty__icon {
  color: var(--color-text-muted);
  margin-inline: auto;
  margin-bottom: var(--space-5);
}
.games-empty h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.games-empty p { font-size: var(--text-sm); color: var(--color-text-muted); }