/* Shared board geometry. Each game restyles the colours. */
body { --bw: min(92vw, calc(100dvh - 280px), 560px); }
.board-wrap { width: var(--bw); height: var(--bw); margin: 0 auto; }
.board {
  --n: 8; --cell: calc(var(--bw) / var(--n));
  position: relative; width: 100%; height: 100%; border-radius: 16px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.bgcell, .tile {
  position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell);
  padding: calc(var(--cell) * .07) calc(var(--cell) * .07) calc(var(--cell) * .12);
  transform: translate(calc((var(--x) + var(--ox, 0)) * var(--cell)), calc((var(--y) + var(--oy, 0)) * var(--cell)));
}
.tile { pointer-events: none; transition: transform .18s cubic-bezier(.3,.8,.3,1); }
.bgcell::before, .tile .face {
  display: block; width: 100%; height: 100%; border-radius: 18%;
}
.tile .face {
  display: grid; place-items: center; font-weight: 750;
  font-size: calc(var(--cell) * .46);
}
.tile.sel .face, .tile.ok .face, .tile.slide .face { transform: scale(1.06); }
.tile.sel, .tile.ok, .tile.slide, .tile.hint, .tile.nudge, .tile.bomb { z-index: 3; }
.trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.trail polyline { fill: none; }
.trail .ribbon { stroke-width: var(--rib, 28px); opacity: .28; }
.trail .edge { stroke-width: 3px; }
.trail[data-state="ready"] .ribbon { opacity: .4; }
.shard { position: absolute; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; z-index: 6; }
.finger { position: absolute; z-index: 8; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none; }