:root {
  color-scheme: dark;
  --ink: #eef3e9;
  --muted: #929b92;
  --dim: #5d675e;
  --base: #050706;
  --surface: #0a0e0b;
  --line: #232b24;
  --line-strong: #3b453c;
  --acid: #c8ff3d;
  --danger: #ff735f;
  --mono: "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--base);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, select { color: inherit; font: inherit; }
button, select { cursor: pointer; }
[hidden] { display: none !important; }
::selection { color: var(--base); background: var(--acid); }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  inset-inline-start: 1rem;
  padding: .75rem 1rem;
  color: var(--base);
  background: var(--acid);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }
.boot-scan {
  position: fixed;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(200,255,61,.05), transparent);
  transform: translateY(-100%);
  animation: scan 1.1s ease-out both;
}
.rank-nav {
  min-height: 4.25rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  direction: ltr;
  padding: 0 clamp(1.1rem,4vw,4.2rem);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; justify-self: start; gap: .85rem; }
.brand-mark { color: var(--acid); font: 800 1.5rem/1 var(--mono); letter-spacing: -.12em; }
.brand > span:last-child { display: grid; }
.brand strong { font: 800 .86rem/1 var(--mono); letter-spacing: .18em; }
.brand small { margin-top: .28rem; color: var(--dim); font: .56rem/1 var(--mono); letter-spacing: .2em; }
.network-state { display: flex; align-items: center; gap: .6rem; color: var(--muted); font: .65rem/1 var(--mono); }
.network-state i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--dim); }
.network-state.is-online i { background: var(--acid); box-shadow: 0 0 1rem rgba(200,255,61,.8); }
.rank-nav nav { justify-self: end; display: flex; align-items: center; gap: 1.6rem; color: var(--muted); font: .68rem/1 var(--mono); }
.rank-nav nav a:hover { color: var(--acid); }
.rank-nav .nav-action { padding: .72rem .9rem; color: var(--base); background: var(--acid); white-space: nowrap; }
.language-picker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--dim);
  white-space: nowrap;
}
.language-picker > span {
  font-size: .54rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.language-picker select {
  width: 7.4rem;
  min-height: 2.1rem;
  padding: 0 1.6rem 0 .55rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  outline: 0;
  color: var(--ink);
  background-color: var(--base);
  font-size: .66rem;
}
.language-picker select:focus-visible {
  border-color: var(--acid);
  box-shadow: 0 0 0 1px var(--acid);
}
main { max-width: 96rem; margin: 0 auto; padding: 0 clamp(1.1rem,4vw,4.2rem); }
.eyebrow { margin: 0 0 .45rem; color: var(--acid); font: 700 .6rem/1.3 var(--mono); letter-spacing: .13em; }

.rank-overview {
  padding: 1.5rem 0 0;
  border-bottom: 1px solid var(--line-strong);
  animation: overview-in .45s ease-out both;
}
.overview-heading {
  display: grid;
  grid-template-columns: minmax(12rem,.7fr) minmax(0,1fr);
  align-items: end;
  gap: 3rem;
  padding-bottom: 1.25rem;
}
.overview-heading h1 {
  margin: 0;
  font-size: clamp(2.1rem,3.7vw,3.8rem);
  line-height: .95;
  letter-spacing: -.06em;
}
.overview-heading > p {
  max-width: 45rem;
  justify-self: end;
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.summary-line {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  margin: 0;
  border-top: 1px solid var(--line-strong);
}
.summary-line div { padding: .9rem 0 1rem; }
.summary-line div + div { padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--line); }
.summary-line dt { color: var(--dim); font: .58rem/1 var(--mono); letter-spacing: .08em; }
.summary-line dd { margin: .45rem 0 0; font: 550 1.25rem/1 var(--mono); }
.load-state {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(255,115,95,.65);
  background: rgba(255,115,95,.04);
}
.load-state span { color: var(--danger); font: 700 .63rem/1 var(--mono); }
.load-state p { margin: 0; color: #d3b2ac; font-size: .75rem; }
.load-state button { border: 0; color: var(--danger); background: transparent; font: .65rem/1 var(--mono); }

.leaderboards { padding: 1.35rem 0 5rem; border-bottom: 1px solid var(--line); }
.leaderboards > header { display: flex; align-items: end; justify-content: space-between; }
.leaderboards h2 { margin: 0; font-size: 1.35rem; line-height: 1; letter-spacing: -.03em; }
.rank-notes h2, .rank-cta h2 { margin: 0; font-size: clamp(2.3rem,4.3vw,4.6rem); line-height: .97; letter-spacing: -.06em; }
.sync-tools { display: flex; align-items: center; gap: 1rem; }
.sync-tools time { color: var(--dim); font: .6rem/1 var(--mono); }
.refresh-button { min-height: 2.8rem; padding: 0 .9rem; border: 1px solid var(--line-strong); color: var(--muted); background: transparent; font: .65rem/1 var(--mono); }
.refresh-button span[aria-hidden="true"] { display: inline-block; margin-inline-end: .5rem; }
.refresh-button:hover { color: var(--acid); border-color: var(--acid); }
.leaderboards.is-loading .refresh-button span { animation: spin .7s linear infinite; }
.rank-tabs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: 1.1rem;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.rank-tabs button {
  min-height: 4rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0 1.2rem;
  border: 0;
  color: var(--dim);
  background: transparent;
  text-align: left;
}
.rank-tabs button + button { border-inline-start: 1px solid var(--line); }
.rank-tabs button > span, .rank-tabs button small { font: .6rem/1 var(--mono); }
.rank-tabs button b { min-width: 0; color: var(--muted); font-size: .84rem; line-height: 1.25; overflow-wrap: anywhere; }
.rank-tabs button[aria-selected="true"] { color: var(--acid); background: rgba(200,255,61,.045); }
.rank-tabs button[aria-selected="true"] b { color: var(--ink); }
.ranking-panel { outline: 0; }
.ranking-explainer { min-height: 3.7rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.ranking-explainer > div { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.ranking-explainer strong { font-size: .88rem; }
.system-seed-count { padding: .32rem .48rem; color: var(--muted); border: 1px solid var(--line); font: .58rem/1.35 var(--mono); }
.system-seed-count b { color: var(--ink); font-weight: 600; }
.ranking-explainer p { min-width: 0; max-width: 43rem; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }
.ranking-columns, .ranking-row {
  display: grid;
  grid-template-columns: 5.2rem minmax(13rem,1.1fr) minmax(16rem,1.5fr) minmax(8rem,.55fr);
  gap: 1rem;
  align-items: center;
}
.ranking-columns { min-height: 2.25rem; color: var(--dim); border-bottom: 1px solid var(--line-strong); font: .56rem/1 var(--mono); letter-spacing: .08em; }
.ranking-row {
  position: relative;
  min-height: 5.1rem;
  border-bottom: 1px solid var(--line);
  animation: row-in .4s both;
  transition: background-color .18s ease;
}
.ranking-row::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: var(--signal,0%);
  max-width: 100%;
  height: 1px;
  background: var(--acid);
  opacity: .45;
}
.ranking-row:hover { background: linear-gradient(90deg,rgba(200,255,61,.035),transparent); }
.rank-number { color: var(--dim); font: 700 .72rem/1 var(--mono); }
.rank-number.is-leading { color: var(--acid); }
.rank-identity { min-width: 0; }
.rank-identity strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .96rem; }
.rank-identity small { display: block; margin-top: .35rem; color: var(--dim); font: .59rem/1.4 var(--mono); }
.rank-record { min-width: 0; color: var(--muted); font: .68rem/1.6 var(--mono); overflow-wrap: anywhere; }
.rank-number, .rank-value { direction: ltr; unicode-bidi: isolate; }
.rank-value { color: var(--acid); font: 600 1.35rem/1 var(--mono); text-align: end; }
.rank-value small { display: block; margin-top: .4rem; color: var(--dim); font-size: .55rem; letter-spacing: .08em; }
.ranking-empty { padding: 2.7rem 0; border-bottom: 1px solid var(--line); }
.ranking-empty strong { font-size: 1.3rem; }
.ranking-empty p { max-width: 36rem; margin: .8rem 0 0; color: var(--muted); line-height: 1.6; }
.ranking-empty a { display: inline-block; margin-top: 1.5rem; color: var(--acid); font: .68rem/1 var(--mono); border-bottom: 1px solid var(--acid); padding-bottom: .4rem; }

.rank-notes {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(3rem,8vw,9rem);
  padding: 5.5rem 0;
  border-bottom: 1px solid var(--line);
}
.rank-notes dl { margin: 0; border-top: 1px solid var(--line-strong); }
.rank-notes dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.rank-notes dt { color: var(--ink); font-weight: 650; }
.rank-notes dd { min-width: 0; margin: 0; color: var(--muted); line-height: 1.65; overflow-wrap: anywhere; }
.rank-cta {
  min-height: 27rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}
.rank-cta a { min-width: 13rem; min-height: 3.6rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.2rem; color: var(--base); background: var(--acid); font: 800 .7rem/1 var(--mono); }
.rank-footer {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.1rem,4vw,4.2rem);
  color: var(--dim);
  border-top: 1px solid var(--line);
  font: .59rem/1 var(--mono);
  letter-spacing: .08em;
}

@keyframes scan { to { transform: translateY(110%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes row-in { from { opacity: 0; transform: translateY(.55rem); } }
@keyframes overview-in { from { opacity: 0; transform: translateY(.35rem); } }

html[dir="rtl"] .rank-tabs button { text-align: right; }
html[dir="rtl"] .rank-nav nav { direction: ltr; }
html[dir="rtl"] .rank-nav nav a,
html[dir="rtl"] .rank-nav .language-picker {
  direction: rtl;
}
html[dir="rtl"] .ranking-row:hover {
  background: linear-gradient(270deg,rgba(200,255,61,.035),transparent);
}
html[dir="rtl"] .rank-cta a span[aria-hidden="true"] {
  transform: scaleX(-1);
}

@media (max-width: 850px) {
  .rank-nav { grid-template-columns: 1fr auto; }
  .network-state { display: none; }
  .rank-nav nav { gap: .8rem; }
  .language-picker > span { display: none; }
  .overview-heading { grid-template-columns: 1fr; gap: .7rem; }
  .overview-heading > p { justify-self: start; }
  .summary-line { grid-template-columns: repeat(2,1fr); }
  .summary-line div:nth-child(3) { padding-inline-start: 0; border-top: 1px solid var(--line); border-inline-start: 0; }
  .summary-line div:nth-child(4) { border-top: 1px solid var(--line); }
  .ranking-columns, .ranking-row { grid-template-columns: 4rem minmax(11rem,1fr) minmax(11rem,1fr) 7rem; }
  .rank-notes { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .rank-nav { min-height: 4.7rem; padding-inline: 1rem; }
  .rank-nav nav a:first-child { display: none; }
  .brand small { display: none; }
  .language-picker select { width: 6.7rem; }
  main { padding-inline: 1rem; }
  .rank-overview { padding-top: 1.2rem; }
  .overview-heading { padding-bottom: 1rem; }
  .overview-heading h1 { font-size: 2.5rem; }
  .overview-heading > p { font-size: .72rem; }
  .summary-line dd { font-size: .95rem; }
  .leaderboards { padding: 1.1rem 0 4rem; }
  .leaderboards > header { align-items: flex-start; gap: 1.5rem; }
  .sync-tools time { display: none; }
  .rank-tabs button { min-height: 5.2rem; grid-template-columns: 1fr auto; gap: .4rem; padding: .8rem; }
  .rank-tabs button > span { grid-column: 1/-1; }
  .rank-tabs button b { font-size: .72rem; }
  .ranking-explainer { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .ranking-columns { display: none; }
  .ranking-row {
    grid-template-columns: 3rem 1fr auto;
    gap: .7rem;
    min-height: 6.4rem;
    padding: .8rem 0;
  }
  .rank-record { grid-column: 2/4; }
  .rank-value { grid-column: 3; grid-row: 1; }
  .rank-notes { padding: 5rem 0; }
  .rank-notes dl div { grid-template-columns: 1fr; gap: .6rem; }
  .rank-cta { align-items: flex-start; flex-direction: column; justify-content: center; }
  .rank-cta a { width: 100%; }
  .rank-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: .7rem; padding-inline: 1rem; }
}

@media (max-width: 430px) {
  .rank-nav nav { gap: .5rem; }
  .rank-nav .nav-action { padding-inline: .65rem; font-size: .61rem; }
  .language-picker select { width: 5.9rem; padding-inline: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}