/* Cluster grid board (shared by grid-cascade games). Colours and decoration come from the game's skin. */
.grid-board{position:relative;display:grid;grid-template-columns:repeat(var(--cols,5),var(--cell));border-radius:var(--window-radius,10px);overflow:hidden;background:var(--window-bg,rgba(0,0,0,.6))}
.grid-board .col{position:relative;height:calc(var(--cell)*var(--rows,4));overflow:hidden}
.grid-board .col+.col{box-shadow:inset 1px 0 var(--reel-sep,rgba(255,255,255,.06))}
.grid-board .cell{position:absolute;left:0;width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center;will-change:transform}
.grid-board .sym{position:relative;width:86%;height:86%;transition:transform .2s,filter .2s,opacity .2s}
.grid-board .sym img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.grid-board .cell.win{z-index:2}
.grid-board .cell.win::before{content:"";position:absolute;inset:4%;border-radius:var(--cluster-radius,14%);border:2px solid var(--primary-hi);box-shadow:0 0 12px var(--primary),inset 0 0 12px color-mix(in srgb,var(--primary) 40%,transparent);animation:gb-ring .45s ease-in-out infinite alternate}
.grid-board .cell.win .sym{transform:scale(1.08);filter:drop-shadow(0 0 6px var(--primary)) brightness(1.2)}
@keyframes gb-ring{from{opacity:.6}to{opacity:1}}
.grid-board .cell.pop .sym{transform:scale(1.35);opacity:0;filter:brightness(3) blur(2px);transition:transform .26s ease-out,opacity .26s,filter .26s}
.grid-board .cell.pop::before{display:none}
.grid-board .cell.land .sym{animation:gb-land .5s ease-out}
.grid-board .cell.tagdrop .sym{animation:gb-tag .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes gb-land{0%{filter:brightness(2.4) drop-shadow(0 0 16px #fff)}100%{filter:none}}
@keyframes gb-tag{0%{transform:scale(1.6) rotate(-8deg);filter:brightness(2.5)}100%{transform:none;filter:none}}
.grid-board ~ .floater,.frame .floater{position:absolute;z-index:6;transform:translate(-50%,-50%);pointer-events:none;font-family:var(--ui);font-weight:800;font-size:calc(var(--cell)*.3);color:#fff;white-space:nowrap;
  -webkit-text-stroke:calc(var(--cell)*.02) #000;paint-order:stroke fill;text-shadow:0 0 12px color-mix(in srgb,var(--primary) 90%,transparent);animation:gb-float 1.25s cubic-bezier(.2,.8,.3,1) forwards}
.frame .floater.m{font-size:calc(var(--cell)*.42)}
@keyframes gb-float{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-110%) scale(1)}}