/* Battle reel («01 · Мягкое разделение»): one track, one strip of team blocks, one colour layer (the bar).
   All geometry comes from CSS variables written by dist/battle-reel.js on .battle-slot; the defaults below are the
   0 ms state (the bar) so the first paint already matches. The slot height is reserved: nothing around it moves. */

.battle-slot{--fill-orange:linear-gradient(180deg,#ff8b40,#ff6a20 55%,#fa5c13);--fill-teal:linear-gradient(180deg,#22c6cc,#00afb7 55%,#009ea7);
  --h:36px;--cw:80px;--g:0px;--pitch:80px;--cr:0px;--ov:1;--seam:0;--rim:0;--shadow:0;--split:var(--orange,50%);--fade:0px;--edge:30px;--card-h:92px;
  height:126px;position:relative;margin:9px -5px 0;isolation:isolate}

/* soft shadow of the bar, outside the clip so it is not cut; fades with the colour layer */
.battle-slot:before{content:'';position:absolute;left:50%;top:50%;width:var(--bar-w,calc(100% - 60px));height:var(--h);transform:translate(-50%,-50%);border-radius:var(--end-r,calc(var(--h) / 2));
  box-shadow:0 5px 16px #e9884833,0 1px 3px #b4703a1f;opacity:var(--ov);pointer-events:none}

.battle-reel{position:absolute;top:0;bottom:0;left:50%;width:100%;transform:translateX(-50%);overflow:hidden;pointer-events:none;
  clip-path:var(--clip,inset(45px 30px 45px 30px round 18px));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}
.battle-strip{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:var(--g);will-change:transform;transform:translate3d(var(--edge),0,0)}

/* ---- blocks: painted with exactly the bar's gradients (shared variables), so the bar and the blocks are one colour */
.battle-card{flex:none;position:relative;width:var(--cw);height:var(--h);border-radius:var(--cr);background:var(--fill-orange);
  box-shadow:0 4px 10px rgb(122 78 36 / calc(.12 * var(--shadow))),0 1px 2px rgb(122 78 36 / calc(.08 * var(--shadow)))}
.battle-card.teal{background:var(--fill-teal)}
/* the bar's white edge and top light, on every block (fades in as the bar dissolves into blocks) */
.battle-card:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--rim);
  box-shadow:inset 0 0 0 2.5px rgb(255 255 255 / .9),inset 0 4px 6px rgb(255 255 255 / .22)}

/* winner after the stop: ring and soft lift, no scale */
.battle-card.is-winner{transition:box-shadow .35s ease}
.is-settled .battle-card.is-winner{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--team),0 6px 16px color-mix(in srgb,var(--team) 34%,transparent)}


/* ---- colour layer: the bar. Exact share during bets; during the morph its boundary moves onto the card seam -- */
.battle-probability{position:absolute;left:var(--edge);top:50%;width:var(--bar-w,calc(100% - 60px));height:var(--h);transform:translateY(-50%);border-radius:var(--end-r,calc(var(--h) / 2));display:flex;overflow:hidden;opacity:var(--ov);z-index:2}
.battle-probability:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px rgb(255 255 255 / .9),inset 0 4px 6px rgb(255 255 255 / .22);pointer-events:none}
.battle-probability i{display:block;height:100%}
.battle-probability .orange-fill{width:var(--orange,50%);flex:none;background:var(--fill-orange);transition:width .65s cubic-bezier(.22,.7,.3,1)}
.battle-probability .teal-fill{flex:1;background:var(--fill-teal)}
.battle-slot.is-morphing .orange-fill{width:var(--split);transition:none}
.battle-probability.is-empty .orange-fill,.battle-probability.is-empty .teal-fill{background:#eeeae6}
.battle-seams{position:absolute;inset:0;pointer-events:none}
.battle-seams i{position:absolute;top:0;bottom:0;left:calc(var(--j) * var(--pitch) - var(--g) / 2);width:1px;margin-left:-.5px;background:rgb(255 255 255 / .8);opacity:var(--seam)}

/* ---- pointer: fixed above the cards, never over a face; its stem shortens as the bar grows -------------------- */
.battle-pointer{position:absolute;left:50%;top:0;z-index:5;transform:translateX(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:15px solid #39343e;filter:drop-shadow(0 1px 1px white)}
.battle-pointer:after{content:'';position:absolute;top:1px;left:-1px;width:2px;height:max(0px,calc((126px - var(--h)) / 2 - 17px));background:#fff9}

@media(max-width:760px){
  .battle-slot{height:112px;margin:5px -4px 0}
  .battle-pointer{top:4px;border-left-width:7px;border-right-width:7px;border-top-width:12px}
  .battle-pointer:after{height:max(0px,calc((112px - var(--h)) / 2 - 18px))}
}

/* QA only (?qa=1&battleQA=1): freeze the transition on its keyframes or replay it slowly */
.battle-qa-panel{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 16px 14px;padding:8px 10px;border:1px dashed #d9cfc6;border-radius:10px;font-size:11px;color:#8a7f77}
.battle-qa-panel b{margin-right:4px;color:#5a4f48}
.battle-qa-panel button{border:1px solid #e7ded5;background:#fff;border-radius:7px;padding:4px 8px;font-size:11px;color:#4d4540}