/* ============================================================
   图片绘本 — 全屏沉浸式阅读皮肤
   仅在 type==='picture' 的故事页加载（head 中排在 style.css 之后）
   规则一律限定在 body[data-mode="book"]，切到「文字版」即回到常规站点。
   z-index 预算：stage 1 / track 2 / 页码 3 / caption 6 /
                 顶栏与朗读条 150 / 设置面板 250 / bgm-sheet 300（最高）
   ============================================================ */

html { scroll-behavior: auto !important; }

body[data-mode="book"] {
  background: #0d1730;
  color: #f1ebe0;
  height: 100dvh;
  overflow: hidden;
  padding-bottom: 0 !important;
  overscroll-behavior: none;
}

/* 全屏时收掉站点外壳；文字正文用 sr-only 保留给 SEO / 朗读 / 无障碍 */
body[data-mode="book"] .nav,
body[data-mode="book"] .bottom-nav,
body[data-mode="book"] .footer,
body[data-mode="book"] .install-tip,
body[data-mode="book"] .crumb,
body[data-mode="book"] .progress-bar,
body[data-mode="book"] .tip-box,
body[data-mode="book"] main > .sec { display: none !important; }

body[data-mode="book"] .reader {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

/* ---------------- 舞台与氛围底 ---------------- */
.book-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: #0d1730;
  color: #f1ebe0;
  overflow: hidden;
}

.book-backdrop {
  position: absolute;
  inset: -12%;
  background-color: #0d1730;
  background-position: center;
  background-size: cover;
  filter: blur(38px) brightness(.42) saturate(.85);
  opacity: .7;
  pointer-events: none;
}

/* ---------------- 顶栏 ---------------- */
.book-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  height: calc(52px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(8, 15, 32, .92), rgba(8, 15, 32, 0));
}

.book-back,
.book-topacts button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  border: 1px solid rgba(255, 213, 94, .22);
  background: rgba(20, 32, 60, .72);
  color: #f0e4c8;
  font-size: 14px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.book-back { font-size: 18px; text-decoration: none; }
.book-topacts button:active,
.book-back:active { background: rgba(255, 213, 94, .18); }
.book-topacts button.on { color: #ffd55e; border-color: rgba(255, 213, 94, .6); }

.book-topinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.book-top-title {
  font-size: 14px; font-weight: 600; color: #f5ecda;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.book-top-page { font-size: 11px; letter-spacing: .12em; color: #d6bd86; font-variant-numeric: tabular-nums; }
.book-topacts { display: flex; align-items: center; gap: 5px; flex: none; }

.book-progress {
  position: absolute;
  top: calc(52px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  height: 2px;
  z-index: 151;
  background: rgba(255, 255, 255, .08);
}
.book-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: #ffd55e;
  box-shadow: 0 0 10px rgba(255, 213, 94, .7);
  transition: width .28s ease;
}

/* ---------------- 横向翻页 ---------------- */
.book-track {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
}
.book-track::-webkit-scrollbar { display: none; }

.book-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;              /* 不加会被 min-width:auto 撑到 480，超出屏幕被截 */
  max-width: 100%;
  height: 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 12px calc(146px + env(safe-area-inset-bottom, 0px));
  /* 用 vw/dvh 计算，不依赖百分比，避免尺寸循环解析。
     75dvh-170 对应「上下 padding 之外的可用高度 × 3/4」，比实际略小，
     矮屏上也不会顶出可视区（3:4 = 宽 0.75 × 高）。 */
  --book-frame-w: min(calc(100vw - 24px), 480px, calc(75dvh - 170px));
}

/* 跟读层出现时把画面抬高缩小，让字幕整块落在画面下方，不压插画也不压页码。
   预留高度 = 字幕底距 78 + 字幕内边距 38 + 文字上限 20dvh + 间隙 10 = 20dvh + 126 */
body[data-caption-on="1"] .book-page {
  padding-bottom: calc(20dvh + 126px + env(safe-area-inset-bottom, 0px));
  --book-frame-w: min(calc(100vw - 24px), 420px, calc(54dvh - 115px));
}

.book-frame {
  position: relative;
  width: var(--book-frame-w);
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: #0d1730;
  box-shadow: 0 22px 64px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 213, 94, .2), 0 0 42px rgba(255, 213, 94, .1);
}

.book-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 原图左下角自带页码（封面还写错成 01/03），统一用深蓝圆角底块盖住重绘。
   相对 .book-frame 定位，object-fit:contain 时不会随留白漂移。 */
.book-pageno {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: 8px;
  background: #0d1730;
  border: 1px solid rgba(255, 213, 94, .18);
  color: #e3c588;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* ---------------- 大字跟读层 / 手动翻页提示 ---------------- */
.book-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  padding: 20px 22px 18px;
  background: linear-gradient(180deg, rgba(10, 18, 38, 0), rgba(10, 18, 38, .9) 22%, rgba(10, 18, 38, .96));
  pointer-events: none;
}
.book-caption p {
  max-width: 520px;
  margin: 0 auto;
  max-height: 20dvh;
  overflow-y: auto;
  color: #f6ecd8;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.72;
  letter-spacing: .02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
  pointer-events: auto;
}

.book-swipe-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  text-align: center;
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(240, 226, 197, .82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  pointer-events: none;
  animation: bookHintPulse 2.6s ease-in-out infinite;
}
@keyframes bookHintPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------------- 朗读条（#bookBar 里装着搬过来的 .read-bar） ---------------- */
.book-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 150;
  padding: 0 10px;
}
.book-bar .read-bar {
  max-width: 560px;
  margin: 0 auto;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 8px;
  border-radius: 14px;
  background: rgba(14, 24, 48, .82);
  border: 1px solid rgba(255, 213, 94, .16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body[data-mode="book"] .read-btn {
  min-height: 40px;
  min-width: 86px;
  padding: 0 16px;
  border-color: rgba(255, 213, 94, .4);
  background: rgba(255, 213, 94, .12);
  color: #ffd55e;
}
body[data-mode="book"] .read-btn.is-playing { background: #ffd55e; border-color: #ffd55e; color: #14203c; }
body[data-mode="book"] .voice-switch { height: 40px; border-color: rgba(255, 255, 255, .18); }
body[data-mode="book"] .voice-opt {
  background: transparent;
  color: rgba(240, 228, 200, .72);
  border-right-color: rgba(255, 255, 255, .12);
}
body[data-mode="book"] .voice-opt.on { background: rgba(255, 213, 94, .18); color: #ffd55e; }
body[data-mode="book"] .bgm-btn {
  height: 40px;
  border-color: rgba(255, 255, 255, .18);
  background: transparent;
  color: rgba(240, 228, 200, .72);
}
body[data-mode="book"] .bgm-btn.on { background: rgba(255, 213, 94, .14); color: #ffd55e; border-color: rgba(255, 213, 94, .4); }
/* 状态文字在窄屏会把一行撑爆：绘本页改成浮在朗读条上方的极简小字 */
body[data-mode="book"] .read-bar { position: relative; }
body[data-mode="book"] .read-status {
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  font-size: 11.5px;
  line-height: 1.4;
  min-height: 0;
  width: auto;
  text-align: center;
  color: rgba(240, 228, 200, .7);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* 一次性轻提示（例如「已暂停，点朗读从这一页继续」） */
.book-tip {
  position: absolute;
  left: 50%;
  top: calc(64px + env(safe-area-inset-top, 0px));
  z-index: 160;
  transform: translate(-50%, -6px);
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(14, 24, 48, .94);
  border: 1px solid rgba(255, 213, 94, .24);
  color: #f0e4c8;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.book-tip.on { opacity: 1; transform: translate(-50%, 0); }

/* 加载浮层：底栏隐藏后要重新定位，避免悬在屏幕中下 */
body[data-mode="book"] .tts-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }

/* ---------------- 读完啦 ---------------- */
.book-end { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
.book-end-card {
  width: min(100%, 420px);
  text-align: center;
  padding: 30px 24px 26px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 0%, rgba(255, 213, 94, .14), rgba(16, 26, 50, .92) 62%);
  border: 1px solid rgba(255, 213, 94, .2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.book-end-glow { font-size: 26px; color: #ffd55e; margin-bottom: 8px; text-shadow: 0 0 22px rgba(255, 213, 94, .8); }
.book-end-card h2 { font-family: var(--serif); font-size: 25px; color: #f8efdb; margin-bottom: 10px; }
.book-end-card > p { font-size: 14.5px; line-height: 1.8; color: rgba(240, 228, 200, .78); margin-bottom: 22px; }
.book-end-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.book-end-btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid rgba(255, 213, 94, .3);
  background: rgba(255, 255, 255, .04);
  color: #f0e4c8;
  font-size: 14px;
}
.book-end-btn.primary { background: #ffd55e; border-color: #ffd55e; color: #14203c; font-weight: 600; }
.book-end-btn.on { color: #ffd55e; border-color: rgba(255, 213, 94, .6); }
.book-end-home { font-size: 13px; color: rgba(240, 228, 200, .6); border-bottom: 1px solid rgba(240, 228, 200, .24); padding-bottom: 2px; }

/* ---------------- 阅读设置面板（低于 .bgm-sheet 的 300） ---------------- */
.book-settings {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 8, 18, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.book-settings-card {
  width: min(100%, 420px);
  padding: 20px 20px 16px;
  border-radius: 16px;
  background: #16223e;
  border: 1px solid rgba(255, 213, 94, .16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.book-settings-card h3 { font-size: 15px; color: #f5ecda; margin-bottom: 6px; }
.book-size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.book-size-row > span { font-size: 14.5px; color: #f0e4c8; }
.book-size-ctl { display: flex; gap: 6px; }
.book-size-ctl button {
  min-width: 46px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255, 213, 94, .28);
  background: rgba(255, 255, 255, .04);
  color: #f0e4c8;
  font-size: 14px;
}
.book-size-ctl button:active { background: rgba(255, 213, 94, .18); }
.book-settings-text {
  width: 100%;
  height: 42px;
  margin-top: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 213, 94, .3);
  background: rgba(255, 255, 255, .04);
  color: #f0e4c8;
  font-size: 14.5px;
}
.book-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  cursor: pointer;
}
.book-opt > span { flex: 1; font-size: 14.5px; color: #f0e4c8; line-height: 1.5; }
.book-opt small { display: block; font-size: 12px; color: rgba(240, 228, 200, .55); margin-top: 2px; }
.book-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.book-opt i {
  flex: none;
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .16);
  transition: background .2s;
}
.book-opt i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.book-opt input:checked + i { background: #ffd55e; }
.book-opt input:checked + i::after { transform: translateX(18px); }
.book-opt input:focus-visible + i { outline: 2px solid #ffd55e; outline-offset: 2px; }
.book-settings-close {
  width: 100%;
  height: 44px;
  margin-top: 16px;
  border-radius: 10px;
  background: #ffd55e;
  color: #14203c;
  font-size: 15px;
  font-weight: 600;
}

/* 文字版里出现的「回到绘本」入口 */
.back-to-book {
  font-size: 14px;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-btn);
  padding: 6px 12px;
  background: var(--card);
}

/* ---------------- 矮屏 / 窄屏 ---------------- */
@media (max-height: 720px) {
  .book-page { padding: calc(56px + env(safe-area-inset-top, 0px)) 10px calc(120px + env(safe-area-inset-bottom, 0px)); }
  body[data-caption-on="1"] .book-page { padding-bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
  .book-caption p { font-size: 21px; max-height: 22dvh; }
  .book-topbar { height: calc(46px + env(safe-area-inset-top, 0px)); }
  .book-progress { top: calc(46px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 400px) {
  .book-top-title { font-size: 13px; }
  .book-caption { padding: 16px 16px 14px; }
  .book-caption p { font-size: 22px; }
  .book-bar .read-bar { gap: 6px; padding: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .book-track { scroll-behavior: auto; }
  .book-progress i { transition: none; }
  .book-swipe-hint { animation: none; }
}