.flow-path-particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 80;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  opacity: .96;
}

#boardGrid > .shell-tide-water-flow-canvas {
  z-index: 81;
}

#boardGrid[data-flow-phase="commit"] > .flow-path-particle-canvas {
  z-index: 83;
  opacity: 1;
}

#boardGrid > .shell-tide-water-flow-canvas.pa5-water-flow-canvas {
  z-index: 82;
  transform-origin: center;
  transition: opacity 360ms ease, transform 420ms ease;
}

.commit-rescue-vortex-layer {
  position: absolute;
  z-index: 84;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.commit-rescue-vortex-layer img {
  position: absolute;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: saturate(1.08);
}

#boardGrid.rescue-flow-fade > .shell-tide-water-flow-canvas.pa5-water-flow-canvas {
  opacity: 0;
  transform: scale(.92);
}

.rescue-flight-layer {
  position: fixed;
  z-index: 10008;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.rescue-flight-layer > .rescue-vortex-flight-canvas {
  z-index: 1;
}

.rescue-flight-token {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(7, 76, 94, .32));
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .flow-path-particle-canvas {
    opacity: .82;
  }
  #boardGrid > .shell-tide-water-flow-canvas.pa5-water-flow-canvas { transition-duration: 60ms; }
}