/* Shared HUD dimensions keep minimap, menu and frames aligned in the same coordinate space. */
.app-shell{--hud-top:max(8px,env(safe-area-inset-top));--hud-right:max(10px,env(safe-area-inset-right));--hud-left:max(10px,env(safe-area-inset-left));--hud-map-width:205px;--hud-gap:10px;--hud-menu-width:44px;--hud-frame-width:clamp(170px,22vw,264px)}
.app-shell .game-minimap-hud{top:var(--hud-top)!important;right:var(--hud-right)!important;width:var(--hud-map-width);box-sizing:border-box;max-width:none}
.app-shell .quick-menu-trigger{top:var(--hud-top);right:calc(var(--hud-right) + var(--hud-map-width) + var(--hud-gap));width:var(--hud-menu-width);height:var(--hud-menu-width);box-sizing:border-box}
.app-shell .quick-menu-panel:not([hidden]){top:calc(var(--hud-top) + var(--hud-menu-width) + var(--hud-gap));right:calc(var(--hud-right) + var(--hud-map-width) + var(--hud-gap));max-width:calc(100% - var(--hud-map-width) - 30px)}
.app-shell .unit-frame{top:var(--hud-top);width:var(--hud-frame-width);box-sizing:border-box}
.app-shell .player-unit-frame{left:var(--hud-left)}
.app-shell .target-unit-frame{right:auto;left:calc(var(--hud-left) + var(--hud-frame-width) + var(--hud-gap))}
/* Location names remain visible, away from the frames; portal captions keep their own names. */
.app-shell:has(.unit-frames) :is(.field-overlay-heading,.city-location .location-heading,.gate-location .location-heading){top:auto;bottom:128px;left:12px;right:auto;max-width:calc(100% - 240px);padding:0;pointer-events:none;background:none;border:0}
.app-shell:has(.unit-frames) :is(.field-overlay-heading,.city-location .location-heading,.gate-location .location-heading) h1{font:700 16px Georgia,serif;margin:0;color:#f3f5ed;text-shadow:0 1px 4px #122f34}
@media(max-width:1100px),(max-height:560px){
 .app-shell{--hud-map-width:145px;--hud-menu-width:38px;--hud-gap:8px;--hud-frame-width:clamp(145px,22vw,208px)}
 .app-shell .game-map-image-wrap{height:74px}.app-shell .game-minimap-hud{padding:6px;gap:4px}
 .app-shell .unit-frame{padding:6px;gap:6px;min-height:71px}
 .app-shell .unit-portrait{flex-basis:44px;width:44px;height:44px}.app-shell .unit-details>strong{font-size:11px}
 .app-shell .unit-resource span{font-size:9px}
}
@media(max-width:620px){
 .app-shell{--hud-map-width:116px;--hud-menu-width:34px;--hud-frame-width:min(158px,calc(100vw - 186px));--hud-gap:6px}
 .app-shell .target-unit-frame{left:var(--hud-left);top:calc(var(--hud-top) + 79px)}
 .app-shell .game-map-image-wrap{height:62px}.app-shell .game-minimap-title strong{font-size:8px}
 .app-shell .game-map-coordinates{font-size:7px}.app-shell .game-map-clock{padding-top:2px}.app-shell .game-map-clock span{font-size:7px}.app-shell .game-map-clock time{font-size:9px}
 .app-shell .game-minimap-footer{flex-wrap:wrap}.app-shell .game-map-hotkey{font-size:8px;padding:2px 4px}
 .app-shell:has(.unit-frames) :is(.field-overlay-heading,.city-location .location-heading,.gate-location .location-heading){bottom:118px;max-width:calc(100% - 145px)}
}
/* Outside game scenes there is no minimap to align the menu with. */
.app-shell:not(:has(.game-minimap-hud)) .quick-menu-trigger{right:var(--hud-right)}
.app-shell:not(:has(.game-minimap-hud)) .quick-menu-panel:not([hidden]){right:var(--hud-right);max-width:calc(100% - 24px)}