body.is-viewer {
  height: 100dvh;
  overflow: hidden;
  background: #cfc6b8;
}
body.is-viewer .messages {
  position: absolute;
  z-index: 8;
  top: 74px;
  left: 16px;
  right: 16px;
  width: auto;
}
.stage { position: relative; height: 100dvh; }
#map, #model, #map-fallback { position: absolute; inset: 0; }
#map { z-index: 0; background: #b7b1a6; }
#model { z-index: 2; width: 100%; height: 100%; }
#model[hidden] { display: none !important; }
#map-fallback {
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 20px 120px;
  background:
    radial-gradient(circle at 50% 40%, #d9d3c6, #c3bbae 70%);
  text-align: center;
}
body.no-maps #map-fallback { display: flex; }
.fallback-plan { width: min(520px, 90vw); }
.fallback-plan svg { width: 100%; height: auto; background: #f4efe6; border-radius: 12px; }

.view-bar, .compass, .selection, .panel, .dock, #toast { position: absolute; z-index: 5; }
.view-bar {
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 90px);
  padding: 8px 12px;
  background: rgba(246, 241, 232, 0.94);
  border-radius: 14px;
}
.view-bar .brand { font-size: 20px; }
.view-bar strong, .view-bar span { display: block; }
.view-bar span { color: #6f675e; font-size: 13px; }
.pill {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent, #c6532a);
  color: white;
  font-style: normal;
  font-size: 12px;
}
.compass { top: 14px; right: 14px; width: 58px; height: 58px; }
.compass svg { width: 100%; height: 100%; }
.selection {
  left: 14px;
  bottom: 108px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 12px;
  background: rgba(28, 25, 21, 0.92);
  color: #f6f1e8;
  border-radius: 12px;
}
.selection a { color: #f3e4c4; }
#toast {
  left: 50%;
  bottom: 108px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 12px;
  background: #1c1915;
  color: #f6f1e8;
  border-radius: 999px;
}
.panel {
  right: 14px;
  bottom: 108px;
  width: min(360px, calc(100% - 28px));
  max-height: min(60dvh, 520px);
  overflow: auto;
  padding: 14px;
  background: rgba(246, 241, 232, 0.96);
  border-radius: 16px;
}
.panel[hidden] { display: none !important; }
.panel section { display: none; }
.panel[data-open="zones"] [data-panel="zones"],
.panel[data-open="status"] [data-panel="status"],
.panel[data-open="search"] [data-panel="search"],
.panel[data-open="gallery"] [data-panel="gallery"],
.panel[data-open="brochure"] [data-panel="brochure"],
.panel[data-open="info"] [data-panel="info"],
.panel[data-open="share"] [data-panel="share"] { display: block; }
.panel h2 { font-size: 28px; }
.panel ul { list-style: none; padding: 0; margin: 0; }
.panel li button, #search-list button, #zone-list button, #status-list button {
  width: 100%;
  text-align: left;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid #e4d9c8;
  background: transparent;
  cursor: pointer;
}
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gallery-grid img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; }
.shot { padding: 0; border: 0; background: transparent; cursor: pointer; }
.legend { display: grid; gap: 6px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.swatch.plot { background: #f3e4c4; border: 1px solid #8a7353; }
.swatch.road { background: #2a2724; }
.swatch.open { background: #6e8b5e; }
#lightbox { border: 0; padding: 0; background: transparent; }
#lightbox img { max-width: 90vw; max-height: 80vh; }
#lightbox::backdrop { background: rgba(28, 25, 21, 0.72); }

.dock {
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  max-width: calc(100% - 16px);
  overflow-x: auto;
  padding: 6px;
  background: rgba(22, 19, 16, 0.94);
  border-radius: 18px;
}
.dock button, .dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 64px;
  padding: 6px 4px 7px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f6f1e8;
  text-decoration: none;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.dock svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dock svg .fill { fill: currentColor; stroke: none; }
.dock button.is-on, .dock a.is-on { background: rgba(246, 241, 232, 0.14); }
.tag {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 1px 4px;
  border-radius: 4px;
  font: 11px/1.3 "Outfit", sans-serif;
  white-space: nowrap;
  pointer-events: none;
}
.tag-road { background: rgba(42, 39, 36, 0.92); color: #f3e4c4; }
.tag-plot { background: rgba(243, 228, 196, 0.92); color: #1c1915; }