/* 忍者杀手 TRPG 阅读器 — 公共样式 */
:root{--bg:#fafaf7;--fg:#2c2c2c;--accent:#5a3a8b;--locked:#b3590d;--free:#26874c;--row:#fff;}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow-x:hidden}
body{display:flex;flex-direction:column;font-family:ui-sans-serif,system-ui,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--fg);background:var(--bg)}
header{background:var(--accent);color:#fff;padding:12px 20px;flex:0 0 auto}
h1{margin:0;font-size:16px;font-weight:600;line-height:1.35;flex:1 1 auto;min-width:0}
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;background:rgba(255,255,255,.2);margin-left:6px;white-space:nowrap;vertical-align:middle}
main{display:grid;grid-template-columns:300px 1fr;flex:1 1 auto;min-height:0}
aside{background:var(--row);border-right:1px solid #e7e3ee;padding:12px;overflow-y:auto;min-height:0}
aside h2{font-size:12px;color:#6b6b6b;margin:10px 0 4px;text-transform:uppercase;letter-spacing:.5px}
.group{margin-top:14px}.group:first-of-type{margin-top:4px}
.group-h{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:linear-gradient(135deg,var(--accent) 0%,#7a5aa5 100%);color:#fff;border-radius:6px;cursor:pointer;user-select:none;-webkit-user-select:none;font-size:15px;font-weight:700;letter-spacing:.3px;box-shadow:0 2px 4px rgba(90,58,139,.22);transition:filter .15s,background .15s}
.group-h:hover{filter:brightness(1.08)}.group-h:active{filter:brightness(.95)}
.gh-label{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.gh-label>span:last-child{overflow:hidden;text-overflow:ellipsis}
.gh-arrow{display:inline-block;width:14px;font-size:10px;transition:transform .2s ease;text-align:center}
.gh-count{background:rgba(255,255,255,.25);padding:1px 9px;border-radius:10px;font-size:11px;font-weight:600;margin-left:8px}
.group.collapsed .group-h{background:#e3dcef;color:var(--accent);box-shadow:0 1px 2px rgba(90,58,139,.12)}
.group.collapsed .gh-arrow{transform:rotate(-90deg)}.group.collapsed .chap-list{display:none}
.chap-list{padding-left:2px}
.chap{display:flex;align-items:center;padding:6px 8px;border-radius:4px;cursor:pointer;font-size:13px;line-height:1.3}
.chap:hover{background:#f0ecf7}.chap.active{background:#ebe4f4;font-weight:600}
.chap .lbl{flex:1;word-break:break-all}.chap .badge{font-size:10px;margin-left:6px;white-space:nowrap}
.badge.free{color:var(--free)}.badge.cached{color:#16a085;font-weight:700}.badge.locked{color:var(--locked)}.badge.unlocked{color:#16a085;font-weight:700}
article{padding:20px 28px;overflow:hidden auto;min-height:0}
article h2{color:var(--accent);border-bottom:2px solid #e7e3ee;padding-bottom:6px;font-size:20px}
article h3{color:var(--accent);margin-top:20px;font-size:16px}
article pre,article code{background:#f3f0fa;padding:2px 6px;border-radius:4px;font-size:12px}
article p{line-height:1.65;font-size:14px}
article strong{font-weight:700}
article em{font-style:italic}
article strong em,article em strong{font-style:normal;font-weight:700}
article table{border-collapse:collapse;margin:10px 0;font-size:12px}
article th,article td{border:1px solid #ccc;padding:4px 8px;vertical-align:top}
.img-wrap{text-align:center;margin:12px 0}
.doc-img{max-width:100%;max-height:600px;border:1px solid #e7e3ee;border-radius:4px;background:#fff;decoding:async}
.doc-img.lazy{min-height:120px;background:linear-gradient(135deg,#f3f0fa 0%,#e8e4f0 100%)}
.empty{color:#999;font-style:italic;padding:32px;text-align:center}
.meta{color:#888;font-size:12px;margin-bottom:12px}
.dlg-mask{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:100}
.dlg{background:#fff;border-radius:12px;padding:24px;width:480px;max-width:92vw;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.dlg h3{margin:0 0 12px;color:var(--accent)}.dlg p{color:#666;font-size:13px;line-height:1.5;margin:8px 0}
.dlg input{width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:6px;font-size:14px;box-sizing:border-box}
.dlg .row{display:flex;gap:8px;margin-top:16px;justify-content:flex-end}
.dlg button{padding:8px 16px;border-radius:6px;border:1px solid #ccc;background:#fafafa;cursor:pointer;font-size:13px}
.dlg button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.dlg button:disabled{opacity:.5;cursor:not-allowed}
.dlg .err{color:#c0392b;font-size:13px;margin-top:8px}.dlg .ok{color:var(--free);font-size:13px;margin-top:8px}
footer{background:#efeaf5;padding:10px 20px;color:#6b6b6b;font-size:11px;border-top:1px solid #e7e3ee}
#footer-info{display:none}#footer-info.force-show-footer{display:block !important}
.kbd{background:#fff;padding:1px 5px;border:1px solid #ccc;border-radius:3px;font-family:ui-monospace,monospace;font-size:11px}
.cache-tip{display:inline-block;color:var(--free);font-size:11px;margin-left:8px;font-weight:600}
.hdr-row{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
.hdr-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-top:2px}
.hdr-cache{background:rgba(255,255,255,.18);padding:4px 10px;border-radius:12px;font-size:11px;white-space:nowrap}
.hdr-btn{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.4);padding:4px 12px;border-radius:4px;font-size:11px;cursor:pointer;white-space:nowrap}
.hdr-btn:hover{background:rgba(255,255,255,.32)}
/* === 章节页顶部常驻工具条 (A2/A4/A6) === */
.hdr-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.22)}
.tool-btn{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.38);padding:5px 12px;border-radius:4px;font-size:12.5px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.tool-btn:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.65)}
.tool-btn:disabled{opacity:.55;cursor:default;background:rgba(255,255,255,.08)}
.tool-spacer{flex:1 1 auto}
/* 图片加载失败占位(替代裂图) */
.img-fail{display:flex;align-items:center;justify-content:center;min-height:76px;margin:10px 0;padding:14px 16px;background:#faf7f2;border:1px dashed #c9bda6;border-radius:4px;color:#7a6a52;font-size:13px;line-height:1.6;text-align:center}
.paid-zone{user-select:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none}
.paid-zone ::selection{background:rgba(255,255,255,0);color:inherit}
.paid-zone::-moz-selection{background:rgba(255,255,255,0);color:inherit}
.paid-zone pre.tbl{white-space:pre-wrap;font-size:11px}
.alert-banner{background:linear-gradient(90deg,#ffeb3b 0%,#ff9800 50%,#ffeb3b 100%);color:#222;overflow:hidden;border-bottom:1px solid #e0a040;font-weight:700;font-size:13px;line-height:1.5;min-height:28px;display:flex;align-items:center}
.alert-banner .scroll{display:inline-flex;white-space:nowrap;will-change:transform}
.alert-banner .scroll span{padding:0 32px;flex-shrink:0}
.hdr-search{position:relative;flex:0 1 320px;min-width:160px}
/* 触发按钮(magnifier icon):点击后弹搜索弹窗 */
.hdr-search-trigger{
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;
padding:6px 12px;border-radius:4px;font-size:15px;cursor:pointer;
display:inline-flex;align-items:center;gap:6px;line-height:1;
transition:background .15s, border-color .15s;
}
.hdr-search-trigger:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6)}
.hdr-search-trigger .kbd-hint{
font-size:10px;background:rgba(255,255,255,.18);padding:1px 5px;border-radius:3px;
color:rgba(255,255,255,.7);pointer-events:none;font-family:monospace;
}
/* === 通用 modal 框架 === */
.modal-wrap{position:fixed;inset:0;z-index:10000;display:none;align-items:flex-start;justify-content:center;padding-top:10vh}
.modal-wrap.show{display:flex}
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .18s}
.modal-wrap.show .modal-overlay{opacity:1}
/* === 进度弹窗(可复用) === */
.progress-modal{
position:relative;
background:#fff;color:#222;border-radius:12px;
width:420px;max-width:90vw;padding:24px 28px;
box-shadow:0 12px 40px rgba(0,0,0,.3);
transform:translateY(-12px) scale(.96);transition:transform .18s, opacity .18s;opacity:0;
}
.modal-wrap.show .progress-modal{transform:translateY(0) scale(1);opacity:1}
.progress-modal h3{margin:0 0 8px;font-size:16px;font-weight:600}
.progress-modal > p{margin:0 0 16px;color:#666;font-size:13px;line-height:1.6}
.progress-modal-bar{height:8px;background:#eef0f3;border-radius:4px;overflow:hidden}
.progress-modal-bar-fill{height:100%;width:0;background:linear-gradient(90deg, #4f46e5, #8b5cf6);transition:width .25s ease}
.progress-modal-pct{margin-top:8px;font-size:12px;color:#444;display:flex;justify-content:space-between;align-items:center}
.progress-modal-cancel{
margin-top:14px;padding:6px 14px;background:transparent;border:1px solid #d1d5db;
border-radius:4px;cursor:pointer;font-size:12px;color:#666;display:block;margin-left:auto;margin-right:auto;
}
.progress-modal-cancel:hover{background:#f5f5f5}
/* === 搜索弹窗 === */
.search-modal{
position:relative;
background:#fff;color:#222;border-radius:12px;
width:640px;max-width:92vw;max-height:76vh;
display:flex;flex-direction:column;
box-shadow:0 16px 48px rgba(0,0,0,.35);
transform:translateY(-12px) scale(.96);transition:transform .18s, opacity .18s;opacity:0;
}
.modal-wrap.show .search-modal{transform:translateY(0) scale(1);opacity:1}
.search-modal-header{
display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid #eee;
}
.search-modal-header input{
flex:1;padding:11px 14px;font-size:16px;border:1px solid #d1d5db;border-radius:8px;
outline:none;background:#fafafa;font-family:inherit;
}
.search-modal-header input:focus{border-color:#4f46e5;background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.search-modal-header input::placeholder{color:#9ca3af}
.search-modal-close{
width:36px;height:36px;border:none;background:transparent;font-size:24px;
cursor:pointer;border-radius:6px;color:#666;display:flex;align-items:center;justify-content:center;
}
.search-modal-close:hover{background:#f3f4f6;color:#111}
.search-modal-body{padding:0;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.search-modal-footer{
padding:8px 16px;font-size:11px;color:#888;
border-top:1px solid #eee;display:flex;align-items:center;gap:14px;
background:#fafafa;border-radius:0 0 12px 12px;
}
.search-modal-footer > span{flex:0 0 auto}
.search-modal-footer > span + span{margin-left:0}
.search-modal-rebuild{
margin-left:auto;padding:4px 10px;background:transparent;border:1px solid #d1d5db;
border-radius:4px;cursor:pointer;font-size:11px;color:#555;
}
.search-modal-rebuild:hover{background:#f3f4f6}
/* === 搜索结果 === */
.search-section-titles{min-height:80px}
.search-section-title{
padding:8px 16px;font-size:12px;color:#666;font-weight:600;
background:#fafafa;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;
position:sticky;top:0;
}
.search-item{
padding:10px 16px;cursor:pointer;font-size:14px;
border-bottom:1px solid #f3f4f6;
transition:background .1s;
}
.search-item:hover, .search-item.active{background:#f0f7ff}
.search-item-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.search-item .title{font-weight:600;color:#1f2937}
.search-item .group{color:#9ca3af;font-size:11px;margin-left:auto}
.search-item .badge-free{color:#15803d;font-size:10px;background:#dcfce7;padding:2px 6px;border-radius:3px;font-weight:600}
.search-item .badge-paid{color:#1e40af;font-size:10px;background:#dbeafe;padding:2px 6px;border-radius:3px;font-weight:600}
.search-item .badge-locked{color:#b91c1c;font-size:10px;background:#fee2e2;padding:2px 6px;border-radius:3px;font-weight:600}
.search-item-content{padding:12px 16px}
.search-item-content .title{font-size:14px}
.search-context{
font-size:13px;color:#374151;line-height:1.65;padding:4px 0;
font-family:ui-monospace, "SF Mono", Consolas, monospace;
word-break:break-word;
}
.search-context-more{font-size:12px;color:#888;font-style:italic;padding:4px 0}
.search-mark{background:#fde68a;color:#92400e;padding:0 2px;border-radius:2px;font-weight:600}
.search-empty{padding:24px;color:#888;font-size:13px;text-align:center}
.search-empty-cached{padding:10px 16px;color:#999;font-size:12px;font-style:italic;border-bottom:1px solid #f3f4f6}
.search-empty-hint{padding:12px 16px;color:#6b7280;font-size:12px;text-align:center;border-bottom:1px solid #f3f4f6;background:#fafafa}
.search-notice-top{padding:10px 16px;font-size:12px;color:#6b7280;background:#fffbeb;border-bottom:1px solid #fde68a;line-height:1.5}
.search-notice-bottom{padding:10px 16px;font-size:12px;color:#6b7280;background:#f8fafc;border-top:1px solid #e5e7eb;margin-top:4px;line-height:1.5;text-align:center;font-style:italic}
.search-item-locked{opacity:.72;background:linear-gradient(180deg,#fafafa 0%,#f3f4f6 100%)}
.search-item-locked:hover{background:linear-gradient(180deg,#f0f0f0 0%,#e5e7eb 100%);opacity:1}
.search-locked-hint{color:#9ca3af;font-size:11px;padding:4px 0 2px;font-style:italic}
.search-locked-sub{color:#6b7280;font-size:12px;padding:3px 0;background:rgba(99,102,241,.06);border-left:2px solid #818cf8;padding-left:8px;border-radius:0 4px 4px 0;margin:2px 0;font-family:ui-monospace,Menlo,monospace}
/* === URL ?q= 章节内高亮(保留旧版样式) === */
.content-mark{background:#fff59d;color:#5d4037;padding:0 2px;border-radius:2px;font-weight:600}
.content-mark.active{background:#ff9800;color:#fff;outline:2px solid #f57c00;outline-offset:1px}
.match-hint{position:sticky;top:0;background:rgba(255,249,196,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#5d4037;padding:6px 12px;font-size:12px;border-radius:6px;margin:8px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:5;border:1px solid #fbc02d}
.match-hint .match-hint-label{flex:1}
.match-hint button{background:#5d4037;color:#fff;border:none;border-radius:3px;padding:4px 10px;cursor:pointer;font-size:12px;font-family:inherit}
.match-hint button:hover{background:#3e2723}
/* === 手机 modal 适配(< 768px) ===
- 搜索弹窗改为底部 sheet(图标按钮放下边栏方便拇指)
- 进度弹窗占满宽度
- kbd hint 隐藏(无物理键盘)
- 输入框字体防 iOS 自动放大(>= 16px)
*/
@media (max-width:768px){
.modal-wrap{padding-top:0;align-items:flex-end}
.progress-modal{width:92vw;padding:20px 18px}
.search-modal{width:100%;max-width:100%;max-height:85vh;border-radius:16px 16px 0 0}
.search-modal-header{padding:12px 14px}
.search-modal-header input{font-size:16px;padding:10px 12px}
.search-modal-close{width:40px;height:40px}
.search-modal-rebuild{padding:6px 10px;font-size:12px}
.hdr-search-trigger .kbd-hint{display:none}
.search-item{padding:10px 14px;font-size:14px}
.search-item-content{padding:12px 14px}
.search-context{font-size:13px;line-height:1.6}
.search-notice-top{padding:8px 14px;font-size:11.5px}
.search-notice-bottom{padding:8px 14px;font-size:11.5px}
.search-empty-hint{padding:10px 14px;font-size:11.5px}
}
@media (max-width:768px){
body{font-size:14px}header{padding:10px 12px}h1{font-size:14px}h1 .tag{font-size:10px;padding:1px 6px;margin-left:3px}
.hdr-row{flex-direction:column;align-items:flex-start !important;gap:6px}.hdr-right{width:100%;justify-content:space-between}
.hdr-tools{gap:6px;margin-top:6px;padding-top:6px}
.tool-btn{padding:6px 10px;font-size:12px;flex:0 1 auto}
.tool-spacer{display:none}
main{grid-template-columns:1fr !important}
aside{position:fixed;top:0;left:0;bottom:0;width:80%;max-width:320px;z-index:50;transform:translateX(-100%);transition:transform .25s ease;box-shadow:4px 0 24px rgba(0,0,0,.2);padding-top:50px}
aside.mobile-open{transform:translateX(0)}.mobile-menu-btn{display:inline-flex !important}
article{padding:14px 16px !important;font-size:14.5px;line-height:1.7}article h2{font-size:18px}article h3{font-size:16px}
/* === 开屏动画(黑客帝国版:两侧01雨 + 汝啊/是想成为忍者吧放大淡出 + 刀光斩开变白 + 说明页) === */
body.intro-no-scroll{overflow:hidden !important}
.intro-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;overflow:hidden;background:#000;opacity:1;transition:opacity .4s ease;overscroll-behavior:none;touch-action:none}
.intro-overlay.dismissed{opacity:0;visibility:hidden;pointer-events:none}
.intro-overlay *::selection{background:transparent}
/* 背景层 */
.intro-black-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:#000;z-index:1;transition:opacity .6s ease}
.intro-black-bg.fade-out{opacity:0}
.intro-white-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;z-index:2;opacity:0;transition:opacity .8s ease}
.intro-white-bg.show{opacity:1}
/* 01雨:全屏 canvas,JS 只在左右列渲染 */
.intro-matrix{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:block;z-index:3;opacity:.85;transition:opacity .5s ease}
.intro-matrix.fading{opacity:0}
/* 初始提示(点击屏幕继续):默认隐藏,保留备用 */
.intro-hint{position:absolute;top:0;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;z-index:5;opacity:0;visibility:hidden;transition:opacity .6s ease;pointer-events:none}
.intro-hint.show{display:flex;opacity:1;visibility:visible}
.intro-hint span{font-family:"Noto Serif JP","PingFang SC","Microsoft YaHei",serif;font-size:clamp(13px,1.6vw,15px);color:rgba(255,255,255,.5);letter-spacing:.2em}
/* 文本阶段容器 */
.intro-text-stage{position:absolute;top:0;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;z-index:10;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease}
.intro-text-stage.show{display:flex;opacity:1;visibility:visible}
.intro-text-stage .intro-big-text{font-family:"Noto Serif JP","PingFang SC","Microsoft YaHei",serif;font-size:clamp(48px,10vw,120px);font-weight:700;color:#fff;letter-spacing:.12em;text-align:center;white-space:nowrap;text-shadow:0 0 24px rgba(255,255,255,.35);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;max-width:100vw;padding:0 18px;box-sizing:border-box}
.intro-text-stage .intro-big-text.zoom{animation:text-zoom 1.8s ease forwards}
@keyframes text-zoom{
0%{opacity:0;transform:scale(.82);filter:blur(4px)}
15%{opacity:1;transform:scale(1);filter:blur(0)}
55%{opacity:1;transform:scale(1.08)}
100%{opacity:0;transform:scale(1.35);filter:blur(2px)}
}
/* 刀光:JS 按屏幕宽高比设置 --sang/--slen,保证从左下角切到右上角 */
.intro-slash{position:absolute;z-index:20;width:var(--slen, 200vmax);height:8px;background:linear-gradient(90deg,transparent 0%,#fff 12%,#fff 88%,transparent 100%);box-shadow:0 0 30px 10px rgba(255,255,255,.9),0 0 70px 24px rgba(255,255,255,.5);transform:rotate(var(--sang, -35deg)) scaleX(0);transform-origin:left center;opacity:0;left:0;bottom:0;pointer-events:none}
.intro-slash.fly{animation:slash-sweep .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes slash-sweep{
0%{transform:rotate(var(--sang, -35deg)) scaleX(0);opacity:0}
12%{opacity:1}
100%{transform:rotate(var(--sang, -35deg)) scaleX(1);opacity:0}
}
/* 最终标题阶段:忍者杀手风格——白底+黑色+金色装饰+角落忍字水印 */
.intro-final-stage{position:absolute;top:0;left:0;right:0;bottom:0;display:none;flex-direction:column;align-items:center;z-index:5;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s ease;color:#000;padding:clamp(56px, 9vh, 96px) clamp(16px, 4vw, 40px) clamp(24px, 5vh, 48px);overflow-y:auto;background:
radial-gradient(ellipse at top left, rgba(191,160,48,.08) 0%, transparent 55%),
radial-gradient(ellipse at bottom right, rgba(120,80,140,.06) 0%, transparent 55%),
linear-gradient(180deg, #fdfaf3 0%, #ffffff 40%, #f7f3fa 100%);
background-attachment:local}
/* 内容淡出动画:点击开始阅读按钮时整体上移淡出 */
.intro-final-stage > *{transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);opacity:1;transform:translateY(0)}
.intro-final-stage.leaving > *{opacity:0;transform:translateY(-24px)}
.intro-final-stage.leaving::before{opacity:0;transition:opacity .4s ease}
.intro-final-stage.leaving::after{opacity:0;transition:opacity .4s ease}
.intro-final-stage.show{display:flex;opacity:1;visibility:visible;pointer-events:auto}
/* 顶部黑色装饰条 */
.intro-final-stage::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#111 0%, #111 35%, #bfa030 50%, #111 65%, #111 100%);z-index:1}
/* 角落忍字水印 */
.intro-final-stage::after{content:"";position:absolute;inset:0;background:
radial-gradient(circle at 8% 18%, rgba(0,0,0,0) 0 60px, transparent 60px),
url("data:image/svg+xml;utf8,") no-repeat 2% 8%/260px 260px,
url("data:image/svg+xml;utf8,") no-repeat right 8% bottom 6%/260px 260px;
pointer-events:none;z-index:0}
.intro-final-stage > *{position:relative;z-index:2}
.intro-title-group{text-align:center;margin:0 0 clamp(16px, 3vh, 32px);position:relative}
/* 标题两侧装饰竖线 */
.intro-title-group::before,.intro-title-group::after{content:"";position:absolute;top:50%;width:clamp(28px, 6vw, 60px);height:1px;background:linear-gradient(90deg,transparent,#111,transparent);transform:translateY(-50%)}
.intro-title-group::before{right:calc(100% + 14px)}
.intro-title-group::after{left:calc(100% + 14px)}
.intro-final-stage .intro-title{font-family:"Noto Serif JP","PingFang SC","Microsoft YaHei",serif;font-size:clamp(40px, 9vw, 78px);font-weight:700;color:#111;letter-spacing:.22em;margin:0 0 14px;text-align:center;white-space:nowrap;text-shadow:2px 2px 0 rgba(191,160,48,.18)}
.intro-final-stage .intro-title::after{content:"";display:block;width:80px;height:3px;background:linear-gradient(90deg, transparent, #bfa030 30%, #111 50%, #bfa030 70%, transparent);margin:14px auto 0;border-radius:2px}
.intro-final-stage .intro-sub{font-family:"Noto Serif JP","PingFang SC","Microsoft YaHei",serif;font-size:clamp(22px, 4vw, 34px);font-weight:700;color:#111;letter-spacing:.55em;margin:0;text-align:center}
.intro-final-stage .intro-sub .accent{color:#bfa030}
/* 说明页 card:切角+印章角+金色边 */
.intro-notice-card{width:min(640px, 92vw);max-height:min(520px, 56vh);background:#fff;border:1px solid #1a1a1a;border-radius:0;padding:0;box-shadow:0 14px 50px rgba(0,0,0,.18), 0 2px 0 #bfa030 inset;overflow:hidden;display:flex;flex-direction:column;margin-top:clamp(8px, 2vh, 20px);position:relative;clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px))}
.intro-notice-card .intro-notice-head{background:linear-gradient(180deg, #1a1a1a 0%, #000 100%);color:#fff;padding:14px 24px;font-family:"Noto Serif JP","PingFang SC","Microsoft YaHei",serif;font-size:clamp(16px, 2.4vw, 20px);font-weight:700;letter-spacing:.12em;text-align:center;position:relative;border-bottom:2px solid #bfa030}
.intro-notice-card .intro-notice-head::after{content:"NS";position:absolute;top:50%;right:18px;transform:translateY(-50%);font-family:ui-monospace,monospace;font-size:11px;color:#bfa030;letter-spacing:.1em;background:rgba(191,160,48,.1);padding:3px 6px;border:1px solid rgba(191,160,48,.4)}
.intro-notice-card .intro-notice-inner{padding:24px 28px 28px;border-left:4px solid #bfa030;overflow-y:auto;flex:1 1 auto;background:repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(0,0,0,.015) 28px, rgba(0,0,0,.015) 29px)}
.intro-notice-body{font-size:clamp(12px, 1.4vw, 14px);line-height:1.85;color:#333}
.intro-notice-body p{margin:0 0 10px}
.intro-notice-body p:last-child{margin-bottom:0}
.intro-notice-sub{font-size:clamp(12px, 1.4vw, 14px);color:#666;text-align:center;margin-bottom:16px;line-height:1.6}
.intro-notice-hint{font-size:clamp(11px, 1.3vw, 13px);color:#888;text-align:center;margin-top:16px}
.intro-notice-note{font-size:11px;color:#aaa;text-align:center;margin-top:12px}
/* 开始阅读按钮:黑底+金色装饰+切角 */
.intro-start-btn{display:block;margin:24px auto 0;padding:14px 52px;background:#111;color:#fff;border:none;border-radius:0;font-size:15px;font-weight:700;letter-spacing:.25em;cursor:pointer;font-family:inherit;position:relative;overflow:hidden;transition:transform .15s, box-shadow .15s;clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))}
.intro-start-btn::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(191,160,48,.35), transparent);transition:left .45s}
.intro-start-btn::after{content:"▶";display:inline-block;margin-left:10px;font-size:11px;color:#bfa030}
.intro-start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.intro-start-btn:hover::before{left:100%}
.intro-start-btn:active{transform:translateY(0)}
/* 底部 footer */
.intro-final-footer{margin-top:clamp(16px, 3vh, 28px);font-family:ui-monospace,monospace;font-size:10px;color:#999;letter-spacing:.3em;text-align:center}
.intro-final-footer .dot{margin:0 8px;color:#bfa030}
.intro-final-footer .week{color:#bfa030;font-weight:600}
/* 装饰角标 */
.intro-corner{position:absolute;font-size:10px;color:rgba(255,255,255,.25);letter-spacing:.25em;font-family:ui-monospace,monospace;z-index:5;transition:color .5s ease}
.intro-corner.dark{color:rgba(0,0,0,.25)}
.intro-corner-tl{top:24px;left:32px}
.intro-corner-br{bottom:24px;right:32px}
/* 跳过链接 */
.intro-skip{position:absolute;top:24px;right:32px;color:rgba(255,255,255,.35);font-size:11px;cursor:pointer;background:none;border:none;letter-spacing:.2em;transition:color .2s;font-family:ui-monospace,monospace;z-index:40}
.intro-skip:hover{color:rgba(255,255,255,.7)}
.intro-skip.dark{color:rgba(0,0,0,.35)}.intro-skip.dark:hover{color:rgba(0,0,0,.7)}
@media (max-width:768px){
.intro-text-stage .intro-big-text{font-size:clamp(28px,8.5vw,56px);letter-spacing:.06em;white-space:normal;word-break:keep-all;line-height:1.25;padding:0 16px;box-sizing:border-box}
.intro-final-stage{padding:42px 14px 24px}
.intro-final-stage::after{background-size:160px 160px}
.intro-title-group::before,.intro-title-group::after{width:20px}
.intro-title-group::before{right:calc(100% + 8px)}
.intro-title-group::after{left:calc(100% + 8px)}
.intro-final-stage .intro-title{font-size:clamp(32px, 8vw, 52px);letter-spacing:.15em}
.intro-final-stage .intro-sub{font-size:clamp(16px, 3.2vw, 24px);letter-spacing:.4em}
.intro-notice-card{max-height:60vh}
.intro-notice-card .intro-notice-inner{padding:18px 18px 22px}
.intro-start-btn{padding:12px 36px;font-size:14px}
.intro-final-footer{font-size:9px;letter-spacing:.2em}
.intro-skip{top:16px;right:16px}
.intro-corner-tl{top:16px;left:16px}
.intro-corner-br{bottom:16px;right:16px}
}
.group-h{font-size:14px;padding:8px 10px}.chap{font-size:14px;padding:10px 8px}
.doc-img{max-height:400px}.dlg{width:92vw !important;padding:18px !important}
.alert-banner{font-size:12px;padding:5px 0}
.paid-zone *,.paid-zone{-webkit-touch-callout:none !important;-webkit-user-select:none !important;user-select:none !important}
article,article p,article h2,article h3{-webkit-touch-callout:none}
}
.mobile-menu-btn{display:none;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);color:#fff;padding:4px 10px;border-radius:4px;font-size:14px;cursor:pointer;margin-right:8px;white-space:nowrap;flex-shrink:0;min-width:fit-content}
.mobile-menu-btn:hover{background:rgba(255,255,255,.32)}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:49}.scrim.show{display:block}
/* === 天下検阅威慑覆盖层 + 失焦打码 === */
.guard-overlay{position:fixed;inset:0;z-index:9999;background:rgba(8,4,4,.96);display:none;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;animation:guard-flash .12s ease-out}
.guard-overlay.show{display:flex}
.guard-pattern{position:absolute;inset:-30vh -30vw;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;gap:0;font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN","PingFang SC",serif;font-weight:900;color:rgba(214,32,32,0.32);font-size:clamp(38px, 9vw, 92px);letter-spacing:.18em;line-height:1;pointer-events:none;writing-mode:vertical-rl;text-orientation:upright;-webkit-text-stroke:1px rgba(255,200,200,0.18);text-shadow:0 0 24px rgba(214,32,32,0.45)}
.guard-pattern span{display:inline-block;padding:0 .25em;white-space:nowrap;will-change:transform}
.guard-center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;color:#f8e8d8;text-align:center}
.guard-center .guard-title{font-family:"Noto Serif JP","PingFang SC",serif;font-weight:900;color:#ff5050;text-shadow:0 0 18px rgba(255,80,80,.6), 0 0 4px rgba(0,0,0,.95);letter-spacing:.22em;font-size:clamp(20px, 3.6vw, 32px)}
.guard-center .guard-sub{font-size:clamp(12px, 2.2vw, 16px);letter-spacing:.3em;opacity:.85}
.guard-center .guard-icon{font-size:clamp(36px, 6vw, 56px);filter:drop-shadow(0 0 12px rgba(255,80,80,.5))}
@keyframes guard-flash{from{filter:brightness(1.6)}to{filter:brightness(1)}}
@keyframes guard-flicker{0%,100%{opacity:1}50%{opacity:.78}}
.guard-overlay.show .guard-pattern{animation:guard-flicker .9s ease-in-out}
@media (max-width:768px){.guard-pattern{font-size:clamp(28px, 11vw, 64px);letter-spacing:.12em}.guard-center .guard-title{font-size:clamp(16px, 5.5vw, 22px);letter-spacing:.16em}.guard-center .guard-sub{font-size:11px}.guard-center .guard-icon{font-size:34px}.guard-pattern{padding:0 4px}}
@media (prefers-reduced-motion:reduce){.guard-overlay,.guard-overlay.show .guard-pattern{animation:none}}
/* === 未解锁付费章节占位卡（常态显示） === */
.locked-stage{position:relative;min-height:100vh;padding:40px 16px 32px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* 水印：DOM 竖排文字矩阵，方案 A — 全屏铺满（覆盖 header/sidebar/banner 一切），用 100dvh 兜底 iOS Safari 底部工具栏留白 */
.locked-pattern{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:5;pointer-events:auto;overflow:visible;touch-action:none;overscroll-behavior:none;background:linear-gradient(135deg,rgba(8,4,4,.96),rgba(16,8,8,.94))}
@supports (-webkit-touch-callout:none){.locked-pattern{height:-webkit-fill-available}}
.locked-pattern text{font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN","PingFang SC",serif;font-weight:900;fill:rgba(214,32,32,0.32);font-size:48px;letter-spacing:.18em;-webkit-text-stroke:1px rgba(255,200,200,0.16);text-shadow:0 0 20px rgba(214,32,32,0.4);dominant-baseline:middle;text-anchor:middle}
/* 解锁功能框: fixed 定位, 始终在视口中央, 滚动时不动 */
.locked-card{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:20;max-width:480px;width:calc(100% - 32px);padding:32px 28px 28px;background:rgba(8,4,4,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(214,32,32,0.25);box-shadow:0 0 60px rgba(214,32,32,0.18), inset 0 0 30px rgba(0,0,0,0.45);color:#f8e8d8;border-radius:6px;animation:locked-pulse 1.6s ease-in-out infinite}
@keyframes locked-pulse{0%,100%{box-shadow:0 0 60px rgba(214,32,32,0.18), inset 0 0 30px rgba(0,0,0,0.45)}50%{box-shadow:0 0 80px rgba(214,32,32,0.32), inset 0 0 30px rgba(0,0,0,0.45)}}
.locked-kicker{font-size:11px;letter-spacing:.5em;text-align:center;color:#d4af37;opacity:.85;margin-bottom:10px}
.locked-card .locked-title{font-family:"Noto Serif JP","PingFang SC",serif;font-weight:700;font-size:clamp(20px, 4.2vw, 28px);text-align:center;color:#fff;letter-spacing:.1em;margin-bottom:4px;text-shadow:0 0 12px rgba(0,0,0,.85)}
.locked-card .locked-hr{font-size:18px;text-align:center;color:#d4af37;margin:14px 0 6px;letter-spacing:.4em}
.locked-card .locked-title-sub{font-family:"Noto Serif JP",serif;font-weight:900;font-size:clamp(15px, 3.4vw, 22px);text-align:center;color:#ff5050;letter-spacing:.18em;margin-bottom:14px;text-shadow:0 0 14px rgba(255,80,80,.55)}
.locked-card .locked-desc{font-size:14px;line-height:1.7;color:#e8d8c8;text-align:center;letter-spacing:.04em;margin-bottom:18px;opacity:.92}
.locked-card .locked-notes{list-style:none;padding:14px 16px;margin:0 0 22px;background:rgba(0,0,0,0.4);border-left:3px solid rgba(214,32,32,0.55);border-radius:0 4px 4px 0;font-size:12.5px;line-height:1.8;color:#e0c8b8;letter-spacing:.05em}
.locked-card .locked-notes li::before{content:"◾";color:#d4af37;margin-right:8px;font-size:11px;vertical-align:1px}
.locked-card .locked-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.locked-card .locked-btn{display:block;width:100%;padding:13px 18px;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.18em;cursor:pointer;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#f0e0d0;border-radius:4px;transition:background .15s, transform .1s}
.locked-card .locked-btn:hover:not(:disabled){background:rgba(255,255,255,.12);transform:translateY(-1px)}
.locked-card .locked-btn:active:not(:disabled){transform:translateY(0)}
.locked-card .locked-btn.primary{background:linear-gradient(135deg, #8b2828, #6b1818);color:#fff;border-color:rgba(255,80,80,.4);box-shadow:0 2px 14px rgba(139,40,40,.45)}
.locked-card .locked-btn.primary:hover:not(:disabled){background:linear-gradient(135deg, #a02828, #7b1818);box-shadow:0 4px 20px rgba(160,40,40,.55)}
.locked-card .locked-btn:disabled{opacity:.55;cursor:default}
.locked-card .locked-status{margin-top:14px;text-align:center;font-size:12.5px;letter-spacing:.18em;min-height:1.4em;color:#d4af37}
.locked-card .locked-busy{opacity:.85}
@media (max-width:768px){.locked-stage{min-height:100vh;padding:24px 10px}.locked-card{width:calc(100% - 24px);padding:24px 18px 22px}.locked-card .locked-notes{font-size:11.5px;padding:12px 12px}.locked-card .locked-actions{gap:8px}.locked-card .locked-btn{padding:11px 14px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.locked-card{animation:none}}