/* ============================================================
   沉浸模式 · 一屏一卡
   与 样式.css 共用变量；所有类名加「沉」前缀，不碰普通模式的卡片流。
   ============================================================ */

#沉浸页{
  position:fixed;left:0;right:0;bottom:0;
  top:calc(var(--顶高) + var(--安全上));
  z-index:15;
  background:var(--bg);
}
#沉浸页.隐藏{display:none}

/* ── 舞台：外层吸附翻页 ── */
#沉浸舞台{
  position:absolute;left:0;right:0;top:0;bottom:0;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
#沉浸舞台::-webkit-scrollbar{display:none;width:0;height:0}

.沉卡{
  height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:var(--card-bg);
  position:relative;
}
.沉卡.新 .沉内{animation:沉浮 .26s ease-out}
@keyframes 沉浮{
  0%{opacity:.55;transform:translateY(6px)}
  100%{opacity:1;transform:none}
}

/* ── 卡内滚动 ── */
.沉内{
  height:100%;
  overflow-y:auto;
  overscroll-behavior:auto;      /* 卡内滚到底，手势接力给外层翻页 */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.沉内::-webkit-scrollbar{display:none;width:0;height:0}

/* ── 标题区（卡内滚动时吸顶） ── */
.沉头{
  position:sticky;top:0;z-index:6;
  background:var(--card-bg);
  padding:14px 15px 10px 12px;
  border-left:3px solid var(--tc,var(--t-default));
  transition:box-shadow .2s;
}
.沉卡.滚 .沉头{
  box-shadow:0 1px 0 var(--border),0 8px 14px -10px rgba(16,26,50,.28);
}
.沉头行{display:flex;gap:9px;align-items:flex-start}
.沉图{flex:0 0 24px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:15px}
.沉文{flex:1;min-width:0}
.沉题行{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap}
.沉题{
  flex:1;min-width:0;font-size:17.5px;font-weight:670;line-height:1.38;
  letter-spacing:-.1px;color:var(--text);
}
.沉徽{
  flex:0 0 auto;font-size:10px;font-weight:650;padding:2px 6px;border-radius:5px;margin-top:5px;
  background:var(--tb-type,var(--tb-default));
  color:var(--tc,var(--t-default));
}

/* ── 正文 ── */
.沉主体{padding:0 15px calc(54px + var(--安全下))}
.沉体{margin-top:18px}
.沉正{font-size:15px;line-height:1.82;color:var(--text)}
.沉正 h3,.沉正 h4{margin:15px 0 6px;font-size:15px;font-weight:670}
.沉正 h3:first-child{margin-top:0}
.沉正 p{margin:8px 0}
.沉正 ul,.沉正 ol{margin:8px 0 8px 20px}
.沉正 li{margin:3px 0}
.沉正 img{max-width:100%;height:auto;border-radius:8px;margin:10px 0;display:block}
.沉正 blockquote{
  margin:10px 0;padding:8px 12px;border-radius:7px;border-left:3px solid var(--border);
  background:var(--sunk);color:var(--text-2);font-size:14px;
}
.沉正 blockquote.q-original{border-left-color:var(--accent);background:var(--accent-soft)}
.沉正 blockquote.q-warn{border-left-color:#b8860b;background:#fdf6e3}
[data-theme="dark"] .沉正 blockquote.q-warn{border-left-color:#e3b341;background:#2b2410}
.沉正 blockquote p{margin:4px 0}
.沉正 .ai-note{
  font-size:13px;color:var(--text-3);background:var(--sunk);
  border:1px dashed var(--border);border-radius:7px;padding:8px 10px;margin:10px 0;
}
.沉正 table{display:block;overflow-x:auto;border-collapse:collapse;font-size:13px;margin:10px 0;max-width:100%}
.沉正 th,.沉正 td{border:1px solid var(--border);padding:5px 8px}

/* ── 右侧卡内进度 ── */
#沉浸轨{
  position:absolute;right:3px;top:calc(6px);
  bottom:calc(42px + var(--安全下));
  width:3px;z-index:8;border-radius:2px;pointer-events:none;
  background:rgba(128,140,160,.14);
  opacity:0;transition:opacity .3s;
}
#沉浸轨.显{opacity:1}
#沉浸轨填{
  width:100%;height:0;border-radius:2px;
  background:var(--accent);opacity:.65;
  transition:height .12s linear;
}

/* ── 底部下一张条 ── */
#沉浸下条{
  position:absolute;left:0;right:0;bottom:0;z-index:9;
  display:flex;align-items:center;gap:8px;
  height:calc(34px + var(--安全下));
  padding:0 15px var(--安全下);
  background:color-mix(in srgb,var(--card-bg) 90%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:0;border-top:1px solid color-mix(in srgb,var(--border) 62%,transparent);
  font:inherit;text-align:left;cursor:pointer;color:var(--text-3);
  transition:background .18s;
}
#沉浸下条:active{background:var(--sunk)}
.沉下箭{flex:0 0 auto;font-size:11px;opacity:.55;animation:沉轻跳 1.7s ease-in-out infinite}
.沉下图{flex:0 0 15px;font-size:12px;opacity:.6}
.沉下题{
  flex:1;min-width:0;font-size:12px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.沉下页{
  flex:0 0 auto;font:10.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:var(--text-3);opacity:.85;padding-left:4px;
  font-variant-numeric:tabular-nums;
}
#沉浸下条.完{cursor:default}
@keyframes 沉轻跳{
  0%,100%{transform:translateY(0);opacity:.45}
  50%{transform:translateY(3px);opacity:1}
}

/* ── 翻页激励（升级式弹出） ── */
#沉浸特效{
  position:absolute;left:0;right:0;top:24vh;z-index:12;
  display:flex;justify-content:center;pointer-events:none;
}
#沉浸特效 .壳{position:relative}
#沉浸特效 .弹卡{
  position:relative;
  background:var(--card-bg);border:1px solid var(--border);border-radius:20px;
  padding:15px 26px 13px;text-align:center;min-width:132px;
  box-shadow:0 24px 60px -22px rgba(12,20,42,.55);
  opacity:0;transform:scale(.55);
  font-variant-numeric:tabular-nums;
}
#沉浸特效.显 .弹卡{animation:沉弹卡 .6s cubic-bezier(.18,1.55,.42,1) forwards}
@keyframes 沉弹卡{
  0%{opacity:0;transform:scale(.55) translateY(14px)}
  58%{opacity:1;transform:scale(1.09) translateY(-2px)}
  78%{transform:scale(.98)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
#沉浸特效 .emo{
  font-size:42px;line-height:1.05;
  filter:drop-shadow(0 6px 12px rgba(40,60,110,.22));
  animation:沉蹦 .64s cubic-bezier(.2,1.7,.45,1);
}
@keyframes 沉蹦{
  0%{transform:scale(.2) rotate(-24deg)}
  55%{transform:scale(1.3) rotate(9deg)}
  78%{transform:scale(.94) rotate(-3deg)}
  100%{transform:scale(1) rotate(0)}
}
#沉浸特效 .数{
  font-size:19px;font-weight:800;color:var(--text);margin-top:6px;letter-spacing:-.4px;
}
#沉浸特效 .副{font-size:10.5px;color:var(--text-3);margin-top:4px}
#沉浸特效 .星{
  margin-top:8px;font-size:14px;letter-spacing:3px;color:var(--accent);
  text-shadow:0 2px 8px color-mix(in srgb,var(--accent) 45%,transparent);
}
#沉浸特效 .光{
  position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;
  border-radius:50%;border:2px solid var(--accent);
  opacity:0;pointer-events:none;
}
#沉浸特效.大 .光{animation:沉环 .85s cubic-bezier(.2,.7,.3,1)}
@keyframes 沉环{
  0%{opacity:.75;transform:scale(.55)}
  100%{opacity:0;transform:scale(2.35)}
}
#沉浸特效.大 .弹卡{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  box-shadow:0 26px 70px -20px rgba(79,110,247,.55),
             0 0 32px -6px color-mix(in srgb,var(--accent) 40%,transparent);
  padding:18px 30px 16px;
}
#沉浸特效.大 .emo{font-size:54px;animation:沉蹦 .7s cubic-bezier(.2,1.75,.45,1)}
#沉浸特效.大 .数{font-size:21px;color:var(--accent)}
#沉浸特效.退 .弹卡{animation:沉退 .3s ease-in forwards}
@keyframes 沉退{to{opacity:0;transform:scale(.94) translateY(-8px)}}
#沉浸特效 .粒{
  position:absolute;left:50%;top:50%;font-size:15px;
  transform:translate(-50%,-50%);pointer-events:none;
  animation:沉飞 .95s cubic-bezier(.2,.7,.35,1) forwards;
}
@keyframes 沉飞{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  22%{opacity:1}
  100%{
    opacity:0;
    transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15) rotate(48deg);
  }
}

/* ── 目录抽屉：标签页 + 三级目录（篇/章/节） ── */
.抽标{
  border:none;background:transparent;font:inherit;
  font-size:14px;font-weight:640;color:var(--text-3);
  padding:6px 12px;border-radius:8px;cursor:pointer;
}
.抽标.活{color:var(--accent-ink);background:var(--accent-soft)}
.抽标:active{background:var(--sunk)}

.目-节{
  display:flex;gap:7px;align-items:flex-start;
  padding:8px 14px 8px 31px;font-size:12.8px;color:var(--text-2);
  cursor:pointer;line-height:1.42;border-left:3px solid transparent;
}
.目-节:active{background:var(--sunk)}
.目-节.在{
  color:var(--accent-ink);background:var(--accent-soft);
  font-weight:620;border-left-color:var(--accent);
}
.目-节 .图{flex:0 0 15px;font-size:11.5px;opacity:.75;margin-top:1px}
.目-节 .字{
  flex:1;min-width:0;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.目-章[data-开] .目-章-名::before{content:'▾ ';color:var(--text-3)}
.目-章:not([data-开]) .目-章-名::before{content:'▸ ';color:var(--text-3)}
.目-节们[hidden]{display:none}

/* ── 抽屉搜索 ── */
.抽搜行{padding:12px 12px 8px}
#抽搜框{
  width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--border);background:var(--bg);color:var(--text);
  font:inherit;font-size:14px;outline:none;
}
#抽搜框:focus{border-color:var(--accent)}
.搜-项{
  padding:10px 14px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);
  cursor:pointer;
}
.搜-项:active{background:var(--sunk)}
.搜-项 .行{display:flex;gap:7px;align-items:flex-start}
.搜-项 .图{flex:0 0 16px;font-size:12px;margin-top:2px}
.搜-项 .t{flex:1;min-width:0;font-size:13.3px;color:var(--text);line-height:1.42}
.搜-项 .s{
  font-size:11.5px;color:var(--text-3);margin-top:3px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.搜-项 .s b{color:var(--accent-ink);font-weight:600}
.搜-项 .t b{color:var(--accent-ink);font-weight:700}
.搜-空{padding:34px 20px;text-align:center;color:var(--text-3);font-size:13px}
.搜-数{padding:9px 14px 4px;font-size:11px;color:var(--text-3)}

/* 沉浸模式：锁住 body 滚动，滚动全部交给沉浸页内部 */
body.沉浸态{overflow:hidden}
body.沉浸态 #页阅读{height:100vh}