/* UFO easter egg toast (js/ufo.js). Only styles the element ufo.js creates and removes. */
.ufo-toast {
  position: absolute;
  top: 3rem;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(24rem, calc(100% - 1.6rem));
  padding: 0.55rem 1rem 0.55rem 0.6rem;
  border-radius: 12px;
  font-family: var(--mono, monospace);
  color: var(--ink, #ece6da);
  background: rgba(8, 16, 18, 0.88);
  border: 1px solid rgba(125, 255, 208, 0.55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(125, 255, 208, 0.12), 0 0 28px rgba(125, 255, 208, 0.18);
  opacity: 0;
  transform: translate(-50%, -0.6rem) scale(0.96);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: none;
}
.ufo-toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ufo-t-icon { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: #10160f; background: #7dffd0; }
.ufo-t-body { display: flex; flex-direction: column; min-width: 0; }
.ufo-t-kicker { font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: #7dffd0; }
.ufo-t-body b { font-size: 0.84rem; font-weight: 600; line-height: 1.3; }
/* the achievements toast uses the same slot: sit just below it if both show */
.ach-toast.is-on ~ .ufo-toast { top: 7rem; }
@media (prefers-reduced-motion: reduce) { .ufo-toast, .ufo-toast.is-on { transition: opacity 0.2s; transform: translate(-50%, 0); } }
html.a11y-rm-on .ufo-toast, html.a11y-rm-on .ufo-toast.is-on { transition: opacity 0.2s; transform: translate(-50%, 0); }