/* The install dialog is ordinary help, never an automatic interrupt. */
#install-dialog { inline-size: min(560px, calc(100% - 32px)); color: var(--ink); }
#install-dialog .product-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
#install-title { margin: 0; overflow-wrap: anywhere; }
#install-help { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
#install-help ol { margin: 0; padding-inline-start: 24px; }
#install-help li + li { margin-block-start: 12px; }
#install-help .install-note { margin-block-start: 22px; font-size: 12px; color: #b9c5aa; }
#install-close { flex: 0 0 auto; min-inline-size: 44px; min-block-size: 44px; }
#pwa-update { min-block-size: 44px; padding-block: 12px; color: var(--accent); }
#install-status:not([hidden]) { color: var(--muted); font-size: 12px; line-height: 1.6; }
.in-room #pwa-update { display: none; }
.in-room #install-open { display: none; }

/* Only standalone chrome is inset here; the game viewport owns its safe areas. */
@media (display-mode: standalone) {
  #install-open { display: none; }
  :root { --page-gutter: max(clamp(16px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right)); }
  body > .masthead { padding-block-start: calc(24px + env(safe-area-inset-top)); }
  body > footer { padding-block-end: calc(38px + env(safe-area-inset-bottom)); }
  #install-dialog { max-block-size: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
@media (display-mode: standalone) and (max-width: 600px) {
  body > .masthead { padding-block-start: calc(16px + env(safe-area-inset-top)); }
  body > footer { padding-block-end: calc(32px + env(safe-area-inset-bottom)); }
}