/* TESTING */

/* GAME WRAPPER */

#game-wrapper {
  --player-info-height: 3.2rem;
  /* background-color: var(--light-dark); */
  flex: 0;
  margin: 0 auto;
  width: fit-content;
}

@media (min-width: 614px) {
  #game-wrapper {
    --player-info-height: 4rem;
    margin: 0;
  }
}

/* ORDERS */

.player-info.w {
  order: 0;
}

.board {
  order: 1;
}

.player-info.b {
  order: 2;
}

.rotation-black .player-info.b,
.rotation-board.black-to-move .player-info.b {
  order: 0;
}

.rotation-black .board,
.rotation-board.black-to-move .board {
  order: 1;
}

.rotation-black .player-info.w,
.rotation-board.black-to-move .player-info.w {
  order: 2;
}

/* CAPTURED PIECES */

.player-info {
  /* border: 2px solid black; */
  display: flex;
  flex-direction: row;
  align-items: center;
  height: var(--player-info-height);
  /* padding: .2rem; */
}

.player-info .captured-piece {
  background-size: contain;
  height: 80%;
  margin-left: -1.9rem;
}

.player-info .captured-piece.first {
  /* margin-left: -0.2rem; */
  margin-left: 0;
}

.player-info .captured-piece.y {
  margin-top: -0.2rem;
}

.player-info.b .captured-piece {
  /* Contour blanc */
  -webkit-filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white);
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white);
}

.player-info.w .captured-piece {
  /* Contour noir */
  -webkit-filter: drop-shadow(0 0 1px black) drop-shadow(0 0 1px black);
  filter: drop-shadow(0 0 1px black) drop-shadow(0 0 1px black);
}

.player-info p {
  color: var(--lighter-dark);
  font-family: var(--fontfamily-simple);
  font-size: 1.7em;
}

/* BOARD */

#board-single {
  --coords-margin: 0.3;
  --square-size-byheight: calc(
    (100vh - 4 * var(--body-margin) - var(--player-info-height) * 2) / (10 + var(--coords-margin))
  );
  --square-size-bywidth: calc((100vw - 2 * var(--body-margin)) / (8 + var(--coords-margin)));
  --square-size: min(80px, var(--square-size-byheight), var(--square-size-bywidth));
  background-image: url("../images/iratusboard-small.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  contain: layout;
  height: calc(var(--square-size) * 10);
  margin: var(--body-margin) 0;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: calc(var(--square-size) * 8);
}

#board-single:focus-within {
  outline: none;
}

@media only screen and (min-width: 614px) {
  #board-single {
    --square-size-bywidth: calc(
      (100vw - var(--menu-bar-width) - 2 * var(--body-margin)) / (8 + var(--coords-margin))
    );
    background-image: url("../images/iratusboard.png");
  }
}

#board-single .piece {
  background-repeat: no-repeat;
  background-size: 100%;
  cursor: pointer;
  cursor: grab;
  cursor: -webkit-grab;
  height: 10%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  touch-action: none;
  width: 12.5%;
  will-change: transform;
  z-index: 2;
}

#board-single.animated .piece {
  transition: transform 0.1s ease;
}

#board-single .piece.dragging {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transition: none;
  z-index: 3;
}

#board-single .square {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 10%;
  /* pointer-events: none; */
}

#board-single .square.selected {
  background-color: var(--selected);
  opacity: 0.5;
}

#board-single .square.accessible {
  background: radial-gradient(var(--accessible) 25%, rgba(0, 0, 0, 0) 0%);
  /* pointer-events: auto; */
}

#board-single .square.captureable {
  background: radial-gradient(
    transparent 59%,
    var(--accessible) 59%,
    var(--accessible) 69%,
    transparent 0%
  );
}

#board-single .phantom {
  opacity: 0.5;
}

/* COORDINATES */

#board-single {
  margin-left: calc(var(--square-size) * var(--coords-margin));
  margin-bottom: calc(var(--square-size) * var(--coords-margin) + var(--body-margin));
}

.coordinates {
  position: absolute;
  transform: translate(-4.5%, 3.2%);
}

.coordinates.hidden {
  display: none;
}

.coordinates text {
  fill: var(--light);
  font-weight: 600;
}

/* BOARD OVERLAY  TODO : more usages */

.board-overlay {
  background-color: var(--overlay-color);
  height: 100%;
  max-height: 0;
  opacity: 0;
  position: relative;
  width: 100%;
  z-index: 3;
}

.board-overlay.show {
  max-height: unset;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* PROMOTION */

.promotion-wrapper {
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 3;
}

.promotion-window {
  background-color: var(--light-green);
  border-radius: 3px;
  bottom: 0;
  box-shadow: 3px 3px 10px rgb(0 0 0 / 45%);
  display: flex;
  flex-direction: column-reverse;
  height: 65%;
  left: 0;
  position: absolute;
  top: auto;
  width: 12.5%;
  z-index: 3;
  cursor: pointer;
}

.promotion-window .promotion-cancel {
  height: calc(var(--square-size) / 2);
  display: flex;
  justify-content: center;
}

.promotion-window .promotion-cancel p {
  color: var(--darker);
  height: 100%;
  font-size: min(2.5rem, var(--square-size) / 2.3);
  margin: 0;
}

.promotion-window .promotion-piece {
  height: var(--square-size);
  background-size: contain;
}

.rotation-pieces.black-to-move .promotion-piece {
  transform: rotate(180deg);
}

.promotion-window.top {
  top: 0;
  bottom: auto;
}

.promotion-window.top .q {
  order: 6;
}

.promotion-window.top .n {
  order: 5;
}

.promotion-window.top .r {
  order: 4;
}

.promotion-window.top .b {
  order: 3;
}

.promotion-window.top .c {
  order: 2;
}

.promotion-window.top .e {
  order: 1;
}

.promotion-window.top .promotion-cancel {
  order: 0;
}

/* GAME OVER */

#game-over {
  align-items: center;
  background-color: var(--light-green);
  border-radius: 0.6rem;
  box-shadow: 0 0.3rem 0.63rem 0.07rem rgb(0 0 0 / 40%);
  display: flex;
  flex-direction: column;
  font-size: calc(var(--square-size) / 4);
  height: calc(var(--square-size) * 8 * 0.8);
  left: 50%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 18%;
  transform: translateX(-50%);
  width: calc(var(--square-size) * 8 * 0.8);
  z-index: 4;
}

#game-over.show {
  max-height: unset;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.light-mode #game-over {
  background-color: var(--light-dark);
}

#game-over h2 {
  font-size: 2.7em;
  flex: 1 1 auto;
  margin: 0.4em 1.5em;
  text-align: center;
}

#game-over p {
  font-size: 2em;
  flex: 5 1 auto;
  margin: 0;
  margin-bottom: 0.4em;
}

#game-over div {
  background-repeat: no-repeat;
  background-size: contain;
  flex: 5 1 auto;
  height: 8em;
  margin-top: -1.2em;
  width: 8em;
}

#game-over button {
  border: 2px solid black;
  border-radius: 3px;
  font-size: calc(var(--square-size) * 0.5);
  margin-bottom: 0.5em;
  padding: 0.1em 0.5em;
  user-select: none;
}

#game-over .game-over-close {
  /* 'X' close icon - mobile version only */
  position: absolute;
  margin: 5px;
  padding: 0;
  right: 0;
  top: 0;
  height: 1.5em;
  width: 1.5em;
  /* image replacement */
  overflow: hidden;
  color: transparent;
  white-space: nowrap;
}

#game-over .game-over-close::after,
#game-over .game-over-close::before {
  /* this is the 'X' icon */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  height: 20px;
  width: 2px;
  background-color: var(--light-green);
}

#game-over .game-over-close::after {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

#game-over .game-over-close::before {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(316deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

#game-over .game-over-close:hover::after,
#game-over .game-over-close:hover::before {
  background-color: var(--darker);
}

/* Game Error */

.error-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: calc(var(--square-size) / 4);
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

.error-message {
  font-size: 3em;
  text-align: center;
}

.error-button {
  border: 2px solid black;
  border-radius: 3px;
  font-size: 3em;
  margin-bottom: 0.5em;
  padding: 0.1em 0.5em;
  user-select: none;
}

/* SQUARE-XX */

.square-0 {
  transform: translate(000%, 000%);
}

.rotation-black .square-0,
.rotation-board.black-to-move .square-0 {
  transform: translate(700%, 900%);
}

.square-10 {
  transform: translate(100%, 000%);
}

.rotation-black .square-10,
.rotation-board.black-to-move .square-10 {
  transform: translate(600%, 900%);
}

.square-20 {
  transform: translate(200%, 000%);
}

.rotation-black .square-20,
.rotation-board.black-to-move .square-20 {
  transform: translate(500%, 900%);
}

.square-30 {
  transform: translate(300%, 000%);
}

.rotation-black .square-30,
.rotation-board.black-to-move .square-30 {
  transform: translate(400%, 900%);
}

.square-40 {
  transform: translate(400%, 000%);
}

.rotation-black .square-40,
.rotation-board.black-to-move .square-40 {
  transform: translate(300%, 900%);
}

.square-50 {
  transform: translate(500%, 000%);
}

.rotation-black .square-50,
.rotation-board.black-to-move .square-50 {
  transform: translate(200%, 900%);
}

.square-60 {
  transform: translate(600%, 000%);
}

.rotation-black .square-60,
.rotation-board.black-to-move .square-60 {
  transform: translate(100%, 900%);
}

.square-70 {
  transform: translate(700%, 000%);
}

.rotation-black .square-70,
.rotation-board.black-to-move .square-70 {
  transform: translate(000%, 900%);
}

.square-1 {
  transform: translate(000%, 100%);
}

.rotation-black .square-1,
.rotation-board.black-to-move .square-1 {
  transform: translate(700%, 800%);
}

.square-11 {
  transform: translate(100%, 100%);
}

.rotation-black .square-11,
.rotation-board.black-to-move .square-11 {
  transform: translate(600%, 800%);
}

.square-21 {
  transform: translate(200%, 100%);
}

.rotation-black .square-21,
.rotation-board.black-to-move .square-21 {
  transform: translate(500%, 800%);
}

.square-31 {
  transform: translate(300%, 100%);
}

.rotation-black .square-31,
.rotation-board.black-to-move .square-31 {
  transform: translate(400%, 800%);
}

.square-41 {
  transform: translate(400%, 100%);
}

.rotation-black .square-41,
.rotation-board.black-to-move .square-41 {
  transform: translate(300%, 800%);
}

.square-51 {
  transform: translate(500%, 100%);
}

.rotation-black .square-51,
.rotation-board.black-to-move .square-51 {
  transform: translate(200%, 800%);
}

.square-61 {
  transform: translate(600%, 100%);
}

.rotation-black .square-61,
.rotation-board.black-to-move .square-61 {
  transform: translate(100%, 800%);
}

.square-71 {
  transform: translate(700%, 100%);
}

.rotation-black .square-71,
.rotation-board.black-to-move .square-71 {
  transform: translate(000%, 800%);
}

.square-2 {
  transform: translate(000%, 200%);
}

.rotation-black .square-2,
.rotation-board.black-to-move .square-2 {
  transform: translate(700%, 700%);
}

.square-12 {
  transform: translate(100%, 200%);
}

.rotation-black .square-12,
.rotation-board.black-to-move .square-12 {
  transform: translate(600%, 700%);
}

.square-22 {
  transform: translate(200%, 200%);
}

.rotation-black .square-22,
.rotation-board.black-to-move .square-22 {
  transform: translate(500%, 700%);
}

.square-32 {
  transform: translate(300%, 200%);
}

.rotation-black .square-32,
.rotation-board.black-to-move .square-32 {
  transform: translate(400%, 700%);
}

.square-42 {
  transform: translate(400%, 200%);
}

.rotation-black .square-42,
.rotation-board.black-to-move .square-42 {
  transform: translate(300%, 700%);
}

.square-52 {
  transform: translate(500%, 200%);
}

.rotation-black .square-52,
.rotation-board.black-to-move .square-52 {
  transform: translate(200%, 700%);
}

.square-62 {
  transform: translate(600%, 200%);
}

.rotation-black .square-62,
.rotation-board.black-to-move .square-62 {
  transform: translate(100%, 700%);
}

.square-72 {
  transform: translate(700%, 200%);
}

.rotation-black .square-72,
.rotation-board.black-to-move .square-72 {
  transform: translate(000%, 700%);
}

.square-3 {
  transform: translate(000%, 300%);
}

.rotation-black .square-3,
.rotation-board.black-to-move .square-3 {
  transform: translate(700%, 600%);
}

.square-13 {
  transform: translate(100%, 300%);
}

.rotation-black .square-13,
.rotation-board.black-to-move .square-13 {
  transform: translate(600%, 600%);
}

.square-23 {
  transform: translate(200%, 300%);
}

.rotation-black .square-23,
.rotation-board.black-to-move .square-23 {
  transform: translate(500%, 600%);
}

.square-33 {
  transform: translate(300%, 300%);
}

.rotation-black .square-33,
.rotation-board.black-to-move .square-33 {
  transform: translate(400%, 600%);
}

.square-43 {
  transform: translate(400%, 300%);
}

.rotation-black .square-43,
.rotation-board.black-to-move .square-43 {
  transform: translate(300%, 600%);
}

.square-53 {
  transform: translate(500%, 300%);
}

.rotation-black .square-53,
.rotation-board.black-to-move .square-53 {
  transform: translate(200%, 600%);
}

.square-63 {
  transform: translate(600%, 300%);
}

.rotation-black .square-63,
.rotation-board.black-to-move .square-63 {
  transform: translate(100%, 600%);
}

.square-73 {
  transform: translate(700%, 300%);
}

.rotation-black .square-73,
.rotation-board.black-to-move .square-73 {
  transform: translate(000%, 600%);
}

.square-4 {
  transform: translate(000%, 400%);
}

.rotation-black .square-4,
.rotation-board.black-to-move .square-4 {
  transform: translate(700%, 500%);
}

.square-14 {
  transform: translate(100%, 400%);
}

.rotation-black .square-14,
.rotation-board.black-to-move .square-14 {
  transform: translate(600%, 500%);
}

.square-24 {
  transform: translate(200%, 400%);
}

.rotation-black .square-24,
.rotation-board.black-to-move .square-24 {
  transform: translate(500%, 500%);
}

.square-34 {
  transform: translate(300%, 400%);
}

.rotation-black .square-34,
.rotation-board.black-to-move .square-34 {
  transform: translate(400%, 500%);
}

.square-44 {
  transform: translate(400%, 400%);
}

.rotation-black .square-44,
.rotation-board.black-to-move .square-44 {
  transform: translate(300%, 500%);
}

.square-54 {
  transform: translate(500%, 400%);
}

.rotation-black .square-54,
.rotation-board.black-to-move .square-54 {
  transform: translate(200%, 500%);
}

.square-64 {
  transform: translate(600%, 400%);
}

.rotation-black .square-64,
.rotation-board.black-to-move .square-64 {
  transform: translate(100%, 500%);
}

.square-74 {
  transform: translate(700%, 400%);
}

.rotation-black .square-74,
.rotation-board.black-to-move .square-74 {
  transform: translate(000%, 500%);
}

.square-5 {
  transform: translate(000%, 500%);
}

.rotation-black .square-5,
.rotation-board.black-to-move .square-5 {
  transform: translate(700%, 400%);
}

.square-15 {
  transform: translate(100%, 500%);
}

.rotation-black .square-15,
.rotation-board.black-to-move .square-15 {
  transform: translate(600%, 400%);
}

.square-25 {
  transform: translate(200%, 500%);
}

.rotation-black .square-25,
.rotation-board.black-to-move .square-25 {
  transform: translate(500%, 400%);
}

.square-35 {
  transform: translate(300%, 500%);
}

.rotation-black .square-35,
.rotation-board.black-to-move .square-35 {
  transform: translate(400%, 400%);
}

.square-45 {
  transform: translate(400%, 500%);
}

.rotation-black .square-45,
.rotation-board.black-to-move .square-45 {
  transform: translate(300%, 400%);
}

.square-55 {
  transform: translate(500%, 500%);
}

.rotation-black .square-55,
.rotation-board.black-to-move .square-55 {
  transform: translate(200%, 400%);
}

.square-65 {
  transform: translate(600%, 500%);
}

.rotation-black .square-65,
.rotation-board.black-to-move .square-65 {
  transform: translate(100%, 400%);
}

.square-75 {
  transform: translate(700%, 500%);
}

.rotation-black .square-75,
.rotation-board.black-to-move .square-75 {
  transform: translate(000%, 400%);
}

.square-6 {
  transform: translate(000%, 600%);
}

.rotation-black .square-6,
.rotation-board.black-to-move .square-6 {
  transform: translate(700%, 300%);
}

.square-16 {
  transform: translate(100%, 600%);
}

.rotation-black .square-16,
.rotation-board.black-to-move .square-16 {
  transform: translate(600%, 300%);
}

.square-26 {
  transform: translate(200%, 600%);
}

.rotation-black .square-26,
.rotation-board.black-to-move .square-26 {
  transform: translate(500%, 300%);
}

.square-36 {
  transform: translate(300%, 600%);
}

.rotation-black .square-36,
.rotation-board.black-to-move .square-36 {
  transform: translate(400%, 300%);
}

.square-46 {
  transform: translate(400%, 600%);
}

.rotation-black .square-46,
.rotation-board.black-to-move .square-46 {
  transform: translate(300%, 300%);
}

.square-56 {
  transform: translate(500%, 600%);
}

.rotation-black .square-56,
.rotation-board.black-to-move .square-56 {
  transform: translate(200%, 300%);
}

.square-66 {
  transform: translate(600%, 600%);
}

.rotation-black .square-66,
.rotation-board.black-to-move .square-66 {
  transform: translate(100%, 300%);
}

.square-76 {
  transform: translate(700%, 600%);
}

.rotation-black .square-76,
.rotation-board.black-to-move .square-76 {
  transform: translate(000%, 300%);
}

.square-7 {
  transform: translate(000%, 700%);
}

.rotation-black .square-7,
.rotation-board.black-to-move .square-7 {
  transform: translate(700%, 200%);
}

.square-17 {
  transform: translate(100%, 700%);
}

.rotation-black .square-17,
.rotation-board.black-to-move .square-17 {
  transform: translate(600%, 200%);
}

.square-27 {
  transform: translate(200%, 700%);
}

.rotation-black .square-27,
.rotation-board.black-to-move .square-27 {
  transform: translate(500%, 200%);
}

.square-37 {
  transform: translate(300%, 700%);
}

.rotation-black .square-37,
.rotation-board.black-to-move .square-37 {
  transform: translate(400%, 200%);
}

.square-47 {
  transform: translate(400%, 700%);
}

.rotation-black .square-47,
.rotation-board.black-to-move .square-47 {
  transform: translate(300%, 200%);
}

.square-57 {
  transform: translate(500%, 700%);
}

.rotation-black .square-57,
.rotation-board.black-to-move .square-57 {
  transform: translate(200%, 200%);
}

.square-67 {
  transform: translate(600%, 700%);
}

.rotation-black .square-67,
.rotation-board.black-to-move .square-67 {
  transform: translate(100%, 200%);
}

.square-77 {
  transform: translate(700%, 700%);
}

.rotation-black .square-77,
.rotation-board.black-to-move .square-77 {
  transform: translate(000%, 200%);
}

.square-8 {
  transform: translate(000%, 800%);
}

.rotation-black .square-8,
.rotation-board.black-to-move .square-8 {
  transform: translate(700%, 100%);
}

.square-18 {
  transform: translate(100%, 800%);
}

.rotation-black .square-18,
.rotation-board.black-to-move .square-18 {
  transform: translate(600%, 100%);
}

.square-28 {
  transform: translate(200%, 800%);
}

.rotation-black .square-28,
.rotation-board.black-to-move .square-28 {
  transform: translate(500%, 100%);
}

.square-38 {
  transform: translate(300%, 800%);
}

.rotation-black .square-38,
.rotation-board.black-to-move .square-38 {
  transform: translate(400%, 100%);
}

.square-48 {
  transform: translate(400%, 800%);
}

.rotation-black .square-48,
.rotation-board.black-to-move .square-48 {
  transform: translate(300%, 100%);
}

.square-58 {
  transform: translate(500%, 800%);
}

.rotation-black .square-58,
.rotation-board.black-to-move .square-58 {
  transform: translate(200%, 100%);
}

.square-68 {
  transform: translate(600%, 800%);
}

.rotation-black .square-68,
.rotation-board.black-to-move .square-68 {
  transform: translate(100%, 100%);
}

.square-78 {
  transform: translate(700%, 800%);
}

.rotation-black .square-78,
.rotation-board.black-to-move .square-78 {
  transform: translate(000%, 100%);
}

.square-9 {
  transform: translate(000%, 900%);
}

.rotation-black .square-9,
.rotation-board.black-to-move .square-9 {
  transform: translate(700%, 000%);
}

.square-19 {
  transform: translate(100%, 900%);
}

.rotation-black .square-19,
.rotation-board.black-to-move .square-19 {
  transform: translate(600%, 000%);
}

.square-29 {
  transform: translate(200%, 900%);
}

.rotation-black .square-29,
.rotation-board.black-to-move .square-29 {
  transform: translate(500%, 000%);
}

.square-39 {
  transform: translate(300%, 900%);
}

.rotation-black .square-39,
.rotation-board.black-to-move .square-39 {
  transform: translate(400%, 000%);
}

.square-49 {
  transform: translate(400%, 900%);
}

.rotation-black .square-49,
.rotation-board.black-to-move .square-49 {
  transform: translate(300%, 000%);
}

.square-59 {
  transform: translate(500%, 900%);
}

.rotation-black .square-59,
.rotation-board.black-to-move .square-59 {
  transform: translate(200%, 000%);
}

.square-69 {
  transform: translate(600%, 900%);
}

.rotation-black .square-69,
.rotation-board.black-to-move .square-69 {
  transform: translate(100%, 000%);
}

.square-79 {
  transform: translate(700%, 900%);
}

.rotation-black .square-79,
.rotation-board.black-to-move .square-79 {
  transform: translate(000%, 000%);
}

/* ROTATION PIECES */

.rotation-pieces.black-to-move .square-0 {
  transform: translate(000%, 000%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-10 {
  transform: translate(100%, 000%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-20 {
  transform: translate(200%, 000%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-30 {
  transform: translate(300%, 000%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-40 {
  transform: translate(400%, 000%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-50 {
  transform: translate(500%, 000%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-60 {
  transform: translate(600%, 000%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-70 {
  transform: translate(700%, 000%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-1 {
  transform: translate(000%, 100%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-11 {
  transform: translate(100%, 100%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-21 {
  transform: translate(200%, 100%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-31 {
  transform: translate(300%, 100%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-41 {
  transform: translate(400%, 100%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-51 {
  transform: translate(500%, 100%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-61 {
  transform: translate(600%, 100%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-71 {
  transform: translate(700%, 100%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-2 {
  transform: translate(000%, 200%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-12 {
  transform: translate(100%, 200%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-22 {
  transform: translate(200%, 200%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-32 {
  transform: translate(300%, 200%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-42 {
  transform: translate(400%, 200%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-52 {
  transform: translate(500%, 200%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-62 {
  transform: translate(600%, 200%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-72 {
  transform: translate(700%, 200%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-3 {
  transform: translate(000%, 300%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-13 {
  transform: translate(100%, 300%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-23 {
  transform: translate(200%, 300%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-33 {
  transform: translate(300%, 300%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-43 {
  transform: translate(400%, 300%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-53 {
  transform: translate(500%, 300%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-63 {
  transform: translate(600%, 300%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-73 {
  transform: translate(700%, 300%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-4 {
  transform: translate(000%, 400%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-14 {
  transform: translate(100%, 400%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-24 {
  transform: translate(200%, 400%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-34 {
  transform: translate(300%, 400%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-44 {
  transform: translate(400%, 400%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-54 {
  transform: translate(500%, 400%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-64 {
  transform: translate(600%, 400%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-74 {
  transform: translate(700%, 400%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-5 {
  transform: translate(000%, 500%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-15 {
  transform: translate(100%, 500%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-25 {
  transform: translate(200%, 500%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-35 {
  transform: translate(300%, 500%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-45 {
  transform: translate(400%, 500%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-55 {
  transform: translate(500%, 500%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-65 {
  transform: translate(600%, 500%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-75 {
  transform: translate(700%, 500%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-6 {
  transform: translate(000%, 600%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-16 {
  transform: translate(100%, 600%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-26 {
  transform: translate(200%, 600%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-36 {
  transform: translate(300%, 600%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-46 {
  transform: translate(400%, 600%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-56 {
  transform: translate(500%, 600%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-66 {
  transform: translate(600%, 600%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-76 {
  transform: translate(700%, 600%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-7 {
  transform: translate(000%, 700%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-17 {
  transform: translate(100%, 700%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-27 {
  transform: translate(200%, 700%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-37 {
  transform: translate(300%, 700%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-47 {
  transform: translate(400%, 700%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-57 {
  transform: translate(500%, 700%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-67 {
  transform: translate(600%, 700%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-77 {
  transform: translate(700%, 700%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-8 {
  transform: translate(000%, 800%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-18 {
  transform: translate(100%, 800%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-28 {
  transform: translate(200%, 800%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-38 {
  transform: translate(300%, 800%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-48 {
  transform: translate(400%, 800%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-58 {
  transform: translate(500%, 800%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-68 {
  transform: translate(600%, 800%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-78 {
  transform: translate(700%, 800%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-9 {
  transform: translate(000%, 900%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-19 {
  transform: translate(100%, 900%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-29 {
  transform: translate(200%, 900%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-39 {
  transform: translate(300%, 900%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-49 {
  transform: translate(400%, 900%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-59 {
  transform: translate(500%, 900%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-69 {
  transform: translate(600%, 900%) rotate(180deg);
}

.rotation-pieces.black-to-move .square-79 {
  transform: translate(700%, 900%) rotate(180deg);
}