/* Portrait scenes keep art and hit targets in the same camera coordinate space. */
.hf-media, .hf-poster, .hf-video { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hf-media { z-index:1; overflow:hidden; background:#070d0b; }
.hf-poster, .hf-video { display:block; object-fit:contain; }
.hf-video { opacity:0; transition:opacity .22s ease; }
.hf-playing > .hf-media > .hf-video { opacity:1; }
.hf-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; padding:9px 12px; color:#c5b899; background:#0a100ddd; border-block:1px solid #b496632c; }
.hf-motion-button { min-height:44px; padding:8px 12px; border:1px solid #bda16b66; border-radius:8px; background:#172017; color:#e9d3a6; font:600 11px/1.4 var(--sans,sans-serif); }
.hf-motion-button:focus-visible { outline:2px solid #edcf92; outline-offset:3px; }
.hf-status { max-width:100%; font-size:10px; line-height:1.5; }
#capitalMapStage[data-hf-scene="capital"] { aspect-ratio:9/16!important; }
#capitalMapStage[data-hf-scene="capital"] .capital-city-backdrop,
#capitalMapStage[data-hf-scene="capital"] .capital-scene-canvas { visibility:hidden; }
/* Original 1122x1402 city is inset at (1,350) on the 1125x2000 outpaint canvas. */
#capitalMapStage[data-hf-scene="capital"] .capital-building-layer { inset:auto; left:.088889%; top:17.5%; width:99.733333%; height:70.1%; }
#worldMapVisual[data-hf-scene="world"] { aspect-ratio:9/16; height:auto; }
#worldMapCanvas.hf-enabled > .world-map-art { visibility:hidden; }
#worldMapCanvas.hf-enabled .world-map-routes { z-index:2; }
#worldMapCanvas.hf-enabled .world-map-hotspots { z-index:3; }
#building .capital-hub-hero.hf-enabled { min-height:0; aspect-ratio:9/16; overflow:hidden; background:#080d0b; }
#building .capital-hub-hero.hf-enabled::before { display:none; }
#building .capital-hub-hero.hf-enabled .hf-media { z-index:0; }
#building .capital-hub-hero.hf-enabled .capital-hub-hero__shade { z-index:1; }
#building .capital-hub-hero.hf-enabled .capital-hub-hero__copy,
#building .capital-hub-hero.hf-enabled .capital-hub-hero__icon { z-index:2; }
@media (prefers-reduced-motion:reduce) { .hf-video { transition:none; } }