/* 演出播放器（assets/js/chapter.js）。整页盖在钟楼书房上面；舞台固定在后面，正文在前面往下滚。 */
html.is-chapter { overflow: hidden; }
.cp { position: fixed; inset: 0; z-index: 300; overflow-y: auto; overflow-x: hidden; background: #07080b; color: #e9e1d3; scrollbar-width: thin; scrollbar-color: rgba(233, 225, 211, .2) transparent; }
.cp[hidden] { display: none; }
.cp-stage { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }

/* 背景：每个场景一张，叠着淡入淡出；慢慢往里推一点点，画面不死 */
.cp-bgs, .cp-bg { position: absolute; inset: 0; }
.cp-bg { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: filter 1.6s; }
.cp-bg.is-on { opacity: 1; }
.cp-bgs { transition: filter 1.8s; }
.cp[data-tone="cold"] .cp-bgs { filter: saturate(.8) brightness(.96) hue-rotate(-6deg); }
.cp[data-tone="thaw"] .cp-bgs { filter: saturate(.95) brightness(1.02) sepia(.12); }
.cp[data-tone="warm"] .cp-bgs { filter: saturate(1.05) brightness(.95) sepia(.18); }
.cp-weather { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 座钟特写：图 + 代码画的指针（秒针一格一格跳） */
.cp-clock { position: absolute; inset: 0; opacity: 0; }
.cp-clock.is-on { opacity: 1; }
.cp-clock img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-clock svg { position: absolute; overflow: visible; filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, .45)); }
.cp-clock svg g { transform-origin: 0 0; }

/* 起雾的玻璃（canvas），往下读时被雨冲花 */
.cp-fog { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.cp.is-intro .cp-fog, .cp-fog[style*="opacity"] { opacity: 1; }

/* 正文底下一条暗带，读字不费眼；开场时没有 */
.cp-veil { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s;
  background: linear-gradient(90deg, transparent 12%, rgba(6, 7, 10, .55) 30%, rgba(6, 7, 10, .7) 50%, rgba(6, 7, 10, .55) 70%, transparent 88%),
              linear-gradient(transparent 60%, rgba(6, 7, 10, .55)); }
.cp:has(.cp-text .is-seen) .cp-veil { opacity: 1; }

/* 立绘：左右两侧，站在画面底部；说话的人亮起、往前一步，其余人退暗 */
.cp-cast { position: absolute; inset: 0; }
.cp-who { position: absolute; bottom: 0; height: min(92vh, 980px); opacity: 0; transition: opacity .9s, transform .9s cubic-bezier(.2, .8, .2, 1), filter .6s; }
.cp-who img { height: 100%; width: auto; display: block; -webkit-mask: linear-gradient(transparent, #000 4%, #000 82%, transparent); mask: linear-gradient(transparent, #000 4%, #000 82%, transparent); }
.cp-who[data-side="left"] { left: max(-2vw, calc(50vw - 900px)); transform: translateX(-60px); }
.cp-who[data-side="right"] { right: max(-2vw, calc(50vw - 900px)); transform: translateX(60px); }
.cp-who.is-on { opacity: 1; transform: none; filter: brightness(.82); }
.cp-cast.has-say .cp-who.is-on:not(.is-say) { filter: brightness(.45) saturate(.6); }
.cp-who.is-on.is-say { filter: brightness(1.04); }
.cp-who.is-on.is-say[data-side="left"] { transform: translateX(22px) scale(1.015); }
.cp-who.is-on.is-say[data-side="right"] { transform: translateX(-22px) scale(1.015); }
/* 还没有专门表情图时，用姿态先演：害羞 = 往下缩一点、暗一点 */
.cp-who.is-on[data-mood="shy"] { transform: translateY(10px) scale(.985); filter: brightness(.78) saturate(.9); }
.cp-who.is-on[data-mood="smirk"] { filter: brightness(1) saturate(1.05); }
.cp-who[data-who="nancy"].is-say img { animation: cpHop .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes cpHop { 40% { transform: translateY(-14px); } }

/* 开场：章名写在雾上（canvas），这里只放章号、时间地点和提示 */
.cp-head { position: absolute; left: 0; right: 0; top: 0; height: 100%; text-align: center; font-family: var(--serif); pointer-events: none; }
.cp-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cp-head small, .cp-head p, .cp-hint { position: absolute; left: 0; right: 0; opacity: 0; transition: opacity 1.4s, transform 1.4s; }
.cp-head small { top: 22%; font-size: 13px; letter-spacing: .9em; padding-left: .9em; color: rgba(225, 233, 245, .85); text-shadow: 0 1px 8px #000; transform: translateY(8px); }
.cp-head p { top: 58%; font-size: 13px; letter-spacing: .38em; color: rgba(214, 224, 238, .82); text-shadow: 0 1px 6px #000, 0 0 18px rgba(0, 0, 0, .8); transform: translateY(-6px); transition-delay: .5s; }
.cp-hint { bottom: 5vh; font-size: 12px; letter-spacing: .6em; color: rgba(233, 225, 211, .6); transition-delay: 1.4s; }
.cp-hint::after { content: ''; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(rgba(233, 225, 211, .6), transparent); animation: cpDrip 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cpDrip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.cp-head.is-on small, .cp-head.is-on p, .cp-head.is-on .cp-hint { opacity: 1; transform: none; }
.cp-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }

/* 正文：像一本书往下读。还没读到的先藏着，读到的那段最亮，读过的退暗 */
.cp-read { position: relative; z-index: 2; }
.cp-open { height: 100vh; }
.cp-text { width: min(36em, calc(100% - 40px)); margin: 0 auto; padding: 0 0 30vh; font-family: var(--serif); font-size: clamp(16px, 1.15vw, 18.5px); line-height: 2.1; letter-spacing: .04em; }
.cp-text p { position: relative; margin: 0 0 1.5em; text-indent: 2em; color: #e6ddcd; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 22px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(14px); transition: opacity 1s, transform 1s cubic-bezier(.2, .8, .2, 1), color .6s; }
.cp-text p.is-seen { opacity: .5; transform: none; }
.cp-text p.is-here { opacity: 1; }
.cp-text p:first-child { margin-top: 18vh; }
/* 对白：不用对话框，用说话人自己的字 */
.cp-text p.is-say { text-indent: 0; padding-left: 1.2em; border-left: 1px solid currentColor; }
.cp-text p[data-who="nancy"] { color: #f2b874; font-size: 1.1em; letter-spacing: .05em; }
.cp-text p[data-who="nancy"].is-here { animation: cpNancy .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes cpNancy { 40% { transform: translateY(-5px) scale(1.01); } }
.cp-text p[data-who="vera"][data-look="clerk"] { color: #b9c1c9; font-size: .94em; letter-spacing: .02em; }
.cp-text p[data-who="vera"][data-look="home"] { color: #f0cda6; }
.cp-text p[data-who="vera"][data-look="eleanor"] { color: #d4c4e6; }
/* 心声：不带立绘，字更轻、斜一点 */
.cp-text p.is-inner { text-indent: 0; padding-left: 2em; color: #cfc8dc; font-style: italic; transform: skewX(-6deg); opacity: 0; }
.cp-text p.is-inner.is-seen { opacity: .55; transform: skewX(-6deg); }
.cp-text p.is-inner.is-here { opacity: .95; }
/* 重拍：“当——” */
.cp-text p.is-beat { text-indent: 0; text-align: center; font-size: 2.1em; letter-spacing: .5em; color: #fff1d6; margin: 1.2em 0 1.2em; text-shadow: 0 0 30px rgba(255, 210, 150, .55), 0 2px 4px #000; }

/* 印鉴处的红印 */
.cp-seal { position: absolute; left: -7.5em; top: -.6em; width: 5.4em; height: 5.4em; color: #b3261e; opacity: .88; mix-blend-mode: screen; pointer-events: none; filter: drop-shadow(0 0 1px rgba(179, 38, 30, .6)); }
.cp-seal svg { width: 100%; height: 100%; font-family: var(--serif); }
.cp-text p:last-child .cp-seal { left: auto; right: -2em; top: 1.6em; }

.cp-end { padding: 0 20px 22vh; text-align: center; font-family: var(--serif); }
.cp-end p { margin: 0 0 28px; font-size: 15px; letter-spacing: .8em; padding-left: .8em; color: rgba(233, 225, 211, .75); }
.cp-end div { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cp-end button { padding: 10px 20px; font-family: var(--serif); font-size: 14px; letter-spacing: .25em; color: #f1e8dc; background: rgba(11, 10, 10, .6); border: 1px solid rgba(241, 232, 220, .4); cursor: pointer; }
.cp-end button[disabled] { opacity: .45; cursor: default; }
.cp-end button small { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .3em; opacity: .7; }

/* 界面：返回、角落小钟、纯文字、跳过 */
.cp-ui { position: fixed; z-index: 5; inset: 0 0 auto; height: 0; font-family: var(--serif); }
.cp-ui button { position: fixed; padding: 7px 14px; font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: #f1e8dc; background: rgba(11, 10, 10, .5); border: 1px solid rgba(241, 232, 220, .3); cursor: pointer; transition: background .2s, opacity .4s; }
.cp-ui button:hover { background: rgba(11, 10, 10, .8); }
.cp-back { left: 18px; top: 16px; }
.cp-plain { right: 18px; top: 16px; }
.cp-skip { right: 18px; bottom: 64px; }
.cp:not(.is-intro) .cp-skip { opacity: 0; pointer-events: none; }
.cp.is-intro .cp-back, .cp.is-intro .cp-plain { opacity: .35; }
.cp-time { position: fixed; left: 22px; bottom: 20px; opacity: 0; transition: opacity 1s; text-shadow: 0 1px 4px #000; }
.cp-time.is-on { opacity: 1; }
.cp.is-intro .cp-time { opacity: 0; }
.cp-time b { display: block; font-size: 15px; font-weight: 600; letter-spacing: .3em; color: #f0dcb4; }
.cp-time span { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .35em; color: rgba(233, 225, 211, .55); }
.cp-gate { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(5, 6, 9, .82); border: 0; cursor: pointer; font-family: var(--serif); }
.cp-gate[hidden] { display: none; }
.cp-gate span { font-size: 15px; letter-spacing: .6em; padding-left: .6em; color: #e9e1d3; animation: cpBreath 2.4s ease-in-out infinite; }
@keyframes cpBreath { 50% { opacity: .45; } }
html.is-chapter .ch-sound { z-index: 320; }

/* 纯文字：舞台全部收起，只剩一本书 */
.cp.is-plain { background: #15120f; }
.cp.is-plain .cp-stage > :not(.cp-head) , .cp.is-plain .cp-time { display: none; }
.cp.is-plain .cp-text p { opacity: 1 !important; transform: none; color: #ddd3c2; text-shadow: none; }
.cp.is-plain .cp-text p.is-inner { transform: skewX(-6deg); }

@media (max-width: 760px) {
  .cp-who { height: 62vh; opacity: 0; }
  .cp-who.is-on { opacity: .5; }
  .cp-seal { left: auto; right: -.4em; top: -2.4em; width: 3.6em; height: 3.6em; }
}
@media (prefers-reduced-motion: reduce) { .cp-text p { transition: none; } }