/* ===================================
   LEVEL SYSTEM — PNG AVATAR BORDER FRAMES v10
   Premium Prestige Frames (LoL / Valorant quality)
   Hand-crafted PNG art overlaid on avatars
   GPU-accelerated glow + hover animations
   =================================== */

/* ── Base wrapper for ALL avatars ── */
.cr-user-avatar,
.player-avatar,
.dropdown-avatar {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
}

/* ── PNG frame layer ── */
.cr-border-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* PNG border art is larger than the avatar — scale up to frame it */
  width: 155%;
  height: 155%;
  pointer-events: none;
  z-index: 10;
  will-change: transform, opacity, filter;
  overflow: visible;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.3s ease;
}

/* ── Border PNG image ── */
.cr-border-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/*
  SIZE SYSTEM: SVG uses width/height: 100%, parent dictates size.
  Standard avatar sizes:  xs=32  sm=48  md=68  lg=92  xl=120
*/
.cr-user-avatar--xs { width: 32px;  height: 32px;  min-width: 32px;  min-height: 32px; }
.cr-user-avatar--sm { width: 48px;  height: 48px;  min-width: 48px;  min-height: 48px; }
.cr-user-avatar--md { width: 68px;  height: 68px;  min-width: 68px;  min-height: 68px; }
.cr-user-avatar--lg { width: 92px;  height: 92px;  min-width: 92px;  min-height: 92px; }
.cr-user-avatar--xl { width: 120px; height: 120px; min-width: 120px; min-height: 120px; }

/* ── ROOKIE — no border ── */
.cr-border-frame--rookie { display: none; }

/* ── Size-specific scaling ──
   Navbar (sm/xs) is tight — scale border down so it doesn't overflow.
   Dropdown keeps it contained but still impressive. */
.cr-user-avatar--xs .cr-border-frame { width: 130%; height: 130%; }
.cr-user-avatar--sm .cr-border-frame { width: 135%; height: 135%; }
.player-avatar-wrapper .cr-border-frame { width: 135%; height: 135%; }
.dropdown-avatar-wrapper .cr-border-frame { width: 140%; height: 140%; }

/* ── Hover lift ── */
.cr-user-avatar:hover .cr-border-frame,
.player-avatar:hover .cr-border-frame,
.dropdown-avatar:hover .cr-border-frame {
  transform: translate(-50%, -50%) scale(1.06);
  filter: brightness(1.15);
}

/* ─────────────────────────────────────────────
   TIER GLOW + AMBIENT ANIMATIONS
   ───────────────────────────────────────────── */

/* BRONZE — warm forge glow */
.cr-border-frame--bronze {
  filter: drop-shadow(0 0 3px rgba(184,115,51,0.35));
  animation: glow-bronze 4s ease-in-out infinite;
}
@keyframes glow-bronze {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(184,115,51,0.3)); }
  50%      { filter: drop-shadow(0 0 7px rgba(184,115,51,0.55)); }
}

/* SILVER — moonlit shimmer */
.cr-border-frame--silver {
  filter: drop-shadow(0 0 4px rgba(188,198,208,0.4));
  animation: glow-silver 3.5s ease-in-out infinite;
}
@keyframes glow-silver {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(188,198,208,0.3)); }
  50%      { filter: drop-shadow(0 0 8px rgba(220,230,240,0.55)); }
}

/* GOLD — radiant royalty */
.cr-border-frame--gold {
  filter: drop-shadow(0 0 6px rgba(255,201,64,0.5));
  animation: glow-gold 3s ease-in-out infinite;
}
@keyframes glow-gold {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,201,64,0.4)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255,201,64,0.75)); }
}

/* DIAMOND — crystalline brilliance */
.cr-border-frame--diamond {
  filter: drop-shadow(0 0 8px rgba(88,208,255,0.45))
          drop-shadow(0 0 3px rgba(255,255,255,0.2));
  animation: glow-diamond 2.8s ease-in-out infinite;
}
@keyframes glow-diamond {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(88,208,255,0.35)) drop-shadow(0 0 2px rgba(255,255,255,0.15)); }
  50%      { filter: drop-shadow(0 0 14px rgba(88,208,255,0.7)) drop-shadow(0 0 5px rgba(255,255,255,0.35)); }
}

/* CHALLENGER — cosmic purple + gold */
.cr-border-frame--challenger {
  filter: drop-shadow(0 0 8px rgba(168,85,247,0.4))
          drop-shadow(0 0 4px rgba(255,215,0,0.25));
  animation: glow-challenger 2.5s ease-in-out infinite;
}
@keyframes glow-challenger {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(168,85,247,0.35)) drop-shadow(0 0 3px rgba(255,215,0,0.2)); }
  50%      { filter: drop-shadow(0 0 16px rgba(168,85,247,0.65)) drop-shadow(0 0 8px rgba(255,215,0,0.45)); }
}

/* RUBY — inferno blaze */
.cr-border-frame--ruby {
  filter: drop-shadow(0 0 8px rgba(239,68,68,0.45))
          drop-shadow(0 0 3px rgba(255,149,0,0.2));
  animation: glow-ruby 2.2s ease-in-out infinite;
}
@keyframes glow-ruby {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(239,68,68,0.35)) drop-shadow(0 0 2px rgba(255,149,0,0.15)); }
  50%      { filter: drop-shadow(0 0 14px rgba(239,68,68,0.7)) drop-shadow(0 0 5px rgba(255,149,0,0.35)); }
}

/* LEGENDARY — transcendent prismatic */
.cr-border-frame--legendary {
  filter: drop-shadow(0 0 10px rgba(251,191,36,0.5))
          drop-shadow(0 0 6px rgba(124,58,237,0.3))
          drop-shadow(0 0 3px rgba(34,211,238,0.2));
  animation: glow-legendary 2s ease-in-out infinite, legendary-hue 12s linear infinite;
}
@keyframes glow-legendary {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(251,191,36,0.4)) drop-shadow(0 0 5px rgba(124,58,237,0.25)) drop-shadow(0 0 2px rgba(34,211,238,0.15)); }
  50%      { filter: drop-shadow(0 0 20px rgba(251,191,36,0.8)) drop-shadow(0 0 12px rgba(124,58,237,0.5)) drop-shadow(0 0 6px rgba(34,211,238,0.35)); }
}
@keyframes legendary-hue {
  0%   { filter: drop-shadow(0 0 12px rgba(251,191,36,0.6)) drop-shadow(0 0 8px rgba(124,58,237,0.35)) hue-rotate(0deg); }
  100% { filter: drop-shadow(0 0 12px rgba(251,191,36,0.6)) drop-shadow(0 0 8px rgba(124,58,237,0.35)) hue-rotate(360deg); }
}

/* OLYMPUS — divine golden radiance ⚡ */
.cr-border-frame--olympus {
  filter: drop-shadow(0 0 14px rgba(255,200,50,0.7))
          drop-shadow(0 0 8px rgba(255,160,20,0.45))
          drop-shadow(0 0 4px rgba(255,255,200,0.3));
  animation: glow-olympus 2.2s ease-in-out infinite, olympus-hue 10s linear infinite;
}
@keyframes glow-olympus {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(255,200,50,0.5))
            drop-shadow(0 0 5px rgba(255,160,20,0.3))
            drop-shadow(0 0 2px rgba(255,255,200,0.2));
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(255,200,50,0.9))
            drop-shadow(0 0 14px rgba(255,160,20,0.6))
            drop-shadow(0 0 6px rgba(255,255,200,0.5));
  }
}
@keyframes olympus-hue {
  0%   { filter: drop-shadow(0 0 14px rgba(255,200,50,0.7)) drop-shadow(0 0 8px rgba(255,160,20,0.45)) hue-rotate(0deg); }
  25%  { filter: drop-shadow(0 0 16px rgba(255,180,40,0.75)) drop-shadow(0 0 10px rgba(245,130,30,0.5)) hue-rotate(15deg); }
  50%  { filter: drop-shadow(0 0 14px rgba(255,210,60,0.7)) drop-shadow(0 0 8px rgba(255,170,40,0.45)) hue-rotate(0deg); }
  75%  { filter: drop-shadow(0 0 16px rgba(255,190,45,0.75)) drop-shadow(0 0 10px rgba(250,140,25,0.5)) hue-rotate(-15deg); }
  100% { filter: drop-shadow(0 0 14px rgba(255,200,50,0.7)) drop-shadow(0 0 8px rgba(255,160,20,0.45)) hue-rotate(0deg); }
}

/* ─────────────────────────────────────────────
   ORNAMENT ANIMATIONS — tier-specific
   ───────────────────────────────────────────── */

/* Rotating gradient on Diamond+ rings */
.cr-border-frame--diamond .border-ring-gradient,
.cr-border-frame--challenger .border-ring-gradient,
.cr-border-frame--ruby .border-ring-gradient,
.cr-border-frame--legendary .border-ring-gradient,
.cr-border-frame--olympus .border-ring-gradient {
  animation: ring-spin 12s linear infinite;
  transform-origin: center;
}
.cr-border-frame--legendary .border-ring-gradient { animation-duration: 6s; }
.cr-border-frame--olympus .border-ring-gradient { animation-duration: 4s; }
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Silver ethereal wisps */
.silver-wisp {
  animation: wisp-drift 4s ease-in-out infinite alternate;
}
@keyframes wisp-drift {
  0%   { opacity: 0.15; stroke-width: 0.6; }
  100% { opacity: 0.35; stroke-width: 1; }
}

/* Gold light rays */
.gold-ray {
  animation: ray-pulse 3s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes ray-pulse {
  0%   { opacity: 0.12; }
  100% { opacity: 0.3; }
}

/* Gem pulse (gold, diamond, ruby, legendary) */
.gem-pulse {
  animation: gem-glow 2.5s ease-in-out infinite;
}
@keyframes gem-glow {
  0%, 100% { opacity: 0.08; r: 4; }
  50%      { opacity: 0.2; r: 6; }
}

/* Diamond sparkle motes */
.diamond-sparkle {
  animation: sparkle-pop 2.2s ease-in-out infinite;
}
@keyframes sparkle-pop {
  0%, 100% { opacity: 0.2; r: 0.5; }
  50%      { opacity: 0.9; r: 1.2; }
}

/* Diamond prismatic inner ring */
.diamond-prism-ring {
  animation: prism-shift 8s linear infinite;
  transform-origin: center;
}
@keyframes prism-shift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Challenger wing arcs */
.challenger-wing {
  animation: ch-wing-breathe 3.5s ease-in-out infinite alternate;
}
@keyframes ch-wing-breathe {
  0%   { opacity: 0.25; stroke-width: 1; }
  100% { opacity: 0.5; stroke-width: 2; }
}

/* Floating energy nodes (challenger) */
.orb-float {
  animation: orb-bob 3s ease-in-out infinite alternate;
}
@keyframes orb-bob {
  0%   { opacity: 0.35; transform: translateY(0) scale(1); }
  100% { opacity: 0.75; transform: translateY(-2px) scale(1.15); }
}

/* Ruby flame tendrils */
.flame-tendril {
  animation: flame-dance 1.8s ease-in-out infinite alternate;
}
@keyframes flame-dance {
  0%   { opacity: 0.2; stroke-width: 0.8; }
  40%  { opacity: 0.6; stroke-width: 1.6; }
  100% { opacity: 0.3; stroke-width: 1; }
}

/* Ruby inner ember ring pulse */
.ruby-ember-ring {
  animation: ember-ring-pulse 2s ease-in-out infinite;
}
@keyframes ember-ring-pulse {
  0%, 100% { opacity: 0.15; stroke-width: 0.6; }
  50%      { opacity: 0.35; stroke-width: 1; }
}

/* Legendary wing arcs */
.legendary-wing {
  animation: leg-wing-flow 4s ease-in-out infinite alternate;
}
@keyframes leg-wing-flow {
  0%   { opacity: 0.2; stroke-width: 1; }
  50%  { opacity: 0.45; stroke-width: 2.2; }
  100% { opacity: 0.25; stroke-width: 1.5; }
}

/* Legendary inner aurora ring */
.legendary-inner-ring {
  animation: aurora-ring-spin 8s linear infinite, aurora-ring-pulse 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes aurora-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes aurora-ring-pulse {
  0%, 100% { opacity: 0.25; stroke-width: 0.8; }
  50%      { opacity: 0.5; stroke-width: 1.4; }
}

/* Orbit constellation particles */
.orbit-particle {
  animation: orbit-revolve 8s linear infinite;
  transform-origin: 60px 60px; /* matches viewBox center */
}
@keyframes orbit-revolve {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Legendary gradient shift on aurora defs */
.legendary-gradient-shift {
  animation: aurora-color-shift 6s linear infinite;
  transform-origin: center;
}
@keyframes aurora-color-shift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────
   BACKWARD COMPAT — kill PNG ::before
   ───────────────────────────────────────────── */
.player-avatar::before,
.dropdown-avatar::before,
.cr-msg-avatar-wrap::before {
  display: none !important;
}

/* ─────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cr-border-frame,
  .cr-border-frame--bronze,
  .cr-border-frame--silver,
  .cr-border-frame--gold,
  .cr-border-frame--diamond,
  .cr-border-frame--challenger,
  .cr-border-frame--ruby,
  .cr-border-frame--legendary,
  .cr-border-frame--olympus,
  .silver-wisp,
  .gold-ray,
  .gem-pulse,
  .diamond-sparkle,
  .diamond-prism-ring,
  .challenger-wing,
  .orb-float,
  .flame-tendril,
  .ruby-ember-ring,
  .legendary-wing,
  .legendary-inner-ring,
  .orbit-particle,
  .legendary-gradient-shift,
  .border-ring-gradient {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────
   MOBILE — slightly smaller on small screens
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .cr-user-avatar--xs { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
  .cr-user-avatar--sm { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
}