.player {
  width: 20px;
  position: absolute;
  aspect-ratio: 1/1;
  border-radius: 100%;
  border: 1px solid black;
  box-shadow: 1px 14px 29px 1px rgba(0, 0, 0, 0.46);
  z-index: 50;
  transition: 0.3s;
}

.player:hover {
  cursor: pointer;
  transform: scale(1.2);
  box-shadow: 1px 39px 29px 1px rgba(0, 0, 0, 0.46);
}

.player_box {
  position: absolute;
  aspect-ratio: 1/1;
  width: 242px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.player_box_inner {
  width: 100px;
  aspect-ratio: 1/1;
  display: flex;
  gap: 2px;
  padding: 5px;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  border: 6px solid white;
}

.pawn {
  border-radius: 100%;
  background-color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.player_box0 {
  top: -1px;
  left: -1px;
}

.player_box1 {
  top: -1px;
  right: -1px;
}

.player_box2 {
  bottom: -1px;
  right: -1px;
}

.player_box3 {
  bottom: -1px;
  left: -1px;
}

.player_info {
  height: 100px;
  width: 200px;
  color: black;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 20px;
  position: absolute;
  opacity: 0;
  padding: 1px;
  transform: rotate(90deg);
}

.player_info-inner {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 5px;
}

.player_info0 {
  top: 0;
  left: -40%;
}

.player_info1 {
  top: 0;
  right: -40%;
}

.player_info2 {
  bottom: 0;
  right: -40%;
}

.player_info3 {
  bottom: 0;
  left: -40%;
}

.destination {
  position: absolute;
  width: 121px;
  aspect-ratio: 1/1;
  top: 40%;
  left: 40%;
  z-index: 10;
}

.player_destination {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
  z-index: 10;
}

.player_destination:hover {
  cursor: pointer;
  z-index: 50;
}

.destination0 {
  /* background-color: green; */
  transform: rotate(90deg);
}

.destination1 {
  transform: rotate(180deg);
}

.destination2 {
  transform: rotate(270deg);
}