/* Cartoon chess-piece avatars.
   Wood disc = element background. Piece art = ::after so frame CSS cannot
   clobber it (`.avatar-frame[class*="…"] .avatar-glyph` was winning). */

.avatar-glyph[class*="avatar-glyph--"],
.members-mark[class*="avatar-glyph--"] {
  position: relative;
  color: transparent !important;
  text-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Warm maple disc */
.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,
.avatar-frame .avatar-glyph,
.avatar-frame .members-mark.avatar-glyph,
.profile-avatar-fallback .profile-avatar-mark,
.avatar-chip .avatar {
  background-color: #e2c18a !important;
  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%) !important;
  color: #5c3a1a;
  text-shadow: none;
}

.avatar-chip .avatar {
  border-color: color-mix(in srgb, #8b5a2b 28%, var(--line)) !important;
}

/* Piece art layer — always on top of the wood disc */
.avatar-glyph[class*="avatar-glyph--"]::after,
.members-mark[class*="avatar-glyph--"]::after,
.avatar-chip .avatar[class*="avatar--"] .members-mark::after,
.avatar-chip .avatar[class*="avatar--"] .avatar-glyph::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 12% !important;
  z-index: 2 !important;
  background-color: transparent !important;
  background-image: var(--piece-art) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  pointer-events: none !important;
  animation: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  filter: none !important;
}

.avatar-glyph--king,
.members-mark.avatar-glyph--king,
.avatar-chip .avatar--king .members-mark,
.avatar-chip .avatar--king .avatar-glyph {
  --piece-art: url("images/avatars/pieces/king.svg");
}
.avatar-glyph--queen,
.members-mark.avatar-glyph--queen,
.avatar-chip .avatar--queen .members-mark,
.avatar-chip .avatar--queen .avatar-glyph {
  --piece-art: url("images/avatars/pieces/queen.svg");
}
.avatar-glyph--rook,
.members-mark.avatar-glyph--rook,
.avatar-chip .avatar--rook .members-mark,
.avatar-chip .avatar--rook .avatar-glyph {
  --piece-art: url("images/avatars/pieces/rook.svg");
}
.avatar-glyph--bishop,
.members-mark.avatar-glyph--bishop,
.avatar-chip .avatar--bishop .members-mark,
.avatar-chip .avatar--bishop .avatar-glyph {
  --piece-art: url("images/avatars/pieces/bishop.svg");
}
.avatar-glyph--knight,
.members-mark.avatar-glyph--knight,
.avatar-chip .avatar--knight .members-mark,
.avatar-chip .avatar--knight .avatar-glyph {
  --piece-art: url("images/avatars/pieces/knight.svg");
}
.avatar-glyph--pawn,
.members-mark.avatar-glyph--pawn,
.avatar-chip .avatar--pawn .members-mark,
.avatar-chip .avatar--pawn .avatar-glyph {
  --piece-art: url("images/avatars/pieces/pawn.svg");
}

.avatar-chip .avatar .members-mark,
.avatar-chip .avatar .avatar-glyph {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  font-size: 0 !important;
}

/* Picker tile wood lives on .avatar; mark only carries the SVG */
.avatar-chip .avatar[class*="avatar--"] .members-mark::after,
.avatar-chip .avatar[class*="avatar--"] .avatar-glyph::after {
  inset: 8% !important;
}

/* Sidebar: kill legacy ::before/::after bans for piece marks only via higher specificity */
.sidebar-user-avatar .avatar-glyph[class*="avatar-glyph--"]::after,
.sidebar-user-avatar.avatar-frame--sidebar .avatar-glyph[class*="avatar-glyph--"]::after,
html[data-design="sigma"] .sidebar-user-avatar .avatar-glyph[class*="avatar-glyph--"]::after,
html[data-design="sigma"] .sidebar-user-avatar.avatar-frame--sidebar .avatar-glyph[class*="avatar-glyph--"]::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 8% !important;
  z-index: 2 !important;
  background-image: var(--piece-art) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-color: transparent !important;
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
  border: 0 !important;
}

html[data-design="sigma"] .sidebar-user-avatar .avatar-glyph[class*="avatar-glyph--"],
html[data-design="sigma"] .sidebar-user-avatar.avatar-frame--sidebar .avatar-glyph[class*="avatar-glyph--"] {
  font-size: 0 !important;
  color: transparent !important;
}

/* Frame CSS used to wipe ::after globally — re-assert piece ::after after that file. */
.avatar-frame[class*="avatar-frame--style-"] .avatar-glyph[class*="avatar-glyph--"]::after,
.avatar-frame[class*="avatar-frame--style-"] .members-mark[class*="avatar-glyph--"]::after,
.avatar-frame--unlimited .avatar-glyph[class*="avatar-glyph--"]::after,
.avatar-frame--unlimited .members-mark[class*="avatar-glyph--"]::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 12% !important;
  z-index: 2 !important;
  background-image: var(--piece-art) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-color: transparent !important;
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
  border: 0 !important;
}