/* ==========================================================================
   LEADERBOARDS STYLES
   Extends css/style.css + css/profile.css (tabs/card). `.rank-row` is one
   repeatable rank line — meant to become a PHP loop ordered by the relevant
   column (rating, points, honor, gold, totaltime) later.
   ========================================================================== */

.rank-row{
  display:grid; grid-template-columns:50px 1fr 70px 140px 110px;
  align-items:center; gap:12px; padding:14px 22px; border-bottom:1px solid var(--border);
  font-size:0.86rem; color:var(--text-dim);
}
.rank-row:last-child{border-bottom:none;}
.rank-head{
  font-size:0.66rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim);
  padding-top:16px; padding-bottom:12px;
}
.rank-num{font-family:var(--font-display); font-weight:700; color:var(--text-dim); font-size:1rem;}
.rank-num.gold{color:#ffd700; text-shadow:0 0 10px rgba(255,215,0,0.4);}
.rank-num.silver{color:#c8ccd4; text-shadow:0 0 10px rgba(200,204,212,0.3);}
.rank-num.bronze{color:#cd8032; text-shadow:0 0 10px rgba(205,128,50,0.3);}
.rank-name{font-weight:600; color:var(--text);}
.rank-class-icon{width:26px; height:auto; filter:drop-shadow(0 0 6px rgba(111,216,255,0.25));}
.rank-value{color:var(--frost-glow); font-weight:700; text-align:right; font-family:var(--font-display);}

@media(max-width:700px){
  .rank-row{grid-template-columns:32px 1fr 90px;}
  .rank-row > div:nth-child(3), .rank-row > div:nth-child(4){display:none;}
}

/* Hover paperdoll preview on rank-name now lives globally in style.css as [data-preview]. */
.rank-name[data-preview]{position:relative; cursor:default; width:fit-content;}