/* Frozen wilds on the cells board (present-frozen.js): pip badges, crack overlays, the freeze drop and bloom, the
   optional held / limit meter. Link after cells.css and before the skin. Animated properties are transform and opacity
   only; the hatching, frames and glows are static paint. Colours come from custom properties a game sets on the board
   (opts.colors) or in its skin: --frz-pip, --frz-pip-off, --frz-pip-edge, --frz-carry, --frz-ink, --frz-strip,
   --frz-hatch, --frz-frost, --frz-bloom, --frz-crack, --frz-meter-ink, --frz-meter-bg, and (CSS only) --frz-face-bg.
   The presenter sets the lengths --frz-drop-ms, --frz-bloom-ms, --frz-crack-ms, --frz-shatter-ms and the drop's
   easing --frz-drop-ease. */

/* ---- pip badge (layer "frz"): the whole cell, melt pips on top, carry pips at the bottom ---- */
.cells-board .badge.b-frz,.cells-board .badge.b-frz-crack{inset:0;min-width:0;padding:0;border-radius:0;background:none;display:block}
.cells-board .badge.b-frz{z-index:4;font:700 calc(var(--cell)*.2)/1 var(--ui,system-ui);color:var(--frz-ink,#fff)}
.cells-board .frz{position:absolute;inset:0}
.cells-board .frz-melt,.cells-board .frz-carry{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--cell)*.045);
  padding:calc(var(--cell)*.028) calc(var(--cell)*.055);border-radius:999px;background:var(--frz-strip,rgba(6,22,40,.78));white-space:nowrap}
.cells-board .frz-melt{top:6%}
.cells-board .frz-carry{bottom:2.5%;z-index:2}
/* melt pips: ice diamonds; carry pips: round */
.cells-board .frz i{display:block;flex:none;width:calc(var(--cell)*.13);height:calc(var(--cell)*.13);box-sizing:border-box;border:1.5px solid var(--frz-pip-edge,#BDEBFF);background:var(--frz-pip,#EAF8FF)}
.cells-board .frz-melt i{transform:rotate(45deg)}
.cells-board .frz-carry i{width:calc(var(--cell)*.11);height:calc(var(--cell)*.11);border-radius:50%;background:var(--frz-carry,#C9BBFF);border-color:var(--frz-carry,#C9BBFF)}
.cells-board .frz i.off{background:var(--frz-pip-off,transparent);opacity:.6}
.cells-board .frz i.off.melt{animation:frz-pip var(--frz-crack-ms,.12s) ease-out 2 alternate}
.cells-board .frz-n{margin-left:calc(var(--cell)*.02);font-variant-numeric:tabular-nums;color:var(--frz-ink,#fff)}
/* dormant: hatched under hollow pips (static); between free spins: a frost frame on every cell that carries */
.cells-board .frz.dormant.hatch::before{content:"";position:absolute;inset:8%;border-radius:10%;pointer-events:none;
  background:repeating-linear-gradient(135deg,var(--frz-hatch,rgba(11,36,64,.5)) 0 calc(var(--cell)*.028),transparent 0 calc(var(--cell)*.085))}
.cells-board .frz.carry::before{content:"";position:absolute;inset:5%;z-index:1;border-radius:12%;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--frz-frost,rgba(189,235,255,.9)),inset 0 0 calc(var(--cell)*.16) var(--frz-frost,rgba(189,235,255,.45))}
/* a resumed carry: the board shows a still picture, so the badge draws the wild over the cell's face (an opaque tile,
   --frz-face-bg) under the frame and the pips, until the next spin lays the real wild there */
.cells-board .frz-face{position:absolute;inset:3%;border-radius:12%;display:flex;align-items:center;justify-content:center;background:var(--frz-face-bg,rgba(6,22,40,.94))}
.cells-board .frz-face>.sym{position:relative;width:calc(var(--sym-size,88%)/.94);height:calc(var(--sym-size,88%)/.94);flex:none}

/* ---- cracks (layer "frz-crack"): over the symbol face, following its win scale ---- */
.cells-board .badge.b-frz-crack{z-index:3}
.cells-board .frz-crk{position:absolute;left:calc((100% - var(--sym-size,88%))/2);top:calc((100% - var(--sym-size,88%))/2);width:var(--sym-size,88%);height:var(--sym-size,88%);
  transition:transform .2s;animation:frz-crack var(--frz-crack-ms,.12s) linear}
.cells-board .cell.win .frz-crk{transform:scale(1.08)}
.cells-board .frz-crk img{position:absolute;inset:0;width:100%;height:100%;display:block}
/* no crack art: two hairlines, darker each stage */
.cells-board .frz-cx{position:absolute;inset:6%;opacity:.35;
  background:linear-gradient(118deg,transparent 47%,var(--frz-crack,#0B2440) 48% 50%,transparent 51%),linear-gradient(32deg,transparent 58%,var(--frz-crack,#0B2440) 59% 60.5%,transparent 61.5%)}
.cells-board .frz-crk.s2 .frz-cx{opacity:.6}
.cells-board .frz-crk.s3 .frz-cx{opacity:.9}
/* the break: a frost ring flies off once (motion only) */
.cells-board .frz-crk.break::after{content:"";position:absolute;inset:-4%;border-radius:12%;border:2px solid var(--frz-frost,rgba(189,235,255,.9));opacity:0;pointer-events:none;
  animation:frz-shatter var(--frz-shatter-ms,.24s) ease-out}

/* ---- freezing (layer "frz-fx"): the wild drops onto the cell (ease-in), then a tinted bloom ---- */
.cells-board .cs-layer>.frz-drop{display:flex;align-items:center;justify-content:center;pointer-events:none}
.cells-board .frz-ice{position:relative;width:var(--sym-size,88%);height:var(--sym-size,88%);animation:frz-drop var(--frz-drop-ms,.42s) var(--frz-drop-ease,cubic-bezier(.55,.085,.68,.53)) both}
.cells-board .frz-ice>.sym{position:relative;width:100%;height:100%}
.cells-board .frz-drop.bloom::after{content:"";position:absolute;inset:4%;border-radius:var(--cluster-radius,16%);pointer-events:none;opacity:0;
  background:radial-gradient(circle,var(--frz-bloom,rgba(189,235,255,.75)) 0,transparent 70%);animation:frz-bloom var(--frz-bloom-ms,.18s) ease-out}

/* ---- held / limit meter (layer "frz-meter", opts.meter): just outside the grid ---- */
.cells-board .cs-layer>.frz-meter{left:50%;top:auto;bottom:calc(100% + var(--cell)*.08);transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--cell)*.1);
  padding:calc(var(--cell)*.05) calc(var(--cell)*.14);border-radius:999px;white-space:nowrap;background:var(--frz-meter-bg,rgba(6,22,40,.82));
  color:var(--frz-meter-ink,#fff);font:600 calc(var(--cell)*.2)/1 var(--ui,system-ui);font-variant-numeric:tabular-nums}
.cells-board .cs-layer>.frz-meter.bottom{bottom:auto;top:calc(100% + var(--cell)*.08)}
.cells-board .frz-mp{display:flex;flex-wrap:wrap;gap:calc(var(--cell)*.03);max-width:calc(var(--cell)*2.4)}
.cells-board .frz-mp i{display:block;width:calc(var(--cell)*.09);height:calc(var(--cell)*.09);transform:rotate(45deg);box-sizing:border-box;border:1.5px solid var(--frz-pip-edge,#BDEBFF)}
.cells-board .frz-mp i.on{background:var(--frz-pip,#EAF8FF)}

@keyframes frz-pip{from{opacity:1;transform:rotate(45deg) scale(1.25)}to{opacity:.6;transform:rotate(45deg) scale(.8)}}
@keyframes frz-crack{from{opacity:0}to{opacity:1}}
@keyframes frz-shatter{0%{opacity:.9;transform:scale(.88)}100%{opacity:0;transform:scale(1.22)}}
@keyframes frz-drop{0%{opacity:0;transform:translateY(-45%) scale(1.12)}100%{opacity:1;transform:none}}
@keyframes frz-bloom{0%{opacity:0}35%{opacity:.85}100%{opacity:0}}

/* reduced motion: nothing drops, flies or pulses; cracks and pips change by a short fade (≤ 120 ms) */
body.still .cells-board .frz i.off.melt,body.still .cells-board .frz-crk.break::after,body.still .cells-board .frz-drop.bloom::after{animation:none}
body.still .cells-board .frz-ice,body.still .cells-board .frz-crk{animation:frz-crack .12s linear}
body.still .cells-board .cell.win .frz-crk{transform:none}
@media (prefers-reduced-motion:reduce){
  .cells-board .frz i.off.melt,.cells-board .frz-crk.break::after,.cells-board .frz-drop.bloom::after{animation:none}
  .cells-board .frz-ice,.cells-board .frz-crk{animation:frz-crack .12s linear}
  .cells-board .cell.win .frz-crk{transform:none}
}