/* A small filter bar keeps the games in view. Options overlay the results. */
.search-filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.search-filters[hidden] { display: none; }
.search-filter { position: relative; min-width: 0; }
.search-filter[open] { z-index: 2; }
.search-filter summary { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 6px 10px; background: white; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-sm); box-shadow: 0 3px 0 var(--ink); list-style: none; cursor: pointer; box-sizing: border-box; font-family: var(--font-kid); }
.search-filter summary::-webkit-details-marker { display: none; }
.filter-copy { flex: 1; min-width: 0; }
.filter-caption { display: block; font-size: 1rem; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-selection { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 1rem/1.25 var(--font-body); color: var(--ink-soft); }
.filter-symbol { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; color: var(--brand); background: var(--brand-soft); }
[data-filter-dropdown=y] .filter-symbol { color: #a61e4d; background: #ffdeeb; }
[data-filter-dropdown=e] .filter-symbol { color: #6741d9; background: #eee5ff; }
[data-filter-dropdown=more] .filter-symbol { color: #795700; background: #fff3bf; }
.search-filter summary > svg { flex: none; }
.search-filter[open] summary > svg { transform: rotate(180deg); }
.search-filter summary:hover, .search-filter.has-selection summary, .search-filter[open] summary { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 3px 0 var(--brand); }
.filter-panel { position: absolute; top: calc(100% + 8px); left: 0; width: 300px; max-width: calc(100vw - 40px); max-height: min(55vh,380px); overflow-y: auto; padding: 8px 12px; box-sizing: border-box; background: white; border: 2px solid var(--ink); border-radius: var(--radius-sm); box-shadow: 0 4px 0 var(--ink), 0 8px 24px #1b1f3b20; }
.search-filter:last-child .filter-panel { left: auto; right: 0; }
.search-filter.opens-above .filter-panel { top: auto; bottom: calc(100% + 6px); }
.search-filters .filter-panel fieldset { padding: 0; margin: 0; min-width: 0; }
.search-filters .filter-panel legend { font-size: 1rem; color: var(--ink-soft); margin: 4px 0; }
.search-filters .filter-panel fieldset + fieldset { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.filter-choice { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px; box-sizing: border-box; font: 700 1rem/1.4 var(--font-kid); cursor: pointer; border-radius: 8px; }
.filter-choice:hover { background: var(--brand-soft); }
.filter-choice:has(input:checked) { background: var(--brand-soft); }
.filter-choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.filter-area-hint { font-size: 1rem; color: var(--ink-soft); margin: 6px 4px 10px; }
.filter-area-hint[hidden], .filter-choice[hidden] { display: none; }
.search-count { margin-top: 14px; margin-bottom: 12px; }
.search-results .topic-grid { margin-top: 0; }
.search-filter summary:focus-visible, .filter-choice input:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
@media (max-width: 700px) {
  .search-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .search-filter:nth-child(even) .filter-panel { left: auto; right: 0; }
  .search-filter summary { padding-inline: 7px; gap: 5px; }
  .filter-symbol { display: none; }
}