/* TypeFlow v6.6.21 — rank column alignment + gold/silver/bronze podium */

/* Keep the rank column physically identical for every row. */
.leaderboard-table-card th:first-child,
.leaderboard-table-card td:first-child{
  width:68px !important;
  min-width:68px !important;
  max-width:68px !important;
  text-align:center !important;
  padding-left:12px !important;
  padding-right:12px !important;
}

.leaderboard-rank-cell{
  vertical-align:middle !important;
}

.leaderboard-rank{
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:34px !important;
  padding:0 !important;
  margin:0 auto !important;
  display:grid !important;
  place-items:center !important;
  border-radius:10px !important;
  box-sizing:border-box !important;
  font-variant-numeric:tabular-nums;
  line-height:1 !important;
}

/* #1 — gold crown */
.leaderboard-rank.rank-1{
  color:#9c6900 !important;
  border:1px solid color-mix(in srgb,#e3ad26 55%,var(--line)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,#ffd86b 28%,var(--surface)),
      color-mix(in srgb,#f5b936 17%,var(--surface))) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 6px 16px rgba(200,144,19,.13) !important;
}

/* #2 — silver */
.leaderboard-rank.rank-2{
  color:#697386 !important;
  border:1px solid color-mix(in srgb,#aeb8c8 55%,var(--line)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,#e5eaf1 30%,var(--surface)),
      color-mix(in srgb,#b7c0cf 17%,var(--surface))) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 5px 13px rgba(121,134,153,.08) !important;
}

/* #3 — bronze */
.leaderboard-rank.rank-3{
  color:#986047 !important;
  border:1px solid color-mix(in srgb,#c88762 52%,var(--line)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,#dda07c 24%,var(--surface)),
      color-mix(in srgb,#b87554 14%,var(--surface))) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 5px 13px rgba(146,89,61,.08) !important;
}

/* #4+ — clean neutral number, but same physical box so rows never shift. */
.leaderboard-rank.rank-normal{
  color:var(--muted) !important;
  border:1px solid transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:11px !important;
}

/* Force the podium symbol/number to exactly the same optical center. */
.leaderboard-rank .rank-symbol{
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  font-style:normal !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
}
.leaderboard-rank.rank-1 .rank-symbol{
  font-size:13px !important;
}

/* First three rows get only a very subtle background cue.
   Use identical cell padding so player/country/WPM columns don't drift. */
.leaderboard-table-card tbody tr.leaderboard-champion-row{
  background:linear-gradient(90deg,color-mix(in srgb,#f4bb39 5%,transparent),transparent 50%) !important;
}
.leaderboard-table-card tbody tr td{
  box-sizing:border-box !important;
}

/* The player column had visual drift because the first column contents
   had different widths. Give the second column a fixed left alignment too. */
.leaderboard-table-card th:nth-child(2),
.leaderboard-table-card td:nth-child(2){
  padding-left:20px !important;
}

/* Pagination alignment: center block must stay centered even if left/right
   summaries have different text widths. */
.leaderboard-pagination{
  grid-template-columns:1fr minmax(210px,auto) 1fr !important;
}
.leaderboard-page-controls{
  justify-self:center !important;
}
.leaderboard-page-summary{
  justify-self:start !important;
}
.leaderboard-page-current{
  justify-self:end !important;
}

/* Prevent layout nudge from bold/current page buttons. */
.page-number,
.page-arrow{
  box-sizing:border-box !important;
}
.page-number.active{
  transform:none !important;
}

@media (max-width:760px){
  .leaderboard-table-card th:first-child,
  .leaderboard-table-card td:first-child{
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }
  .leaderboard-rank{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:30px !important;
  }
}