/* TypeFlow v6.6.20 — real leaderboard ranks + server-side pagination */

/* #1 is the only decorative rank. Everyone else is a clean number. */
.leaderboard-rank.rank-normal{
  width:auto;
  min-width:30px;
  height:30px;
  padding:0 7px;
  background:transparent !important;
  border-color:transparent !important;
  color:var(--muted);
  box-shadow:none !important;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.leaderboard-rank.rank-1{
  width:31px;
  min-width:31px;
  height:31px;
  color:#9a6800;
  border-color:color-mix(in srgb,#e9b833 48%,var(--line));
  background:color-mix(in srgb,#ffd96a 23%,var(--surface));
  box-shadow:0 5px 14px rgba(205,151,27,.11);
}
.leaderboard-rank.rank-1 i{
  font-style:normal;
  font-size:13px;
}
.leaderboard-champion-row{
  background:linear-gradient(90deg,color-mix(in srgb,#ffc848 6%,transparent),transparent 46%);
}

/* Kill the old #2/#3 decorative styles if cached CSS is still loaded earlier. */
.leaderboard-rank.rank-2,
.leaderboard-rank.rank-3{
  color:var(--muted) !important;
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Pagination */
.leaderboard-pagination{
  display:grid;
  grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr);
  align-items:center;
  gap:18px;
  margin-top:14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
}
.leaderboard-page-summary,
.leaderboard-page-current{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.leaderboard-page-summary strong,
.leaderboard-page-current strong{
  color:var(--text);
  font-size:10.5px;
}
.leaderboard-page-current{
  justify-content:flex-end;
}
.leaderboard-page-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.page-number,
.page-arrow{
  min-width:32px;
  height:32px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  color:var(--muted);
  font-size:10.5px;
  font-weight:800;
  text-decoration:none;
  transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease;
}
.page-number:hover,
.page-arrow:hover{
  border-color:color-mix(in srgb,var(--primary) 48%,var(--line));
  color:var(--primary);
  background:var(--primary-soft);
  transform:translateY(-1px);
}
.page-number.active{
  color:#fff;
  border-color:var(--primary);
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 6px 15px color-mix(in srgb,var(--primary) 22%,transparent);
}
.page-arrow{
  font-size:18px;
  line-height:1;
}
.page-arrow.is-disabled{
  pointer-events:none;
  opacity:.34;
}
.page-ellipsis{
  min-width:22px;
  text-align:center;
  color:var(--faint);
  font-size:13px;
  letter-spacing:.1em;
}

@media (max-width:760px){
  .leaderboard-pagination{
    grid-template-columns:1fr;
    gap:9px;
  }
  .leaderboard-page-summary,
  .leaderboard-page-current{
    justify-content:center;
  }
  .leaderboard-page-controls{
    order:-1;
    flex-wrap:wrap;
  }
  .page-number,
  .page-arrow{
    min-width:30px;
    height:30px;
  }
}