/* One game-plane HUD: all dimensions scale through the existing shell. */
html:root #villageScreen #globalMapButton{position:absolute!important;inset:184px 22px auto auto!important;margin:0!important;width:152px!important;height:152px!important;min-width:152px!important;min-height:152px!important}
html:root #villageScreen #globalMapButton>img{width:152px!important;height:152px!important}
html:root #villageScreen #villageGemstones{right:190px;top:18px}
html:root #villageScreen #villageVip{right:190px;top:94px}
html:root #villageScreen :is(#populationStatusButton,#moraleStatusButton){position:absolute!important;top:18px!important;bottom:auto!important;margin:0!important;transform:none!important}
html:root #villageScreen #moraleStatusButton{right:282px!important;left:auto!important}
html:root #villageScreen #populationStatusButton{right:374px!important;left:auto!important}
html:root #villageScreen :is(#shortcut-construction,#shortcut-research){position:absolute!important;left:auto!important;top:auto!important;right:18px!important;margin:0!important}
html:root #villageScreen #shortcut-construction{bottom:176px!important}
html:root #villageScreen #shortcut-research{bottom:98px!important}
html:root #villageScreen #shortcut-army{position:absolute!important;inset:18px auto auto 24px!important;margin:0!important}
html:root #villageScreen #shortcut-scout{position:absolute!important;inset:108px auto auto 24px!important;margin:0!important}
/* Same side column and vertical spacing as Gemstones/VIP beside the profile. */
html:root #villageScreen .expedition-gatherers{left:auto!important;right:190px;top:184px;translate:none}
html:root #villageScreen .expedition-hunters{left:auto!important;right:190px;top:260px;translate:none}
html:root #villageScreen #villageMissionConsole{left:24px;right:auto;top:378px}
html:root #villageScreen #villageMissionConsole[hidden]{display:none!important}
html:root #villageScreen #villageMissionDrawer{left:76px;top:0;width:376px;max-height:calc(100vh - 410px)}
html:root #villageScreen #villageAttackButton>img{animation:none!important;opacity:1!important;filter:drop-shadow(0 2px 2px #000)!important}
html:root #villageScreen #villageAttackButton{isolation:isolate}
html:root #villageScreen #villageAttackButton::before{display:block!important;content:'';position:absolute;inset:0;z-index:-1;background:var(--attack-image) center/contain no-repeat;filter:drop-shadow(0 0 4px var(--hud-glow)) drop-shadow(0 0 12px var(--hud-glow));animation:attack-glow 1.8s ease-in-out infinite;pointer-events:none}
@keyframes attack-glow{50%{opacity:.12}}
.resource-cloud-item{position:relative;isolation:isolate;width:52px;height:48px;min-width:0;padding:0;border:0;border-radius:7px;background:rgba(0,0,0,.72);color:#fff3cf;cursor:pointer;overflow:hidden}
.resource-cloud-item[hidden]{display:none}
.resource-cloud-item>img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:42px;height:42px;object-fit:contain;filter:none}
.resource-cloud-item[data-flow=gain]{--resource-flow-color:#39ff14}
.resource-cloud-item[data-flow=loss]{--resource-flow-color:#ff2525}
.resource-cloud-item.resource-pulse>img{animation:resource-flow .85s ease-in-out}
@keyframes resource-flow{0%,100%{filter:none}25%,60%{filter:drop-shadow(0 0 6px var(--resource-flow-color)) drop-shadow(0 0 12px var(--resource-flow-color))}}
@media(prefers-reduced-motion:reduce){.resource-cloud-item.resource-pulse>img{animation-duration:.01ms}}
.resource-cloud-item[data-resource=beer]>img{width:38px;height:38px}
.resource-cloud-item>span{position:absolute;inset:auto 0 1px;display:block;text-align:center;white-space:nowrap;font:900 12px/1 Georgia,serif;color:#fff3c0;-webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:0 2px 3px #000;pointer-events:none}
.gem-instant-cost{position:absolute;inset:0;display:grid;place-items:center;font:900 12px/1 Georgia,serif;color:#fff3c0;-webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:0 2px 3px #000;pointer-events:none}
html:root #villageScreen .gem-instant{position:relative!important;display:inline-grid!important;place-items:center;width:52px!important;height:52px!important;min-width:52px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:0!important;flex-shrink:0;overflow:visible!important}
html:root #villageScreen .gem-instant[hidden]{display:none!important}
.gem-instant>img{width:52px!important;height:52px!important;object-fit:contain;filter:drop-shadow(0 0 5px #fff)}
html:root #villageScreen .epoch-attack-action{position:relative;width:52px!important;height:52px!important;min-width:52px!important;padding:0!important;border:0!important;background:none!important;font-size:0!important}
.epoch-attack-action>img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 0 6px #fff)}
html:root #villageScreen [data-window-close]::after{background-image:var(--window-close-image)!important}
#authClose{font-size:0!important;width:52px!important;height:52px!important;border:0!important;background:var(--window-close-image,url("./ui/epochs/close-primitive.webp")) center/contain no-repeat!important}
@media(prefers-reduced-motion:reduce){html:root #villageScreen #villageAttackButton::before{animation:none}}
/* Resources expand downward from their own origin; left navigation follows one shared offset. */
html:root #villageScreen #resourceToggleButton{inset:18px auto auto 24px!important;transition:translate .25s ease!important;translate:0 0}
html:root #villageScreen:has(#resourceDrawer:not([hidden])) #resourceToggleButton{bottom:auto!important;translate:0 var(--resource-open-height,0px)}
html:root #villageScreen #resourceDrawer{position:absolute!important;inset:18px auto auto 24px!important;width:max-content!important;max-width:calc(100% - 48px)!important;height:max-content!important;margin:0!important;padding:0!important;border:0!important;overflow:visible!important;z-index:80!important;transform:none!important;background:transparent!important;box-shadow:none!important;max-height:168px!important;border-radius:0}
.resource-cloud{display:grid;padding:0;grid-template-columns:repeat(var(--resource-columns,15),52px);grid-template-rows:repeat(var(--resource-rows,1),48px);gap:8px 4px}

@keyframes resource-slide-down{from{translate:0 -140px;opacity:0}to{translate:0 0;opacity:1}}
html:root #villageScreen #resourceDrawer[hidden]{display:none!important}
html:root #villageScreen #resourceDrawer>.resource-drawer-heading,html:root #villageScreen #resourceDrawerGroups{display:none!important}
html:root #villageScreen #resourceDrawer:not([hidden]){display:block!important;animation:resource-slide-down .25s ease}
html:root #villageScreen{--nav-resource-offset:0px}
html:root #villageScreen:has(#resourceDrawer:not([hidden])){--nav-resource-offset:var(--resource-open-height,0px)}
html:root #villageScreen #shortcut-army{top:108px!important;translate:0 var(--nav-resource-offset)}
html:root #villageScreen #shortcut-scout{top:198px!important;translate:0 var(--nav-resource-offset)}
html:root #villageScreen #villageMissionConsole{top:468px;translate:0 var(--nav-resource-offset)}
html:root #villageScreen :is(#shortcut-army,#shortcut-scout,#villageMissionConsole){transition:translate .25s ease}
html:root #villageScreen :is(.building-design-actions,#buildingRelocate,#buildingRotate){display:none!important}
html:root #villageScreen #buildingPanel.arena-mode>.panel-heading{display:flex;gap:12px;align-items:center}
html:root #villageScreen #buildingPanel.arena-mode>.panel-heading>div:first-child{flex:0 0 auto}
html:root #villageScreen #buildingPanel.arena-mode #arenaTabs{display:flex!important;flex:1;align-self:stretch;margin:0;padding:0;border:0;background:none;min-width:0;gap:4px;overflow-x:auto;height:auto!important;min-height:64px!important;width:auto!important;max-width:none!important;align-items:stretch!important;border-bottom:0!important}
html:root #villageScreen #buildingPanel.arena-mode #arenaTabs>button{flex:1;min-width:76px;height:auto!important;min-height:64px!important;padding:5px 8px;font-size:14px;color:#f7e7bd!important;font-weight:700!important;text-shadow:0 1px 2px #000!important;background:transparent!important;border:0!important;border-radius:4px!important}
html:root #villageScreen #buildingPanel.arena-mode #buildingTitleText{cursor:pointer;border-bottom:1px dotted #e2c17d}
.building-context-tools{position:absolute;z-index:115;translate:-50% 12px;display:flex;gap:8px;padding:4px;background:#0007;border-radius:9px;pointer-events:auto}
.building-context-tools[hidden]{display:none}
.building-context-tools button{width:42px;height:42px;border:0;padding:0;background:none;cursor:pointer}
.building-context-tools img{width:42px;height:42px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 3px #000)}
.building-context-tools button:hover img{filter:drop-shadow(0 0 5px #fff)}
.stable-animals{display:flex;align-items:center;gap:16px;margin-bottom:12px}.stable-animals>img{width:88px;height:88px;object-fit:contain}.stable-animals p{margin:4px 0}
/* Transparent art may draw a glow beyond its hit box, but never intercept a sibling's pointer. */
html:root #villageScreen .art-button>:not(input):not(button){pointer-events:none}
@media(prefers-reduced-motion:reduce){html:root #villageScreen #resourceDrawer:not([hidden]){animation:none}html:root #villageScreen :is(#resourceToggleButton,#shortcut-army,#shortcut-scout,.expedition-gatherers,.expedition-hunters,#villageMissionConsole){transition:none!important}}

html:root #villageScreen #buildingPanel.arena-mode #arenaTabs>button:is(:hover,:focus-visible){background:#ffffff16!important}
html:root #villageScreen #buildingPanel.arena-mode #arenaTabs>button.is-active{background:#dbc58c!important;color:#302b1c!important;text-shadow:none!important}

html:root #villageScreen #resourceDrawer.resource-closing:not([hidden]){animation:resource-slide-up .25s ease forwards;pointer-events:none}
@keyframes resource-slide-up{from{translate:0 0;opacity:1}to{translate:0 -140px;opacity:0}}