.BoardPieces {
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: flex-end;
  height: 6rem;
  right: 30rem;
  bottom: 11rem; /* 1rem over top of Resource cards in hand */
  z-index: 1000;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.BoardPieces > div {
  display: flex;
  justify-items: flex-start;
}

.BoardPieces[data-active="true"] > div > div {
  filter: drop-shadow(0px 0px 5px black);
  cursor: pointer;
}

.BoardPieces[data-active="true"] > div > div:hover {
  filter: drop-shadow(0px 0px 5px white);
}

.BoardPieces .Shape {
  margin: 0.25rem;
  margin-bottom: 0.5rem;
}

.BoardPieces .Road .Shape {
  width: 0.5rem;
  height: 1.5rem;
}

.BoardPieces .Settlement .Shape {
  width: 1.25rem;
  height: 1.25rem;
  clip-path: polygon(50% 0%,70% 15%,70% 2%,90% 2%,90% 30%,100% 40%,100% 100%,65% 100%,65% 65%,35% 65%,35% 100%,0% 100%,0% 40%);
}

.BoardPieces .City .Shape {
  width: 1.25rem;
  height: 1.25rem;
  clip-path: polygon(15% 0%,39% 23%,39% 52%,100% 56%,100% 74%,100% 100%,80% 100%,63% 100%,62% 75%,46% 75%,47% 100%,0% 100%,0% 24%);
}