html, body{
  background: black;
  color: white;
  overflow: hidden;
}

.user_stats_container_bottom_right {
  position: fixed;
  bottom: 24px;
  right: 24px;
  color: #ffffff;
  width: 200px;
  pointer-events: none;
  text-align: right;
  z-index: 100;
}

.user_stats_container_bottom_right .datapoint {
  font-size: 12px;
  margin-top: 4px;
}

/* Map styles */
.map-container {
  margin: 0 auto;
  text-align: center;
  width: 100vw;      /* Set desired viewport width */
  height: 100vh;     /* Set desired viewport height */
  overflow: auto;    /* Enable scrollbars */
  background: #222;  /* Optional: background for contrast */
  position: relative;
}
.map-container .map_wrapper {
  cursor: move;
}

.main_gameboard .tiny-dude {
  cursor: pointer;
  transition: all 0.1s linear;
}

.main_gameboard {
  padding: 0;
  margin: 0;
}

.map-container .tile {
  background: none;
  border: none;
  box-sizing: border-box;
  border-radius: 0;
  font-size: 10px;
}
/* V1 */
.map-container .tile[data-biome="grass"] {
  background: #4caf50;
}
.map-container .tile[data-biome="water"] {
  background: #2196f3;
}
.map-container .tile[data-biome="mountain"] {
  background: #9e9e9e;
}
.map-container .tile[data-biome="forest"] {
  background: #2e7d32;
}

/* V3 */
.map-container .tile[data-biome="grass"] {
  background: #4caf50;
  border: 1px solid #3f9b42;
  /* convert to rgb */
  /* background: rgb(76, 175, 80); */
}
.map-container .tile[data-biome="coast"] {
  background: #2196f3;
  border: 1px solid #1d85db;
  /* convert to rgb */
  /* background: rgb(33, 150, 243); */
}
.map-container .tile[data-biome="ocean"] {
  background: #298bdb;
  border: 1px solid #2b7fc4;
  /* convert to rgb */
  /* background: rgb(41, 139, 219); */
}
.map-container .tile[data-biome="river"] {
  background: #138ded;
  border: 1px solid #157dcc;
  /* convert to rgb */
  /* background: rgb(19, 141, 237); */
}
.map-container .tile[data-biome="water"],
.map-container .tile[data-biome="lake"] {
  background: #2b6bfd;
  border: 1px solid #3065e0;
  /* convert to rgb */
  /* background: rgb(43, 107, 253); */
}
.map-container .tile[data-biome="river"] {
  background: #3d78fd;
  border: 1px solid #2f62da;
  /* convert to rgb */
  /* background: rgb(61, 120, 253); */
}
.map-container .tile[data-biome="mountain"] {
  background: #9e9e9e;
  border: 1px solid #707070;
  /* convert to rgb */
  /* background: rgb(158, 158, 158); */
}
.map-container .tile[data-biome="forest"] {
  background: #2e7d32;
  border: 1px solid #184b1b;
  /* convert to rgb */
  /* background: rgb(47, 127, 51); */
}