/* VIP rank badges.
 *
 * Shared by the play page (chat + profile modal) and the leaderboard.
 * Tier keys are produced by server/vip-tier.js and client_new/scripts/vip-tier.js;
 * they are constants, never user input.
 */

.vip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.06);
}

/* Tier colours. Backgrounds are explicit rgba() rather than color-mix() so
 * older mobile browsers render the same pill. */
.vip-tier-bronze {
  color: #e0a06a;
  border-color: rgba(224, 160, 106, 0.55);
  background: rgba(205, 127, 50, 0.16);
}

.vip-tier-silver {
  color: #d9d9d9;
  border-color: rgba(217, 217, 217, 0.5);
  background: rgba(192, 192, 192, 0.16);
}

.vip-tier-gold {
  color: #ffd75e;
  border-color: rgba(255, 215, 94, 0.55);
  background: rgba(255, 215, 0, 0.14);
}

.vip-tier-platinum-1 {
  color: #39e6f2;
  border-color: rgba(57, 230, 242, 0.55);
  background: rgba(0, 229, 255, 0.14);
}

.vip-tier-platinum-2 {
  color: #8bf7ff;
  border-color: rgba(139, 247, 255, 0.6);
  background: rgba(125, 249, 255, 0.16);
}

.vip-tier-platinum-3 {
  color: #eaffff;
  border-color: rgba(234, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}

.vip-tier-diamond-1 {
  color: #b9f2ff;
  border-color: rgba(185, 242, 255, 0.6);
  background: rgba(185, 242, 255, 0.16);
}

.vip-tier-diamond-2 {
  color: #7dd3fc;
  border-color: rgba(125, 211, 252, 0.6);
  background: rgba(125, 211, 252, 0.16);
}

.vip-tier-diamond-3 {
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.65);
  background: rgba(192, 132, 252, 0.18);
}

.vip-tier-legend {
  color: #ffcf70;
  border-color: #ff8a3c;
  background: rgba(255, 90, 60, 0.18);
  box-shadow: 0 0 10px rgba(255, 120, 60, 0.35);
}

/* Chat: sits between the username and the colon. */
.chat-vip-badge {
  font-size: 9px;
  padding: 1px 6px;
  margin: 0 4px 0 2px;
}

/* Profile modal: next to the large username. */
.modal-vip-badge {
  font-size: 10px;
  padding: 2px 8px;
}

/* Legacy profile page (.profile-badges). */
.profile-badges .vip-badge {
  font-size: 12px;
  padding: 3px 10px;
}

/* Leaderboard podium: the .player-level line becomes a pill. */
.player-level.vip-badge {
  font-size: 10px;
  padding: 2px 9px;
}

.player-level-unranked {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
}

/* Allow avatar + username + tier to wrap on narrow phones instead of
 * overflowing the profile card. */
.ml-name {
  flex-wrap: wrap;
}