/**
 * GLOBAL RANK VISUAL SYSTEM — SavageConflicts
 */

/* ============================
   BASE USER + BADGE
============================ */

.user {
  font-weight: 700;
  display: inline-block;
  position: relative;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid rgba(0, 0, 0, 0.55);
  background: #3a2a19;
  color: #fdf5e6;
  position: relative;
  overflow: visible;
}

/* ============================
   ADVENTURER - STYLING RANK
============================ */

.user.member { color: #5d3e28; }

.badge.member {
  background: #5d3e28;
  border-color: #8b623f;
  color: #fff4da;
}

/* ============================
   HERO - STYLING RANK
============================ */

.user.hero { color: #fffc59; }

.badge.hero {
  background: #fffc59;
  border-color: #FFD900;
  color: #021402;
}

/* ===========================================================
   EXILE — STYLING RANK
=========================================================== */

.user.exile {
  color:#ffffff;
  text-shadow:0 0 6px rgba(255,255,255,.7);
  animation: exileBigPulse 6s infinite ease-in-out,
             exileSmallFlicker 1.4s infinite steps(2),
             exileGlowWave 3.8s infinite ease-in-out;
}

.badge.exile {
  background:#e7e7e7;
  border-color:#bfbfbf;
  color:#000000;
  animation: exileBigPulse 6s infinite ease-in-out,
             exileSmallFlicker 1.4s infinite steps(2),
             exileGlowWave 3.8s infinite ease-in-out;
}

/* BIG STRONG FLICKER SWELL */
@keyframes exileBigPulse {
  0% { filter:brightness(1) contrast(1); }
  10% { filter:brightness(2) contrast(1.3); }
  12% { filter:brightness(.5) contrast(.8); }
  15% { filter:brightness(1.6) contrast(1.2); }
  25% { filter:brightness(1); }
  100% { filter:brightness(1); }
}

/* TINY NERVOUS FLICKERS */
@keyframes exileSmallFlicker {
  0%   { opacity:1; }
  10%  { opacity:.6; }
  11%  { opacity:1; }
  18%  { opacity:.7; }
  19%  { opacity:1; }
  40%  { opacity:.8; }
  41%  { opacity:1; }
  60%  { opacity:.6; }
  61%  { opacity:1; }
  100% { opacity:1; }
}

/* BRIGHTER SURGES & SHADOW FLARE */
@keyframes exileGlowWave {
  0% { text-shadow:0 0 6px rgba(255,255,255,.6); }
  25% { text-shadow:0 0 10px rgba(255,255,255,.9), 0 0 18px rgba(255,255,255,.8); }
  50% { text-shadow:0 0 4px rgba(255,255,255,.4); }
  75% { text-shadow:0 0 12px rgba(255,255,255,1), 0 0 22px rgba(255,255,255,.9); }
  100% { text-shadow:0 0 6px rgba(255,255,255,.6); }
}

/* ===========================================================
   EMPEROR - STYLING RANK
=========================================================== */

.user.emperor {
  color:#8b0609;
  text-shadow:0 0 6px rgba(255,70,50,.7),0 0 14px rgba(255,90,70,.6);
  animation: emperorPulse 2.6s infinite ease-in-out;
}

.badge.emperor {
  background:#210000;
  border-color:#8b0609;
  color:#ffd6c9;
  animation: emperorPulse 2.6s infinite ease-in-out;
}

@keyframes emperorPulse {
  0% { filter:brightness(1); }
  50% { filter:brightness(1.35); }
  100% { filter:brightness(1); }
}

/* ===========================================================
   SAVAGE - STYLING RANK
=========================================================== */

@keyframes savageRainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.user.savage {
  background: linear-gradient(90deg,#db0ddb,#2d41dc,#dbd312,#db0c00,#10d2db,#b501dc,#db0ddb);
  background-size:400% 400%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: savageRainbow 6s linear infinite;
}

.badge.savage {
  background-image: linear-gradient(90deg,#db0ddb,#2d41dc,#dbd312,#db0c00,#10d2db,#b501dc,#db0ddb);
  background-size:400% 400%;
  animation:savageRainbow 6s linear infinite;
  border-color:rgba(255,255,255,.55);
  color:#120805;
}


/* ===========================================================
   STAFF — STYLING RANK
=========================================================== */

.user.staff {
  color:#0d19f3;
  position:relative;
  animation: staffNameGlow 2.6s infinite ease-in-out;
}

/* NAME BLUE PULSE */
@keyframes staffNameGlow {
  0%   { text-shadow:0 0 6px rgba(80,120,255,.4), 0 0 14px rgba(80,120,255,.2); }
  50%  { text-shadow:0 0 12px rgba(80,120,255,.9), 0 0 22px rgba(80,120,255,.7); }
  100% { text-shadow:0 0 6px rgba(80,120,255,.4), 0 0 14px rgba(80,120,255,.2); }
}

/* BADGE BASE */
.badge.staff {
  background:#0d19f3;
  border-color:#4a6bff;
  color:#e8eaff;
  position:relative;
  overflow:visible;
  animation: staffBadgePulse 2.6s infinite ease-in-out;
}

/* TIGHT BLUE BADGE AURA */
@keyframes staffBadgePulse {
  0%   { box-shadow:0 0 6px rgba(80,120,255,.4), 0 0 10px rgba(80,120,255,.25); }
  50%  { box-shadow:0 0 10px rgba(80,120,255,.95), 0 0 16px rgba(80,120,255,.8); }
  100% { box-shadow:0 0 6px rgba(80,120,255,.4), 0 0 10px rgba(80,120,255,.25); }
}

/* ===========================================================
   OWNER - STYLING RANK
=========================================================== */

.user.owner {
  position:relative;
  font-weight:900;
  background: linear-gradient(120deg,#1d5f22,#2c8f34,#5cff96,#2c8f34,#1d5f22);
  background-size:400% 400%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: emeraldInside 3.5s infinite ease-in-out;
  text-shadow:0 0 6px rgba(75,255,140,.6),0 0 14px rgba(75,255,140,.4);
}

.badge.owner {
  background:#2c8f34;
  border-color:#1c6b2a;
  color:#eaffe8;
  box-shadow:0 0 6px rgba(75,255,140,.7),0 0 14px rgba(75,255,140,.5);
  animation: ownerGlow 3s infinite ease-in-out;
}

@keyframes emeraldInside {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

@keyframes ownerGlow {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
  100% { filter: brightness(1); }
}