/* Ways board (shared by ways games with pearl multipliers): the reels board plus the pearl layer over its window. The
   pearl art comes from the game (pearlHTML); --pearl-size and --pearl-pad place it in its cell corner, --pearl-ripple
   tints the ring. No pegs: one grid track and no gaps (reels.css keeps three tracks for the payline pegs), so the board
   is exactly as wide as its window. */
.reels-board.ways-board{grid-template-columns:auto;gap:0}
.ways-board .pearls{position:absolute;inset:0;pointer-events:none;z-index:3}
.ways-board .pearl{position:absolute;width:var(--cell);height:var(--cell);display:flex;align-items:flex-end;justify-content:flex-end;padding:var(--pearl-pad,calc(var(--cell)*.04));transition:opacity .25s,filter .25s}
.ways-board .pearl>*{position:relative;width:var(--pearl-size,44%);height:var(--pearl-size,44%);flex:none}
.ways-board .pearl.rip>*{animation:wy-pearl .5s cubic-bezier(.37,0,.63,1) var(--d,0ms) both}
.ways-board .pearl.rip::after{content:"";position:absolute;right:var(--pearl-pad,calc(var(--cell)*.04));bottom:var(--pearl-pad,calc(var(--cell)*.04));width:var(--pearl-size,44%);height:var(--pearl-size,44%);border-radius:50%;
  border:2px solid var(--pearl-ripple,rgba(255,255,255,.75));opacity:0;pointer-events:none;animation:wy-ripple .7s ease-out var(--d,0ms)}
.ways-board .pearl.dim{opacity:.45}
.ways-board .pearl.lit>*{filter:drop-shadow(0 0 6px var(--win-glow,#fff))}
.ways-board .pearl.got>*{filter:drop-shadow(0 0 3px var(--win-glow,#fff)) saturate(.7)}
/* a collected pearl in flight: over the game, under a skin's transition cover (z-index 20) and the overlays */
.pearl-fly{position:fixed;z-index:19;pointer-events:none;margin:0}
@keyframes wy-pearl{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes wy-ripple{0%{opacity:.85;transform:scale(.4)}100%{opacity:0;transform:scale(2.1)}}
/* reduced motion: no ripples, no scaling; pearls simply appear (shell.css caps every animation and transition) */
body.still .ways-board .pearl.rip>*{animation:none}body.still .ways-board .pearl.rip::after{display:none}
@media (prefers-reduced-motion:reduce){.ways-board .pearl.rip>*{animation:none}.ways-board .pearl.rip::after{display:none}.ways-board .pearl{transition-duration:.1s}}