/* Keep the same battlefield composition regardless of viewport height or zoom.
   The command console flows below it instead of taking height from the arena. */
body:has(#battle:not([hidden])){height:auto;min-height:100svh;overflow:auto}
.app:has(#battle:not([hidden])){height:auto;min-height:100svh;width:100%;max-width:1600px;display:block;overflow:visible;padding:10px}
.app:has(#battle:not([hidden]))>.topbar{height:auto;min-height:54px;margin-bottom:10px;flex-wrap:wrap}
#battle.battle-layout{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto;align-items:start;overflow:visible}
#battle .battle-card{display:flex;flex-direction:column;min-width:0;min-height:0;height:auto;overflow:hidden}
#battle .battle-heading{flex:none;min-height:38px;flex-wrap:wrap}
#battle .arena{container-type:inline-size;flex:none;width:100%;height:auto;min-height:0;aspect-ratio:3/2}
#battle .enemy-huds,#battle .ally-huds{width:77%;gap:0.65cqw}
#battle .enemy-huds{top:0.8cqw;left:0.8cqw}
#battle .ally-huds{bottom:0.8cqw;right:0.8cqw}
#battle .hud{padding:0.4cqw 0.65cqw;border-width:0.16cqw;box-shadow:0.24cqw 0.24cqw #0005;font-size:0.95cqw}
#battle .hud b{font-size:1.55cqw;line-height:1.2;white-space:nowrap}
#battle .hud small{font-size:0.85cqw;line-height:1.3}
#battle .hud .scrolls{display:block;font-size:0.85cqw;line-height:1.3;letter-spacing:0.15cqw}
#battle .hud-types{gap:0.4cqw;margin:0.25cqw 0;flex-wrap:wrap}
#battle .hud-types .type-emblem{font-size:0.8cqw;padding:0.08cqw 0.24cqw;gap:0.3cqw}
#battle .hud-types svg{width:1cqw;height:1cqw}
#battle .hud .hp{height:0.65cqw;margin:0.25cqw 0}
#battle .controls{display:flex;flex-direction:column;gap:10px;height:auto;min-height:0;max-height:none;overflow:visible;padding:12px 14px}
#battle .dialogue{height:auto;min-height:60px;flex:none;overflow:visible}
#battle .dialogue p{font-size:14px}
#battle .control-status{font-size:14px;line-height:1.5}
#battle #actionPanel{flex:none;min-height:0;gap:8px}
#battle .control-footer{flex-wrap:wrap;margin-top:4px}
#battle .control-footer button{min-height:44px;font-size:14px}
#battle .feed-card{height:min(700px,85svh);min-width:0;position:sticky;top:10px}
#battle .target-choice{min-height:108px}
@media(max-width:1100px){
 #battle.battle-layout{grid-template-columns:minmax(0,1fr)}
 #battle .feed-card{position:static;height:240px}
 #battle .team-status{display:block}
}
@media(max-width:600px){
 .app:has(#battle:not([hidden])){padding:5px}
 #battle .controls{padding:10px}
 #battle .battle-heading{font-size:12px}
 #battle .battle-heading button{font-size:11px;min-height:36px}
 #battle .dialogue{gap:8px}
 #battle .dialogue img{width:38px;height:48px}
 #battle .move-choices{grid-template-columns:1fr}
 #battle .move-choice small{white-space:normal}
 #battle .move-description,#battle .move-facts{font-size:13px;line-height:1.4}
 #battle .target-choice{flex-basis:145px;min-width:0;padding:8px;gap:6px}
 #battle .target-choice img{width:64px;height:64px}
 #battle .target-choice b,#battle .target-choice small{font-size:13px}
}