/* Catalogue /games: search bar, category chips, status line, grid, filter sheet. */

.cat-sec { padding-top: clamp(32px, 4vw, 48px); }
.cat-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cat-bar__q { flex: 1 1 420px; }
.cat-bar__go { min-height: 42px; }
.cat-bar__filters { display: none; position: relative; }
.cat-bar__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--color-brand); color: var(--color-on-brand); font-size: 11px; font-weight: 800; }

.cat-chips { flex-wrap: wrap; overflow: visible; margin: 18px 0 8px; }

.cat-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 14px 0 22px; border-bottom: 1px solid var(--color-line); margin-bottom: 26px; }
.cat-count { font-size: 1rem; color: var(--color-muted); }
.cat-count strong { font: 600 1.15rem/1 var(--font-display); color: var(--color-text); font-variant-numeric: tabular-nums; }
.cat-mode { font-size: var(--fs-small); color: var(--color-subtle); }
.cat-mode b { color: var(--color-muted); font-weight: 600; }
.cat-status .link-btn { margin-left: auto; font-size: var(--fs-small); }

.cat-grid .gcard { transition: transform .4s var(--ease), border-color var(--dur-base), box-shadow .4s var(--ease); }
.cat-grid .gcard.is-entering { animation: cardIn .45s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.cat-grid .gcard mark { background: rgba(255, 122, 69, .3); color: inherit; border-radius: 3px; padding: 0 1px; }

/* bottom sheet (mobile filters) */
.overlay--sheet { place-items: end stretch; padding: 0; }
.sheet { width: 100%; max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); transform: translateY(40px); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sheet__title { font: 600 1.4rem/1 var(--font-display); }
.sheet__label { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); margin: 14px 0 10px; }
.sheet__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet__sort { display: flex; margin-bottom: 20px; }
.sheet__sort select { width: 100%; }

@media (max-width: 760px) {
  .cat-bar__q { flex-basis: 100%; }
  .cat-bar__sort, .cat-chips { display: none; }
  .cat-bar__filters { display: inline-flex; }
  .cat-status .link-btn { margin-left: 0; }
}
.cat-bar__q { min-width: 0; }
@media (max-width: 389px) { .cat-bar__go { padding: 0 12px; } .qfield { padding-left: 12px; } }

/* load more */
.cat-more { display: grid; justify-items: center; gap: 12px; margin-top: 36px; }
.cat-more__info { font-size: var(--fs-small); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.cat-more__bar { width: min(280px, 70%); height: 3px; border-radius: 3px; background: rgba(243, 239, 230, .15); overflow: hidden; }
.cat-more__bar > span { display: block; height: 100%; background: var(--color-brand); border-radius: 3px; transition: width .5s var(--ease); }