/* Charge meter (present-meter.js) on the cells board: a vertical meter beside the grid (side) or a bar above it (top);
   "auto" picks side on wide screens and top on narrow / portrait ones, at the shell's breakpoint. Link after cells.css.
   The meter fills by transform (scaleY / scaleX of --pm-f, over --pm-ms with --pm-ease) and glows by opacity only; the
   host keeps room for it with a margin. Tokens (a skin may set any; present-meter.js sets the colours given in opts):
   --pm-fill, --pm-fill-hi, --pm-track, --pm-line, --pm-plate, --pm-ink, --pm-mark, --pm-glow, --pm-ante, --pm-sprout,
   --pm-mult-bg, --pm-mult-ink, --pm-font, --pm-w (side width), --pm-h (bar height), --pm-gap, --pm-room-side,
   --pm-room-top. Text sits on --pm-plate (dark by default) in --pm-ink: a skin that changes either keeps ≥ 4.5:1. */
.cells-board.pm-host{--pm-w:max(14px,calc(var(--cell)*.3));--pm-h:max(22px,calc(var(--cell)*.42));--pm-gap:calc(var(--cell)*.08)}
.cells-board.pm-host.pm-side{margin-inline:var(--pm-room-side,calc(var(--pm-w) + var(--pm-gap) + var(--cell)*.02))}
.cells-board.pm-host.pm-top{margin-top:var(--pm-room-top,calc(var(--pm-h) + var(--pm-gap)))}

/* ---- side (vertical): mult chip over the head of the bar, the number and the free-spin chips under it ---- */
.cells-board .cs-layer>.pm-meter{left:auto;top:0;bottom:0;right:calc(100% + var(--pm-gap));width:var(--pm-w);display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--cell)*.06);
  font:800 max(11px,calc(var(--cell)*.17))/1.1 var(--pm-font,var(--ui,system-ui));color:var(--pm-ink,var(--ink,#fff));font-variant-numeric:tabular-nums}
.cells-board.pm-right .cs-layer>.pm-meter{right:auto;left:calc(100% + var(--pm-gap))}
.pm-meter .pm-cap{flex:0 0 auto;width:100%;aspect-ratio:1;display:grid;place-items:center}
.pm-meter .pm-cap>*{width:100%;height:100%}
.pm-meter .pm-name{display:none}
.pm-meter .pm-bar{position:relative;flex:1 1 auto;min-height:0}
.pm-meter .pm-track{position:absolute;inset:0;overflow:hidden;border-radius:999px;background:var(--pm-track,rgba(0,0,0,.55));box-shadow:inset 0 0 0 1.5px var(--pm-line,var(--line,rgba(255,255,255,.3)))}
.pm-meter .pm-fill,.pm-meter .pm-ante{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform}
.pm-meter .pm-fill{background:linear-gradient(0deg,var(--pm-fill,var(--primary,#8fc43a)),var(--pm-fill-hi,var(--primary-hi,#cdeb8f)));transform:scaleY(var(--pm-f,0));
  transition:transform var(--pm-ms,0ms) var(--pm-ease,cubic-bezier(.34,1.56,.64,1))}
/* the ante start: a stripe over the part of the fill the spin started with */
.pm-meter .pm-ante{background:repeating-linear-gradient(135deg,var(--pm-ante,rgba(255,255,255,.4)) 0 3px,transparent 3px 8px);transform:scaleY(var(--pm-t,0));transition:transform var(--pm-ms,0ms) linear}
/* the marks: a notch with its number on a plate; the mark and the loop light up once reached */
.pm-meter .pm-mark{position:absolute;z-index:2;left:-2px;right:-2px;bottom:calc(var(--pm-at)*100%);height:2px;margin-bottom:-1px;background:var(--pm-mark,rgba(255,255,255,.75))}
.pm-meter .pm-mark[data-at="loop"]{bottom:auto;top:0;margin:0}
.pm-meter .pm-mark>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:.08em .22em;border-radius:5px;font-size:max(10px,calc(var(--cell)*.13));
  background:var(--pm-plate,rgba(8,12,8,.82));color:var(--pm-ink,var(--ink,#fff));box-shadow:0 0 0 1px var(--pm-mark,rgba(255,255,255,.75))}
.pm-meter .pm-mark>span::after{content:"";position:absolute;inset:-3px;border-radius:7px;box-shadow:0 0 calc(var(--cell)*.12) var(--pm-glow,var(--accent,#f2a541));opacity:0;transition:opacity .3s}
.pm-meter.pm-lit-mark .pm-mark[data-at="mark"]>span::after,.pm-meter.pm-lit-loop .pm-mark[data-at="loop"]>span::after{opacity:1}
/* a steady glow while ×mult is awake (or the next mark is near); a one-shot pulse when a mark is reached */
.pm-meter .pm-glow{position:absolute;inset:-3px;border-radius:999px;box-shadow:0 0 calc(var(--cell)*.2) var(--pm-glow,var(--accent,#f2a541)),inset 0 0 calc(var(--cell)*.1) var(--pm-glow,var(--accent,#f2a541));opacity:0;transition:opacity .4s;will-change:opacity}
.pm-meter.pm-near .pm-glow{opacity:.4}
.pm-meter.pm-awake .pm-glow{opacity:.85}
.pm-meter.pm-hit .pm-glow{animation:pm-pulse .6s ease-out}
.pm-meter.pm-wrap .pm-glow,.pm-meter.pm-wake .pm-glow{animation:pm-pulse .9s ease-out}
.pm-meter .pm-mult{position:absolute;z-index:3;left:50%;top:4%;transform:translateX(-50%);padding:.12em .3em;border-radius:6px;white-space:nowrap;font-size:max(12px,calc(var(--cell)*.2));
  background:var(--pm-mult-bg,var(--primary-hi,#e6f5b0));color:var(--pm-mult-ink,var(--bg,#10261a));animation:pm-fade .3s ease-out}
.pm-meter .pm-num{flex:0 0 auto;align-self:center;min-width:100%;padding:.1em .15em;border-radius:6px;text-align:center;font-size:max(12px,calc(var(--cell)*.2));background:var(--pm-plate,rgba(8,12,8,.82))}
.pm-meter .pm-chips{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px}
.pm-meter:not(.pm-free) .pm-chips{display:none}
.pm-meter .pm-chips>span{min-width:100%;padding:.08em .15em;border-radius:6px;text-align:center;white-space:nowrap;font-size:max(10px,calc(var(--cell)*.14));background:var(--pm-plate,rgba(8,12,8,.82));box-shadow:inset 0 0 0 1px var(--pm-line,var(--line,rgba(255,255,255,.3)))}

/* ---- top (bar): caption and number, the bar, the free-spin chips; same parts turned on their side. The bar keeps at
   least 40 % of the row (the caption gives way first, cut with an ellipsis); in a free spin the caption steps aside for
   the chips (the cap still names the meter) ---- */
.cells-board.pm-top .cs-layer>.pm-meter{top:auto;left:0;right:0;bottom:calc(100% + var(--pm-gap));width:auto;height:var(--pm-h);flex-direction:row;align-items:center}
.cells-board.pm-top .pm-cap{width:auto;height:100%}
.cells-board.pm-top .pm-name{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.1em .3em;border-radius:6px;background:var(--pm-plate,rgba(8,12,8,.82))}
.cells-board.pm-top .pm-meter.pm-free .pm-name{display:none}
.cells-board.pm-top .pm-bar{flex:1 1 0;min-width:40%;align-self:stretch;margin:calc(var(--pm-h)*.12) 0}
.cells-board.pm-top .pm-fill,.cells-board.pm-top .pm-ante{transform-origin:0 50%}
.cells-board.pm-top .pm-fill{background:linear-gradient(90deg,var(--pm-fill,var(--primary,#8fc43a)),var(--pm-fill-hi,var(--primary-hi,#cdeb8f)));transform:scaleX(var(--pm-f,0))}
.cells-board.pm-top .pm-ante{transform:scaleX(var(--pm-t,0))}
.cells-board.pm-top .pm-mark{left:calc(var(--pm-at)*100%);right:auto;top:-2px;bottom:-2px;width:2px;height:auto;margin:0 0 0 -1px}
.cells-board.pm-top .pm-mark[data-at="loop"]{left:auto;right:0;margin:0}
.cells-board.pm-top .pm-mark[data-at="loop"]>span{left:auto;right:0;transform:translateY(-50%)}
.cells-board.pm-top .pm-mult{top:50%;left:auto;right:calc(var(--pm-h)*1.2);transform:translateY(-50%)}
.cells-board.pm-top .pm-num{min-width:2.2em;align-self:center;white-space:nowrap}
.cells-board.pm-top .pm-chips{flex-direction:row}
.cells-board.pm-top .pm-chips>span{min-width:0;padding:.1em .3em}

/* ---- auto: side on wide screens, top on narrow / portrait ones (the shell's breakpoint; the same rules as above) ---- */
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .cells-board.pm-host.pm-auto{margin-inline:var(--pm-room-side,calc(var(--pm-w) + var(--pm-gap) + var(--cell)*.02))}
}
@media (max-width:860px),(max-aspect-ratio:4/5){
  .cells-board.pm-host.pm-auto{margin-top:var(--pm-room-top,calc(var(--pm-h) + var(--pm-gap)))}
  .cells-board.pm-auto .cs-layer>.pm-meter{top:auto;left:0;right:0;bottom:calc(100% + var(--pm-gap));width:auto;height:var(--pm-h);flex-direction:row;align-items:center}
  .cells-board.pm-auto .pm-cap{width:auto;height:100%}
  .cells-board.pm-auto .pm-name{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.1em .3em;border-radius:6px;background:var(--pm-plate,rgba(8,12,8,.82))}
  .cells-board.pm-auto .pm-meter.pm-free .pm-name{display:none}
  .cells-board.pm-auto .pm-bar{flex:1 1 0;min-width:40%;align-self:stretch;margin:calc(var(--pm-h)*.12) 0}
  .cells-board.pm-auto .pm-fill,.cells-board.pm-auto .pm-ante{transform-origin:0 50%}
  .cells-board.pm-auto .pm-fill{background:linear-gradient(90deg,var(--pm-fill,var(--primary,#8fc43a)),var(--pm-fill-hi,var(--primary-hi,#cdeb8f)));transform:scaleX(var(--pm-f,0))}
  .cells-board.pm-auto .pm-ante{transform:scaleX(var(--pm-t,0))}
  .cells-board.pm-auto .pm-mark{left:calc(var(--pm-at)*100%);right:auto;top:-2px;bottom:-2px;width:2px;height:auto;margin:0 0 0 -1px}
  .cells-board.pm-auto .pm-mark[data-at="loop"]{left:auto;right:0;margin:0}
  .cells-board.pm-auto .pm-mark[data-at="loop"]>span{left:auto;right:0;transform:translateY(-50%)}
  .cells-board.pm-auto .pm-mult{top:50%;left:auto;right:calc(var(--pm-h)*1.2);transform:translateY(-50%)}
  .cells-board.pm-auto .pm-num{min-width:2.2em;align-self:center;white-space:nowrap}
  .cells-board.pm-auto .pm-chips{flex-direction:row}
  .cells-board.pm-auto .pm-chips>span{min-width:0;padding:.1em .3em}
}

/* ---- a sprout: the cell's overlay grows from its bottom edge, then fades (the wild under it stays) ---- */
.cells-board .badge.b-pm-sprout{inset:0;min-width:0;padding:0;border-radius:0;background:none;display:block;z-index:3}
.cells-board .b-pm-sprout>.pm-grow{position:absolute;inset:0;display:block;transform-origin:50% 100%;opacity:0;will-change:transform,opacity;
  animation:pm-grow var(--pm-d,420ms) var(--pm-ease,cubic-bezier(.34,1.56,.64,1)) var(--pm-delay,0ms) both}
.cells-board .b-pm-sprout>.pm-grow>*{position:absolute;inset:0;width:100%;height:100%}
/* no art from the game: a plain stem and a ring in --pm-sprout */
.cells-board .b-pm-sprout>.pm-grow:empty::before{content:"";position:absolute;left:44%;width:12%;top:10%;bottom:0;border-radius:999px;background:var(--pm-sprout,var(--primary,#8fc43a))}
.cells-board .b-pm-sprout>.pm-grow:empty::after{content:"";position:absolute;inset:8%;border-radius:28%;box-shadow:inset 0 0 0 3px var(--pm-sprout,var(--primary,#8fc43a)),0 0 calc(var(--cell)*.15) var(--pm-sprout,var(--primary,#8fc43a))}

@keyframes pm-grow{0%{opacity:1;transform:scaleY(0)}55%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
@keyframes pm-pulse{0%{opacity:1}100%{opacity:0}}
@keyframes pm-fade{from{opacity:0}to{opacity:1}}
@keyframes pm-still{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}

/* reduced motion: the fill jumps, nothing grows or pulses; the sprout overlay and the chip fade (≤ 120 ms) — the
   presenter makes a still sprout last 600 ms, so 20 % of it is 120 ms */
body.still .pm-meter .pm-fill,body.still .pm-meter .pm-ante{transition:none}
body.still .pm-meter .pm-glow,body.still .pm-meter .pm-mark>span::after{transition-duration:.12s}
body.still .pm-meter.pm-hit .pm-glow,body.still .pm-meter.pm-wrap .pm-glow,body.still .pm-meter.pm-wake .pm-glow{animation:none}
body.still .pm-meter .pm-mult{animation:pm-fade .12s linear}
body.still .cells-board .b-pm-sprout>.pm-grow{transform:none;animation:pm-still var(--pm-d,600ms) linear both}
@media (prefers-reduced-motion:reduce){
  .pm-meter .pm-fill,.pm-meter .pm-ante{transition:none}
  .pm-meter .pm-glow,.pm-meter .pm-mark>span::after{transition-duration:.12s}
  .pm-meter.pm-hit .pm-glow,.pm-meter.pm-wrap .pm-glow,.pm-meter.pm-wake .pm-glow{animation:none}
  .pm-meter .pm-mult{animation:pm-fade .12s linear}
  .cells-board .b-pm-sprout>.pm-grow{transform:none;animation:pm-still var(--pm-d,600ms) linear both}
}