/* Leaderboard avatar frames — shared by leaderboard + profile cosmetics */

.lb-avatar-framed {
  border-radius: 50%;
}

.cosmetics-frame-preview {
  width: 4.25rem;
  height: 4.25rem;
  margin: 0 auto 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cosmetics-frame-preview .cosmetics-frame-avatar {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
}

/* Metal tier */
.lb-avatar-framed.lb-frame-bronze {
  box-shadow: 0 0 0 3px #b87333, 0 0 12px rgba(184, 115, 51, 0.45);
}
.lb-avatar-framed.lb-frame-silver {
  box-shadow: 0 0 0 3px #c0c0c0, 0 0 12px rgba(192, 192, 192, 0.5);
}
.lb-avatar-framed.lb-frame-gold {
  box-shadow: 0 0 0 3px #e8c547, 0 0 14px rgba(232, 197, 71, 0.55);
}

/* Gem tier */
.lb-avatar-framed.lb-frame-emerald {
  box-shadow: 0 0 0 3px #10b981, 0 0 14px rgba(16, 185, 129, 0.55);
}
.lb-avatar-framed.lb-frame-sapphire {
  box-shadow: 0 0 0 3px #3b82f6, 0 0 14px rgba(59, 130, 246, 0.55);
}
.lb-avatar-framed.lb-frame-ruby {
  box-shadow: 0 0 0 3px #ef4444, 0 0 14px rgba(239, 68, 68, 0.5);
}

/* Effect tier */
.lb-avatar-framed.lb-frame-sunset {
  box-shadow:
    0 0 0 3px #f97316,
    0 0 12px rgba(249, 115, 22, 0.5),
    0 0 20px rgba(236, 72, 153, 0.35);
}
.lb-avatar-framed.lb-frame-midnight {
  box-shadow:
    0 0 0 3px #6366f1,
    0 0 16px rgba(99, 102, 241, 0.55),
    0 0 24px rgba(30, 27, 75, 0.8);
}
.lb-avatar-framed.lb-frame-neon {
  box-shadow: 0 0 0 3px #22c55e, 0 0 10px #22c55e, 0 0 22px rgba(34, 197, 94, 0.75);
  animation: lb-frame-neon-pulse 2.2s ease-in-out infinite;
}
.lb-avatar-framed.lb-frame-aurora {
  animation: lb-frame-aurora-cycle 4s ease-in-out infinite;
}
.lb-avatar-framed.lb-frame-cosmic {
  box-shadow:
    0 0 0 3px #c084fc,
    0 0 14px rgba(192, 132, 252, 0.6),
    0 0 28px rgba(99, 102, 241, 0.45);
  animation: lb-frame-cosmic-spin 6s linear infinite;
}

@keyframes lb-frame-neon-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px #22c55e, 0 0 10px #22c55e, 0 0 22px rgba(34, 197, 94, 0.75);
  }
  50% {
    box-shadow: 0 0 0 3px #4ade80, 0 0 16px #4ade80, 0 0 32px rgba(74, 222, 128, 0.9);
  }
}

@keyframes lb-frame-aurora-cycle {
  0%,
  100% {
    box-shadow: 0 0 0 3px #38bdf8, 0 0 16px rgba(56, 189, 248, 0.55);
  }
  33% {
    box-shadow: 0 0 0 3px #a855f7, 0 0 16px rgba(168, 85, 247, 0.55);
  }
  66% {
    box-shadow: 0 0 0 3px #f472b6, 0 0 16px rgba(244, 114, 182, 0.55);
  }
}

@keyframes lb-frame-cosmic-spin {
  0% {
    box-shadow:
      0 0 0 3px #c084fc,
      0 0 14px rgba(192, 132, 252, 0.6),
      0 0 28px rgba(99, 102, 241, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 3px #818cf8,
      0 0 18px rgba(129, 140, 248, 0.65),
      0 0 32px rgba(236, 72, 153, 0.35);
  }
  100% {
    box-shadow:
      0 0 0 3px #c084fc,
      0 0 14px rgba(192, 132, 252, 0.6),
      0 0 28px rgba(99, 102, 241, 0.45);
  }
}