/* ══════════════════════════════════════════════════
   Essence Profile Cosmetics
   Applied via data-* attributes set by cosmetics.js
   ══════════════════════════════════════════════════ */

/* ── Avatar Frame canvas ── */
.prof-frame-cv {
  position: absolute;
  width: 136px; height: 136px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
}

/* ── Neon arc CSS frame (no canvas) ── */
@property --neon-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.prof-frame-neon-wrap::before {
  content: '';
  position: absolute;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: conic-gradient(from var(--neon-a), transparent 55%, #a78bfa 70%, #fff 76%, #a78bfa 82%, transparent 100%);
  animation: neon-a-spin 2s linear infinite;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
}
@keyframes neon-a-spin { to { --neon-a: 360deg; } }

/* ── XP Bar styles ── */
.xp-bar.xp-shimmer { position: relative; overflow: hidden; }
.xp-bar.xp-shimmer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  animation: xp-sw 2.4s ease-in-out infinite;
}
@keyframes xp-sw { 0% { transform: translateX(-200%); } 100% { transform: translateX(350%); } }

.xp-bar.xp-pulse {
  animation: xp-pb 1.8s ease-in-out infinite;
}
@keyframes xp-pb {
  0%,100% { opacity: 1; box-shadow: 0 0 2px var(--ac); }
  50% { opacity: .7; box-shadow: 0 0 10px var(--ac), 0 0 22px var(--ac); }
}

.xp-bar.xp-segs {
  background: repeating-linear-gradient(
    90deg,
    var(--ac) 0, var(--ac) 11px,
    rgba(0,0,0,.5) 11px, rgba(0,0,0,.5) 13px
  ) !important;
  background-size: auto 100% !important;
}

.xp-bar.xp-neon-edge {
  background: rgba(var(--ac-rgb, 136 120 192) / .12) !important;
  border: 1px solid var(--ac);
  border-radius: 4px;
  animation: xp-ne 2s ease-in-out infinite;
}
@keyframes xp-ne {
  0%,100% { box-shadow: 0 0 6px var(--ac), inset 0 0 4px rgba(255,255,255,.04); }
  50% { box-shadow: 0 0 18px var(--ac), 0 0 36px var(--ac), inset 0 0 8px rgba(255,255,255,.1); }
}

/* XP Particle — canvas overlaid on xp-bar-wrap */
.xp-particle-cv {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* ── Username canvas ── */
.prof-name-cv {
  position: absolute;
  inset: -16px -40px;
  pointer-events: none;
  z-index: 1;
}
.prof-name-wrap {
  position: relative;
  display: inline-block;
}

/* ── Username CSS effects ── */
.prof-name.name-fx-gradient {
  background: linear-gradient(90deg, #8878c0, #dc82a0, #38b4d8, #60ef80, #8878c0);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: un-grad 3.5s linear infinite;
}
@keyframes un-grad { to { background-position: 400% 0; } }

.prof-name.name-fx-aura {
  animation: un-aura-p 2.8s ease-in-out infinite;
}
@keyframes un-aura-p {
  0%,100% { text-shadow: 0 0 5px rgba(136,120,192,.2); }
  50% { text-shadow: 0 0 16px rgba(136,120,192,.95), 0 0 32px rgba(136,120,192,.5), 0 0 55px rgba(136,120,192,.2); }
}

/* ── Level Badge styles ── */
.prof-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  font-weight: 800;
  font-size: .8rem;
  border-radius: 50%;
  background: var(--ac);
  color: #fff;
  position: relative;
}
.prof-level-badge.badge-hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, #4c1d95, #7c3aed, #a78bfa);
  border-radius: 0;
}
.prof-level-badge.badge-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: linear-gradient(135deg, #0f172a, #0ea5e9);
  border-radius: 0;
  width: 36px; height: 36px;
  animation: lv-diam 2.5s ease-in-out infinite;
}
@keyframes lv-diam {
  0%,100% { filter: drop-shadow(0 0 4px #38bdf8); }
  50% { filter: drop-shadow(0 0 14px #38bdf8) drop-shadow(0 0 28px #0ea5e9); }
}
.prof-level-badge.badge-aura-ring {
  background: transparent;
  border: 2.5px solid var(--ac);
  color: var(--ac);
  animation: lv-ar 2s ease-in-out infinite;
}
@keyframes lv-ar {
  0%,100% { box-shadow: 0 0 5px var(--ac), inset 0 0 3px rgba(136,120,192,.1); }
  50% { box-shadow: 0 0 18px var(--ac), 0 0 36px rgba(136,120,192,.45), inset 0 0 10px rgba(136,120,192,.15); }
}
.prof-level-badge.badge-crown {
  background: linear-gradient(135deg, #78350f, #d97706);
  color: #fcd34d;
}
.prof-badge-canvas-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.prof-badge-cv {
  position: absolute;
  pointer-events: none;
}