/* 翻页书：3D 透视 + 书脊/纸页光影，桌面双页、移动端单页 */
/* 诗集页：无页眉，书尽量占满视口 */
.page-book .masthead { display: none; }
.page-book .wrap { padding-top: 4px; }
.page-book .site-footer { margin-top: 8px; }

.book-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1040px; margin: 0 auto; padding: 10px 20px 6px;
}
.book-nav { display: flex; align-items: center; gap: 14px; }
.book-nav button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 1.3rem; cursor: pointer; transition: all .2s;
}
.book-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.book-nav button:disabled { opacity: .35; cursor: default; }
#pageIndicator { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 72px; text-align: center; }

.book {
  position: relative; margin: 8px auto 0;
  width: min(1054px, 96vw);
  height: max(520px, min(940px, calc(100vh - 160px)));
  perspective: 2200px;
}
.book-inner { position: absolute; inset: 0; transform-style: preserve-3d; }

/* 左侧（未翻开时的桌面占位） */
.book::before {
  content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%;
  background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 14px 6px 6px 14px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.05);
  z-index: 0;
}

.leaf {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.42, .05, .28, 1);
  /* 不给所有页常驻 will-change：诗集 137 页 = 137 个常驻合成层，
   * 手机上内存与合成开销巨大。只给正在翻的那一页提层（见 .leaf.turning）。 */
}
.leaf.turning { will-change: transform; }
.leaf.flipped { transform: rotateY(-180deg); }

.page-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  /* 影子不能画在每一页上：右堆几十张未翻页几乎同位叠放，
   * 每张一圈 0 6px 18px 的影子乘起来就是一圈近黑的边框（暗主题下最明显）。
   * 影子只给 .leaf.top（摊开的两张）和 .leaf.turning（悬空的那张），见下。 */
  box-shadow: none;
  transition: box-shadow .3s;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* 摊开在上的左右两页：一层柔和的桌面投影 */
.leaf.top .page-face { box-shadow: 0 6px 18px rgba(0,0,0,.09); }
/* 正在翻的页：悬空在半空，影子更远更重，落下时随 .top 恢复 */
.leaf.turning .page-face { box-shadow: 0 14px 30px rgba(0,0,0,.16); }
/* 暗主题下深色描边会在近黑背景上跳成一圈黑框——改成一条极淡的受光纸缘，
 * 纸的轮廓交给色差和影子去界定 */
[data-theme="dark"] .page-face { border-color: rgba(255, 255, 255, .05); }
.leaf-front { border-radius: 6px 14px 14px 6px; padding: 36px 40px 36px 46px; }
.leaf-back {
  transform: rotateY(180deg);
  border-radius: 14px 6px 6px 14px;
  padding: 36px 46px 36px 40px;
}

/* 书脊阴影：右页靠左、左页靠右 */
.leaf-front::before, .leaf-back::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 30px;
  pointer-events: none; z-index: 1;
}
.leaf-front::before { left: 0; background: linear-gradient(to right, rgba(0,0,0,.12), transparent); }
.leaf-back::before { right: 0; background: linear-gradient(to left, rgba(0,0,0,.12), transparent); }

/* 纸页弯折光影：翻动时扫过（暗端要淡、且在页缘前先散开——
 * 0.32 的黑聚在 96% 处会在右缘形成一根突兀的黑柱） */
.leaf-front::after, .leaf-back::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2;
}
.leaf.turning .leaf-front::after {
  background: linear-gradient(to right, rgba(255,255,255,.22) 6%, rgba(0,0,0,.03) 40%, transparent 70%, rgba(0,0,0,.12) 100%);
  animation: curlFront 1.05s ease forwards;
}
.leaf.turning .leaf-back::after {
  background: linear-gradient(to left, rgba(255,255,255,.18) 6%, rgba(0,0,0,.03) 40%, transparent 70%, rgba(0,0,0,.11) 100%);
  animation: curlBack 1.05s ease forwards;
}
@keyframes curlFront { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes curlBack  { 0% { opacity: 0; } 55% { opacity: .95; } 100% { opacity: 0; } }

/* 纸页卷曲：翻动中正反面以不同相位明显弯折并微微下垂，柔软如纸 */
.leaf.turning .leaf-front { animation: bendFront 1.05s cubic-bezier(.42, .05, .28, 1) forwards; }
.leaf.turning .leaf-back { animation: bendBack 1.05s cubic-bezier(.42, .05, .28, 1) forwards; }
@keyframes bendFront {
  0%   { transform: rotateY(0deg) translateY(0); }
  45%  { transform: rotateY(-42deg) translateY(10px); }
  100% { transform: rotateY(0deg) translateY(0); }
}
@keyframes bendBack {
  0%   { transform: rotateY(180deg) translateY(0); }
  55%  { transform: rotateY(238deg) translateY(10px); }
  100% { transform: rotateY(180deg) translateY(0); }
}

/* 底页动态投影：翻动时落在下方纸面上（0.30 太重，翻页瞬间像糊了块黑布） */
.book-inner::after {
  content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%;
  pointer-events: none; opacity: 0; z-index: 400;
  background: linear-gradient(to right, rgba(0,0,0,.16), rgba(0,0,0,0) 62%);
}
.book.turning-next .book-inner::after { animation: underShadow 1.05s ease forwards; }
.book.turning-prev .book-inner::after {
  left: auto; right: 0;
  background: linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,0) 62%);
  animation: underShadow 1.05s ease forwards;
}
@keyframes underShadow { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

/* 页面内容 */
/* 诗题/篇名：每篇首面左对齐标题（.simple-page 为移动极简模式，样式与书页一致） */
.page-face .p-head, .simple-page .p-head { text-align: left; flex-shrink: 0; }
.page-face .p-head h2, .simple-page .p-head h2 {
  margin: 0 0 6px; font-size: 1.3rem; letter-spacing: 2px;
  text-align: left; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.page-face .p-head .p-sub, .simple-page .p-head .p-sub { margin: 0 0 4px; color: var(--muted); font-size: .78rem; letter-spacing: 1px; }
.page-face header, .simple-page header { text-align: center; flex-shrink: 0; }

/* 散文/小说正文：左对齐，首段起首缩进两格 */
.prose-body { text-align: left; }
.prose-body .para {
  margin: 0; padding: .45em 0; line-height: 2.0;
  text-indent: 2em; font-size: .98rem;
}
/* 被分页切断的续段不再缩进，否则读起来像另起一段 */
.prose-body .para.cont { text-indent: 0; }

/* Canvas 卷曲层：覆盖在书页之上，只负责纸面弯折的光影形变 */
.curl-layer {
  position: absolute; inset: 0; z-index: 500;
  pointer-events: none; opacity: 0;
  transition: opacity .12s linear;
}
.page-face header h2, .simple-page header h2 { margin: 6px 0 0; font-size: 1.35rem; letter-spacing: 3px; }
.page-face header.cont h2, .simple-page header.cont h2 { font-size: 1.05rem; letter-spacing: 1px; }
.cont-mark { color: var(--accent); font-size: .8em; vertical-align: 2px; }
.page-face .post-meta, .simple-page .post-meta { margin: 0; }
/* min-height:0 必须显式声明：column flex 项默认 min-height:auto，
   内容超出时它不肯收缩，会把页脚顶出纸面（页脚/末行被裁切） */
.poem-body { flex: 1 1 0; min-height: 0; overflow: hidden; text-align: left; padding: 14px 6px 12px 4px;
  /* 正文用宋体（出版惯例）：Windows SimSun / macOS 宋体-简，标题与界面字体不变 */
  font-family: 'SimSun', 'NSimSun', '宋体', 'Songti SC', 'STSong', serif; }
/* 歌曲版播放器（网易云外链）：挂在篇末，固定高度，不参与按行拆分 */
.poem-music { margin: 14px 0 0; line-height: 0; }
.poem-music iframe { display: block; border: 0; max-width: 100%; }

/* 段距用 padding 而非 margin：运行时测量 offsetHeight 才能算准，避免最后一行被页脚裁切 */
.poem-body .stanza { margin: 0; padding: .6em 0; }
.poem-body .stanza span { display: block; line-height: 2.05; }
/* 救孤行：末面只剩一两行时，整篇均匀收一档行距（约收 9%），把尾巴并入前页；
 * 整篇所有页面行距一致收紧，只在该篇省出一面时才启用。 */
.poem-body.tight .stanza span { line-height: 1.86; }
.poem-body.tight .prose-body .para, .prose-body.tight .para { line-height: 1.8; }
.leaf-foot {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: .8rem; flex-shrink: 0;
  border-top: 1px dashed var(--line); padding-top: 10px;
}
.leaf-foot a { color: var(--muted); }
.leaf-foot a:hover { color: var(--accent); }
/* 「⧉ 单独打开」原盒只有 13×24，手机上几乎点不中。
   padding 撑出 39×40 的可点区，再用等量负 margin 把版式拉回去，页脚高度不变。 */
.leaf-foot a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 13px; margin: -8px -13px; }
.face-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--muted); letter-spacing: 4px;
}

/* 探针（测量用，不可见） */
.page-face.probe { visibility: hidden; z-index: -1; }

.book-hint { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 14px; }

/* ---------- 目录浮层 ---------- */
#tocBtn { width: auto; padding: 0 16px; border-radius: 999px; font-size: .9rem; }
.toc-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.toc-overlay[hidden] { display: none; }
.toc-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  width: min(560px, 100%); max-height: min(640px, 86vh);
  display: flex; flex-direction: column;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.toc-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 18px 22px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.toc-head h2 { margin: 0; font-size: 1.2rem; letter-spacing: 3px; }
.toc-sub { color: var(--muted); font-size: .8rem; flex: 1; }
#tocClose { border: none; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; }
#tocClose:hover { color: var(--accent); }
.toc-list { list-style: none; margin: 0; padding: 8px 10px 16px; overflow-y: auto; }
.toc-list button {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  padding: 9px 12px; border: none; background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; border-radius: 8px;
}
.toc-list button:hover { background: var(--paper-2); }
.toc-list button.current .toc-title { color: var(--accent); font-weight: 600; }
.toc-no { color: var(--muted); font-size: .8rem; min-width: 2.2em; font-variant-numeric: tabular-nums; text-align: right; }
.toc-title { flex: 1; }
.toc-list time { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* ---------- 移动端：单页 ---------- */
@media (max-width: 720px) {
  .book { height: max(460px, calc(100vh - 130px)); overflow: hidden; }
  .leaf { width: 100%; }
  .book::before { display: none; }
  .leaf-front, .leaf-back { border-radius: 6px 6px 14px 14px; padding: 24px 24px 24px 28px; }
  .book-inner::after { width: 100%; }
  .book-hint { display: none; }
}

/* 手机工具栏一行装不下：「← 书架」要 86，导航栏要 242，而 390 视口下内容区只有 318，
   flex 于是把按钮压到最小宽度 75.6，「书架」两个字就被挤成竖排。
   收紧内边距与导航间距腾出地方，并禁止按钮再被收缩。 */
@media (max-width: 640px) {
  .book-toolbar { padding: 10px 12px 6px; }
  .book-nav { gap: 10px; }
  #pageIndicator { min-width: 58px; }
  .book-toolbar .btn { white-space: nowrap; flex-shrink: 0; }
}
/* 320 这类超窄屏再收一档，否则导航栏会顶出屏幕（实测溢出 5px） */
@media (max-width: 360px) {
  .book-toolbar { padding: 10px 8px 6px; }
  .book-nav { gap: 6px; }
  #pageIndicator { min-width: 48px; }
  .book-toolbar .btn { padding-left: 12px; padding-right: 12px; }
}

/* ---------- 移动极简模式：不做翻页效果，单页直出、直切，无任何动画 ----------
 * 与 3D 书本唯一的共同点是内容排版（p-head/stanza/para/leaf-foot）。
 * 视觉上只有：一张素纸卡片 + 底部页脚，配色沿用 --card/--line 等，亮暗主题自动跟随。 */
.book.simple { perspective: none; height: max(480px, calc(100vh - 150px)); }
.book.simple::before { display: none; }
.simple-page {
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 22px 16px;
  overflow-y: auto;                 /* 一首诗一整页，超长竖向滚动 */
  -webkit-overflow-scrolling: touch;
}
/* 极简模式是「一首诗一整页、超长竖向滚动」，正文必须按内容自然撑开。
   上面 .poem-body 的 flex:1 1 0 + min-height:0 + overflow:hidden 是给 3D 书本分面用的
   （正文占满剩余空间、超出隐藏），在这里会把长诗直接裁掉——
   而且因为正文盒高被锁成容器高，scrollHeight 也不涨，想滚都滚不到。 */
.book.simple .poem-body,
.book.simple .prose-body { flex: 0 0 auto; min-height: auto; overflow: visible; }
/* 短诗时页脚仍贴在卡片底部，长诗时跟在正文末尾 */
.book.simple .leaf-foot { margin-top: auto; }
/* 「↓ 继续阅读」：卡片内的长文可以竖着滚，但手机上没有滚动条，
   不给个提示就不知道下面还有内容。浮在卡片底部居中，滚到底自动消失（JS 切 .show）。 */
.read-more-hint {
  position: absolute; left: 50%; bottom: 12px; z-index: 6;
  display: none;
  padding: 5px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--line);
  color: var(--muted); font-size: .78rem; letter-spacing: 1px;
  pointer-events: none;                  /* 纯提示，不吃点击 */
  backdrop-filter: blur(4px);
  animation: hintBob 1.8s ease-in-out infinite;
}
.read-more-hint.show { display: block; }
/* 关键帧里必须带 translate(-50%)，否则动画会覆盖掉居中位移 */
@keyframes hintBob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 5px); }
}
@media (prefers-reduced-motion: reduce) {
  .read-more-hint { animation: none; transform: translate(-50%, 0); }
}
/* 探针：与真实页面同高（JS 会再以 inner 实高精确覆写），隐藏不参与布局 */
.simple-page.probe { visibility: hidden; position: absolute; width: 100%; left: 0; top: 0; z-index: -1; }