/* Valorant Rank Badge Styling */
.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 6px;
  border-radius: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1;
}

.rank-badge .rank-icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  display: inline-block;
  vertical-align: middle;
}

.rank-badge i {
  display: none !important;
}

.rank-badge span {
  display: inline-block;
  vertical-align: middle;
}

/* Rank Tiers */
.rank-badge.unranked {
  background: #edf0f5;
  color: #64748b;
  border-color: #cbd5e1;
}
.rank-badge.unranked i { background: #94a3b8; }

.rank-badge.iron {
  background: #f0f2f5;
  color: #555f6d;
  border-color: #d8dde6;
}
.rank-badge.iron i { background: #6b7787; }

.rank-badge.bronze {
  background: #fbf3ee;
  color: #8c5337;
  border-color: #ecd5c7;
}
.rank-badge.bronze i { background: #b06945; }

.rank-badge.silver {
  background: #f1f4f8;
  color: #63768d;
  border-color: #d6dfea;
}
.rank-badge.silver i { background: #8ba0b9; }

.rank-badge.gold {
  background: #fdf8e9;
  color: #9d7119;
  border-color: #f7e3ad;
}
.rank-badge.gold i { background: #e5a828; }

.rank-badge.platinum {
  background: #eaf8f8;
  color: #198080;
  border-color: #bde7e7;
}
.rank-badge.platinum i { background: #28b8b8; }

.rank-badge.diamond {
  background: #f7edfd;
  color: #7b2eb8;
  border-color: #e5c3fa;
}
.rank-badge.diamond i { background: #ac55f5; }

.rank-badge.ascendant {
  background: #e9fbf2;
  color: #138352;
  border-color: #b3f2d2;
}
.rank-badge.ascendant i { background: #1eb974; }

.rank-badge.immortal {
  background: #fdebee;
  color: #aa1e3d;
  border-color: #f9c0cb;
}
.rank-badge.immortal i { background: #e22852; }

.rank-badge.radiant {
  background: linear-gradient(135deg, #fff7d6, #ffeaa3);
  color: #7a5a00;
  border-color: #fed868;
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.35);
}
.rank-badge.radiant i { background: #ffbe1a; }

/* Dark mode adjustments for rank badges */
body.dark .rank-badge.unranked { background: #0e1726; color: #94a3b8; border-color: #1e293b; }
body.dark .rank-badge.iron { background: #131a24; color: #a4b3c7; border-color: #263345; }
body.dark .rank-badge.bronze { background: #241913; color: #dfa384; border-color: #4a3023; }
body.dark .rank-badge.silver { background: #182230; color: #c4d4e8; border-color: #2b3e57; }
body.dark .rank-badge.gold { background: #2b210a; color: #ffd678; border-color: #574113; }
body.dark .rank-badge.platinum { background: #0c2626; color: #72e8e8; border-color: #194d4d; }
body.dark .rank-badge.diamond { background: #230d36; color: #db9efd; border-color: #491a6e; }
body.dark .rank-badge.ascendant { background: #0a291a; color: #62efa8; border-color: #155535; }
body.dark .rank-badge.immortal { background: #2d0b13; color: #ff8ca3; border-color: #5c1827; }
body.dark .rank-badge.radiant { background: #332700; color: #ffe87a; border-color: #735700; box-shadow: 0 0 14px rgba(255, 204, 0, 0.4); }

/* Glow on real rank images */
body.dark .rank-badge.radiant .rank-icon-img { filter: drop-shadow(0 0 7px rgba(255, 204, 0, 0.85)); }
body.dark .rank-badge.immortal .rank-icon-img { filter: drop-shadow(0 0 6px rgba(226, 40, 82, 0.7)); }
body.dark .rank-badge.ascendant .rank-icon-img { filter: drop-shadow(0 0 5px rgba(30, 185, 116, 0.65)); }
body.dark .rank-badge.diamond .rank-icon-img { filter: drop-shadow(0 0 5px rgba(172, 85, 245, 0.65)); }

/* Rank Transition visual */
.rank-flow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
}

.rank-flow span.arrow {
  color: var(--blue);
  font-size: 13px;
}