/* ============================================================
   RANK NAMES — five tiers
   Standard · Elite (gold) · VIP (purple) · Super Elite (purple + gold shine) · Admin (red + lotus)
   ============================================================ */

.rank-name {
  font-family: var(--font-body);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

/* --- Standard --- */
.rank-standard { color: var(--color-text); }

/* --- Elite (warm gold) --- */
.rank-elite {
  color: var(--color-gold);
  text-shadow: 0 0 0.5px color-mix(in oklab, var(--color-gold) 40%, transparent);
}

/* --- VIP (solid purple) --- */
.rank-vip {
  color: var(--color-purple);
}

/* --- Super Elite: purple + gold shine gradient --- */
.rank-super-elite {
  background: linear-gradient(
    100deg,
    var(--color-purple)   0%,
    var(--color-purple)  35%,
    var(--color-gold-shine) 50%,
    var(--color-purple)  65%,
    var(--color-purple) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shine-sweep 4.5s ease-in-out infinite;
  font-weight: 700;
}

@keyframes shine-sweep {
  0%   { background-position: 200% 50%; }
  50%  { background-position: 0%   50%; }
  100% { background-position: -200% 50%; }
}

/* --- Admin: red name + hovering red lotus + sparkles --- */
.rank-admin {
  color: var(--color-red);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Wrapping for the lotus icon so it can float independently */
.lotus-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  animation: lotus-float 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(192, 38, 58, 0.55));
}

@keyframes lotus-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}

.lotus-wrap svg { display: block; width: 100%; height: 100%; }

/* Petals of the lotus have a subtle inner glow */
.lotus-wrap svg path {
  filter: drop-shadow(0 0 1.5px rgba(255, 74, 102, 0.6));
}

/* Sparkles orbiting the lotus */
.lotus-wrap::before,
.lotus-wrap::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, #FFE7A8 0%, var(--color-gold-shine) 40%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.lotus-wrap::before {
  top: -2px;
  left: 50%;
  animation: sparkle-a 2.6s ease-in-out infinite;
}

.lotus-wrap::after {
  bottom: -2px;
  right: 0;
  animation: sparkle-b 3.1s ease-in-out 0.4s infinite;
}

@keyframes sparkle-a {
  0%, 100% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  25% { opacity: 1; }
  50% { transform: translate(-50%, -6px) scale(1.2); opacity: 1; }
  75% { opacity: 0.5; }
}

@keyframes sparkle-b {
  0%, 100% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  30% { opacity: 1; transform: translate(3px, -3px) scale(1); }
  60% { opacity: 0.8; transform: translate(-2px, 4px) scale(1.2); }
}

/* --- Rank badges (small pill next to name) --- */
.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rank-badge.standard    { background: var(--color-surface-offset); color: var(--color-text-muted); }
.rank-badge.elite       { background: var(--color-gold-highlight); color: var(--color-gold); }
.rank-badge.vip         { background: var(--color-purple-highlight); color: var(--color-purple); }
.rank-badge.super-elite {
  background: linear-gradient(120deg,
    color-mix(in oklab, var(--color-purple) 35%, transparent),
    color-mix(in oklab, var(--color-gold-shine) 35%, transparent));
  color: var(--color-purple);
  border: 1px solid color-mix(in oklab, var(--color-gold) 40%, transparent);
}
.rank-badge.admin {
  background: var(--color-red-highlight);
  color: var(--color-red);
  border: 1px solid color-mix(in oklab, var(--color-red) 40%, transparent);
}

/* When rendering inside a dark theme, keep highlights readable */
[data-theme="petals-dark"] .rank-badge.standard {
  background: var(--color-surface-offset);
  color: var(--color-text);
}