* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  font-family: sans-serif;
  height: 100vh;
  overflow: hidden; }

main {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  background: #eee;
  margin: 0 auto;
  border: 1px solid black; }
  main img {
    width: 100%; }

.grid-container {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: 1fr;
  width: 100%;
  max-width: calc(100% - 16px);
  margin: 0 auto;
  overflow-y: scroll;
  box-sizing: border-box; }

/* ---------- CELLS ---------- */
.cell {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; }

.c2x1 {
  grid-column: span 2;
  grid-row: span 1; }

.c3x1 {
  grid-column: span 3;
  grid-row: span 1; }

.c4x1 {
  grid-column: span 4;
  grid-row: span 1; }

.c5x1 {
  grid-column: span 5;
  grid-row: span 1; }

.c6x1 {
  grid-column: span 6;
  grid-row: span 1; }

.c7x1 {
  grid-column: span 7;
  grid-row: span 1; }

.c8x1 {
  grid-column: span 8;
  grid-row: span 1; }

.c9x1 {
  grid-column: span 9;
  grid-row: span 1; }

.c10x1 {
  grid-column: span 10;
  grid-row: span 1; }

.c11x1 {
  grid-column: span 11;
  grid-row: span 1; }

.c12x1 {
  grid-column: span 12;
  grid-row: span 1; }

.c13x1 {
  grid-column: span 13;
  grid-row: span 1; }

.c2x2 {
  grid-column: span 2;
  grid-row: span 2; }

.c2x3 {
  grid-column: span 2;
  grid-row: span 3; }

.c2x4 {
  grid-column: span 2;
  grid-row: span 2; }

.c2x5 {
  grid-column: span 2;
  grid-row: span 2; }

.c2x6 {
  grid-column: span 2;
  grid-row: span 2; }

.rail-01 {
  grid-column: span 1;
  grid-row: span 1;
  background-image: url("../assets/images/rail-01.svg");
  background-size: cover; }

.rail-02 {
  grid-column: span 1;
  grid-row: span 1;
  background-image: url("../assets/images/rail-02.svg");
  background-size: cover; }

.rail-03 {
  grid-column: span 1;
  grid-row: span 1;
  background-image: url("../assets/images/rail-03.svg");
  background-size: cover; }

.rail-04 {
  grid-column: span 1;
  grid-row: span 1;
  background-image: url("../assets/images/rail-04.svg");
  background-size: cover; }

.rail-05 {
  grid-column: span 1;
  grid-row: span 1;
  background-image: url("../assets/images/rail-05.svg");
  background-size: cover; }

.rail-06 {
  grid-column: span 1;
  grid-row: span 1;
  background-image: url("../assets/images/rail-06.svg");
  background-size: cover; }

.rail-07 {
  grid-column: span 1;
  grid-row: span 1;
  background-image: url("../assets/images/rail-07.svg");
  background-size: cover; }

.rail-08 {
  grid-column: span 1;
  grid-row: span 1;
  background-image: url("../assets/images/rail-08.svg");
  background-size: cover; }

.rail-09 {
  grid-column: span 1;
  grid-row: span 1;
  background-image: url("../assets/images/rail-09.svg");
  background-size: cover; }

.station-03 {
  grid-column: span 1;
  grid-row: span 1;
  background-image: url("../assets/images/station-03.svg");
  background-size: cover; }

.rail-11 {
  grid-column: span 1;
  grid-row: span 1;
  background-image: url("../assets/images/rail-11.svg");
  background-size: cover; }

.water {
  background-color: #5AB5B2; }

.lv00 {
  background-color: #B0C6D1; }

.lv05 {
  background-color: #B2C3C9; }

.lv10 {
  background-color: #B5C0C1; }

.lv15 {
  background-color: #B7BCBA; }

.lv20 {
  background-color: #BAB9B2; }

.lv25 {
  background-color: #BBB5AA; }

.lv30 {
  background-color: #BEB1A2; }

.lv35 {
  background-color: #C0AE9A; }

.lv40 {
  background-color: #C1AA92; }

.lv45 {
  background-color: #C3A68A; }

.lv50 {
  background-color: #C5A282; }

.lv55 {
  background-color: #C69E7B; }

.lv60 {
  background-color: #C79A73; }

.lv65 {
  background-color: #C9966B; }

.lv70 {
  background-color: #CB9263; }

.lv75 {
  background-color: #CC8D5B; }

.lv80 {
  background-color: #CD8954; }

.lv85 {
  background-color: #CE854C; }

.lv90 {
  background-color: #CF8045; }

.lv95 {
  background-color: #D07C3D; }

.lv100 {
  background-color: #D27836; }

/*# sourceMappingURL=style.css.map */