:root { color-scheme:dark; --bg:#101218; --surface:#191c25; --line:#30333d; --text:#f5f3f5; --muted:#a3a4af; --accent:#e18dbd; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.45; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-inline-size:320px; margin:0; color:var(--text); background:var(--bg); }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
a:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
h1,h2,p { margin-block-start:0; }
h1,h2 { letter-spacing:-.035em; line-height:1.15; }
.sr-only { position:absolute; clip-path:inset(50%); overflow:hidden; width:1px; height:1px; white-space:nowrap; }
.skip-link { position:absolute; inset:8px auto auto 8px; z-index:10; padding:.5rem .8rem; background:var(--surface); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.site-header { border-block-end:1px solid var(--line); }
.header-inner,main,footer { width:min(1120px,calc(100% - 3rem)); margin-inline:auto; }
.header-inner { display:flex; align-items:center; gap:3rem; min-block-size:70px; }
.brand { display:flex; align-items:center; gap:1rem; flex:none; white-space:nowrap; }
.brand-logo { display:block; width:185px; height:36px; }
.brand-label { padding-inline-start:1rem; border-inline-start:1px solid var(--line); color:var(--muted); font-size:.78rem; font-weight:700; }
.site-header nav { display:flex; align-items:center; gap:2rem; margin-inline-start:auto; font-size:.82rem; }
.site-header nav a { display:grid; align-items:center; min-block-size:70px; border-block-end:2px solid transparent; color:var(--muted); }
.site-header nav a[aria-current] { border-color:var(--accent); color:var(--text); }
main { min-block-size:calc(100dvh - 140px); padding-block-end:5rem; }
.status-line { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem 1.3rem; margin-block:1.05rem 2.55rem; color:var(--muted); font-size:.76rem; }
.status { display:inline-flex; align-items:center; gap:.55rem; color:#c7e9d8; font-weight:700; }
.status i { width:7px; height:7px; border-radius:50%; background:#73d5a8; }
.status.stopped { color:#e5a8a8; }
.status.stopped i { background:#e87474; }
.status.full { color:#f4cb87; }
.status.full i { background:#e6b45d; }
.snapshot-age { margin-inline-start:auto; font-size:.7rem; }
.page-heading { margin-block-end:1.3rem; }
.page-heading h1 { margin-block-end:.3rem; font-size:clamp(2rem,4vw,3rem); }
.page-heading p { margin:0; color:var(--muted); font-size:.9rem; }
.mode-nav { display:flex; gap:1.5rem; overflow-x:auto; margin-block:0 2rem; border-block-end:1px solid var(--line); scrollbar-width:thin; }
.mode-nav a { flex:none; padding:.7rem 0; border-block-end:2px solid transparent; color:var(--muted); font-size:.86rem; font-weight:650; }
.mode-nav a[aria-current] { border-color:var(--accent); color:var(--text); }
.overview-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr); gap:2rem; }
.overview-grid .leaders-section { padding-inline-start:2rem; border-inline-start:1px solid var(--line); }
.section { min-width:0; margin-block-end:2.2rem; }
.section-title { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; min-block-size:2.5rem; }
.section-title h2 { margin:0; font-size:1.27rem; }
.section-title > a { color:var(--muted); font-size:.76rem; white-space:nowrap; }
.section-title > a:hover { color:var(--accent); }
.list-label { margin-block:.8rem .2rem; color:var(--muted); font-size:.7rem; font-weight:700; }
.live-label { color:#9adeb8; }
.rows { border-block-start:1px solid var(--line); }
.match-row,.leader-row,.pool-row { border-block-end:1px solid var(--line); min-block-size:58px; }
.match-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.15rem 1rem; padding:.7rem .2rem; }
.match-main { display:flex; align-items:center; gap:.5rem; min-width:0; overflow:hidden; font-size:.86rem; white-space:nowrap; }
.match-main strong { overflow:hidden; text-overflow:ellipsis; }
.match-main > span { color:var(--muted); font-size:.72rem; }
.match-score { grid-column:2; grid-row:1 / 3; font-size:1.06rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.match-score span { margin-inline:.25rem; color:var(--muted); }
.row-caption { min-width:0; overflow:hidden; color:var(--muted); font-size:.71rem; text-overflow:ellipsis; white-space:nowrap; }
.leader-row { display:flex; align-items:center; gap:.9rem; padding:.55rem .2rem; font-size:.85rem; }
.leader-row .place { display:grid; place-items:center; flex:none; width:27px; height:27px; border-radius:7px; background:#282b36; color:var(--muted); font-size:.76rem; font-weight:800; }
.leader-row strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.elo { margin-inline-start:auto; color:var(--accent); font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.elo small { color:var(--muted); font-size:.64rem; font-weight:600; }
.pool-preview { margin-block-start:.3rem; }
.pool-preview .rows { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.5rem; }
.pool-row { display:flex; align-items:center; gap:.8rem; padding:.55rem .15rem; }
.pool-image,.map-image { display:block; flex:none; overflow:hidden; border-radius:6px; background:#302c39; }
.pool-image { width:72px; height:47px; }
.pool-image img,.map-image img { display:block; width:100%; height:100%; object-fit:cover; }
.pool-name { display:grid; min-width:0; gap:.1rem; }
.pool-name strong { display:-webkit-box; overflow:clip; font-size:.83rem; line-height:1.25; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; }
.pool-name small { color:var(--muted); font-size:.68rem; }
.row-arrow { margin-inline-start:auto; color:var(--muted); }
.quiet { padding-block:1rem; color:var(--muted); font-size:.82rem; }
.list-toolbar { display:flex; align-items:center; gap:1rem; margin-block:.3rem 1.2rem; }
.list-toolbar label { font-size:.78rem; font-weight:650; white-space:nowrap; }
.list-toolbar input { flex:1; max-width:350px; min-block-size:40px; border:1px solid var(--line); border-radius:7px; padding:.55rem .7rem; background:var(--surface); color:var(--text); font:inherit; font-size:.83rem; }
.list-toolbar > span { margin-inline-start:auto; color:var(--muted); font-size:.75rem; white-space:nowrap; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.84rem; }
th,td { padding:.88rem .5rem; border-block-end:1px solid var(--line); text-align:start; white-space:nowrap; }
thead { color:var(--muted); font-size:.7rem; }
thead th { border-block-start:1px solid var(--line); font-weight:650; }
tbody th { font-weight:700; }
tbody td:last-child { color:var(--muted); }
.rank-cell { color:var(--muted); width:3rem; }
.back { display:inline-block; margin-block-end:1rem; color:var(--muted); font-size:.78rem; }
.profile-stats { display:flex; gap:2rem; padding-block:1rem 2rem; border-block-end:1px solid var(--line); }
.profile-stats > div { display:grid; gap:.1rem; }
.profile-stats strong { font-size:1.8rem; line-height:1.2; }
.profile-stats span { color:var(--muted); font-size:.72rem; }
.profile-stats + .section { margin-block-start:1.8rem; }
.versus-card { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding-block:2rem; border-block:1px solid var(--line); }
.versus-card > div { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; min-width:0; font-size:1rem; font-weight:700; }
.versus-card > div:last-child { justify-content:end; text-align:end; }
.versus-card > div small { flex-basis:100%; color:var(--muted); font-size:.7rem; font-weight:500; }
.versus-card > strong { font-size:clamp(1.7rem,4vw,2.6rem); font-variant-numeric:tabular-nums; white-space:nowrap; }
.slot.red { color:#df6486; }.slot.blue { color:#67a5e9; }
.match-facts { display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; margin-block:1rem; color:var(--muted); font-size:.78rem; }
.match-facts a { color:var(--accent); }
.match-flow { padding-block-start:1rem; border-block-start:1px solid var(--line); color:var(--muted); font-size:.82rem; overflow-wrap:anywhere; }
.match-flow p { margin-block:.45rem; }.match-flow b { display:inline-block; min-width:3rem; color:var(--text); }
.map-list { border-block-start:1px solid var(--line); }
.map-row { display:grid; grid-template-columns:72px 3rem minmax(0,1.5fr) minmax(0,.85fr) auto; align-items:center; gap:.7rem; min-block-size:62px; padding:.4rem .1rem; border-block-end:1px solid var(--line); font-size:.77rem; }
.map-image { width:72px; height:45px; }
.map-name { display:grid; min-width:0; }
.map-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.map-name small,.map-stats small { color:var(--muted); }
.map-mods { color:var(--accent); }
.map-stats { text-align:end; white-space:nowrap; }.map-stats small { display:block; }
footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1rem; padding-block:1.4rem 2.5rem; border-block-start:1px solid var(--line); color:var(--muted); font-size:.72rem; }
.disclaimer { flex-basis:100%; margin:0; }
.load-error { width:min(500px,calc(100% - 2rem)); margin:6rem auto; }
@media (max-width:1000px) { .pool-preview .rows { grid-template-columns:1fr; } }
@media (max-width:760px) {
  .header-inner,main,footer { width:min(100% - 1.5rem,1120px); }
  .header-inner { flex-wrap:wrap; gap:0 1rem; padding-block-start:.8rem; }.site-header nav { width:100%; gap:1.2rem; margin-inline-start:0; overflow-x:auto; }.site-header nav a { min-block-size:44px; font-size:.76rem; }
  .status-line { margin-block:1rem 2rem; }.snapshot-age { flex-basis:100%; margin-inline-start:0; }
  .overview-grid { display:block; }.overview-grid .leaders-section { padding-inline-start:0; border-inline-start:0; }
  .pool-preview .rows { grid-template-columns:1fr; }
  .map-row { grid-template-columns:52px 2.7rem minmax(0,1fr); }.map-image { width:52px; }.map-mods,.map-stats { grid-column:3; text-align:start; }
}
@media (max-width:500px) { .brand-label { display:none; }.site-header nav { gap:1rem; }.list-toolbar { flex-wrap:wrap; }.list-toolbar input { order:3; flex-basis:100%; max-width:none; }.list-toolbar > span { margin-inline-start:auto; }.versus-card { grid-template-columns:1fr; text-align:center; }.versus-card > div,.versus-card > div:last-child { justify-content:center; }.versus-card > strong { grid-row:2; }.match-main { font-size:.78rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }