/* A compact, nonmodal invitation in the centre of the mobile viewport. */
html[data-layout="mobile"] .mobile-end {
  position: fixed; z-index: 90; top: 50%; left: 20px; right: 20px;
  display: grid; justify-items: center; gap: 12px;
  width: auto; max-width: 304px; margin-inline: auto; padding: 20px 22px 22px;
  max-height: calc(100vh - var(--mobile-nav-offset) - var(--mobile-nav-offset) - 24px);
  max-height: calc(100dvh - var(--mobile-nav-offset) - var(--mobile-nav-offset) - 24px);
  overflow-y: auto; overscroll-behavior-y: auto; touch-action: pan-y pinch-zoom; text-align: center;
  transform: translateY(-50%);
  color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 8px; background: color-mix(in srgb, var(--surf) 92%, transparent);
  box-shadow: 0 12px 40px rgba(16, 27, 20, .17);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  animation: mobile-end-arrive .48s cubic-bezier(.22, 1, .36, 1) both;
}
html[data-layout="mobile"] .mobile-end[hidden] { display: none; }
html[data-layout="mobile"] .mobile-end.is-leaving { animation: mobile-end-leave .24s ease-in both; }
html[data-layout="mobile"] .mobile-end-cat { width: 84px; height: 84px; }
html[data-layout="mobile"] .mobile-end-cat img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  animation: mobile-end-nod 2.6s ease-in-out 2;
}
html[data-layout="mobile"] .mobile-end-copy { min-width: 0; }
html[data-layout="mobile"] .mobile-end-title { margin: 0; font-size: 14px; line-height: 1.55; font-weight: 650; }
html[data-layout="mobile"] .mobile-end-message { margin: 7px 0 0; color: var(--text-2); font-size: 12px; line-height: 1.8; }
html[data-layout="mobile"] .mobile-end-action {
  min-height: 36px; padding: 6px 20px; border: 1px solid var(--line);
  border-radius: 4px; color: var(--accent-deep); background: var(--brass-soft); font-size: 12px;
  transition: background .2s ease, border-color .2s ease;
}
html[data-layout="mobile"][data-theme="dark"] .mobile-end-action { color: var(--text); }
html[data-layout="mobile"] .mobile-end-action:active { background: var(--surf-2); }
html[data-layout="mobile"] .mobile-end-action:focus-visible,
html[data-layout="mobile"] .mobile-end-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html[data-layout="mobile"] .mobile-end-close {
  position: absolute; top: 5px; right: 5px; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 5px; color: var(--dim); background: transparent; border: 0; border-radius: 4px;
}
html[data-layout="mobile"] .mobile-end-close svg { width: 17px; height: 17px; }
@keyframes mobile-end-arrive {
  from { opacity: 0; transform: translateY(-50%) translateY(12px) scale(.97); }
  to { opacity: 1; transform: translateY(-50%) translateY(0) scale(1); }
}
@keyframes mobile-end-leave { to { opacity: 0; transform: translateY(-50%) translateY(6px) scale(.985); } }
@keyframes mobile-end-nod {
  0%, 65%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-1px) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-layout="mobile"] .mobile-end,
  html[data-layout="mobile"] .mobile-end.is-leaving,
  html[data-layout="mobile"] .mobile-end-cat img { animation: none; }
}