/* Splash board (shared by splash games, on the reels board): the smudges under the reels, the spray / dust layer over
   them, the painted cells and the free-spin multiplier pills. Every cell position is in cells (--r reel, --h row, the
   board's --cell size). Colours from the skin: --pig (per spray, set by the board), --paint-plate / --paint-ink (the
   painted word: dark plate, light ink, so it reads at ≥ 4.5:1 on any pigment), --pill-bg / --pill-ink / --pill-edge
   (the multiplier pill), --smudge-alpha. Animated properties: transform and opacity only. */
.splash-board .window{isolation:isolate}
.splash-board .reels{position:relative;z-index:1}
.splash-board .smudges,.splash-board .sprayfx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.splash-board .smudges{z-index:0}
.splash-board .sprayfx{z-index:3}
.splash-board .smudges i,.splash-board .sprayfx i{position:absolute;display:block;left:calc(var(--cell)*(var(--r) + .5));top:calc(var(--cell)*(var(--h) + .5))}
/* a smudge: a soft blot of the spray's colour left on the window */
.splash-board .smudges i{width:calc(var(--cell)*var(--sz,.85));height:calc(var(--cell)*var(--sz,.85));border-radius:46% 54% 60% 40%/50% 42% 58% 50%;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));opacity:var(--smudge-alpha,.42);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pig) 55%,transparent),color-mix(in srgb,var(--pig) 18%,transparent) 70%,transparent)}
/* the spray: a ring at the source and one drop per painted cell, flying from the source to its cell */
.splash-board .sprayfx .ring{width:calc(var(--cell)*.9);height:calc(var(--cell)*.9);border-radius:50%;border:3px solid var(--pig);opacity:0;
  transform:translate(-50%,-50%) scale(.3);animation:sp-ring var(--ms,.35s) ease-out forwards}
.splash-board .sprayfx .drop{width:calc(var(--cell)*.24);height:calc(var(--cell)*.24);border-radius:50% 50% 50% 8%;background:var(--pig);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pig) 45%,transparent);transform:translate(-50%,-50%) scale(.4);animation:sp-fly var(--ms,.35s) cubic-bezier(.2,.75,.3,1) forwards}
/* the dust: a soft cloud over a painted cell that spreads and fades (never brighter than the cell under it) */
.splash-board .sprayfx .dust{width:calc(var(--cell)*1.15);height:calc(var(--cell)*1.15);border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pig) 42%,transparent),color-mix(in srgb,var(--pig) 12%,transparent) 65%,transparent);
  transform:translate(-50%,-50%) scale(.6);animation:sp-dust var(--ms,1.2s) ease-out forwards}
@keyframes sp-ring{0%{opacity:.95;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes sp-fly{0%{transform:translate(-50%,-50%) scale(.4)}100%{transform:translate(calc(-50% + var(--cell)*var(--dr)),calc(-50% + var(--cell)*var(--dh))) scale(1.15)}}
@keyframes sp-dust{0%{opacity:.75;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
/* a source pumps before it sprays */
.splash-board .cell.pump .sym{animation:sp-pump var(--pump-ms,.16s) ease-in-out}
@keyframes sp-pump{0%{transform:none}45%{transform:scale(.88,1.08)}100%{transform:scale(1.04)}}
/* a painted cell: the symbol fades under a splat of the spray's colour with the painted word on a dark plate */
.splash-board .cell.painted .sym{opacity:.3;filter:saturate(.55)}
.splash-board .splat{position:absolute;inset:7%;z-index:1;display:grid;place-items:center;pointer-events:none;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;
  background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--pig) 55%,#FFFFFF) 0 12%,var(--pig) 46%,color-mix(in srgb,var(--pig) 70%,#000000) 100%);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--pig) 60%,#000000);animation:sp-paint .24s ease-out}
.splash-board .splat b{font-family:var(--display);font-weight:400;font-size:calc(var(--cell)*.2);line-height:1.1;letter-spacing:.04em;padding:.12em .42em;border-radius:999px;
  color:var(--paint-ink,#FFFFFF);background:var(--paint-plate,rgba(22,6,34,.88))}
@keyframes sp-paint{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.06)}100%{transform:none}}
.splash-board .cell.dim .splat{opacity:.45}
.splash-board .cell.win .splat{animation:sp-paint-win .6s ease-in-out infinite alternate}
@keyframes sp-paint-win{to{transform:scale(1.06)}}
/* the source's multiplier (free spins): a pill in the cell's top right corner */
.splash-board .mpill{position:absolute;right:3%;top:3%;z-index:2;font-family:var(--ui);font-weight:800;font-size:calc(var(--cell)*.19);line-height:1;padding:.18em .42em;border-radius:999px;
  color:var(--pill-ink,#FFFFFF);background:var(--pill-bg,#24082F);box-shadow:0 0 0 2px var(--pill-edge,#FFFFFF);animation:sp-pill .26s cubic-bezier(.3,1.5,.5,1)}
@keyframes sp-pill{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
body.still .splash-board .splat,body.still .splash-board .mpill,body.still .splash-board .cell.pump .sym,body.still .splash-board .cell.win .splat{animation:none}