/* ==========================================================
   pwa.css — PWA / Standalone / Safe Area 專用樣式
   只處理「安裝環境」相關的排版，不動 battle.css 既有的
   戰場 / HUD / 角色站位規則本體，只疊加必要的 safe-area 保護
   與 standalone 模式下的 layout 覆蓋。
   ========================================================== */

:root {
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* App 可視高度：集中定義一次，其餘地方一律 var(--app-height) 沿用，
     不要在各處各自重複宣告 100vh/100dvh fallback。
     dvh 排除網址列出現/消失造成的高度跳動，是行動裝置上比 vh 更準的可視高度；
     不支援 dvh 的瀏覽器會忽略第二行，安全 fallback 回 100vh。 */
  --app-height: 100vh; /* fallback */
  --app-height: 100dvh;
}

/* ---------- Safe Area：只保護重要 UI，不限制背景/戰場 ---------- */

#battle-hud {
  padding-left: calc(clamp(10px, 2vw, 22px) + var(--safe-left));
  padding-right: calc(clamp(10px, 2vw, 22px) + var(--safe-right));
  padding-bottom: calc(clamp(8px, 1.6vh, 16px) + var(--safe-bottom));
}

/* Skill Menu 永遠不能超出 viewport：safe-area 感知的定位 + 最大高度上限。
   一般瀏覽器分頁沒有 env(safe-area-inset-*) 時，這些 var() 會 fallback 回 0px，
   等同 battle.css 裡的預設值，不影響 Desktop / 一般手機瀏覽器。 */
#skill-menu {
  right: calc(var(--safe-right, 0px) + 8px);
  bottom: calc(var(--safe-bottom, 0px) + 8px);
  max-height: calc(var(--app-height, 100vh) - var(--safe-top, 0px) - var(--safe-bottom, 0px) - 16px);
}

/* Compact Skill Menu：手機 Landscape 且可用高度較小時，
   面板/按鈕改用緊湊尺寸，確保 CLOCK UP / RIDER KICK / 返回 都能完整放進畫面。
   同時順手檢查 Command Menu（攻擊/技能/防禦/道具）在同樣情境下也不會被裁切。 */
@media (orientation: landscape) and (max-height: 500px) {
  #skill-menu {
    gap: 6px;
    padding: 8px;
  }

  .skill-list {
    gap: 6px;
  }

  .skill-btn {
    min-height: clamp(48px, 12dvh, 64px);
    padding: 8px 12px;
    font-size: clamp(15px, 2.2dvh, 20px);
  }

  .skill-btn .skill-cost {
    font-size: clamp(12px, 1.8dvh, 15px);
  }

  .skill-btn--back {
    min-height: 44px;
    padding: 6px 12px;
    font-size: clamp(14px, 2dvh, 18px);
  }

  .cmd-grid {
    gap: 6px;
  }

  .cmd-btn {
    /* 觸控高度下限固定 44px（不再隨 dvh 縮到更小），上限仍隨可用高度放大 */
    min-height: clamp(44px, 10dvh, 48px);
    padding: 6px 6px;
    font-size: clamp(13px, 1.8dvh, 16px);
  }
}

#orientation-warning {
  padding-left: calc(24px + var(--safe-left));
  padding-right: calc(24px + var(--safe-right));
  padding-top: calc(24px + var(--safe-top));
  padding-bottom: calc(24px + var(--safe-bottom));
}

#result-overlay {
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
}

/* CUT-IN 文字疊加層：避免太靠近瀏海 / Dynamic Island 那一側 */
#cutin-text {
  left: calc(6% + var(--safe-left));
}

/* ---------- iOS Safari 未安裝提示（非阻擋式） ---------- */

#pwa-install-hint {
  position: fixed;
  left: calc(50% + (var(--safe-left) - var(--safe-right)) / 2);
  top: calc(10px + var(--safe-top));
  transform: translateX(-50%);
  z-index: 10000; /* 刻意高於 CUT-IN(500)，屬於系統層級通知，但只在未安裝時短暫出現 */
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px - var(--safe-left) - var(--safe-right));
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  background: rgba(20, 20, 30, 0.92);
  border: 1px solid #ffffff33;
  color: #fff;
  font-size: clamp(11px, 1.6vh, 13px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

#pwa-install-hint-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pwa-install-hint-dismiss {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #ffffff55;
  background: #ffffff1a;
  color: #fff;
  font-size: clamp(11px, 1.6vh, 13px);
  font-weight: 700;
}

#pwa-install-hint-dismiss:active {
  background: #ffffff33;
}

/* ---------- Standalone (已安裝 / Home Screen 啟動) Layout ---------- */

@media (display-mode: standalone) {
  html,
  body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #000;
  }

  #battle-root {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh; /* fallback */
    width: 100dvw;
    height: 100dvh;
  }

  /* Standalone 模式下已經是全螢幕 App，不需要再提示加入主畫面 */
  #pwa-install-hint {
    display: none;
  }
}