.label { font-size: 0.8rem; opacity: 0.7; }

/* Base text style (no Font Awesome needed) */
.role-gradient{
  font-weight:700;
  font-size: 12px;
  letter-spacing:.5px;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
/* Pulsating animation (no white) */
@keyframes textPulse{
  0%{transform:scale(1);text-shadow:0 0 4px var(--pulse-soft);}
  50%{transform:scale(1.05);text-shadow:0 0 14px var(--pulse-strong);}
  100%{transform:scale(1);text-shadow:0 0 4px var(--pulse-soft);}
}

/* ================= CORE ROLES ================= */

/* Admin (red pulse) */
.role-admin{
  background-image:linear-gradient(135deg,#ff0000,#b70000,#5f0808);
  --pulse-soft: rgba(255, 0, 0, .35);
  --pulse-strong: rgba(255, 0, 0, .85);
  animation:textPulse 1.4s infinite;
}

/* Moderator (green pulse) */
.role-moderator{
  background-image:linear-gradient(135deg,#bbf7d0,#4ade80,#15803d);
  --pulse-soft: rgba(34, 197, 94, .35);
  --pulse-strong: rgba(34, 197, 94, .85);
  animation:textPulse 1.4s infinite;
}

/* Developer (blue pulse) */
.role-developer{
  background-image:linear-gradient(135deg,#bfdbfe,#60a5fa,#1d4ed8);
  --pulse-soft: rgba(59, 130, 246, .35);
  --pulse-strong: rgba(59, 130, 246, .85);
  animation:textPulse 1.4s infinite;
}

/* ============= COLLECTABLE RANKS (1–4) ============= */
.role-reverser{ background-image:linear-gradient(135deg,#f5d0ff,#a855f7,#4c1d95); }
.role-coder{ background-image:linear-gradient(135deg,#bfdbfe,#3b82f6,#1e40af); }
.role-designer{ background-image:linear-gradient(135deg,#fef9c3,#facc15,#854d0e); }
.role-contributor{ background-image:linear-gradient(135deg,#dcfce7,#22c55e,#14532d); }

/* ============= EXTRA GROUPS ============= */
@keyframes shimmer{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.role-beast{
  background-image:linear-gradient(135deg,#fee2e2,#fb923c,#ea580c,#7f1d1d);
  background-size:200% 200%;
  text-shadow:0 0 6px rgba(248,113,113,.9),0 0 14px rgba(248,113,113,.6);
  animation:shimmer 3s linear infinite;
}
.role-aurora{
  background-image:linear-gradient(135deg,#22c55e,#22d3ee,#6366f1,#a855f7);
  background-size:220% 220%;
  text-shadow:0 0 8px rgba(52,211,153,.9),0 0 14px rgba(56,189,248,.8);
  animation:shimmer 4s linear infinite;
}
.role-legend{
 background-image: linear-gradient(135deg, #fef9c3, #facc15, #d97706, #78350f);
 /* -webkit-background-clip: border-box, text, border-box; */
 /* background-image: ); */
 background-size:200% 200%;
 text-shadow:0 0 8px rgba(250,204,21,.9),0 0 18px rgba(161,98,7,.8);
 animation:shimmer 3s linear infinite;
}
.role-royal{
  background-image:linear-gradient(135deg,#ffedd5,#d97706,#78350f);
  text-shadow:0 0 6px rgba(251,146,60,.7);
}

/* ============= UPGRADE GROUPS ============= */
.role-diamond{
	 -webkit-background-clip: border-box, text, border-box;
    background-image: url(/images/ranks/sparkling.gif), linear-gradient(90deg, #0088CC 0%, #259DD9 100%), url(/images/ranks/lightening.gif);
    
  background-size:220% 220%;
  text-shadow:0 0 8px rgba(56,189,248,.9),0 0 18px rgba(45,212,191,.9);
  animation:shimmer 3.2s linear infinite;
}
.role-gold{
  background-image:linear-gradient(135deg,#fef9c3,#facc15,#d97706);
  text-shadow:0 0 2px #451a03,0 0 6px rgba(250,204,21,.9),0 0 14px rgba(180,83,9,.8);
}
.role-platinum{
  background-image:linear-gradient(135deg,#f9fafb,#e5e7eb,#9ca3af,#4b5563);
  text-shadow:0 0 6px rgba(209,213,219,.9),0 0 14px rgba(31,41,55,.9);
}

/* ============= OTHER GROUPS ============= */
.role-member{
  font-weight:700;
  font-size: 12px;
  letter-spacing:.5px;
  color:#f9fafb;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  text-shadow:0 0 4px rgba(148,163,184,.6);
}
.role-banned{
  font-weight:700;
  font-size: 12px;
  letter-spacing:.5px;
  color:#4b5563;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:#6b7280;
}
.beast1{font-weight: 800;
    position: relative;
    background-image: linear-gradient(123deg, #ca4141 0%, #dfad35 20%, #ca4141 30%, #dfad35 49%, #ca4141 57%, #dfad35 68%, #ca4141 83%, #dfad35 100%), url(https://i.imgur.com/fMqEN6G.gif);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text, border-box;
    animation: red_styleAnimate 5s 
linear infinite;
	background-size: 100em, 180px;}
.beast{text-shadow: 1px 1px 15px rgb(255 0 66), 1px 1px 15px rgb(255 0 78);
    font-weight: 1000;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: border-box, text;
	background-position: center -10px, center center;
    background-image: url(/images/ranks/red.gif),linear-gradient(200deg, #ca4141 50%, #ed003a 70%, #ca4141 101%, #ca4141 100%);
    background-size: 4em, 17em;
    animation: deyanim 2s 
linear infinite;
	transition: .3s;}
.aurora {
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: border-box, text, border-box;
    background-image: url(/images/ranks/sparkling.gif), linear-gradient(90deg, #0088CC 0%, #259DD9 100%), url(/images/ranks/lightening.gif);
    background-size: 8em, 40% 1000%, 8em;
    animation: nuttelaAnimation 2.5s 
cubic-bezier(0.4, 0, 1, 1) 0s infinite running;
    transition: .3s;