/* Rows presenter (present-rows.js) on the cells board: the level meter in a band above the field (a label, the level
   digit, one pip per level), the sky edge (a ledge on the line between the sky and the open rows) and the curtain of sky
   tiles over the closed rows of a quiet board (idle, resume). 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:
     --rw-h (band height), --rw-gap, --rw-ease, --rw-bg / --rw-ink (the meter plate), --rw-label (label ink),
     --rw-pip / --rw-pip-on / --rw-pip-ring (pips not reached / reached / the current one), --rw-edge (the ledge),
     --rw-font (the meter's font; default the display font).
   present-rows.js sets --rw-t (the pop) and --rw-edge-t (the ledge's step) from board.T (turbo, reduced motion). The
   band's size is the same formula as present-rows.js bandOf(cell): keep the two in step. */
.cells-board{--rw-h:clamp(18px,calc(var(--cell)*.42),44px);--rw-gap:max(6px,calc(var(--cell)*.12))}
/* room for the band outside the field (declared to the board's layout by the reserve hook) */
.cells-board.rw-reserve{margin-top:calc(var(--rw-h) + var(--rw-gap))}

/* ---- the level meter: at the left of the band above the field ---- */
.cells-board .l-rows-strip>.rws{left:0;top:auto;bottom:100%;height:var(--rw-h);margin-bottom:var(--rw-gap);display:flex;align-items:center;gap:calc(var(--rw-h)*.24);
  padding:0 calc(var(--rw-h)*.3);border-radius:calc(var(--rw-h)*.18);background:var(--rw-bg,rgba(0,0,0,.6));color:var(--rw-ink,#fff);pointer-events:none;white-space:nowrap;
  font-family:var(--rw-font,var(--display,var(--ui,system-ui)))}
.cells-board .rw-t{font-size:max(8px,calc(var(--rw-h)*.36));line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--rw-label,var(--rw-ink,#fff))}
.cells-board .rw-n{display:inline-block;min-width:1ch;font-size:max(11px,calc(var(--rw-h)*.62));line-height:1;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.cells-board .rw-n.go,.cells-board .rw-pip.go{animation:rw-pop var(--rw-t,.36s) var(--rw-ease,steps(4,end))}
.cells-board .rw-ps{display:flex;align-items:center;gap:calc(var(--rw-h)*.12)}
.cells-board .rw-pip{position:relative;display:grid;place-items:center;width:calc(var(--rw-h)*.36);height:calc(var(--rw-h)*.36);background:var(--rw-pip,rgba(255,255,255,.22))}
.cells-board .rw-pip>*{width:100%;height:100%}
.cells-board .rw-pip::after{content:"";position:absolute;inset:0;background:var(--rw-pip-on,#7CFF6B);opacity:0;transition:opacity var(--rw-t,.36s) linear}
.cells-board .rw-pip.on::after{opacity:1}
.cells-board .rw-pip.now{box-shadow:0 0 0 2px var(--rw-pip-ring,var(--rw-ink,#fff))}

/* ---- the sky edge: a ledge on the line between the sky and the open rows; it steps up when a row opens ---- */
.cells-board .l-rows-edge{overflow:hidden;border-radius:var(--window-radius,10px)}
.cells-board .rw-edge{left:0;right:0;width:100%;height:max(2px,calc(var(--cell)*.06));margin-top:calc(max(2px,var(--cell)*.06)/-2);background:var(--rw-edge,rgba(255,255,255,.55));
  transition:transform var(--rw-edge-t,.3s) var(--rw-ease,steps(4,end)),opacity var(--rw-edge-t,.3s) linear}
.cells-board .rw-edge.off{opacity:0}

/* ---- the curtain: sky tiles over the closed rows of a quiet board (drawn by the game's own symbol html) ---- */
.cells-board .l-rows-sky{z-index:0}
.cells-board .l-rows-sky>.rw-c{display:flex;align-items:center;justify-content:center;background:var(--rw-sky-bg,var(--window-bg,#000))}
.cells-board .l-rows-sky .face{position:relative;width:var(--sym-size,88%);height:var(--sym-size,88%)}
.cells-board .l-rows-sky .face>.sym{position:relative;width:100%;height:100%}
.cells-board .l-rows-sky .sym img{position:absolute;inset:0;width:100%;height:100%;display:block}

@keyframes rw-pop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
/* reduced motion: nothing pops or steps; changes fade (≤ 120 ms) */
body.still .cells-board .rw-n.go,body.still .cells-board .rw-pip.go{animation:none}
body.still .cells-board .rw-edge{transition:opacity .12s linear}
@media (prefers-reduced-motion:reduce){
  .cells-board .rw-n.go,.cells-board .rw-pip.go{animation:none}
  .cells-board .rw-edge{transition:opacity .12s linear}
}