/* Lives presenter (present-lives.js) on the cells board: the lives strip (one heart per life up to the maximum, one flag
   per checkpoint of the round) in a band outside the field, free spins only, and the marks of the cells that give a
   life at the end of a free spin (1-UP: lf-up, scatters: lf-pc). Link after cells.css. Animated properties are
   transform and opacity only. The game's skin may restyle every part; its colours come from these variables:
     --lf-h (band height), --lf-gap, --lf-ease, --lf-bg (the strip plate), --lf-heart / --lf-empty (a full / a lost
     heart), --lf-flag / --lf-flag-off (a checkpoint left / used), --lf-mark (the ring on the cells that give a life).
   present-lives.js sets --lf-t (pops and drops) from board.T (turbo, reduced motion). The band's default size is the
   same formula as present-rows.css, so the two strips can share one band (left: the level meter, right: the lives). */
.cells-board{--lf-h:clamp(18px,calc(var(--cell)*.42),44px);--lf-gap:max(6px,calc(var(--cell)*.12))}
.cells-board.lf-reserve{margin-top:calc(var(--lf-h) + var(--lf-gap))}
.cells-board.lf-reserve.lf-below{margin-top:0;margin-bottom:calc(var(--lf-h) + var(--lf-gap))}

/* ---- the strip: at the right of the band above the field (or below it) ---- */
.cells-board .l-lives-strip>.lfs{left:auto;right:0;top:auto;bottom:100%;height:var(--lf-h);margin-bottom:var(--lf-gap);display:flex;align-items:center;gap:calc(var(--lf-h)*.3);
  padding:0 calc(var(--lf-h)*.26);border-radius:calc(var(--lf-h)*.18);background:var(--lf-bg,rgba(0,0,0,.6));pointer-events:none}
.cells-board .l-lives-strip>.lfs[data-at="below"]{bottom:auto;top:100%;margin:var(--lf-gap) 0 0}
.cells-board .l-lives-strip>.lfs[hidden]{display:none}
.cells-board .lf-hs,.cells-board .lf-cps{display:flex;align-items:center;gap:calc(var(--lf-h)*.1)}
.cells-board .lf-h{position:relative;display:block;width:calc(var(--lf-h)*.62);height:calc(var(--lf-h)*.55)}
.cells-board .lf-h>i{position:absolute;inset:0;display:block}
.cells-board .lf-h svg,.cells-board .lf-cp svg{display:block;width:100%;height:100%}
.cells-board .lf-e{color:var(--lf-empty,rgba(255,255,255,.45))}
.cells-board .lf-f{color:var(--lf-heart,#FF4D5E);opacity:0;transition:opacity var(--lf-t,.36s) linear}
.cells-board .lf-h.on .lf-f{opacity:1}
.cells-board .lf-h.in .lf-f{animation:lf-in var(--lf-t,.36s) var(--lf-ease,steps(4,end))}
.cells-board .lf-h.out .lf-f{animation:lf-out var(--lf-t,.36s) var(--lf-ease,steps(4,end))}
.cells-board .lf-cp{display:block;width:calc(var(--lf-h)*.5);height:calc(var(--lf-h)*.56);color:var(--lf-flag-off,rgba(255,255,255,.35));transition:transform var(--lf-t,.36s) var(--lf-ease,steps(4,end))}
.cells-board .lf-cp.on{color:var(--lf-flag,#39FF6A)}
.cells-board .lf-cp:not(.on){transform:translateY(22%) scaleY(.7)}

/* ---- the cells that give a life at the end of a free spin ---- */
.cells-board .cell.lf-up::before,.cells-board .cell.lf-pc::before{content:"";position:absolute;inset:5%;pointer-events:none;border-radius:var(--cluster-radius,16%);
  box-shadow:inset 0 0 0 3px var(--lf-mark,var(--lf-heart,#FF4D5E))}
.cells-board .cell.lf-pc::before{box-shadow:inset 0 0 0 3px var(--lf-mark-pc,var(--lf-flag,#39FF6A))}
.cells-board .cs-float.lff{font-size:calc(var(--cell)*.26)}

@keyframes lf-in{0%{opacity:0;transform:scale(1.8)}100%{opacity:1;transform:none}}
@keyframes lf-out{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(60%) scale(.6)}}
/* reduced motion: nothing pops, drops or lowers; changes fade (≤ 120 ms) */
body.still .cells-board .lf-h.in .lf-f,body.still .cells-board .lf-h.out .lf-f{animation:none}
body.still .cells-board .lf-cp{transition:color .12s linear}
body.still .cells-board .lf-cp:not(.on){transform:none}
@media (prefers-reduced-motion:reduce){
  .cells-board .lf-h.in .lf-f,.cells-board .lf-h.out .lf-f{animation:none}
  .cells-board .lf-cp{transition:color .12s linear}
  .cells-board .lf-cp:not(.on){transform:none}
}