.rank-page{ padding:40px 0 60px; max-width:640px; }

.rank-hero{
  text-align:center;
  padding:40px 20px 32px;
  background:
    radial-gradient(circle at 50% 6%, color-mix(in srgb, var(--rank-color, var(--gold)) 28%, transparent), transparent 64%),
    var(--sand-light);
  border:1px solid var(--line);
  border-radius:20px;
}

.rank-hero-badge{
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
}
.rank-hero-badge .rank-medal{
  width:132px !important;height:132px !important;
  box-shadow:
    0 14px 32px color-mix(in srgb, var(--rank-color, #000) 38%, transparent),
    0 0 0 1px var(--rank-color-dark, #7a5400),
    inset 0 1px 2px rgba(255,255,255,.55),
    inset 0 -2px 4px rgba(0,0,0,.28);
}

.rank-hero h1{
  font-size:28px;margin:0 0 6px;
}

.rank-hero-total{
  color:var(--muted);font-size:14.5px;margin:0 0 22px;
}

.rank-progress-track{
  width:100%;max-width:360px;margin:0 auto;height:10px;border-radius:999px;
  background:var(--sand);overflow:hidden;border:1px solid var(--line);
}
.rank-progress-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg, var(--rank-color-dark, var(--sage)), var(--rank-color, var(--gold)));
  transition:width .5s ease;
  width:0%;
}
.rank-progress-label{
  margin-top:10px;font-size:13px;color:var(--muted);
}

.rank-tiers-title{
  margin:36px 0 14px;font-size:19px;
}

.rank-tiers-list{
  display:flex;flex-direction:column;gap:10px;
}

.rank-tier-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;border-radius:14px;
  background:var(--sand-light);border:1px solid var(--line);
  opacity:.62;
}
.rank-tier-row.is-current{
  opacity:1;
  border-color:var(--rank-color, var(--sage));
  box-shadow:0 0 0 1px var(--rank-color, var(--sage));
}
.rank-tier-row.is-reached{ opacity:.94; }

.rank-tier-row .rank-tier-icon{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rank-tier-row .rank-tier-icon .rank-medal{
  width:44px !important;height:44px !important;
}

.rank-tier-info{ flex:1; }
.rank-tier-name{ font-weight:700;font-size:14.5px; }
.rank-tier-threshold{ color:var(--muted);font-size:12.5px;margin-top:2px; }

.rank-tier-current-pill{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  background:var(--rank-color, var(--sage));color:#fff;padding:4px 9px;border-radius:999px;
  forced-color-adjust:none;
  color-scheme:light;
}