/* Remaining time uses the clear space between the battle title and controls. */
.battle-board>.battle-header{gap:clamp(12px,2.2vw,36px)}
.battle-board>.battle-header>div:first-child{flex:0 1 260px;min-width:0;max-width:260px}
.battle-board>.battle-header>div:first-child h2,.battle-board>.battle-header>div:first-child>small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.battle-board>.battle-header>.battle-header-right{flex:0 0 auto;min-width:0;max-width:none;flex-wrap:nowrap}
.battle-board>.battle-header>.battle-timebar{--timebar-light:#cfdeb0;--timebar-mid:#8aa266;--timebar-dark:#466747;--timebar-glow:#c4d59450;position:relative;display:flex;flex:1 1 180px;min-width:70px;max-width:none;flex-direction:column;gap:4px;align-self:center;padding:0 3px;color:#d7d6ac}
.battle-timebar .timebar-caption{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:9px;font-weight:650;line-height:1.2;letter-spacing:.3px}
.battle-timebar .timebar-caption>[data-timebar-label]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.battle-timebar .timebar-caption>[data-timebar-readout]{flex:none;color:#ecdfb2;font-size:10px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
.battle-timebar .timebar-track{position:relative;height:9px;flex:none;overflow:hidden;border:1px solid #b29459;border-radius:5px;background:linear-gradient(#101b16,#243026);box-shadow:inset 0 1px 3px #000b,0 0 0 1px #1a241b,0 1px #dcc47f25}
.battle-timebar .timebar-track:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#1025194a calc(10% - 1px),#1025194a 10%);box-shadow:inset 0 1px #ffefd24d}
.battle-timebar .timebar-fill{position:absolute;inset:1px;display:block;border-radius:2px;transform-origin:left center;transform:scaleX(clamp(0,var(--time-remaining,1),1));background:linear-gradient(180deg,var(--timebar-light),var(--timebar-mid) 42%,var(--timebar-dark));box-shadow:0 0 8px var(--timebar-glow);transition:transform 200ms linear}
.battle-board>.battle-header>.battle-timebar[data-phase="preparation"]{--timebar-light:#bfebe1;--timebar-mid:#76b3ac;--timebar-dark:#346a67;--timebar-glow:#98ddd650;color:#c5ddcf}
.battle-board>.battle-header>.battle-timebar.is-warning{--timebar-light:#ffe2a2;--timebar-mid:#d5a454;--timebar-dark:#8d5729;--timebar-glow:#f8b85b70;color:#f2ce90}
.battle-timebar.is-warning .timebar-track{border-color:#cfaa67}
.battle-timebar.is-warning .timebar-caption>[data-timebar-readout]{color:#ffe0a4}
.battle-board>.battle-header>.battle-timebar.is-critical{--timebar-light:#ffcfb8;--timebar-mid:#df8c63;--timebar-dark:#9c4737;--timebar-glow:#ef936a80;color:#ffc2a2}
.battle-timebar.is-critical .timebar-track{border-color:#d39d73;animation:timebar-alert-glow 1s ease-in-out infinite}
.battle-timebar.is-critical .timebar-caption>[data-timebar-readout]{color:#ffd4bf}
.battle-board>.battle-header>.battle-timebar:is([data-phase="replay"],[data-phase="finished"],.is-animating){--timebar-light:#a2ad98;--timebar-mid:#667b63;--timebar-dark:#3e5141;--timebar-glow:transparent;color:#a8b4a1}
.battle-timebar:is([data-phase="replay"],[data-phase="finished"],.is-animating) .timebar-track{border-color:#827855;animation:none;box-shadow:inset 0 1px 3px #000b,0 0 0 1px #1a241b}
.battle-timebar:is([data-phase="replay"],[data-phase="finished"],.is-animating) .timebar-caption>[data-timebar-readout]{color:#bdc5b0}
.battle-timebar:is([data-phase="replay"],[data-phase="finished"],.is-animating,.is-resetting) .timebar-fill{transition:none}
@keyframes timebar-alert-glow{50%{box-shadow:inset 0 1px 3px #000b,0 0 0 1px #593b27,0 0 9px #ed946360}}
@media(max-width:1000px) and (min-width:761px){
 .battle-board>.battle-header{gap:14px}
 .battle-board>.battle-header>div:first-child{flex-basis:150px;max-width:150px}
}
@media(max-width:760px){
 .battle-page.battle-board{grid-template-rows:48px var(--hand-height) minmax(0,1fr) var(--hand-height) 250px 24px}
 .battle-board>.battle-header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:28px 18px;gap:2px 8px;height:48px;min-height:48px;overflow:visible}
 .battle-board>.battle-header>div:first-child{grid-column:1;grid-row:1;width:auto;max-width:none}
 .battle-board>.battle-header>div:first-child h2{font-size:13px;line-height:1.1;margin:0 0 2px}
 .battle-board>.battle-header>div:first-child>small{font-size:7px;line-height:1.2;margin:0}
 .battle-board>.battle-header>.battle-header-right{grid-column:2;grid-row:1;gap:5px;height:28px;align-self:center}
 .battle-board>.battle-header>.battle-header-right>[data-act="rules"]{min-height:28px;height:28px}
 .battle-board>.battle-header>.battle-timebar{grid-column:1/-1;grid-row:2;align-self:stretch;justify-content:center;min-width:0;padding:0 2px;gap:2px}
 .battle-timebar .timebar-caption{font-size:7px;line-height:1;letter-spacing:.15px}
 .battle-timebar .timebar-caption>[data-timebar-readout]{font-size:8px;line-height:1}
 .battle-timebar .timebar-track{height:6px;border-radius:4px}
 .battle-timebar .timebar-fill{inset:0;border-radius:3px}
}
@media(max-width:760px) and (max-height:710px){
 /* Recover the timer row's 18px from the two hands, keeping camp space intact. */
 .battle-page.battle-board{--hand-height:97px}
}
@media(prefers-reduced-motion:reduce){
 .battle-timebar .timebar-fill{transition:none}
 .battle-timebar.is-critical .timebar-track{animation:none}
}