/* Custom games list (lobbies.html): live lobby data with map-first scanability. */
.lobbies-title { font-size: var(--ds-fs-xl); }
.ds-page-header .ds-lede { max-width: 58ch; }
.lobbies-body { min-height: 24rem; }
.lobbies-toolbar { justify-content: flex-start; align-items: center; margin-bottom: var(--ds-space-5); }
.lobbies-list-title { margin: var(--ds-space-5) 0 var(--ds-space-3); font-size: var(--ds-fs-lg); }
#list-message:empty { display: none; }

.lobby-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin: 0; padding: 0; list-style: none; }
.lobby-card { position: relative; display: grid; grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); align-content: start; align-items: start; gap: var(--ds-space-3); min-width: 0; }
.lobby-card-map { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--ds-radius-md); background: var(--ds-bg-raised); }
.lobby-card-map-empty { display: grid; width: 100%; aspect-ratio: 16 / 10; place-items: center; padding: var(--ds-space-2); border-radius: var(--ds-radius-md); color: var(--ds-text-muted); background: var(--ds-bg-raised); font-size: var(--ds-fs-xs); text-align: center; }
.lobby-card-info { display: grid; align-content: start; justify-items: start; gap: var(--ds-space-2); min-width: 0; }
.lobby-card .ds-card-title { margin: 0; }
.lobby-card-link { color: var(--ds-text); text-decoration: none; }
/* The whole card is the click target of the lobby link. */
.lobby-card-link::after { position: absolute; inset: 0; border-radius: var(--ds-radius-lg); content: ""; }
.lobby-card-link:focus-visible { outline: none; }
.lobby-card-link:focus-visible::after { box-shadow: var(--ds-focus); }
.lobby-card:hover .lobby-card-link { color: var(--ds-cyan); }
.lobby-card-host, .lobby-card-meta { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }
.lobby-card-watch { position: relative; z-index: 1; }
.lobby-card-expiry { color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }
.lobby-card .ds-badge { justify-self: start; }
.lobby-card .ds-badge-live { color: var(--ds-hot-ink); }

.auth-required { margin-block: var(--ds-space-5); }
@media (max-width: 620px) {
  .lobbies-toolbar .ds-btn { flex: 1 1 100%; }
  .lobby-card { grid-template-columns: minmax(88px, .7fr) minmax(0, 1.3fr); gap: var(--ds-space-3); }
}