/* assets/css/ranks.css
 * Load this once (in homeheader.php) to color usernames & badges everywhere.
 * This stylesheet aligns with helpers in /includes/ranks.php:
 *  - Usernames:  <span class="user {member|hero|exile|emperor|savage|staff|owner}">
 *  - Rank badge: <span class="badge {member|hero|exile|emperor|savage|staff|owner}">
 *  - Role badge: <span class="badge {member|staff|owner}">
 */

/* ========== Base ========== */
.user{
  font-weight:700;
  background:transparent!important;
  padding:0!important;
  border:none!important;
}

.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  line-height:1.1;
  color:#fff;
}

/* Optional tiny role chip */
.role-chip{ font-size:.68rem; padding:2px 6px; border-radius:999px; }

/* ========== Colors ========== */
/* Username text (no boxes) */
.user.member  { color:#6b4b2c; }  /* brown */
.user.hero    { color:#32cd32; }  /* lime green */
.user.exile   { color:#1e3a8a; }  /* dark blue */
.user.emperor { color:#7f1d1d; }  /* dark red */
/* ✅ Savage now PINK (no gradients) */
.user.savage  {
  color:#ff3e93 !important;       /* vivid pink */
  background:none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}
.user.staff   { color:#dc2626; }  /* bright red */
.user.owner   { color:#166534; }  /* dark green */

/* Pill badges (rank display) */
.badge.member  { background:#6b4b2c; color:#fff; }
.badge.hero    { background:#32cd32; color:#0d2a0d; } /* darker text for contrast */
.badge.exile   { background:#1e3a8a; color:#dbeafe; }
.badge.emperor { background:#7f1d1d; color:#fee2e2; }
/* ✅ Savage badge now PINK */
.badge.savage  { background:#ff3e93; color:#fff; }
.badge.staff   { background:#dc2626; color:#fff; }
.badge.owner   { background:#166534; color:#eafff1; }

/* System role pills (used on admin pages) */
.badge.member.role  { background:#6b4b2c; color:#fff; }
.badge.staff.role   { background:#dc2626; color:#fff; }
.badge.owner.role   { background:#166534; color:#eafff1; }

/* ========== Compatibility aliases ==========
   In case some pages still output legacy class names like rank-hero, user--hero, badge--hero */
.user.rank-member, .user.user--member { color:#6b4b2c; }
.user.rank-hero,   .user.user--hero   { color:#32cd32; }
.user.rank-exile,  .user.user--exile  { color:#1e3a8a; }
.user.rank-emperor,.user.user--emperor{ color:#7f1d1d; }
/* Override any old rainbow styles for Savage text */
.user.rank-savage, .user.user--savage {
  color:#ff3e93 !important;
  background:none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}
.user.rank-staff,  .user.user--staff  { color:#dc2626; }
.user.rank-owner,  .user.user--owner  { color:#166534; }

/* Legacy badge class names -> map to new colors */
.badge.rank-member, .badge.badge--member { background:#6b4b2c; color:#fff; }
.badge.rank-hero,   .badge.badge--hero   { background:#32cd32; color:#0d2a0d; }
.badge.rank-exile,  .badge.badge--exile  { background:#1e3a8a; color:#dbeafe; }
.badge.rank-emperor,.badge.badge--emperor{ background:#7f1d1d; color:#fee2e2; }
/* ✅ Pink Savage badge (kills old gradient) */
.badge.rank-savage, .badge.badge--savage{
  background:#ff3e93 !important; color:#fff !important;
}
.badge.rank-staff,  .badge.badge--staff { background:#dc2626; color:#fff; }
.badge.rank-owner,  .badge.badge--owner { background:#166534; color:#eafff1; }