/* Shared flow layout for Cats and Depot. Legacy visual styles stay in style.css. */
body:has(#life.active, #depot.active) #app {
 display:flex!important;flex-direction:column!important;gap:8px!important;
 height:var(--tg-vh,100dvh)!important;min-height:0!important;
 padding:calc(max(env(safe-area-inset-top,0px),var(--game-safe-top,0px)) + 8px) 0 0!important;
 overflow:hidden!important;box-sizing:border-box!important;
}
body:has(#life.active, #depot.active) #app > header {
 position:relative!important;inset:auto!important;transform:none!important;
 order:0;flex:0 0 40px!important;height:40px!important;min-height:40px!important;
 margin:0!important;padding:0 12px!important;gap:8px!important;
}
body:has(#life.active, #depot.active) #app > #themePicker {
 position:relative!important;inset:auto!important;transform:none!important;order:1;
 flex:0 0 26px!important;height:26px!important;width:max-content!important;max-width:calc(100% - 24px)!important;
 align-self:flex-start!important;margin:0 0 0 12px!important;padding:4px 7px!important;
 display:flex!important;gap:8px!important;justify-content:flex-start!important;align-items:center!important;
}
body:has(#life.active, #depot.active) #app > section.money.economy4 {
 position:relative!important;inset:auto!important;transform:none!important;order:2;
 display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
 flex:0 0 58px!important;height:58px!important;min-height:58px!important;
 width:calc(100% - 24px)!important;max-width:none!important;margin:0 12px!important;padding:6px 4px!important;
 overflow:hidden!important;
}
body:has(#life.active, #depot.active) #app > main {
 order:3;position:relative!important;inset:auto!important;transform:none!important;
 flex:1 1 0!important;min-height:0!important;height:auto!important;width:100%!important;
 margin:0!important;padding:0 12px!important;overflow:hidden!important;
}
body:has(#life.active, #depot.active) #app > nav.mainNavV369 {
 order:4;position:relative!important;inset:auto!important;transform:none!important;
 flex:0 0 calc(66px + max(env(safe-area-inset-bottom,0px),var(--game-safe-bottom,0px)))!important;
 height:calc(66px + max(env(safe-area-inset-bottom,0px),var(--game-safe-bottom,0px)))!important;
 min-height:0!important;width:100%!important;margin:0!important;
 padding-bottom:max(env(safe-area-inset-bottom,0px),var(--game-safe-bottom,0px))!important;
}
#app #life.page.active,#app #depot.page.active {
 position:relative!important;inset:auto!important;transform:none!important;
 display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
 gap:8px!important;width:100%!important;height:100%!important;min-height:0!important;
 margin:0!important;padding:0 0 4px!important;overflow-x:hidden!important;overflow-y:auto!important;
}
#app #life.active > .cardProgress {
 position:relative!important;inset:auto!important;transform:none!important;
 flex:0 0 44px!important;height:44px!important;min-height:44px!important;
 width:100%!important;margin:0!important;padding:6px 12px!important;
}
#app #life.active > .stage {
 position:relative!important;inset:auto!important;transform:none!important;
 display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(300px,1fr) 38px!important;
 flex:1 0 346px!important;width:100%!important;height:auto!important;min-height:346px!important;
 padding:0!important;margin:0!important;gap:8px!important;overflow:visible!important;
}
#app #life.active > .stage > .scene {
 grid-area:1/1!important;position:relative!important;inset:auto!important;transform:none!important;
 width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
}
#app #life.active .stage > .energyRegen {display:none!important}
#app #life.active #person.nativeDeck {
 position:relative!important;inset:auto!important;transform:none!important;
 width:100%!important;height:100%!important;max-height:none!important;margin:0!important;padding:0!important;
}
#app #life.active #person > .heroViewport,#app #life.active #person .heroTrack {
 height:100%!important;min-height:0!important;margin:0!important;padding:0!important;
}
#app #life.active #person > .heroViewport {overflow:hidden!important;width:100%!important}
#app #life.active #person.nativeDeck .heroCard {
 height:100%!important;min-height:0!important;margin-top:0!important;margin-bottom:0!important;
 width:min(76vw,350px)!important;flex-basis:min(76vw,350px)!important;
}
#app #life.active #person.nativeDeck .heroPortrait {inset:48px 10px 94px!important;width:auto!important;height:auto!important;margin:0!important}
#app #life.active #person.nativeDeck .heroCard .cardInfo {
 position:absolute!important;top:auto!important;bottom:8px!important;left:32px!important;right:32px!important;
 height:28px!important;min-height:28px!important;margin:0!important;transform:none!important;
}
#app #life.active #person > .heroArrow {top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;width:36px!important;height:44px!important;z-index:80!important}
#app #life.active #person > .heroPrev {left:0!important;right:auto!important}
#app #life.active #person > .heroNext {right:0!important;left:auto!important}
#app #life.active > .stage > #tap {
 grid-area:1/1!important;align-self:end!important;justify-self:center!important;
 position:relative!important;inset:auto!important;transform:none!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 width:min(calc(76vw - 64px),286px)!important;max-width:none!important;
 height:44px!important;min-height:44px!important;padding:8px!important;margin:0 0 42px!important;
 z-index:90!important;
}
#app #life.active > .stage > #cardQuickSwitch {
 grid-area:2/1!important;position:relative!important;inset:auto!important;transform:none!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 width:100%!important;max-width:100%!important;height:38px!important;min-height:38px!important;
 margin:0!important;padding:0!important;gap:6px!important;
}
#app #life.active #cardQuickSwitch > button {flex-shrink:1!important;min-width:0!important;max-width:34px!important;max-height:34px!important}
#app #depot.active > #dynastyCharge {
 position:relative!important;inset:auto!important;transform:none!important;
 flex:0 0 36px!important;width:100%!important;height:36px!important;min-height:36px!important;margin:0!important;
}
#app #depot.active > #mergeBoard.artifactBoard {
 position:relative!important;inset:auto!important;transform:none!important;
 flex:0 0 auto!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
 aspect-ratio:1!important;margin:0!important;box-sizing:border-box!important;
 grid-template-rows:repeat(7,minmax(0,1fr))!important;
}
#app #depot.active > #artifactQueue {
 position:relative!important;inset:auto!important;transform:none!important;
 flex:0 0 64px!important;width:100%!important;height:64px!important;min-height:64px!important;
 margin:0!important;padding:6px 8px!important;box-sizing:border-box!important;
}
#app #depot.active > .mergeNote {
 position:relative!important;inset:auto!important;transform:none!important;flex:0 0 auto!important;
 width:100%!important;margin:0!important;padding:0 6px!important;font-size:10px!important;line-height:14px!important;
}
body:has(#life.active, #depot.active) #app > header .brand,
body:has(#life.active, #depot.active) #app > header .topActions {
 position:relative!important;inset:auto!important;transform:none!important;margin:0!important;align-self:center!important;
}
body:has(#life.active, #depot.active) #app > header .brand {min-width:0!important;flex:1 1 auto!important}
body:has(#life.active, #depot.active) #app > header .brand small {font-size:clamp(8px,2.5vw,11px)!important;letter-spacing:1px!important;white-space:nowrap!important}
body:has(#life.active, #depot.active) #app > header .topActions {flex:0 0 auto!important;gap:4px!important}
body:has(#life.active, #depot.active) #app > section.money.economy4 > .resCell {
 min-width:0!important;padding:0 3px!important;overflow:hidden!important;
}
body:has(#life.active, #depot.active) #app > section.money.economy4 .currencyValue {
 display:flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;
 min-width:0!important;width:100%!important;white-space:nowrap!important;
}
body:has(#life.active, #depot.active) #app > section.money.economy4 .currencyValue > i {
 min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:clamp(12px,3.6vw,17px)!important;
}

/* Contain Depot artwork below the HUD, including legacy positioned children. */
body:has(#life.active, #depot.active) #app > section.money.economy4 {z-index:3!important;visibility:visible!important;opacity:1!important}
body:has(#life.active, #depot.active) #app > main {z-index:1!important;isolation:isolate}
#app #depot.page.active {isolation:isolate;padding:8px!important;gap:12px!important}
#app #life.active .cardProgress > div:first-child {margin-bottom:4px!important}