/* A brief portal and a few gold sparks; never intercept pointer input. */
.teleport-effects { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 20001; }
.teleport-spark, .teleport-ring { position: absolute; display: block; pointer-events: none; }
.teleport-spark { width: 7px; height: 7px; margin: -3px; background: #ffd787; clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); animation: teleport-drift .6s ease-out both; }
.teleport-ring { width: 72px; height: 72px; margin: -36px; border: 3px solid #b69aff; border-radius: 50%; box-shadow: 0 0 18px #9d72f5, inset 0 0 16px #9d72f5; animation: teleport-open .6s ease-out both; }
.teleport-arrival { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 20000; width: max-content; max-width: calc(100vw - 32px); padding: 14px 20px; border: 1px solid #b69aff; border-radius: 16px; background: #342068; color: #fff; box-shadow: 0 5px 22px #34206830; font-family: var(--font-body, sans-serif); font-size: 1rem; line-height: 1.5; text-align: center; pointer-events: none; }
.teleport-arrival:empty { visibility: hidden; }
@keyframes teleport-drift { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--drift-x), var(--drift-y)) scale(.25); } }
@keyframes teleport-open { from { opacity: 0; transform: scale(.35); } 20% { opacity: .85; } to { opacity: 0; transform: scale(3); } }
@media (prefers-reduced-motion: reduce) { .teleport-effects { display: none; } .teleport-spark, .teleport-ring { animation: none; } }
@media print { .teleport-effects, .teleport-arrival { display: none; } }