/* Same staging for every mode. Fixed board geometry; effects never affect layout. */
.board-combat{--fx-time:900ms;--fx-contact:504ms;--fx-value-duration:396ms}
.board-combat[data-fx-speed=fast]{--fx-time:450ms;--fx-contact:252ms;--fx-value-duration:198ms}
.board-combat[data-fx-local=true]{--fx-contact:144ms;--fx-value-duration:756ms}
.board-combat[data-fx-speed=fast][data-fx-local=true]{--fx-contact:72ms;--fx-value-duration:378ms}
#app .ui-battle :is(#combat-scene,.board-combat){min-width:0;max-width:100%;isolation:isolate}
#app .ui-battle :is(#combat-scene,.board-combat) .board-stage{box-sizing:border-box;padding:4px;overflow:hidden;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#36505e44,transparent 75%)}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-minis{padding:3px;gap:6px;overflow:hidden}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-mini{box-sizing:border-box;min-width:0;max-width:190px;width:100%;justify-self:center;border-width:1px;box-shadow:inset 0 1px #d8eaff24,0 2px 5px #0004}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-mini:nth-child(5){width:calc(50% - 3px);max-width:190px}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-mini.actor{border-color:#d5bdff;box-shadow:0 0 0 1px #a987d8,0 0 10px #a987d847}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-mini.target{border-color:var(--fx-color,#f0ce91)}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-mini.pact-source,#app .ui-battle :is(#combat-scene,.board-combat) .combat-mini.pact-partner{border-color:#f4d38b;box-shadow:0 0 0 1px #bc944f,0 0 14px #ecc66f44}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-portrait{background:radial-gradient(ellipse at 50% 30%,#486173,#162734);min-height:18px}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-mini .portrait>.card-art-image{object-fit:contain!important;object-position:center top!important}
#app .ui-battle :is(#combat-scene,.board-combat) .battle-card-info{box-sizing:border-box;padding:4px;gap:3px}
#app .ui-battle :is(#combat-scene,.board-combat) .battle-card-info>strong{font-size:clamp(10px,1.1vw,13px);line-height:1.15}
#app .ui-battle :is(#combat-scene,.board-combat) .battle-vitals{gap:4px;font-size:clamp(10px,1.1vw,13px)}
#app .ui-battle :is(#combat-scene,.board-combat) .battle-health{height:4px;overflow:hidden}
#app .ui-battle :is(#combat-scene,.board-combat) .effect-numbers{inset:auto 2px 4px;gap:2px}
#app .ui-battle :is(#combat-scene,.board-combat) .effect-numbers b{font-size:clamp(10px,1.3vw,16px);line-height:1.15;max-width:100%;padding:3px 4px;overflow-wrap:anywhere}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-action-title{display:flex;flex-wrap:wrap;gap:3px 12px;min-height:32px;padding:5px 9px;border:1px solid #7b8a7355;border-radius:9px;background:#253d46;margin:0}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-action-title strong{min-width:0;overflow-wrap:anywhere;font-size:13px}
#app .ui-battle :is(#combat-scene,.board-combat) .combat-effect-name{display:inline-block;font-size:11px}
#app .ui-battle :is(#combat-scene,.board-combat) .compact-cue{position:static;flex:none;min-height:0;padding:4px 8px;margin:0;line-height:1.25;font-size:11px;overflow-wrap:anywhere}
/* Keep the same card width for the two front slots and the centered rear slot. */
@media(min-width:850px) and (min-height:601px){
 #app .ui-battle :is(#combat-scene,.board-combat) .combat-lineups{max-width:830px;margin:0 auto;gap:30px}
}
@media(orientation:landscape) and (max-height:600px){
 #app .ui-battle :is(#combat-scene,.board-combat) .combat-mini:nth-child(5){width:100%;grid-column:auto}
 #app .ui-battle :is(#combat-scene,.board-combat) .combat-minis{gap:3px;padding:1px}
 #app .ui-battle :is(#combat-scene,.board-combat) .battle-card-info{padding:2px;gap:1px}
}
/* Contact occurs at 56% of the same timeline used by the effects and audio. */
.board-combat .battle-value216{display:inline-grid;position:relative}
.board-combat .battle-value216>span{grid-area:1/1;white-space:nowrap}
.board-combat .battle-value-before216{visibility:hidden;animation:combat-old-value216 var(--fx-contact) step-end}
.board-combat .battle-value-now216{animation:combat-new-value216 var(--fx-contact) step-end}
.board-combat [data-health-change] i{animation:combat-health216 var(--fx-value-duration) ease-out var(--fx-contact) both}
.arena49 .board-combat[data-fx-melee=true] .combat-mini.actor>.combat-portrait{animation:combat-lunge216 var(--fx-time) linear both}
.arena49 .board-combat[data-fx-damage=true] .combat-mini.target>.combat-portrait{animation:combat-hit216 var(--fx-time) linear both}
.arena49 .board-combat[data-fx-weight=heavy] .combat-mini.target>.combat-portrait{animation-name:combat-heavy216}
.board-combat .combat-fall216{animation:combat-fall216 var(--fx-time) linear both}
.board-combat .combat-fall216 .combat-fallen{animation:combat-new-value216 var(--fx-contact) step-end}
.board-combat .combat-pact-thread216{position:absolute;left:0;top:0;width:0;height:3px;pointer-events:none;z-index:24;transform-origin:left center;background:linear-gradient(90deg,#be945b99,#ffe6a7cc,#be945b99);box-shadow:0 0 7px #ffd78577;border-radius:50%;animation:combat-thread216 var(--fx-time) ease-out both}
.board-combat .combat-pact-thread216 i{position:absolute;inset:4px 0 auto;height:1px;background:#fff0c7a6}
.board-combat .combat-pact-thread216 b{position:absolute;width:9px;height:9px;top:-3px;border-radius:50%;background:#fff4ca;box-shadow:0 0 8px 3px #ecc979;animation:combat-thread-pulse216 var(--fx-time) ease-in-out both}
@keyframes combat-old-value216{from{visibility:visible}to{visibility:hidden}}
@keyframes combat-new-value216{from{visibility:hidden}to{visibility:visible}}
@keyframes combat-health216{from{width:var(--health-from)}to{width:var(--health-to)}}
@keyframes combat-lunge216{0%,100%{transform:none}25%{transform:translate(calc(var(--board-dx,12px)*-.22),calc(var(--board-dy,0px)*-.22)) scale(.98)}55%,62%{transform:translate(var(--board-dx,12px),var(--board-dy,0px)) scale(1.035)}82%{transform:translate(calc(var(--board-dx,12px)*.15),calc(var(--board-dy,0px)*.15))}}
@keyframes combat-hit216{0%,55%,100%{transform:none;filter:brightness(1)}58%,65%{transform:translate(var(--board-hit-x,4px),var(--board-hit-y,1px));filter:brightness(1.2)}76%{transform:translate(calc(var(--board-hit-x,4px)*-.25),calc(var(--board-hit-y,1px)*-.25));filter:brightness(1)}}
@keyframes combat-heavy216{0%,55%,100%{transform:none;filter:brightness(1)}58%,67%{transform:translate(calc(var(--board-hit-x,4px)*1.5),calc(var(--board-hit-y,1px)*1.5)) scale(.975);filter:brightness(1.3)}78%{transform:translate(calc(var(--board-hit-x,4px)*-.4),0);filter:brightness(1)}}
@keyframes combat-fall216{0%,55%{opacity:1;filter:grayscale(0)}70%{opacity:.8;filter:grayscale(.4)}100%{opacity:.45;filter:grayscale(1)}}
@keyframes combat-thread216{0%,10%{opacity:0}25%,80%{opacity:1}100%{opacity:.3}}
@keyframes combat-thread-pulse216{0%,18%{left:0;opacity:0}25%{left:0;opacity:1}75%{left:100%;opacity:1}100%{left:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){
 .board-combat .combat-pact-thread216{display:none}
 .board-combat .battle-value-before216{display:none}
 .board-combat .battle-value-now216,.board-combat [data-health-change] i,.board-combat .combat-fall216,.board-combat .combat-fallen{animation:none!important}
}
.motion-reduced137 .board-combat .combat-pact-thread216,.motion-reduced137 .board-combat .battle-value-before216{display:none}
/* A paused/selected frame shows its recorded result immediately. */
[data-playing=false] .board-combat .battle-value-before216,.board-combat[data-static216=true] .battle-value-before216{display:none}
[data-playing=false] .board-combat .battle-value-now216,[data-playing=false] .board-combat [data-health-change] i,[data-playing=false] .board-combat .combat-fall216,[data-playing=false] .board-combat .combat-fallen,[data-playing=false] .board-combat .effect-numbers,
.board-combat[data-static216=true] .battle-value-now216,.board-combat[data-static216=true] [data-health-change] i,.board-combat[data-static216=true] .combat-fall216,.board-combat[data-static216=true] .combat-fallen,.board-combat[data-static216=true] .effect-numbers{animation:none!important}