/* Crosslink V298 — Elegant Black Gloss preferred piece selector.
   Applies to the four real piece thumbnails only, never board pieces.
   Use the existing selected class and preserve image/canvas rendering. */
body:not(.board-view) #view-settings #clThemesPanel #clThemePiecesPreview .cl-theme-piece-button {
  position: relative!important;
  isolation: isolate;
  transition: transform 170ms ease, filter 170ms ease!important;
}
body:not(.board-view) #view-settings #clThemesPanel #clThemePiecesPreview .cl-theme-piece-button.selected {
  transform: scale(1.055)!important;
  background: transparent!important;
  border: 0!important;
  box-shadow: none!important;
}
/* Polished charcoal-metal perimeter; does not paint over the selected piece. */
body:not(.board-view) #view-settings #clThemesPanel #clThemePiecesPreview .cl-theme-piece-button.selected::after,
body:not(.board-view) #view-settings #clThemesPanel #clThemePiecesPreview .cl-theme-piece-button:focus-visible::after {
  content: ""!important;
  position: absolute!important;
  inset: -4px!important;
  border-radius: 50%!important;
  border: 3px solid transparent!important;
  background: linear-gradient(150deg, #8d939b 0%, #30343a 16%, #08090c 48%, #1f232a 74%, #adb2ba 100%) border-box!important;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: none!important;
  pointer-events: none!important;
  box-sizing: border-box!important;
}
/* Soft charcoal halo and gloss, beneath the selected ring. */
body:not(.board-view) #view-settings #clThemesPanel #clThemePiecesPreview .cl-theme-piece-button.selected::before {
  content: ""!important;
  position: absolute!important;
  inset: -5px!important;
  border-radius: 50%!important;
  background: radial-gradient(ellipse at 32% 9%,rgba(255,255,255,.25),transparent 46%),
              radial-gradient(circle,rgba(16,18,22,0) 64%,rgba(11,12,16,.22) 94%);
  box-shadow: 0 3px 10px rgba(5,8,12,.24), 0 0 0 1px rgba(28,33,40,.24)!important;
  pointer-events: none!important;
}
body:not(.board-view) #view-settings #clThemesPanel #clThemePiecesPreview .cl-theme-piece-button:focus-visible {
  outline: none!important;
}
@media (prefers-reduced-motion: reduce) {
  body:not(.board-view) #view-settings #clThemesPanel #clThemePiecesPreview .cl-theme-piece-button {
    transition: none!important;
  }
}