/* ============================================================
   CompLexity — Estilos compartilhados de RANKS (ranking + perfil)
   ============================================================ */

/* Badge de rank com cor por família (tier) */
.rank-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 100px; font-weight: 700;
  font-size: .82rem; letter-spacing: .3px; white-space: nowrap;
  border: 1px solid transparent;
}
.rank-badge .dot-tier { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.rank-badge.lg { font-size: 1.05rem; padding: 8px 18px; }

.tier-none    { background: rgba(107,107,130,.14); color: #b8b8c8; border-color: rgba(107,107,130,.35); }
.tier-silver  { background: rgba(203,213,225,.12); color: #cbd5e1; border-color: rgba(203,213,225,.35); }
.tier-gold    { background: rgba(250,204,21,.13);  color: #fde047; border-color: rgba(250,204,21,.4); }
.tier-mg      { background: rgba(45,212,191,.13);  color: #5eead4; border-color: rgba(45,212,191,.4); }
.tier-eagle   { background: rgba(96,165,250,.14);  color: #93c5fd; border-color: rgba(96,165,250,.4); }
.tier-supreme { background: rgba(232,121,249,.14); color: #f0abfc; border-color: rgba(232,121,249,.42); }
.tier-global  { background: linear-gradient(100deg, rgba(139,61,255,.25), rgba(34,211,238,.22));
                color: #e9d5ff; border-color: rgba(168,85,247,.55); box-shadow: 0 0 18px rgba(139,61,255,.25); }

/* Barra de progresso para o próximo nível */
.rank-prog { height: 9px; background: var(--bg-3, #1a1a2a); border-radius: 100px; overflow: hidden; border: 1px solid var(--border, #26263a); }
.rank-prog > i { display: block; height: 100%; border-radius: 100px;
  background: linear-gradient(100deg, var(--primary-3, #6d28d9), var(--primary, #a855f7)); }

/* Medalhas de posição */
.pos-medal { font-weight: 800; font-family: var(--font-display, inherit); }
.pos-1 { color: #fde047; } .pos-2 { color: #cbd5e1; } .pos-3 { color: #fbbf24; }

/* Avatar redondo padrão */
.rk-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-3, #1a1a2a);
  border: 1px solid var(--border, #26263a); flex-shrink: 0; }
.rk-av.sm { width: 30px; height: 30px; }
.rk-av.xl { width: 96px; height: 96px; border-width: 2px; }