/* Bloom board (mystery-bud reels-lines games), on top of reels.css. Colours come from the game's skin:
   --root-ring (the ring round a rooted cell), --root-held (the pane behind a held bud while the reels turn),
   --can-hit (the scatters that add spins). Animations move transform / opacity only. */
/* forty lines (up to twelve a row on a side): the payline pegs may take four columns (reels.js fitPegs) */
.bloom-board{--peg-max-cols:4}
.bloom-board .bloom-roots{position:absolute;inset:0;pointer-events:none}
.bloom-board .bloom-roots .root{position:absolute;left:calc(var(--r)*var(--cell));top:calc(var(--w)*var(--cell));width:var(--cell);height:var(--cell);
  display:flex;align-items:center;justify-content:center;color:var(--root-ring,currentColor)}
.bloom-board .bloom-roots .root .ring{position:absolute;inset:3%;width:94%;height:94%;overflow:visible}
.bloom-board .bloom-roots .root.held{background:var(--root-held,transparent)}
.bloom-board .bloom-roots .root.held .sym{width:88%;height:88%}
.bloom-board .bloom-roots .root.new .ring{animation:bl-root .42s cubic-bezier(.2,.8,.3,1) both}
@keyframes bl-root{from{transform:scale(.55) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
/* the reveal: the closed bud lies over the opened symbol and fades (bloom.js animates both) */
.bloom-board .cell .was{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.bloom-board .cell .was .sym{width:88%;height:88%}
.bloom-board .cell.can-hit::after{content:"";position:absolute;inset:5%;border-radius:12px;border:2px solid var(--can-hit,var(--primary))}