/* Keep the sprite, tile grid, path links and quota on one floating transform.
   Existing --drift still controls downstream position; river-arrival owns translate. */
.playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss) {
  --float-anchor: -21%;
  --float-rise: 3px;
  --float-sway: 2px;
  --float-duration: 4.9s;
  --float-offset: -.8s;
  --wake-bottom: -7px;
  --wake-span: 110%;
  --wake-shift: 7px;
  animation: river-arrival .42s ease-out both,
    river-float var(--float-duration) ease-in-out var(--float-offset) infinite;
}

.playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss)[data-kind='barrel'] {
  --float-duration: 4.4s;
  --float-offset: -2.6s;
  --float-sway: -2px;
}

.playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss).compact {
  --float-rise: 2px;
  --float-sway: 1px;
  --float-duration: 4.2s;
}

.playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss).compact:nth-child(2n) { --float-offset: -1.7s; }
.playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss).compact:nth-child(3n) { --float-offset: -3.1s; }

.playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss).has-paint {
  --wake-bottom: -18%;
  --wake-span: 164%;
}

@keyframes river-float {
  0%, 100% { transform: translate3d(-50%, var(--float-anchor), 0); }
  38% { transform: translate3d(calc(-50% + var(--float-sway)), calc(var(--float-anchor) - var(--float-rise)), 0); }
  78% { transform: translate3d(calc(-50% - var(--float-sway)), calc(var(--float-anchor) + var(--float-rise) * .6), 0); }
}

/* A darker water contact under the hull and fragmented pale foam at its edges.
   Drop the old detached oval; keep this layer behind the painted hull. */
.playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss)::after {
  z-index: -2;
  inset: auto auto var(--wake-bottom) 50%;
  inline-size: var(--wake-span);
  block-size: clamp(20px, 4.2vmin, 44px);
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 36% 26% at 50% 41%, #193f39a0 0 50%, #265b526b 66%, transparent 100%),
    radial-gradient(ellipse 13% 14% at 13% 52%, #e5edcea8 4%, #cfe8d196 37%, transparent 91%),
    radial-gradient(ellipse 15% 17% at 85% 49%, #e5edced2 0 14%, #bae2ce88 58%, transparent 100%),
    radial-gradient(ellipse 20% 10% at 28% 62%, #d1e9d7ad 0 12%, #bae2ce5e 52%, transparent 100%),
    radial-gradient(ellipse 11% 6% at 21% 90%, #e0e9d280, transparent 100%),
    radial-gradient(ellipse 8% 7% at 81% 86%, #eff6db8a, transparent 100%),
    radial-gradient(ellipse 28% 10% at 56% 79%, #8fcebe98, transparent 100%);
  box-shadow: none;
  opacity: .84;
  transform: translateX(-50%);
}

/* A second, broken bow wave peels off the hull and disperses downstream.
   It cannot intercept touch and never traverses the readable tile faces. */
.playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss) .tile-grid::after {
  position: absolute;
  z-index: -1;
  inset: auto auto calc(var(--wake-bottom) - 9px) 50%;
  inline-size: var(--wake-span);
  block-size: clamp(17px, 3.9vmin, 36px);
  background:
    radial-gradient(ellipse 17% 9% at 15% 38%, #dae9cebd 5%, transparent 100%),
    radial-gradient(ellipse 7% 7% at 21% 72%, #edf3d6dd, transparent 92%),
    radial-gradient(ellipse 16% 9% at 86% 42%, #deedd2ca 8%, transparent 100%),
    radial-gradient(ellipse 13% 9% at 79% 65%, #cbe8ce9c 5%, transparent 100%),
    radial-gradient(ellipse 17% 6% at 68% 86%, #b2dbca95, transparent 100%);
  transform: translateX(-50%);
  animation: river-wake var(--float-duration) ease-out var(--float-offset) infinite;
  content: '';
  pointer-events: none;
}

@keyframes river-wake {
  0% { opacity: 0; transform: translate3d(-50%, -2px, 0) scaleX(.89); }
  25% { opacity: .78; }
  64% { opacity: .56; }
  100% { opacity: 0; transform: translate3d(-50%, var(--wake-shift), 0) scaleX(1.13); }
}

/* An already-visible board stays in place rather than jumping to a different pose. */
.playfield.is-typing[data-phase='RIVER_FLOW'] .drifter:not(.boss) { animation-play-state: running, paused; }
.playfield.is-typing[data-phase='RIVER_FLOW'] .drifter:not(.boss) .tile-grid::after { animation-play-state: paused; }

@media (max-width: 640px) {
  .playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss) {
    --float-anchor: -50%;
    --float-rise: 1.5px;
    --float-sway: 1px;
    --wake-shift: 5px;
  }
  .playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss).compact { --float-rise: 1px; }
  .playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss)[data-kind='barrel'] { --float-sway: -1px; }
}

@media (prefers-reduced-motion: reduce) {
  .playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss),
  .playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss) .tile-grid::after { animation: none; }
  .playfield[data-phase='RIVER_FLOW'] .drifter:not(.boss) .tile-grid::after { opacity: .48; }
}