/* =====================================================================================
   INKWAVE — "add to home screen" hint (src/ui/installPrompt.js). A small card with a bouncing arrow pointing at the
   browser's share / ⋮ button: top-right, or bottom-centre for iPhone Safari in portrait (no arrow when Chrome lets us
   open the install dialog directly). Sits above the menus and the portrait "rotate your phone" screen.
   ===================================================================================== */
.iw-a2hs {
  position: fixed; z-index: 75; pointer-events: none;
  right: calc(6px + env(safe-area-inset-right, 0px)); top: calc(6px + env(safe-area-inset-top, 0px));
  display: flex; align-items: flex-start; gap: 6px;
  font: 500 12.5px/1.45 'Rubik', system-ui, sans-serif; color: #fff;
  opacity: 0; translate: 0 -16px; transition: opacity 260ms ease, translate 260ms ease;
}
.iw-a2hs[data-where="bottom"] {
  top: auto; right: auto; left: 50%; bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); flex-direction: column; align-items: center; translate: 0 16px;
}
.iw-a2hs.is-on, .iw-a2hs.is-on[data-where] { opacity: 1; translate: 0 0; }
.iw-a2hs__card {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 10px;
  width: min(380px, calc(100vw - 80px)); box-sizing: border-box;
  margin-top: 14px; padding: 10px 36px 10px 10px; border-radius: 14px;
  background: rgba(20, 24, 46, .94); border: 2px solid #ff8a14;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.iw-a2hs__app { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.iw-a2hs__text { flex: 1 1 auto; min-width: 0; }
.iw-a2hs__title { font: 400 15px/1.2 'Titan One', 'Rubik', system-ui, sans-serif; color: #ffb35c; margin-bottom: 3px; letter-spacing: .02em; }
.iw-a2hs__body b { color: #ffd9a8; font-weight: 700; white-space: nowrap; }
.iw-a2hs__ico { width: 1.25em; height: 1.25em; vertical-align: -.25em; margin-right: 1px; color: #6fc3ff; }
.iw-a2hs__close {
  position: absolute; top: 2px; right: 2px; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: transparent; color: #aab;
  font: 400 22px/1 system-ui, sans-serif; cursor: pointer;
}
.iw-a2hs__go {
  flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 20px;
  background: #ff8a14; color: #1a1030; font: 700 14px/1 'Rubik', system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 3px 0 #b45a00;
}
.iw-a2hs__go:active { translate: 0 2px; box-shadow: 0 1px 0 #b45a00; }
.iw-a2hs__arrow { flex: none; width: 34px; height: 48px; color: #ff8a14; rotate: 180deg; filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .5)); animation: iw-a2hs-bob 1s ease-in-out infinite; }
.iw-a2hs__arrow svg { width: 100%; height: 100%; display: block; }
@keyframes iw-a2hs-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.iw-a2hs[data-where="bottom"] .iw-a2hs__card { margin-top: 0; width: min(380px, calc(100vw - 24px)); }
.iw-a2hs[data-where="bottom"] .iw-a2hs__arrow { rotate: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); animation-name: iw-a2hs-bob-down; }
@keyframes iw-a2hs-bob-down { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }
/* narrow (portrait) screens: without an arrow the card takes the full width, and the install button drops below the text */
.iw-a2hs__card:only-child { width: min(380px, calc(100vw - 24px)); }
@media (max-width: 500px) {
  .iw-a2hs__card { flex-wrap: wrap; }
  .iw-a2hs__text { flex: 1 1 0; }
  .iw-a2hs__go { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .iw-a2hs__arrow { animation: none; } }