/* Leaderboards (/top), maps (/maps) and the shared page band: covers, standings, map cards */
.lb-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.lb-num { font-variant-numeric: tabular-nums; }
.lb-dim { color: var(--ink-3); }

/* ---------- index ---------- */
.lb-index { font-family: Inter, sans-serif; color: var(--ink); }
.lb-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; padding: 56px 0 32px; }
.lb-intro h1 { margin: 0; font-size: 60px; line-height: 1; font-weight: 800; letter-spacing: -.035em; }
.lb-intro p { margin: 0; max-width: 56ch; color: var(--ink-2); font-size: 16px; }
.lb-shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 24px; padding-bottom: 56px; }
.lb-shelf-game { display: block; min-width: 0; }
.lb-cover { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 4px; background: var(--black); box-shadow: 0 0 0 1px var(--edge-faint); }
/* The header image beneath, blurred and fitted, shows for games Steam has no cover for */
.lb-cover::before { content: ""; position: absolute; inset: -20px; background: var(--header) center / cover; filter: blur(18px) brightness(.55); }
.lb-cover::after { content: ""; position: absolute; inset: 0; background: var(--header) center / contain no-repeat; }
.lb-cover img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.lb-shelf-game .lb-cover { border-bottom: 4px solid var(--accent); }
.lb-shelf-game:hover .lb-cover, .lb-shelf-game:focus-visible .lb-cover { box-shadow: 0 0 0 2px var(--accent); }
.lb-gline { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 12px; }
.lb-gname { font-weight: 700; font-size: 15px; }
.lb-gcount { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.lb-lead { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; margin-top: 6px; color: var(--ink-2); font-size: 13px; }
.lb-lead b { color: var(--accent); font-weight: 800; }
.lb-lead span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }
.lb-more h2 { margin: 0 0 18px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.lb-capsules { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding-bottom: 32px; }
.lb-capsule { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-2); }
.lb-capsule:hover, .lb-capsule:focus-visible { border-color: var(--accent); }
.lb-capsule img { display: block; width: 96px; height: 45px; object-fit: cover; border-radius: 3px; }
.lb-capsule b { display: block; font-size: 13px; font-weight: 650; line-height: 1.25; }
.lb-capsule small { color: var(--ink-3); font-size: 12px; }
.lb-updated { padding: 8px 0 56px; color: var(--ink-3); font-size: 12px; }

/* ---------- a game's standings ---------- */
.lb-standings { font-family: Inter, sans-serif; color: var(--ink); }
/* Headings and big numbers: Inter at its heaviest, tightly spaced */
.lb-display { font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.lb-band { position: relative; height: 250px; overflow: hidden; border-bottom: 4px solid var(--accent); background: var(--header) center / cover; }
.lb-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.lb-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 96%, transparent) 30%, color-mix(in srgb, var(--bg) 55%, transparent) 70%, color-mix(in srgb, var(--bg) 20%, transparent)); }
.lb-band .lb-wrap { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 20px; padding-bottom: 26px; }
.lb-back { color: var(--ink-2); font-size: 14px; }
.lb-back:hover { color: var(--white); }
.lb-band-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.lb-band h1 { margin: 0; font-size: 64px; overflow-wrap: anywhere; }
.lb-facts { display: flex; gap: 36px; text-align: right; }
.lb-facts b { display: block; font-size: 32px; }
.lb-facts small { color: var(--ink-2); font-size: 13px; }
/* Narrow screens pick the game from a swipeable row; wide ones from the sidebar list (.lb-games) */
.lb-switch { display: none; gap: 10px; padding: 18px 24px; overflow-x: auto; scrollbar-width: none; }
.lb-switch a { display: flex; align-items: center; gap: 8px; flex: none; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink); font-size: 13px; white-space: nowrap; }
.lb-switch a:hover { color: var(--white); }
.lb-switch a[aria-current] { color: var(--white); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lb-switch img { width: 46px; height: 22px; border-radius: 999px; object-fit: cover; }
.lb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding-top: 28px; padding-bottom: 64px; }
.lb-thead, .lb-row { display: grid; grid-template-columns: 72px 56px 56px minmax(0, 1fr) 96px 96px 92px; gap: 16px; align-items: center; }
.lb-thead { padding-bottom: 10px; border-bottom: 2px solid var(--ink); color: var(--ink-3); font-size: 13px; }
.lb-right { text-align: right; }
.lb-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.lb-rank { font-size: 40px; text-align: right; color: var(--ink); }
.lb-row--top .lb-rank { color: var(--accent); }
.lb-move { font-weight: 700; font-size: 14px; color: var(--ink-3); }
.lb-move--up { color: var(--live); }
.lb-move--down { color: var(--danger); }
.lb-move--new { color: var(--info); }
.lb-server { min-width: 0; }
.lb-server > a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: 600; }
.lb-server > a:hover { color: var(--accent); }
.lb-mapline { display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; color: var(--ink-2); font-size: 13px; }
.lb-mapline a { overflow: hidden; text-overflow: ellipsis; }
.lb-mapline a:hover { color: var(--white); }
.lb-credit { margin: 6px 0 0; color: var(--ink-2); font-size: 12px; }
.lb-credit a { color: var(--link); }
.lb-mapline em { font-style: normal; color: var(--ink-3); }
.lb-mapline i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--mode); }
.lb-now { text-align: right; }
.lb-now b { font-weight: 700; }
.lb-now small { color: var(--ink-3); }
.lb-avg { text-align: right; font-size: 24px; }
.lb-games { margin-bottom: 36px; }
.lb-games h2 { margin-bottom: 10px; }
.lb-games-link { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; margin: 0 -8px; padding: 6px 8px; border-radius: 6px; color: var(--ink); font-size: 14px; }
.lb-games-link img { width: 56px; height: 26px; object-fit: cover; border-radius: 3px; }
.lb-games-link small { color: var(--ink-3); font-size: 12px; }
.lb-games-link:hover { background: var(--surface-2); color: var(--white); }
.lb-games-link[aria-current] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--white); box-shadow: inset 3px 0 0 var(--accent); }
.lb-games-all { display: block; margin-top: 8px; color: var(--ink-2); font-size: 13px; }
.lb-games-all:hover { color: var(--white); }
.lb-side h2 { margin: 0 0 4px; font-size: 22px; }
.lb-side p { margin: 0 0 14px; color: var(--ink-3); font-size: 13px; }
.lb-climb { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lb-climb a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.lb-climb a:hover { color: var(--accent); }
.lb-climb-name { min-width: 0; }
.lb-foot { padding-bottom: 40px; color: var(--ink-3); font-size: 12px; }
.lb-climb small { color: var(--ink-3); font-size: 12px; }
.lb-climb .lb-display { color: var(--live); font-size: 20px; }
.lb-box { margin-top: 32px; padding: 18px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-2); font-size: 13px; }
.lb-box b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 32px; }
.lb-row .map-tile { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mode) 45%, transparent); }

/* ---------- maps ---------- */
.lb-mapsearch { margin-top: var(--s4); max-width: 480px; }
.lb-empty { padding: 32px 0; color: var(--ink-2); }
.lb-mapgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-bottom: 48px; }
.lb-mapcard { display: block; min-width: 0; overflow: hidden; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); }
.lb-mapcard:hover, .lb-mapcard:focus-visible { border-color: var(--mode); }
.lb-mapcard .map-tile { aspect-ratio: 16 / 10; }
.lb-mapcard-body { display: block; padding: 14px 16px 16px; }
.lb-mapcard-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 17px; font-weight: 750; }
.lb-mapcard-mode { display: flex; align-items: center; gap: 7px; margin-top: 2px; overflow: hidden; white-space: nowrap; color: var(--ink-2); font-size: 13px; }
.lb-mapcard-mode i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--mode); }
.lb-mapcard-mode em { overflow: hidden; text-overflow: ellipsis; font-style: normal; color: var(--ink-3); }
.lb-mapcard-stats { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; color: var(--ink-2); font-size: 13px; }
.lb-mapcard-stats b { color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.lb-mapcard-games { display: block; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-3); font-size: 12px; }
.lb-maplist h2 { margin: 0 0 14px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.lb-maplist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; padding-bottom: 24px; }
.lb-maprow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lb-maprow .map-tile { width: 64px; height: 40px; border-radius: 5px; }
.lb-maprow-name b, .lb-maprow-name small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lb-maprow-name b { font-size: 14px; font-weight: 650; }
.lb-maprow-name small, .lb-maprow-stats small { color: var(--ink-3); font-size: 12px; }
.lb-maprow-stats { text-align: right; }
.lb-maprow-stats b { display: block; font-weight: 800; }
.lb-maprow:hover .lb-maprow-name b { color: var(--mode); }

.lb-band--map { height: 300px; }
.lb-band--map::after { content: ""; position: absolute; inset: -30px; background: var(--header) center / cover; filter: blur(22px) saturate(.9) brightness(.45); z-index: 0; }
.lb-band--map::before { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent) 25%, color-mix(in srgb, var(--bg) 50%, transparent) 65%, color-mix(in srgb, var(--bg) 35%, transparent)); }
.lb-band--map .lb-band-row { align-items: flex-end; }
.lb-map-title { min-width: 0; }
.lb-map-title h1 { font-size: 64px; }
.lb-map-title .lb-mapline { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.map-tile--hero { flex: none; width: 320px; height: 200px; border-radius: 10px; box-shadow: 0 0 0 1px var(--edge), var(--shadow-card); }
.lb-mapfacts { display: flex; gap: 40px; padding-bottom: 24px; border-bottom: 2px solid var(--ink); }
.lb-mapfacts b { display: block; font-size: 36px; }
.lb-mapfacts small { color: var(--ink-2); font-size: 13px; }
.lb-section { margin: 28px 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.lb-note { margin: 0 0 14px; color: var(--ink-3); font-size: 13px; }
.lb-maprow-server { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lb-chart { max-width: 760px; }
.lb-related { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lb-related .map-tile { width: 56px; height: 36px; border-radius: 5px; }
.lb-related b, .lb-related small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lb-related b { font-weight: 600; }
.lb-related small { color: var(--ink-3); font-size: 12px; }
.lb-related > span:last-child { font-weight: 700; }
.lb-related:hover b { color: var(--mode); }

/* ---------- server pages: the game's art behind the name, the current map beside it ---------- */
@media (max-width: 1100px) {
  .lb-shelf { grid-template-columns: repeat(4, 1fr); }
  .lb-capsules { grid-template-columns: repeat(3, 1fr); }
  .lb-layout { grid-template-columns: minmax(0, 1fr); }
  .lb-switch { display: flex; }
  .lb-games:not(.lb-games--info) { display: none; }
  .lb-mapgrid { grid-template-columns: repeat(3, 1fr); }
  .lb-maplist-grid { grid-template-columns: repeat(2, 1fr); }
  .lb-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .lb-side h2, .lb-side p { grid-column: 1 / -1; }
  .lb-box { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .lb-intro { grid-template-columns: 1fr; gap: 16px; padding-top: 36px; }
  .lb-intro h1 { font-size: 44px; }
  .lb-shelf { grid-template-columns: repeat(3, 1fr); gap: 20px 16px; }
  .lb-capsules { grid-template-columns: repeat(2, 1fr); }
  .lb-band { height: auto; min-height: 210px; }
  .lb-band-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lb-band h1 { font-size: 40px; }
  .lb-facts { text-align: left; gap: 28px; }
  .lb-facts b { font-size: 26px; }
  .lb-thead { display: none; }
  .lb-row { grid-template-columns: 44px 44px minmax(0, 1fr) 60px; gap: 2px 12px; }
  .lb-row .lb-rank { grid-column: 1; grid-row: 1; font-size: 28px; }
  .lb-row .lb-move { grid-column: 1; grid-row: 2; text-align: right; font-size: 12px; }
  .lb-row .map-tile { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; }
  .lb-row .lb-server { grid-column: 3; grid-row: 1 / span 2; }
  .lb-row .lb-server > a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--text-ui); line-height: 1.3; }
  .lb-row .lb-now, .lb-row .lb-trend, .lb-row > .lb-dim { display: none; }
  .lb-row .lb-avg { grid-column: 4; grid-row: 1 / span 2; font-size: 20px; }
  .lb-side { grid-template-columns: 1fr; }
  .lb-mapgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .lb-maplist-grid { grid-template-columns: 1fr; }
  .lb-band--map { height: auto; min-height: 260px; }
  .lb-band--map .lb-band-row { align-items: flex-start; }
  .lb-map-title h1 { font-size: 40px; }
  .map-tile--hero { width: 100%; max-width: 360px; height: auto; aspect-ratio: 16 / 10; }
  .lb-mapfacts { gap: 24px; }
  .lb-mapfacts b { font-size: 28px; }
}
@media (max-width: 520px) {
  .lb-shelf { grid-template-columns: repeat(2, 1fr); }
  .lb-capsules { grid-template-columns: 1fr; }
}

/* A server's 30-day trend (TopHelper#trend_sparkline): the game's colour for the top three */
.lb-trend { color: var(--trend, var(--ink-2)); }