/* ============================================================
   install-prompt — P05 Chromium Install CTA
   Q218 起為 modal：全螢幕遮罩＋置中卡片（比照 Q215 的 install-guide-ios）。
   ============================================================ */

/* Q218：modal 遮罩——吃掉整頁觸控，底下的模組卡不再「看得到一角卻點不到」。
   z-index 沿用原本的 120；卡片置中，safe-area 由遮罩 padding 讓開。 */
.kw-install-cta-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    calc(12px + env(safe-area-inset-right, 0px))
    calc(12px + env(safe-area-inset-bottom, 0px))
    calc(12px + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  overflow-y: auto;
  background: rgba(47, 49, 51, 0.45);
  animation: kw-install-cta-fade 180ms ease-out;
  /* D29：.clay-card 預設 font-family: var(--clay-font)（'Open Huninn' 開頭）
     ——這張卡開機就掛在 app shell 上（js/app.js mountInstallPrompt()，非
     lazy route），跟 css/pages/home.css 的 .home-page 覆寫同理，這裡也要蓋
     回系統字，否則首屏會真的請求 2.08MB 的 jf-openhuninn-2.1.woff2（D29
     實測：拿掉這條覆寫，首屏從 ~0.88MB 跳到 ~2.97MB，見
     docs/plans/evidence/2026-09-15-omni-d29/）。 */
  font-family: var(--font-display);
}

.kw-install-cta {
  width: 100%;
  max-width: 480px;
  margin: auto;
  /* 卡片本身是 .clay-card，會帶自己的 font-family——同上理由再蓋一次。
     進場只由遮罩淡入；卡片不再 translateY（位移中量到的 rect 會帶浮點誤差，
     置中的 modal 也不需要「從底部滑上來」）。 */
  font-family: var(--font-display);
}

.kw-install-cta-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

/* .clay-btn 自帶 `font: 700 24px/1.15 var(--clay-font)`，font-family 是顯式
   宣告、不會被上面 .kw-install-cta 的 inherit 蓋掉，必須在按鈕層再覆寫一次。 */
.kw-install-cta-install,
.kw-install-cta-dismiss {
  font-family: var(--font-display);
}

/* D26 (1)：橫向遊玩建議——文字給旁邊的大人看，字級略小、與主文案拉開層次 */
.kw-install-cta-landscape-hint {
  margin: 2px 0 8px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.85;
}

.kw-install-cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kw-install-cta-install {
  flex: 1;
}

@keyframes kw-install-cta-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kw-install-cta-backdrop {
    animation: none;
  }
}