/* Battle layout overrides live here to keep responsive geometry in one place. */
:root{--battle-top-reserve:112px;--battle-nav-reserve:66px;--battle-safe-bottom:env(safe-area-inset-bottom,0px)}
.app-shell:has(.battle-page){padding-bottom:calc(100px + var(--battle-safe-bottom))}
.battle-page{height:calc(100dvh - var(--battle-top-reserve) - var(--battle-nav-reserve) - var(--battle-safe-bottom));min-height:0;overflow:visible;gap:8px}
.battle-page .battle-result-head{order:-1;flex:0 0 auto;min-height:28px;margin:0}
.battle-page .battle-head{order:0;flex:0 0 auto;align-items:stretch;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:8px;margin:0}
.battle-page .fighter{height:100%;min-width:0;padding:10px;border-radius:6px}
.battle-page .fighter-topline{min-height:18px;margin:0 0 5px;gap:6px}
.battle-page .fighter-side{flex:none;margin:0}
.battle-page .fighter-species{max-width:70%;text-align:right}
.battle-page .fighter-identity{min-height:64px;align-items:center;gap:7px;margin:0 0 4px}
.battle-page .fighter-avatar{width:48px;height:48px}
.battle-page .fighter-copy{min-width:0;max-width:100%}
.battle-page .fighter-copy .name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;white-space:normal;line-height:1.2}
.battle-page .fighter-copy .epithet{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.battle-page .fighter-copy .fighter-owner{display:flex;min-width:0;max-width:100%;overflow:hidden}
.battle-page .fighter-owner>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.battle-page .fighter .hp-label{gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.battle-page .fighter .hp-value,.battle-page .fighter .mp-value{flex:none}
.battle-page .battle-head .vs{min-width:0}
.battle-page .battle-crowd-stage{order:1;display:block;position:relative;z-index:8;flex:0 0 56px;height:56px;min-height:56px;margin:0;pointer-events:none}
.battle-page .battle-crowd-bubble{top:0;min-height:44px}
.battle-page .playback-controls{order:2;flex:0 0 auto;min-width:0}
.battle-page .playback-state{min-width:0}
.battle-page .playback-count{white-space:nowrap;font-variant-numeric:tabular-nums}
.battle-page .playback-actions{width:auto;min-width:0;flex-wrap:nowrap}
.battle-page .compare-details{order:3;flex:0 0 auto;min-width:0}
.battle-page .log{order:4;flex:1 1 auto;min-height:72px;max-height:none;min-width:0}
.battle-page .battle-progression{order:5;flex:0 0 auto;margin:0}
.battle-page .first-battle-tip{order:5;flex:0 0 auto}
.battle-page .battle-footer{order:6;flex:0 0 auto}
.battle-page .tutorial-next{order:7;flex:0 0 auto}
.battle-page.playing{height:calc(100dvh - var(--battle-top-reserve) - var(--battle-nav-reserve) - var(--battle-safe-bottom));}
.battle-page:not(.playing){height:auto;min-height:calc(100dvh - var(--battle-top-reserve) - var(--battle-nav-reserve) - var(--battle-safe-bottom));}
.battle-page:not(.playing) .battle-crowd-stage{display:none}
.battle-page:not(.playing) .log{flex:0 1 auto;min-height:120px;max-height:min(36vh,320px);overflow:auto}
.battle-page:not(.playing) .playback-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.battle-page:not(.playing) .playback-actions{justify-content:flex-end}
.battle-page.winner .fighter-a{border-color:#c5a65a;box-shadow:0 0 28px #dcb85244,inset 0 0 24px #dcb85212}
@media(max-width:650px){
 :root{--battle-top-reserve:93px;--battle-nav-reserve:62px}
 .app-shell:has(.battle-page){padding-bottom:calc(94px + var(--battle-safe-bottom))}
 .battle-page{height:calc(100dvh - var(--battle-top-reserve) - var(--battle-nav-reserve) - var(--battle-safe-bottom));gap:6px}
 .battle-page.playing{height:calc(100dvh - var(--battle-top-reserve) - var(--battle-nav-reserve) - var(--battle-safe-bottom))}
 .battle-page:not(.playing){min-height:calc(100dvh - var(--battle-top-reserve) - var(--battle-nav-reserve) - var(--battle-safe-bottom))}
 .battle-page .battle-head{grid-template-columns:minmax(0,1fr) 23px minmax(0,1fr);gap:4px}
 .battle-page .fighter{padding:8px 7px}
 .battle-page .fighter-identity{min-height:56px;gap:5px}
 .battle-page .fighter-avatar{width:42px;height:42px}
 .battle-page .fighter-copy .name{font-size:12px}
 .battle-page .fighter-copy .epithet{display:none}
 .battle-page .fighter-owner{font-size:9px;padding:0;gap:3px}
 .battle-page .fighter-owner .public-avatar{width:16px;height:16px;flex:0 0 16px}
 .battle-page .fighter .hp-value,.battle-page .fighter .mp-value{font-size:10px}
 .battle-page .playback-controls{gap:5px;padding:5px 7px}
 .battle-page.playing .playback-controls{display:flex;flex-direction:column;align-items:stretch}
 .battle-page.playing .playback-state{min-height:18px}
 .battle-page.playing .playback-actions{display:grid;width:100%;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(28px,.65fr)) minmax(0,1fr);gap:4px}
 .battle-page.playing .playback-actions>*{min-width:0;padding-left:4px;padding-right:4px;white-space:nowrap}
 .battle-page:not(.playing) .playback-controls{grid-template-columns:minmax(0,1fr) auto;padding:6px 9px}
 .battle-page:not(.playing) .playback-count{font-size:10px}
 .battle-page:not(.playing) .playback-actions .skip-button{margin:0}
 .battle-page:not(.playing) .log{min-height:120px;max-height:min(38vh,340px)}
 .battle-page .battle-progression{padding:10px 12px;margin-top:2px}
 .battle-page .battle-progression strong{overflow-wrap:anywhere}
 .battle-page .battle-footer .button{flex:1;min-width:0}
}
@media(max-width:360px){
 .battle-page .battle-head{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:3px}
 .battle-page .fighter{padding:7px 5px}
 .battle-page .fighter-avatar{width:38px;height:38px}
 .battle-page .fighter-identity{gap:4px}
 .battle-page .fighter-owner{font-size:8px}
 .battle-page:not(.playing) .playback-count{font-size:9px}
}
@media(max-height:700px){
 :root{--battle-top-reserve:88px}
 .battle-page.playing{height:calc(100dvh - var(--battle-top-reserve) - var(--battle-nav-reserve) - var(--battle-safe-bottom))}
 .battle-page:not(.playing){min-height:calc(100dvh - var(--battle-top-reserve) - var(--battle-nav-reserve) - var(--battle-safe-bottom))}
 .battle-page .battle-crowd-stage{flex-basis:48px;height:48px;min-height:48px}
 .battle-page .log{min-height:64px}
 .battle-page .battle-head .fighter-identity{min-height:50px}
 .battle-page .fighter-avatar{width:40px;height:40px}
}

.battle-page .fighter-rank{display:inline-flex;align-items:center;gap:3px;flex:none;color:#e0ca8e;font-size:9px;white-space:nowrap}.battle-page .fighter-rank .fighter-rank-icon{width:18px;height:18px}@media(max-width:650px){.battle-page .fighter-rank{gap:2px;font-size:8px}.battle-page .fighter-rank .fighter-rank-icon{width:15px;height:15px}}

.battle-page .fighter.right .fighter-topline{flex-direction:row-reverse}.battle-page .fighter-identity{align-items:flex-start}.battle-page .fighter-copy .name{min-height:2.4em}.battle-page .fighter-copy .epithet{min-height:1.2em}.battle-page .fighter-copy .fighter-species{display:block;max-width:100%;text-align:inherit;line-height:1.2}.battle-page .fighter-rank{display:inline-flex;align-items:center;gap:3px;flex:none;color:#e0ca8e;font-size:9px;white-space:nowrap}.battle-page .fighter-rank small{font-size:inherit}.battle-page .fighter-rank .fighter-rank-icon{width:18px;height:18px}.battle-page .fighter-owner-empty{display:block;min-height:20px;visibility:hidden}.battle-page .fighter-owner{min-height:20px}.battle-page .fighter.right .fighter-owner{flex-direction:row-reverse;text-align:right}.battle-page .fighter.right .fighter-owner>span{text-align:right}@media(max-width:650px){.battle-page .fighter-rank{gap:2px;font-size:9px}.battle-page .fighter-rank .fighter-rank-icon{width:15px;height:15px}.battle-page .fighter-owner-empty{min-height:18px}.battle-page .fighter-owner{min-height:18px}.battle-page .fighter-copy .name{min-height:2.4em}}