.cm-chessboard .board {
  clip-path: inset(0 round calc(var(--ratio) * 0.3));
}
.cm-chessboard .board.input-enabled .square {
  cursor: pointer;
}

.cm-chessboard .coordinates,
.cm-chessboard .markers-layer,
.cm-chessboard .pieces-layer,
.cm-chessboard .markers-top-layer {
  pointer-events: none;
}

.cm-chessboard-content .list-inline {
  padding-left: 0;
  list-style: none;
}

.cm-chessboard-content .list-inline-item {
  display: inline-block;
}

.cm-chessboard-content .list-inline-item:not(:last-child) {
  margin-right: 1rem;
}

.cm-chessboard-content .list-inline {
  padding-left: 0;
  list-style: none;
}

.cm-chessboard-content .list-inline-item {
  display: inline-block;
}

.cm-chessboard-content .list-inline-item:not(:last-child) {
  margin-right: 1rem;
}

.cm-chessboard-accessibility.visually-hidden {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cm-chessboard-accessibility button:disabled,
.cm-chessboard-accessibility button:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.cm-chessboard.default .board .square.white {
  fill: #ecdab9;
}

.cm-chessboard.default .board .square.black {
  fill: #c5a076;
}

.cm-chessboard.default.border-type-thin .board .border {
  stroke: #c5a076;
  stroke-width: 0.7%;
  fill: #c5a076;
}

.cm-chessboard.default.border-type-none .board .border {
  stroke: #c5a076;
  stroke-width: 0;
  fill: #c5a076;
}

.cm-chessboard.default.border-type-frame .board .border {
  fill: #ecdab9;
  stroke: none;
}

.cm-chessboard.default.border-type-frame .board .border-inner {
  fill: #c5a076;
  stroke: #c5a076;
  stroke-width: 0.7%;
}

.cm-chessboard.default .coordinates {
  pointer-events: none;
  user-select: none;
}

.cm-chessboard.default .coordinates .coordinate {
  fill: #b5936d;
  font-family: sans-serif;
  font-weight: bold;
  cursor: default;
}

.cm-chessboard.default .coordinates .coordinate.black {
  fill: #eeddbf;
}

.cm-chessboard.default .coordinates .coordinate.white {
  fill: #b5936d;
}

.cm-chessboard.green .board .square.white {
  fill: #EBECD0;
}

.cm-chessboard.green .board .square.black {
  fill: #739552;
}

.cm-chessboard.green.border-type-thin .board .border {
  stroke: #739552;
  stroke-width: 0.7%;
  fill: #739552;
}

.cm-chessboard.green.border-type-none .board .border {
  stroke: #739552;
  stroke-width: 0;
  fill: #739552;
}

.cm-chessboard.green.border-type-frame .board .border {
  fill: #EBECD0;
  stroke: none;
}

.cm-chessboard.green.border-type-frame .board .border-inner {
  fill: #739552;
  stroke: #739552;
  stroke-width: 0.7%;
}

.cm-chessboard.green .coordinates {
  pointer-events: none;
  user-select: none;
}

.cm-chessboard.green .coordinates .coordinate {
  fill: #739552;
  font-family: sans-serif;
  font-weight: bold;
  cursor: default;
}

.cm-chessboard.green .coordinates .coordinate.black {
  fill: #EBECD0;
}

.cm-chessboard.green .coordinates .coordinate.white {
  fill: #739552;
}

.cm-chessboard.blue .board .square.white {
  fill: #d8ecfb;
}

.cm-chessboard.blue .board .square.black {
  fill: #86afcf;
}

.cm-chessboard.blue.border-type-thin .board .border {
  stroke: #86afcf;
  stroke-width: 0.7%;
  fill: #86afcf;
}

.cm-chessboard.blue.border-type-none .board .border {
  stroke: #86afcf;
  stroke-width: 0;
  fill: #86afcf;
}

.cm-chessboard.blue.border-type-frame .board .border {
  fill: #d8ecfb;
  stroke: none;
}

.cm-chessboard.blue.border-type-frame .board .border-inner {
  fill: #86afcf;
  stroke: #86afcf;
  stroke-width: 0.7%;
}

.cm-chessboard.blue .coordinates {
  pointer-events: none;
  user-select: none;
}

.cm-chessboard.blue .coordinates .coordinate {
  fill: #7ba1be;
  font-family: sans-serif;
  font-weight: bold;
  cursor: default;
}

.cm-chessboard.blue .coordinates .coordinate.black {
  fill: #dbeefb;
}

.cm-chessboard.blue .coordinates .coordinate.white {
  fill: #7ba1be;
}

.cm-chessboard.chess-club .board .square.white {
  fill: #E6D3B1;
}

.cm-chessboard.chess-club .board .square.black {
  fill: #AF6B3F;
}

.cm-chessboard.chess-club.border-type-thin .board .border {
  stroke: #692e2b;
  stroke-width: 0.7%;
  fill: #AF6B3F;
}

.cm-chessboard.chess-club.border-type-none .board .border {
  stroke: #692e2b;
  stroke-width: 0;
  fill: #AF6B3F;
}

.cm-chessboard.chess-club.border-type-frame .board .border {
  fill: #692e2b;
  stroke: none;
}

.cm-chessboard.chess-club.border-type-frame .board .border-inner {
  fill: #AF6B3F;
  stroke: #692e2b;
  stroke-width: 0.7%;
}

.cm-chessboard.chess-club .coordinates {
  pointer-events: none;
  user-select: none;
}

.cm-chessboard.chess-club .coordinates .coordinate {
  fill: #E6D3B1;
  font-family: sans-serif;
  font-weight: bold;
  cursor: default;
}

.cm-chessboard.chess-club .coordinates .coordinate.black {
  fill: #E6D3B1;
}

.cm-chessboard.chess-club .coordinates .coordinate.white {
  fill: #AF6B3F;
}

.cm-chessboard.chessboard-js .board .square.white {
  fill: #f0d9b5;
}

.cm-chessboard.chessboard-js .board .square.black {
  fill: #b58863;
}

.cm-chessboard.chessboard-js.border-type-thin .board .border {
  stroke: #404040;
  stroke-width: 0.7%;
  fill: #b58863;
}

.cm-chessboard.chessboard-js.border-type-none .board .border {
  stroke: #404040;
  stroke-width: 0;
  fill: #b58863;
}

.cm-chessboard.chessboard-js.border-type-frame .board .border {
  fill: #f0d9b5;
  stroke: none;
}

.cm-chessboard.chessboard-js.border-type-frame .board .border-inner {
  fill: #b58863;
  stroke: #404040;
  stroke-width: 0.7%;
}

.cm-chessboard.chessboard-js .coordinates {
  pointer-events: none;
  user-select: none;
}

.cm-chessboard.chessboard-js .coordinates .coordinate {
  fill: #404040;
  font-family: sans-serif;
  font-weight: bold;
  cursor: default;
}

.cm-chessboard.chessboard-js .coordinates .coordinate.black {
  fill: #f0d9b5;
}

.cm-chessboard.chessboard-js .coordinates .coordinate.white {
  fill: #b58863;
}

.cm-chessboard.black-and-white .board .square.white {
  fill: #ffffff;
}

.cm-chessboard.black-and-white .board .square.black {
  fill: #9c9c9c;
}

.cm-chessboard.black-and-white.border-type-thin .board .border {
  stroke: #9c9c9c;
  stroke-width: 0.7%;
  fill: #9c9c9c;
}

.cm-chessboard.black-and-white.border-type-none .board .border {
  stroke: #9c9c9c;
  stroke-width: 0;
  fill: #9c9c9c;
}

.cm-chessboard.black-and-white.border-type-frame .board .border {
  fill: #ffffff;
  stroke: none;
}

.cm-chessboard.black-and-white.border-type-frame .board .border-inner {
  fill: #9c9c9c;
  stroke: #9c9c9c;
  stroke-width: 0.7%;
}

.cm-chessboard.black-and-white .coordinates {
  pointer-events: none;
  user-select: none;
}

.cm-chessboard.black-and-white .coordinates .coordinate {
  fill: #909090;
  font-family: sans-serif;
  font-weight: bold;
  cursor: default;
}

.cm-chessboard.black-and-white .coordinates .coordinate.black {
  fill: white;
}

.cm-chessboard.black-and-white .coordinates .coordinate.white {
  fill: #909090;
}

.cm-chessboard.chessbase .board .square.white {
  fill: #EEEEEE;
}

.cm-chessboard.chessbase .board .square.black {
  fill: #7C91BE;
}

.cm-chessboard.chessbase.border-type-thin .board .border {
  stroke: #7C91BE;
  stroke-width: 0.7%;
  fill: #7C91BE;
}

.cm-chessboard.chessbase.border-type-none .board .border {
  stroke: #7C91BE;
  stroke-width: 0;
  fill: #7C91BE;
}

.cm-chessboard.chessbase.border-type-frame .board .border {
  fill: #3D485E;
  stroke: none;
}

.cm-chessboard.chessbase.border-type-frame .board .border-inner {
  fill: #3D485E;
  stroke: #3D485E;
  stroke-width: 0.7%;
}

.cm-chessboard.chessbase .coordinates {
  pointer-events: none;
  user-select: none;
}

.cm-chessboard.chessbase .coordinates .coordinate {
  fill: #cccccc;
  font-family: sans-serif;
  font-weight: bold;
  cursor: default;
}

.cm-chessboard.chessbase .coordinates .coordinate.black {
  fill: white;
}

.cm-chessboard.chessbase .coordinates .coordinate.white {
  fill: #909090;
}

.cm-chessboard.book {
  background-image: url("/cm-chessboard-assets/boards/book.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: calc(var(--ratio) * 0.3);
}

.cm-chessboard.book.border-type-thin {
  background-size: 99.375% 99.375%;
}

.cm-chessboard.book.border-type-frame {
  background-size: 92% 92%;
}

.cm-chessboard.book .board .square.white {
  fill: transparent;
  stroke: none;
}

.cm-chessboard.book .board .square.black {
  fill: transparent;
  stroke: none;
}

.cm-chessboard.book.border-type-thin .board .border {
  stroke: none;
  stroke-width: 0;
  fill: transparent;
}

.cm-chessboard.book.border-type-none .board .border {
  stroke: none;
  stroke-width: 0;
  fill: transparent;
}

.cm-chessboard.book.border-type-frame .board .border {
  fill: transparent;
  stroke: none;
}

.cm-chessboard.book.border-type-frame .board .border-inner {
  fill: transparent;
  stroke: none;
}

.cm-chessboard.book .coordinates {
  pointer-events: none;
  user-select: none;
}

.cm-chessboard.book .coordinates .coordinate {
  fill: #646464;
  font-family: sans-serif;
  font-weight: bold;
  cursor: default;
}

.cm-chessboard.book .coordinates .coordinate.black {
  fill: #646464;
}

.cm-chessboard.book .coordinates .coordinate.white {
  fill: #646464;
}

/* Keyboard focus indicator for accessibility */
.cm-chessboard .keyboard-focus-indicator .keyboard-focus {
  fill: none;
  stroke: #0066cc;
  stroke-width: 3px;
  pointer-events: none;
}

.cm-chessboard .keyboard-focus-indicator .keyboard-from-square {
  fill: rgba(0, 102, 204, 0.3);
  stroke: #0066cc;
  stroke-width: 2px;
  pointer-events: none;
}

/* High contrast focus indicator */
.cm-chessboard:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Custom styles for cm-chessboard */

#board > div {
  width: 100% !important; /* important for responsive */
}

.board-icon {
  pointer-events: none;
}

.cm-chessboard .markers .marker.marker-square-training-hint {
  fill: #003088;
  opacity: 0.35;
}

.cm-chessboard .arrow-training-hint .arrow-head {
  fill: #003088;
  fill-rule: nonzero;
}

.cm-chessboard .arrow-training-hint .arrow-line {
  stroke: #003088;
  stroke-linecap: round;
  opacity: 0.55;
}

.cm-chessboard.border-type-none.green g.pieces-layer g.pieces g[data-piece="wk"] use.piece {
  filter: var(--cm-wk-check-filter, none);
  transition: filter 300ms;
}

.cm-chessboard.border-type-none.green g.pieces-layer g.pieces g[data-piece="bk"] use.piece {
  filter: var(--cm-bk-check-filter, none);
  transition: filter 300ms;
}