/* Reserve the question and every answer first; the oni takes the remaining space. */
#battle{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
#battle .b-top{display:flex;flex-wrap:wrap;gap:2px 10px;margin-bottom:5px;padding-bottom:5px;font-size:.75rem;line-height:1.35}
#battle #bChap{flex:1 1 calc(100% - 70px);font-size:.8rem}
#battle #bProg{order:1;margin-left:auto}
#battle #bRound{order:2;flex:1 1 auto;font-size:.7rem!important;line-height:1.4}
#battle .b-top .frag,#battle .b-top .xp-disp{order:3;font-size:.7rem}
#battle .enemy-wrap{padding:0 6px 2px}
#battle .enemy-name{font-size:1.05rem;line-height:1.35;padding-bottom:4px}
#battle .enemy-hp{height:4px;margin-bottom:3px}
#battle .enemy-svg{height:var(--battle-oni-height,200px);width:min(100%,370px)}
#battle .enemy-wrap:before{width:200px;height:200px;top:50%;transform:translate(-50%,-45%)}
#battle #evoIndicator{position:absolute;right:6px;top:3px;min-height:0}
#battle .battle-vitals{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;max-width:640px;margin:2px auto 4px;min-height:21px}
#battle .hearts{margin:0;padding:0;font-size:1rem;line-height:1.3;min-height:0;white-space:nowrap}
#battle #itemBar{margin:0 0 0 auto;gap:4px}
#battle .combo{margin:0 0 0 auto;font-size:.75rem}
#battle #cardIndicator{flex-basis:100%;margin:0!important}
#battle .qprompt{margin:4px auto;padding:10px 12px;font-size:1rem;line-height:1.5;border-top-width:2px}
#battle .qcard{padding:5px;margin:4px auto}
#battle .qcard img{max-height:var(--battle-figure-height,150px)}
#battle .battle-question-meta{display:flex;justify-content:space-between;align-items:center;max-width:640px;margin:3px auto 5px}
#battle #qnum{margin:0!important;font-size:.7rem!important}
#battle .qdiff{margin:0;font-size:.75rem;line-height:1.2}
#battle .qhint{display:none}
#battle .choices2{gap:6px}
#battle .choice{min-height:44px;padding:8px 11px;font-size:.95rem;line-height:1.4;gap:9px}
#battle .choice .lab{font-size:1rem;padding-right:9px}
#battle .choice.img{padding:5px;gap:3px}
#battle .choice.img img{width:72px;height:64px}
#battle.fit-two-columns .choices2{grid-template-columns:repeat(2,minmax(0,1fr))}
#battle.fit-dense .qprompt{padding:7px 10px;line-height:1.35;font-size:.875rem}
#battle.fit-dense .choices2{gap:4px}
#battle.fit-dense .choice{padding:6px 8px;gap:6px;font-size:.875rem;line-height:1.35}
/* Very long questions on small phones keep all text; collapse only decorative/status space. */
#battle.fit-text-first .enemy-wrap{height:27px;display:block;padding-right:35px}
#battle.fit-text-first .enemy-name{font-size:.85rem;padding-bottom:3px;line-height:1.2}
#battle.fit-text-first .enemy-svg{position:absolute;right:0;top:0;height:24px;width:30px}
#battle.fit-text-first .enemy-wrap:before,#battle.fit-text-first #evoIndicator,#battle.fit-text-first #bRound,#battle.fit-text-first .b-top .frag,#battle.fit-text-first .b-top .xp-disp,#battle.fit-text-first .battle-question-meta{display:none!important}
#battle.fit-text-first .choices2{margin-top:5px}
#battle.fit-text-first .qprompt{line-height:1.25;padding-block:5px}
#battle.fit-text-first .choice{line-height:1.25;padding-block:5px}
@media(min-width:700px) and (max-height:600px){#battle{padding-left:max(12px,calc((100% - 920px)/2));padding-right:max(12px,calc((100% - 920px)/2))}#battle .enemy-wrap{float:left;width:35%;margin-right:3%}#battle .battle-vitals,#battle .qprompt,#battle .qcard,#battle .battle-question-meta,#battle .choices2{margin-left:38%;max-width:none}#battle .enemy-name{font-size:.9rem}}