/* Landscape uses the full viewport: controls at left, play area at right. */
@media (orientation:landscape) and (min-width:600px){
 html body:has(#app .page.active){width:100%!important;max-width:none!important;height:100dvh!important;margin:0!important;padding:0!important;overflow:hidden!important}
 html body:has(#app .page.active) #app{position:relative!important;inset:auto!important;transform:none!important;max-width:none!important;width:100%!important;height:100dvh!important;min-height:0!important;border-radius:0!important;display:grid!important;grid-template-columns:190px minmax(0,1fr)!important;grid-template-rows:86px 74px minmax(0,1fr)!important;gap:6px!important;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;overflow:hidden!important}
 html body:has(#app .page.active) #app>header{grid-area:1/1!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:stretch!important;width:100%!important;height:86px!important;min-height:0!important;padding:0!important;gap:6px!important}
 html body:has(#app .page.active) #app>header .brand{align-self:flex-start!important;flex:0 0 auto!important}
 html body:has(#app .page.active) #app>header .topActions{display:flex!important;width:100%!important;justify-content:space-between!important;gap:4px!important}
 html #app>header .energyBattery{width:88px!important;height:30px!important;min-width:0!important;padding:3px!important;gap:3px!important}
 html #app>header .headerEnergyIcon{width:19px!important;height:23px!important}
 html #app>header .batteryShell{width:57px!important;height:21px!important;min-width:0!important}
 html #app>header #energyText{font-size:10px!important}
 html #app>header #wallet{width:96px!important;min-width:0!important;height:30px!important;min-height:0!important;padding:3px!important;font-size:9px!important;gap:3px!important}
 html #app>header .headerWalletIcon{width:23px!important;height:23px!important}
 html body:has(#app .page.active) #app>section.money.economy4{grid-area:2/1!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;width:100%!important;height:74px!important;min-height:0!important;margin:0!important;padding:4px!important;border-radius:16px!important}
 html #app>.money .resLabel{font-size:7px!important;letter-spacing:1px!important;line-height:10px!important;margin:0!important}
 html body:has(#app .page.active) #app>.money .currencyValue>i{font-size:13px!important;line-height:18px!important}
 html #app>.money .economyIcon{width:18px!important;height:18px!important}
 html body:has(#app .page.active) #app>nav.mainNavV369{grid-area:3/1!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:repeat(5,minmax(0,1fr))!important;height:100%!important;min-height:0!important;width:100%!important;padding:3px!important;border-radius:18px!important;gap:0!important}
 html #app>nav.mainNavV369>button{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;width:100%!important;height:100%!important;min-height:0!important;padding:0 16px!important}
 html #app>nav.mainNavV369>button img{width:30px!important;height:30px!important;margin:0!important}
 html #app>nav.mainNavV369>button span{font-size:9px!important}
 html body:has(#app .page.active) #app>main{grid-area:1/2/4/3!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;padding:0!important;overflow:hidden!important}
 html #app #life.page.active{overflow:hidden!important;gap:4px!important}
 html #app #life.active>.stage{flex:1 1 0!important;min-height:0!important;grid-template-rows:minmax(0,1fr) 30px!important;gap:4px!important}
 html #app #life.active>.stage>#cardQuickSwitch{height:30px!important;min-height:0!important}
 html #app #life.active #person.nativeDeck .heroCard{width:min(310px,42vw)!important;flex-basis:min(310px,42vw)!important}
 html #app #life.active #person.nativeDeck .heroPortrait{inset:28px 8px 69px!important}
 html #app #life.active #person.nativeDeck .heroCard #tap{height:32px!important;min-height:32px!important;bottom:36px!important;font-size:13px!important;padding:4px!important}
 html #app #life.active #person.nativeDeck .cardStatsTop{top:12px!important;left:16px!important;font-size:9px!important;transform:scale(.8);transform-origin:top left}
 html #app #life.active #person.nativeDeck .heroCard>.rarity{top:10px!important;right:12px!important;font-size:9px!important;padding:5px 9px!important}
 html #app #depot.page.active{display:grid!important;grid-template-columns:minmax(0,1fr) 135px!important;grid-template-rows:36px minmax(0,1fr) auto!important;gap:8px!important;padding:0!important;overflow:hidden!important}
 html #app #depot.active>#mergeBoard.artifactBoard{grid-area:1/1/4/2!important;align-self:center!important;justify-self:center!important;width:min(100%,calc(100dvh - 20px))!important;height:auto!important;max-height:100%!important;aspect-ratio:1!important;margin:0!important;padding:8px!important;gap:3px!important}
 html #app #depot.active>#dynastyCharge{grid-area:1/2!important;height:36px!important;padding:5px!important;font-size:8px!important}
 html #app #depot.active>#artifactQueue{grid-area:2/2!important;align-self:center!important;width:100%!important;height:auto!important;min-height:65px!important;padding:6px!important;flex-wrap:wrap!important}
 html #app #depot.active>.mergeNote{grid-area:3/2!important;font-size:9px!important;line-height:13px!important;padding:5px!important}
 html #app #market.page.active,html #app #tasks.page.active,html #app #collection.page.active{height:100%!important;min-height:0!important;width:100%!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0 8px 20px!important;scroll-padding-bottom:20px}
 html #app .j-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 html #app .j-hero p{max-width:none}
 html #app .cardModal,html #app .ex-modal{max-height:100dvh;overflow:auto}
}
@media (orientation:landscape) and (max-height:360px){
 html #app>nav.mainNavV369>button img{width:23px!important;height:23px!important}
 html #app #life.active #person.nativeDeck .heroCard{width:250px!important;flex-basis:250px!important}
 html #app #life.active #person.nativeDeck .cardStatsTop{transform:scale(.65)}
}
@media (orientation:landscape) and (min-width:600px){
 html #app #depot.active>#dynastyCharge{display:grid!important;grid-template-columns:minmax(0,1fr) 25px!important;grid-template-rows:14px 5px!important;gap:3px!important;align-content:center!important;padding:5px 8px!important}
 html #app #depot.active>#dynastyCharge>span{grid-area:1/1/2/3!important;min-width:0!important;font-size:7px!important;letter-spacing:.5px!important;white-space:nowrap!important}
 html #app #depot.active>#dynastyCharge>div:not(.dynastyInlineReaction){grid-area:2/1!important;width:100%!important;min-width:0!important;height:5px!important;margin:0!important}
 html #app #depot.active>#dynastyCharge>b{grid-area:2/2!important;min-width:0!important;font-size:8px!important;line-height:10px!important}
 html #app #depot.active>#dynastyCharge .dynastyInlineReaction{font-size:8px!important;white-space:normal!important}
}