/**
 * CoinRush User Avatar — ISO Standard (Best Practice)
 *
 * FRAME FITS AROUND INNER: Level border PNGs have transparent centers.
 * The purple circle sits BEHIND and shows through the frame's "window".
 * Frame is ON TOP (z-index 2), inner is BEHIND (z-index 1).
 *
 * Sizing: inner ≈ 60% of frame so it fits snugly inside the PNG cutout.
 * @see AVATAR_STANDARD.md
 */

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  --cr-avatar-bg: linear-gradient(145deg, #7C3AED 0%, #6B21A8 40%, #4C1D95 100%);
  --cr-avatar-bg-flat: #6B21A8;
  --cr-avatar-bg-alt: #7C3AED;
  --cr-avatar-initials: #ffffff;
  --cr-avatar-initials-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 6px rgba(124, 58, 237, 0.2);

  --cr-avatar-gold-light: #FCD34D;
  --cr-avatar-gold: #F59E0B;
  --cr-avatar-gold-mid: #D97706;
  --cr-avatar-gold-dark: #B45309;
  --cr-avatar-gold-shadow: rgba(0, 0, 0, 0.4);
  --cr-avatar-gem: #FBBF24;

  /* Inner fits inside frame cutout: ~60% of frame size (PNG typically ~48/80 center) */
  --cr-avatar-inner-ratio: 0.6;

  /* Size scale (inner diameter) */
  --cr-avatar-xs: 20px;
  --cr-avatar-sm: 32px;
  --cr-avatar-md: 44px;
  --cr-avatar-lg: 64px;
  --cr-avatar-xl: 88px;

  --cr-avatar-ring-xs: 2px;
  --cr-avatar-ring-sm: 3px;
  --cr-avatar-ring-md: 4px;
  --cr-avatar-ring-lg: 5px;
  --cr-avatar-ring-xl: 6px;
}

/* ============================================
   BASE: .cr-user-avatar
   ============================================ */
.cr-user-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  isolation: isolate;
}

/* Inner: BEHIND — shows through frame's transparent center */
.cr-user-avatar__inner {
  position: relative;
  border-radius: 50%;
  width: var(--cr-avatar-md);
  height: var(--cr-avatar-md);
  font-size: 16px;
  background: var(--cr-avatar-bg);
  color: var(--cr-avatar-initials);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: var(--cr-avatar-initials-shadow);
  z-index: 1;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15),
              inset 0 -2px 6px rgba(0, 0, 0, 0.3);
}

/* Frame: ON TOP — transparent center, ornate border around edges */
.cr-user-avatar__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

/* Navbar wrappers: inner MUST be absolute-centered (overrides base position:relative) */
.player-avatar-wrapper .cr-user-avatar__inner,
.dropdown-avatar-wrapper .cr-user-avatar__inner {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Golden ornate ring (Rookie, no PNG frame) */
.cr-user-avatar--ring .cr-user-avatar__inner {
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    0 0 0 3px var(--cr-avatar-gold),
    0 0 0 5px var(--cr-avatar-gold-dark),
    0 4px 14px var(--cr-avatar-gold-shadow);
}
.cr-user-avatar--ring.cr-user-avatar--lg .cr-user-avatar__inner,
.cr-user-avatar--ring.cr-user-avatar--xl .cr-user-avatar__inner {
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.25),
    0 0 0 4px var(--cr-avatar-gold),
    0 0 0 6px var(--cr-avatar-gold-dark),
    0 6px 18px var(--cr-avatar-gold-shadow);
}

/* ============================================
   SIZE SCALE
   ============================================ */
.cr-user-avatar--xs .cr-user-avatar__inner {
  width: var(--cr-avatar-xs);
  height: var(--cr-avatar-xs);
  font-size: 9px;
}
.cr-user-avatar--xs.cr-user-avatar--ring .cr-user-avatar__inner {
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 0 0 2px var(--cr-avatar-gold), 0 2px 8px var(--cr-avatar-gold-shadow);
}

.cr-user-avatar--sm .cr-user-avatar__inner {
  width: var(--cr-avatar-sm);
  height: var(--cr-avatar-sm);
  font-size: 12px;
}

.cr-user-avatar--md .cr-user-avatar__inner {
  width: var(--cr-avatar-md);
  height: var(--cr-avatar-md);
  font-size: 16px;
}

.cr-user-avatar--lg .cr-user-avatar__inner {
  width: var(--cr-avatar-lg);
  height: var(--cr-avatar-lg);
  font-size: 22px;
}

.cr-user-avatar--xl .cr-user-avatar__inner {
  width: var(--cr-avatar-xl);
  height: var(--cr-avatar-xl);
  font-size: 28px;
}

.cr-user-avatar--accent .cr-user-avatar__inner {
  /* background overridden by component */
}

/* ============================================
   ACTIVE DUEL CARDS (bc) — ISO = AUTH modal
   Coinflip, Knight Arena, Slice n' Dice
   ============================================ */
.bc__avatar-wrap.bc__avatar-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.bc__avatar-wrap.bc__avatar-link:hover {
  transform: scale(1.05);
}

.bc__avatar-wrap--clickable {
  cursor: pointer;
  transition: transform 0.15s ease;
}
.bc__avatar-wrap--clickable:hover {
  transform: scale(1.05);
}

.bc__avatar-popover {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: linear-gradient(165deg, #1a1f2e, #0f1419);
  border: 1px solid rgba(91, 255, 178, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bc__avatar-popover-name {
  font-weight: 700;
  font-size: 14px;
  color: #f8fafc;
}
.bc__avatar-popover-btn {
  padding: 6px 16px;
  background: linear-gradient(135deg, #5bffb2, #3dd492);
  color: #0a0f0d;
  font-weight: 700;
  font-size: 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: filter 0.15s;
}
.bc__avatar-popover-btn:hover {
  filter: brightness(1.1);
}

.bc__avatar-wrap .cr-user-avatar__inner {
  background: #6B21A8 !important;
  background-image: none !important;
}

.bc__avatar-wrap .cf-avatar__level,
.bc__avatar-wrap .sd-avatar__level,
.bc__avatar-wrap .bc__level-badge {
  position: absolute !important;
  bottom: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #1a1a2e !important;
  background-image: none !important;
  border: 1px solid rgba(255, 215, 0, 0.35);
  color: #ffd700 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  padding: 2px 5px !important;
  border-radius: 8px !important;
  z-index: 25 !important;
  font-family: 'JetBrains Mono', monospace !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  white-space: nowrap !important;
}

/* ============================================
   AVATAR GRADIENT SYSTEM
   Each user gets a unique gradient via JS
   (window.getAvatarGradient). CSS fallback below.
   ============================================ */