.board-grid {
  overflow: visible;
}

.water-sprite-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.board-grid.water-sprites-ready .water-sprite-layer {
  opacity: 1;
}

.water-sprite {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.water-channel-sprite {
  z-index: 1;
  object-fit: fill;
  opacity: .9;
  filter: saturate(.96) drop-shadow(0 3px 4px rgba(91, 58, 16, .1));
}

.water-reservoir-sprite {
  z-index: 2;
  object-fit: contain;
  filter: drop-shadow(0 7px 9px rgba(91, 58, 16, .13));
}

.water-lagoon-sprite {
  z-index: 0;
  object-fit: contain;
  opacity: .92;
  filter: drop-shadow(0 7px 10px rgba(91, 58, 16, .12));
}

.board-tokens-only .cup::before {
  opacity: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.board-tokens-only .cup.sand-cup::before {
  background-image: url("../../assets/map/flow-rescue-water-elements-v1/sprites/pit-dry-a/prop.png");
}

.board-tokens-only .cup.wet-pit::before {
  background-image: url("../../assets/map/flow-rescue-water-elements-v1/sprites/pit-wet-a/prop.png");
}

.board-tokens-only .cup.wet-pit[data-board-index="11"]::before {
  background-image: url("../../assets/map/flow-rescue-water-elements-v1/sprites/pit-wet-b/prop.png");
}

.board-tokens-only .cup .tokens {
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  .water-sprite-layer {
    transition: none;
  }
}