.chess-piece,
.chess-piece-white,
.chess-piece-black,
.hybrid-chess-piece,
.hybrid-chess-piece.white,
.hybrid-chess-piece.black {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  filter: none;
}

.chess-piece {
  width: 94%;
  height: 94%;
}

.chess-piece::before {
  display: none;
}

.chess-piece-symbol,
.hybrid-chess-symbol {
  position: relative;
  z-index: 3;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: inherit;
  font-size: 0;
  line-height: 1;
  transform: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
  pointer-events: none;
}

.bl-chess-piece-svg {
  --bl-piece-fit: 94%;
  --bl-piece-face: #f2dfb5;
  --bl-piece-depth: #a66f34;
  --bl-piece-outline: #4b2d19;
  --bl-piece-detail: #7c5128;
  --bl-piece-cut: #4b2d19;
  --bl-piece-bevel: #fff9e9;
  display: block;
  width: var(--bl-piece-fit);
  height: var(--bl-piece-fit);
  overflow: visible;
  filter:
    drop-shadow(0 1px 0 rgba(255, 250, 235, 0.5))
    drop-shadow(0 2.5px 1px rgba(55, 31, 15, 0.46))
    drop-shadow(0 5px 4px rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.bl-chess-piece-svg.is-black {
  --bl-piece-face: #25262a;
  --bl-piece-depth: #0a0b0d;
  --bl-piece-outline: #b68a49;
  --bl-piece-detail: #d2aa67;
  --bl-piece-cut: #d2aa67;
  --bl-piece-bevel: #efd79c;
  filter:
    drop-shadow(0 1px 0 rgba(242, 214, 154, 0.2))
    drop-shadow(0 2.5px 1px rgba(0, 0, 0, 0.72))
    drop-shadow(0 5px 4px rgba(0, 0, 0, 0.34));
}

.bl-chess-piece-svg[data-piece="pawn"] {
  --bl-piece-fit: 91%;
}

.bl-chess-piece-svg[data-piece="knight"],
.bl-chess-piece-svg[data-piece="queen"],
.bl-chess-piece-svg[data-piece="king"] {
  --bl-piece-fit: 95%;
}

.bl-chess-piece-svg .bl-piece-depth,
.bl-chess-piece-svg .bl-piece-face,
.bl-chess-piece-svg .bl-piece-glint {
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}

.bl-chess-piece-svg .bl-piece-depth {
  --bl-piece-detail-opacity: 0;
  fill: var(--bl-piece-depth);
  stroke: var(--bl-piece-outline);
  stroke-width: 3.9;
  opacity: 0.82;
  transform: translateY(2px);
}

.bl-chess-piece-svg .bl-piece-face {
  --bl-piece-detail-opacity: 1;
  fill: var(--bl-piece-face);
  stroke: var(--bl-piece-outline);
  stroke-width: 2.7;
}

.bl-chess-piece-svg.is-white .bl-piece-face {
  fill: url(#bl-chess-ivory-face);
}

.bl-chess-piece-svg.is-black .bl-piece-face {
  fill: url(#bl-chess-obsidian-face);
}

.bl-chess-piece-svg .bl-piece-glint {
  --bl-piece-detail-opacity: 0;
  fill: none;
  stroke: var(--bl-piece-bevel);
  stroke-width: 0.95;
  opacity: 0.58;
  transform: translate(-0.65px, -0.7px);
}

.bl-piece-engraving {
  fill: none;
  stroke: var(--bl-piece-detail);
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--bl-piece-detail-opacity, 1);
  vector-effect: non-scaling-stroke;
}

.bl-piece-cut {
  fill: var(--bl-piece-cut);
  stroke: var(--bl-piece-bevel);
  stroke-width: 0.8;
  opacity: var(--bl-piece-detail-opacity, 1);
  vector-effect: non-scaling-stroke;
}

.bl-piece-mitre-cut {
  stroke-width: 1.15;
}

.chess-piece-identity,
.hybrid-chess-identity {
  z-index: 5;
  width: 14%;
  height: 14%;
  inset: auto auto 3% 50%;
  transform: translateX(-50%);
  opacity: 0.82;
  border: 1px solid rgba(238, 197, 111, 0.8);
  border-radius: 50%;
  background-color: rgba(21, 14, 10, 0.78);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.58), inset 0 1px rgba(255, 255, 255, 0.12);
  filter: none;
  pointer-events: none;
}

.chess-piece-identity.is-none,
.hybrid-chess-identity.is-none {
  opacity: 0;
}

.hybrid-chess-piece {
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0;
  line-height: 1;
  transform: none;
}

.hybrid-chess-piece .bl-chess-piece-svg {
  width: var(--bl-piece-fit);
  height: var(--bl-piece-fit);
}

.hybrid-square.has-dual-layer .hybrid-chess-piece {
  inset: 0 20% 19% 0;
}

.hybrid-square.has-dual-layer .hybrid-chess-identity {
  width: 18%;
  height: 18%;
  bottom: 7%;
}

.chess-square.is-selected .bl-chess-piece-svg,
.hybrid-square.is-selected .bl-chess-piece-svg {
  filter:
    drop-shadow(0 0 3px rgba(255, 244, 190, 0.95))
    drop-shadow(0 0 10px rgba(232, 177, 63, 0.78))
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.34));
}

.chess-square.is-check .bl-chess-piece-svg,
.hybrid-square.is-check .bl-chess-piece-svg {
  filter:
    drop-shadow(0 0 3px rgba(255, 225, 191, 0.95))
    drop-shadow(0 0 11px rgba(225, 58, 50, 0.9))
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.4));
}

.emblem-chess-piece-symbol {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.emblem-chess-preview .bl-chess-piece-svg {
  width: 80%;
  height: 80%;
}

.hybrid-bearoff-crown .bl-chess-piece-svg {
  width: min(28px, 88%);
  height: min(34px, 92%);
}

.chess-hero-piece .bl-chess-piece-svg {
  width: 82%;
  height: 82%;
}

@media (max-width: 820px) {
  .chess-piece {
    width: 94%;
    height: 94%;
  }

  .chess-piece-identity,
  .hybrid-chess-identity {
    width: 12%;
    height: 12%;
  }
}

@media (max-width: 430px) {
  .bl-chess-piece-svg {
    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2))
      drop-shadow(0 3px 2px rgba(0, 0, 0, 0.44));
  }

  .bl-chess-piece-svg .bl-piece-face {
    stroke-width: 2.9;
  }

  .chess-piece-identity,
  .hybrid-chess-identity {
    width: 11%;
    height: 11%;
    bottom: 2%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bl-chess-piece-svg {
    transition: none !important;
  }
}