/* =============================================================
 * 真实书籍翻页引擎 · 样式（性能重写版 v2）
 *
 * 关键约束（全部为实测卡顿根因）：
 *  1. .book 上禁止任何 filter —— filter 会使子树每帧重新光栅化，并破坏 preserve-3d
 *  2. 翻页动画只允许改 transform / opacity，且改在独立合成层上
 *  3. 光影用「预涂渐变层 + opacity」实现，禁止逐帧改 filter / 自定义属性
 *  4. 翻页页内的阴影层统一 will-change: opacity + translateZ(0) 强制提升为合成层
 * ============================================================= */
.reader-overlay{
  position:fixed;inset:0;z-index:120;display:none;flex-direction:column;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(255,226,178,.16),transparent 62%),
    linear-gradient(160deg,#3B2E24 0%,#2A211A 55%,#211A14 100%);
  color:#F6EDE0;
}
.reader-overlay.show{display:flex}

.reader-top{
  flex:0 0 auto;height:60px;display:flex;align-items:center;gap:12px;padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.09);background:rgba(20,15,11,.24);
}
.reader-top .r-title{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.reader-top .r-sub{font-size:12px;color:#C9B69F}
.r-btn{
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#F6EDE0;
  border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;transition:background .18s,border-color .18s;
  white-space:nowrap;
}
.r-btn:hover{background:rgba(255,255,255,.16)}
.r-btn:disabled{opacity:.35;cursor:not-allowed}
.r-btn.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* 书页 + 工具栏作为一个整体在剩余空间里垂直居中：
 * 书页宽高受限时会留下大片空白，若工具栏固定贴屏幕底，就会离书页很远；
 * 包一层 body 后工具栏永远紧贴书页下方（V2.0 需求 1）。 */
.reader-body{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:10px 14px 14px;
}
.reader-stage{
  flex:0 1 auto;width:100%;min-height:180px;display:flex;align-items:center;justify-content:center;
  perspective:2400px;perspective-origin:50% 46%;position:relative;overflow:hidden;
  padding:12px 14px 20px;touch-action:none;
}
/* 舞台现在紧贴书页（高度=书页+内边距），原来那层「地面投影」会画到书页上，
 * 改由 .book 自己的 box-shadow 承影，这里不再叠一层。 */


/* ---------------- 书本主体 ---------------- */
.book{
  position:relative;transform-style:preserve-3d;
  /* 用 box-shadow 代替 drop-shadow：一次性绘制，不参与每帧重绘 */
  box-shadow:0 26px 42px -12px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.32);
  border-radius:6px;
}
.book.dragging{cursor:grabbing}

/* 纸叠厚度（书口） */
.book .edge{
  position:absolute;top:3px;bottom:3px;width:9px;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg,#FBF3E4 0 1px,#E6D6BC 1px 2px,#FBF3E4 2px 3px);
  border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.book .edge.l{left:-7px;transform:skewY(-1.2deg)}
.book .edge.r{right:-7px;transform:skewY(1.2deg)}
.book .edge.bottom{
  left:6px;right:6px;top:auto;bottom:-7px;height:8px;width:auto;
  background:repeating-linear-gradient(0deg,#FBF3E4 0 1px,#E6D6BC 1px 2px,#FBF3E4 2px 3px);
  border-radius:0 0 4px 4px;
}

/* ---------------- 静态跨页 ---------------- */
.spread{position:absolute;inset:0;transform-style:preserve-3d}
.leaf{
  position:absolute;top:0;height:100%;overflow:hidden;background:#FFFCF5;
  border-radius:0;
}
.leaf.left{left:0;width:50%;border-radius:5px 0 0 5px;box-shadow:inset -14px 0 22px -14px rgba(90,60,30,.30)}
.leaf.right{left:50%;width:50%;border-radius:0 5px 5px 0;box-shadow:inset 14px 0 22px -14px rgba(90,60,30,.26)}
.book.single .leaf.right{left:0;width:100%;border-radius:5px;box-shadow:none}
.book.single .leaf.left{display:none}
/* 纸张边缘泛黄 + 内侧暗角（一次性绘制，静态） */
.leaf::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(150,110,64,.13),transparent 7%,transparent 93%,rgba(150,110,64,.06));
}
.leaf.left::before{background:linear-gradient(90deg,rgba(150,110,64,.08),transparent 8%,transparent 88%,rgba(60,40,20,.22))}
.leaf.right::before{background:linear-gradient(90deg,rgba(60,40,20,.20),transparent 12%,transparent 92%,rgba(150,110,64,.09))}
.book.single .leaf.right::before{background:linear-gradient(90deg,rgba(70,44,18,.26),transparent 7%,transparent 94%,rgba(150,110,64,.06))}

.page-inner{position:relative;overflow:hidden;background:#FFFCF5}
.page-inner img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.page-blank{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#C6B49A;font-size:13px;letter-spacing:.14em;
  background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(160,130,90,.045) 27px 28px);
}

/* 书脊凹槽 */
.gutter{
  position:absolute;left:50%;top:0;bottom:0;width:46px;transform:translateX(-50%);z-index:6;pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,rgba(40,26,12,.20) 30%,rgba(30,20,10,.34) 48%,
    rgba(255,246,225,.16) 50%,rgba(30,20,10,.30) 54%,rgba(40,26,12,.18) 70%,transparent 100%);
}
.book.single .gutter{display:none}

/* 翻动页在底层书页上的投影：暗边跟随书页自由边移动，独立合成层 */
.cast-wrap{
  position:absolute;top:0;height:100%;width:50%;z-index:5;pointer-events:none;overflow:hidden;
}
.cast-wrap.left{left:0}
.cast-wrap.right{left:50%}
.book.single .cast-wrap{width:100%;left:0}
.cast{
  position:absolute;top:0;left:0;width:100%;height:100%;
  opacity:0;will-change:opacity,transform;transform:translateX(0);
}
.cast.right{background:linear-gradient(90deg,rgba(18,10,4,.86) 0%,rgba(18,10,4,.42) 22%,rgba(18,10,4,.14) 50%,rgba(18,10,4,0) 78%)}
.cast.left{background:linear-gradient(270deg,rgba(18,10,4,.86) 0%,rgba(18,10,4,.42) 22%,rgba(18,10,4,.14) 50%,rgba(18,10,4,0) 78%)}

/* ---------------- 翻动的那一页 ---------------- */
.flip-leaf{
  position:absolute;top:0;height:100%;width:50%;z-index:9;
  transform-style:preserve-3d;
  transform:rotateY(0deg);
  will-change:transform;
  pointer-events:none;
}
.flip-leaf.off{visibility:hidden}
.flip-leaf.next{left:50%;transform-origin:left center}
.flip-leaf.prev{left:0;transform-origin:right center}
.book.single .flip-leaf{left:0;width:100%;transform-origin:left center}

.face{
  position:absolute;inset:0;overflow:hidden;background:#FFFCF5;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  contain:paint;
}
.face.front{transform:rotateY(0deg) translateZ(1px)}
.face.back{transform:rotateY(180deg) translateZ(1px)}

/* 曲面光影：预涂渐变，只靠 opacity 驱动（合成层，零重绘） */
.face-shade{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  will-change:opacity;transform:translateZ(0);
}
.face.front .face-shade{
  background:linear-gradient(90deg,
    rgba(22,12,4,.94) 0%,rgba(22,12,4,.66) 7%,rgba(22,12,4,.34) 22%,
    rgba(22,12,4,.10) 46%,rgba(22,12,4,0) 64%,rgba(255,246,224,.22) 100%);
}
.face.back .face-shade{
  background:linear-gradient(270deg,
    rgba(22,12,4,.94) 0%,rgba(22,12,4,.66) 7%,rgba(22,12,4,.34) 22%,
    rgba(22,12,4,.10) 46%,rgba(22,12,4,0) 64%,rgba(255,246,224,.22) 100%);
}
/* 页口高光（贴近书口一侧的反光，模拟纸张弯曲） */
.face-gloss{
  position:absolute;top:0;bottom:0;width:26px;right:0;z-index:5;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,250,232,.26) 62%,rgba(150,110,66,.14));
  will-change:opacity;transform:translateZ(0);
}
.flip-leaf.prev .face-gloss{right:auto;left:0;transform:scaleX(-1) translateZ(0)}

/* 翻页页热区不可点击 */
.flip-leaf .hot{pointer-events:none !important}

/* ---------------- 点读热区 ---------------- */
.hot{
  position:absolute;border:2px dashed rgba(232,134,60,.85);background:rgba(232,134,60,.13);
  border-radius:12px;cursor:pointer;transition:background .18s,border-color .18s;z-index:3;
}
.hot:hover{background:rgba(232,134,60,.24);border-style:solid}
.hot::after{
  content:"♪";position:absolute;right:-9px;top:-11px;width:20px;height:20px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.hot.playing{
  background:rgba(232,134,60,.32);border:2px solid var(--brand);
  animation:hotPulse 1s ease-in-out infinite;
}
@keyframes hotPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,134,60,.5)}50%{box-shadow:0 0 0 12px rgba(232,134,60,0)}}
/* 画面文字不属于「热点框」，隐藏热点时保持可见可点 */
.book.hide-hots .hot:not(.hot-text){opacity:0;pointer-events:none}

/* ---------------- 展现样式：单个播放按钮 ----------------
 * 不画虚线框，热区本身完全透明，只在区域中心显示一个独立圆形按钮
 * ---------------------------------------------------- */
.hot.hot-btn{border:none;background:none;border-radius:0;cursor:pointer}
.hot.hot-btn::after{display:none}
.hot.hot-btn:hover{background:none;border:none}
.hot.hot-btn .hb{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(28px,calc(var(--pw,400px) * .086));
  height:max(28px,calc(var(--pw,400px) * .086));
  border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#FFD79B,var(--brand) 72%);
  box-shadow:0 4px 10px rgba(120,64,20,.34),0 0 0 3px rgba(255,255,255,.82);
  display:flex;align-items:center;justify-content:center;
  transition:transform .16s ease;
}
.hot.hot-btn .hb b{
  display:block;width:38%;height:38%;background:#fff;
  clip-path:polygon(18% 0,100% 50%,18% 100%);margin-left:8%;
}
.hot.hot-btn:hover .hb{transform:translate(-50%,-50%) scale(1.08)}
.hot.hot-btn.playing{background:none;border:none;animation:none}
.hot.hot-btn.playing .hb{animation:btnPulse 1.05s ease-in-out infinite}
@keyframes btnPulse{
  0%,100%{box-shadow:0 4px 10px rgba(120,64,20,.34),0 0 0 3px rgba(255,255,255,.82)}
  50%{box-shadow:0 4px 10px rgba(120,64,20,.34),0 0 0 3px rgba(255,255,255,.82),0 0 0 13px rgba(232,134,60,0)}
}

/* ---------------- 画面文字（kind=text） ----------------
 * 文字本身就在画面上，逐字高亮直接打在文字上，不弹底部字幕条
 * ---------------------------------------------------- */
.hot.hot-text{
  border:none;background:none;border-radius:0;cursor:pointer;
  display:flex;align-items:center;
  font-family:var(--font-kid);
  /* 庆科黄油体只有 400 一个字重。合成粗体（font-weight:700）在小字号下会把
   * 笔画糊在一起，改用极细描边加厚：字形轮廓不变，只是每笔粗一点点。
   * V3.1：运营可自选描边宽度/颜色，由热区节点写入 --tx-stroke 覆盖这里的默认细描边；
   * paint-order 让描边画在填充之下，否则粗描边会吃掉笔画内部。 */
  font-weight:400;
  -webkit-text-stroke:var(--tx-stroke,.38px currentColor);
  paint-order:stroke fill;
  line-height:1.34;letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(255,252,246,.9),0 0 9px rgba(255,252,246,.55);
  white-space:pre-wrap;overflow:visible;
}
.hot.hot-text::after{display:none}
.hot.hot-text:hover{background:none;border:none}
.hot.hot-text.playing{background:none;border:none;animation:none}

/* 三态排版容器：左侧可选播放按钮 + 文字块（汉字 / 注音 / 英文） */
.hot.hot-text .tx-wrap{display:flex;align-items:center;gap:.3em;width:100%}
.hot.hot-text .txbox{flex:0 1 auto;min-width:0}
.hot.hot-text.align-center .tx-wrap{justify-content:center}
.hot.hot-text.align-left .tx-wrap{justify-content:flex-start}
.hot.hot-text.align-right .tx-wrap{justify-content:flex-end}

.hot.hot-text .tx{display:block;width:100%}
.hot.hot-text.align-center .tx{text-align:center}
.hot.hot-text.align-left .tx{text-align:left}
.hot.hot-text.align-right .tx{text-align:right}
/* 只改颜色与背景，不改字号字重，逐字切换时不触发重排 */
.hot.hot-text .tx span{transition:color .08s linear,background .08s linear,box-shadow .08s linear}
/* 当前字用实心色块 + 白字，压在花哨插画上也一眼看清（卡拉OK式） */
.hot.hot-text .tx span.on{
  color:#fff;
  background:linear-gradient(180deg,#E8863C,#C96524);
  text-shadow:0 1px 1px rgba(120,60,10,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 8px rgba(90,50,10,.34);
  border-radius:6px;
}
.hot.hot-text .tx span.ph{color:rgba(74,58,42,.42);font-weight:600}

/* ---------------- 注音版：拼音逐字压在汉字上方 ----------------
 * 用 inline-flex 竖排「拼音 + 汉字」，字宽自动让位给长拼音，
 * 没有拼音的字（标点）补等高留白，整行汉字仍对齐同一基线。
 * ---------------------------------------------------- */
.hot.hot-text .tx.ruby .ch{
  display:inline-flex;flex-direction:column;align-items:center;
  vertical-align:top;padding:0 .03em;
}
.hot.hot-text .tx.ruby .ch.rb::before{
  content:attr(data-py);
  font-size:max(9px,.46em);line-height:1.26;font-weight:600;letter-spacing:0;
  font-family:var(--font-kid-en);
  opacity:.8;white-space:nowrap;padding-bottom:.03em;
  /* 拼音字号只有汉字的一半，跟着汉字吃同一条粗描边会糊成一团，单独压细 */
  -webkit-text-stroke-width:.16px;
}
.hot.hot-text .tx.ruby .ch:not(.rb){padding-top:.6em}

/* ---------------- 中英文版：汉字下方一行英文翻译 ---------------- */
.hot.hot-text .en{
  display:block;font-size:.6em;line-height:1.42;font-weight:600;
  font-family:var(--font-kid-en);
  letter-spacing:0;margin-top:.14em;white-space:normal;
}
/* 英文逐词高亮（V1.9）：单词级 span，读英文时逐个词亮起；只改颜色背景，不改字号字重 */
/* 透明度放在「词」上而不是整行：父级 opacity 会把高亮块的橙底一起拖淡 */
.hot.hot-text .en .w{
  display:inline-block;border-radius:4px;padding:0 .16em;margin:0 -.08em;opacity:.86;
  transition:color .08s linear,background .08s linear,box-shadow .08s linear,opacity .08s linear;
}
.hot.hot-text .en .w.on{
  color:#fff;opacity:1;
  background:linear-gradient(180deg,#E8863C,#C96524);
  text-shadow:0 1px 1px rgba(120,60,10,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 2px 6px rgba(90,50,10,.3);
}

/* ---------------- 前置播放按钮 ----------------
 * 文字开头前一个小圆形按钮；开启后文字本体不再可点，
 * 只有点按钮才播放（符合「点击播放按钮时画面文字才播放」）。
 * ---------------------------------------------------- */
.hot.hot-text .hot-lead{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:clamp(24px,1.05em,44px);
  height:clamp(24px,1.05em,44px);
  padding:0;border:none;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 32% 26%,#FFD79B,var(--brand) 72%);
  box-shadow:0 3px 9px rgba(120,64,20,.32),0 0 0 2.5px rgba(255,255,255,.88);
  transition:transform .16s ease;
}
.hot.hot-text .hot-lead b{
  display:block;width:38%;height:38%;background:#fff;
  clip-path:polygon(18% 0,100% 50%,18% 100%);margin-left:9%;
}
.hot.hot-text .hot-lead:hover{transform:scale(1.1)}
.hot.hot-text .hot-lead:active{transform:scale(.94)}
.hot.hot-text.playing .hot-lead{animation:btnPulse 1.05s ease-in-out infinite}
/* 开启前置按钮后：文字本体不触发播放，也不把手势漏给翻页（点空白处仍是拖拽翻页） */
.hot.hot-text.lead-only{cursor:default}

/* 翻页页角提示 */
.page-corner{
  position:absolute;right:0;bottom:0;width:46px;height:46px;z-index:7;pointer-events:none;
  background:linear-gradient(135deg,transparent 46%,rgba(255,252,245,.92) 48%,rgba(206,180,142,.92) 100%);
  border-radius:0 0 5px 0;box-shadow:-3px -3px 9px rgba(90,64,36,.18);
  opacity:.85;transition:opacity .2s,transform .2s;
}
.leaf.left .page-corner{display:none}

/* ---------------- 居中工具栏 + 翻页工具（V2.0） ----------------
 * 需求：翻页与页面集中到中间部分。
 * 做法：原来横跨整屏的底栏改成「与书页同宽的居中 dock」，
 *      书页宽度由 JS 写入 --dockw，翻页按钮正好落在书页左右两缘。
 * ---------------------------------------------------- */
.reader-dock{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;
  width:max(320px,var(--dockw,720px));max-width:100%;
  padding:9px 14px 10px;border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.85);
}
.dock-tools,.dock-nav{
  display:flex;align-items:center;width:100%;
}
.dock-tools{gap:8px;justify-content:center;flex-wrap:wrap}
.dock-nav{gap:10px}

/* 工具栏按钮 */
.d-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#F6EDE0;
  border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s;
}
.d-btn:hover{background:rgba(255,255,255,.16)}
.d-btn .di{
  display:inline-flex;align-items:center;justify-content:center;font-style:normal;
  min-width:19px;height:19px;padding:0 4px;border-radius:999px;
  background:rgba(255,255,255,.16);font-size:10.5px;font-weight:800;letter-spacing:0;
}
.d-btn.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(232,134,60,.38)}
.d-btn.on .di{background:rgba(255,255,255,.28)}
.d-btn.on .di{animation:dockBreath 1.5s ease-in-out infinite}
@keyframes dockBreath{0%,100%{opacity:1}50%{opacity:.55}}

/* 翻页行 */
.dock-nav .r-btn.nav{padding:7px 13px;font-size:12.5px}
.reader-dock .r-num{
  font-size:13px;min-width:74px;text-align:center;color:#EBDCC7;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.progress{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden;min-width:60px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--butter),var(--brand));border-radius:99px;transition:width .3s}

/* ---------------- 全文搜索（V2.7） ----------------
 * 借鉴 flbook 的书内搜索，但索引只取热区文本字段，
 * 不会像它那样把 <style> 里的 CSS 一起搜出来（结果里混着「.f-e{color: r···」）。
 * 面板贴舞台右上角，深色卡片与阅读器底色同族，不抢画面。
 * ---------------------------------------------------- */
.reader-find{
  position:absolute;top:12px;right:16px;z-index:24;   /* 高于 .reader-hint(20)，否则首次引导文案会压在面板上 */
  width:min(360px,calc(100% - 32px));max-height:calc(100% - 24px);
  display:none;flex-direction:column;overflow:hidden;
  background:rgba(30,23,17,.95);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
}
.reader-find.show{display:flex;animation:rfIn .22s ease}
@keyframes rfIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.rf-head{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 14px;border-bottom:1px solid rgba(255,255,255,.10)}
.rf-head input{
  flex:1;min-width:0;border:0;background:transparent;color:#F6EDE0;
  font-size:14px;font-family:inherit;padding:4px 0;outline:none;
}
.rf-head input::placeholder{color:#9C8B77}
/* type=search 的原生清除按钮会和右侧关闭按钮并排成两个「×」，隐掉 */
.rf-head input::-webkit-search-cancel-button,
.rf-head input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.rf-x{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:#E5D6C2;font-size:12px;line-height:1;
}
.rf-x:hover{background:rgba(255,255,255,.16)}
.rf-body{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:0}
.rf-tip{font-size:12.5px;line-height:1.75;color:#B7A48E;padding:8px 8px 10px}
.rf-tip b{color:var(--butter)}
.rf-sum{font-size:11.5px;color:#9C8B77;padding:2px 6px 4px}
.rf-sum b{color:var(--butter)}
.rf-item{
  display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;cursor:pointer;
  border:1px solid transparent;background:rgba(255,255,255,.05);
  border-radius:10px;padding:9px 11px;color:#F1E5D4;font-family:inherit;
  transition:background .15s,border-color .15s;
}
.rf-item:hover{background:rgba(232,134,60,.18);border-color:rgba(232,134,60,.45)}
.rf-p{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--butter);font-variant-numeric:tabular-nums}
.rf-t{flex:1;min-width:0;font-size:13px;line-height:1.55;word-break:break-word}
.rf-t mark{background:rgba(247,206,122,.88);color:#3B2E24;border-radius:3px;padding:0 2px;font-weight:700}
.rf-n{flex:0 0 auto;font-size:11px;color:#C9B69F}

/* 搜索命中：跳页后闪一下目标热区，告诉读者「就是这一块」 */
.hot.find-hit{outline:2px dashed var(--butter);outline-offset:3px;animation:findPulse 1.8s ease}
@keyframes findPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(247,206,122,0)}
  18%{box-shadow:0 0 0 6px rgba(247,206,122,.55)}
  62%{box-shadow:0 0 0 4px rgba(247,206,122,.22)}
}

/* ---------------- 自动页码（V2.0） ----------------
 * 按页面顺序自动生成，落在每页底部居中；垫一层纸色胶囊，
 * 压在任何插画上都读得清，且不抢画面。
 * ---------------------------------------------------- */
.page-no{
  position:absolute;left:50%;bottom:2.4%;transform:translateX(-50%);z-index:3;
  pointer-events:none;user-select:none;
  min-width:1.9em;padding:.1em .55em;border-radius:999px;
  background:rgba(255,252,246,.92);
  border:1px solid rgba(158,120,74,.34);
  box-shadow:0 1px 4px rgba(90,60,30,.22);
  color:#6B4E2E;font-weight:700;letter-spacing:.02em;
  font-size:max(11px,calc(var(--pw,400px) * .028));line-height:1.5;
  font-variant-numeric:tabular-nums;text-align:center;
}
.book.hide-hots .page-no{opacity:.55}
.reader-hint{
  position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:20;
  background:rgba(30,22,15,.82);color:#F6EDE0;border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:8px 16px;font-size:12.5px;pointer-events:none;
  max-width:min(92%,560px);text-align:center;line-height:1.5;
  animation:fadeHint 4s ease forwards;
}
/* 当前页文字在上半部时，引导条改落底部：它是浮层，不该盖住第一句台词（V2.8） */
.reader-hint.hint-low{top:auto;bottom:14px}
@keyframes fadeHint{0%,72%{opacity:1}100%{opacity:0}}

.reader-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#C9B69F;font-size:15px}

@media (max-width:720px){
  .reader-top{height:52px;padding:0 12px;gap:8px}
  .reader-top .r-sub{display:none}
  .reader-top .r-title{font-size:13.5px;max-width:34vw}
  .r-btn{padding:7px 11px;font-size:12px}
  .reader-stage{padding:8px 8px 14px;perspective:1600px}
  .reader-body{padding:8px 8px 10px;gap:9px}
  .reader-dock{padding:7px 10px 9px;gap:6px;border-radius:13px}
  /* 4 个工具按钮均匀两列，避免 3+1 落单 */
  .dock-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .dock-tools .d-btn{justify-content:center}
  .d-btn{padding:6px 11px;font-size:12px;gap:5px}
  .d-btn .di{min-width:17px;height:17px;font-size:9.5px}
  .dock-nav{gap:7px}
  .dock-nav .r-btn.nav{padding:6px 10px;font-size:12px}
  .reader-dock .r-num{font-size:12px;min-width:58px}
  .page-no{font-size:max(10px,calc(var(--pw,400px) * .034))}
  .reader-hint{font-size:11.5px;padding:7px 12px;top:10px}
  .gutter{width:30px}
  .book .edge{width:6px}
  .face-gloss{width:24px}
  /* 搜索面板占满舞台宽度，避免窄屏只剩一条缝 */
  .reader-find{top:8px;left:8px;right:8px;width:auto;max-height:72%}
  .rf-t{font-size:12.5px}
}

/* 用户开启「减少动态效果」时不翻转，改为新页轻微淡入。
 * V2.7.1：原来直接切页，用户会以为「翻页效果没做上」；无障碍要的是减弱，不是抹掉过程。 */
@media (prefers-reduced-motion:reduce){
  .flip-leaf{display:none !important}
  .book.soft-flip .spread{animation:softFlip .18s ease both}
  @keyframes softFlip{from{opacity:.42}to{opacity:1}}
}

/* ---------------- 点读字幕：逐字高亮 ---------------- */
.reader-caption{
  position:absolute;left:50%;bottom:56px;z-index:32;
  transform:translate(-50%,10px);
  max-width:min(640px,86%);
  padding:9px 20px;border-radius:999px;
  background:rgba(255,252,246,.95);
  border:1px solid rgba(232,134,60,.24);
  box-shadow:0 8px 22px -8px rgba(60,38,16,.35);
  font-size:clamp(14px,2.05vw,17px);line-height:1.55;letter-spacing:.03em;
  font-family:var(--font-kid);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;
  transition:opacity .16s linear,transform .16s ease;
}
.reader-caption.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:720px){
  .reader-caption{max-width:92%;bottom:48px;padding:8px 16px;font-size:14px}
}
/* 只改颜色与背景，不做字形变化，避免逐字切换时重排 */
.reader-caption span{color:#A9947F;transition:color .08s linear,background .08s linear,box-shadow .08s linear}
.reader-caption span.on{
  color:#A83E05;
  background:rgba(232,134,60,.20);
  box-shadow:0 0 0 3px rgba(232,134,60,.20);
  border-radius:4px;
}

/* 点读播放提示（音频缺失、被拦截等）
 * 注意与底部字幕条错开：字幕在 56px，提示放在 112px，否则两颗胶囊会叠在一起 */
.reader-toast{
  position:absolute;left:50%;bottom:112px;transform:translate(-50%,8px);
  z-index:30;padding:9px 16px;border-radius:999px;
  background:rgba(48,32,20,.88);color:#FFF6E8;
  font-size:13px;line-height:1.45;max-width:82%;text-align:center;
  box-shadow:0 8px 24px rgba(60,40,20,.28);
  animation:readerToast .22s ease-out forwards;
  pointer-events:none;
}
@keyframes readerToast{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:720px){ .reader-toast{bottom:98px;font-size:12.5px;padding:8px 14px} }