/* River board (river-crossing ways games): the reels board with one grid track and no pegs (as ways.css), the river rows
   as bands of water UNDER the symbols (a wave pattern marks them, not colour alone) and the herd runner OVER them. The
   game's skin colours it: --river-water, --river-water-hi, --river-wave, --river-edge (the bands), --herd-dust (the
   trail), --herd-ink (the runner's silhouette when it is drawn in currentColor). Animated: transform, opacity and
   clip-path only. */
.reels-board.river-board{grid-template-columns:auto;gap:0}
.river-board .reels{position:relative;z-index:1}
.river-board .rv-water{position:absolute;inset:0;z-index:0;pointer-events:none}
.river-board .rv-river{position:absolute;left:0;right:0;top:calc(var(--cell)*var(--row,1));height:var(--cell);
  background:
    radial-gradient(13px 7px at 50% 100%,transparent 64%,var(--river-wave,rgba(255,255,255,.55)) 68% 84%,transparent 88%) 0 24%/26px 13px repeat-x,
    radial-gradient(13px 7px at 50% 100%,transparent 64%,var(--river-wave,rgba(255,255,255,.55)) 68% 84%,transparent 88%) 13px 70%/26px 13px repeat-x,
    linear-gradient(180deg,var(--river-water-hi,rgba(90,160,200,.55)),var(--river-water,rgba(40,100,150,.6)));
  box-shadow:inset 0 2px 0 var(--river-edge,rgba(255,255,255,.35)),inset 0 -2px 0 var(--river-edge,rgba(255,255,255,.35))}
/* the water rising on a new row (free spins): from the bottom of its row up */
.river-board .rv-river.rise{animation:rv-rise var(--rv-flood,.7s) cubic-bezier(.33,1,.68,1) both}
@keyframes rv-rise{from{clip-path:inset(100% 0 0 0);opacity:.35}to{clip-path:inset(0 0 0 0);opacity:1}}
/* the herd: over the symbols, under the win marks' glow; one runner per crossing, a dust trail behind it */
.river-board .rv-herd{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.river-board .rv-runner{position:absolute;left:0;top:calc(var(--cell)*var(--row,1));width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center;color:var(--herd-ink,#26160F);will-change:transform,opacity}
.river-board .rv-runner>svg,.river-board .rv-runner>img{position:relative;width:96%;height:70%}
.river-board .rv-dust{position:absolute;right:55%;top:38%;bottom:6%;width:calc(var(--cell)*1.5);border-radius:50%;
  background:radial-gradient(ellipse at 100% 60%,var(--herd-dust,rgba(214,170,110,.75)),transparent 70%)}
/* a crossed cell: the herd tile settles in (a short scale-in) */
.river-board .cell.crossed .sym{animation:rv-cross .28s cubic-bezier(.33,1,.68,1)}
@keyframes rv-cross{from{transform:scale(.7);opacity:.35}to{transform:none;opacity:1}}
/* reduced motion: no rising, no scale-in, no runner (the board does not create one); shell.css caps the rest */
body.still .river-board .rv-river.rise,body.still .river-board .cell.crossed .sym{animation:none}
@media (prefers-reduced-motion:reduce){.river-board .rv-river.rise,.river-board .cell.crossed .sym{animation:none}.river-board .rv-runner{display:none}}