/* What a player says they play at, next to their name wherever somebody is
   being picked. ELO is what this league has measured; the rank is the thing a
   captain actually recognises.

   Tier colours are the metals themselves rather than the app's palette — mint
   and coral mean win and loss everywhere else and must not start meaning
   "good player" here. They are quiet on purpose: a chip beside a name, not a
   badge competing with it. */
.rank-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2xs);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-secondary);
}

.rank-tag--iron     { border-color: var(--tier-iron); background: #f3f1ef; color: #5d5852; }
.rank-tag--bronze   { border-color: var(--tier-bronze); background: #faf1e8; color: #7d5433; }
.rank-tag--silver   { border-color: var(--tier-silver); background: #f1f4f6; color: #4f5c66; }
.rank-tag--gold     { border-color: var(--tier-gold); background: #fdf5e4; color: #7d5d17; }
.rank-tag--platinum { border-color: var(--tier-platinum); background: #eaf7f6; color: #2d6462; }
.rank-tag--emerald  { border-color: var(--tier-emerald); background: #e9f7ee; color: #23643a; }
.rank-tag--diamond  { border-color: var(--tier-diamond); background: #eef3fd; color: #2f4d84; }
.rank-tag--master   { border-color: var(--tier-master); background: #f5eefb; color: #5a3178; }
.rank-tag--above    { border-color: var(--tier-above); background: #fbeeee; color: #7d2f2f; }

/* Both numbers say what they are. They were sitting side by side unlabelled,
   and a Riot tier and a league ELO are not the same claim about a player. */
.rank-cell {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.1;
  /* The rows align on the baseline, which for a stacked cell is the caption's
     — that would hang the value below everything else on the row. */
  align-self: center;
}

.rank-cell__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.rank-cell__elo {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

/* What the league has actually seen: games played, and how many of them were
   won. It qualifies the two ranks beside it — the same rating off four games
   and off forty are not the same claim. */
.rank-cell__record {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rank-cell__games {
  color: var(--text-secondary);
}

.rank-cell__winrate {
  font-weight: var(--weight-semibold);
}

.rank-cell__record--none {
  color: var(--text-tertiary);
}