/* Scrolls SMP components. Read only the tokens (tokens.css) and the tier variables (--t-fg, --t-bg, --t-bd,
   --em-1/2/3) from /tiers.css. One radius per size, one border style, the same hover and focus everywhere. */

@font-face { font-family: "Geist"; src: url("/static/fonts/geist-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* display face for headings and numbers: Chakra Petch (SIL Open Font License, static/fonts/OFL-ChakraPetch.txt) */
@font-face { font-family: "Chakra Petch"; src: url("/static/fonts/chakra-petch-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("/static/fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* pixel face for the podium names: Pixelify Sans (SIL Open Font License, static/fonts/LICENSE-pixelify-sans.txt) */
@font-face { font-family: "Pixelify Sans"; src: url("/static/fonts/pixelify-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body.ds { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-0); color: var(--text);
  font: 400 var(--fs-base) / var(--lh-text) var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.ds main { flex: 1; outline: none; }
.ds img { max-width: 100%; }
.ds :where(a) { color: inherit; }   /* low specificity: classes such as .btn--discord set their own colour */
.ds p { margin: 0; }
.ds ul, .ds ol { margin: 0; }
.ds button { font: inherit; color: inherit; }
.ds svg { flex: none; }
.ds h1, .ds h2, .ds h3 { margin: 0; font-family: var(--f-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; }
.ds :focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-md); }
/* the page content and other targets that are only focused by script or a click (tabindex=-1) never show a ring */
.ds [tabindex="-1"]:focus, .ds [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 90; padding: 8px 14px; border-radius: var(--r-sm); background: var(--text); color: var(--bg-0); }
.skip:focus { top: 12px; }
.num { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.eyebrow { margin: 0; font: 700 var(--fs-xs) / 1.3 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); }
.meta { font-size: var(--fs-sm); color: var(--muted); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.notice { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border)); border-radius: var(--r-md); color: var(--warn); }
.show-sm { display: none; }

/* ---- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 42px; padding: 0 var(--s-5); border-radius: var(--r-md); border: 1px solid transparent;
  font: 600 var(--fs-sm) / 1 var(--f-body); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease, color var(--t-fast) ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: var(--bg-2); color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--bg-3); border-color: var(--muted); }
.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--bg-2); color: var(--text); }
.btn--discord { background: var(--discord); color: #fff; }
.btn--discord:hover { background: var(--discord-hover); }
.btn--sm { height: 34px; padding: 0 var(--s-3); font-size: var(--fs-xs); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--bg-2); color: var(--text-2); cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.icon-btn:hover { background: var(--bg-3); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
.link-more { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.link-more:hover { color: var(--accent-text); }

/* ---- tier badge: emblem + exact label, tooltip in the title attribute (never only colour) */
.tier { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: var(--r-sm);
  background: var(--t-bg); color: var(--t-fg); border: 1px solid color-mix(in srgb, var(--t-bd) 60%, transparent);
  font: 700 var(--fs-sm) / 1 var(--f-display); letter-spacing: 0.02em; white-space: nowrap; }
.tier .em { width: 16px; height: 16px; }
.tier--sm { height: 24px; padding: 0 7px 0 4px; gap: 4px; font-size: var(--fs-xs); }
.tier--lg { height: 38px; padding: 0 12px 0 8px; gap: 8px; font-size: var(--fs-lg); }
.tier--lg .em { width: 24px; height: 24px; }
.tier--xl { height: 48px; padding: 0 14px 0 8px; gap: 8px; font-size: var(--fs-xl); border-radius: var(--r-md); }
.tier--xl .em { width: 32px; height: 32px; }
.tier.tier--s-plus { box-shadow: var(--sh-gold); }
.em .m { fill: var(--em-1); } .em .d { fill: var(--em-2); } .em .l { fill: var(--em-3); } .em .o { fill: #07090d; }
.em .r { fill: #c8423b; } .em .R { fill: #f08a7e; } .em .y { fill: #ffe27a; } .em .k { fill: #1d2433; }
.em .h { fill: #8a5a32; } .em .g { fill: #5fe3d6; } .em .G { fill: #f4e6ff; }
.em .p { fill: #eadbb4; } .em .w { fill: #fff; }
.tier--s-plus .em { filter: drop-shadow(0 0 4px rgb(246 201 69 / 0.65)); }

/* ---- title, region, flags, trends, results */
.tline { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); color: var(--title, var(--text-2)); }
.tline svg { width: 16px; height: 16px; color: var(--title); }
.tline__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 700; color: var(--title); background: color-mix(in srgb, var(--title) 14%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--title) 35%, transparent); }
.title-chip svg { width: 16px; height: 16px; }
.region { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--eu-bg, #172443); color: var(--info); font: 700 var(--fs-xs) / 1 var(--f-display); letter-spacing: 0.04em; }
.flag { display: inline-block; padding: 2px 6px; border-radius: 6px; font: 800 0.66rem / 1.4 var(--f-body); text-transform: uppercase; letter-spacing: 0.05em; color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); vertical-align: 2px; }
.flag--lg { font-size: var(--fs-xs); padding: 4px 8px; }
.trend { display: inline-block; font-size: 0.62em; vertical-align: 0.2em; }
.trend--up { color: var(--up); } .trend--down { color: var(--down); } .trend--new { color: var(--info); font-size: 0.5em; vertical-align: 0.3em; }
.verb { font-weight: 700; font-size: var(--fs-sm); }
.verb--promoted { color: var(--up); } .verb--placed { color: var(--info); } .verb--demoted, .verb--failed { color: var(--down); } .verb--stays { color: var(--text-2); }
/* score: the main result in the outcome colour, the parts of a high test small and grey under it */
.score { display: inline-grid; gap: 1px; font-size: var(--fs-sm); line-height: 1.3; }
.score__main { font-weight: 700; white-space: nowrap; }
.score__parts { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.score--win .score__main { color: var(--up); } .score--loss .score__main { color: var(--down); } .score--draw .score__main { color: var(--text-2); }
.win { color: var(--up); } .loss { color: var(--down); }

/* ---- tabs */
.tabs { display: flex; gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-lg); background: var(--bg-1); border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; position: relative; }   /* relative: hidden screen-reader text stays inside the strip */
/* when the strip scrolls sideways (phones), its edge fades out so people see there is more; site.js marks the ends */
.tabs.can-scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.tabs.can-scroll.at-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.tabs.can-scroll.at-middle { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; height: 42px; padding: 0 var(--s-4) 0 var(--s-3); border-radius: var(--r-md);
  color: var(--text-2); font: 700 var(--fs-sm) / 1 var(--f-display); letter-spacing: 0.03em; text-decoration: none; border: 1px solid transparent;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease; }
.tab .em, .tab > svg { width: 24px; height: 24px; }
.tab:hover { background: var(--bg-2); color: var(--text); }
.tab__count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--bg-3); color: var(--text-2); font: 700 11px / 20px var(--f-body); text-align: center; font-variant-numeric: tabular-nums; }
.tab--empty { color: var(--faint); }
.tab--empty .em { opacity: 0.45; }
.tab[aria-current="page"] { background: var(--bg-3); color: var(--text); border-color: var(--border-strong); box-shadow: var(--sh-1); }
.tab[class*="tier--"][aria-current="page"] { color: var(--t-fg); border-color: color-mix(in srgb, var(--t-bd) 70%, transparent); background: color-mix(in srgb, var(--t-bd) 16%, var(--bg-2)); }

/* ---- cards and panels: one surface, one border, one radius; no boxes inside boxes */
.card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); }
.card--pad { padding: var(--s-5); }

/* ---- leaderboard row (the visual hero): rank · head · name + title · points · (region) · tier · › */
.rows { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.lrow { position: relative; display: grid; grid-template-columns: 56px 40px minmax(0, 1fr) 64px 92px 20px; align-items: center; gap: var(--s-3);
  min-height: 64px; padding: 0 var(--s-3) 0 0; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--border);
  text-decoration: none; color: inherit; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease; }
.lrow--region { grid-template-columns: 56px 40px minmax(0, 1fr) 64px 56px 92px 20px; }
.lrow--compact { grid-template-columns: 48px 36px minmax(0, 1fr) auto auto; min-height: 58px; }
.lrow:hover { background: var(--bg-3); border-color: var(--border-strong); transform: translateY(-1px); }
.lrow__rank { align-self: stretch; display: grid; place-items: center; border-radius: var(--r-lg) 0 0 var(--r-lg); font-size: var(--fs-xl); color: var(--muted); background: var(--bg-1); border-right: 1px solid var(--border); }
.lrow--1 { border-color: color-mix(in srgb, var(--p1) 45%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--p1) 13%, var(--bg-2)), var(--bg-2) 55%); }
.lrow--2 { border-color: color-mix(in srgb, var(--p2) 35%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--p2) 9%, var(--bg-2)), var(--bg-2) 55%); }
.lrow--3 { border-color: color-mix(in srgb, var(--p3) 40%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--p3) 11%, var(--bg-2)), var(--bg-2) 55%); }
.lrow--1 .lrow__rank { color: var(--p1); background: color-mix(in srgb, var(--p1) 10%, var(--bg-1)); }
.lrow--2 .lrow__rank { color: var(--p2); background: color-mix(in srgb, var(--p2) 8%, var(--bg-1)); }
.lrow--3 .lrow__rank { color: var(--p3); background: color-mix(in srgb, var(--p3) 9%, var(--bg-1)); }
.lrow--1:hover { border-color: color-mix(in srgb, var(--p1) 75%, var(--border)); }
.lrow__head { width: 40px; height: 40px; border-radius: var(--r-sm); image-rendering: pixelated; background: var(--bg-3); }
.lrow--compact .lrow__head { width: 36px; height: 36px; }
.lrow__head--empty { display: block; border: 1px dashed var(--border-strong); background: transparent; }
.lrow__main { display: grid; gap: 2px; min-width: 0; }
.lrow__name { font: 700 var(--fs-lg) / 1.2 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow__sub { display: flex; align-items: center; gap: var(--s-2); min-width: 0; color: var(--muted); font-size: var(--fs-sm); }
.lrow__extra { font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; }
.lrow__pts { display: grid; justify-items: end; line-height: 1; }
.lrow__pts .num { font-size: var(--fs-xl); }
.lrow__pts small { margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.lrow__region { display: grid; place-items: center; }
.lrow__tier { display: grid; justify-items: start; }
.lrow__go { width: 16px; height: 16px; color: var(--faint); transition: transform var(--t-fast) ease, color var(--t-fast) ease; }
.lrow:hover .lrow__go { color: var(--accent-text); transform: translateX(2px); }
.lrow--open { border-style: dashed; background: transparent; grid-template-columns: 48px 36px minmax(0, 1fr) auto; }
.lrow--open .lrow__rank { background: transparent; color: var(--faint); }
.lrow--open .lrow__name { color: var(--muted); }
.lrow__cta { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.rows__head { display: grid; grid-template-columns: 56px 40px minmax(0, 1fr) 64px 92px 20px; gap: var(--s-3); padding: 0 var(--s-3) var(--s-2) 0; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.rows__head--region { grid-template-columns: 56px 40px minmax(0, 1fr) 64px 56px 92px 20px; }
.rows__head > :first-child { text-align: center; }
.rows__head > :nth-child(4) { text-align: right; }

/* ---- chips (filters) */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--bg-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background-color var(--t-fast) ease; }
.chip:hover { color: var(--text); border-color: var(--muted); }
.chip[aria-current="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.chip small { color: inherit; opacity: 0.7; font-size: var(--fs-xs); }
.chip--head { padding-left: 5px; }
.chip--head .head { width: 22px; height: 22px; border-radius: 50%; }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip__dot.verb--promoted { color: var(--up); } .chip__dot.verb--demoted { color: var(--down); } .chip__dot.verb--placed { color: var(--info); }
.chip[aria-current="true"] .chip__dot { color: var(--accent-ink); }

/* ---- search field + suggestions */
.searchbox { display: flex; align-items: center; gap: var(--s-2); height: 40px; padding: 0 var(--s-2) 0 var(--s-3); border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--border-strong); color: var(--muted); transition: border-color var(--t-fast) ease; }
.searchbox:focus-within { border-color: var(--accent); }
.searchbox input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: 400 var(--fs-sm) var(--f-body); outline: none; }
.searchbox input::placeholder { color: var(--faint); }
.searchbox input::-webkit-search-cancel-button { display: none; }
.searchbox svg { width: 16px; height: 16px; }
.kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border-strong); font: 600 11px / 1 var(--f-body); color: var(--muted); }
.suggest { padding: var(--s-1); border-radius: var(--r-lg); background: var(--bg-1); border: 1px solid var(--border-strong); box-shadow: var(--sh-2); }
.suggest[hidden] { display: none; }
.suggest__list { list-style: none; padding: 0; max-height: 60vh; overflow: auto; }
.suggest__list:empty { display: none; }
.suggest a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); text-decoration: none; color: var(--text); }
.suggest a[aria-selected="true"], .suggest a:hover { background: var(--bg-3); }
.suggest .head { width: 28px; height: 28px; border-radius: 6px; image-rendering: pixelated; }
.suggest .tier { margin-left: auto; }
.search__name { display: grid; min-width: 0; font-weight: 600; }
.search__name small { font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
.suggest__state { margin: 0; padding: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.suggest__state:empty { display: none; }
.suggest__state.is-loading { display: grid; gap: var(--s-2); padding: var(--s-2); color: transparent; font-size: 0; }
.suggest__state.is-loading::before, .suggest__state.is-loading::after { content: ""; height: 40px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }

/* ---- accordion */
.acc { border-radius: var(--r-lg); background: var(--bg-1); border: 1px solid var(--border); overflow: hidden; }
.acc details + details { border-top: 1px solid var(--border); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none; font-weight: 600; transition: background-color var(--t-fast) ease; }
.acc summary:hover { background: var(--bg-2); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--bg-3); color: var(--muted); font-weight: 700; }
.acc details[open] summary::after { content: "−"; color: var(--gold-text); background: var(--gold-soft); }
.acc details > p, .acc__body { padding: 0 var(--s-5) var(--s-5); color: var(--text-2); max-width: 72ch; }

/* ---- modal (quick view, a native <dialog>) */
.modal { width: min(440px, calc(100vw - 32px)); padding: 0; border-radius: var(--r-xl); background: var(--bg-1); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--sh-2); overflow: hidden; }
.modal::backdrop { background: rgb(4 6 10 / 0.72); backdrop-filter: blur(3px); }
.modal[open] { animation: pop var(--t-med) var(--ease) both; }
.modal__close { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 1; }
.modal__top { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-6) var(--s-5) var(--s-5); text-align: center; background: radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--t-bd, var(--gold)) 24%, transparent), transparent 70%); }
.modal__skin { height: 200px; width: auto; filter: drop-shadow(0 12px 16px rgb(0 0 0 / 0.6)); }
.modal__name { font-size: var(--fs-2xl); }
.modal__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
.modal__stats > div { display: grid; justify-items: center; align-content: center; gap: 6px; padding: var(--s-4) var(--s-2); }
.modal__stats > div + div { border-left: 1px solid var(--border); }
.modal__big { font-size: var(--fs-xl); }
.modal__actions { display: flex; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); }
.modal__actions .btn { flex: 1; }

/* ---- empty states, pager, legend */
.empty { padding: var(--s-5); text-align: center; color: var(--text-2); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }
.empty p { margin-bottom: var(--s-3); }
.empty-state { display: grid; justify-items: center; gap: var(--s-2); margin-top: var(--s-4); padding: clamp(28px, 5vw, 44px) var(--s-5); text-align: center; border-radius: var(--r-lg); border: 1px dashed var(--border-strong);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--t-bd, var(--gold)) 14%, transparent), transparent 70%), var(--bg-1); }
.empty-state__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s-1); border-radius: 18px; background: var(--bg-3); color: var(--gold-text); }
.empty-state__icon svg { width: 30px; height: 30px; }
.empty-state__icon .em { width: 48px; height: 48px; }
.empty-state__title { font-size: var(--fs-xl); }
.empty-state__text { max-width: 46ch; margin-bottom: var(--s-2); color: var(--text-2); }
.empty-state .actions { justify-content: center; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.pager > :last-child { justify-self: end; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }
.legend .trend { margin-right: 3px; font-size: 0.85em; vertical-align: 0.05em; }
.legend .trend--new { font-size: 0.7em; vertical-align: 0.15em; }
.legend__note { color: var(--muted); }

/* ---- skeletons: same height as the real rows, so nothing jumps */
.skel { min-height: 64px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%); background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- theme: a faint rune lattice, a scroll divider */
.runes { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none' stroke='%23e2b85c' stroke-width='1.2' stroke-linecap='round' opacity='.055'%3E%3Cpath d='M12 10v16M12 18l6-6M12 18l6 6M44 8l-6 10h12l-6 10M74 10v16M68 14h12M70 22h8M18 56l8 12M26 56l-8 12M48 54v16M42 60l6-6 6 6M78 54l-6 8h12l-6 8'/%3E%3C/svg%3E"); }
.divider { position: relative; height: 18px; margin: var(--s-7) 0; }
.divider::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 55%, transparent) 20%, color-mix(in srgb, var(--gold) 55%, transparent) 80%, transparent); }
.divider::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; translate: -50% -50%; rotate: 45deg; border: 1px solid var(--gold); background: var(--bg-0); }

/* ---- toasts and the page-load bar (site.js) */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: var(--s-2); justify-items: end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--s-3); min-width: 260px; max-width: min(360px, calc(100vw - 36px)); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-radius: var(--r-lg); background: var(--bg-1); border: 1px solid var(--border-strong); font-size: var(--fs-sm); font-weight: 500; box-shadow: var(--sh-2); animation: pop var(--t-med) var(--ease) both; }
.toast.is-leaving { animation: fade 0.2s ease reverse forwards; }
.toast svg { width: 18px; height: 18px; color: var(--up); }
.toast button { margin-left: auto; height: 30px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer; }
.progress { position: fixed; top: 0; left: 0; z-index: 95; height: 3px; width: 0; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: progress 6s cubic-bezier(0.1, 0.6, 0.2, 1) forwards; }
.progress.is-done { width: 100% !important; animation: none; opacity: 0; transition: width 0.2s ease, opacity 0.3s 0.2s ease; }
@keyframes progress { 0% { width: 0; } 30% { width: 45%; } 70% { width: 75%; } 100% { width: 92%; } }

@media (max-width: 640px) {
  .hide-sm { display: none; }
  .show-sm { display: inline; }
  .lrow, .lrow--region { grid-template-columns: 44px 36px minmax(0, 1fr) auto auto; gap: var(--s-2); min-height: 60px; padding-right: var(--s-2); }
  .lrow__head { width: 36px; height: 36px; }
  .lrow__go, .lrow__region { display: none; }
  .lrow__rank { font-size: var(--fs-lg); }
  .lrow__name { font-size: var(--fs-base); }
  .lrow__pts .num { font-size: var(--fs-lg); }
  .lrow__extra { display: none; }
  .lrow--compact { grid-template-columns: 40px 32px minmax(0, 1fr) auto auto; }
  .lrow--compact .lrow__head { width: 32px; height: 32px; }
  .rows__head { display: none; }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ---- motion: smooth page changes (browsers with cross-document view transitions), the header stays put */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(root) { animation: 0.16s ease both vt-out; }
::view-transition-new(root) { animation: 0.28s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* rows come in one after another */
.rows > li, .rrows > li { animation: rise 0.42s var(--ease) both; }
.rows > li:nth-child(2), .rrows > li:nth-child(2) { animation-delay: 0.03s; }
.rows > li:nth-child(3), .rrows > li:nth-child(3) { animation-delay: 0.06s; }
.rows > li:nth-child(4), .rrows > li:nth-child(4) { animation-delay: 0.09s; }
.rows > li:nth-child(5), .rrows > li:nth-child(5) { animation-delay: 0.12s; }
.rows > li:nth-child(6), .rrows > li:nth-child(6) { animation-delay: 0.15s; }
.rows > li:nth-child(7), .rrows > li:nth-child(7) { animation-delay: 0.18s; }
.rows > li:nth-child(8), .rrows > li:nth-child(8) { animation-delay: 0.21s; }
.rows > li:nth-child(9), .rrows > li:nth-child(9) { animation-delay: 0.24s; }
.rows > li:nth-child(n+10), .rrows > li:nth-child(n+10) { animation-delay: 0.27s; }

/* skins fade in when loaded (only with JS, so they never stay hidden) */
/* heads are small and always visible (no fade); only the big skins fade in */
.js img.podium__skin, .js img.phead__skin, .js img.pod__skin { opacity: 0; transition: opacity 0.35s ease, transform var(--t-med) var(--ease); }
.js img.is-loaded { opacity: 1; }
.lrow:hover .lrow__head { transform: scale(1.08); }

/* a light sweep over first place now and then */
.lrow--1 .lrow__rank, .podium__step--1 .podium__plinth { position: relative; overflow: hidden; }
.lrow--1 .lrow__rank::after, .podium__step--1 .podium__plinth::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgb(255 236 170 / 0.18), transparent); animation: sheen 6s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes sheen { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(320%); } }

/* ---- hover card (site.js) */
.tip { position: fixed; z-index: 99; max-width: 260px; padding: 8px 11px; border-radius: var(--r-md); background: #0d1119; border: 1px solid var(--border-strong);
  box-shadow: var(--sh-2); font-size: var(--fs-xs); line-height: 1.45; color: var(--text-2); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.12s ease, transform 0.12s ease; }
.tip.is-below { transform: translateY(-4px); }
.tip.is-on { opacity: 1; transform: none; }
.tip strong { display: block; font: 700 var(--fs-sm) / 1.3 var(--f-display); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .ds *, .ds *::before, .ds *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}