/* Charged stones and cross flares (present-charge.js) on the cells board: the stones' charge badges, the kept-stone
   rings, the run strips, the flare crosses, the cells a flare fires from / clears, and the M crown. Link it after
   cells.css; the skin decorates and places them (e.g. moves .pc-crown onto its frame) and sets the colours:
   --pc-beam, --pc-core (the bright cross), --pc-outline (outline crosses, cleared cells), --pc-strip, --pc-strip-fill,
   --pc-keep, --pc-fire, --pc-burn, --pc-digit, --pc-digit-stroke, --pc-notch, --pc-crown-bg, --pc-crown-ink,
   --pc-crown-edge (or opts.colors). Everything that moves is transform or opacity; glows are static paint. With
   reduced motion nothing sweeps, blinks or pulses (present-charge.js adds .still; the media query below covers the
   rest) and what appears or goes fades in at most 120 ms. */
.cells-board .cs-layer.l-strips{z-index:1}
.cells-board .cs-layer.l-flare{z-index:2}
.cells-board .cs-layer.l-mult{z-index:3}

/* ---- the charge badge: over the stone's art, the symbol's size; the digit sits on its lens ---- */
.cells-board .badge.b-charge{inset:calc(50% - var(--sym-size,88%) / 2);min-width:0;padding:0;border-radius:0;background:none;display:block;font:inherit;color:inherit}
.cells-board .b-charge .pc-lit{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.cells-board .b-charge .pc-digit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 calc(var(--cell)*.25)/1 var(--ui,system-ui);font-variant-numeric:tabular-nums;
  color:var(--pc-digit,#FFF6E0);-webkit-text-stroke:calc(var(--cell)*.02) var(--pc-digit-stroke,#1C0905);paint-order:stroke fill;text-shadow:0 1px 2px var(--pc-digit-stroke,#1C0905)}
.cells-board .b-charge.full .pc-digit{color:var(--pc-notch,#FFD45A)}
.cells-board .b-charge .pc-notch{position:absolute;width:12%;height:12%;transform:translate(-50%,-50%);border-radius:50%;opacity:0}
.cells-board .b-charge .pc-notch.on{opacity:1;background:radial-gradient(circle,#FFF6C8 0,var(--pc-notch,#FFD45A) 55%,transparent 72%)}
.cells-board .b-charge .pc-pips{position:absolute;left:50%;bottom:-3%;transform:translateX(-50%);display:flex;gap:calc(var(--cell)*.03)}
.cells-board .b-charge .pc-pips>i{width:calc(var(--cell)*.09);height:calc(var(--cell)*.09);border-radius:50%;background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px var(--pc-notch,#FFD45A)}
.cells-board .b-charge .pc-pips>i.on{background:var(--pc-notch,#FFD45A)}
.cells-board .b-charge.up .pc-digit{animation:pc-up .42s cubic-bezier(.2,1.4,.4,1)}
.cells-board .b-charge.up .pc-lit{animation:pc-glow .5s ease-out}
/* the board dims the cells that do not pay while it shows the wins: the stone's badge with its face */
.cells-board.marking .cell:not(.win) .b-charge{opacity:.4}

/* ---- a stone kept between free spins: a ring ---- */
.cells-board .badge.b-keep{inset:1%;min-width:0;padding:0;border-radius:50%;background:none;display:block}
.cells-board .b-keep .pc-ring{position:absolute;inset:0;border-radius:50%;border:calc(var(--cell)*.035) dashed var(--pc-keep,#FFE08A);box-shadow:0 0 calc(var(--cell)*.1) var(--pc-keep,#FFE08A)}

/* ---- the stone a flare fires from, the cells its cross clears (static paint; they go with the pop) ---- */
.cells-board .cell.pc-fire::after,.cells-board .cell.pc-burn::after{content:"";position:absolute;pointer-events:none;z-index:4;transition:opacity var(--cs-pop,.26s) ease-out}
.cells-board .cell.pc-fire::after{inset:2%;border-radius:50%;border:2px solid var(--pc-fire,#FFF1B0);box-shadow:0 0 calc(var(--cell)*.2) var(--pc-beam,rgba(255,206,96,.78)),inset 0 0 calc(var(--cell)*.16) var(--pc-beam,rgba(255,206,96,.78))}
.cells-board .cell.pc-burn::after{inset:6%;border-radius:var(--cluster-radius,16%);background:var(--pc-burn,rgba(255,214,120,.3));box-shadow:inset 0 0 0 1px var(--pc-outline,#FFE08A)}
.cells-board .cell.pop.pc-fire::after,.cells-board .cell.pop.pc-burn::after{opacity:0}

/* ---- run strips: one per straight run, blinking twice in the step's reading time, then fading ---- */
.cells-board .l-strips>.pc-strip{display:block;opacity:0;animation:pc-blink var(--pc-show,600ms) linear forwards,pc-fade var(--pc-out,180ms) ease-in var(--pc-show,600ms) forwards}
.cells-board .pc-strip::before{content:"";position:absolute;inset:5%;border-radius:calc(var(--cell)*.2);border:2px solid var(--pc-strip,#FFE08A);background:var(--pc-strip-fill,rgba(255,224,138,.14));box-shadow:0 0 calc(var(--cell)*.14) var(--pc-strip-fill,rgba(255,224,138,.14))}
.cells-board .l-strips>.pc-strip.still{animation:none;opacity:1}
/* a reading time too short for two blinks (turbo, a hurried chain): shown steady, then it fades */
.cells-board .l-strips>.pc-strip.steady{opacity:1;animation:pc-fade var(--pc-out,180ms) ease-in var(--pc-show,600ms) forwards}

/* ---- flare crosses: a bright beam sweeping out of the stone (one per second at most) or an outline ---- */
.cells-board .l-flare>.pc-flare{display:block}
.cells-board .pc-flare>i{position:absolute;display:block;pointer-events:none}
.cells-board .pc-flare .pc-bar.h{left:0;right:0;background:linear-gradient(180deg,transparent,var(--pc-beam,rgba(255,206,96,.78)) 26%,var(--pc-core,rgba(255,249,226,.96)) 50%,var(--pc-beam,rgba(255,206,96,.78)) 74%,transparent);opacity:0;animation:pc-sweep-x var(--pc-life,500ms) cubic-bezier(.2,.7,.3,1) forwards}
.cells-board .pc-flare .pc-bar.v{top:0;bottom:0;background:linear-gradient(90deg,transparent,var(--pc-beam,rgba(255,206,96,.78)) 26%,var(--pc-core,rgba(255,249,226,.96)) 50%,var(--pc-beam,rgba(255,206,96,.78)) 74%,transparent);opacity:0;animation:pc-sweep-y var(--pc-life,500ms) cubic-bezier(.2,.7,.3,1) forwards}
.cells-board .pc-flare .pc-core{border-radius:50%;background:radial-gradient(circle,var(--pc-core,rgba(255,249,226,.96)) 0,var(--pc-beam,rgba(255,206,96,.78)) 38%,transparent 70%);opacity:0;animation:pc-glare var(--pc-life,500ms) ease-out forwards}
.cells-board .pc-flare svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cells-board .pc-flare polygon{fill:none;stroke:var(--pc-outline,#FFE08A);stroke-width:2.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cells-board .l-flare>.pc-flare.outline{opacity:0;animation:pc-trace var(--pc-life,500ms) ease-out forwards}
.cells-board .l-flare>.pc-flare.still{animation:none;opacity:1;transition:opacity .12s linear}
.cells-board .l-flare>.pc-flare.still.out{opacity:0}

/* ---- the M crown: above the grid by default (the skin may move it onto its frame) ---- */
.cells-board .l-mult>.pc-crown{left:50%;top:auto;bottom:calc(100% + var(--cell)*.06);transform:translateX(-50%);opacity:0;transition:opacity .25s;pointer-events:none}
.cells-board .l-mult>.pc-crown.on,.cells-board .l-mult>.pc-crown.free{opacity:1}
.cells-board .pc-crown .pc-sun{display:inline-flex;align-items:center;justify-content:center;gap:.04em;box-sizing:border-box;min-width:calc(var(--cell)*1.05);height:calc(var(--cell)*.54);padding:0 calc(var(--cell)*.16);
  border-radius:999px;border:2px solid var(--pc-crown-edge,#7A4C0C);background:var(--pc-crown-bg,linear-gradient(180deg,#FFE7A0,#F2A52E));color:var(--pc-crown-ink,#2A0E12);
  font:800 calc(var(--cell)*.3)/1 var(--display,var(--ui,system-ui));font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.cells-board .pc-crown .pc-x{font-size:.75em}
.cells-board .pc-crown.spent .pc-sun{filter:saturate(.3)}
.cells-board .pc-crown.max .pc-sun{box-shadow:0 0 0 2px var(--pc-crown-edge,#7A4C0C),0 0 calc(var(--cell)*.3) var(--pc-beam,rgba(255,206,96,.78))}
.cells-board .pc-crown.bump .pc-sun{animation:pc-bump .42s cubic-bezier(.2,1.5,.4,1)}

@keyframes pc-up{0%{opacity:.4;transform:translate(-50%,-50%) scale(1.6)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes pc-glow{0%{opacity:.5}100%{opacity:1}}
@keyframes pc-blink{0%{opacity:0}10%{opacity:1}28%{opacity:.35}46%{opacity:1}64%{opacity:.35}82%,100%{opacity:1}}
@keyframes pc-fade{to{opacity:0}}
@keyframes pc-sweep-x{0%{opacity:0;transform:scaleX(0)}30%{opacity:1;transform:scaleX(1)}60%{opacity:.9;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes pc-sweep-y{0%{opacity:0;transform:scaleY(0)}30%{opacity:1;transform:scaleY(1)}60%{opacity:.9;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
@keyframes pc-glare{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:scale(1)}}
@keyframes pc-trace{0%{opacity:0}18%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes pc-bump{0%{transform:scale(1.35)}100%{transform:none}}

/* ---- reduced motion: static strips and outlines (present-charge.js removes them), no pulse, sweep or bump ---- */
body.still .cells-board .b-charge.up .pc-digit,body.still .cells-board .b-charge.up .pc-lit,body.still .cells-board .pc-crown.bump .pc-sun{animation:none}
body.still .cells-board .l-strips>.pc-strip{animation:none;opacity:1}
body.still .cells-board .l-flare>.pc-flare{animation:none;opacity:1;transition:opacity .12s linear}
body.still .cells-board .l-flare>.pc-flare.out{opacity:0}
body.still .cells-board .l-mult>.pc-crown{transition-duration:.12s}
@media (prefers-reduced-motion:reduce){
  .cells-board .b-charge.up .pc-digit,.cells-board .b-charge.up .pc-lit,.cells-board .pc-crown.bump .pc-sun{animation:none}
  .cells-board .l-strips>.pc-strip{animation:none;opacity:1}
  .cells-board .l-flare>.pc-flare{animation:none;opacity:1;transition:opacity .12s linear}
  .cells-board .l-flare>.pc-flare.out{opacity:0}
  .cells-board .l-mult>.pc-crown{transition-duration:.12s}
}