body {
  --highlight-color: #e43b3b73;
  --grid-piece-size: 9.5vh;
  --hand-piece-size: 7.8vh;
}



#game-space {
  display: grid;
  justify-items: center;
  gap: 1vh;
  margin: 2.5em 0;
  padding: 1em 0;
  background: url(../images/dobutsu_shogi_background.jpg);
  background-size: auto 100%;
  background-position: center;
  border-radius: 3vh;
  width: 100%;
}

#game-space > * {
  margin: 0;
}



.piece {
  touch-action: none;
}



#grid {
  border-collapse: collapse;
}

#grid td {
  height: var(--grid-piece-size);
  width: var(--grid-piece-size);

  border: 0.33vh dashed #ec6866;
  padding: 0.67vh;
  
  user-select: none;
}

#grid .piece {
  display: block;
}

#grid .piece, .piece.fromGrid {
  height: var(--grid-piece-size);
  width: var(--grid-piece-size);
}



.hand {
  display: grid;
  grid-template-columns: repeat(4, var(--hand-piece-size));
  border: 0.2vh solid #5c5c5c;
  min-height: var(--hand-piece-size);
  min-width: calc(var(--hand-piece-size) * 4);
  gap: 0.33vh;
  padding: 0.33vh;
}

.hand.top {
  direction: rtl;
}

.hand .piece, .piece.fromHand {
  height: var(--hand-piece-size);
  width: var(--hand-piece-size);
}



.message {
  font-size: 2vh;
}

.message.top {
  transform: rotate(0.5turn);
}



.new-game-button {
  font-size: 1.5vh;
  border-radius: 0.3em;
  border-style: groove;
  padding: 0.4vh 1.75vh;

  visibility: hidden;
}

.new-game-button.top {
  transform: rotate(0.5turn);
  background-color: #d8effc;
  border-color: #6a92ac;
}

.new-game-button.bottom {
  background-color: #f1f4bb;
  border-color: #a7aa68;
}