/* groupLock presenter (present-lock.js) on the hex board: locked cells rise and get a hexagonal frame (shape and
   height, not colour alone), the group's outline, and two pods in the board's free corners (the respin counter; in
   free spins the collected symbols). Transform and opacity only move; frames, outlines and pods are static paint.
   Colours from the skin: --lk-frame (the lock frame), --lk-outline (the group's outline), --lk-rise (how far a locked
   column rises), --lk-pod-bg, --lk-pod-ink, --lk-pod-edge, --lk-slot. Defaults read on a dark board. */
.hex-board{--lk-rise-at:clamp(3px,calc(var(--cell)*.075),6px)}
/* a locked cell: its column top and symbol rise; the rim below shows as the column's side */
.hex-board .cell.lk{z-index:1}
.hex-board .cell.lk .hx-top,.hex-board .cell.lk .face{transform:translateY(calc(-1*var(--lk-rise,var(--lk-rise-at))))}
.hex-board .cell.lk.win .face{transform:translateY(calc(-1*var(--lk-rise,var(--lk-rise-at)))) scale(1.08)}
.hex-board .hx-top{transition:transform .22s cubic-bezier(.3,.7,.35,1)}
.hex-board .cell.lk::before{background:linear-gradient(180deg,var(--hex-rim,rgba(255,255,255,.2)) 0 70%,color-mix(in srgb,var(--hex-rim,#888) 55%,#000) 70%)}
.hex-board .cell.lk.win::before{background:var(--win-ring,#fff)}
/* the frame: a hexagon stroked over the risen top; a collected symbol's frame is dashed (not colour alone) */
.hex-board .badge.b-lk{inset:0;min-width:0;padding:0;border-radius:0;background:none;display:block;
  transform:translateY(calc(-1*var(--lk-rise,var(--lk-rise-at))));animation:lk-in .22s ease-out}
.hex-board .badge.b-lk svg{display:block;width:100%;height:100%;overflow:visible}
.hex-board .badge.b-lk polygon{fill:none;stroke:var(--lk-frame,#F4F1EA);stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-width:clamp(2px,calc(var(--cell)*.045),3.5px)}
.hex-board .badge.b-lk.tide polygon{stroke-dasharray:6 4}
/* the group's outline: one line round its outside edges, lifted with the locked tops */
.hex-board .l-lk-grp{z-index:1}
.hex-board .l-lk-grp svg{width:100%;height:100%;overflow:visible;transform:translateY(calc(-1*var(--lk-rise,var(--lk-rise-at))))}
.hex-board .lk-outline path{fill:none;stroke:var(--lk-outline,#F4F1EA);stroke-width:clamp(2.5px,calc(var(--cell)*.06),5px);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
/* the pods: the respin counter (n / max) and the collected symbols, in the board's free top corners */
.hex-board .lk-pod{display:flex;align-items:center;justify-content:center;gap:2%;box-sizing:border-box;color:var(--lk-pod-ink,#F4F1EA);
  background:var(--lk-pod-bg,rgba(16,24,28,.82));border:1.5px solid var(--lk-pod-edge,rgba(244,241,234,.45));
  clip-path:polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%);font:700 calc(var(--cell)*.28)/1 var(--ui,system-ui);font-variant-numeric:tabular-nums}
/* idle: the counter dims, still ≥ 4.5:1 for its small type on the default pod (.72; not lower) */
.hex-board .lk-count{opacity:.72;transition:opacity .2s}
.hex-board .lk-count.on{opacity:1}
.hex-board .lk-count b{font-weight:700}
.hex-board .lk-count i{font-style:normal;font-size:.72em;opacity:.85}
.hex-board .lk-tide[hidden]{display:none}
.hex-board .lk-slot{position:relative;flex:0 0 auto;width:calc(var(--cell)*.24);height:calc(var(--cell)*.24)}
.hex-board .lk-slot.empty{border-radius:50%;border:1.5px dashed var(--lk-slot,rgba(244,241,234,.55));box-sizing:border-box}
.hex-board .lk-slot .sym{position:absolute;inset:0}
.hex-board .lk-slot.new{animation:lk-in .4s ease-out}
@keyframes lk-in{from{opacity:0}to{opacity:1}}
/* reduced motion: nothing rises with a slide (the tops sit risen at once) and nothing fades in slowly */
body.still .hex-board .hx-top,body.still .hex-board .lk-count{transition:none}
body.still .hex-board .badge.b-lk,body.still .hex-board .lk-slot.new{animation:none}
@media (prefers-reduced-motion:reduce){
  .hex-board .hx-top,.hex-board .lk-count{transition:none}
  .hex-board .badge.b-lk,.hex-board .lk-slot.new{animation:none}
}