/* Level presenter (present-level.js) on the cells board: the level strip (bubbles 1–4, the gravity arrow, the promotion
   panel of free spins), the window tint per level, the window light (from the top; from the bottom from level 3) and
   the twin glow badges. Link after cells.css. Animated properties are transform and opacity only; the bubbles' fill,
   the tint and the light are static paint whose opacity changes. The game's skin may restyle every part; its colours
   come from present-level.js opts (inline custom properties) or from these variables:
     --lv-h (strip height), --lv-gap, --lv-ease, --lv-idle-bg / --lv-idle-ink (bubbles not reached), --lv-ring,
     --lv-panel-bg / --lv-panel-ink, --lv-glow (twin glow), --lv-light / --lv-shade / --lv-sweep (window light),
     --lv-wash / --lv-edge (strength of the window tint: its wash and its inner glow, percentages of the level colour),
     --lv-tag-bg / --lv-tag-ink (optional twin tag); per element --lvc (level colour) and --lvi (its digit ink).
   present-level.js sets --lv-t (pop) and --lv-flip (crossfades, the arrow) from board.T (turbo, reduced motion). */
/* the strip's height: .42 of a cell (24 px at least), but never more than the field's width can carry in one row (the
   bubbles, the arrow and the promotion panel need about 11.5 strip heights) */
.cells-board{--lv-h:max(18px,min(max(24px,calc(var(--cell)*.42)),calc(var(--cell)*var(--cols,6)/11.5)));--lv-gap:max(6px,calc(var(--cell)*.13))}
/* room for the strip outside the field (opts.reserve) */
.cells-board.lv-reserve{margin-top:calc(var(--lv-h) + var(--lv-gap))}
.cells-board.lv-reserve.lv-below{margin-top:0;margin-bottom:calc(var(--lv-h) + var(--lv-gap))}

/* ---- the strip: above the field (default), below it, or over its top edge ---- */
.cells-board .l-lv-strip>.lvs{left:0;right:0;top:auto;bottom:100%;height:var(--lv-h);margin-bottom:var(--lv-gap);display:flex;align-items:center;justify-content:space-between;gap:calc(var(--lv-h)*.3);pointer-events:none}
.cells-board .l-lv-strip>.lvs[data-at="below"]{bottom:auto;top:100%;margin:var(--lv-gap) 0 0}
.cells-board .l-lv-strip>.lvs[data-at="inside"]{bottom:auto;top:calc(var(--cell)*.05);left:calc(var(--cell)*.05);right:calc(var(--cell)*.05);margin:0}
.cells-board .lvm{display:flex;align-items:center;gap:calc(var(--lv-h)*.18);flex:0 0 auto}
/* a bubble: its number on the idle colour; reached = filled with the level colour; current = larger, ringed */
.cells-board .lvb{position:relative;width:var(--lv-h);height:var(--lv-h);border-radius:50%;display:grid;place-items:center;
  background:var(--lv-idle-bg,#1D1733);color:var(--lv-idle-ink,#EDE8FF);box-shadow:inset 0 0 0 2px var(--lv-ring,rgba(255,255,255,.32));
  transition:transform var(--lv-t,.42s) var(--lv-ease,cubic-bezier(.3,1.6,.5,1))}
.cells-board .lvb-fill{position:absolute;inset:0;border-radius:inherit;background:var(--lvc,#C39BFF);opacity:0;transition:opacity var(--lv-t,.42s) ease-out}
.cells-board .lvb-art{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cells-board .lvb-art>*{width:100%;height:100%}
.cells-board .lvb>b{position:relative;font:800 calc(var(--lv-h)*.54)/1 var(--display,var(--ui,system-ui));font-variant-numeric:tabular-nums}
.cells-board .lvb.on .lvb-fill{opacity:1}
.cells-board .lvb.on{color:var(--lvi,#17112B)}
.cells-board .lvb.now{transform:scale(1.14);box-shadow:inset 0 0 0 2px var(--lvi,#17112B),0 0 0 2px var(--lvc,#C39BFF)}
.cells-board .lvb.go{animation:lv-squash var(--lv-t,.42s) var(--lv-ease,cubic-bezier(.3,1.6,.5,1))}
/* the gravity arrow: points down; up from level 3 (a half turn) */
.cells-board .lva{width:var(--lv-h);height:var(--lv-h);display:grid;place-items:center;border-radius:50%;background:var(--lv-idle-bg,#1D1733);color:var(--lv-idle-ink,#EDE8FF);
  box-shadow:inset 0 0 0 2px var(--lv-ring,rgba(255,255,255,.32));transition:transform var(--lv-flip,.62s) var(--lv-ease,cubic-bezier(.3,1.6,.5,1))}
.cells-board .lva>svg{width:68%;height:68%;display:block}
.cells-board .lva.up{transform:rotate(180deg)}
/* the promotion panel (free spins): the lows in promotion order, promoted ones drawn as their twins */
.cells-board .lvp{display:flex;align-items:center;gap:calc(var(--lv-h)*.14);height:100%;min-width:0;flex:0 1 auto;padding:0 calc(var(--lv-h)*.22) 0 calc(var(--lv-h)*.36);
  border-radius:999px;background:var(--lv-panel-bg,var(--lv-idle-bg,#1D1733));color:var(--lv-panel-ink,var(--lv-idle-ink,#EDE8FF));box-shadow:inset 0 0 0 2px var(--lv-ring,rgba(255,255,255,.32))}
.cells-board .lvp[hidden]{display:none}
.cells-board .lvp-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 calc(var(--lv-h)*.4)/1 var(--ui,system-ui)}
.cells-board .lvp-s{position:relative;flex:0 1 auto;min-width:0;width:calc(var(--lv-h)*.82);height:calc(var(--lv-h)*.82);opacity:.4;transition:opacity var(--lv-t,.42s) ease-out}
.cells-board .lvp-s .sym{position:relative;width:100%;height:100%}
.cells-board .lvp-s.on{opacity:1}
.cells-board .lvp-s.next::after{content:"";position:absolute;inset:-12%;border-radius:50%;border:2px dashed var(--lv-panel-ink,var(--lv-idle-ink,#EDE8FF));opacity:.85}
.cells-board .lvp-s.go{animation:lv-squash var(--lv-t,.42s) var(--lv-ease,cubic-bezier(.3,1.6,.5,1))}

/* ---- the window tint (one layer per level, crossfaded) and the window light ---- */
.cells-board .l-lv-tint>.lvt{width:100%;height:100%;border-radius:var(--window-radius,10px);opacity:0;transition:opacity var(--lv-flip,.62s) ease;
  background:color-mix(in srgb,var(--lvc,#C39BFF) var(--lv-wash,5%),transparent);box-shadow:inset 0 0 calc(var(--cell)*.5) color-mix(in srgb,var(--lvc,#C39BFF) var(--lv-edge,32%),transparent)}
.cells-board .l-lv-tint>.lvt.on{opacity:1}
.cells-board .l-lv-light>.lvl{width:100%;height:100%;border-radius:var(--window-radius,10px);overflow:hidden}
.cells-board .lvl>i{position:absolute;inset:0;display:block}
.cells-board .lvl-top,.cells-board .lvl-bot{transition:opacity var(--lv-flip,.62s) ease}
.cells-board .lvl-top{background:linear-gradient(180deg,var(--lv-light,rgba(255,250,235,.15)),transparent 38%,transparent 66%,var(--lv-shade,rgba(16,8,40,.16)))}
.cells-board .lvl-bot{background:linear-gradient(0deg,var(--lv-light,rgba(255,250,235,.15)),transparent 38%,transparent 66%,var(--lv-shade,rgba(16,8,40,.16)));opacity:0}
.cells-board .lvl.up .lvl-top{opacity:0}
.cells-board .lvl.up .lvl-bot{opacity:1}
/* the band of light that travels when the gravity turns (down: to level 3; up: back) */
.cells-board .lvl>.lvl-sweep{top:-34%;bottom:auto;height:34%;opacity:0;background:linear-gradient(180deg,transparent,var(--lv-sweep,rgba(255,250,235,.2)),transparent)}
.cells-board .lvl-sweep.down{animation:lv-sweep-down var(--lv-flip,.62s) ease-in-out}
.cells-board .lvl-sweep.up{animation:lv-sweep-up var(--lv-flip,.62s) ease-in-out}

/* ---- twin badges: a glow behind the symbol (rides with its cell), an optional tag on top ---- */
.cells-board .cell>.badge.b-lv-twin{inset:0;z-index:-1;min-width:0;padding:0;background:none;border-radius:0}
.cells-board .lvt-glow{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,var(--lv-glow,rgba(255,236,170,.6)),transparent 68%);will-change:opacity;animation:lv-breathe 1.8s ease-in-out infinite alternate}
.cells-board .b-lv-twin.new .lvt-glow{animation:lv-glow-in var(--lv-t,.42s) ease-out,lv-breathe 1.8s ease-in-out var(--lv-t,.42s) infinite alternate}
.cells-board .cell>.badge.b-lv-tag{right:auto;left:4%;top:4%;background:var(--lv-tag-bg,#2A2350);color:var(--lv-tag-ink,#FFF3C4)}
/* floaters of the presenter (promotion, top level): on the field's top row (its bottom row when the step's wins are
   there), away from the win amounts */
.cells-board .cs-float.lvf,.cells-board .cs-float.lvf-pr{font-size:calc(var(--cell)*.24)}

/* short landscape screens (a phone on its side): no height to spare above the field, width aplenty. The strip goes
   beside the field instead: the bubbles and the arrow in a column on its left, the promotion panel (its slots only)
   on its right; the board keeps the room on both sides. The strip's height is capped by the field's height. */
@media (orientation:landscape) and (max-height:500px){
  .cells-board{--lv-h:max(16px,min(max(24px,calc(var(--cell)*.42)),calc(var(--cell)*var(--rows,6)/5.8)))}
  .cells-board.lv-reserve,.cells-board.lv-reserve.lv-below{margin:0 calc(var(--lv-h) + var(--lv-gap))}
  .cells-board .l-lv-strip>.lvs:not([data-at="inside"]){top:0;bottom:0;left:calc(-1*(var(--lv-h) + var(--lv-gap)));right:calc(-1*(var(--lv-h) + var(--lv-gap)));height:auto;margin:0}
  .cells-board .lvs:not([data-at="inside"]) .lvm{flex-direction:column}
  .cells-board .lvs:not([data-at="inside"]) .lvp{flex-direction:column;flex:0 0 auto;width:var(--lv-h);height:auto;padding:calc(var(--lv-h)*.3) 0}
  .cells-board .lvs:not([data-at="inside"]) .lvp-t{display:none}
}

@keyframes lv-squash{0%{transform:scale(1.18,.8)}45%{transform:scale(.94,1.1)}100%{transform:none}}
@keyframes lv-sweep-down{0%{opacity:0;transform:translateY(0)}20%,80%{opacity:1}100%{opacity:0;transform:translateY(394%)}}
@keyframes lv-sweep-up{0%{opacity:0;transform:translateY(394%)}20%,80%{opacity:1}100%{opacity:0;transform:translateY(0)}}
@keyframes lv-breathe{from{opacity:.55}to{opacity:1}}
@keyframes lv-glow-in{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:none}}
@keyframes lv-fade{from{opacity:0}to{opacity:1}}

/* reduced motion: nothing pops, turns, travels or breathes; changes fade in ≤ 120 ms */
body.still .cells-board .lvb,body.still .cells-board .lva{transition:none}
body.still .cells-board .lvb.now{transform:none}
body.still .cells-board .lvb.go,body.still .cells-board .lvp-s.go{animation:lv-fade .12s linear}
body.still .cells-board .lvb-fill,body.still .cells-board .lvp-s,body.still .cells-board .l-lv-tint>.lvt,body.still .cells-board .lvl-top,body.still .cells-board .lvl-bot{transition-duration:.12s}
body.still .cells-board .lvl>.lvl-sweep{display:none}
body.still .cells-board .lvt-glow{animation:none}
body.still .cells-board .b-lv-twin.new .lvt-glow{animation:lv-fade .12s linear}
@media (prefers-reduced-motion:reduce){
  .cells-board .lvb,.cells-board .lva{transition:none}
  .cells-board .lvb.now{transform:none}
  .cells-board .lvb.go,.cells-board .lvp-s.go{animation:lv-fade .12s linear}
  .cells-board .lvb-fill,.cells-board .lvp-s,.cells-board .l-lv-tint>.lvt,.cells-board .lvl-top,.cells-board .lvl-bot{transition-duration:.12s}
  .cells-board .lvl>.lvl-sweep{display:none}
  .cells-board .lvt-glow{animation:none}
  .cells-board .b-lv-twin.new .lvt-glow{animation:lv-fade .12s linear}
}