@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

:root {
  --board_row_count: 5;
  --board_col_count: 6;
}

html {
  height: 100vh;
}

body {
  height: 100%;
  font-family: Kanit, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
}

.box {
}

#site_header {
}

#page_content {
  height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-content: stretch;
}

#site_footer {
}

#game_state {
  order: 2;
}

#players {
}

#game_board {
  height: 100%;
  order: 1;
  flex-grow: 1;
  background-color: beige;
  border-collapse: collapse;
  position: relative;
}

#game_board tr {
  height: calc(100% / var(--board_row_count));
}

.board_cell {
  width: calc(100% / var(--board_col_count));
  min-width: 64px;
  min-height: 64px;
  padding: 0;
  border: 1px solid gray;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.circle {
  width: 100%;
  height: 100%;
  min-width: 64px;
  min-height: 64px;
}

.circle0 {
  /* background-color: red; */
  background-image: url("../img/circle0.svg");
}

.circle1 {
  background-image: url("../img/circle1.svg");
}

.circle2 {
  background-image: url("../img/circle2.svg");
}

.circle3 {
  background-image: url("../img/circle3.svg");
}

.circle4 {
  background-image: url("../img/circle4.svg");
}

.circle5 {
  background-image: url("../img/circle5.svg");
}

.player {
  position: absolute;
  height: calc(100% / var(--board_row_count));
  top: calc((var(--board_row_count) - 1) * 100% / var(--board_row_count));
  transition: left 1s ease-out, top 1s;
}

.active_player {
  filter: drop-shadow(5px 5px 5px green);
}

#help {
  display: none;
}

@media (max-width: 640px) {
  #page_content {
    flex-direction: column;
  }
}