/* Straight town streets with staggered plots and three-quarter building art. */
.town-map {
  height: auto;
  min-height: 0;
  aspect-ratio: 6 / 5;
  background: #a8ce87;
  isolation: isolate;
}
.town-map::before, .town-map::after { content: none; }
.town-map .map-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  background: url('town.svg') center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 0;
}
.map-touch-hint { display: none; }
.town-map .map-place {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: 0;
  min-height: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.map-place:hover, .map-place:focus-within { z-index: 4; }
.map-building {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.map-building svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center;
  transform: rotate(var(--tilt, 0deg)) scaleX(var(--facing, 1));
  transition: transform .18s ease;
}
.map-building:hover svg, .map-building:focus-visible svg { transform: rotate(var(--tilt, 0deg)) scaleX(var(--facing, 1)) translateY(-3px) scale(1.025); }
.map-building:focus-visible { outline: 4px solid #f8d280; outline-offset: 3px; }
.map-hover-label {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translate(-50%, 5px);
  max-width: 88%;
  min-width: 63%;
  padding: 4px 7px;
  border: 2px solid #426b80;
  border-radius: 7px;
  background: #fff8de;
  box-shadow: 0 3px 0 #396172;
  color: #285970;
  font: 900 clamp(10px, 1.1vw, 14px)/1.12 Nunito, system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
.map-building:hover .map-hover-label,
.map-building:focus-visible .map-hover-label {
  transform: translate(-50%, 0);
  opacity: 1;
}
.map-place-menu {
  position: absolute;
  z-index: 12;
  width: min(164px, calc(100% - 16px));
  padding: 8px;
  border: 3px solid #366d83;
  border-radius: 11px;
  background: #fff9e6;
  box-shadow: 0 5px 0 #2b5d70, 0 10px 18px #284c4c55;
  color: #285970;
  text-align: center;
}
.map-place-menu[hidden] { display: none; }
.map-place-menu strong { display: block; margin-bottom: 6px; font: 900 13px/1.15 Nunito, system-ui, sans-serif; }
.map-place-menu button {
  display: block;
  width: 100%;
  min-height: 39px;
  padding: 5px 8px;
  border: 2px solid #447d6f;
  border-radius: 7px;
  background: #e4efdc;
  color: #285b55;
  font: 900 13px Nunito, system-ui, sans-serif;
  cursor: pointer;
}
.map-place-menu button:focus-visible { outline: 3px solid #e9b856; outline-offset: 2px; }

/* Setbacks and plot sizes vary; the streets meet in offset T junctions. */
.town-map .place-orchard { left: 1%; top: 0%; width: 27%; height: 29%; }
.town-map .place-work { left: 34%; top: 9%; width: 17%; height: 23%; --tilt: 1deg; }
.town-map .place-arcade { left: 56%; top: 0%; width: 21%; height: 28%; --tilt: -1deg; }
.town-map .place-library { left: 82%; top: 7%; width: 17%; height: 26%; --facing: -1; }
.town-map .place-bank { left: 4%; top: 44%; width: 20%; height: 24%; }
.town-map .place-shop { left: 34%; top: 39%; width: 22%; height: 27%; --tilt: 1deg; }
.town-map .place-supermarket { left: 75%; top: 45%; width: 22%; height: 24%; }
.town-map .place-home { left: 1%; top: 76%; width: 25%; height: 23%; --tilt: -1deg; }
.town-map .place-clothing { left: 36%; top: 74%; width: 20%; height: 24%; --facing: -1; }
.town-map .place-furniture { left: 73%; top: 80%; width: 23%; height: 20%; --facing: -1; }

@media (max-width: 650px) {
  .map-touch-hint {
    display: block;
    margin: -3px 0 12px;
    color: #58706e;
    font-size: 12px;
    font-weight: 800;
  }
  .town-map {
    display: block;
    min-height: 0;
    height: auto;
    aspect-ratio: 360 / 1500;
    padding: 0;
  }
  .town-map .map-art { background-image: url('town-mobile.svg'); }
  .town-map .map-place {
    width: 43%;
    height: auto;
    aspect-ratio: 1;
  }
  .town-map .place-orchard { left: 1%; top: 0%; width: 46%; }
  .town-map .place-work { left: 58%; top: 6%; width: 38%; }
  .town-map .place-arcade { left: 1%; top: 23%; width: 44%; }
  .town-map .place-library { left: 57%; top: 27%; width: 39%; }
  .town-map .place-bank { left: 1%; top: 44%; width: 44%; }
  .town-map .place-shop { left: 57%; top: 49%; width: 42%; }
  .town-map .place-supermarket { left: 1%; top: 64%; width: 44%; }
  .town-map .place-home { left: 58%; top: 69%; width: 41%; }
  .town-map .place-clothing { left: 2%; top: 83%; width: 43%; }
  .town-map .place-furniture { left: 56%; top: 89%; width: 42%; }
  .map-hover-label { display: none; }
}
@media (hover: none) { .map-hover-label { display: none; } }