/* Waking specials (present-specials.js) on the cells board: the waking ring, the governed glow, the flying ghosts, the
   painted square's outline, the ink splashes, the paint / wild marks, the gold plaques, the multiplier medallion and
   the free-spin level medallions. Link it after cells.css; the skin decorates and places them (e.g. moves .ps-medal and
   .ps-levels onto its HUD, or hides them and draws its own from opts.onChange) and sets the colours: --ps-wake,
   --ps-glow, --ps-glow-edge, --ps-jade-line, --ps-jade-fill, --ps-ink, --ps-ink-hi, --ps-medal-bg, --ps-medal-ink,
   --ps-medal-edge, --ps-lost-bg, --ps-lost-ink, --ps-lost-edge, --ps-plaque-bg, --ps-plaque-ink, --ps-plaque-edge,
   --ps-level-bg, --ps-level-ink, --ps-level-edge (or opts.colors). The flight itself is animated by the script (Web
   Animations: transform and opacity only); everything else that moves here is transform or opacity, glows are static
   paint whose opacity changes. The defaults keep text at 4.5:1 or more on its own plate. With reduced motion nothing
   flies, bumps or pulses (present-specials.js adds .still; the rules below cover the rest) and what appears fades in
   at most 120 ms. */
.cells-board .cs-layer.l-ps-area{z-index:1}
.cells-board .cs-layer.l-ps-mark{z-index:2}
.cells-board .cs-layer.l-ps-fx{z-index:3}
.cells-board .cs-layer.l-ps-fly{z-index:4}
.cells-board .cs-layer.l-ps-levels,.cells-board .cs-layer.l-ps-mult{z-index:5}

/* ---- a waking special: a ring (static paint that breathes by opacity); it goes with the pop ---- */
.cells-board .cell.ps-wake::after{content:"";position:absolute;inset:3%;border-radius:50%;pointer-events:none;z-index:4;border:2px solid var(--ps-wake,#FFE7A0);
  box-shadow:0 0 calc(var(--cell)*.18) var(--ps-wake,#FFE7A0),inset 0 0 calc(var(--cell)*.12) var(--ps-wake,#FFE7A0);will-change:opacity;animation:ps-ring .5s ease-in-out infinite alternate}
.cells-board .cell.pop.ps-wake::after{animation:none;opacity:0;transition:opacity var(--cs-pop,.26s) ease-out}

/* ---- the governed glow on the first waking special (a pale light, never a saturated red) ---- */
.cells-board .l-ps-fx>.ps-glow{display:block;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,var(--ps-glow,rgba(255,240,196,.75)) 0,var(--ps-glow-edge,rgba(255,214,130,.3)) 40%,transparent 70%);animation:ps-glow var(--ps-life,600ms) ease-out forwards}

/* ---- the ghost: the special's art flying to its effect (moved by the script) ---- */
.cells-board .l-ps-fly>.ps-ghost{display:flex;align-items:center;justify-content:center;will-change:transform,opacity}
.cells-board .ps-ghost .ps-art{position:relative;width:var(--sym-size,88%);height:var(--sym-size,88%);filter:drop-shadow(0 calc(var(--cell)*.08) calc(var(--cell)*.1) rgba(0,0,0,.55))}
.cells-board .ps-ghost .ps-art>.sym,.cells-board .ps-ghost .ps-art>img{position:absolute;inset:0;width:100%;height:100%}
.cells-board .ps-ghost .ps-art img{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.cells-board .ps-ghost .ps-lvchip{position:absolute;right:2%;top:2%;padding:0 .3em;border-radius:999px;border:1px solid var(--ps-level-edge,#E9C86A);background:var(--ps-level-bg,rgba(22,9,9,.92));
  color:var(--ps-level-ink,#FFF1DA);font:800 max(10px,calc(var(--cell)*.15))/1.35 var(--ui,system-ui)}
.cells-board .l-ps-fly>.ps-ghost.still{animation:ps-fade .12s linear}

/* ---- the gold plaque chip (on the board in free spins, on the gold ghost always): placed by the script in % of the
   symbol's box; text max(--ps-plaque-min, 16 % of the cell) ---- */
.cells-board .badge.b-ps-plaque{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 .ps-chip{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:calc(var(--cell)*.07);
  border:1px solid var(--ps-plaque-edge,#E9C86A);background:var(--ps-plaque-bg,linear-gradient(180deg,#B81E2A,#6E0A12));color:var(--ps-plaque-ink,#FFF1DA);
  font:800 max(var(--ps-plaque-min,11px),calc(var(--cell)*.16))/1 var(--ui,system-ui);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.01em}
.cells-board.marking .cell:not(.win) .b-ps-plaque{opacity:.4}

/* ---- jade: the square it paints, outlined (fades after the reading time once the board shows it) ---- */
.cells-board .l-ps-area>.ps-area{display:block;opacity:0;animation:ps-in .26s cubic-bezier(.2,.9,.3,1.1) forwards}
.cells-board .ps-area::before{content:"";position:absolute;inset:3%;border-radius:calc(var(--cell)*.12);border:2px solid var(--ps-jade-line,#9DF5C2);
  background:var(--ps-jade-fill,rgba(47,191,113,.2));box-shadow:inset 0 0 calc(var(--cell)*.22) var(--ps-jade-fill,rgba(47,191,113,.2))}
.cells-board .ps-area::after{content:"";position:absolute;inset:3%;border-radius:calc(var(--cell)*.12);pointer-events:none;
  background:linear-gradient(90deg,var(--ps-jade-line,#9DF5C2) 0 calc(var(--cell)*.3),transparent 0 calc(100% - var(--cell)*.3),var(--ps-jade-line,#9DF5C2) 0) top/100% 3px no-repeat,
    linear-gradient(90deg,var(--ps-jade-line,#9DF5C2) 0 calc(var(--cell)*.3),transparent 0 calc(100% - var(--cell)*.3),var(--ps-jade-line,#9DF5C2) 0) bottom/100% 3px no-repeat}
.cells-board .l-ps-area>.ps-area.out{animation:ps-in .26s cubic-bezier(.2,.9,.3,1.1) forwards,ps-out .4s ease-in var(--ps-mark,1100ms) forwards}
.cells-board .l-ps-area>.ps-area.still{animation:ps-fade .12s linear forwards}

/* ---- crimson: an ink splash on every cell it turns wild ---- */
.cells-board .l-ps-mark>.ps-splash{display:block;opacity:0;animation:ps-splat .36s cubic-bezier(.2,1.3,.4,1) var(--ps-delay,0ms) forwards}
.cells-board .ps-splash::before{content:"";position:absolute;inset:10%;border-radius:46% 54% 42% 58%/55% 45% 55% 45%;opacity:.88;
  background:radial-gradient(circle at 45% 45%,var(--ps-ink-hi,#C8402A) 0,var(--ps-ink,#7E140C) 58%,transparent 74%)}
.cells-board .ps-splash::after{content:"";position:absolute;left:12%;top:16%;width:16%;height:16%;border-radius:50%;background:var(--ps-ink,#7E140C);opacity:.8;
  box-shadow:calc(var(--cell)*.56) calc(var(--cell)*.06) 0 calc(var(--cell)*-.02) var(--ps-ink,#7E140C),calc(var(--cell)*.48) calc(var(--cell)*.56) 0 calc(var(--cell)*-.03) var(--ps-ink,#7E140C)}
.cells-board .l-ps-mark>.ps-splash.still{animation:ps-fade .12s linear forwards}

/* ---- marks on the cells once the board shows them: the jade wash, the new wild's ink ring (they fade) ---- */
.cells-board .badge.b-ps-paint,.cells-board .badge.b-ps-wild{inset:4%;min-width:0;padding:0;display:block;pointer-events:none;animation:ps-mark var(--ps-mark,1100ms) ease-in forwards}
.cells-board .badge.b-ps-paint{border-radius:calc(var(--cell)*.12);background:var(--ps-jade-fill,rgba(47,191,113,.2));box-shadow:inset 0 0 0 2px var(--ps-jade-line,#9DF5C2)}
.cells-board .badge.b-ps-wild{inset:6%;border-radius:50%;background:none;box-shadow:inset 0 0 0 2px var(--ps-ink-hi,#C8402A),0 0 0 1px var(--ps-ink,#7E140C)}

/* ---- the multiplier medallion: above the grid, right (the skin may move it onto its frame or HUD) ---- */
.cells-board .l-ps-mult>.ps-medal{left:auto;right:0;top:auto;bottom:calc(100% + var(--cell)*.08);display:inline-flex;align-items:center;gap:calc(var(--cell)*.08);box-sizing:border-box;
  height:calc(var(--cell)*.52);padding:0 calc(var(--cell)*.16);border-radius:999px;border:2px solid var(--ps-medal-edge,#6E430C);background:var(--ps-medal-bg,linear-gradient(180deg,#FFF0B8,#E8B04A));
  color:var(--ps-medal-ink,#2A0E12);white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.4);opacity:0;transition:opacity .25s;pointer-events:none}
.cells-board .ps-medal .ps-cap{font:700 max(10px,calc(var(--cell)*.13))/1 var(--ui,system-ui);text-transform:uppercase;letter-spacing:.05em}
.cells-board .ps-medal .ps-m{font:800 calc(var(--cell)*.28)/1 var(--display,var(--ui,system-ui));font-variant-numeric:tabular-nums}
.cells-board .ps-medal .ps-note{font:700 max(10px,calc(var(--cell)*.13))/1 var(--ui,system-ui)}
.cells-board .ps-medal .ps-note:empty,.cells-board .ps-medal .ps-cap:empty{display:none}
.cells-board .ps-medal.on,.cells-board .ps-medal.used,.cells-board .ps-medal.lost,.cells-board .ps-medal.free{opacity:1}
.cells-board .ps-medal.used{border-style:double;border-width:3px}
.cells-board .ps-medal.max{box-shadow:0 0 0 2px var(--ps-medal-edge,#6E430C),0 0 calc(var(--cell)*.24) var(--ps-glow-edge,rgba(255,214,130,.5))}
.cells-board .ps-medal.lost{background:var(--ps-lost-bg,rgba(22,9,9,.92));color:var(--ps-lost-ink,#FFE2C4);border-color:var(--ps-lost-edge,#8A6A4A)}
.cells-board .ps-medal.lost .ps-m{text-decoration:line-through;text-decoration-thickness:2px}
.cells-board .ps-medal.bump{animation:ps-bump .42s cubic-bezier(.2,1.5,.4,1)}

/* ---- the level medallions (free spins): above the grid, left; one per kind with its level and pips ---- */
.cells-board .l-ps-levels>.ps-levels{left:0;top:auto;bottom:calc(100% + var(--cell)*.2);display:flex;gap:calc(var(--cell)*.16);opacity:0;transition:opacity .25s;pointer-events:none}
.cells-board .ps-levels.on{opacity:1}
.cells-board .ps-lv{position:relative;width:calc(var(--cell)*.6);height:calc(var(--cell)*.6)}
.cells-board .ps-lv .ps-lv-art{position:absolute;inset:0}
.cells-board .ps-lv .ps-lv-art>.sym,.cells-board .ps-lv .ps-lv-art>img{position:absolute;inset:0;width:100%;height:100%}
.cells-board .ps-lv .ps-lv-art img{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.cells-board .ps-lv .ps-lv-n{position:absolute;right:-18%;top:-10%;min-width:42%;padding:0 .25em;border-radius:999px;border:1px solid var(--ps-level-edge,#E9C86A);background:var(--ps-level-bg,rgba(22,9,9,.92));
  color:var(--ps-level-ink,#FFF1DA);font:800 max(10px,calc(var(--cell)*.14))/1.3 var(--ui,system-ui);text-align:center;font-variant-numeric:tabular-nums}
.cells-board .ps-lv .ps-pips{position:absolute;left:50%;top:calc(100% + 2px);transform:translateX(-50%);display:flex;gap:2px}
.cells-board .ps-lv .ps-pips>i{width:max(4px,calc(var(--cell)*.07));height:max(4px,calc(var(--cell)*.07));border-radius:50%;background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px var(--ps-level-edge,#E9C86A)}
.cells-board .ps-lv .ps-pips>i.on{background:var(--ps-level-edge,#E9C86A)}
.cells-board .ps-lv.top .ps-lv-n{background:var(--ps-level-edge,#E9C86A);color:var(--ps-level-bg,#160909)}
.cells-board .ps-lv.bump{animation:ps-bump .42s cubic-bezier(.2,1.5,.4,1)}

@keyframes ps-ring{from{opacity:.55}to{opacity:1}}
@keyframes ps-glow{0%{opacity:0;scale:.6}30%{opacity:.85;scale:1}100%{opacity:0;scale:1.1}}
@keyframes ps-fade{from{opacity:0}to{opacity:1}}
@keyframes ps-in{0%{opacity:0}100%{opacity:1}}
@keyframes ps-out{to{opacity:0}}
@keyframes ps-splat{0%{opacity:0;scale:.3}60%{opacity:1;scale:1.08}100%{opacity:1;scale:1}}
@keyframes ps-mark{0%,60%{opacity:1}100%{opacity:0}}
@keyframes ps-bump{0%{scale:1.3}100%{scale:1}}

/* ---- reduced motion: no ring breathing, glow, bump or splat; outlines, splashes and ghosts fade in; the marks on the
   cells stay until the next event (the script clears them) ---- */
body.still .cells-board .cell.ps-wake::after{animation:none}
body.still .cells-board .l-ps-fx>.ps-glow{display:none}
body.still .cells-board .l-ps-area>.ps-area,body.still .cells-board .l-ps-mark>.ps-splash,body.still .cells-board .l-ps-fly>.ps-ghost{animation:ps-fade .12s linear forwards}
body.still .cells-board .badge.b-ps-paint,body.still .cells-board .badge.b-ps-wild{animation:ps-fade .12s linear}
body.still .cells-board .ps-medal,body.still .cells-board .ps-levels{transition-duration:.12s}
body.still .cells-board .ps-medal.bump,body.still .cells-board .ps-lv.bump{animation:none}
@media (prefers-reduced-motion:reduce){
  .cells-board .cell.ps-wake::after{animation:none}
  .cells-board .l-ps-fx>.ps-glow{display:none}
  .cells-board .l-ps-area>.ps-area,.cells-board .l-ps-mark>.ps-splash,.cells-board .l-ps-fly>.ps-ghost{animation:ps-fade .12s linear forwards}
  .cells-board .badge.b-ps-paint,.cells-board .badge.b-ps-wild{animation:ps-fade .12s linear}
  .cells-board .ps-medal,.cells-board .ps-levels{transition-duration:.12s}
  .cells-board .ps-medal.bump,.cells-board .ps-lv.bump{animation:none}
}