.hall-guide-map-overlay {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  background: #06131b;
  color: #eafcff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, visibility 160ms ease;
}

.hall-guide-map-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hall-guide-map-overlay__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(82, 226, 235, 0.28);
  background: linear-gradient(90deg, #071c29 0%, #0a2a38 55%, #071822 100%);
  box-shadow: 0 10px 30px rgba(0, 8, 14, 0.32);
}

.hall-guide-map-overlay__back {
  min-width: 112px;
  min-height: 38px;
  border: 1px solid rgba(96, 235, 240, 0.5);
  border-radius: 7px;
  background: rgba(14, 58, 73, 0.92);
  color: #eaffff;
  font: 700 13px/1 "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.hall-guide-map-overlay__back:hover,
.hall-guide-map-overlay__back:focus-visible {
  border-color: #7df8f5;
  background: #12546a;
  outline: none;
}

.hall-guide-map-overlay__heading {
  min-width: 0;
  flex: 1;
}

.hall-guide-map-overlay__heading strong {
  display: block;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.hall-guide-map-overlay__heading small {
  display: block;
  margin-top: 3px;
  color: #85b7c5;
  font-size: 11px;
}

.hall-guide-map-overlay__status {
  color: #83eef0;
  font-size: 12px;
  white-space: nowrap;
}

.hall-guide-map-overlay__frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #dce9ec;
}

html[data-guide-map-overlay="open"],
html[data-guide-map-overlay="open"] body {
  overflow: hidden !important;
}

@media (max-width: 720px) {
  .hall-guide-map-overlay { grid-template-rows: 50px minmax(0, 1fr); }
  .hall-guide-map-overlay__bar { gap: 9px; padding-right: 10px; }
  .hall-guide-map-overlay__back { min-width: 88px; min-height: 34px; font-size: 12px; }
  .hall-guide-map-overlay__heading strong { font-size: 13px; }
  .hall-guide-map-overlay__heading small,
  .hall-guide-map-overlay__status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hall-guide-map-overlay { transition: none; }
}