/* ==========================================================================
   immersive.css v2 — 修：版型跑掉 + iPad status bar 沒消失
   - 用 100dvh 動態 viewport 自動避開 Safari UI
   - player-controls 不 fixed (留在 flex 容器內)
   - 滾動觸發 Safari 隱藏 address bar
   ========================================================================== */

/* 進入播放時：body 加 .playing */
html, body { height: 100%; }
body.playing { overflow: hidden; height: 100dvh; height: 100vh; }

body.playing #playerView {
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 0;
  background: linear-gradient(135deg, #1a1530 0%, #3D2D4D 100%);
  height: 100dvh; /* 動態 viewport — iOS Safari 16.4+ 自動避開上下 UI */
  display: flex;
  flex-direction: column;
}

/* 隱藏原 header (上方標題列)，改成浮動 ✕ 按鈕 */
body.playing .player-header {
  display: none;
}

/* 浮動 ✕ 退出按鈕 (永遠可見、可點) */
body.playing::before {
  content: "✕";
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 12px));
  right: 16px;
  width: 48px; height: 48px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  border-radius: 50%;
  color: white;
  font-size: 24px;
  font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  pointer-events: auto;
  cursor: pointer;
}

/* 主舞台 flex: 1 自動填滿 */
body.playing .book-stage {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  min-height: 0; /* flex item 必要 */
  position: relative;
}

/* 控制列：在 flex 容器底部自然排列 (不 fixed) */
body.playing .player-controls {
  position: relative;
  flex-shrink: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(20px);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  display: flex; gap: 12px; justify-content: center;
}

/* 全螢幕模式（API 觸發成功時）優化 */
:fullscreen body.playing #playerView,
:-webkit-full-screen body.playing #playerView {
  height: 100vh;
}
:fullscreen body.playing::before,
:-webkit-full-screen body.playing::before {
  top: 12px; /* 全螢幕 status bar 已隱藏，不需 safe-area */
}

/* 內頁 .page 自然填滿 .book-stage */
body.playing .book-stage .page {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}
body.playing .book-stage .scene-area {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
body.playing .book-stage .bubble-area {
  flex-shrink: 0;
  height: auto;
  min-height: 180px;
}

/* iPad 12.9 橫向 */
@media (min-width: 1200px) and (orientation: landscape) {
  body.playing .bubble-area {
    min-height: 200px;
  }
  body.playing .bubble {
    font-size: 22px;
    line-height: 1.7;
  }
}