/* Touch geometry only; Classic and working keep their separate card treatments. */
:root{color-scheme:dark;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:64px}body{margin:0;overflow-x:hidden}button,input,select{touch-action:manipulation}button,select{min-height:44px}input,select{font-size:16px}button:focus-visible{outline:3px solid #8de7ff;outline-offset:2px}[hidden]{display:none!important}
dialog{max-width:min(92vw,900px);max-height:85dvh;overflow:auto}dialog button{min-height:44px}#settings .setting-row{gap:12px}#settings .setting-row select{max-width:52%}#card-inspector{overscroll-behavior:contain}#card-inspector img{max-height:45dvh;object-fit:contain}#card-inspector p{font-size:16px}
.edition-label{color:#ebc37d;text-align:center;letter-spacing:.16em;font:14px Georgia;margin:8px 0}.saga-menu .menu-panel nav{flex:0 0 auto;grid-template-rows:72px;margin-top:14px}.saga-menu .menu-panel{bottom:auto}.saga-menu .menu-seal{max-width:90px;max-height:90px}
body[data-screen=menu] header{max-width:92vw;position:absolute;top:calc(100svh - 90px);bottom:auto}body[data-screen=menu] header .audio{justify-content:center}body[data-screen=menu] header .audio button{min-height:44px}body[data-screen=menu] header select{min-height:44px}body[data-screen=menu] footer{display:none}
#offline-panel{margin:16px auto;padding:14px;background:#1c1811f5;border:1px solid #a68951;border-radius:10px;max-width:680px;color:#f2e1b6}#offline-panel progress{width:100%;height:14px}#offline-panel p{font:14px/1.4 system-ui;margin:7px 0}#offline-panel .offline-actions{display:flex;gap:8px;flex-wrap:wrap}body[data-screen=menu] #offline-panel{position:relative;z-index:6;margin:12px auto}body[data-screen=battle] #offline-panel{display:none}
body[data-screen=menu] #app{min-height:100svh}.battle-touch-nav{display:none}body[data-reduced-motion=true] *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
@media(max-width:1100px){
 body:not([data-screen=menu]) header{position:relative;display:flex;flex-wrap:wrap;padding:calc(6px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));gap:6px}header #home{display:none}header .audio{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}header .audio select{max-width:180px}header #track-label{display:none}header #volume{width:90px}header button{padding:6px 9px}body:not([data-screen=menu]) #app{padding:8px max(8px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:block;min-width:0;max-width:100%}footer{display:none}
 .skirmish,.collection{width:100%;max-width:100%;margin:0;padding:8px}.skirmish h1,.collection h1{font-size:36px;margin:12px 0}.skirmish-panel{padding:12px}.opponent-intro img{max-height:130px;object-fit:contain}.deck-choices{gap:12px}.deck-choices label{min-width:0}.deck-choices select{width:100%}#edit-deck{margin-top:8px}.deck-toolbar{position:static;display:flex;flex-wrap:wrap;gap:8px}.collection-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.collection-filters{flex-wrap:wrap}.library-card{min-width:0}.collection-grid .card-wrap{width:100%;max-width:200px;margin:auto}.deck-adjust button{min-width:44px}.collection-filters select{max-width:160px}
 #app .battle,#app .battle.working-ui{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;margin:0;padding:0;gap:8px;width:100%;min-width:0}
 .battle-touch-nav{display:flex;gap:4px;position:sticky;top:0;z-index:25;background:#10202cf5;padding:calc(3px + env(safe-area-inset-top)) 4px 3px;justify-content:space-between;border-bottom:1px solid #bda471}.battle-touch-nav button{flex:1;padding:5px;font:13px system-ui;min-width:0}
 #app .battle-heading{display:flex;flex-wrap:wrap;height:auto;min-height:0;gap:8px;padding:0}#app .battle-heading h2{font-size:21px}#app .battle-actions{display:flex;flex-wrap:wrap;gap:6px}#app .battle-actions button{min-height:44px}.layout-picker{font-size:14px}.layout-picker select{min-height:44px;font-size:16px}
 #app .battle-grid{display:flex;flex-direction:column;gap:8px;min-width:0}#app .battle .table{display:flex;flex-direction:column;gap:8px;width:100%;height:auto;min-height:0;padding:8px;overflow:visible;box-sizing:border-box}
 #app .battle .enemy-staging,#app .battle .player-row{position:static;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:76px;padding:0}#app .battle .enemy-staging{order:0}#app .battle .enemy-board{order:1}#app .battle .turn-line{order:2;height:auto;font:12px system-ui;flex-wrap:wrap}#app .battle .player-board{order:3}#app .battle .player-row{order:4}
 #app .battle .hero{min-width:150px;max-width:100%;flex:1;min-height:65px;height:auto;padding:6px;gap:6px}#app .battle .hero .portrait{width:44px;height:52px;flex:0 0 44px}#app .battle .hero strong{font:16px Georgia}#app .battle .hero small{font:12px system-ui}#app .battle .hero b{font-size:23px}#app .battle .hero-power{min-height:60px;height:auto;max-width:130px}.enemy-hand{display:none!important}#app .battle .gold{position:static;min-width:64px;width:auto}#app .battle .gold strong{font-size:24px}#app .battle .gold span{font-size:11px}
 #app .battle .layout-rail{position:static;display:flex;width:65px;height:92px;padding:0;align-self:flex-end}#app .battle .enemy-rail{order:0;display:none}#app .battle .player-rail{order:5}#app .battle .deck-stack{position:relative;width:52px;height:84px;min-width:52px;margin:0;flex:0 0 52px}#app .battle .deck-cards{width:40px;height:58px;margin:0}#app .battle .deck-stack>.deck-cards>.sleeve{width:40px;height:58px}#app .battle .deck-stack b{font-size:14px;position:absolute;bottom:6px;right:0}#app .battle .deck-stack>small{font-size:9px}#app .battle .sleeve img{object-fit:contain}
 #app .battle .board,#app .battle .hand{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:stretch;gap:10px;overflow-x:auto;overflow-y:hidden;max-width:100%;width:100%;padding:6px 4px 10px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;min-height:0;height:auto;box-sizing:border-box;container-type:normal}
 #app .battle .board .card-wrap,#app .battle .hand .card-wrap{display:flex;flex-direction:column;position:relative;flex:0 0 158px;width:158px;max-width:158px;min-width:158px;height:auto;scroll-snap-align:start;gap:4px}
 #app .battle .card-wrap>.inspect-card,#app .battle .card-wrap>.guard-unit{position:static;display:block;min-height:44px;height:auto;width:100%;font:13px system-ui;margin:0;padding:7px;flex:none}#app .battle .board .empty-slot{flex:0 0 158px;width:158px;min-height:200px;max-height:none}
 #app .battle.working-ui .board .card,#app .battle.working-ui .hand .card{height:auto;min-height:254px;flex:1;overflow:visible}#app .working-ui .board .card .art,#app .working-ui .hand .card .art{height:126px;min-height:126px;flex:0 0 126px}#app .working-ui .board .card-text,#app .working-ui .hand .card-text{font:14px/18px system-ui;padding:5px;flex:1}#app .working-ui .board .card>strong,#app .working-ui .hand .card>strong{font:16px/19px Georgia;padding:5px 2px}#app .working-ui .board .unit-status{font:12px/16px system-ui}#app .working-ui .card .stats{min-height:29px}
 #app .battle[data-layout=classic] .card{width:158px;min-height:245px;height:245px}#app .battle[data-layout=classic] .card .art{min-height:110px}#app .battle[data-layout=classic] .card-text{font-size:12px}#app .battle[data-layout=classic] .unit-status{font-size:11px}
 #app .battle .working-sidebar{order:6;display:flex;width:100%;height:auto;max-height:none;padding:0;gap:8px}#app .battle .battle-quest{padding:10px;margin:0}#app .battle .battle-quest button{min-height:44px;font-size:14px;width:auto;display:inline-block;margin:4px}#app .battle .working-log-scroll{max-height:105px}.battle-journal{padding:10px!important}.battle-journal>p,.battle-journal>h3,.battle-journal>.eyebrow{display:none}#app .battle .hint{position:sticky;bottom:env(safe-area-inset-bottom);z-index:24;background:#132a38f5;border:1px solid #ae945e;padding:8px;height:auto;min-height:44px;white-space:normal;font:14px/18px system-ui}#app .battle .hint.targeting{outline:2px solid #9cecff}#cancel{min-height:44px;min-width:80px;margin-left:8px}#app .hand-label{height:auto;font-size:12px}.legal-target{outline:3px dashed #fff0a1!important;outline-offset:-3px!important}
}
@media(max-width:700px){body[data-screen=menu] header{top:max(430px,calc(100svh - 214px));bottom:auto}}
@media(max-height:500px) and (min-width:600px){body[data-screen=menu] header{top:max(224px,calc(100svh - 136px));bottom:auto}}
@media(max-width:700px){
 body[data-screen=menu] .saga-menu{min-height:620px;height:100svh;width:100%;background-position:25% center}.saga-menu .menu-panel{top:10%;height:auto;bottom:auto;left:10%;width:80%}.saga-menu .menu-panel nav{grid-template-rows:68px;flex:none}.saga-menu .menu-seal{width:66px;height:66px}.edition-label{font-size:14px}body[data-screen=menu] header{top:auto;bottom:max(18px,env(safe-area-inset-bottom));left:5%;right:5%;position:absolute;max-width:90%;padding:8px}.saga-menu .menu-panel h1{font-size:14cqw}.saga-menu .menu-subtitle{font-size:3cqw}.deck-choices{display:flex;flex-direction:column}#settings{padding:18px}#card-inspector #inspector-content{display:block}#card-inspector img{max-width:100%}#rules-book .book-spread{display:block}#book-chapters{max-height:140px;overflow:auto}
}
@media(max-width:1100px){
 body[data-screen=battle] header{display:none}body[data-screen=battle] #app{padding-top:calc(112px + env(safe-area-inset-top))}#app .battle .battle-heading{display:none}
 .battle-touch-nav{position:fixed;top:0;left:env(safe-area-inset-left);right:env(safe-area-inset-right);flex-wrap:wrap}.battle-touch-nav button{min-width:80px}.battle-touch-nav #end-turn{display:block;min-width:90px;font-size:13px}
 #app .battle .working-log{width:auto;min-height:0;height:auto}#app .battle .working-sidebar{align-items:stretch}#app .battle .hint{order:0}#app .battle .battle-heading{order:0}#app .battle .battle-grid{order:1}#app .battle .hand-label{order:2}#app .battle .hand{order:3}
 .audio #music-select,.audio #volume{display:inline-block!important}.audio #repeat-track{display:inline-block!important;width:24px;height:24px}
}
@media(max-height:500px) and (min-width:600px){body[data-screen=menu] .saga-menu{height:100svh;width:100vw;min-height:360px;background-size:cover}.saga-menu .menu-panel{top:10%;width:42%;left:6%;height:auto}.saga-menu .menu-panel h1{font-size:7cqw}.saga-menu .menu-subtitle{font-size:1.45cqw}.saga-menu .menu-panel nav{grid-template-rows:56px;margin-top:4px}.saga-menu .menu-panel nav button{font-size:3cqw}.saga-menu .menu-seal{width:62px;height:62px}body[data-screen=menu] header{left:54%;right:2%;bottom:4%;max-width:44%;padding:6px}.edition-label{margin:4px}.saga-menu .menu-rule{margin:6px 15%}
 #app .battle .table{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto;align-items:start}
 #app .battle .enemy-staging{grid-area:1/1;min-width:0}#app .battle .player-row{grid-area:1/2;min-width:0;gap:4px}#app .battle .enemy-board{grid-area:2/1}#app .battle .player-board{grid-area:2/2}#app .battle .turn-line{grid-area:3/1/4/3}#app .battle .working-sidebar{grid-area:4/1/5/3;display:grid;grid-template-columns:1fr 1fr}#app .battle .player-rail{grid-area:5/2}#app .battle .hero-power{min-height:44px;max-width:115px;font-size:12px}#app .battle .hero-power small{font-size:10px}#app .battle .hero{flex-basis:100%;min-height:60px}#app .battle .enemy-staging{min-height:120px}#app .battle .hint{position:relative;bottom:auto;order:0}#app .battle-heading h2{display:none}
 body[data-screen=battle] #app{padding-top:calc(54px + env(safe-area-inset-top))}#app .battle .enemy-staging{min-height:60px}#app .battle .player-row{min-height:60px;flex-wrap:nowrap}#app .battle .player-row .hero{min-width:0;flex:1}#app .battle .player-row .gold{display:none}#app .battle .hero-power{min-width:64px;width:72px}#app .battle .hero-power small{display:none}#app .battle .hint:not(.targeting){min-height:24px;padding:4px}#app .battle .hero small{display:none}#app .battle .hero .opponent-power{display:none}
}

/* Anchor audio to the menu scene, above the separate download panel. */
@media(max-width:700px){body[data-screen=menu] header{top:max(430px,calc(100svh - 214px));bottom:auto}}
@media(max-height:500px) and (min-width:600px){body[data-screen=menu] header{top:max(224px,calc(100svh - 136px));bottom:auto}}

@media(max-width:1100px){#app .battle[data-layout=classic] .card{height:auto;min-height:270px}#app .battle[data-layout=classic] .stats{flex:0 0 36px;min-height:36px}.battle-touch-nav button{font-size:12px}#settings .audio{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}}
