/* Xiangqi diagrams */
.diag-xiangqi {
  align-items: center;
}

.diag-xiangqi-cnv-wrapper {
  --background-color: rgb(161, 101, 10);
  --board-color: rgb(228, 153, 92);
  align-items: center;
  aspect-ratio: 10 / 11;
  background-color: var(--background-color);
  display: flex;
  justify-content: center;
  min-width: 240px;
  width: 60%;
  user-select: none;
  -webkit-user-select: none;
}

.xiangqi-board {
  --num-cols: 9;
  --num-rows: 10;
  aspect-ratio: 9 / 10;
  background-color: var(--board-color);
  background-image: url("../images/boards/xiangqiLines.svg");
  background-size: 100% 100%;
  position: relative;
  width: 90%;
}

.xiangqi-square-container {
  background-size: contain;
  display: flex;
  flex-direction: row;
  height: calc(100% / var(--num-rows));
  position: absolute;
  width: calc(100% / var(--num-cols));
}

.xiangqi-red-pawn {
  background-image: url("../images/pieces/xiangqi/red_black/rP.svg");
}

.xiangqi-red-advisor {
  background-image: url("../images/pieces/xiangqi/red_black/rA.svg");
}

.xiangqi-red-elephant {
  background-image: url("../images/pieces/xiangqi/red_black/rE.svg");
}

.xiangqi-red-horse {
  background-image: url("../images/pieces/xiangqi/red_black/rN.svg");
}

.xiangqi-red-cannon {
  background-image: url("../images/pieces/xiangqi/red_black/rC.svg");
}

.xiangqi-red-chariot {
  background-image: url("../images/pieces/xiangqi/red_black/rR.svg");
}

.xiangqi-red-king {
  background-image: url("../images/pieces/xiangqi/red_black/rK.svg");
}

.xiangqi-black-pawn {
  background-image: url("../images/pieces/xiangqi/red_black/bP.svg");
}

.xiangqi-black-advisor {
  background-image: url("../images/pieces/xiangqi/red_black/bA.svg");
}

.xiangqi-black-elephant {
  background-image: url("../images/pieces/xiangqi/red_black/bE.svg");
}

.xiangqi-black-horse {
  background-image: url("../images/pieces/xiangqi/red_black/bN.svg");
}

.xiangqi-black-cannon {
  background-image: url("../images/pieces/xiangqi/red_black/bC.svg");
}

.xiangqi-black-chariot {
  background-image: url("../images/pieces/xiangqi/red_black/bR.svg");
}

.xiangqi-black-king {
  background-image: url("../images/pieces/xiangqi/red_black/bK.svg");
}