/* 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-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; }
}

/* LOCAL PREVIEW ONLY; not part of the empty-shell PR. */
.city25d-preview-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
/* The mobile home sheet owns the lower screen while a home is selected. */
@media (max-width: 700px) {
  body[data-city-home-open] #guide { visibility: hidden; pointer-events: none; }
}

/* Local map-only shell. The renderer and other routes retain their own code. */
body[data-city-map-only] .top{background:none;pointer-events:none}
body[data-city-map-only] .top .logo{pointer-events:auto}
body[data-city-map-only] #sections,
body[data-city-map-only] .top-actions,
body[data-city-map-only] #guide,
body[data-city-map-only] .city25d-toggle,
body[data-city-map-only] .city-seal,
body[data-city-map-only] .plan-reset{display:none!important}
.city-map-sigil{position:absolute;left:24px;bottom:24px;width:82px;height:82px;z-index:5;pointer-events:none;object-fit:contain;padding:17px;background:#211f1bf2;border:1px solid #ded4bc50;border-radius:50%;box-shadow:0 6px 20px #0003}
@media(max-width:700px){.city-map-sigil{left:18px;bottom:18px;width:62px;height:62px;padding:12px}body[data-city-home-open] .city-map-sigil{visibility:hidden}}

/* The first map hint grows out of the docked sigil, then yields to exploration. */
.city-welcome-hint{position:absolute;z-index:6;left:108px;bottom:164px;max-width:min(340px,calc(100% - 130px));pointer-events:none;opacity:0;transform:translate(-8px,9px) scale(.96);transform-origin:0 100%;transition:opacity 180ms ease-out,transform 280ms cubic-bezier(.16,1,.3,1)}
.city-welcome-hint[hidden]{display:none}
.city-welcome-hint.is-visible{opacity:1;transform:none}
.city-hint-glass,.city-hint-drop{border:1px solid #fff7;background:linear-gradient(145deg,#fff3 0%,#fff0 46%,#d9b9901a 100%),#25211d85;-webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);box-shadow:inset 0 1px 1px #fff5,inset 0 -1px 1px #fff2,0 8px 26px #0002}
.city-hint-glass{position:relative;display:flex;align-items:center;gap:2px;overflow:hidden;border-radius:24px 24px 24px 10px;padding:5px 5px 5px 20px}
.city-hint-glass p{position:relative;margin:0;color:#fffaf1;font-family:var(--f-sans);font-size:15px;font-weight:500;line-height:1.45;text-wrap:balance;text-shadow:0 1px 5px #0005}
.city-hint-close{position:relative;flex:0 0 44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#eee8df;font:inherit;font-size:22px;line-height:1;cursor:pointer;pointer-events:auto;transition:background 160ms ease-out,transform 160ms ease-out}
.city-hint-close:focus-visible{outline:2px solid #ffb088;outline-offset:-5px}
.city-hint-close:active{transform:scale(.94)}
.city-hint-drop{position:absolute;display:block;border-radius:50%;background-color:#413a3080}
.city-hint-drop-large{width:15px;height:15px;left:-17px;bottom:-12px}
.city-hint-drop-small{width:7px;height:7px;left:-29px;bottom:-24px}
.city-hint-glint{position:absolute;inset:-30px 0;width:30%;background:linear-gradient(90deg,transparent,#fff3,transparent);opacity:0;transform:translateX(-150%) skewX(-20deg);pointer-events:none}
.city-welcome-hint.is-visible .city-hint-glint{animation:city-hint-shine 1200ms 180ms ease-out both}
.city-welcome-hint.is-visible .city-hint-drop{animation:city-hint-rise 650ms cubic-bezier(.16,1,.3,1) both}
.city-welcome-hint.is-visible .city-hint-drop-large{animation-delay:80ms}
@keyframes city-hint-shine{20%{opacity:.65}100%{transform:translateX(500%) skewX(-20deg);opacity:0}}
@keyframes city-hint-rise{from{opacity:0;transform:translate(-3px,7px) scale(.8)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){.city-hint-close:hover{background:#fff2}}
@media(max-width:700px){.city-welcome-hint{left:78px;bottom:152px;max-width:calc(100% - 98px)}.city-hint-glass{padding-left:16px}.city-hint-glass p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.city-welcome-hint{transform:none;transition:opacity 120ms ease-out}.city-welcome-hint.is-visible :is(.city-hint-glint,.city-hint-drop){animation:none}.city-hint-close{transition:background 160ms ease-out}.city-hint-close:active{transform:none}}