/* Pulse Progression V1.8 - reference-style animated level surrounds.
   Drop-in replacement for the existing V1.7 stylesheet filename so index.html needs no changes.
   Visual only: XP, levels, progression and API behaviour are untouched. V1.9.1 keeps host avatar layout intact. */

.pxp-avatar-wrap.pxp-premium-surround {
  position: relative !important;
  overflow: visible !important;
  z-index: auto !important;
  isolation: isolate !important;
  --pxp-gap: 5px;
  --pxp-thick: 3px;
  --pxp-orbit: 2px;
  --pxp-node: 5px;
  --pxp-spike: 8px;
  --pxp-blur: 13px;
  --pxp-blur2: 24px;
  --pxp-a: #8d96a5;
  --pxp-b: #d8dee8;
  --pxp-c: #ffffff;
  --pxp-hot: #ffffff;
  --pxp-glow: rgba(188,198,215,.55);
  --pxp-glow2: rgba(188,198,215,.22);
  --pxp-speed: 8s;
  --pxp-speed2: 12s;
}

.pxp-avatar-wrap.pxp-premium-surround > img {
  position: relative;
  z-index: 1;
  border-radius: inherit !important;
}

.pxp-avatar-wrap.pxp-ring-tiny {
  --pxp-gap: 2px; --pxp-thick: 1.5px; --pxp-orbit: 1px; --pxp-node: 2.8px;
  --pxp-spike: 3px; --pxp-blur: 5px; --pxp-blur2: 8px;
}
.pxp-avatar-wrap.pxp-ring-small {
  --pxp-gap: 3px; --pxp-thick: 2px; --pxp-orbit: 1px; --pxp-node: 3.6px;
  --pxp-spike: 4px; --pxp-blur: 7px; --pxp-blur2: 12px;
}
.pxp-avatar-wrap.pxp-ring-medium {
  --pxp-gap: 4px; --pxp-thick: 2.7px; --pxp-orbit: 1.5px; --pxp-node: 4.8px;
  --pxp-spike: 6px; --pxp-blur: 10px; --pxp-blur2: 18px;
}
.pxp-avatar-wrap.pxp-ring-large {
  --pxp-gap: 6px; --pxp-thick: 3.6px; --pxp-orbit: 2px; --pxp-node: 6.4px;
  --pxp-spike: 9px; --pxp-blur: 15px; --pxp-blur2: 28px;
}

.pxp-ring-fx-v18 {
  position: absolute;
  inset: calc(var(--pxp-gap) * -1);
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 2;
  overflow: visible;
  contain: layout style;
}
.pxp-ring-fx-v18 > span { position:absolute; inset:0; border-radius:50%; pointer-events:none; }

/* Soft atmospheric halo, intentionally much fuller than V1.7. */
.pxp-ring-aura-v18 {
  inset: calc(var(--pxp-gap) * -.55) !important;
  border: max(1px, var(--pxp-orbit)) solid var(--pxp-b);
  opacity: .72;
  filter:
    drop-shadow(0 0 calc(var(--pxp-blur) * .55) var(--pxp-b))
    drop-shadow(0 0 var(--pxp-blur) var(--pxp-glow))
    drop-shadow(0 0 var(--pxp-blur2) var(--pxp-glow2));
  animation: pxpV18Aura 2.4s ease-in-out infinite alternate;
}

/* Main luminous segmented ring. */
.pxp-ring-core-v18 {
  background: conic-gradient(
    from 5deg,
    var(--pxp-a) 0 7%, var(--pxp-hot) 7% 9%, var(--pxp-b) 9% 20%,
    transparent 20% 22%, var(--pxp-a) 22% 34%, var(--pxp-c) 34% 36%,
    var(--pxp-b) 36% 48%, transparent 48% 50%, var(--pxp-a) 50% 61%,
    var(--pxp-hot) 61% 64%, var(--pxp-b) 64% 76%, transparent 76% 78%,
    var(--pxp-a) 78% 90%, var(--pxp-c) 90% 93%, var(--pxp-b) 93% 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--pxp-thick)), #000 calc(100% - var(--pxp-thick) + .5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--pxp-thick)), #000 calc(100% - var(--pxp-thick) + .5px));
  filter:
    drop-shadow(0 0 3px var(--pxp-hot))
    drop-shadow(0 0 calc(var(--pxp-blur) * .72) var(--pxp-glow))
    drop-shadow(0 0 var(--pxp-blur2) var(--pxp-glow2));
  animation: pxpV18Spin var(--pxp-speed) linear infinite;
}

/* Thin counter-rotating outer rail gives the concept-art double-ring depth. */
.pxp-ring-orbit-v18 {
  inset: calc(var(--pxp-orbit) * -2.4) !important;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0 19deg,
    color-mix(in srgb, var(--pxp-c) 92%, transparent) 19deg 21deg,
    transparent 21deg 44deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--pxp-orbit)), #000 calc(100% - var(--pxp-orbit) + .4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--pxp-orbit)), #000 calc(100% - var(--pxp-orbit) + .4px));
  opacity: .8;
  filter: drop-shadow(0 0 4px var(--pxp-b));
  animation: pxpV18SpinBack var(--pxp-speed2) linear infinite;
}

/* Repeating short radial energy teeth around higher-rank rings. */
.pxp-ring-spikes-v18 {
  inset: calc(var(--pxp-spike) * -0.72) !important;
  background: repeating-conic-gradient(
    from 1deg,
    transparent 0 13deg,
    color-mix(in srgb, var(--pxp-hot) 92%, transparent) 13deg 14.2deg,
    transparent 14.2deg 30deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--pxp-spike)), #000 calc(100% - var(--pxp-spike) + .5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--pxp-spike)), #000 calc(100% - var(--pxp-spike) + .5px));
  opacity: .48;
  filter: drop-shadow(0 0 4px var(--pxp-b)) drop-shadow(0 0 8px var(--pxp-glow));
  animation: pxpV18SpikeBreath 1.6s ease-in-out infinite alternate;
}

/* Four brighter energy nodes - concept-art diamond attachment feel. */
.pxp-ring-nodes-v18::before,
.pxp-ring-nodes-v18::after {
  content:"";
  position:absolute;
  left:50%;
  top:calc(var(--pxp-node) * -.35);
  width:var(--pxp-node);
  height:var(--pxp-node);
  border-radius:1px;
  border:1px solid color-mix(in srgb, var(--pxp-hot) 88%, transparent);
  background:linear-gradient(135deg,var(--pxp-hot),var(--pxp-b) 45%,var(--pxp-a));
  transform:translateX(-50%) rotate(45deg);
  box-shadow:
    0 0 4px var(--pxp-hot),
    0 0 calc(var(--pxp-blur) * .65) var(--pxp-glow);
  animation:pxpV18Node 1.35s ease-in-out infinite alternate;
}
.pxp-ring-nodes-v18::after {
  top:auto;
  bottom:calc(var(--pxp-node) * -.35);
  animation-delay:-.7s;
}
.pxp-ring-nodes-v18 {
  background:
    radial-gradient(circle at 100% 50%, var(--pxp-hot) 0 calc(var(--pxp-node) * .23), transparent calc(var(--pxp-node) * .27)),
    radial-gradient(circle at 0% 50%, var(--pxp-hot) 0 calc(var(--pxp-node) * .23), transparent calc(var(--pxp-node) * .27));
  filter: drop-shadow(0 0 4px var(--pxp-b)) drop-shadow(0 0 7px var(--pxp-glow));
}

/* STARTER 1-5 - restrained steel/grey, like the reference. */
.pxp-avatar-wrap.pxp-ring-starter.pxp-premium-surround {
  --pxp-a:#636b78; --pxp-b:#aab3c0; --pxp-c:#e9edf2; --pxp-hot:#f8fafc;
  --pxp-glow:rgba(183,192,204,.34); --pxp-glow2:rgba(150,160,175,.12);
  --pxp-speed:20s; --pxp-speed2:30s;
}
.pxp-avatar-wrap.pxp-ring-starter .pxp-ring-aura-v18 { opacity:.32; filter:drop-shadow(0 0 4px rgba(235,240,246,.34)); }
.pxp-avatar-wrap.pxp-ring-starter .pxp-ring-core-v18 {
  background:conic-gradient(from 20deg,#59616d,#edf1f5 12%,#7f8997 27%,#c9d0d9 45%,#626b78 62%,#f7f9fb 78%,#818b99 100%);
  filter:drop-shadow(0 0 2px rgba(255,255,255,.5));
}
.pxp-avatar-wrap.pxp-ring-starter .pxp-ring-orbit-v18 { opacity:.28; animation-duration:35s; }
.pxp-avatar-wrap.pxp-ring-starter .pxp-ring-spikes-v18,
.pxp-avatar-wrap.pxp-ring-starter .pxp-ring-nodes-v18 { display:none; }

/* CONNECTOR 6-15 - electric blue/cyan. */
.pxp-avatar-wrap.pxp-ring-connector.pxp-premium-surround {
  --pxp-a:#075dff; --pxp-b:#00c8ff; --pxp-c:#8ef5ff; --pxp-hot:#e9ffff;
  --pxp-glow:rgba(0,132,255,.98); --pxp-glow2:rgba(0,198,255,.48);
  --pxp-speed:5.2s; --pxp-speed2:7.4s;
}
.pxp-avatar-wrap.pxp-ring-connector .pxp-ring-core-v18 {
  background:conic-gradient(from 8deg,#086cff 0 10%,#eaffff 10% 13%,#00d1ff 13% 28%,transparent 28% 31%,#087fff 31% 49%,#b9fbff 49% 53%,#00b8ff 53% 72%,transparent 72% 76%,#0a6cff 76% 92%,#e9ffff 92% 95%,#00c8ff 95% 100%);
}

/* SOCIAL 16-30 - saturated violet/magenta crystalline energy. */
.pxp-avatar-wrap.pxp-ring-social.pxp-premium-surround {
  --pxp-a:#7325ff; --pxp-b:#c836ff; --pxp-c:#ff69e8; --pxp-hot:#ffe8ff;
  --pxp-glow:rgba(151,49,255,.98); --pxp-glow2:rgba(235,49,255,.46);
  --pxp-speed:4.8s; --pxp-speed2:6.8s;
}
.pxp-avatar-wrap.pxp-ring-social .pxp-ring-core-v18 {
  background:conic-gradient(from 0deg,#7027ff,#d73dff 12%,#ffeaff 15%,#9c30ff 30%,transparent 34%,#e747ef 51%,#fff1ff 55%,#862cff 70%,transparent 73%,#d438ff 88%,#ff79ed 100%);
}

/* INFLUENCER 31-50 - animated gold/orange crown-like sparks. */
.pxp-avatar-wrap.pxp-ring-influencer.pxp-premium-surround {
  --pxp-a:#ff7b00; --pxp-b:#ffb000; --pxp-c:#ffe357; --pxp-hot:#fff7c5;
  --pxp-glow:rgba(255,148,0,.98); --pxp-glow2:rgba(255,195,18,.52);
  --pxp-speed:4.0s; --pxp-speed2:6s;
}
.pxp-avatar-wrap.pxp-ring-influencer .pxp-ring-core-v18 {
  background:conic-gradient(from 12deg,#ff7600 0 9%,#fff6b1 9% 13%,#ffbf12 13% 28%,transparent 28% 31%,#ff8b00 31% 47%,#fff0a0 47% 51%,#ffc31d 51% 69%,transparent 69% 72%,#ff8200 72% 88%,#fff8cc 88% 92%,#ffae00 92% 100%);
}
.pxp-avatar-wrap.pxp-ring-influencer .pxp-ring-spikes-v18 { opacity:.76; animation-duration:1.2s; }

/* ELITE 51-75 - platinum, white-hot facets and cool particles. */
.pxp-avatar-wrap.pxp-ring-elite.pxp-premium-surround {
  --pxp-a:#8e99ae; --pxp-b:#d5ddea; --pxp-c:#f4f8ff; --pxp-hot:#ffffff;
  --pxp-glow:rgba(220,231,255,.96); --pxp-glow2:rgba(154,177,228,.52);
  --pxp-speed:3.7s; --pxp-speed2:5.8s;
}
.pxp-avatar-wrap.pxp-ring-elite .pxp-ring-core-v18 {
  background:conic-gradient(from 6deg,#929db0 0 8%,#fff 8% 13%,transparent 13% 16%,#e4eaf4 16% 33%,#fff 33% 38%,#a4afc1 38% 56%,transparent 56% 59%,#fff 59% 65%,#ccd5e4 65% 81%,#fff 81% 86%,#9aa6b9 86% 100%);
}
.pxp-avatar-wrap.pxp-ring-elite .pxp-ring-spikes-v18 { opacity:.7; }

/* LEGEND 76-99 - true fire/electric red-orange with hot yellow arcs. */
.pxp-avatar-wrap.pxp-ring-legend.pxp-premium-surround {
  --pxp-a:#ff2512; --pxp-b:#ff6a00; --pxp-c:#ffb11a; --pxp-hot:#fff3a2;
  --pxp-glow:rgba(255,48,0,.99); --pxp-glow2:rgba(255,130,0,.62);
  --pxp-speed:2.45s; --pxp-speed2:3.35s;
}
.pxp-avatar-wrap.pxp-ring-legend .pxp-ring-core-v18 {
  background:conic-gradient(from 0deg,#ff2916 0 8%,#fff099 8% 12%,#ff6a00 12% 26%,transparent 26% 29%,#ff3016 29% 42%,#ffc02b 42% 47%,#ff5c00 47% 61%,transparent 61% 65%,#fff0a0 65% 69%,#ff3317 69% 84%,#ff9d0d 84% 91%,#ff2617 91% 100%);
  animation:pxpV18Spin var(--pxp-speed) linear infinite, pxpV18LegendFlicker .72s ease-in-out infinite alternate;
}
.pxp-avatar-wrap.pxp-ring-legend .pxp-ring-spikes-v18 {
  opacity:.94;
  filter:drop-shadow(0 0 4px #ffd23a) drop-shadow(0 0 10px #ff4a00) drop-shadow(0 0 18px rgba(255,38,0,.68));
  animation:pxpV18Flame .68s ease-in-out infinite alternate;
}
.pxp-avatar-wrap.pxp-ring-legend .pxp-ring-aura-v18 { animation-duration:.8s; }

/* PULSE ICON 100 - exclusive cyan/purple/pink dual-energy surround. */
.pxp-avatar-wrap.pxp-ring-icon.pxp-premium-surround {
  --pxp-a:#7a35ff; --pxp-b:#c53cff; --pxp-c:#21d7ff; --pxp-hot:#ffffff;
  --pxp-glow:rgba(128,55,255,.99); --pxp-glow2:rgba(31,213,255,.68);
  --pxp-speed:2.2s; --pxp-speed2:2.85s;
}
.pxp-avatar-wrap.pxp-ring-icon .pxp-ring-core-v18 {
  background:conic-gradient(from 0deg,#7438ff 0 10%,#ff47d4 10% 18%,#fff 18% 21%,#22dfff 21% 31%,#813cff 31% 44%,transparent 44% 47%,#f744d1 47% 58%,#efffff 58% 62%,#1fd7ff 62% 74%,#8d3dff 74% 86%,#ff4dd9 86% 95%,#28d9ff 95% 100%);
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #21d7ff) drop-shadow(0 0 18px rgba(136,48,255,.88)) drop-shadow(0 0 28px rgba(255,57,205,.45));
}
.pxp-avatar-wrap.pxp-ring-icon .pxp-ring-orbit-v18 {
  inset:calc(var(--pxp-orbit) * -3.3) !important;
  opacity:1;
  background:repeating-conic-gradient(from 0deg,transparent 0 11deg,#33dfff 11deg 13deg,transparent 13deg 28deg,#ff45d6 28deg 30deg,transparent 30deg 45deg);
}
.pxp-avatar-wrap.pxp-ring-icon .pxp-ring-spikes-v18 {
  opacity:1;
  background:repeating-conic-gradient(from 0deg,transparent 0 9deg,#fff 9deg 10deg,transparent 10deg 19deg,#23dfff 19deg 20deg,transparent 20deg 29deg,#ff45d6 29deg 30deg,transparent 30deg 40deg);
  filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #23dfff) drop-shadow(0 0 17px #ac3fff);
  animation:pxpV18IconCharge 1.05s ease-in-out infinite alternate;
}
.pxp-avatar-wrap.pxp-ring-icon .pxp-ring-nodes-v18::before,
.pxp-avatar-wrap.pxp-ring-icon .pxp-ring-nodes-v18::after {
  background:linear-gradient(135deg,#fff 0 20%,#20dcff 38%,#8d41ff 64%,#ff49d8 100%);
  border-radius:1px 60% 1px 60%;
}

@keyframes pxpV18Spin { to { transform:rotate(360deg); } }
@keyframes pxpV18SpinBack { to { transform:rotate(-360deg); } }
@keyframes pxpV18Aura {
  from { opacity:.46; transform:scale(.985); }
  to   { opacity:.88; transform:scale(1.025); }
}
@keyframes pxpV18Node {
  from { opacity:.68; filter:brightness(.9); transform:translateX(-50%) rotate(45deg) scale(.78); }
  to   { opacity:1; filter:brightness(1.28); transform:translateX(-50%) rotate(45deg) scale(1.14); }
}
@keyframes pxpV18SpikeBreath {
  from { opacity:.34; transform:scale(.99) rotate(0deg); }
  to   { opacity:.72; transform:scale(1.025) rotate(2deg); }
}
@keyframes pxpV18LegendFlicker {
  0% { opacity:.82; filter:brightness(.95); }
  45% { opacity:1; filter:brightness(1.22); }
  100% { opacity:.9; filter:brightness(1.05); }
}
@keyframes pxpV18Flame {
  from { opacity:.64; transform:scale(.985) rotate(-1deg); filter:brightness(.9); }
  to   { opacity:1; transform:scale(1.045) rotate(1deg); filter:brightness(1.35); }
}
@keyframes pxpV18IconCharge {
  from { opacity:.66; transform:scale(.99) rotate(-2deg); }
  to   { opacity:1; transform:scale(1.055) rotate(2deg); }
}

/* Keep hover cards, menus and tooltips above decorative rings. */
[role="tooltip"],
[data-radix-popper-content-wrapper],
[data-radix-tooltip-content],
[data-radix-hover-card-content],
[data-radix-popover-content],
[class*="tooltip" i],
[class*="hover-card" i],
[class*="hovercard" i],
[class*="popover" i] { z-index:10050 !important; }

@media (prefers-reduced-motion: reduce) {
  .pxp-ring-fx-v18 > span,
  .pxp-ring-fx-v18::before,
  .pxp-ring-fx-v18::after { animation:none !important; }
}