/* Home: three bands down one left edge, with room between them: the search, the busiest games' covers, the list */
.hm-hero { display: grid; grid-template-columns: minmax(0, 820px); gap: var(--s4); padding-top: var(--s8); padding-bottom: var(--s7); }
.hm-hero h1 { margin: 0; font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -.02em; }
.hm-lede { margin: 0; color: var(--ink-2); font-size: var(--text-md); }


/* Country and game filters as chips, then the way to the advanced search */
.hm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.hm-chip { position: relative; display: inline-flex; align-items: center; gap: var(--s1); height: 32px; padding: 0 var(--s3); border-radius: var(--r-ctl);
  background: var(--surface-3); border: 1px solid var(--line-2); color: var(--ink); font-size: var(--text-ui); }
.hm-chip:hover { border-color: var(--ink-3); }
.hm-chip:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.hm-chip-select { appearance: none; -webkit-appearance: none; field-sizing: content; max-width: 220px; padding: 0 18px 0 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-overflow: ellipsis; }
.hm-chip-select:focus { outline: none; }
.hm-chip-select option { background: var(--surface-3); color: var(--ink); }
.hm-chip-chevron { position: absolute; right: var(--s2); color: var(--ink-2); pointer-events: none; }
.hm-chip--on { background: color-mix(in srgb, var(--brand) 18%, transparent); border-color: var(--brand); }
.hm-chip--on .hm-chip-select { padding-right: 2px; font-weight: 600; }
.hm-chip-label { color: var(--link); }
.hm-chip-x { display: inline-flex; margin-right: -4px; padding: 2px; border-radius: var(--r-ctl); color: var(--link); }
.hm-chip-x:hover { background: var(--surface-3); }
.hm-advanced { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--text-ui); font-weight: 500; }

/* The busiest games: a shelf of covers at one size, filling the row when there's room and scrolling sideways when not */
.hm-games { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(136px, 200px); gap: var(--s4); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--s5); padding-bottom: var(--s3); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.hm-game { display: block; min-width: 0; scroll-snap-align: start; color: var(--ink); text-decoration: none; }
.hm-game .lb-cover { border-bottom: 3px solid var(--accent); }
/* The ring sits inside the cover: the row scrolls sideways, which clips anything drawn outside it */
.hm-game:hover .lb-cover, .hm-game:focus-visible .lb-cover { outline: 2px solid var(--accent); outline-offset: -2px; }
.hm-game b { display: block; margin-top: var(--s3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-ui); font-weight: 600; }
.hm-game small { color: var(--live); font-size: var(--text-sm); font-weight: 600; }

.hm-list { padding-top: var(--s7); padding-bottom: var(--s7); }

/* The way in for server owners, after the list */
.hm-owners { padding-bottom: var(--s8); }
.hm-owners__text { margin: 0; max-width: 72ch; }

@media (max-width: 640px) {
  .hm-hero { padding-top: var(--s6); padding-bottom: var(--s6); }
  .hm-hero h1 { font-size: var(--text-xl); }
  .hm-games { grid-auto-columns: 112px; gap: var(--s3); }
  .hm-list { padding-top: var(--s6); }
}