/* 《定格》V3 样式。在 V2 样式上加了文件末尾“V3”一段（小林的心声、自动做出的第一反应、想到了的纸条、顶部进度、如果你是小林）。V2 的设计语言见 04_V2原型/设计说明_重构版.md */
:root{
--ink:#0b0b0c;
--paper:#efeae2;
--muted:#9d978d;
--faint:rgba(239,234,226,.14);
--amber:#e0b35e;
--amber-soft:rgba(224,179,94,.16);
--serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","Noto Serif CJK SC",serif;
--sans:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
--bar:0px;
--ease:cubic-bezier(.22,.61,.36,1);
--shadow:0 1px 2px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;background:var(--ink);color:var(--paper);overflow:hidden;
font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible{outline:1px solid rgba(239,234,226,.8);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- 画面层 ---------- */
#stage{position:fixed;inset:0;overflow:hidden;overflow:clip;background:var(--ink);outline:none}
#stage.wait{cursor:pointer}
#stage.idle,#stage.idle *{cursor:none!important}
.film{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;
transition:opacity .6s var(--ease),filter 1.4s var(--ease);will-change:opacity}
.film.on{opacity:1}
/* 定格时的褪色做在画面之上的一层，而不是视频本身：切换视频时这一层不变，接缝处不会跳 */
#tint{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
-webkit-backdrop-filter:saturate(.5) brightness(.86);backdrop-filter:saturate(.5) brightness(.86);transition:opacity 1.2s var(--ease)}
#stage.desat #tint{opacity:1}
#stage.narrow #tint{opacity:1;-webkit-backdrop-filter:saturate(.3) brightness(.58);backdrop-filter:saturate(.3) brightness(.58)}
#grain{position:absolute;inset:-50%;pointer-events:none;opacity:.07;z-index:3;
background-image:url("data:image/svg+xml;utf8,");
animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,3%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:3;transition:box-shadow 1.2s var(--ease);
box-shadow:inset 0 0 160px rgba(0,0,0,.55);
background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 16%,rgba(0,0,0,0) 32%)}
#stage.narrow #vignette{box-shadow:inset 0 0 320px 90px rgba(0,0,0,.9)}
#shade{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .8s var(--ease);
background:linear-gradient(to top,rgba(8,8,9,.92) 0%,rgba(8,8,9,.55) 34%,rgba(8,8,9,0) 62%)}
#stage.bars #shade{opacity:1}
/* 跳过时的短暂遮黑：遮住跳切，不参与场景切换的黑场 */
#seekveil{position:absolute;inset:0;z-index:6;background:#000;opacity:0;pointer-events:none;transition:opacity .2s ease}
#seekveil.on{opacity:1}
#black{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:20;transition:opacity .5s ease}
#black.on{opacity:1}
/* 定格时上下黑边收拢 */
.bar{position:absolute;left:0;right:0;height:var(--bar);background:#000;z-index:7;transition:height .9s var(--ease)}
.bar.top{top:0}.bar.bottom{bottom:0}
#stage.bars{--bar:6.5vh}
/* ---------- 雾（看周围） ---------- */
/* WebGL 画布自己画视频和雾，放在暗角、颗粒、黑边之下，风格与电影画面保持一致 */
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:0;transition:opacity 1.8s var(--ease),filter 1.2s var(--ease);touch-action:none;pointer-events:none}
#stage.narrow #fx{filter:saturate(.4) brightness(.62)} /* 注意力收窄那一拍：雾画布盖在 #tint 上面，压暗要直接加在画布上 */
#fx.on{opacity:1;pointer-events:auto;cursor:default}
#fx.brush{cursor:none} /* 只在擦雾时隐藏光标；找到线索或选定后去掉 brush，换回普通光标 */
#brush{position:absolute;left:0;top:0;z-index:9;width:var(--d,90px);height:var(--d,90px);margin:calc(var(--d,90px)/-2) 0 0 calc(var(--d,90px)/-2);
border-radius:50%;pointer-events:none;opacity:0;transition:opacity .25s;
border:1px solid rgba(255,255,255,.55);box-shadow:0 0 22px rgba(255,255,255,.16),inset 0 0 16px rgba(255,255,255,.2)}
#brush::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:rgba(255,255,255,.85)}
#brush.on{opacity:1}
/* 引导：一个光点示范擦雾或点一下 */
#ghost{position:absolute;left:0;top:0;z-index:9;pointer-events:none;opacity:0;transition:opacity .35s}
#ghost.on{opacity:1}
#ghost i{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.95) 0 28%,rgba(255,255,255,.28) 30% 58%,rgba(255,255,255,0) 60%);
box-shadow:0 0 26px rgba(255,255,255,.45)}
#ghost::after{content:"";position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);opacity:0}
#ghost.tap::after{animation:tapring .9s var(--ease) 2}
@keyframes tapring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}
.cluemark{position:absolute;z-index:6;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;font-family:var(--sans);
font-size:15px;letter-spacing:.2em;color:var(--paper);padding:4px 12px 4px 14px;border:1px solid rgba(239,234,226,.35);
background:rgba(11,11,12,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .6s}
.cluemark.on{opacity:.92;transition:opacity .6s,left .45s var(--ease),top .45s var(--ease)} /* 给面板让位时平滑挪过去 */
/* D29：这一轮看见过的线索，名字可以点——再看一遍那段片段。小三角表示能看 */
.cluemark.replay{pointer-events:auto;cursor:pointer}
.cluemark.replay::after{content:"▸";margin-left:.45em;opacity:.7}
.cluemark.replay:hover,.cluemark.replay:focus-visible{opacity:1;border-color:rgba(239,234,226,.85);outline:none}
.thought{position:absolute;z-index:8;max-width:min(360px,80vw);padding:14px 18px 15px;pointer-events:none;
background:rgba(11,11,12,.78);border-left:2px solid var(--amber);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.thought.on{opacity:1;transform:none}
.thought small{display:block;font-size:12px;letter-spacing:.28em;color:var(--amber);margin-bottom:7px}
.thought p{font-family:var(--serif);font-size:18px;line-height:1.65}
.thought p span{opacity:0}
.thought.on p span{animation:ink .6s var(--ease) forwards}
@keyframes ink{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
/* ---------- 字幕 ---------- */
#caption{position:absolute;left:50%;bottom:calc(var(--bar) + 7vh);transform:translateX(-50%);z-index:8;
width:min(1160px,90vw);text-align:center;text-wrap:balance;pointer-events:none;transition:bottom .6s var(--ease)} /* 放得下就一行；要两行时两行一样长 */
#stage.ctrl-on #caption{bottom:calc(var(--bar) + 7vh + 30px)}
#caption .who{display:block;font-size:13px;letter-spacing:.32em;color:var(--amber);margin-bottom:8px;min-height:1em;opacity:0;transition:opacity .35s;text-shadow:var(--shadow)}
#caption.on .who{opacity:1}
#caption .line{font-family:var(--serif);font-size:clamp(19px,2.3vw,27px);line-height:1.6;color:rgba(239,234,226,.94);
text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 24px rgba(0,0,0,.6);opacity:0;transition:opacity .35s ease}
#caption.on .line{opacity:1}
#caption .line.beat{color:#fff;letter-spacing:.02em}
#caption.dim .line{opacity:.45}
#caption .go{display:inline-block;margin-left:.5em;color:var(--amber);animation:nudge 1.4s ease-in-out infinite;opacity:0}
#caption.wait .go{opacity:1}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
/* ---------- 决定面板 ---------- */
#panel{position:absolute;left:0;right:0;bottom:calc(var(--bar) + 4.5vh);z-index:8;display:flex;justify-content:center;
pointer-events:none;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
#panel.on{opacity:1;transform:none}
/* 面板只有按钮接收点击：隐藏时不挡点击（A2 点不动的原因），显示时雾也能从文字下面擦 */
.panel-in{width:min(980px,90vw);pointer-events:none}
.panel-in:focus{outline:none}
#panel.on .opt{pointer-events:auto}
.layer{display:inline-block;font-size:12.5px;letter-spacing:.34em;color:var(--amber);margin-bottom:12px;text-shadow:var(--shadow)}
.q{font-family:var(--serif);font-size:clamp(21px,2.6vw,31px);line-height:1.5;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hint{margin-top:8px;font-size:13.5px;color:rgba(239,234,226,.7);letter-spacing:.04em;text-shadow:var(--shadow)}
.prev{margin-top:8px;font-size:13.5px;color:rgba(239,234,226,.68);text-shadow:var(--shadow)}
.prev b{font-weight:400;color:var(--paper)}
.clock{position:relative;height:2px;margin:18px 0 6px;background:var(--faint);overflow:hidden;width:min(560px,100%)}
.clock i{position:absolute;inset:0;background:var(--amber);transform-origin:left;display:block}
.clock.out i{background:transparent}
.opts{margin-top:18px;display:grid;gap:4px}
.opts.two{grid-template-columns:1fr 1fr;column-gap:34px} /* 只有 4 个选项时用两列（2×2）；3 个就一列，不会两上一下 */
.opt{position:relative;display:flex;align-items:baseline;gap:14px;text-align:left;padding:10px 0 10px 16px;
font-family:var(--serif);font-size:clamp(16px,1.7vw,19px);line-height:1.5;color:rgba(239,234,226,.86);text-shadow:0 1px 12px rgba(0,0,0,.55);
border-left:1px solid var(--faint);transition:color .2s,border-color .2s,transform .25s var(--ease),opacity .4s}
.opt .k{font-family:var(--sans);font-size:11.5px;color:var(--muted);letter-spacing:.1em;min-width:1.2em}
/* 悬停只动颜色和位置；键盘焦点另有描边，两者同时出现时分得清 */
.opt:hover{color:#fff;border-color:var(--amber);transform:translateX(4px)}
.opt:hover .k{color:var(--amber)}
.opt:focus-visible{color:#fff;outline:1px solid rgba(239,234,226,.7);outline-offset:3px}
.opt:disabled{cursor:default}
.opt.new{animation:arrive .9s var(--ease) backwards} /* backwards：动画结束后不再钉住样式，选了别的项它照样会淡出 */
.opt .new-tag{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--ink);background:var(--amber);padding:2px 7px;margin-right:2px;white-space:nowrap;text-shadow:none}
.opts.picked .opt{opacity:.2;transform:none}
.opts.picked .opt.pick{opacity:1;color:#fff;border-color:var(--amber)}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---------- 开始页 ---------- */
#title{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:center;padding:0 9vw;
background:linear-gradient(90deg,rgba(8,8,9,.82) 0%,rgba(8,8,9,.45) 45%,rgba(8,8,9,0) 75%);
opacity:0;pointer-events:none;transition:opacity 1s var(--ease)}
#title.on{opacity:1;pointer-events:auto}
#title h1{font-family:var(--serif);font-weight:400;font-size:clamp(64px,10vw,150px);letter-spacing:.25em;line-height:1}
#title .sub{margin-top:22px;font-family:var(--serif);font-size:clamp(15px,1.6vw,19px);letter-spacing:.3em;color:rgba(239,234,226,.8)}
#title .begin{margin-top:56px;align-self:flex-start;padding:12px 30px;border:1px solid rgba(239,234,226,.5);
font-size:14px;letter-spacing:.5em;transition:background .3s,border-color .3s,color .3s}
#title .begin:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
#title .note{margin-top:18px;font-size:12.5px;color:var(--muted);letter-spacing:.12em;line-height:2}
#loading{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:var(--ink);text-align:center;
font-family:var(--serif);letter-spacing:.3em;line-height:2;color:var(--muted);transition:opacity .8s}
#loading.off{opacity:0;pointer-events:none}
#loading.err{color:var(--paper);letter-spacing:.12em}
#loading small{font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
/* ---------- 结局 / 回到那一刻 / 复盘 / 结束 ---------- */
.page{position:absolute;inset:0;z-index:9;opacity:0;pointer-events:none;transition:opacity .9s var(--ease);outline:none}
.page.on{opacity:1;pointer-events:auto}
#ending img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.5)}
#ending::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,9,.8) 0%,rgba(8,8,9,.45) 45%,rgba(8,8,9,0) 80%)}
#ending .txt{position:absolute;left:9vw;bottom:14vh;width:min(620px,82vw);z-index:1}
.eyebrow{font-size:12.5px;letter-spacing:.34em;color:var(--amber)}
#ending h2{margin-top:14px;font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,64px);letter-spacing:.12em}
#ending p{margin-top:16px;font-family:var(--serif);font-size:clamp(17px,1.6vw,20px);line-height:1.8}
#ending .then{color:rgba(239,234,226,.66);font-size:15px}
.cont{display:inline-block;margin-top:24px;padding:10px 0;font-size:13px;letter-spacing:.3em;color:var(--muted);transition:color .2s}
.cont:hover{color:var(--paper)}
.cont::after{content:" ›";color:var(--amber)}
#reap{background:radial-gradient(70% 60% at 50% 50%,rgba(8,8,9,.62) 0%,rgba(8,8,9,.35) 60%,rgba(8,8,9,.1) 100%)}
#reap .txt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1160px,90vw);text-align:center}
#reap h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,40px);line-height:1.5;text-shadow:0 1px 18px rgba(0,0,0,.6)}
#reap .sub{margin-top:14px;font-size:14px;color:rgba(239,234,226,.7);letter-spacing:.08em;text-shadow:var(--shadow)}
#reap .opts{margin:40px auto 0;width:min(420px,90%)}
/* 复盘（D27）：左边是分支地图，占最大画面；右边一栏是这一次的复述、看见、后果、和上一次比，按钮在最下面。
卡片是原片画面：这一次走过的点亮，其他几次半亮，没走过的暗着；不计数、不打分 */
#review{background:radial-gradient(90% 80% at 50% 40%,#151517 0%,#0b0b0c 75%);overflow:hidden}
.rv{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,24vw,340px);grid-template-rows:minmax(0,1fr);column-gap:24px;padding:4vh 4vw 3vh}
.rv-main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:1.4vh;min-height:0}
.rv-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.rv-h h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,34px);margin:8px 0 6px;white-space:nowrap} /* 标题不折行，挤的时候让说明那一句折 */
.rv-h .lead{font-size:13px;color:var(--muted);letter-spacing:.06em}
.legend span{white-space:nowrap}
.rv-side{flex:none;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px} /* 切换第几次 + 图例：在地图正上方 */
.rounds{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.rt{padding:6px 14px;font-size:12.5px;letter-spacing:.2em;color:var(--muted);border:1px solid var(--faint);transition:color .2s,border-color .2s,background .2s}
.rt:hover{color:var(--paper)}
.rt.on{color:var(--paper);border-color:rgba(239,234,226,.55)}
.legend{display:flex;gap:18px;font-size:12px;color:var(--muted);letter-spacing:.1em}
.legend em{font-style:normal;display:inline-block;min-width:4.2em}
.legend i{display:inline-block;width:22px;height:0;margin-right:8px;vertical-align:middle;border-top:2px solid #fff}
.legend i.past{border-top:1.4px solid rgba(239,234,226,.45)}
.legend i.none{border-top:1px dashed rgba(239,234,226,.28)}
.rv-map{position:relative;min-height:0;display:flex;justify-content:safe center;align-items:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:rgba(239,234,226,.25) transparent}
.rv-wrap{position:relative;flex:none}
.board{position:absolute;left:0;top:0;transform-origin:0 0}
.wires{position:absolute;inset:0;overflow:visible;pointer-events:none}
.mcol{position:absolute;transform:translateX(-50%);font-size:12px;letter-spacing:.3em;color:var(--amber);white-space:nowrap}
.mcard{position:absolute;cursor:default;transition:transform .3s var(--ease)}
.mcard .ph{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px dashed rgba(239,234,226,.22);filter:grayscale(1) brightness(.34);opacity:.75;transition:filter .45s,opacity .45s,box-shadow .45s}
.mcard img{width:100%;height:100%;object-fit:cover;display:block}
.mcard .cap{height:30px;line-height:30px;text-align:center;font-family:var(--serif);font-size:14px;color:rgba(239,234,226,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .45s}
.mcard .pin{display:none}
.mcard.past .ph{filter:grayscale(.5) brightness(.72);opacity:.95;border:1px solid rgba(239,234,226,.45)}
.mcard.past .cap{color:rgba(239,234,226,.74)}
.mcard.cur .ph{filter:none;opacity:1;border:1px solid #fff;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 28px rgba(255,255,255,.22)}
.mcard.cur .cap{color:#fff}
.mcard:hover{transform:translateY(-3px) scale(1.05);z-index:3}
.board.anim .mcard.cur .ph{animation:light .7s var(--ease) both;animation-delay:inherit}
@keyframes light{0%{filter:grayscale(1) brightness(.34);opacity:.75}45%{filter:brightness(1.7);opacity:1}100%{filter:none;opacity:1}}
.wire{fill:none;stroke:rgba(239,234,226,.12);stroke-width:1;stroke-dasharray:3 5}
.wire.past{stroke:rgba(239,234,226,.42);stroke-width:1.4;stroke-dasharray:none}
.wire.cur{stroke:rgba(255,255,255,.92);stroke-width:2;stroke-dasharray:none}
.board.anim .wire.cur{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:mapdraw .42s var(--ease) forwards}
.flow{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.5 18;opacity:0;animation:mapflow 2s linear infinite,mapshow .8s ease forwards}
@keyframes mapdraw{to{stroke-dashoffset:0}}
@keyframes mapflow{to{stroke-dashoffset:-18.5}}
@keyframes mapshow{to{opacity:.75}}
.mtip{position:absolute;z-index:6;width:236px;padding:10px 12px;font-family:var(--serif);font-size:14px;line-height:1.65;color:var(--paper);background:rgba(11,11,12,.94);border:1px solid rgba(239,234,226,.2);opacity:0;pointer-events:none;transition:opacity .2s}
.mtip.on{opacity:1}
/* 右栏：复述在上，从右上角“2×/设置”按钮下方开始（和大标题齐）；按钮固定在最下面，和地图底边齐。
右栏是单独一栏，切换“第几次”时内容长短不同也不会带动地图缩放。
内容放不下时（大字幕、矮窗口）只有中间这段上下滚，按钮不动；左右各留 8px，线索名字略宽于小图时不被裁掉 */
.rv-note{display:flex;flex-direction:column;gap:18px;min-height:0;padding:max(0px,calc(var(--bar) + 64px - 4vh)) 0 0 clamp(20px,2vw,28px);border-left:1px solid var(--faint)}
.rv-note .sum{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0 -8px;padding:0 8px;display:flex;flex-direction:column;gap:20px;scrollbar-width:thin;scrollbar-color:rgba(239,234,226,.25) transparent}
.rv .recap{font-family:var(--serif);font-size:15px;line-height:1.75;color:rgba(239,234,226,.9)} /* D26 的两句话：这一次的复述、和上一次比 */
.rv .recap.vs{padding-top:18px;border-top:1px solid var(--faint)} /* 和上一次比：与这一次的内容隔开 */
.sum .cell small{display:block;font-size:12px;letter-spacing:.3em;color:var(--amber);margin-bottom:8px}
.sum .out .v{font-family:var(--serif);font-size:17px;line-height:1.5}
.sum .dim{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.6}
.clues{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.clue img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;filter:grayscale(1) brightness(.38);opacity:.55;border:1px dashed rgba(239,234,226,.22)}
.clue b{display:block;font-weight:400;font-size:11px;color:var(--muted);text-align:center;margin-top:3px;white-space:nowrap}
.clue.rem img{filter:grayscale(.5) brightness(.75);opacity:.85;border:1px solid rgba(239,234,226,.35)}
.clue.seen img{filter:none;opacity:1;border:1px solid #fff}
.clue.seen b{color:var(--paper)}
.rv-f{flex:none}
.rv-f .opts{margin:0;display:grid;gap:10px}
.rv-f .opt{height:46px;padding:0 14px;display:flex;align-items:center;gap:8px;border:1px solid rgba(239,234,226,.35);font-size:15px;letter-spacing:.08em} /* 字距收一点，“再回到那一刻，换一种看法”放得进一行 */
.rv-f .opt:first-child{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.rv-f .opt:first-child .k{color:var(--ink)}
.rv-f .opt:hover{transform:translateY(-2px);border-color:rgba(239,234,226,.8)}
.rv-f .opt::after{content:"›";margin-left:auto;font-size:20px;opacity:.7}
/* 结束页：画面中心是发光的时间隧道，加遮罩和阴影才读得清（M17） */
#endpage{background:radial-gradient(60% 55% at 50% 50%,rgba(8,8,9,.78) 0%,rgba(8,8,9,.5) 60%,rgba(8,8,9,.25) 100%)}
#endpage .txt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1160px,90vw);text-align:center;font-family:var(--serif);font-size:22px;letter-spacing:.12em;line-height:2;text-shadow:0 1px 18px rgba(0,0,0,.7)}
/* ---------- 播放控制条：只在线性播放时出现，白色、从左往右，和琥珀色的倒计时区分开 ---------- */
#ctrl{position:absolute;left:22px;right:22px;bottom:calc(var(--bar) + 12px);z-index:12;display:flex;align-items:center;gap:14px;
opacity:0;pointer-events:none;transition:opacity .3s}
#ctrl::before{content:"";position:absolute;left:-22px;right:-22px;bottom:calc(-12px - var(--bar));height:130px;z-index:-1;pointer-events:none;
background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0))}
#ctrl.on{opacity:1;pointer-events:auto}
#ctrl .ic{width:34px;height:34px;flex:none;display:grid;place-items:center;color:rgba(239,234,226,.85);border-radius:50%;transition:color .2s,background .2s}
#ctrl .ic:hover{color:#fff;background:rgba(239,234,226,.1)}
#ctrl .ic svg{width:16px;height:16px;fill:currentColor}
#fsBtn svg{fill:none!important;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#pauseBtn[data-state="pause"] .i-play,#pauseBtn[data-state="play"] .i-pause{display:none}
#fsBtn[data-state="enter"] .i-exit,#fsBtn[data-state="exit"] .i-enter{display:none}
#seek{flex:1;height:26px;display:flex;align-items:center;cursor:pointer;touch-action:none}
#seek .rail{position:relative;width:100%;height:2px;background:rgba(239,234,226,.16);transition:height .15s}
#seek:hover .rail,#seek.drag .rail{height:4px}
#seek .fill{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:rgba(239,234,226,.92)}
#seek .head{position:absolute;left:var(--p,0%);top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;
box-shadow:0 0 0 3px rgba(0,0,0,.25);transform:scale(0);transition:transform .15s}
#seek:hover .head,#seek.drag .head{transform:scale(1)}
#time{flex:none;min-width:84px;font-size:12px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:rgba(239,234,226,.72)}
#skipBtn{flex:none;margin-left:auto;height:32px;padding:0 12px 0 14px;display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.16em;
color:rgba(239,234,226,.88);border:1px solid rgba(239,234,226,.28);background:rgba(11,11,12,.45);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:color .2s,border-color .2s}
#skipBtn:hover{color:#fff;border-color:rgba(239,234,226,.65)}
#skipBtn kbd{font:11px/1 var(--sans);letter-spacing:0;padding:3px 5px;border:1px solid rgba(239,234,226,.3);border-radius:3px;color:rgba(239,234,226,.6)}
#paused{position:absolute;left:50%;top:50%;z-index:9;display:flex;align-items:center;gap:12px;padding:12px 20px 12px 16px;transform:translate(-50%,-50%);
font-size:13px;letter-spacing:.24em;background:rgba(11,11,12,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
opacity:0;pointer-events:none;transition:opacity .25s}
#paused svg{width:16px;height:16px;fill:var(--paper)}
#stage.paused #paused{opacity:1}
#buffer{position:absolute;right:16px;top:calc(var(--bar) + 108px);z-index:12;font-size:12px;letter-spacing:.2em;color:rgba(239,234,226,.7);
opacity:0;transition:opacity .3s;pointer-events:none}
#buffer.on{opacity:1;animation:breath 1.6s ease-in-out infinite}
@keyframes breath{0%,100%{opacity:.35}50%{opacity:.85}}
#toast{position:absolute;left:50%;top:calc(var(--bar) + 18px);z-index:26;transform:translateX(-50%);padding:8px 16px;font-size:12.5px;letter-spacing:.12em;
background:rgba(11,11,12,.72);border:1px solid rgba(239,234,226,.2);opacity:0;pointer-events:none;transition:opacity .3s}
#toast.on{opacity:1}
#notice{position:absolute;left:50%;top:50%;z-index:25;transform:translate(-50%,-50%);width:min(420px,86vw);padding:22px 24px;text-align:center;
background:rgba(11,11,12,.9);border:1px solid rgba(239,234,226,.2);opacity:0;pointer-events:none;transition:opacity .3s}
#notice.on{opacity:1;pointer-events:auto}
#notice p{font-family:var(--serif);font-size:17px;line-height:1.8}
#notice small{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;color:var(--muted)}
#notice .acts{margin-top:16px;display:flex;justify-content:center;gap:12px}
#notice button{height:32px;padding:0 16px;font-size:13px;letter-spacing:.2em;border:1px solid rgba(239,234,226,.4)}
#notice button:hover{background:var(--paper);color:var(--ink)}
#mark{position:absolute;left:22px;top:calc(var(--bar) + 16px);z-index:12;font-size:12.5px;letter-spacing:.3em;color:rgba(239,234,226,.7);text-shadow:var(--shadow);transition:top .9s var(--ease)}
#ph{position:absolute;right:16px;top:calc(var(--bar) + 108px);z-index:12;max-width:min(420px,60vw);padding:8px 12px;font-size:12px;line-height:1.6;
color:#f3d7a4;border:1px dashed rgba(224,179,94,.7);background:rgba(30,22,8,.72);display:none;transition:top .9s var(--ease)}
#ph.on{display:block}
#hud{position:absolute;left:22px;top:calc(var(--bar) + 40px);z-index:12;max-width:70vw;font:11.5px/1.6 ui-monospace,Menlo,monospace;color:rgba(239,234,226,.75);
background:rgba(0,0,0,.45);padding:3px 8px;pointer-events:none;transition:top .9s var(--ease)}
/* 回到那一刻：一次柔和的亮起再退去，不做反色闪烁（M26） */
#rewind{position:absolute;inset:0;z-index:19;pointer-events:none;opacity:0;background:var(--paper)}
#rewind.on{animation:rw 1.1s ease forwards}
@keyframes rw{0%{opacity:0}22%{opacity:.42}100%{opacity:0}}
/* 复盘页头在 1180 以下：地图那一栏变窄，图例和“第几次”收紧，标题不被挤得折行；1000 以下图例那一块挪到标题下面 */
@media (max-width:1180px){
.legend{gap:14px}
.legend i{width:16px;margin-right:6px}
.rt{padding:6px 12px;letter-spacing:.14em}
}
@media (max-width:1000px){
.rv-h{flex-wrap:wrap;row-gap:10px}
}
@media (max-width:760px){
.opts.two{grid-template-columns:1fr}
/* 复盘：太窄放不下两栏时，地图在上、占大半屏，复述和按钮接在下面，整页上下滚 */
.rv{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;row-gap:16px;overflow-y:auto}
.rv-main{height:72vh;min-height:360px}
.rv-note{min-height:auto;padding:16px 0 0;border-left:0;border-top:1px solid var(--faint)} /* 按内容撑高，不被压进剩下的那点高度 */
.rv-note .sum{flex:none;overflow:visible}
#title{padding:0 7vw}
#ending .txt{left:7vw}
#time{display:none}
}
/* 窗口矮（笔记本放大页面）时，面板收紧，顶部不被裁掉 */
@media (max-height:620px){
.q{font-size:clamp(18px,2.2vw,24px)}
.opt{font-size:15.5px;padding:7px 0 7px 14px}
.opts{margin-top:12px}
.clock{margin:12px 0 4px}
#title .begin{margin-top:32px}
}
/* 系统设置了“减少动态效果” */
@media (prefers-reduced-motion:reduce){
#grain{animation:none}
#caption .go{animation:none}
.thought p span{opacity:1}
.thought.on p span{animation:none}
#ghost.tap::after{animation:none}
#rewind.on{animation:rw 0.4s ease forwards}
#buffer.on{animation:none}
.flow{animation:none;opacity:0}
.board.anim .mcard.cur .ph,.board.anim .wire.cur{animation:none}
}
#review.on ~ #mark{opacity:0} /* 复盘页有自己的标题，左上角的标记先让开 */
/* ---------- 设置（也是暂停） ---------- */
#setBtn{position:absolute;right:16px;top:calc(var(--bar) + 12px);z-index:22;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
color:rgba(239,234,226,.8);background:rgba(11,11,12,.35);opacity:.5;transition:opacity .25s,background .25s,top .9s var(--ease)}
#setBtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
#setBtn:hover,#stage.ctrl-on #setBtn,#stage.menu #setBtn{opacity:1;background:rgba(11,11,12,.6)}
#settings{position:absolute;inset:0;z-index:24;display:grid;place-items:center;background:rgba(6,6,7,.55);
-webkit-backdrop-filter:blur(6px) saturate(.7);backdrop-filter:blur(6px) saturate(.7);opacity:0;pointer-events:none;transition:opacity .25s}
#settings.on{opacity:1;pointer-events:auto}
.set-in{position:relative;width:min(470px,90vw);padding:26px 28px 22px;background:rgba(14,14,15,.95);border:1px solid rgba(239,234,226,.16);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.set-h h3{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:.2em}
.set-sub{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.set-row{display:flex;align-items:center;gap:14px;margin-top:18px}
.set-k{width:74px;flex:none;font-size:13px;color:rgba(239,234,226,.75);letter-spacing:.1em}
.seg{display:flex;border:1px solid rgba(239,234,226,.25)}
.seg button{padding:6px 18px;font-size:13px;color:var(--muted);transition:background .2s,color .2s}
.seg button:hover{color:var(--paper)}
.seg button.on{background:var(--paper);color:var(--ink)}
#volRange{flex:1;accent-color:var(--paper)}
.set-v{width:30px;text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.set-btn{padding:6px 14px;font-size:13px;border:1px solid rgba(239,234,226,.3);color:rgba(239,234,226,.85);transition:border-color .2s,color .2s}
.set-btn:hover{border-color:rgba(239,234,226,.7);color:#fff}
.set-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.set-main{padding:8px 28px;font-size:14px;letter-spacing:.3em;background:var(--paper);color:var(--ink)}
.set-keys{margin-top:18px;font-size:11.5px;line-height:1.8;color:var(--muted)}
/* ---------- 字幕大小：大 ---------- */
html[data-sub="big"] #caption .line{font-size:clamp(23px,2.9vw,34px)}
html[data-sub="big"] #caption .who{font-size:15px}
html[data-sub="big"] .q{font-size:clamp(24px,3vw,36px)}
html[data-sub="big"] .opt{font-size:clamp(18px,2vw,22px)}
html[data-sub="big"] .thought p{font-size:21px}
@media (min-width:761px){ html[data-sub="big"] .rv{grid-template-columns:minmax(0,1fr) clamp(320px,26vw,380px)} } /* 大字幕：右栏宽一点，字大了也少折行、不用滚（窄屏仍上下排） */
html[data-sub="big"] .rv .recap{font-size:17px}
html[data-sub="big"] .sum .out .v{font-size:19px}
/* ================= 艺术风格：暗房里的记忆 =================
“定格”像一张在暗房里显影的照片：暗红的安全灯、泛黄的相纸、手写的念头。
大标题用行楷，其余内容一律楷体，数字和控件用苹方；说话人、层级都做成朱红的小印章。
只改呈现，不改任何交互和时序；和“简洁”风格可以在设置里随时切换。 */
html[data-theme="art"]{
--ink:#0d0b0a; --paper:#efe5d3; --muted:#a39785; --faint:rgba(239,229,211,.16);
--red:#b9352b; --gold:#d9a95c; --amber:#d9a95c;
/* 字体规范（艺术风格）：只用三种，各管一件事，不混用。
展示 行楷 --brush 只用于三个大标题：开始页“定格”、结局标题、复盘页标题
正文 楷体 --serif 所有叙述与内容：字幕、问题、选项、提示、念头纸条、印章、按钮上的字、复盘与设置里的文字
界面 苹方 --sans 只用于数字和操作控件：进度条时间、跳过/倍速/全屏按钮、按键符号（kbd）、音量数值、选项编号、快进/后退与缓冲的浮动反馈
字号阶梯：标题 196/88/44 → 问题 36 → 字幕 30 → 选项 19 → 说明 15 → 标签 13 → 控件 12（px，窄屏按比例缩小，最大值一律落在阶梯上）
各级对应的元素见文件末尾“字号对齐到阶梯”一段 */
--serif:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif;
--brush:"Xingkai SC","STXingkai","Kaiti SC","STKaiti",serif;
--tex:url("data:image/svg+xml;utf8,");
--paperbg:var(--tex),linear-gradient(170deg,#f4ebdb 0%,#e7dac2 100%);
}
html[data-theme="art"] body{font-family:var(--serif)}
html[data-theme="art"] #ctrl,html[data-theme="art"] #skipBtn,html[data-theme="art"] #spdBtn,html[data-theme="art"] kbd,
html[data-theme="art"] .set-v,html[data-theme="art"] #buffer,html[data-theme="art"] #jump,
html[data-theme="art"] .opt .k,html[data-theme="art"] #hud{font-family:var(--sans)}
html[data-theme="art"] #grain{opacity:.11}
html[data-theme="art"] #vignette{box-shadow:inset 0 0 220px rgba(22,9,4,.7)}
html[data-theme="art"] .seal,html[data-theme="art"] .eyebrow,html[data-theme="art"] .layer{display:inline-block;padding:3px 10px 4px;font-family:var(--serif);font-size:13px;letter-spacing:.28em;
color:#f7ecdc;background:var(--red);border-radius:2px;text-shadow:none;transform:rotate(-2deg);box-shadow:0 3px 10px rgba(0,0,0,.4)}
/* 字幕：楷体；说话人是一枚小印章；心里的话用手写体 */
html[data-theme="art"] #caption .line{font-size:clamp(21px,2.5vw,30px);letter-spacing:.04em;color:#f3eadb;text-shadow:0 2px 3px rgba(0,0,0,.9),0 0 30px rgba(0,0,0,.7)}
html[data-theme="art"] #caption .line.beat{font-family:var(--serif);color:#fff5e6;letter-spacing:.02em}
html[data-theme="art"] #caption .who{display:inline-block;min-height:0;margin-bottom:10px;padding:2px 9px 3px;font-family:var(--serif);font-size:13px;letter-spacing:.2em;
color:#f7ecdc;background:var(--red);border-radius:2px;text-shadow:none;transform:rotate(-2deg);box-shadow:0 3px 10px rgba(0,0,0,.45)}
html[data-theme="art"] #caption:not(.has-who) .who{visibility:hidden}
html[data-theme="art"] #caption .go{color:#e0574a}
html[data-sub="big"][data-theme="art"] #caption .line{font-size:clamp(24px,3vw,36px)}
/* 决定面板：问题用楷体，选项是几张手写的纸片，像摊在桌上的牌 */
html[data-theme="art"] .q{font-size:clamp(24px,2.9vw,36px);letter-spacing:.03em;text-shadow:0 2px 20px rgba(0,0,0,.75)}
html[data-theme="art"] .hint,html[data-theme="art"] .prev{font-family:var(--serif);font-size:15px;color:rgba(239,229,211,.82)}
html[data-theme="art"] .prev b{color:#fff3e0}
/* 纸片按个数排：2 张、3 张、4 张都排成一行（窄屏时 4 张排成 2×2），不会出现落单的一张 */
html[data-theme="art"] .opts,html[data-theme="art"] .opts.two{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px 18px;margin-top:22px}
html[data-theme="art"] .opts[data-n="1"]{--n:1;max-width:320px}
html[data-theme="art"] .opts[data-n="2"]{--n:2;max-width:660px}
html[data-theme="art"] .opts[data-n="3"]{--n:3}
html[data-theme="art"] .opts[data-n="4"]{--n:4}
@media (max-width:900px){html[data-theme="art"] .opts[data-n="4"]{--n:2}}
@media (max-width:620px){html[data-theme="art"] .opts[data-n="3"],html[data-theme="art"] .opts[data-n="4"]{--n:1}}
html[data-theme="art"] .opt{min-height:94px;display:block;padding:32px 18px 16px;
font-family:var(--serif);font-size:clamp(16px,1.55vw,19px);line-height:1.55;color:#2b231c;text-shadow:none;
background:var(--paperbg);border:0;border-radius:2px;box-shadow:0 12px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.55);
transform:rotate(var(--r,0deg));transition:transform .28s var(--ease),box-shadow .28s,opacity .4s,filter .4s}
html[data-theme="art"] .opt .k{position:absolute;left:12px;top:9px;min-width:0;width:22px;height:22px;line-height:19px;text-align:center;
border:1.5px solid var(--red);border-radius:50%;color:var(--red);font-size:12px;letter-spacing:0}
html[data-theme="art"] .opt:hover{transform:translateY(-6px) rotate(0deg);box-shadow:0 20px 36px rgba(0,0,0,.55);color:#17110c}
html[data-theme="art"] .opt:hover .k{color:#fff;background:var(--red)}
html[data-theme="art"] .opt:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
html[data-theme="art"] .opt .new-tag{position:absolute;right:-8px;top:-11px;margin:0;padding:3px 8px;font-family:var(--serif);font-size:12px;letter-spacing:.15em;
color:#f7ecdc;background:var(--red);transform:rotate(6deg);box-shadow:0 3px 8px rgba(0,0,0,.4)}
html[data-theme="art"] .opts.picked .opt{opacity:.22;filter:grayscale(.6) brightness(.6);transform:translateY(10px) rotate(var(--r,0deg))}
html[data-theme="art"] .opts.picked .opt.pick{opacity:1;filter:none;transform:translateY(-10px) rotate(0deg);color:#17110c}
html[data-theme="art"] .opt.pick::after{content:"";position:absolute;inset:-7px -9px;border:2.5px solid var(--red);border-radius:48% 52% 46% 54%/56% 44% 56% 44%;opacity:.85;animation:circle .45s var(--ease) both}
@keyframes circle{from{opacity:0;transform:scale(1.12) rotate(-4deg)}to{opacity:.85;transform:none}}
/* 倒计时：一根燃着的引线，燃点在往回走 */
html[data-theme="art"] .clock{height:3px;margin:20px 0 8px;overflow:visible;background:rgba(239,229,211,.12)}
html[data-theme="art"] .clock i{background:linear-gradient(90deg,rgba(185,53,43,.35),var(--gold))}
html[data-theme="art"] .clock::after{content:"";position:absolute;top:50%;left:calc(var(--left,1) * 100%);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
background:radial-gradient(circle,#fff3cf 0,#f0b35a 42%,rgba(185,53,43,0) 72%);box-shadow:0 0 14px 5px rgba(240,160,70,.5);animation:ember .45s ease-in-out infinite alternate}
html[data-theme="art"] .clock.out::after{display:none}
@keyframes ember{from{transform:scale(.8);opacity:.75}to{transform:scale(1.25);opacity:1}}
/* 看周围：念头是一张钉在画面上的手写纸条，标签是小纸签 */
html[data-theme="art"] .thought{padding:24px 20px 16px;color:#2b231c;background:var(--paperbg);border-left:0;border-radius:2px;box-shadow:0 16px 32px rgba(0,0,0,.55);
-webkit-backdrop-filter:none;backdrop-filter:none;transform:rotate(-1.5deg) translateY(8px)}
html[data-theme="art"] .thought.on{transform:rotate(-1.5deg)}
html[data-theme="art"] .thought::before{content:"";position:absolute;left:50%;top:-6px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;
background:radial-gradient(circle at 35% 35%,#ec7263,#8f231b);box-shadow:0 2px 4px rgba(0,0,0,.55)}
html[data-theme="art"] .thought small{font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--red)}
html[data-theme="art"] .thought p{font-family:var(--serif);font-size:19px;color:#2b231c}
html[data-theme="art"] .cluemark{font-family:var(--serif);font-size:15px;letter-spacing:.12em;color:#2b231c;background:var(--paperbg);border:0;
box-shadow:0 4px 10px rgba(0,0,0,.45);transform:translate(-50%,-50%) rotate(-3deg);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme="art"] .cluemark.replay::after{color:var(--red);opacity:.85}
html[data-theme="art"] .cluemark.replay:hover,html[data-theme="art"] .cluemark.replay:focus-visible{box-shadow:0 0 0 2px rgba(185,53,43,.75),0 4px 10px rgba(0,0,0,.45)}
/* 开始页：行楷的“定格”，旁边一枚朱印 */
html[data-theme="art"] #title{background:linear-gradient(90deg,rgba(12,8,6,.88) 0%,rgba(12,8,6,.5) 48%,rgba(12,8,6,0) 78%)}
html[data-theme="art"] #title h1{display:flex;align-items:flex-start;gap:22px;font-family:var(--brush);font-size:clamp(92px,13vw,196px);letter-spacing:.06em;text-shadow:0 6px 30px rgba(0,0,0,.6)}
html[data-theme="art"] #title h1::after{content:"回到那一刻";writing-mode:vertical-rl;margin-top:.3em;padding:10px 5px;font-family:var(--serif);font-size:15px;letter-spacing:.35em;
color:#f7ecdc;background:var(--red);border-radius:2px;transform:rotate(4deg);box-shadow:0 4px 12px rgba(0,0,0,.45)}
html[data-theme="art"] #title .sub{font-family:var(--serif);font-size:clamp(17px,1.8vw,22px);letter-spacing:.2em}
html[data-theme="art"] #title .begin{padding:14px 34px 14px 42px;font-family:var(--serif);font-size:19px;letter-spacing:.6em;color:#f7ecdc;background:var(--red);border:0;
box-shadow:0 8px 22px rgba(0,0,0,.45);transform:rotate(-1deg)}
html[data-theme="art"] #title .begin:hover{background:#cf4234;color:#fff}
html[data-theme="art"] #title .note{font-family:var(--serif);font-size:15px;color:rgba(239,229,211,.7)}
/* 折行（D51、D54）：放得下就一行（居中的文字框都放宽到最宽 1160px）；放不下时，标题和短句两行排匀，段落不在最后一行只留一两个字 */
html{text-wrap:pretty} /* 会继承：所有文字放不下时都不在最后一行只留一两个字 */
h1,h2,h3,.q,.sub,.lead,.hint,.prev,.more,.insight,.then,.is-left,.chunk,#endpage .txt p,#caption .line,.v-main,.aa-card,.id-card,.thought p,#guide,.recap,.cell .v,.dim,.set-keys{text-wrap:balance} /* 两三行的短段落也排匀：Chrome 的 pretty 管不到两行时只剩一个字的情况 */
.chunk{display:inline-block} /* 原来手动换行的地方：放得下就一行，放不下只在这几句之间断开 */
.opt,.opt > span:not(.k):not(.get-tag){text-wrap:balance} /* 选项卡片放不下一行时，两行排匀，不留一两个字在第二行 */
#title .note .rec{opacity:.72} /* 记录说明：比操作提示再淡一点 */
#title .goal{margin-top:30px;display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:clamp(16px,1.6vw,19px);letter-spacing:.12em;color:#ffd27a;text-shadow:0 1px 3px rgba(0,0,0,.8)} /* 开头告诉玩家目标 */
#title .goal .bulb-ic{width:22px;height:22px;flex:none}
#title .goal + .begin{margin-top:30px}
html[data-theme="art"] #mark{font-family:var(--serif);font-size:15px;letter-spacing:.2em}
/* 这一刻的四步（D53）：在左上角标记下面，只在那一刻出现；当前这一步亮，走过的半亮，小林那一次跳过的划掉 */
#steps{position:absolute;left:22px;top:calc(var(--bar) + 46px);z-index:12;display:flex;align-items:center;margin:0;padding:0;list-style:none;
font-family:var(--serif);font-size:15px;letter-spacing:.12em;color:rgba(239,229,211,.4);text-shadow:var(--shadow);opacity:0;transition:opacity .5s;pointer-events:none}
#steps.on{opacity:1}
#steps li{display:flex;align-items:center;transition:color .4s}
#steps li + li::before{content:"";width:20px;height:1px;margin:0 10px;background:rgba(239,229,211,.3);transition:background .4s,box-shadow .4s}
#steps li span{position:relative;padding-bottom:3px}
#steps li.done{color:rgba(239,229,211,.72)}
#steps li.cur{color:#ffd27a}
#steps li.cur span::after{content:"";position:absolute;left:0;right:.12em;bottom:-2px;height:2px;border-radius:1px;background:#ffd27a}
#steps li.skip span{text-decoration:line-through;text-decoration-color:rgba(232,110,92,.9)}
#steps li.skip::after{content:"没顾上";margin-left:6px;font-size:12px;letter-spacing:.08em;color:rgba(232,110,92,.9)}
#steps.link li[data-s="3"]::before{background:#ffd27a;box-shadow:0 0 10px rgba(255,210,122,.9)}
html[data-theme="art"] #loading{font-family:var(--serif)}
/* 结局 / 回到那一刻 / 结束 */
html[data-theme="art"] #ending img{filter:saturate(.45) sepia(.3) brightness(.48)}
html[data-theme="art"] #ending h2{font-family:var(--brush);font-size:clamp(56px,6.4vw,88px);letter-spacing:.06em}
html[data-theme="art"] #ending .then{font-family:var(--serif);font-size:15px}
html[data-theme="art"] .cont{font-family:var(--serif);font-size:15px;color:rgba(239,229,211,.75)}
html[data-theme="art"] .cont::after{color:#e0574a}
html[data-theme="art"] #reap h2{font-size:clamp(26px,3vw,36px)} /* 这是一个问题，按问题级 36 */
html[data-theme="art"] #reap .sub{font-family:var(--serif);font-size:15px}
html[data-theme="art"] #reap .opts{margin-left:auto;margin-right:auto;width:min(660px,92%)}
html[data-theme="art"] #endpage .txt p{font-family:var(--serif);font-size:clamp(28px,3vw,40px);letter-spacing:.08em}
html[data-theme="art"] #rewind{background:radial-gradient(ellipse at 50% 45%,#fbf3e4 0%,#efe2c8 55%,#d9c4a0 100%)} /* 回到那一刻：像相纸在暗房里被重新曝了一下光，暖白、柔和，不用红色 */
html[data-theme="art"] #paused,html[data-theme="art"] #notice p{font-family:var(--serif)}
/* 设置 */
html[data-theme="art"] .set-in{background:var(--tex),#17120f;border:1px solid rgba(239,229,211,.2)}
html[data-theme="art"] .set-h h3{font-family:var(--serif);font-size:30px;letter-spacing:.2em}
html[data-theme="art"] .seg button.on{background:var(--red);color:#f7ecdc}
html[data-theme="art"] .set-main{background:var(--red);color:#f7ecdc}
html[data-theme="art"] #volRange{accent-color:var(--red)}
/* 复盘：一面记忆墙。照片用图钉钉着，这一次的路是一根红线 */
html[data-theme="art"] #review{background:var(--tex),radial-gradient(80% 70% at 50% 40%,#1e1713 0%,#0e0b09 76%)}
html[data-theme="art"] .rv-h h2{font-family:var(--brush);font-size:clamp(30px,3.2vw,44px);letter-spacing:.06em}
html[data-theme="art"] .rv-h .lead{font-family:var(--serif);font-size:15px;color:rgba(239,229,211,.72)}
html[data-theme="art"] .rv .recap{color:#efe5d3}
html[data-theme="art"] .rv-note,html[data-theme="art"] .rv .recap.vs{border-color:rgba(239,229,211,.14)}
html[data-theme="art"] .rt{font-family:var(--serif);font-size:13px;border-color:rgba(239,229,211,.25)}
html[data-theme="art"] .rt.on{background:var(--red);color:#f7ecdc;border-color:var(--red)}
html[data-theme="art"] .legend{font-family:var(--serif);font-size:13px}
html[data-theme="art"] .legend i{border-top-color:var(--red);border-top-width:2.4px}
html[data-theme="art"] .legend i.past{border-top:1.6px solid rgba(190,140,100,.7)}
html[data-theme="art"] .legend i.none{border-top:1.2px dashed rgba(200,185,160,.35)}
html[data-theme="art"] .mcol{font-family:var(--serif);font-size:13px;letter-spacing:.3em;color:var(--gold)}
html[data-theme="art"] .mcard{padding:7px 7px 0;background:var(--paperbg);box-shadow:0 10px 20px rgba(0,0,0,.6);transform:rotate(var(--r));
filter:grayscale(.85) sepia(.25) brightness(.46);opacity:.82;transition:filter .45s,opacity .45s,transform .3s var(--ease),box-shadow .3s}
html[data-theme="art"] .mcard .ph{border:0;filter:none;opacity:1;box-shadow:none}
html[data-theme="art"] .mcard .cap{height:30px;line-height:29px;font-family:var(--serif);font-size:15px;color:#3a2f25}
html[data-theme="art"] .mcard .pin{display:block;position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;
background:radial-gradient(circle at 35% 35%,#9a948c,#4a4540);box-shadow:0 2px 3px rgba(0,0,0,.6)}
html[data-theme="art"] .mcard.past{filter:grayscale(.35) sepia(.35) brightness(.8);opacity:1}
html[data-theme="art"] .mcard.cur{filter:none;opacity:1;box-shadow:0 0 0 2px rgba(185,53,43,.8),0 14px 30px rgba(0,0,0,.65)}
html[data-theme="art"] .mcard.cur .pin,html[data-theme="art"] .mcard.past .pin{background:radial-gradient(circle at 35% 35%,#ec7263,#8f231b)}
html[data-theme="art"] .mcard.past .ph,html[data-theme="art"] .mcard.cur .ph{border:0;box-shadow:none}
html[data-theme="art"] .mcard.cur .cap{color:#1d1610}
html[data-theme="art"] .mcard:hover{transform:rotate(0deg) translateY(-4px) scale(1.06);z-index:3}
html[data-theme="art"] .board.anim .mcard.cur{animation:develop .8s var(--ease) both}
html[data-theme="art"] .board.anim .mcard.cur .ph{animation:none}
@keyframes develop{0%{filter:grayscale(.85) sepia(.25) brightness(.46)}40%{filter:sepia(.6) brightness(1.5)}100%{filter:none}}
html[data-theme="art"] .wire{stroke:rgba(200,185,160,.2);stroke-width:1.2;stroke-dasharray:2 6;filter:url(#rough)}
html[data-theme="art"] .wire.past{stroke:rgba(170,118,86,.6);stroke-width:1.7;stroke-dasharray:none}
html[data-theme="art"] .wire.cur{stroke:#c73a2e;stroke-width:2.6;stroke-dasharray:none}
html[data-theme="art"] .board.anim .wire.cur{stroke-dasharray:var(--len)}
html[data-theme="art"] .flow{stroke:#ffd9a8;stroke-width:2.6}
html[data-theme="art"] .mtip{font-family:var(--serif);font-size:15px;color:#2b231c;background:var(--paperbg);border:0;box-shadow:0 12px 26px rgba(0,0,0,.55);transform:rotate(-1deg)}
html[data-theme="art"] .sum .cell small{font-family:var(--serif);font-size:13px;color:var(--gold)}
html[data-theme="art"] .sum .out .v{font-size:19px}
html[data-theme="art"] .sum .dim{font-family:var(--serif);font-size:13px}
html[data-theme="art"] .clues{gap:12px}
html[data-theme="art"] .clue img{border:0;box-shadow:0 0 0 3px #e8dcc6}
html[data-theme="art"] .clue.seen img{box-shadow:0 0 0 3px #f1e6d2,0 0 0 5px rgba(185,53,43,.8)}
html[data-theme="art"] .clue b{font-family:var(--serif);font-size:13px;margin-top:6px}
html[data-theme="art"] .rv-f .opts{display:grid;grid-template-columns:1fr;gap:10px;width:auto;max-width:none;margin:0}
html[data-theme="art"] .rv-f .opt{min-height:0;padding:0 14px;height:48px;display:flex;align-items:center;gap:8px;transform:none;
font-size:15px;letter-spacing:.08em;border-radius:3px;box-shadow:0 8px 20px rgba(0,0,0,.45)}
html[data-theme="art"] .rv-f .opt .k{position:static;flex:none;margin:0}
html[data-theme="art"] .rv-f .opt:first-child{color:#f7ecdc;background:var(--red)}
html[data-theme="art"] .rv-f .opt:first-child .k{color:#f7ecdc;border-color:rgba(247,236,220,.7)}
html[data-theme="art"] .rv-f .opt:first-child:hover{background:#cf4234;color:#fff}
html[data-theme="art"] .rv-f .opt:nth-child(2){color:rgba(239,229,211,.9);background:transparent;border:1px solid rgba(239,229,211,.35);box-shadow:none}
html[data-theme="art"] .rv-f .opt:nth-child(2) .k{color:rgba(239,229,211,.75);border-color:rgba(239,229,211,.45)}
html[data-theme="art"] .rv-f .opt:nth-child(2):hover{border-color:rgba(239,229,211,.8);color:#fff}
html[data-theme="art"] .rv-f .opt:hover{transform:translateY(-2px)}
html[data-theme="art"] .rv-f .opt::after{content:"›";margin-left:auto;font-size:20px;opacity:.8}
html[data-theme="art"] .rv-f .opt::before{display:none}
/* 纸片悬停时往上抬：在下面补一条看不见的区域，免得鼠标落在空出来的那条上来回抖 */
html[data-theme="art"] .opt::before{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
/* 字幕大小“大”在艺术风格下也要生效 */
html[data-sub="big"][data-theme="art"] #caption .who{font-size:15px}
html[data-sub="big"][data-theme="art"] .q{font-size:clamp(27px,3.3vw,40px)}
html[data-sub="big"][data-theme="art"] .hint,html[data-sub="big"][data-theme="art"] .prev{font-size:17px}
html[data-sub="big"][data-theme="art"] .opt{font-size:clamp(18px,1.85vw,22px)}
html[data-sub="big"][data-theme="art"] .thought p{font-size:22px}
html[data-sub="big"][data-theme="art"] .sum .out .v{font-size:22px}
html[data-sub="big"][data-theme="art"] .rv-f .opt{font-size:17px;height:50px}
/* 窗口矮时：艺术风格的面板也要收紧，顶部不被推出屏幕 */
@media (max-height:620px){
html[data-theme="art"] .q{font-size:clamp(20px,2.4vw,27px)}
html[data-theme="art"] .opts,html[data-theme="art"] .opts.two{margin-top:12px;gap:10px 14px}
html[data-theme="art"] .opt{min-height:0;padding:26px 14px 10px;font-size:15px}
html[data-theme="art"] .clock{margin:12px 0 4px}
html[data-theme="art"] #title h1{font-size:clamp(72px,10vw,140px)}
}
@media (prefers-reduced-motion:reduce){
html[data-theme="art"] .clock::after{animation:none}
html[data-theme="art"] .board.anim .mcard.cur{animation:none}
}
/* ---------- 2 倍速按钮（在设置左边） ---------- */
#spdBtn{position:absolute;right:62px;top:calc(var(--bar) + 12px);z-index:22;height:40px;min-width:48px;padding:0 12px;border-radius:20px;
font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:rgba(239,234,226,.8);background:rgba(11,11,12,.35);opacity:.5;
transition:opacity .25s,background .25s,color .25s,top .9s var(--ease)}
#spdBtn:hover,#spdBtn.on{opacity:1;background:rgba(11,11,12,.6)}
#stage.ctrl-on #spdBtn{opacity:1}
#stage.ctrl-on #spdBtn:not(.on){background:rgba(11,11,12,.6)}
#spdBtn.on{color:var(--ink);background:var(--paper)}
html[data-theme="art"] #spdBtn.on{color:#f7ecdc;background:var(--red)}
/* 擦雾提示：画面中间一行，淡入淡出 */
#guide{position:absolute;left:50%;top:40%;z-index:9;transform:translate(-50%,-50%);max-width:80vw;text-align:center;pointer-events:none;
font-family:var(--serif);font-size:clamp(20px,2.2vw,27px);letter-spacing:.12em;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8),0 0 30px rgba(0,0,0,.6);
opacity:0;transition:opacity .8s var(--ease),top .45s var(--ease)}
#guide.on{opacity:1}
#stage.guiding .cluemark{opacity:0;pointer-events:none} /* 提示遮着名字时，名字也不能点 */
html[data-sub="big"] .cluemark{font-size:17px} /* 线索名字：15 号（说明级），大字幕时 17 号 */ /* 逐个淡出：不能给 #marks 整组设透明度，否则整组会被压到雾画布下面 */
/* ← → 的反馈 */
#jump{position:absolute;top:50%;z-index:9;padding:10px 18px;border-radius:24px;font-family:var(--sans);font-size:14px;letter-spacing:.06em;color:#fff;
background:rgba(11,11,12,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .25s}
#jump.on{opacity:1}
#jump.fwd{right:12%}
#jump.back{left:12%}
#jump.edge{left:50%;transform:translate(-50%,-50%)}
/* ---------- 复盘页按钮被点下后：保持原来的配色和位置，不套用选项纸片的“选中”样式 ---------- */
.rv-f .opts.picked .opt:first-child{color:var(--ink)}
html[data-theme="art"] .rv-f .opts.picked .opt{transform:none}
html[data-theme="art"] .rv-f .opts.picked .opt:first-child{color:#f7ecdc}
html[data-theme="art"] .rv-f .opt.pick::after{position:static;inset:auto;border:0;border-radius:0;animation:none}
/* 复盘右栏在矮窗口（≤700 高）收紧间距和行距：1024×640 下看两次（包括大字幕）也不用滚动 */
@media (max-height:700px){ /* 放在艺术风格按钮规则之后，才能盖过 48px */
.rv-note{gap:14px;padding-top:max(0px,calc(var(--bar) + 58px - 4vh))}
.rv-note .sum{gap:14px}
.rv .recap{line-height:1.6}
html[data-sub="big"] .rv .recap{line-height:1.5}
.rv .recap.vs{padding-top:12px}
.rv-f .opt,html[data-theme="art"] .rv-f .opt,html[data-sub="big"][data-theme="art"] .rv-f .opt{height:44px}
}
/* ---------- 艺术风格：字号对齐到阶梯（196/88/44 → 36 → 30 → 19 → 15 → 13 → 12），字体归到三种之一 ---------- */
html[data-theme="art"] #guide{font-size:clamp(20px,2.2vw,30px)} /* 30 字幕级 */
html[data-theme="art"] #title .sub,html[data-theme="art"] #ending p{font-size:clamp(15px,1.6vw,19px)} /* 19 选项级 */
html[data-theme="art"] #endpage .txt p{font-size:clamp(26px,3vw,36px)} /* 36 问题级 */
html[data-theme="art"] #notice p,html[data-theme="art"] .set-main,html[data-theme="art"] #loading{font-size:15px} /* 15 说明级 */
html[data-theme="art"] #toast,html[data-theme="art"] .set-sub,html[data-theme="art"] .set-keys,
html[data-theme="art"] #loading small{font-size:13px} /* 13 标签级 */
html[data-theme="art"] #jump,html[data-theme="art"] #spdBtn,html[data-theme="art"] #skipBtn,
html[data-theme="art"] kbd,html[data-theme="art"] #skipBtn kbd{font-size:12px} /* 12 控件级 */
html[data-theme="art"] #loading small{font-family:var(--serif)}
/* ================= V3 ================= */
/* 小林的心声（第一轮）：不是选项，是从定格里浮出来的一句话。逐字像墨在相纸上洇开，随心跳轻轻一胀，
在脑子里又回响两遍；注意力收窄时缩小、退到画面上方，旁白出现在下面 */
#voice{position:absolute;left:50%;top:42%;z-index:8;width:min(1000px,86vw);transform:translate(-50%,-50%);text-align:center;pointer-events:none;opacity:0;
transition:opacity .7s var(--ease),top 1.1s var(--ease)}
#voice.on{opacity:1}
#voice::before{content:"";position:absolute;inset:-60px -80px;z-index:-1;background:radial-gradient(closest-side,rgba(8,6,5,.6),rgba(8,6,5,0))} /* 压在亮的桌面上也读得清 */
#voice.settle{top:25%}
#voice .v-lead{font-family:var(--serif);font-size:15px;letter-spacing:.32em;color:rgba(239,229,211,.8);text-shadow:var(--shadow);margin-bottom:20px;transition:opacity .6s}
#voice.settle .v-lead{opacity:0}
#voice .v-line{position:relative;display:inline-block;max-width:100%}
#voice .v-main,#voice .v-echo{font-family:var(--serif);font-size:clamp(30px,3.9vw,50px);line-height:1.45;letter-spacing:.06em;transition:font-size 1.1s var(--ease)}
#voice .v-main{position:relative;display:inline-block;color:#fff7ea;text-shadow:0 2px 4px rgba(0,0,0,.9),0 0 42px rgba(0,0,0,.75)}
#voice.settle .v-main,#voice.settle .v-echo{font-size:clamp(22px,2.7vw,34px)}
#voice .v-main span{display:inline-block;opacity:0;animation:inkin .75s var(--ease) forwards}
@keyframes inkin{0%{opacity:0;filter:blur(9px);transform:scale(1.3)}55%{opacity:1;filter:blur(1.2px)}100%{opacity:1;filter:none;transform:none}}
#voice .v-echo{position:absolute;inset:0;color:rgba(255,236,210,.55);opacity:0;pointer-events:none}
#voice.echo .v-echo.e1{animation:echo 2s var(--ease) forwards}
#voice.echo .v-echo.e2{animation:echo 2s var(--ease) .55s forwards}
@keyframes echo{0%{opacity:.6;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(1.55);filter:blur(7px)}}
#voice.on .v-line{animation:throb .714s ease-in-out infinite} /* 和心跳同一个节拍（84 次/分） */
@keyframes throb{0%,100%{transform:scale(1)}10%{transform:scale(1.03)}24%{transform:scale(1.006)}34%{transform:scale(1.016)}}
/* 小林这样做了 / 小林想到了：一枚印章加一张纸片。自动做出的那一张，红笔自己圈上 */
#autoact,#idea{position:absolute;left:50%;z-index:8;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;opacity:0;
transition:opacity .55s var(--ease),transform .55s var(--ease)}
#autoact{top:60%;transform:translate(-50%,-38%)}
#autoact.on{opacity:1;transform:translate(-50%,-50%)}
#idea{top:40%;z-index:10;transform:translate(-50%,-36%) scale(.96)}
#idea.on{opacity:1;transform:translate(-50%,-50%)}
#autoact .aa-seal,#idea .id-seal{display:inline-block;padding:3px 10px 4px;font-family:var(--serif);font-size:13px;letter-spacing:.28em;color:#f7ecdc;background:#b9352b;
border-radius:2px;transform:rotate(-2deg);box-shadow:0 3px 10px rgba(0,0,0,.4)}
#autoact .aa-card,#idea .id-card{position:relative;min-width:min(320px,80vw);max-width:min(560px,86vw);padding:22px 30px;font-family:var(--serif);
font-size:clamp(18px,1.8vw,22px);line-height:1.55;text-align:center;color:var(--paper);background:rgba(11,11,12,.82);border-left:2px solid var(--amber)}
html[data-theme="art"] #autoact .aa-card,html[data-theme="art"] #idea .id-card{color:#2b231c;background:var(--paperbg);border-left:0;border-radius:2px;
box-shadow:0 16px 32px rgba(0,0,0,.55);transform:rotate(-1.2deg)}
#autoact.stamp .aa-card::after{content:"";position:absolute;inset:-8px -11px;border:2.5px solid #c73a2e;border-radius:48% 52% 46% 54%/56% 44% 56% 44%;opacity:.9;animation:circle .45s var(--ease) both}
#idea.on .id-card{animation:ideaglow 1.8s var(--ease) .15s}
@keyframes ideaglow{0%{box-shadow:0 0 0 0 rgba(217,169,92,0),0 16px 32px rgba(0,0,0,.55)}30%{box-shadow:0 0 0 6px rgba(217,169,92,.5),0 16px 32px rgba(0,0,0,.55)}100%{box-shadow:0 0 0 16px rgba(217,169,92,0),0 16px 32px rgba(0,0,0,.55)}}
/* 看周围的进度：放在定格时上方的黑边里，不挡画面和线索。看见一处，就有一张小照片钉进相框，计数跳一下 */
#lookhud{position:absolute;left:50%;top:calc(var(--bar) / 2);z-index:9;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;
pointer-events:none;font-family:var(--serif);font-size:15px;color:rgba(239,229,211,.85);opacity:0;transition:opacity .6s var(--ease)}
#lookhud.on{opacity:1}
#lookhud .lh-t{font-size:13px;letter-spacing:.24em;color:var(--amber)}
#lookhud .lh-slots{display:flex;gap:5px}
#lookhud .lh-slots i{display:block;width:34px;height:19px;overflow:hidden;border:1px dashed rgba(239,229,211,.42)}
#lookhud .lh-slots i.on{border:1px solid rgba(239,229,211,.92)}
#lookhud .lh-slots i img{display:block;width:100%;height:100%;object-fit:cover}
#lookhud .lh-slots i.pop{animation:slotpop .75s var(--ease)}
@keyframes slotpop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.3);opacity:1;box-shadow:0 0 14px rgba(217,169,92,.85)}100%{transform:none}}
#lookhud .lh-n{font-family:var(--sans);font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#fff3e0}
#lookhud .lh-n.pulse{animation:npulse .8s var(--ease)}
@keyframes npulse{0%{transform:scale(1)}35%{transform:scale(1.4);color:var(--amber)}100%{transform:none}}
#lookhud .lh-h{max-width:46vw;overflow:hidden;text-overflow:ellipsis;color:rgba(239,229,211,.85)}
#lookhud .lh-h.flash{animation:hflash 1.8s var(--ease)}
@keyframes hflash{0%{color:#fff}25%{color:var(--amber);text-shadow:0 0 14px rgba(217,169,92,.6)}100%{color:rgba(239,229,211,.85)}}
@media (max-width:900px){ #lookhud .lh-t{display:none} }
@media (max-width:760px){ /* 窄屏：黑边放不下一整行，提示换到黑边下面 */
#lookhud{top:calc(var(--bar) + 8px);transform:translateX(-50%);flex-wrap:wrap;justify-content:center;row-gap:4px;width:92vw;white-space:normal;text-align:center}
#lookhud .lh-h{max-width:none;width:100%;font-size:13px}
}
/* 如果你是小林（第一轮结局之后，只出现一次）：背后是那一刻的定格 */
#rethink{background:radial-gradient(70% 60% at 50% 50%,rgba(8,8,9,.68) 0%,rgba(8,8,9,.42) 60%,rgba(8,8,9,.15) 100%)}
#rethink .txt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1160px,90vw);text-align:center}
#rethink .lead{font-family:var(--serif);font-size:clamp(15px,1.6vw,19px);line-height:1.8;color:rgba(239,229,211,.8);text-shadow:var(--shadow)}
#rethink h2{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.55;text-shadow:0 1px 18px rgba(0,0,0,.6)}
#rethink .opts{margin:38px auto 0;width:min(320px,80%)}
html[data-theme="art"] #rethink .opts{margin-left:auto;margin-right:auto}
/* 复盘：看过几个结局；念头的心理学说法（小注） */
.rv-h .lead .got{display:inline-block;margin-left:1em;color:var(--amber);white-space:nowrap}
.rv .term{margin-left:.3em;font-size:13px;color:var(--muted)} /* 接在复述句末，不另起一行，右栏不会因此要滚动 */
html[data-sub="big"] .rv .term{font-size:14px}
html[data-sub="big"] .rv-note .sum{gap:16px} /* 大字幕：复述多了“小林”和小注，间距收一点，两次也不用滚 */
/* 等你点的时候（D48）：字幕下面一行小字“点一下继续 ›”。读完字幕又停着不动才淡入，样式很轻；再等一会儿稍微亮一点 */
#tapcue{position:absolute;left:50%;bottom:calc(var(--bar) + 2.4vh);z-index:11;display:flex;align-items:center;gap:6px;padding:4px 10px;
font-family:var(--serif);font-size:16px;letter-spacing:.2em;color:rgba(239,229,211,.62);text-shadow:var(--shadow);
opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .8s var(--ease),transform .8s var(--ease),color .3s}
#tapcue.on{opacity:1;pointer-events:auto;transform:translate(-50%,0);animation:cuebreath 2.4s ease-in-out infinite}
#tapcue:hover{color:#fff}
#tapcue.press{opacity:0;transition:opacity .2s}
@keyframes cuebreath{0%,100%{opacity:.7}50%{opacity:1}}
#caption.wait .go{font-size:1.1em;animation:nudge 1s ease-in-out infinite}
/* 小林那一段自动往下走（D48）：底部一条分段的细线，正在走的一段慢慢填满，旁边一行“点一下可以快进” */
#autoprog{position:absolute;left:50%;bottom:calc(var(--bar) + 2.4vh);z-index:11;display:flex;align-items:center;gap:12px;transform:translateX(-50%);
font-family:var(--serif);font-size:14px;letter-spacing:.16em;color:rgba(239,229,211,.6);text-shadow:var(--shadow);pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
#autoprog.on{opacity:1}
#autoprog .ap-bar{display:flex;gap:5px}
#autoprog .ap-bar i{position:relative;display:block;width:30px;height:2px;background:rgba(239,229,211,.22);overflow:hidden}
#autoprog .ap-bar b{position:absolute;inset:0;width:0;background:rgba(255,240,220,.9)}
#autoprog .ap-bar i.done b{width:100%}
@keyframes apfill{from{width:0}to{width:100%}}
#stage.menu #autoprog .ap-bar b{animation-play-state:paused!important}
/* 看过的片段：自动 2 倍速；右上角（倍速、设置按钮下面）一直有“看过的片段 · 2 倍速”和一个醒目的“跳过这段” */
#againcue{position:absolute;right:16px;top:calc(var(--bar) + 62px);z-index:12;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;
font-family:var(--serif);font-size:13px;letter-spacing:.12em;color:rgba(239,229,211,.88);background:rgba(11,11,12,.6);border:1px solid rgba(239,229,211,.25);border-radius:22px;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
#againcue.on{opacity:1;pointer-events:auto;transform:none}
#againcue .ag-skip{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 14px;font-family:var(--serif);font-size:14px;letter-spacing:.14em;color:#fff6e8;
background:#b9352b;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.4);transition:background .2s,transform .2s}
#againcue .ag-skip:hover{background:#cf4234;transform:translateY(-1px)}
#againcue kbd{font:11px/1 var(--sans);letter-spacing:0;padding:2px 5px;border:1px solid rgba(255,240,225,.55);border-radius:3px;color:rgba(255,240,225,.9)}
/* 播放控制条里的“跳过这段”更醒目一点 */
html[data-theme="art"] #skipBtn.again{height:36px;padding:0 12px 0 16px;font-family:var(--serif);font-size:14px;color:#fff6e8;background:rgba(150,40,32,.55);border-color:rgba(230,120,100,.75)}
html[data-theme="art"] #skipBtn.again:hover{background:rgba(185,53,43,.85);border-color:rgba(255,200,180,.9)} /* D49：只有看过的片段才是红色；第一次看的照常 */
/* 结局卡的“继续”：从一行小字改成一个按钮；5 秒没点，一圈圈往外扩 */
#ending .cont{position:relative;margin-top:28px;padding:11px 26px 11px 30px;font-size:15px;letter-spacing:.3em;color:#fff6e8;background:rgba(239,229,211,.12);border:1px solid rgba(239,229,211,.55);border-radius:3px}
html[data-theme="art"] #ending .cont{color:#f7ecdc;background:var(--red);border-color:var(--red);box-shadow:0 8px 22px rgba(0,0,0,.45)}
#ending .cont:hover{color:#fff;background:#cf4234;border-color:#cf4234}
#ending .cont::after{color:inherit}
#ending .cont.urge::before{content:"";position:absolute;inset:-4px;border-radius:5px;border:2px solid rgba(240,140,110,.8);animation:cuewave 1.5s ease-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){
#voice.on .v-line,#voice.echo .v-echo,#idea.on .id-card,#lookhud .lh-slots i.pop,#lookhud .lh-n.pulse,#lookhud .lh-h.flash{animation:none}
#voice .v-main span{opacity:1;animation:none}
#tapcue.on,#ending .cont.urge::before,#panel .more,.bulb-ic.on svg,#inspo.bump,.inspo-sum .is-chip.on,.mcard .mbulb.new,.clue .cbulb.new,.inspofly::before{animation:none}
.inspo-sum .is-chip{opacity:1;transform:none}
}
/* ================= V3（D48）：继续擦的提示、新看法、灵感灯泡、字号 ================= */
/* 选项上方一行：还有几处没看——继续擦开白雾，看看小林还会想到什么。比面板里其它小字明显，轻轻呼吸 */
#panel .more{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-family:var(--serif);font-size:clamp(17px,1.7vw,20px);letter-spacing:.06em;
color:#ffd9a0;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.6);animation:morebreath 2.6s ease-in-out infinite}
#panel .more .bulb-ic{width:22px;height:22px;flex:none}
@keyframes morebreath{0%,100%{opacity:.82}50%{opacity:1}}
/* 挑战 4 处：小林想到的新看法，留在面板上 */
#panel .insight{display:flex;align-items:baseline;gap:10px;margin:2px 0 10px;font-family:var(--serif);font-size:clamp(17px,1.7vw,20px);color:#fff3e0;text-shadow:var(--shadow)}
#panel .insight .seal-s{flex:none;padding:2px 8px 3px;font-size:13px;letter-spacing:.2em;color:#f7ecdc;background:#b9352b;border-radius:2px;transform:rotate(-2deg)}
/* 灯泡图标：没点亮是一圈淡淡的线，点亮是金色、带一点光 */
.bulb-ic{display:inline-block;width:18px;height:18px;vertical-align:-3px;color:rgba(239,229,211,.5)}
.bulb-ic svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bulb-ic.on{color:#ffd27a}
.bulb-ic.on svg .g{fill:rgba(255,210,122,.85)}
.bulb-ic.on svg{filter:drop-shadow(0 0 5px rgba(255,200,110,.85))}
#panel .more .bulb-ic{color:#ffd9a0}
@keyframes bulbon{0%{transform:scale(.4);filter:none}40%{transform:scale(1.35);filter:drop-shadow(0 0 14px rgba(255,210,122,1))}100%{transform:none}}
/* 复盘地图：每张卡右上角一盏小灯 */
.mcard .mbulb{position:absolute;right:-7px;top:-9px;z-index:2;width:22px;height:22px;padding:3px;border-radius:50%;background:rgba(14,11,9,.85);color:rgba(239,229,211,.35)}
.mcard .mbulb svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mcard .mbulb.on{color:#ffd27a;box-shadow:0 0 10px rgba(255,200,110,.55)}
.mcard .mbulb.on svg .g{fill:rgba(255,210,122,.85)}
.rv-h .lead .got .bulb-ic{margin-right:5px}
/* 字号（D48：有些字太小）：游戏里会读的说明类小字从 13—15 号调大到 15—17 号 */
#voice .v-lead{font-size:clamp(18px,1.9vw,22px);letter-spacing:.24em;color:rgba(239,229,211,.88)}
#lookhud{font-size:17px}
#lookhud .lh-t{font-size:15px}
#lookhud .lh-n{font-size:15px}
#lookhud .lh-slots i{width:40px;height:22px}
html[data-theme="art"] .hint,html[data-theme="art"] .prev{font-size:17px}
html[data-theme="art"] .layer,html[data-theme="art"] .eyebrow{font-size:14px}
html[data-theme="art"] .thought small{font-size:14px}
html[data-theme="art"] .thought p{font-size:20px}
#autoact .aa-seal,#idea .id-seal{font-size:15px}
#rethink .lead{font-size:clamp(16px,1.7vw,21px)}
html[data-theme="art"] #reap .sub,html[data-theme="art"] #ending .then{font-size:17px}
.cluemark,html[data-theme="art"] .cluemark{font-size:17px}
html[data-sub="big"] .cluemark{font-size:19px}
html[data-sub="big"][data-theme="art"] .hint,html[data-sub="big"][data-theme="art"] .prev{font-size:19px}
@media (max-height:700px){ html[data-sub="big"] .rv-note .sum{gap:10px} } /* 矮窗口 + 大字幕：复盘右栏间距再收一点，两次也不用滚 */
/* ================= V3（D49）：灵感 ================= */
/* 右上角一直有：灯泡 · 灵感 · 4/14（和倍速、设置按钮在一行）。收集到一个时，飞来的灯落进这里，它跳一下 */
#inspo{position:absolute;right:112px;top:calc(var(--bar) + 12px);z-index:22;height:40px;display:flex;align-items:center;gap:8px;padding:0 14px 0 10px;
font-family:var(--serif);font-size:15px;letter-spacing:.12em;color:#fff3e0;background:rgba(11,11,12,.45);border:1px solid rgba(255,210,122,.35);border-radius:20px;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:top .9s var(--ease),background .25s}
#inspo .bulb-ic{width:22px;height:22px}
#inspo .in-n{font:600 14px/1 var(--sans);color:#ffd27a;letter-spacing:.02em}
#inspo.bump{animation:inspobump .7s var(--ease)}
#inspo.bump .bulb-ic svg{animation:bulbon .9s var(--ease)}
@keyframes inspobump{0%{transform:scale(1)}30%{transform:scale(1.14);background:rgba(120,80,20,.65);box-shadow:0 0 22px rgba(255,200,110,.55)}100%{transform:none}}
/* 局内收集：灯在发生的地方亮起，写着“灵感 +1 · 念头 · ……”，再飞进右上角 */
.inspofly{position:absolute;z-index:30;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translate(-50%,-50%)}
.inspofly .bulb-ic{width:44px;height:44px}
.inspofly .bulb-ic svg{filter:drop-shadow(0 0 10px rgba(255,214,130,1)) drop-shadow(0 0 26px rgba(255,190,90,.75))}
.inspofly::before{content:"";position:absolute;left:50%;top:22px;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid rgba(255,214,140,.85);
animation:flyring 1s ease-out .1s both}
.inspofly .if-t{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 14px;font-family:var(--serif);font-size:17px;letter-spacing:.14em;color:#ffe2a8;
background:rgba(11,11,12,.7);border:1px solid rgba(255,210,122,.4);border-radius:16px;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.inspofly .if-t small{font-size:14px;letter-spacing:.06em;color:rgba(255,243,224,.88)}
@keyframes flyring{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(2.6)}}
/* 选项上的“可收集”：这个选项往下还有没收集的灵感 */
.get-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 9px 2px 6px;font-family:var(--serif);font-size:13px;letter-spacing:.1em;white-space:nowrap;
color:#7a5410;background:rgba(255,214,130,.92);border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.get-tag .bulb-ic{width:15px;height:15px;vertical-align:0;color:#7a5410}
.get-tag .bulb-ic.on svg{filter:none}
.get-tag .bulb-ic.on svg .g{fill:rgba(255,248,225,.9)}
.opt .get-tag{margin-left:8px}
html[data-theme="art"] .opt .get-tag{position:absolute;right:10px;bottom:-10px;margin:0}
html[data-theme="art"] #reap .opt .get-tag,html[data-theme="art"] #rethink .opt .get-tag{position:static;display:flex;width:fit-content;margin:8px 0 0} /* 标签单独一行，不和按钮上的字一起排 */
/* 一把结束（结局卡）：这一次收集到的灵感一个个亮起来，计数往上跳 */
.inspo-sum{margin-top:18px;max-width:620px}
.inspo-sum .is-h{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:17px;color:#fff3e0}
.inspo-sum .is-h .bulb-ic{width:24px;height:24px}
.inspo-sum .is-h b{font:600 18px/1 var(--sans);color:#ffd27a}
.inspo-sum .is-t{margin-left:10px;font-size:15px;color:rgba(239,229,211,.7)}
.inspo-sum .is-t b{font-size:15px}
.inspo-sum .is-h.bump .bulb-ic svg{animation:bulbon .8s var(--ease)}
.inspo-sum .is-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.inspo-sum .is-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 8px;font-family:var(--serif);font-size:15px;color:#ffe9c4;
background:rgba(70,48,16,.55);border:1px solid rgba(255,210,122,.45);border-radius:14px;opacity:0;transform:translateY(8px) scale(.9)}
.inspo-sum .is-chip .bulb-ic{width:18px;height:18px}
.inspo-sum .is-chip.on{animation:chipin .6s var(--ease) forwards}
@keyframes chipin{0%{opacity:0;transform:translateY(8px) scale(.9);box-shadow:none}50%{opacity:1;transform:translateY(-2px) scale(1.06);box-shadow:0 0 18px rgba(255,200,110,.7)}100%{opacity:1;transform:none;box-shadow:none}}
.inspo-sum .is-left{margin-top:10px;font-family:var(--serif);font-size:15px;color:rgba(239,229,211,.72)}
.inspo-sum .is-left.all{color:#ffd27a}
.inspo-sum.none .is-h{color:rgba(239,229,211,.8)}
/* 复盘：页头“灵感 x/14 这一次 +n”；这一次新收集的灯，路亮完以后一盏盏闪一下 */
.rv-h .lead .got{display:flex;width:fit-content;align-items:center;gap:5px;margin:4px 0 0;color:#ffd27a;white-space:nowrap} /* 计数单独一行，不和上面那句说明挤着排 */
.rv-h .lead .got b{font:600 14px/1 var(--sans)}
.rv-h .lead .got em{margin-left:6px;font-style:normal;font-size:13px;color:rgba(255,226,168,.85)}
.rv-h .lead .got em.left{color:rgba(255,236,200,.62)}
.rv-h .lead .got.bump .bulb-ic svg{animation:bulbon .6s var(--ease)}
.mcard .mbulb.new{animation:mbulbnew 1.2s var(--ease) 2.2s both}
@keyframes mbulbnew{0%{color:rgba(239,229,211,.35);box-shadow:none}35%{transform:scale(1.6);color:#ffe2a8;box-shadow:0 0 22px rgba(255,200,110,.95)}100%{transform:none;color:#ffd27a;box-shadow:0 0 10px rgba(255,200,110,.55)}}
.clue{position:relative}
.clue .cbulb{position:absolute;right:-5px;top:-7px;width:18px;height:18px;padding:2px;border-radius:50%;background:rgba(14,11,9,.85);color:rgba(239,229,211,.35)}
.clue .cbulb svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.clue .cbulb.on{color:#ffd27a}
.clue .cbulb.on svg .g{fill:rgba(255,210,122,.85)}
.clue .cbulb.new{animation:mbulbnew 1.2s var(--ease) 2.4s both}
/* 实验：带编号进来的，结束页只有“去填体验后的问卷”这一个主按钮 */
#endpage .survey{display:block;width:max-content;margin:30px auto 0;padding:11px 26px 11px 30px;font-size:16px;color:#f7ecdc;text-decoration:none;background:var(--red);border:1px solid var(--red);border-radius:3px;box-shadow:0 8px 22px rgba(0,0,0,.45)}
#endpage .survey:hover{background:#cf4234;border-color:#cf4234;color:#fff}
#endpage .survey::after{color:inherit}
#notice.on{box-shadow:0 0 0 200vmax rgba(6,6,7,.5),0 18px 40px rgba(0,0,0,.5)} /* 弹窗：后面压暗，不和复盘地图抢 */