/* QV-11: quiet framing, generous touch areas and a clear view of the miniature. */
#city #scene{background:#90afa1 url('./assets/backgrounds/istok-valley.svg') center top/cover no-repeat!important;height:clamp(430px,68dvh,680px);min-height:430px;border-color:#7c9580;box-shadow:0 12px 36px #0005}
#city #qv-world-map .qv-map-sky{top:10px;left:12px;right:12px;padding:0;background:none;border:0;font-size:8px;color:#edf0d8;letter-spacing:.13em;text-shadow:0 1px 4px #183a36}
#city #qv-world-map .qv-map-sky span:first-child{font-size:12px;font-weight:650;letter-spacing:.18em}
#city #qv-world-map .qv-camera-mode{top:34px;left:10px;min-height:44px;min-width:96px;border:1px solid #c6c9ab77;border-radius:12px;background:#244740d9;font-size:11px;box-shadow:0 3px 9px #123c3329}
#city #scene .qv-city-residents{top:38px;right:12px;padding:6px 8px;border:0;border-radius:8px;background:#244740c9;font-size:10px;box-shadow:none}
#city #scene .qv-city-residents strong{font-size:13px;color:#ffe2a4}
#city #qv-world-map .qv-building-hit{height:44px!important;min-height:44px!important;min-width:68px!important;max-width:108px!important;padding:10px 3px!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;transform:translate(-50%,-50%)!important}
#city #qv-world-map .qv-building-hit .qv-sign-label{padding:4px 6px;background:#1d403be6;border:1px solid #cfcea06b;border-radius:5px;box-shadow:0 2px 5px #173b3433;font-size:10px!important;font-weight:550!important;letter-spacing:0!important;line-height:1.2!important;color:#fff0d0!important;overflow:visible!important}
#city #qv-world-map .qv-building-hit::after{display:block;position:absolute;z-index:-1;content:'';left:50%;top:50%;height:var(--pin-length,0px)!important;width:1px;border:0;background:#f4dfac99;transform:rotate(var(--pin-angle,0rad));transform-origin:top center}
#city #qv-world-map .qv-building-hit:hover .qv-sign-label,#city #qv-world-map .qv-building-hit.chosen .qv-sign-label{border-color:#ffe5ae;background:#315d4e}
#city #qv-world-map .qv-map-footer{bottom:8px;left:8px;right:8px;padding:3px 5px;min-height:50px;gap:5px;border:1px solid #c6c9ab55;border-radius:12px;background:#244740eb;font-size:9px}
#city #qv-world-map .qv-map-footer button{min-height:44px;padding:6px 9px;background:transparent;border:0;color:#f0e6c3;font-size:10px}
#city #qv-world-map #qv-map-caption{max-width:105px;text-align:center;line-height:1.35}
#city #qv-land-points .qv-land-point{width:44px;height:44px;min-height:44px;background:#365c4c9e;border:1px dashed #e2d7a3aa;box-shadow:none}
#city #qv-land-points .qv-land-point span{font-size:21px;font-weight:300}
@media(max-height:700px){#city #qv-world-map .qv-map-sky span:last-child{display:none}}
@media(orientation:landscape){#city #scene{height:calc(100dvh - 125px);min-height:300px}#city #qv-world-map .qv-map-sky{right:140px}}
@media(prefers-reduced-motion:reduce){#city .qv-map-zoom{animation:none}}
/* The full scene and its footer fit between the retained profile/help controls and nav. */
@media(orientation:portrait){
 #city{padding:8px}
 #city>.row{display:none}
 #city #scene{height:calc(100dvh - 187px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:300px;max-height:820px}
}
#city #qv-world-map .qv-map-districts{inset:38px 8px 51px}
#city #qv-land-menu .qv-land-head button{min-width:44px;min-height:44px}

#city .qv-sign-lab{width:90px!important}#city .qv-sign-expeditions{width:88px!important}#city .qv-sign-workshop{width:86px!important}#city .qv-sign-ark{width:96px!important}#city .qv-sign-hero{width:80px!important}#city .qv-sign-farm,#city .qv-sign-market{width:72px!important}
@media(orientation:portrait){
 .app:has(#city.active){position:relative}
 .app:has(#city.active) header{height:54px}
 .app:has(#city.active) .qv-profile-bar{min-height:52px;padding-right:64px}
 .app:has(#city.active) .qv-profile-bar span{font-size:10px;line-height:1.3}
 .app:has(#city.active) .qv-helpbar{position:absolute;z-index:10;right:6px;top:calc(54px + env(safe-area-inset-top));padding:4px 0;background:transparent}
 .app:has(#city.active) #qv-guide-open{width:44px;padding:0;font-size:0}
 .app:has(#city.active) #qv-guide-open::after{content:'?';font-size:20px}
}