/* Classic Arcade Games hub — genre filter controls */

.cag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.cag-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cag-filter-group label {
  font-size: 0.82rem;
  color: var(--color-text-soft);
}

#cag-engine-select {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  min-width: 200px;
}

.cag-start { margin-bottom: 8px; }
.cag-start h2, #cag-all-h { font-size: 1.3rem; margin: 0 0 6px; }
.cag-lede { color: var(--color-text-soft); margin: 0 0 16px; max-width: 70ch; }
.cag-count { color: var(--color-text-soft); font-size: 0.88rem; margin: 0 0 12px; }
#cag-engine-select:focus-visible, #game-search:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* Filter bar polish (this hub does not load listing.css): the search box was unstyled (170x20px on phones, no visible
   border) and the hero text sat flush against the screen edge because .category-hero's padding cancels the .wrap gutter. */
.category-hero { padding-left: 20px; padding-right: 20px; }
.cag-filter-group label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cag-filters input#game-search {
  width: 380px;
  max-width: 100%;
  min-height: 42px;
  padding: 9px 16px 9px 42px;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 14px center;
  background-size: 17px;
}
.cag-filters input#game-search::placeholder { color: var(--color-text-soft); }
.cag-filters input#game-search:focus { outline: none; border-color: var(--color-primary); }
#cag-engine-select { min-height: 42px; }
@media (max-width: 600px) {
  .cag-filters { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; }
  .cag-filter-group { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; column-gap: 8px; }
  .cag-filter-group label { white-space: nowrap; }
  #cag-engine-select { width: 100%; min-width: 0; }
}