/* /styles/avatar.css */
.avatar-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
}

.avatar-icn { width: 100%; height: 100%; display: block; }

.avatar-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 2px 10px rgba(0,0,0,.35);
  pointer-events: none;
}

/* Progress ring (optional) */
.avatar-progress {
  position: absolute; inset: -3px;
  border-radius: 50%;
  background:
    conic-gradient(var(--ring, #33E1FF) calc(var(--pct,0)*1%), rgba(255,255,255,.06) 0);
  mask: radial-gradient(circle at 50% 50%, transparent 54%, #000 55%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 54%, #000 55%);
}

/* Tier-driven auras */
[data-tier="pro"] .avatar-ring   { box-shadow: 0 0 0 2px rgba(255,200,120,.35) inset, 0 0 20px rgba(255,160,60,.25); }
[data-tier="leader"] .avatar-ring{ box-shadow: 0 0 0 2px rgba(24,228,200,.35) inset, 0 0 20px rgba(24,228,200,.25); }

/* Badge (crown) placeholder – the SVG <use> is injected by JS */
.avatar-badge {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; pointer-events: none;
  animation: badgePop .25s ease-out;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
@keyframes badgePop { from { transform: scale(.6); opacity:0 } to { transform: scale(1); opacity:1 } }