.map-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
}

.map-nav::-webkit-scrollbar {
  display: none;
}

.map-nav button,
.map-nav a {
  min-width: 44px;
  border: 0;
  background: transparent;
  color: #b5c9dd;
  display: grid;
  place-content: center;
  gap: 3px;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.map-nav a span,
.map-nav button span {
  font-size: 1.25rem;
  line-height: 1;
}

.map-nav a small,
.map-nav button small {
  font-size: .75rem;
  font-weight: 800;
}

.map-nav button.active {
  color: var(--gold);
  background: linear-gradient(180deg, rgba(255, 209, 102, .14), transparent);
}

.map-nav button:focus-visible { outline: 3px solid var(--gold); outline-offset: -5px; border-radius: 12px; }

@media (min-width: 761px) {
  .map-nav {
    width: min(600px, calc(100% - 32px));
  }
}