/* Testing */
.button {
  visibility: hidden;
  position: absolute;
  top:0;
  left:0;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  padding: 15px 25px;
  background-color: #222;
  cursor: pointer;
  transition-duration: 100ms;
}

.button:hover {
  color:#5ea0cc;
  filter: brightness(90%);
}


/* Information modal - instead of alert */
.information-modal {
  border: 2px solid silver;
  border-radius: 12px;
  position: absolute;
  width: 25vw;
  aspect-ratio: 1.8;
  user-select: none;
  left: 50%;
  top: 50%;
  background-color: #333;
  z-index: 10;
  transform: translateX(-50%) translateY(-50%);
}

.information-modal h1 {
  padding: 20px 0;
  border-bottom: 2px solid silver;
  text-align: center;
  font-size: 32px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
}

.information-modal.win h1::after {
  color: yellow;
  content: "🏆you win🏆";
}

.information-modal.lose h1::after {
  color: cyan;
  content: "better luck next time!"
}

.information-modal.draw h1::after {
  color: lightgray;
  content: "draw";
}

.information-modal.checkmate h2::after {
  content: "checkmate";
}

.information-modal.stalemate h2::after {
  content: "stalemate";
}

.information-modal.threefold-repetition h2::after {
  content: "threefold repetition";
}

.information-modal.fifty-move-rule h2::after {
  content: "fifty move rule";
}

.information-modal.insufficient-material h2::after {
  content: "insufficient material";
}


.information-modal h2 {
  padding: 20px 0;
  text-align: center;
  font-size: 24px;
  color: silver;
  text-transform: capitalize;
  font-family: Arial, Helvetica, sans-serif;
}

.information-modal .rematch-button {
  box-sizing: border-box;
  border: 2px solid transparent;
  position: absolute;
  padding: 12px 24px;
  background-color: gray;
  color: #333;
  font-weight: bold;
  bottom: 8px;
  left: 50%;
  font-size: 18px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
  transform: translateX(-50%);
  transition-duration: 150ms;
}

.information-modal .rematch-button:hover {
  background-color: transparent;
  color: white;
  border-color: white;
}

/* End testing */
.promotion-modal {
  user-select: none;
  --modal-width: 25%;
  border: 1px solid silver;
  box-sizing: border-box;
  position: absolute;
  width: var(--modal-width);
  height: 200px;
  top:50%;
  right: calc((33% - var(--modal-width)) / 2);
  transform: translateY(-50%);
  font-weight: 600;
}

.inactive {
  visibility: hidden;
}

.promotion-modal > div {
  height: 25%;
  display: flex;
  align-items: center;
  transition-duration: 100ms;
  cursor: pointer;
  filter: brightness(95%);
}

.promotion-modal > div:nth-child(even):hover {
  filter: brightness(110%);
}

.promotion-modal > div:nth-child(odd):hover {
  filter: brightness(80%);
}

.promotion-modal > div > span {
  color: white;
  text-align: center;
  width: 75%;
}

.promotion-modal > div > .piece-logo {
  width: 15%;
  height: 100%;
  background-size: 100%;
  border-right: 1.5px solid #888;
}

.promotion-modal > div:nth-of-type(even){
  background-color: var(--dark);
}

.promotion-modal > div:nth-of-type(odd) {
  background-color: var(--light);
}

.promotion-modal > div:nth-of-type(odd) {
  background-color: var(--light);
}


.promotion-modal > div:nth-of-type(odd) > span {
  background-color: var(--light);
  color: #333 !important;
}


/* Generic stuff */
body {
  background-color: #444444;
  overflow: hidden;
}

.wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.board {
  height: 80%;
  aspect-ratio: 1 / 1;
  border: 3px solid gray;
  transition-duration: .5s;
}

.row {
  height: 12.5%;
  display: flex;
}

.cell {
  height: 100%;
  width: 12.5%;
}


/* flip the chessboard */
.board.flipped {
  transform: rotate(180deg);
}
.flipped [data-piece]:not([data-piece=""]) {
  transform: rotate(180deg); /* Leaves some weird edges on chrome */
}

/* Chessboard pattern */

:root {
  --dark: #8CA2AD;
  --light: #DEE3E6;
  --dark-highlight: #92B166;
  --light-highlight: #C3D887;
}

.board > .row:nth-child(even) > .cell:nth-child(odd), 
.board > .row:nth-child(odd) > .cell:nth-child(even)  {
  background-color: var(--dark);
}

.board > .row:nth-child(even) > .previous-move.cell:nth-child(odd), 
.board > .row:nth-child(odd) > .previous-move.cell:nth-child(even)  {
  background-color: var(--dark-highlight);
}

.board > .row:nth-child(odd) > .cell:nth-child(odd),
.board > .row:nth-child(even) > .cell:nth-child(even)   {
  background-color: var(--light);
}

.board > .row:nth-child(odd) > .previous-move.cell:nth-child(odd),
.board > .row:nth-child(even) > .previous-move.cell:nth-child(even)   {
  background-color: var(--light-highlight);
}

/* Pieces */

.cell {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 85%;
}

/* For both colors */
[data-piece="wrook"]:hover, [data-piece="wknight"]:hover, [data-piece="wbishop"]:hover, [data-piece="wqueen"]:hover, [data-piece="wking"]:hover, [data-piece="wpawn"]:hover, 
[data-piece="brook"]:hover, [data-piece="bknight"]:hover, [data-piece="bbishop"]:hover, [data-piece="bqueen"]:hover, [data-piece="bking"]:hover, [data-piece="bpawn"]:hover {
  cursor: pointer;
}

[data-indicator="move"], [data-indicator="capture"] {
  position: relative;
  cursor: pointer;
}

[data-indicator="move"]::after {
  box-sizing: border-box;
  position: absolute;
  z-index: 10;
  display: block;
  border: 5px solid #5ea0cc;
  border-radius: 50%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: " ";
}

[data-indicator="capture"]::after {
  box-sizing: border-box;
  position: absolute;
  z-index: 10;
  display: block;
  border: 5px solid #2b572e;
  border-radius: 50%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: " ";
}

/* white */
[data-piece="wrook"] {
  background-image: url("images/pieces/white/rook.png");
}

[data-piece="wknight"] {
  background-image: url("images/pieces/white/knight.png");
}

[data-piece="wbishop"] {
  background-image: url("images/pieces/white/bishop.png");
}

[data-piece="wking"] {
  background-image: url("images/pieces/white/king.png");
}

[data-piece="wqueen"] {
  background-image: url("images/pieces/white/queen.png");
}

[data-piece="wpawn"] {
  background-image: url("images/pieces/white/pawn.png");
}

[data-piece="wpromotion"] {
  background-image: url("images/pieces/white/promotion.png");
}

/* black */
[data-piece="brook"] {
  background-image: url("images/pieces/black/rook.png");
}

[data-piece="bknight"] {
  background-image: url("images/pieces/black/knight.png");
}

[data-piece="bbishop"] {
  background-image: url("images/pieces/black/bishop.png");
}

[data-piece="bking"] {
  background-image: url("images/pieces/black/king.png");
}

[data-piece="bqueen"] {
  background-image: url("images/pieces/black/queen.png");
}

[data-piece="bpawn"] {
  background-image: url("images/pieces/black/pawn.png");
}

[data-piece="bpromotion"] {
  background-image: url("images/pieces/black/promotion.png");
}