.board-feedback-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
.board-feedback-badge {
  position: absolute;
  display: grid;
  place-items: center;
  width: calc(var(--board-cell) * .4);
  height: calc(var(--board-cell) * .4);
  border-radius: 50%;
  color: #fff;
  font: 800 calc(var(--board-cell) * .28)/1 system-ui, sans-serif;
  box-shadow: 0 1px 3px #0007;
  pointer-events: none;
}
.board-feedback-correct { background: #81B64C; }
.board-feedback-wrong { background: #E36969; }
.board-promotion-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, .35);
  touch-action: none;
}
.chessboard .board-promotion-option {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--board-cell);
  height: var(--board-cell);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 1px 4px #0005;
  cursor: pointer;
  touch-action: none;
}
.chessboard .board-promotion-option img { width: 100%; height: 100%; pointer-events: none; user-select: none; }
.chessboard .board-promotion-option:focus-visible { outline: 3px solid #81B64C; outline-offset: -3px; }
.chessboard .board-promotion-option:hover { background: #fff; }