/* Scoped 2.5D surface. The existing map, themes and renderer stay owned by 3D. */
.city25d { position: absolute; inset: 0; z-index: 2; background: var(--ground); color: var(--ink); }
.city25d[hidden] { display: none; }
.city25d-canvas { display: block; width: 100%; height: 100%; }
.city25d-preview-frame { display: block; width: 100%; height: 100%; border: 0; }
/* Keep the existing sigil available while the map's panel uses the narrow viewport. */
@media (max-width: 1100px) {
  body[data-guide-map-panel] #guide.orb { width: auto; grid-template-columns: auto; }
  body[data-guide-map-panel] #guide.orb > :not(.guide-orb, .sr-only) { display: none !important; }
}
.city25d-message { position: absolute; inset-inline: var(--gutter); top: 38%; margin-inline: auto; max-width: 30rem; text-align: center; }
.city25d-message h2 { margin: 0 0 16px; font-family: var(--f-serif); font-size: clamp(26px, 3vw, 40px); font-weight: 400; }
.city25d-message p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.city25d-copy-short { display: none; }
.city25d-toggle { position: absolute; z-index: 4; inset-inline-end: calc(var(--gutter) + 56px); top: calc(var(--sa-t) + 104px); display: flex; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); }
.city25d-option { min-width: 64px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: inherit; cursor: pointer; }
.city25d-option:hover { color: var(--ink); }
.city25d-option[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.city25d-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body[data-cityview="2.5d"] #stage > .map { visibility: hidden; pointer-events: none; }
body[data-cityview="2.5d"] .city-seal,
body[data-cityview="2.5d"] .plan-reset { display: none; }
@media (max-width: 760px) {
  .city25d-toggle { top: calc(var(--sa-t) + 100px); }
  .city25d-message { top: 32%; }
}
@media (max-height: 500px) {
  .city25d-message { top: calc(var(--sa-t) + 104px); inset-inline-end: 190px; text-align: start; margin-inline: 0; }
  .city25d-message h2 { font-size: 20px; margin-bottom: 6px; }
  .city25d-message p { font-size: 14px; }
  .city25d-copy { display: none; }
  .city25d-copy-short { display: inline; }
}