section#map {
  display: flex;
  height: 100%;
  height: var(--app-height, 100dvh);
  align-items: center;
  justify-content: space-evenly;
}

#map-container {
  width: 80vw;
  height: 54vw;
  position: relative;
  background-image: url(../img/map.png);
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 3/2;
}

#controls {
  width: 15%;
}

.place {
  position: absolute;
  width: 8.5%;
  transform-origin: center;
  transition:
    transform 0.2s,
    opacity 0.2s;
}

.place:hover {
  transform: scale(1.1);
}

.place img {
  width: 100%;
}

.place:nth-child(1) {
  left: 32.7%;
  top: 17.7%;
}

.place:nth-child(2) {
  right: 27%;
  top: 28%;
}

.place:nth-child(3) {
  left: 20%;
  bottom: 24%;
}

#player {
  position: absolute;
  width: 8vw;
  height: 12vw;
  pointer-events: none;
  transition:
    left 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}

#player img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

@media (max-width: 900px), (max-height: 650px) {
  section#map {
    justify-content: flex-start;
  }

  #map-container {
    width: 86vw;
    height: min(100vh, 66.67vw);
    height: min(var(--app-height, 100dvh), 66.67vw);
    flex: 0 0 86vw;
    background-size: contain;
  }

  #controls {
    width: 14vw;
    min-width: 100px;
  }

  .place {
    width: max(9%, 52px);
    min-height: 52px;
  }

  #player {
    width: clamp(60px, 9vw, 90px);
    height: clamp(85px, 13vw, 130px);
  }
}