/* Avatar frames — each style is a distinct cosmetic, not a recolored rim.
   Technique: padding bezel + per-style --frame-face / --frame-shadow. */

@property --frame-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Structural shell only. Do NOT set --frame-face / --frame-shadow / --frame-thickness
   here: `[class*="avatar-frame--style-"]` beats `.avatar-frame--style-gold` on
   specificity and was forcing every preview back to the default green rim. */
.avatar-frame[class*="avatar-frame--style-"],
.avatar-frame--unlimited {
  --photo-inset: 0px;
  --ring-out: 0px;
  --ring-in: 0px;
  position: relative;
  box-sizing: border-box;
  border: 0 !important;
  padding: var(--frame-thickness, 2.5px) !important;
  background: var(--frame-face) !important;
  background-size: var(--frame-face-size, auto) !important;
  background-position: var(--frame-face-pos, center) !important;
  filter: none !important;
  animation: var(--frame-anim, none) !important;
  /* Visible so outer prestige rings/halos can paint; photo clips via its own radius. */
  overflow: visible !important;
  box-shadow: var(--frame-shadow) !important;
}

/* Kill legacy spinning neon layers on the FRAME shell only — never on
   descendant .avatar-glyph::after (cartoon piece art lives there). */
.avatar-frame[class*="avatar-frame--style-"]::before,
.avatar-frame[class*="avatar-frame--style-"]::after,
.avatar-frame--unlimited::before,
.avatar-frame--unlimited::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.avatar-frame[class*="avatar-frame--style-"] .avatar-photo,
.avatar-frame[class*="avatar-frame--style-"] .avatar-glyph,
.avatar-frame[class*="avatar-frame--style-"] .members-mark,
.avatar-frame[class*="avatar-frame--style-"] .profile-avatar-mark,
.avatar-frame[class*="avatar-frame--style-"] .public-avatar,
.avatar-frame[class*="avatar-frame--style-"] .members-avatar,
.avatar-frame--unlimited .avatar-photo,
.avatar-frame--unlimited .avatar-glyph,
.avatar-frame--unlimited .members-mark,
.avatar-frame--unlimited .profile-avatar-mark,
.avatar-frame--unlimited .public-avatar,
.avatar-frame--unlimited .members-avatar {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}

.avatar-frame[class*="avatar-frame--style-"] .avatar-glyph,
.avatar-frame[class*="avatar-frame--style-"] .members-mark,
.avatar-frame[class*="avatar-frame--style-"] .profile-avatar-mark,
.avatar-frame--unlimited .avatar-glyph,
.avatar-frame--unlimited .members-mark,
.avatar-frame--unlimited .profile-avatar-mark {
  display: grid;
  place-items: center;
  /* Warm maple disc — piece art layered on top via style_avatar_pieces.css */
  background-color: #e2c18a;
  background-image:
    radial-gradient(circle at 32% 28%, rgba(255, 248, 230, 0.55), transparent 52%),
    radial-gradient(circle at 70% 78%, rgba(120, 72, 28, 0.16), transparent 55%),
    linear-gradient(145deg, #f6e4c2 0%, #e2c18a 46%, #c9a06a 100%);
  color: #5c3a1a;
  text-shadow: none;
}

/* ——— Per-style cosmetics (double-class so tokens beat the structural shell) ——— */

/* Default — flat matte board-green, thinnest, no drama */
.avatar-frame.avatar-frame--style-default {
  --frame-thickness: 2px;
  --frame-rim: #5a8f6a;
  --frame-hi: #6fa07e;
  --frame-lo: #4a7a58;
  --frame-soft: transparent;
  --frame-anim: none;
  --frame-face: linear-gradient(180deg, #6fa07e 0%, #4f8360 100%);
  --frame-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(74, 122, 88, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.16);
}

/* Gold — chunky ingot metal + warm prestige halo */
.avatar-frame.avatar-frame--style-gold,
.avatar-frame.avatar-frame--unlimited:not(.avatar-frame--style-default):not([class*="avatar-frame--style-"]) {
  --frame-thickness: 3.5px;
  --frame-rim: #d4af37;
  --frame-hi: #f5e4a8;
  --frame-lo: #8a6d1a;
  --frame-soft: rgba(212, 175, 55, 0.42);
  --frame-anim: none;
  --frame-face: linear-gradient(
    145deg,
    #fff1b8 0%,
    #f0d878 18%,
    #d4af37 42%,
    #a6851f 68%,
    #6e5512 86%,
    #e8c85a 100%
  );
  --frame-shadow:
    inset 0 1px 0 rgba(255, 245, 200, 0.75),
    inset 0 -1px 0 rgba(80, 55, 10, 0.35),
    0 0 0 1px rgba(166, 133, 31, 0.55),
    0 0 0 4px rgba(212, 175, 55, 0.18),
    0 0 22px rgba(212, 175, 55, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

/* Emerald — gem cut: bright facet stripe + double green ring */
.avatar-frame.avatar-frame--style-emerald {
  --frame-thickness: 3px;
  --frame-rim: #1faa6c;
  --frame-hi: #7dffca;
  --frame-lo: #0f5c3c;
  --frame-soft: rgba(31, 170, 108, 0.28);
  --frame-anim: none;
  --frame-face: linear-gradient(
    120deg,
    #0f5c3c 0%,
    #1faa6c 28%,
    #b8ffe0 46%,
    #1faa6c 62%,
    #0a3d28 100%
  );
  --frame-shadow:
    inset 0 1px 0 rgba(184, 255, 224, 0.55),
    0 0 0 2px #0f5c3c,
    0 0 0 4px rgba(31, 170, 108, 0.45),
    0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Ocean — cool wave bands + soft cyan bloom */
.avatar-frame.avatar-frame--style-ocean {
  --frame-thickness: 3px;
  --frame-rim: #2f9fd6;
  --frame-hi: #9ad8f5;
  --frame-lo: #0d4f78;
  --frame-soft: rgba(56, 189, 248, 0.35);
  --frame-anim: none;
  --frame-face: repeating-linear-gradient(
    -28deg,
    #0d4f78 0 5px,
    #1f7aad 5px 9px,
    #7ec8ea 9px 11px,
    #2f9fd6 11px 16px
  );
  --frame-shadow:
    inset 0 1px 0 rgba(180, 230, 255, 0.45),
    0 0 0 1px rgba(13, 79, 120, 0.5),
    0 0 16px rgba(56, 189, 248, 0.28),
    0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Crimson — razor thin hard edge, no soft glow */
.avatar-frame.avatar-frame--style-crimson {
  --frame-thickness: 2px;
  --frame-rim: #e03535;
  --frame-hi: #ff6b6b;
  --frame-lo: #7a1212;
  --frame-soft: transparent;
  --frame-anim: none;
  --frame-face: linear-gradient(180deg, #ff5a5a 0%, #c01818 55%, #5c0c0c 100%);
  --frame-shadow:
    inset 0 1px 0 rgba(255, 180, 180, 0.35),
    0 0 0 1px #3a0808,
    0 0 0 3px #e03535,
    0 0 0 4px #1a0505,
    0 5px 14px rgba(0, 0, 0, 0.28);
}

/* Ivory — wide pearlescent porcelain band */
.avatar-frame.avatar-frame--style-ivory {
  --frame-thickness: 4px;
  --frame-rim: #e8dfd0;
  --frame-hi: #fffaf2;
  --frame-lo: #b5aa98;
  --frame-soft: rgba(255, 250, 242, 0.25);
  --frame-anim: none;
  --frame-face: linear-gradient(
    145deg,
    #ffffff 0%,
    #f7f1e6 22%,
    #d9d0c0 48%,
    #f3ebe0 72%,
    #a89f90 100%
  );
  --frame-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(140, 130, 115, 0.25),
    0 0 0 1px rgba(168, 159, 144, 0.55),
    0 0 14px rgba(255, 250, 242, 0.2),
    0 6px 16px rgba(0, 0, 0, 0.16);
}

/* Obsidian — near-black body, hairline silver lip */
.avatar-frame.avatar-frame--style-obsidian {
  --frame-thickness: 2.5px;
  --frame-rim: #c5cad3;
  --frame-hi: #e8eaee;
  --frame-lo: #12141a;
  --frame-soft: rgba(197, 202, 211, 0.18);
  --frame-anim: none;
  --frame-face: linear-gradient(
    160deg,
    #e8eaee 0%,
    #9aa1ac 8%,
    #2a2e38 22%,
    #0c0e12 55%,
    #3a404c 88%,
    #d0d5dd 100%
  );
  --frame-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(18, 20, 26, 0.9),
    0 0 0 2px rgba(197, 202, 211, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Aurora — living spectrum (conic spin when supported) */
.avatar-frame.avatar-frame--style-aurora {
  --frame-thickness: 3.5px;
  --frame-rim: #a78bfa;
  --frame-hi: #f0abfc;
  --frame-lo: #34d399;
  --frame-soft: rgba(167, 139, 250, 0.4);
  --frame-anim: frame-aurora-spin 9s linear infinite;
  --frame-face: conic-gradient(
    from var(--frame-angle, 0deg),
    #f472b6 0deg,
    #a78bfa 60deg,
    #34d399 130deg,
    #38bdf8 200deg,
    #c084fc 280deg,
    #f472b6 360deg
  );
  --frame-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(167, 139, 250, 0.45),
    0 0 0 4px rgba(52, 211, 153, 0.15),
    0 0 20px rgba(167, 139, 250, 0.32),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

@keyframes frame-aurora-spin {
  to {
    --frame-angle: 360deg;
  }
}

/* Fallback when @property isn't available — static spectrum still unique */
@supports not (background: conic-gradient(from var(--frame-angle), red, blue)) {
  .avatar-frame.avatar-frame--style-aurora {
    --frame-face: linear-gradient(
      135deg,
      #f472b6 0%,
      #a78bfa 25%,
      #34d399 50%,
      #38bdf8 75%,
      #c084fc 100%
    );
    --frame-anim: frame-aurora-drift 7s ease-in-out infinite;
    --frame-face-size: 220% 220%;
  }

  @keyframes frame-aurora-drift {
    0%,
    100% {
      --frame-face-pos: 0% 40%;
    }
    50% {
      --frame-face-pos: 100% 60%;
    }
  }
}

/* Royal — court violet with gold pinstripe accents */
.avatar-frame.avatar-frame--style-royal {
  --frame-thickness: 3.5px;
  --frame-rim: #8b6fd1;
  --frame-hi: #d4c4ff;
  --frame-lo: #3b2874;
  --frame-soft: rgba(139, 111, 209, 0.32);
  --frame-anim: none;
  --frame-face: linear-gradient(
    145deg,
    #efe6ff 0%,
    #8b6fd1 22%,
    #d4af37 28%,
    #8b6fd1 34%,
    #4c3a8a 58%,
    #d4af37 64%,
    #2e1f5c 100%
  );
  --frame-shadow:
    inset 0 1px 0 rgba(239, 230, 255, 0.55),
    0 0 0 1px rgba(46, 31, 92, 0.65),
    0 0 0 3px rgba(212, 175, 55, 0.35),
    0 0 18px rgba(139, 111, 209, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

/* ——— Circular surfaces ——— */
.avatar-frame.avatar-frame--sm[class*="avatar-frame--style-"],
.avatar-frame.avatar-frame--sm.avatar-frame--unlimited,
.avatar-frame.avatar-frame--md[class*="avatar-frame--style-"],
.avatar-frame.avatar-frame--md.avatar-frame--unlimited,
.avatar-frame.avatar-frame--hero[class*="avatar-frame--style-"],
.avatar-frame.avatar-frame--hero.avatar-frame--unlimited,
.profile-popup .hero-avatar.avatar-frame[class*="avatar-frame--style-"],
.profile-popup .hero-avatar.avatar-frame--unlimited,
.members-card .avatar-frame[class*="avatar-frame--style-"],
.leaderboard-row .avatar-frame[class*="avatar-frame--style-"],
.public-hero .avatar-frame[class*="avatar-frame--style-"],
.profile-identity .avatar-frame[class*="avatar-frame--style-"],
.profile-hero .avatar-frame[class*="avatar-frame--style-"] {
  border-radius: 50% !important;
}

/* Size only nudges thickness — never flatten style-specific shadows */
.avatar-frame.avatar-frame--sm[class*="avatar-frame--style-"],
.avatar-frame.avatar-frame--sm.avatar-frame--unlimited,
.members-card .avatar-frame[class*="avatar-frame--style-"],
.leaderboard-row .avatar-frame[class*="avatar-frame--style-"] {
  /* keep each style's own thickness unless the style set a larger one */
}

.avatar-frame.avatar-frame--md.avatar-frame--style-default {
  --frame-thickness: 2.5px;
}
.avatar-frame.avatar-frame--md.avatar-frame--style-gold,
.avatar-frame.avatar-frame--md.avatar-frame--unlimited:not(.avatar-frame--style-default) {
  --frame-thickness: 4px;
}
.avatar-frame.avatar-frame--hero.avatar-frame--style-gold,
.avatar-frame.avatar-frame--hero.avatar-frame--unlimited:not(.avatar-frame--style-default) {
  --frame-thickness: 4.5px;
}
.avatar-frame.avatar-frame--md.avatar-frame--style-ivory,
.avatar-frame.avatar-frame--hero.avatar-frame--style-ivory {
  --frame-thickness: 5px;
}
.avatar-frame.avatar-frame--md.avatar-frame--style-crimson {
  --frame-thickness: 2.5px;
}

/* Menu chip previews — keep unique recipes readable at 44px */
.avatar-frame-chip .avatar-frame[class*="avatar-frame--style-"],
.avatar-frame-chip .avatar-frame.avatar-frame--sm {
  --avatar-size: 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
}

.avatar-frame-chip .avatar-frame--style-default {
  --frame-thickness: 2px;
}
.avatar-frame-chip .avatar-frame--style-gold {
  --frame-thickness: 3px;
}
.avatar-frame-chip .avatar-frame--style-ivory {
  --frame-thickness: 3.5px;
}
.avatar-frame-chip .avatar-frame--style-crimson {
  --frame-thickness: 2px;
}
.avatar-frame-chip .avatar-frame--style-aurora,
.avatar-frame-chip .avatar-frame--style-royal,
.avatar-frame-chip .avatar-frame--style-emerald,
.avatar-frame-chip .avatar-frame--style-ocean {
  --frame-thickness: 3px;
}

.avatar-frame-chip .avatar-frame .avatar-glyph,
.avatar-frame-chip .avatar-frame .members-mark,
.avatar-frame-chip .avatar-frame .avatar-photo {
  font-size: 1.05rem !important;
}

/* Locked chips still show full color while hovering (preview path) */
.avatar-frame-chip.is-locked:hover .avatar-frame,
.avatar-frame-chip.is-locked:focus-visible .avatar-frame {
  filter: none;
}

/* ——— Sidebar: compact square bezels (unique faces, no outer rings) ——— */
.sidebar-user-avatar.avatar-frame--sidebar,
.sidebar-user-avatar.avatar-frame--sidebar[class*="avatar-frame--style-"],
.sidebar-user-avatar.avatar-frame--sidebar.avatar-frame--unlimited {
  --avatar-size: 28px;
  --photo-inset: 0px;
  --ring-out: 0px;
  --ring-in: 0px;
  --frame-thickness: 1.5px;
  box-sizing: border-box !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 8px !important;
  border: 0 !important;
  padding: var(--frame-thickness) !important;
  overflow: hidden !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--frame-hi) 40%, transparent),
    0 0 0 1px color-mix(in srgb, var(--frame-rim) 30%, transparent) !important;
}

.sidebar-user-avatar.avatar-frame--sidebar.avatar-frame--style-default {
  --frame-rim: #5a8f6a;
  --frame-hi: #6fa07e;
  --frame-lo: #4a7a58;
  --frame-face: linear-gradient(180deg, #6fa07e, #4f8360);
}
.sidebar-user-avatar.avatar-frame--sidebar.avatar-frame--style-gold,
.sidebar-user-avatar.avatar-frame--sidebar.avatar-frame--unlimited {
  --frame-thickness: 2px;
  --frame-rim: #d4af37;
  --frame-hi: #f5e4a8;
  --frame-lo: #8a6d1a;
  --frame-face: linear-gradient(145deg, #fff1b8, #d4af37 45%, #6e5512);
}
.sidebar-user-avatar.avatar-frame--sidebar.avatar-frame--style-emerald {
  --frame-rim: #1faa6c;
  --frame-hi: #b8ffe0;
  --frame-lo: #0f5c3c;
  --frame-face: linear-gradient(120deg, #0f5c3c, #1faa6c 40%, #b8ffe0 50%, #0a3d28);
}
.sidebar-user-avatar.avatar-frame--sidebar.avatar-frame--style-ocean {
  --frame-rim: #2f9fd6;
  --frame-hi: #9ad8f5;
  --frame-lo: #0d4f78;
  --frame-face: repeating-linear-gradient(-28deg, #0d4f78 0 3px, #2f9fd6 3px 6px, #7ec8ea 6px 7px);
}
.sidebar-user-avatar.avatar-frame--sidebar.avatar-frame--style-crimson {
  --frame-rim: #e03535;
  --frame-hi: #ff6b6b;
  --frame-lo: #7a1212;
  --frame-face: linear-gradient(180deg, #ff5a5a, #5c0c0c);
}
.sidebar-user-avatar.avatar-frame--sidebar.avatar-frame--style-ivory {
  --frame-thickness: 2px;
  --frame-rim: #e8dfd0;
  --frame-hi: #fffaf2;
  --frame-lo: #b5aa98;
  --frame-face: linear-gradient(145deg, #ffffff, #d9d0c0 50%, #a89f90);
}
.sidebar-user-avatar.avatar-frame--sidebar.avatar-frame--style-obsidian {
  --frame-rim: #c5cad3;
  --frame-hi: #e8eaee;
  --frame-lo: #12141a;
  --frame-face: linear-gradient(160deg, #e8eaee 0%, #2a2e38 18%, #0c0e12 60%, #d0d5dd 100%);
}
.sidebar-user-avatar.avatar-frame--sidebar.avatar-frame--style-aurora {
  --frame-rim: #a78bfa;
  --frame-hi: #f0abfc;
  --frame-lo: #34d399;
  --frame-face: conic-gradient(from 40deg, #f472b6, #a78bfa, #34d399, #38bdf8, #c084fc, #f472b6);
  animation: none !important;
}
.sidebar-user-avatar.avatar-frame--sidebar.avatar-frame--style-royal {
  --frame-rim: #8b6fd1;
  --frame-hi: #d4c4ff;
  --frame-lo: #3b2874;
  --frame-face: linear-gradient(145deg, #efe6ff, #8b6fd1 30%, #d4af37 38%, #4c3a8a 70%, #2e1f5c);
}

.sidebar-user-avatar.avatar-frame--sidebar .avatar-photo,
.sidebar-user-avatar.avatar-frame--sidebar .avatar-glyph,
.sidebar-user-avatar.avatar-frame--sidebar .members-mark,
.sidebar-user-avatar.avatar-frame--sidebar .sidebar-user-avatar-img {
  position: absolute !important;
  inset: var(--frame-thickness) !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

.sidebar-user-avatar.avatar-frame--sidebar .avatar-glyph,
.sidebar-user-avatar.avatar-frame--sidebar .members-mark {
  font-size: 0.72rem;
  line-height: 1;
  background-color: #e2c18a;
  background-image:
    radial-gradient(circle at 32% 28%, rgba(255, 248, 230, 0.5), transparent 52%),
    linear-gradient(145deg, #f6e4c2 0%, #e2c18a 46%, #c9a06a 100%);
  color: #5c3a1a;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .avatar-frame[class*="avatar-frame--style-"],
  .avatar-frame--unlimited,
  .avatar-frame--style-aurora {
    animation: none !important;
  }
}