/* ════════════════════════════════════════════════════════════
   VIP BADGE ICONS — Military layered shield + eagle (v3)
   viewBox 200×220 · huanha.shop
════════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────── */
.vs-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 200×220 ratio → height slightly taller than width */
  width: 2em;
  height: 2.2em;
  vertical-align: middle;
  flex-shrink: 0;
}

/* The SVG itself */
.vs-svg {
  width: 100%;
  height: 100%;
  overflow: visible;    /* allow glow filter to bleed outside bounds */
  position: relative;
  z-index: 2;
  animation: vsFloat 3.6s ease-in-out infinite;
}
@keyframes vsFloat {
  0%,100% { transform: translateY(0);    }
  50%      { transform: translateY(-7%); }
}

/* ── Tier-specific CSS variables ──────────────────────── */
.vs-wrap--bronze  { --vs-c: rgba(230,100,20,.95);  --vs-c2: rgba(255,140,60,.65); }
.vs-wrap--silver  { --vs-c: rgba(160,185,215,.95);  --vs-c2: rgba(200,220,240,.65); }
.vs-wrap--gold    { --vs-c: rgba(255,200,0,.98);    --vs-c2: rgba(255,230,100,.7); }
.vs-wrap--diamond { --vs-c: rgba(80,190,255,.98);   --vs-c2: rgba(160,230,255,.7); }

/* ── Aura ring (pulsing glow behind badge) ────────────── */
.vs-wrap::before {
  content: '';
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%,
    var(--vs-c)  0%,
    var(--vs-c2) 22%,
    transparent  68%
  );
  opacity: 0;
  animation: vsAuraPulse 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes vsAuraPulse {
  0%,100% { opacity: 0;    transform: scale(.82); }
  50%      { opacity: 0.55; transform: scale(1.08); }
}

/* ── Rotating halo ring ───────────────────────────────── */
.vs-wrap::after {
  content: '';
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--vs-c);
  border-right-color: var(--vs-c2);
  opacity: 0;
  animation: vsRingSpin 3.2s linear infinite,
             vsRingFade 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes vsRingSpin { to { transform: rotate(360deg); } }
@keyframes vsRingFade {
  0%,100% { opacity: 0.18; }
  50%      { opacity: 0.65; }
}

/* ══════════════════════════════════════════════════════
   TIER-SPECIFIC GLOW ANIMATIONS
══════════════════════════════════════════════════════ */

/* Bronze — warm ember pulse */
.vs-wrap--bronze .vs-svg {
  animation: vsFloat 4s ease-in-out infinite,
             vsBronzeGlow 2.8s ease-in-out infinite;
}
@keyframes vsBronzeGlow {
  0%,100% { filter: drop-shadow(0 0 4px  rgba(220,80,0,.55))
                    drop-shadow(0 0 1px  rgba(255,120,40,.4)); }
  50%      { filter: drop-shadow(0 0 14px rgba(230,90,0,.95))
                    drop-shadow(0 0 28px rgba(200,60,0,.5))
                    drop-shadow(0 0 44px rgba(180,40,0,.3)); }
}

/* Silver — cool steel shimmer */
.vs-wrap--silver .vs-svg {
  animation: vsFloat 4.2s ease-in-out infinite,
             vsSilverGlow 3.4s ease-in-out infinite;
}
@keyframes vsSilverGlow {
  0%,100% { filter: drop-shadow(0 0 4px  rgba(140,170,210,.5)); }
  50%      { filter: drop-shadow(0 0 12px rgba(160,190,220,.9))
                    drop-shadow(0 0 24px rgba(100,140,190,.45)); }
}

/* Gold — rich warm blaze */
.vs-wrap--gold .vs-svg {
  animation: vsFloat 3.6s ease-in-out infinite,
             vsGoldGlow 2.2s ease-in-out infinite;
}
@keyframes vsGoldGlow {
  0%,100% { filter: drop-shadow(0 0 5px  rgba(255,190,0,.6))
                    drop-shadow(0 0 2px  rgba(255,220,80,.5)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255,200,0,1))
                    drop-shadow(0 0 32px rgba(240,160,0,.6))
                    drop-shadow(0 0 50px rgba(200,100,0,.3)); }
}

/* Diamond — electric cyan surge */
.vs-wrap--diamond .vs-svg {
  animation: vsFloat 3s ease-in-out infinite,
             vsDiamondGlow 1.9s ease-in-out infinite;
}
@keyframes vsDiamondGlow {
  0%,100% { filter: drop-shadow(0 0 6px  rgba(60,180,255,.65))
                    drop-shadow(0 0 2px  rgba(140,220,255,.5)); }
  50%      { filter: drop-shadow(0 0 18px rgba(80,200,255,1))
                    drop-shadow(0 0 36px rgba(40,150,240,.65))
                    drop-shadow(0 0 58px rgba(20,100,200,.35)); }
}

/* Diamond extra ring (faster) */
.vs-wrap--diamond::after {
  inset: -40%;
  animation: vsRingSpin 2s linear infinite,
             vsRingFade 2s ease-in-out infinite;
  border-top-color:  #60d0ff;
  border-right-color:#b0eaff;
}

/* ════════════════════════════════════════════════════════
   CONTEXT SIZING — how large the badge appears in each spot
════════════════════════════════════════════════════════ */

/* Sidebar VIP card icon */
.sb-vip-icon .vs-wrap        { width: 2.8em; height: 3.08em; }
.sb-vip-icon                 { display: inline-flex; align-items: center; }

/* Sidebar user VIP tag */
.sb-user-vip-tag .vs-wrap    { width: 2em;   height: 2.2em; }

/* Homepage profile badge */
.vip-badge .vb-icon .vs-wrap { width: 2em;   height: 2.2em; }
.vip-badge .vb-icon          { display: inline-flex; align-items: center; }

/* Level-up overlay — big display */
.vip-levelup-emoji .vs-wrap  { width: 6.4em; height: 7em; }
.vip-levelup-emoji {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.vip-levelup-emoji .vs-wrap::before { animation-duration: 1.4s; }
.vip-levelup-emoji .vs-wrap::after  { animation-duration: 1.2s; }

/* VIP card top in sidebar */
.sb-vip-top .sb-vip-icon           { font-size: 0; line-height: 0; }
.sb-vip-top .sb-vip-icon .vs-wrap  { width: 3em; height: 3.3em; }

/* Ranking page tier cards */
.rk-tier-icon .vs-wrap { width: 3.6em; height: 3.96em; }

/* ════════════════════════════════════════════════════════
   PARTICLE FLOATERS — 2 tiny glowing dots orbiting badge
════════════════════════════════════════════════════════ */
.vs-wrap .vs-particles {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 1;
  animation: vsParticleOrbit 5s linear infinite;
}
@keyframes vsParticleOrbit { to { transform: rotate(360deg); } }

.vs-wrap .vs-particles::before,
.vs-wrap .vs-particles::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--vs-c);
  box-shadow: 0 0 5px var(--vs-c), 0 0 10px var(--vs-c2);
}
.vs-wrap .vs-particles::before {
  width: 5px; height: 5px;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  animation: vsParticleA 2.5s ease-in-out infinite alternate;
}
.vs-wrap .vs-particles::after {
  width: 3.5px; height: 3.5px;
  bottom: -10%; left: 50%;
  transform: translateX(-50%);
  animation: vsParticleB 3s ease-in-out infinite alternate;
}
@keyframes vsParticleA {
  0%   { opacity: 0.2; transform: translateX(-50%) scale(.6); }
  100% { opacity: 1;   transform: translateX(-50%) scale(1.3); }
}
@keyframes vsParticleB {
  0%   { opacity: 1;   transform: translateX(-50%) scale(1.2); }
  100% { opacity: 0.2; transform: translateX(-50%) scale(.5); }
}