/* Cascade board (shared by cascading grid games). Colours and decoration come from the game's skin. */
.cascade-board{position:relative;display:grid;grid-template-columns:repeat(var(--cols,6),var(--cell));border-radius:var(--window-radius,10px);overflow:hidden;background:var(--window-bg,rgba(0,0,0,.6))}
.cascade-board .col{position:relative;height:calc(var(--cell)*var(--rows,5));overflow:hidden}
.cascade-board .col+.col{box-shadow:inset 1px 0 var(--reel-sep,rgba(255,255,255,.06))}
.cascade-board .cell{position:absolute;left:0;width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center;will-change:transform}
.cascade-board .sym,.special .sym{position:relative;width:92%;height:92%;transition:transform .25s cubic-bezier(.3,1.6,.5,1),filter .25s,opacity .25s}
.cascade-board .sym img,.special .sym img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.cascade-board .cell.falling .sym{filter:brightness(1.15)}
.cascade-board .cell.win{z-index:2}
.cascade-board .cell.win::before{content:"";position:absolute;inset:3%;border-radius:18%;border:2px solid var(--primary-hi);box-shadow:0 0 14px var(--primary),inset 0 0 16px color-mix(in srgb,var(--primary) 45%,transparent);animation:cb-ring .5s ease-in-out infinite alternate}
.cascade-board .cell.win .sym{transform:scale(1.1);filter:drop-shadow(0 0 6px var(--primary)) brightness(1.18)}
@keyframes cb-ring{from{opacity:.65}to{opacity:1}}
.cascade-board .cell.pop .sym{transform:scale(1.45);opacity:0;filter:brightness(3) blur(3px);transition:transform .3s ease-out,opacity .3s,filter .3s}
.cascade-board .cell.pop::before{display:none}
.cascade-board .cell.land .sym{animation:cb-land .55s ease-out}
@keyframes cb-land{0%{filter:brightness(2.4) drop-shadow(0 0 18px #fff)}100%{filter:none}}
.sym.bonus img.rays{inset:-22%;width:144%;height:144%;animation:cb-spin 9s linear infinite}
.sym.bonus img.cons{inset:20%;width:60%;height:60%;border-radius:50%;animation:cb-spin 18s linear infinite reverse}
.cascade-board.sc3 .sym.bonus .rays{animation-duration:3s}
@keyframes cb-spin{to{transform:rotate(360deg)}}
.sym.mult .ering{position:absolute;inset:-4%;border-radius:50%;background:conic-gradient(from 0deg,transparent,var(--mc) 22%,#fff 25%,transparent 40%,transparent 50%,var(--mc) 72%,#fff 75%,transparent 90%);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 62%,#000 67%,transparent 69%);mask:radial-gradient(circle,transparent 60%,#000 62%,#000 67%,transparent 69%);animation:cb-spin 2.6s linear infinite}
.sym.mult b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-weight:800;font-size:calc(var(--cell)*.33);letter-spacing:-.02em;color:#fff;
  -webkit-text-stroke:calc(var(--cell)*.022) #1A0C3A;paint-order:stroke fill;text-shadow:0 0 calc(var(--cell)*.1) var(--mc),0 2px 0 #12052A}
.sym.mult b.s{font-size:calc(var(--cell)*.25)}
.sym.mult b small{font-size:.62em;margin-right:.04em}
.cascade-board .cell.charge .sym{animation:cb-charge .45s ease-in-out 3 alternate}
@keyframes cb-charge{to{transform:scale(1.22);filter:brightness(1.7) drop-shadow(0 0 16px var(--mc,var(--primary)))}}
.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)*.32);color:#FFF8DC;white-space:nowrap;
  -webkit-text-stroke:calc(var(--cell)*.02) #3A2504;paint-order:stroke fill;text-shadow:0 0 12px color-mix(in srgb,var(--primary) 90%,transparent);animation:cb-float 1.25s cubic-bezier(.2,.8,.3,1) forwards}
.floater.m{font-size:calc(var(--cell)*.42)}
@keyframes cb-float{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-110%) scale(1)}}