/* ChessApp v1.9 recognizable Staunton-inspired piece set */

#chessboard .classic-piece {
  width: 97%;
  height: 97%;
  transform-origin: center center;
  align-self: center;
  justify-self: center;
}

#chessboard .classic-piece .piece-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Pawn: 85% of the bishop's visual height, narrow and centred. */
#chessboard .classic-piece.piece-pawn {
  width: 85% !important;
  height: 85% !important;
  align-self: center;
  justify-self: center;
  transform: none;
}

#chessboard .square.selected .classic-piece.piece-pawn,
#chessboard .square.can-select:hover .classic-piece.piece-pawn {
  transform: scale(1.025);
}

#chessboard .classic-piece.piece-bishop {
  width: 96%;
  height: 98%;
}

#chessboard .classic-piece.piece-knight {
  width: 99%;
  height: 99%;
}

/* The queen remains elegant, while the king is deliberately larger. */
#chessboard .classic-piece.piece-queen {
  width: 96%;
  height: 96%;
}

#chessboard .classic-piece.piece-king {
  width: 100%;
  height: 100%;
}

#chessboard .classic-piece.white .piece-svg {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.48))
    drop-shadow(0 5px 5px rgba(0,0,0,.19))
    drop-shadow(0 9px 9px rgba(0,0,0,.09));
}

#chessboard .classic-piece.black .piece-svg {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.08))
    drop-shadow(0 5px 5px rgba(0,0,0,.34))
    drop-shadow(0 9px 9px rgba(0,0,0,.17));
}

#chessboard .square.selected .classic-piece .piece-svg,
#chessboard .square.can-select:hover .classic-piece .piece-svg {
  transform: translateY(-2px) scale(1.025);
}

@media (max-width: 680px) {
  #chessboard .classic-piece.piece-pawn {
    width: 86% !important;
    height: 86% !important;
  }
}