/* Celebratory feedback is local to this small card, never a screen takeover. */
.ride-sendoff { position: fixed; z-index: 1000; inset: auto 20px max(20px, env(safe-area-inset-bottom)) auto; display: flex; align-items: center; gap: 16px; width: min(390px, calc(100vw - 32px)); margin: 0; padding: 18px 12px 18px 20px; box-sizing: border-box; border: 1px solid #4A5872; border-radius: 12px; background: #13294B; color: #F7F3EA; box-shadow: 0 8px 30px rgb(0 0 0 / .16); font: 400 1rem/1.4 var(--font-body); }
.ride-sendoff[hidden] { display: none; }
.sendoff-art { position: relative; flex: 0 0 44px; width: 44px; height: 44px; }
.sendoff-art img { display: block; width: 44px; height: 44px; }
.sendoff-art i { position: absolute; top: 20px; left: 20px; width: 4px; height: 4px; border-radius: 50%; background: #FF9EC0; opacity: 0; --x: -28px; --y: -22px; }
.sendoff-art i:nth-of-type(2) { --x: 25px; --y: -26px; }
.sendoff-art i:nth-of-type(3) { --x: 30px; --y: 18px; }
.sendoff-art i:nth-of-type(4) { --x: -24px; --y: 25px; }
.sendoff-copy { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.sendoff-copy strong { display: block; font: 600 1.35rem/1.15 var(--font-display); margin-bottom: 5px; }
.sendoff-copy span { display: block; font-size: .875rem; color: #C9D6E8; }
.sendoff-copy em { display: block; margin-top: 6px; font-style: normal; font-size: .875rem; color: #FF9EC0; font-variant-numeric: tabular-nums; }
.sendoff-close { all: unset; box-sizing: border-box; display: grid; place-items: center; flex: 0 0 44px; min-height: 44px; cursor: pointer; color: #F7F3EA; font: 400 24px/1 var(--font-body); border-radius: 6px; }
.sendoff-close:focus-visible { outline: 3px solid #FF9EC0; outline-offset: 0; }
.sendoff-play .sendoff-art img { animation: sendoff-roll 700ms cubic-bezier(.2,.7,.25,1) both; }
.sendoff-play .sendoff-art i { animation: sendoff-spark 600ms ease-out 200ms both; }
@keyframes sendoff-roll { 0% { transform: translateX(-16px) rotate(-42deg); opacity: 0; } 65% { transform: translateX(2px) rotate(5deg); opacity: 1; } 100% { transform: translateX(0) rotate(0); opacity: 1; } }
@keyframes sendoff-spark { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) scale(.4); } }
@media(max-width: 500px) { .ride-sendoff { right: 16px; gap: 12px; padding-left: 16px; } }
@media(prefers-reduced-motion: reduce) { .sendoff-play .sendoff-art img, .sendoff-play .sendoff-art i { animation: none; } }