/* Grey street: the world supplies the unease; the route remains easy to read. */
#city-objective { position: absolute; z-index: 22; top: 22px; left: 24px; width: 310px; max-width: calc(100vw - 190px); padding: 15px 17px; background: #19232be8; color: #d7e1e6; border: 1px solid #52616f; border-radius: 6px; pointer-events: none; }
#city-objective strong { display: flex; align-items: start; justify-content: space-between; gap: 14px; font-size: 13px; line-height: 1.6; font-weight: 400; }
#city-distance { flex-shrink: 0; color: #b7c8d5; font: 11px 'Share Tech Mono', monospace; border: 1px solid #5d7180; border-radius: 4px; padding: 4px 7px; background: #6b849c12; }
.city-route-row { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
#city-bearing { display: block; flex-shrink: 0; width: 24px; height: 24px; text-align: center; font: 23px/24px sans-serif; color: #b9ced7; }
#city-objective-hint { font-size: 10px; line-height: 1.7; color: #a7b7c2; }
#city-distortion { position: absolute; inset: 0; z-index: 60; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, #0d182470 0, #0d182470 2px, transparent 2px, transparent 9px), radial-gradient(ellipse, transparent 25%, #121925b5 90%); mix-blend-mode: multiply; }
body.city-encounter #controls-hint, body.city-encounter #btn-settings, body.city-encounter #mouse-look-hint { display: none !important; }
body.city-departure #controls-hint, body.city-departure #btn-settings, body.city-departure #mouse-look-hint, body.city-departure #room-investigation { display: none !important; }
#city-entry-overlay { position: absolute; inset: 0; z-index: 62; pointer-events: none; background: linear-gradient(#0b111c96, transparent 18%, transparent 78%, #0b111ca6); }
#city-entry-overlay[hidden] { display: none; }
.city-entry-title { position: absolute; left: 8%; bottom: 11%; display: grid; gap: 10px; color: #ced6d8; opacity: 0; }
.city-entry-title small { font: 10px 'Comfortaa', sans-serif; letter-spacing: .25em; color: #9faeb7; }
.city-entry-title span { font: 34px 'Neucha', cursive; text-shadow: 0 2px 10px #10151b; }
#city-entry-overlay[data-phase=street] .city-entry-title { opacity: 1; }
@media (max-width: 600px) { #city-objective { top: 76px; left: 12px; width: 260px; max-width: calc(100vw - 24px); padding: 12px 14px; } }