/* ══ YOUR FIRST PAYMENT, PLAYED ═════════════════════════════════════  rp198, 21 Oct 2026 ══
   The layer assets/hyyryn-pay-route.js lays over the four stops: a gold line drawn along the route behind a coin,
   each stop's number lighting as the coin waits at it, the last one taking the coin. Nothing shows until it plays,
   and nothing plays under reduced motion. Wins on count (Mason 05). */
html body .pay-route .pr-stops { position: relative; }
html body .pay-route .pr-stop .pr-n { z-index: 1; transition: background 260ms ease, color 260ms ease, border-color 260ms ease, box-shadow 320ms ease, scale 320ms cubic-bezier(.34,1.56,.64,1); }
html body .pay-route .pr-play { position: absolute; inset: 0; pointer-events: none; }
html body .pay-route .pr-path { position: absolute; left: 0; top: 0; overflow: visible; opacity: 0; transition: opacity 300ms ease; }
html body .pay-route .pr-path polyline { fill: none; stroke: #D4A943; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
html body .pay-route:is(.is-playing, .is-played) .pr-path { opacity: 1; }
html body .pay-route .pr-coin {
  position: absolute; left: 0; top: 0; z-index: 3; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  display: grid; place-items: center; opacity: 0;
  font-family: var(--serif-display); font-size: 14px; line-height: 1; color: #0A1628;
  background: radial-gradient(circle at 35% 30%, #F3D58A, #D4A943 55%, #A9802E);
  box-shadow: 0 0 0 3px rgba(212,169,67,.22), 0 6px 14px -6px rgba(10,22,40,.55);
  transition: opacity 260ms ease, scale 360ms cubic-bezier(.16,1,.3,1);
}
html body .pay-route.is-playing .pr-coin { opacity: 1; }
html body .pay-route .pr-coin.is-landed { opacity: 0; scale: .4; }
html body .pay-route .pr-stop.is-past .pr-n { border-color: #0A1628; }
html body .pay-route .pr-stop.is-lit .pr-n {
  background: #0A1628; border-color: #0A1628; color: #FAF8F3; scale: 1.14;
  box-shadow: 0 0 0 5px rgba(212,169,67,.28);
}
html body .pay-route .pr-stop { transition: opacity 300ms ease; }
html body .pay-route.is-playing .pr-stop:not(.is-past) { opacity: .55; }
@media (prefers-reduced-motion: reduce) { html body .pay-route .pr-play { display: none; } }
@media print { html body .pay-route .pr-play { display: none; } }