/* Small corner "install this app" invitation (see public/js/pwa-install.js). Not a modal: no backdrop, no focus
   trap, page stays scrollable and interactive around it. */
.pwa-invite {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: auto;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 16px 14px;
  border-radius: 20px;
  border: 2px solid #1f9bf0;
  background: radial-gradient(120% 130% at 10% 0%, #0d2c57 0%, #0a1733 45%, #070d1c 100%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 220, 245, 0.08);
  color: var(--text, #eef2fb);
  font-family: "DM Sans", "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.pwa-invite.is-in { opacity: 1; transform: translateY(0) scale(1); }

/* Bigger than the card and pulled past its top-left corner on purpose — .pwa-invite never clips (no overflow:hidden). */
.pwa-mascot { width: 140px; height: 140px; flex-shrink: 0; margin: -46px 0 -34px -34px; pointer-events: none; }
.pwa-mascot svg { width: 100%; height: 100%; display: block; overflow: visible; }

.pwa-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-right: 20px; }
.pwa-h { margin: 0; font: 700 18px/1.25 "Outfit", "DM Sans", system-ui, sans-serif; color: #fff; text-wrap: balance; }
.pwa-b { margin: 0; color: #b9c3da; font-size: 13.5px; line-height: 1.45; }

.pwa-install-btn {
  margin-top: 6px; width: 100%; min-height: 42px; border: 0; border-radius: 999px;
  background: #22e6fb; color: #03121f; font: 700 15px/1 "Outfit", "DM Sans", system-ui, sans-serif;
  cursor: pointer;
}
.pwa-install-btn:hover, .pwa-install-btn:focus-visible { background: #5beaff; }

.pwa-close {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.08); color: #cfd6e6;
  font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.pwa-close:hover, .pwa-close:focus-visible { background: rgba(255, 255, 255, 0.18); color: #fff; }

.pwa-instructions { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: #dfe4ee; font-size: 13px; line-height: 1.5; }
.pwa-instructions strong { color: #fff; }

/* Mascot bounce: two short cycles on arrival, then stays at rest (the sticker itself keeps looping — see
   public/js/pwa-install.js — this is just an extra flourish on the whole container). Skipped under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .pwa-invite.is-in .pwa-mascot { animation: pwa-bounce 0.7s ease-in-out 0.3s 2; }
}
@keyframes pwa-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 480px) {
  .pwa-invite {
    right: 16px; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto;
  }
}