/* Category and collection pages: a heading label, then a sheet of game labels. Only arranges app.css parts. */
.list-head { margin-top: var(--s5); display: grid; gap: var(--s2); padding-bottom: var(--s3); }
.list-h1 { font: 400 var(--t-2xl)/1.05 var(--display); letter-spacing: -.01em; justify-self: start; --twin: var(--turmeric); }
/* The twin is a second ink: never the same ink as the text it sits under. */
.list-head.ink-turmeric .list-h1 { --twin: var(--vermilion); }
/* The twin's absolute box is 2px narrower than the H1 without this, so it wrapped onto a different line. */
.list-intro { max-width: 60ch; font-size: var(--t-lg); line-height: 1.4; }
.list-count { justify-self: start; padding: 0 8px; border: var(--keyline); border-radius: var(--r); background: var(--label); box-shadow: 3px 3px 0 var(--c);
  font-weight: 800; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

/* The sheet: equal game labels; on wide screens a lead label takes a 2 by 2 block. */
.list-grid { margin-top: var(--s4); display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-flow: dense; gap: 14px; padding-right: 6px; }
@media (min-width: 900px) {
  .list-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .list-grid [data-lead] { grid-column: span 2; grid-row: span 2; }
  .list-grid [data-lead] .label-title { font: 400 var(--t-xl)/1.1 var(--display); padding: 10px 12px 0; }
  .list-grid [data-lead] .label-foot { padding: 0 12px 12px; font-size: var(--t-sm); }
}

/* FAQ, as on the game page (game.css is not loaded here). */
.faq { border: var(--keyline); border-radius: var(--r); background: var(--label); max-width: 68ch; }
.faq + .faq { margin-top: var(--s2); }
.faq summary { min-height: 44px; display: flex; align-items: center; padding: 8px 12px; font-weight: 800; cursor: pointer; }
.faq p { padding: 0 12px 12px; }

/* The bar: game count and every category, pinned under the site header while the sheet scrolls. One line; it scrolls sideways. */
.list-bar { position: sticky; top: 62px; z-index: 15; display: flex; align-items: center; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 4px;
  background: var(--card); border-bottom: 2px dashed var(--ink); }
.list-bar .list-count { flex: none; }
.cat-links { list-style: none; margin: 0; padding: 2px 6px 6px 2px; display: flex; gap: 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cat-links::-webkit-scrollbar { display: none; }
.cat-links .band { display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 12px; font-size: var(--t-md); white-space: nowrap; text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink); transition: transform var(--release), box-shadow var(--release); }
.cat-links .band:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); transition: transform var(--press), box-shadow var(--press); }
/* This page's own category: pressed in, so it reads as "you are here". */
.cat-links [aria-current] { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); outline: 2px solid var(--ink); outline-offset: 2px; }