/* One foreground order for village surfaces. The navigation, portraits and
   map markers sit below whichever panel the player opens. Native dialogs
   remain in the browser top layer. */
.village-screen #cityCenterBackdrop:not([hidden]) { z-index: 95 !important; }
.village-screen #buildingPanel:not([hidden]) { z-index: 110 !important; }
.village-screen #resourceDrawer:not([hidden]) { z-index: 115 !important; }
.village-screen {
  --village-hud-layer: 45;
  --building-window-width: 1200px;
  --building-window-height: 780px;
}
/* Village shortcuts share one layer, including future direct art controls. */
.village-screen > :is(.art-button, .player-corner, .village-art-navigation),
.village-screen > :has(> .art-button),
.village-screen #villagePrimaryControls,
.village-screen #villageMissionConsole {
  z-index: var(--village-hud-layer) !important;
}
/* Content never determines the outer geometry of a building window. */
.village-screen #buildingPanel:not(.world-mode) {
  box-sizing: border-box;
  width: var(--building-window-width) !important;
  height: var(--building-window-height) !important;
  max-width: calc(100% - 48px) !important;
  max-height: calc(100% - 64px) !important;
  min-height: 0 !important;
  grid-template-rows:68px minmax(0,1fr) auto !important;
}
.village-screen #buildingPanel.healer-mode #healerConsole {
  min-height: 0;
  height: auto;
  overflow: hidden;
}
.village-screen #buildingPanel.healer-mode:not([hidden]) {
  display: grid !important;
  grid-template-rows: 68px minmax(0, 1fr) auto !important;
  bottom: auto !important;
}
.village-screen #buildingPanel.healer-mode .healer-layout {
  height: 100%;
  min-height: 0;
}
.village-screen #worldMapPanel:not([hidden]) { z-index: 130 !important; }
.village-screen .audio-settings:not([hidden]) { z-index: 140 !important; }
/* Opaque surfaces need no live backdrop sampling on mobile GPUs. */
.village-screen :is(.building-panel, .city-center-backdrop, .resource-drawer) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Global window contract: new windows opt in with .game-window. */
.village-screen { --window-width:1200px; --window-height:780px; --window-header-height:68px; --window-close-image:url('ui/missions/close.png'); }
.village-screen :is(.game-window,.game-detail-dialog) {
 font-family:Georgia,serif;
 box-sizing:border-box!important;width:var(--window-width)!important;height:var(--window-height)!important;
 max-width:calc(100% - 48px)!important;max-height:calc(100% - 64px)!important;min-height:0!important;
}
.village-screen :is(.game-window,.game-detail-dialog)[open] {display:flex;flex-direction:column;overflow:hidden;padding:0;}
.village-screen #buildingPanel:not(.world-mode)>.panel-heading,
.village-screen :is(.game-window,.game-detail-dialog)>:is(header,.panel-heading) {
 box-sizing:border-box!important;height:var(--window-header-height)!important;min-height:var(--window-header-height)!important;
 flex:0 0 var(--window-header-height);padding:0 10px!important;margin:0!important;display:flex;align-items:center;gap:8px;
}
.village-screen #buildingPanel .panel-heading-controls,
.village-screen #buildingPanel .building-design-actions {height:100%;align-items:center!important;flex:0 0 auto;gap:4px!important;}
.village-screen #buildingPanel .panel-heading :is(.building-design-card,.panel-close) {
 box-sizing:border-box!important;flex:0 0 62px;width:62px!important;min-width:62px!important;height:62px!important;min-height:62px!important;
 border:0!important;background:transparent!important;padding:5px!important;overflow:hidden;
}
.village-screen #buildingPanel.healer-mode .healer-deck-tabs {height:68px!important;flex:1 1 auto;align-items:center!important;gap:4px;}
.village-screen #buildingPanel.healer-mode .healer-deck-tabs button {box-sizing:border-box;height:62px!important;min-height:62px!important;flex:0 0 68px;width:68px!important;min-width:68px!important;padding:3px!important;}
.village-screen #buildingPanel.healer-mode .healer-deck-tabs button img {width:56px!important;height:56px!important;max-width:56px!important;max-height:56px!important;object-fit:contain;}
.village-screen :is(.panel-close,.window-close,#detailClose)[data-window-close] {position:relative!important;width:62px!important;height:62px!important;min-width:62px!important;min-height:62px!important;padding:4px!important;border:0!important;background:transparent!important;font-size:0!important;flex-shrink:0;}
.village-screen [data-window-close]::after {content:'';display:block;position:absolute;inset:6px;background:var(--window-close-image) center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 2px 2px #0009);}
.village-screen [data-window-close]>:is(img,svg){visibility:hidden;}
.village-screen [data-window-close]:hover::after {filter:drop-shadow(0 0 4px #ede4cd);}
.village-screen .game-detail-dialog>#detailBody {flex:1;min-height:0;overflow:auto;}
.village-screen .game-window>header h2{font:600 20px Georgia,serif;margin:0}
.village-screen #worldMapPanel:not(.world-global-mode):not(.world-battle-mode){grid-template-rows:68px minmax(0,1fr) auto!important}
.village-screen #worldMapPanel:not(.world-global-mode):not(.world-battle-mode)>.world-heading{height:68px!important;min-height:68px!important}

/* Shared frame reserves the village HUD perimeter. Content scrolls inside the
   frame; changing its page never changes the outer geometry. */
.village-screen {
 --window-top:190px;
 --window-bottom:82px;
 --window-height:min(780px,calc(100% - var(--window-top) - var(--window-bottom)));
}
html:root #villageScreen :is(#buildingPanel,#worldMapPanel,#resourceDrawer,dialog.game-window,dialog.game-detail-dialog) {
 box-sizing:border-box!important;position:absolute!important;
 inset:var(--window-top) auto auto 50%!important;margin:0!important;
 width:var(--window-width)!important;height:var(--window-height)!important;
 max-width:calc(100% - 48px)!important;
 max-height:calc(100% - var(--window-top) - var(--window-bottom))!important;
 min-height:0!important;transform:translateX(-50%)!important;
 padding:0!important;overflow:hidden!important;
}
html:root #villageScreen :is(#buildingPanel,#worldMapPanel,#resourceDrawer):not([hidden]) {
 display:grid!important;gap:0!important;
 grid-template-rows:var(--window-header-height) minmax(0,1fr) auto!important;
}
html:root #villageScreen #worldMapPanel.world-global-mode:not([hidden]) {
 grid-template-rows:var(--window-header-height) minmax(0,1fr)!important;
}
html:root #villageScreen #worldMapPanel.world-battle-mode:not([hidden]) {display:flex!important;flex-direction:column;}
html:root #villageScreen :is(#buildingPanel,#worldMapPanel,#resourceDrawer,dialog.game-window,dialog.game-detail-dialog)>:is(header,.panel-heading,.world-heading,.resource-drawer-heading) {
 box-sizing:border-box!important;height:var(--window-header-height)!important;
 min-height:var(--window-header-height)!important;max-height:var(--window-header-height)!important;
 flex:0 0 var(--window-header-height)!important;margin:0!important;padding:0 10px!important;
}
html:root #villageScreen #resourceDrawer .resource-drawer-groups {padding:16px;overflow:auto;min-height:0;}
/* Native backdrops still block background input, without expensive blur or
   hiding the navigation surrounding the common frame. */
#villageScreen dialog::backdrop {background:#080d093d!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
#villageScreen :is(.city-center-backdrop,.world-backdrop) {background:#080d093d!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
#villageScreen :is(#villagePrimaryControls,.village-art-navigation,.player-corner,#villageMissionConsole,#villageGemstones),
#villageScreen>.art-button {visibility:visible!important;}
html:root #villageScreen.global-atlas-open #villageMissionConsole {display:block;}
/* No second atlas zoom: the outer game plane already scales this header. */
html:root #villageScreen #worldMapPanel.world-global-mode .world-heading {zoom:1!important;grid-template-columns:minmax(0,1fr) 62px;gap:6px;}
html:root #villageScreen #worldMapPanel.world-global-mode .world-heading-title {display:none;}
html:root #villageScreen #worldMapPanel.world-global-mode .atlas-toolbar {display:flex;gap:6px;align-items:stretch;}
html:root #villageScreen #worldMapPanel.world-global-mode :is(.atlas-tools,.atlas-view-tools) {display:flex;flex-wrap:nowrap;min-width:0;}
html:root #villageScreen #worldMapPanel.world-global-mode .atlas-toolbar button {height:100%;min-height:0;min-width:42px;padding:4px 7px;flex-direction:column;font-size:11px;}
html:root #villageScreen #worldMapPanel.world-global-mode .atlas-toolbar b {display:block;font-size:21px;}
html:root #villageScreen #worldMapPanel.world-global-mode .atlas-event-button {min-width:116px;}
html:root #villageScreen #worldMapPanel.world-global-mode #closeWorldMap {min-height:0!important;height:62px!important;align-self:center;}

/* Distribute atlas actions across its shared deck without empty side gutters. */
html:root #villageScreen #worldMapPanel.world-global-mode .atlas-toolbar{justify-content:stretch;}
html:root #villageScreen #worldMapPanel.world-global-mode :is(.atlas-tools,.atlas-view-tools){flex:1 1 0;gap:3px;}
html:root #villageScreen #worldMapPanel.world-global-mode .atlas-toolbar button{flex:1 1 auto;font-size:12px;}

/* Window titles reserve remaining deck space; close controls stay on the right. */
.village-screen .game-window>header>h2{flex:1;min-width:0}.village-screen .game-window>header>.window-close{margin-left:auto}