/* Chompy Arcade — filter page + genre tag styles.
 * Written without sight of site.css, so it inherits colors/fonts and uses
 * currentColor. Swap the two variables below for site.css tokens if desired.
 */
:root {
  --chip-accent: #ffcc33;      /* selected chip fill */
  --chip-accent-ink: #1b1b1b;  /* text on selected chip */
}

.browse { padding-top: 1.5rem; }
.browse-title { margin: 0 0 1rem; }

.filters {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.filter-group h2 {
  font-size: 1rem;
  margin: 0 0 .5rem;
  opacity: .85;
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
  font: inherit;
  font-size: .95rem;
  color: inherit;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: .45rem .9rem;          /* ~40px tall: easy tap target for kids */
  min-height: 40px;
  cursor: pointer;
  opacity: .8;
  transition: opacity .15s, transform .15s;
}
.chip:hover { opacity: 1; transform: translateY(-1px); }
.chip:focus-visible { outline: 3px solid var(--chip-accent); outline-offset: 2px; }
.chip[aria-pressed="true"] {
  background: var(--chip-accent);
  border-color: var(--chip-accent);
  color: var(--chip-accent-ink);
  opacity: 1;
  font-weight: 700;
}
.chip-n {
  display: inline-block;
  min-width: 1.4em;
  margin-left: .15rem;
  padding: 0 .35em;
  border-radius: 999px;
  font-size: .8em;
  text-align: center;
  background: rgba(127, 127, 127, .25);
}

.btn-clear { margin-left: auto; }

/* Genre line on every card (home and filter page) */
.genre-tag {
  display: inline-block;
  font-size: .8rem;
  letter-spacing: .02em;
  opacity: .75;
  margin-bottom: .25rem;
}

/* "Filter by type or maker" link in the home page games header */
.browse-link { margin-left: auto; font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .chip { transition: none; }
  .chip:hover { transform: none; }
}