#dead-air-map {
  width: min(820px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid #51677a;
  border-radius: 14px;
  background: #0b141d;
  color: #e8edf2;
  box-shadow: 0 24px 70px #000c;
  overflow: auto;
}
#dead-air-map::backdrop {
  background: rgba(2, 6, 10, .82);
  backdrop-filter: blur(3px);
}
.map-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
}
.map-heading h2 {
  margin: 0;
  font: 800 20px/1.1 var(--mono);
  letter-spacing: .12em;
}
.map-heading p {
  margin: 5px 0 0;
  color: #9aaab6;
  font: 13px var(--ui);
}
.map-heading .map-current-location { color: #f2d5aa; font-weight: 700; }
.map-close {
  border: 1px solid #53697a;
  border-radius: 7px;
  background: #16232d;
  color: #f1e8d8;
  font: 24px/1 var(--ui);
  width: 36px;
  height: 36px;
}
.map-close:hover, .map-close:focus-visible { border-color: #e9aa68; }
.map-scroll { overflow-x: auto; }
.map-sheet {
  position: relative;
  aspect-ratio: 1659 / 948;
  width: 100%;
  min-width: 650px;
  overflow: hidden;
  background: #13242d;
}
.map-stage, .map-layer, .map-ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-stage, .map-layer { object-fit: fill; }
.map-layer { pointer-events: none; }
.map-layer[hidden] { display: none; }
.map-station-only {
  -webkit-mask-image: radial-gradient(ellipse 28% 31% at 77% 19%, #000 43%, transparent 100%);
  mask-image: radial-gradient(ellipse 28% 31% at 77% 19%, #000 43%, transparent 100%);
}
.map-booth-only {
  -webkit-mask-image: radial-gradient(ellipse 12% 14% at 31% 69%, #000 28%, transparent 100%);
  mask-image: radial-gradient(ellipse 12% 14% at 31% 69%, #000 28%, transparent 100%);
}
.map-marker circle {
  fill: #eed19a;
  stroke: #17222a;
  stroke-width: 7;
}
.map-current circle {
  fill: #e98168;
  stroke: #f4d9a6;
  stroke-width: 8;
}
.map-marker text {
  fill: #fff1d3;
  stroke: #071019;
  stroke-width: 8;
  stroke-linejoin: round;
  paint-order: stroke;
  font: 700 34px var(--mono);
  letter-spacing: 1px;
}
.map-places, .map-rooms {
  padding: 12px 18px 16px;
  border-top: 1px solid #344653;
  font-family: var(--ui);
}
.map-places h3, .map-rooms h3 {
  margin: 0 0 9px;
  color: #a8bac3;
  font: 700 11px var(--mono);
  letter-spacing: .15em;
}
.map-room {
  display: inline-block;
  margin: 0 7px 7px 0;
  padding: 5px 9px;
  border: 1px solid #627580;
  border-radius: 6px;
  background: #172730;
  color: #e8edf2;
  font-size: 13px;
}
.map-room-current {
  border-color: #e98168;
  color: #ffd8b0;
}
.map-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 520px) {
  .map-heading { padding: 12px 12px 10px; }
  .map-heading h2 { font-size: 17px; }
  .map-heading p { font-size: 12px; }
  .map-places, .map-rooms { padding: 10px 12px 12px; }
  .map-room { font-size: 12px; }
}