/* Detonations and the Shift (present-area.js) on the cells board: the core pulse badges, the primed cores, the blast
   area (tint, outline, shock rings, the governed glow), the refill ripple, the Shift's rings and ghosts, and the tier
   gauge of the free spins. Link it after cells.css; the skin decorates and places them and sets the colours (or
   present-area.js opts.colors): --ac-hit (area tint), --ac-edge (area outline), --ac-glow / --ac-glow-core (the governed
   glow), --ac-wave (shock ring), --ac-prime (a core about to blow), --ac-pulse (core halo), --ac-shift / --ac-shift-glow
   (the Shift), --ac-gauge-bg / --ac-gauge-ink (caption and odds), --ac-seg-bg / --ac-seg-ink (tiers not reached),
   --ac-seg-on / --ac-seg-on-ink (reached), --ac-seg-ring, --ac-ease, --ac-h (gauge height), --ac-gap. present-area.js
   sets the durations --ac-p, --ac-g, --ac-w, --ac-s, --ac-t, --ac-o, --ac-stagger, --ac-sweep from board.T (turbo,
   reduced motion). Everything that moves is transform or opacity; tints and glows are static paint whose opacity
   changes. With reduced motion nothing pulses, snaps, ripples or rings: marks and overlays fade (≤ 120 ms). A primed
   core keeps its own light (no tint over it); the other cells of the area dim until the refill redraws them. */
.cells-board{--ac-h:max(26px,calc(var(--cell)*.46));--ac-gap:max(6px,calc(var(--cell)*.13))}
.cells-board .cs-layer.l-ac-blast{z-index:1}
.cells-board .cs-layer.l-ac-morph{z-index:2}
.cells-board .cs-layer.l-ac-tier{z-index:3}
/* room for the gauge outside the field (opts.reserve) */
.cells-board.ac-reserve{margin-top:calc(var(--ac-h) + var(--ac-gap))}
.cells-board.ac-reserve.ac-below{margin-top:0;margin-bottom:calc(var(--ac-h) + var(--ac-gap))}

/* ---- a core that will detonate in this spin: a halo behind the symbol that breathes ---- */
.cells-board .cell>.badge.b-ac-core{inset:0;z-index:-1;min-width:0;padding:0;background:none;border-radius:0;display:block}
.cells-board .acc-halo{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,var(--ac-pulse,rgba(255,170,90,.75)) 0,transparent 70%);will-change:opacity,transform;animation:ac-breathe .9s ease-in-out infinite alternate}

/* ---- the detonation: the cores contract, the area is tinted and outlined, then refilled in place ---- */
.cells-board .cell.ac-prime::before{content:"";position:absolute;inset:2%;z-index:3;border-radius:50%;pointer-events:none;border:calc(var(--cell)*.05) solid var(--ac-prime,#FFE3A3);
  box-shadow:0 0 calc(var(--cell)*.22) var(--ac-prime,#FFE3A3);opacity:0;animation:ac-prime var(--ac-p,.18s) var(--ac-ease,cubic-bezier(.3,1.45,.45,1)) forwards}
.cells-board .cell.ac-prime .face{transform:scale(1.12)}
.cells-board .cell.ac-prime .b-ac-core .acc-halo{animation:none;opacity:1;transform:scale(1.15)}
.cells-board .cell.ac-hit:not(.ac-prime)::after{content:"";position:absolute;inset:2%;z-index:2;border-radius:var(--cluster-radius,16%);pointer-events:none;background:var(--ac-hit,rgba(255,138,61,.2));animation:ac-fade var(--ac-p,.18s) ease-out}
/* the cells about to be cleared dim until the refill redraws them (the board's recode / fade-in shows the new symbol) */
.cells-board .cell.ac-hit:not(.recode):not(.fadein):not(.ac-prime) .face{opacity:.5}
.cells-board .l-ac-blast>.acb{display:block;overflow:hidden;border-radius:var(--window-radius,10px);pointer-events:none}
.cells-board .acb.out{opacity:0;transition:opacity var(--ac-o,.2s) ease-out}
.cells-board .acb>.aco{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:ac-snap var(--ac-p,.18s) var(--ac-ease,cubic-bezier(.3,1.45,.45,1)) backwards}
.cells-board .aco>path{fill:none;stroke:var(--ac-edge,#FFC46A);stroke-width:2.5px;stroke-linejoin:round;stroke-linecap:square;vector-effect:non-scaling-stroke}
/* shock rings: one per core, the size of its square */
.cells-board .acb>.acw{position:absolute;display:block;border-radius:50%;border:calc(var(--cell)*.05) solid var(--ac-wave,rgba(255,196,106,.85));opacity:0;
  transform:translate(-50%,-50%) scale(.15);animation:ac-wave var(--ac-w,.6s) cubic-bezier(.2,.7,.3,1) forwards}
/* the governed glow: one group for every core of the detonation (one brightness change) */
.cells-board .acb>.acg{position:absolute;inset:0;opacity:0;animation:ac-glow var(--ac-g,.42s) ease-out forwards}
.cells-board .acg>.acg-c{position:absolute;display:block;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,var(--ac-glow-core,rgba(255,246,220,.9)) 0,var(--ac-glow,rgba(255,138,61,.5)) 36%,transparent 70%)}
/* the refill ripple: ring d of cells around the nearest core starts d × --ac-stagger later; all of them end together */
.cells-board .cell.recode:is(.ac-d1,.ac-d2,.ac-d3,.ac-d4,.ac-d5,.ac-d6,.ac-d7) .face{animation-fill-mode:backwards}
.cells-board .cell.recode.ac-d1 .face{animation-delay:var(--ac-stagger,0ms);animation-duration:max(60ms,calc(var(--cs-recode,.28s) - var(--ac-stagger,0ms)))}
.cells-board .cell.recode.ac-d2 .face{animation-delay:calc(var(--ac-stagger,0ms) * 2);animation-duration:max(60ms,calc(var(--cs-recode,.28s) - var(--ac-stagger,0ms) * 2))}
.cells-board .cell.recode.ac-d3 .face{animation-delay:calc(var(--ac-stagger,0ms) * 3);animation-duration:max(60ms,calc(var(--cs-recode,.28s) - var(--ac-stagger,0ms) * 3))}
.cells-board .cell.recode.ac-d4 .face{animation-delay:calc(var(--ac-stagger,0ms) * 4);animation-duration:max(60ms,calc(var(--cs-recode,.28s) - var(--ac-stagger,0ms) * 4))}
.cells-board .cell.recode.ac-d5 .face{animation-delay:calc(var(--ac-stagger,0ms) * 5);animation-duration:max(60ms,calc(var(--cs-recode,.28s) - var(--ac-stagger,0ms) * 5))}
.cells-board .cell.recode.ac-d6 .face{animation-delay:calc(var(--ac-stagger,0ms) * 6);animation-duration:max(60ms,calc(var(--cs-recode,.28s) - var(--ac-stagger,0ms) * 6))}
.cells-board .cell.recode.ac-d7 .face{animation-delay:calc(var(--ac-stagger,0ms) * 7);animation-duration:max(60ms,calc(var(--cs-recode,.28s) - var(--ac-stagger,0ms) * 7))}

/* ---- the Shift: the low's cells are ringed and dim, the high snaps in over them as a ghost, then the board recodes ---- */
.cells-board .cell.ac-shift::before{content:"";position:absolute;inset:4%;z-index:3;border-radius:var(--cluster-radius,16%);pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--ac-shift,#BCA8FF);animation:ac-fade var(--ac-p,.18s) ease-out}
.cells-board .cell.ac-shift:not(.recode):not(.fadein) .face{opacity:.3}
.cells-board .l-ac-morph>.acm{display:block;pointer-events:none}
.cells-board .acm.out{opacity:0;transition:opacity var(--ac-o,.2s) ease-out}
.cells-board .acm>.acm-s{position:absolute;inset:calc((100% - var(--sym-size,88%)) / 2);display:block;
  animation:ac-morph var(--ac-s,.46s) var(--ac-ease,cubic-bezier(.3,1.45,.45,1)) backwards;animation-delay:calc(var(--ac-sweep,0ms) * var(--ac-c,0))}
.cells-board .acm-s>.sym{position:relative;width:100%;height:100%}
.cells-board .acm>.acm-g{position:absolute;inset:-8%;display:block;border-radius:50%;background:radial-gradient(circle,var(--ac-shift-glow,rgba(188,168,255,.55)),transparent 68%);opacity:0;
  animation:ac-glow var(--ac-s,.46s) ease-out forwards;animation-delay:calc(var(--ac-sweep,0ms) * var(--ac-c,0))}

/* ---- the tier gauge (free spins): above the field by default, below it, or over its top edge ---- */
.cells-board .l-ac-tier>.act{left:0;right:0;top:auto;bottom:100%;height:var(--ac-h);margin-bottom:var(--ac-gap);display:flex;align-items:center;justify-content:center;
  gap:calc(var(--ac-h)*.3);opacity:0;transition:opacity var(--ac-t,.42s) ease-out;pointer-events:none}
.cells-board .l-ac-tier>.act.show{opacity:1}
.cells-board .l-ac-tier>.act[data-at="below"]{bottom:auto;top:100%;margin:var(--ac-gap) 0 0}
.cells-board .l-ac-tier>.act[data-at="inside"]{bottom:auto;top:calc(var(--cell)*.05);left:calc(var(--cell)*.05);right:calc(var(--cell)*.05);margin:0}
.cells-board .act-t,.cells-board .act-o{display:inline-flex;align-items:center;height:100%;min-width:0;padding:0 calc(var(--ac-h)*.4);border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--ac-gauge-bg,#17132A);color:var(--ac-gauge-ink,#F4F1FF);box-shadow:inset 0 0 0 2px var(--ac-seg-ring,rgba(255,255,255,.3));font:700 calc(var(--ac-h)*.46)/1 var(--ui,system-ui)}
/* the caption and the segments keep their size; the odds line gives way (ellipsis) when the row is too narrow */
.cells-board .act-t{flex:0 0 auto;font-family:var(--display,var(--ui,system-ui));letter-spacing:.04em;text-transform:uppercase}
.cells-board .act-o{display:block;flex:0 1 auto;line-height:var(--ac-h);font-weight:600}
.cells-board .act-o[hidden]{display:none}
.cells-board .act-m{display:flex;align-items:center;gap:calc(var(--ac-h)*.16);flex:0 0 auto}
.cells-board .act-s{position:relative;width:calc(var(--ac-h)*1.15);height:calc(var(--ac-h)*.86);border-radius:999px;display:grid;place-items:center;overflow:hidden;
  background:var(--ac-seg-bg,#221C3A);color:var(--ac-seg-ink,#E9E4FF);box-shadow:inset 0 0 0 2px var(--ac-seg-ring,rgba(255,255,255,.3));
  transition:transform var(--ac-t,.42s) var(--ac-ease,cubic-bezier(.3,1.45,.45,1))}
.cells-board .act-s::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ac-seg-on,#FF8A3D);opacity:0;transition:opacity var(--ac-t,.42s) ease-out}
.cells-board .act-art{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cells-board .act-art>*{width:100%;height:100%}
.cells-board .act-s>b{position:relative;font:800 calc(var(--ac-h)*.5)/1 var(--display,var(--ui,system-ui));font-variant-numeric:tabular-nums}
.cells-board .act-s.on{color:var(--ac-seg-on-ink,#1A0E05)}
.cells-board .act-s.on::before{opacity:1}
.cells-board .act-s.now{transform:scale(1.14)}
.cells-board .act-s.go{animation:ac-pop var(--ac-t,.42s) var(--ac-ease,cubic-bezier(.3,1.45,.45,1))}
/* floaters of the presenter */
.cells-board .cs-float.acf,.cells-board .cs-float.acf-s{font-size:calc(var(--cell)*.26)}

@keyframes ac-breathe{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.04)}}
@keyframes ac-prime{0%{opacity:0;transform:scale(1.7)}100%{opacity:1;transform:scale(.94)}}
@keyframes ac-fade{from{opacity:0}to{opacity:1}}
@keyframes ac-snap{0%{opacity:0;transform:scale(1.1)}100%{opacity:1;transform:none}}
@keyframes ac-wave{0%{opacity:.9;transform:translate(-50%,-50%) scale(.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes ac-glow{0%{opacity:0}28%{opacity:1}100%{opacity:0}}
@keyframes ac-morph{0%{opacity:0;transform:scale(.4) rotate(-24deg)}70%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes ac-pop{0%{transform:scale(1.5)}100%{transform:scale(1.14)}}

/* ---- reduced motion: nothing breathes, snaps, rings, ripples or pops; marks and overlays fade (≤ 120 ms) ---- */
body.still .cells-board .acc-halo{animation:none;opacity:.8;transform:none}
body.still .cells-board .cell.ac-prime::before{animation:ac-fade .12s linear forwards;transform:none}
body.still .cells-board .cell.ac-prime .face{transform:none}
body.still .cells-board .cell.ac-hit::after,body.still .cells-board .cell.ac-shift::before{animation:ac-fade .12s linear}
body.still .cells-board .acb>.aco,body.still .cells-board .acm>.acm-s{animation:ac-fade .12s linear backwards;animation-delay:0ms}
body.still .cells-board .acb>.acw,body.still .cells-board .acb>.acg,body.still .cells-board .acm>.acm-g{display:none}
body.still .cells-board .cell.recode:is(.ac-d1,.ac-d2,.ac-d3,.ac-d4,.ac-d5,.ac-d6,.ac-d7) .face{animation-delay:0ms}
body.still .cells-board .act-s,body.still .cells-board .act-s.now{transform:none;transition:none}
body.still .cells-board .act-s.go{animation:ac-fade .12s linear}
body.still .cells-board .act-s::before,body.still .cells-board .l-ac-tier>.act,body.still .cells-board .acb.out,body.still .cells-board .acm.out{transition-duration:.12s}
@media (prefers-reduced-motion:reduce){
  .cells-board .acc-halo{animation:none;opacity:.8;transform:none}
  .cells-board .cell.ac-prime::before{animation:ac-fade .12s linear forwards;transform:none}
  .cells-board .cell.ac-prime .face{transform:none}
  .cells-board .cell.ac-hit::after,.cells-board .cell.ac-shift::before{animation:ac-fade .12s linear}
  .cells-board .acb>.aco,.cells-board .acm>.acm-s{animation:ac-fade .12s linear backwards;animation-delay:0ms}
  .cells-board .acb>.acw,.cells-board .acb>.acg,.cells-board .acm>.acm-g{display:none}
  .cells-board .cell.recode:is(.ac-d1,.ac-d2,.ac-d3,.ac-d4,.ac-d5,.ac-d6,.ac-d7) .face{animation-delay:0ms}
  .cells-board .act-s,.cells-board .act-s.now{transform:none;transition:none}
  .cells-board .act-s.go{animation:ac-fade .12s linear}
  .cells-board .act-s::before,.cells-board .l-ac-tier>.act,.cells-board .acb.out,.cells-board .acm.out{transition-duration:.12s}
}