.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.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-size: 7px;
    cursor: default; }
    .cm-chessboard.default .coordinates .coordinate.black {
      fill: #eeddbf; }
    .cm-chessboard.default .coordinates .coordinate.white {
      fill: #b5936d; }

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

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

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

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

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

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

.cm-chessboard.default-contrast .coordinates {
  pointer-events: none;
  user-select: none; }
  .cm-chessboard.default-contrast .coordinates .coordinate {
    fill: #b5936d;
    font-size: 7px;
    cursor: default; }
    .cm-chessboard.default-contrast .coordinates .coordinate.black {
      fill: #333; }
    .cm-chessboard.default-contrast .coordinates .coordinate.white {
      fill: #333; }

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

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

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

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

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

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

.cm-chessboard.green .coordinates {
  pointer-events: none;
  user-select: none; }
  .cm-chessboard.green .coordinates .coordinate {
    fill: #468862;
    font-size: 7px;
    cursor: default; }
    .cm-chessboard.green .coordinates .coordinate.black {
      fill: #e2e0d0; }
    .cm-chessboard.green .coordinates .coordinate.white {
      fill: #468862; }

.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-size: 7px;
    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-size: 7px;
    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-size: 7px;
    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-size: 7px;
    cursor: default; }
    .cm-chessboard.black-and-white .coordinates .coordinate.black {
      fill: white; }
    .cm-chessboard.black-and-white .coordinates .coordinate.white {
      fill: #909090; }






      /* === FORCE CHESS.COM COLORS === */
.cm-chessboard .board .square.white {
  fill: #F0F1D7 !important;
}

.cm-chessboard .board .square.black {
  fill: #65a30f !important;
}

/* Borders */
.cm-chessboard .board .border,
.cm-chessboard .board .border-inner {
  stroke: #65a30f !important;
  fill: #65a30f !important;
}

/* Frame */
.cm-chessboard.border-type-frame .board .border {
  fill: #F0F1D7 !important;
}

/* Coordinates */
.cm-chessboard .coordinates .coordinate.white {
  fill: #65a30f !important;
}

.cm-chessboard .coordinates .coordinate.black {
  fill: #F0F1D7 !important;
}

/* ========================= */
/* Glassmorphism Buttons */
/* ========================= */

#flipBoardButton,
#autoPlayButton {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 10px 18px;
  color: #1f2d16;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin: 8px;
  transition: all 0.25s ease;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Hover glow */
#flipBoardButton:hover,
#autoPlayButton:hover {
  background: rgba(240, 241, 215, 0.35);
  box-shadow:
    0 0 15px rgba(122, 148, 86, 0.5),
    0 8px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px) scale(1.03);
}

/* Click */
#flipBoardButton:active,
#autoPlayButton:active {
  transform: scale(0.96);
  box-shadow: 0 0 8px rgba(122, 148, 86, 0.4);
}

/* Active autoplay */
#autoPlayButton.active {
  background: rgba(122, 148, 86, 0.35);
  box-shadow: 0 0 20px rgba(122, 148, 86, 0.7);
  color: #ffffff;
}

/* Button container spacing */
#flipBoardButton,
#autoPlayButton {
  margin-top: 12px;
}
body {
  background-image: radial-gradient(circle at top center, rgb(14,186,63),rgb(9, 119, 83));
  min-height: 100vh;
  margin: 0;
  font-family: "Segoe UI", sans-serif;
}