@lemoncat7/dsh-partner 2.8.1 → 2.8.3

package/resources/skills/novel-game-creation/upstream/examples/jin-ping-mei/build/app/css/new-guofeng.css

@@ -0,0 +1,1494 @@
+/*
+ * 新国风叙事 CG 主题（2026-08）
+ *
+ * 目标不是复刻古画，也不是把古装人物放进现代时尚棚拍。完整保留晚明世界，
+ * 以当代文字游戏常见的二维人物审美、通透光色、情绪化镜头和丝绸层次重塑界面。
+ * 白日保持春庭高明度；夜景用蓝紫月光与暖灯形成可读层次，不允许全屏压黑。
+ */
+
+:root {
+  --paper: #fff7ed;
+  --paper-light: #fffdf8;
+  --paper-dark: #e7d6c7;
+  --ink: #292d3b;
+  --ink-soft: #646676;
+  --night: #e8edf8;
+  --night-soft: #d8dfef;
+  --gold: #b98642;
+  --gold-bright: #d2a15b;
+  --cinnabar: #c84f5c;
+  --jade: #3f8f83;
+  --honey: #d39847;
+  --azurite: #355f98;
+  --lilac: #8c79ad;
+  --line: rgba(72, 75, 96, .2);
+  --silk: rgba(255, 250, 245, .9);
+  --silk-strong: rgba(255, 253, 249, .975);
+  --cg-shadow: 0 22px 64px rgba(79, 63, 74, .16);
+}
+
+html,
+body {
+  color: var(--ink);
+  background:
+    radial-gradient(circle at 14% 10%, rgba(242, 180, 188, .2), transparent 28%),
+    radial-gradient(circle at 86% 86%, rgba(91, 146, 170, .15), transparent 30%),
+    #f3e9df;
+}
+
+#app::after {
+  opacity: .34;
+  mix-blend-mode: soft-light;
+  background-image:
+    radial-gradient(ellipse at 12% 18%, rgba(255,255,255,.9) 0 1px, transparent 2px),
+    radial-gradient(ellipse at 74% 12%, rgba(229,137,154,.34) 0 1px, transparent 2px),
+    radial-gradient(circle at 48% 82%, rgba(82,128,152,.22) 0 1px, transparent 2px);
+  background-size: 31px 37px, 43px 49px, 53px 61px;
+}
+
+.loading,
+.fatal-card {
+  color: var(--ink);
+  background: linear-gradient(145deg, #fffdf8, #f3e4dd);
+}
+
+.eyebrow { color: var(--cinnabar); }
+
+/* 年龄门：从明亮宅门进入，而不是穿过一堵黑墙。 */
+.age-gate {
+  color: var(--ink);
+  background:
+    linear-gradient(90deg, rgba(255,250,244,.96) 0%, rgba(255,250,244,.86) 45%, rgba(255,250,244,.25) 76%),
+    url('../assets/bg/compound_new_guofeng.webp') center / cover;
+}
+
+.age-gate::before {
+  border: 1px solid rgba(185, 127, 92, .26);
+  background: rgba(255, 248, 242, .12);
+  box-shadow:
+    inset 0 0 0 8px rgba(255, 253, 249, .42),
+    inset 0 0 0 9px rgba(200, 79, 92, .12),
+    0 26px 90px rgba(75, 65, 82, .13);
+}
+
+.age-gate p:not(.eyebrow) { color: #5d6070; }
+
+.age-seal {
+  color: var(--cinnabar);
+  border-color: var(--cinnabar);
+  background: rgba(255, 250, 245, .76);
+  box-shadow: 0 10px 28px rgba(152, 63, 79, .14);
+}
+
+/* 按钮是剧情签，不是黑色系统框。 */
+.ink-button,
+.plain-button {
+  border-color: rgba(80, 91, 120, .28);
+  color: #343745;
+  background: rgba(255, 252, 248, .84);
+  box-shadow: 0 9px 25px rgba(61, 69, 91, .08);
+  backdrop-filter: blur(8px);
+}
+
+.ink-button:hover:not(:disabled),
+.plain-button:hover {
+  color: #a93345;
+  border-color: rgba(200, 79, 92, .58);
+  background: #fffaf7;
+}
+
+.ink-button.primary {
+  color: #fffaf7;
+  border-color: #b94050;
+  background: linear-gradient(145deg, #d96370, #b83f50);
+  box-shadow: 0 13px 32px rgba(177, 56, 73, .24);
+}
+
+.ink-button.primary:hover:not(:disabled),
+.ink-button.primary:focus-visible {
+  color: #fff;
+  border-color: #a83546;
+  background: linear-gradient(145deg, #e06d79, #aa3547);
+}
+
+.ink-button.story-continue {
+  color: #406d91;
+  background: transparent;
+  box-shadow: none;
+}
+
+.ink-button.story-continue:hover:not(:disabled) { color: var(--cinnabar); }
+
+/* 标题图自带左侧春庭留白，标题直接进入画面，不另做硬分栏。 */
+.title-screen {
+  display: grid;
+  grid-template-columns: minmax(19rem, 42%) 1fr;
+  color: var(--ink);
+  background: #f7e9e2;
+}
+
+.title-art {
+  background-position: center;
+  filter: saturate(1.04) contrast(1.01) brightness(1.02);
+}
+
+.title-art::after {
+  background:
+    linear-gradient(90deg, rgba(255,250,246,.96) 0%, rgba(255,250,246,.82) 22%, rgba(255,250,246,.18) 45%, transparent 66%),
+    linear-gradient(0deg, rgba(92,65,83,.1), transparent 45%);
+}
+
+.title-copy {
+  z-index: 2;
+  grid-column: 1;
+  padding: 8vh 2.2vw 7vh 5.3vw;
+  background: radial-gradient(circle at 30% 48%, rgba(255,255,255,.62), transparent 54%);
+}
+
+.title-copy::before {
+  right: auto;
+  left: 2.1vw;
+  top: 8vh;
+  color: rgba(192, 66, 85, .08);
+}
+
+.title-copy::after {
+  content: "";
+  width: min(18rem, 76%);
+  height: 3px;
+  margin: .2rem 0 1.25rem;
+  order: -1;
+  background: linear-gradient(90deg, var(--azurite) 0 20%, var(--cinnabar) 20% 40%, #d5aa65 40% 60%, var(--lilac) 60% 80%, var(--jade) 80%);
+  box-shadow: 0 1px rgba(255,255,255,.86);
+}
+
+.title-copy h1 {
+  color: #2e3040;
+  text-shadow: 0 2px rgba(255,255,255,.78);
+}
+
+.title-subtitle { color: #996334; }
+.identity-line { color: #545969; border-left-color: var(--cinnabar); }
+.rating-line { color: #a74d59; }
+.save-note { color: #767786; }
+
+/* 游戏框架像一层铺在 CG 上的轻绢，不再把画面装进暗木盒。 */
+.game-shell { background: #e8e5e7; }
+
+.topbar {
+  color: #343846;
+  border-bottom-color: rgba(64, 96, 135, .22);
+  background:
+    linear-gradient(90deg, rgba(255,253,249,.98), rgba(239,245,248,.95) 55%, rgba(255,241,238,.97));
+  box-shadow: 0 8px 30px rgba(65, 71, 91, .12);
+}
+
+.day-mark { border-right-color: rgba(64, 96, 135, .18); }
+.day-mark b { color: #7a5a2e; }
+.day-mark span,
+.hud-notice { color: #707383; }
+.hud-notice.urgent { color: #a93647; background: rgba(200,79,92,.08); }
+.top-actions #btn-mute { color: #6e7180; }
+
+.phase-stage,
+.dialogue-stage,
+.night-talk-stage,
+.scene-view { background: #e7e4e7; }
+
+#app .visual-stage::before { filter: saturate(1.01) contrast(1.01) brightness(1.03); }
+
+#app .visual-stage::after {
+  background:
+    linear-gradient(180deg, rgba(255,248,244,.02), rgba(77,72,91,.08)),
+    radial-gradient(120% 96% at 76% 36%, transparent 55%, rgba(70,64,89,.11) 100%);
+}
+
+/* 通用对话与账册面板。 */
+.decision-panel,
+.confirm-card,
+.gallery-book,
+.roster-sheet,
+.epilogue-copy,
+.fate-coda-copy {
+  color: var(--ink);
+  border-color: rgba(86, 92, 119, .22);
+  background:
+    linear-gradient(145deg, var(--silk-strong), rgba(245, 236, 236, .94));
+  box-shadow: var(--cg-shadow);
+  backdrop-filter: blur(16px) saturate(.9);
+}
+
+.decision-panel::before,
+.confirm-card::before {
+  content: "";
+  position: absolute;
+  inset: 7px;
+  pointer-events: none;
+  border: 1px solid rgba(200, 79, 92, .09);
+}
+
+.phase-header h2,
+.decision-panel h2,
+.confirm-card h2,
+.gallery-book h2,
+.roster-sheet h2 { color: #303342; }
+
+.phase-header > p:last-child,
+.phase-lead,
+.speaker-line,
+.consent-note,
+.want-line { color: #626574; }
+
+.morning-note,
+.day-speaker,
+.want-line {
+  border-left-color: rgba(200,79,92,.58);
+  color: #575b69;
+  background: rgba(217,99,112,.055);
+}
+
+.choice-button {
+  color: #343745;
+  border: 1px solid rgba(79, 91, 120, .18);
+  border-left: 4px solid rgba(78, 125, 155, .58);
+  background: rgba(255,253,249,.76);
+  box-shadow: 0 7px 22px rgba(66,68,89,.06);
+}
+
+.choice-button span { color: #676a79; }
+.choice-button:hover:not(:disabled):not([aria-disabled="true"]),
+.choice-button:focus-visible {
+  border-color: rgba(200,79,92,.5);
+  border-left-color: var(--cinnabar);
+  background: #fffaf7;
+  box-shadow: 0 10px 27px rgba(141,65,81,.1);
+}
+
+.story-progress { color: #9b6d3a; }
+.story-progress b { color: #4c5060; }
+
+/* 五扇院门像角色卡面，但仍属于同一个古代庭院。 */
+.visit-prompt {
+  color: #333746;
+  border-left-color: var(--cinnabar);
+  background: rgba(255,251,247,.9);
+  box-shadow: 0 14px 40px rgba(72,67,88,.13);
+  backdrop-filter: blur(14px);
+}
+
+.accord-panel { border-left-color: rgba(71,101,134,.24); }
+.accord-heading,
+.visit-prompt h2 { color: #353846; }
+
+.accord-seal {
+  color: #707383;
+  border-color: rgba(74,91,118,.2);
+  background: rgba(255,253,249,.72);
+}
+
+.accord-seal.complete { color: #8d4450; background: rgba(200,79,92,.07); }
+
+.door-card {
+  color: #303441;
+  border: 1px solid rgba(87, 92, 119, .27);
+  background: #fbf2ed;
+  box-shadow: 0 16px 42px rgba(71,65,87,.15);
+}
+
+.door-card::before { border-color: rgba(200,79,92,.16); }
+.door-card > span { color: #4d5264; background: rgba(255,250,246,.88); }
+.door-card img { filter: saturate(1.03) brightness(1.05) contrast(.99); }
+.door-card > div { color: #323542; background: linear-gradient(transparent, rgba(251,242,237,.97) 58%); }
+.door-card small,
+.door-knock,
+.door-forecast dd { color: #666978; }
+
+#app .dialogue-stage::after,
+#app .morning-stage::after { background: linear-gradient(90deg, rgba(255,249,245,.34), transparent 60%); }
+
+.night-talk-cg,
+.close-cg,
+.close-cg.closer,
+#app .scene-view > img { filter: saturate(1.02) brightness(1.03) contrast(1.01); }
+
+.close-cg::after,
+.morning-cg::after {
+  background:
+    linear-gradient(96deg, rgba(244,240,244,.94) 0%, rgba(244,240,244,.8) 30%, rgba(244,240,244,.08) 58%, rgba(63,59,82,.08) 100%),
+    radial-gradient(112% 88% at 72% 40%, transparent 52%, rgba(69,62,91,.13) 100%);
+}
+
+.close-cg.closer { filter: saturate(1.04) brightness(1.01) contrast(1.02); }
+.morning-cg { filter: saturate(1) brightness(1.08) contrast(1); }
+
+#app .night-talk-stage::after,
+#app .night-talk-result::after {
+  background:
+    linear-gradient(96deg, rgba(243,241,249,.96) 0%, rgba(243,241,249,.86) 42%, rgba(243,241,249,.1) 69%),
+    linear-gradient(0deg, rgba(72,62,98,.08), transparent 62%);
+}
+
+.night-talk-voice,
+.night-talk-continuity,
+.night-talk-memory,
+.route-branch-memory,
+.day-consequence,
+.ledger-status {
+  color: #515565;
+  border-color: rgba(75, 91, 120, .22);
+  background: rgba(255,253,250,.68);
+}
+
+.night-talk-voice b,
+.night-talk-continuity b,
+.route-branch-memory b,
+.day-consequence b { color: #3f4352; }
+
+.night-talk-voice p,
+.night-talk-memory p,
+.night-talk-continuity p,
+.route-branch-memory p { color: #626575; }
+
+.night-talk-prop {
+  color: #7b5a2e;
+  border-color: rgba(179, 130, 66, .35);
+  background: radial-gradient(circle, rgba(255,253,249,.98), rgba(226,214,221,.94) 72%);
+  box-shadow: 0 18px 46px rgba(74,65,91,.16), inset 0 0 0 8px rgba(255,255,255,.25);
+}
+
+/* 场景册与剧情结果让 CG 继续占主位。 */
+#app .scene-scrim {
+  background: linear-gradient(90deg, rgba(247,243,246,.93) 0%, rgba(247,243,246,.67) 34%, transparent 66%);
+}
+
+#app .scene-caption,
+#app .scene-view:is([data-scene-tier="public"], [data-scene-tier="ensemble"]) .scene-caption {
+  color: #303442;
+  border: 1px solid rgba(77, 91, 119, .21);
+  border-left: 4px solid var(--cinnabar);
+  background: rgba(255,251,248,.88);
+  box-shadow: 0 20px 52px rgba(67,63,84,.15);
+  backdrop-filter: blur(14px);
+}
+
+#app .scene-caption h2,
+#app .scene-caption > p:not(.eyebrow) { color: #343746; }
+#app .scene-meta { color: #6a6d7c; }
+#app .scene-meta span { border-color: rgba(75,91,119,.22); }
+
+#app .scene-view:is([data-scene-tier="public"], [data-scene-tier="ensemble"]) .scene-scrim {
+  background: linear-gradient(0deg, rgba(250,246,247,.72) 0%, rgba(250,246,247,0) 38%);
+}
+
+#app .scene-view:is([data-scene-tier="public"], [data-scene-tier="ensemble"]) .scene-caption {
+  background: linear-gradient(0deg, rgba(255,251,248,.96) 0%, rgba(255,251,248,.84) 52%, rgba(255,251,248,0) 100%);
+  backdrop-filter: none;
+}
+
+#app .scene-view:is([data-scene-tier="public"], [data-scene-tier="ensemble"]) > img {
+  filter: saturate(1.03) brightness(1.03) contrast(1.01);
+}
+
+/* 旧结构里最暗的三张群像，强制回到新 CG 自己的曝光。 */
+.scene-view[data-scene-id="inner_court_alliance"] > img,
+.scene-view[data-scene-id="inner_court_accord"] > img,
+.scene-view[data-scene-id="inner_court_afterglow"] > img {
+  filter: saturate(1.03) brightness(1.04) contrast(1.01);
+}
+
+.scene-view[data-scene-id="inner_court_alliance"] .scene-caption,
+.scene-view[data-scene-id="inner_court_afterglow"] .scene-caption {
+  color: var(--ink);
+  border-color: rgba(80,95,123,.22);
+  border-left-color: var(--cinnabar);
+  background: linear-gradient(145deg, rgba(255,253,249,.97), rgba(241,235,241,.92));
+}
+
+.shared-night-accord-overview,
+.shared-night-accord-entry,
+.alliance-tableau-overview,
+.alliance-tableau-entry,
+.shared-afterglow-tableau-overview,
+.shared-afterglow-tableau-entry {
+  color: #4a4e5e;
+  border-color: rgba(80,96,124,.2);
+  background: rgba(255,252,249,.68);
+}
+
+.shared-night-accord-overview header,
+.shared-night-accord-entry > header,
+.alliance-tableau-overview > header,
+.alliance-tableau-entry > header,
+.shared-afterglow-tableau-overview header,
+.shared-afterglow-tableau-entry > header { color: #767887; }
+
+.shared-night-accord-overview header b,
+.shared-night-accord-entry > header b,
+.alliance-tableau-overview > header b,
+.alliance-tableau-entry > header b,
+.shared-afterglow-tableau-overview header b,
+.shared-afterglow-tableau-entry > header b { color: #8e6040; }
+
+.shared-night-accord-overview > div > span,
+.shared-night-accord-ledger article,
+.alliance-tableau-overview,
+.alliance-tableau-entry,
+.alliance-tableau-path > span,
+.alliance-tableau-actions article,
+.shared-afterglow-tableau-overview > div > span,
+.shared-afterglow-tableau-actions article {
+  border-color: rgba(91,111,140,.18);
+  background: rgba(247,244,247,.68);
+}
+
+.shared-night-accord-overview b,
+.shared-night-accord-ledger b,
+.alliance-tableau-members b,
+.alliance-tableau-path b,
+.alliance-tableau-actions b,
+.shared-afterglow-tableau-overview b,
+.shared-afterglow-tableau-actions b { color: #805a42; }
+
+.shared-night-accord-overview em,
+.shared-night-accord-overview small,
+.shared-night-accord-ledger p,
+.shared-night-accord-conclusion,
+.alliance-tableau-overview > p,
+.alliance-tableau-entry > p,
+.alliance-tableau-members span,
+.alliance-tableau-path small,
+.alliance-tableau-path em,
+.alliance-tableau-actions p,
+.shared-afterglow-tableau-overview small,
+.shared-afterglow-tableau-overview em,
+.shared-afterglow-tableau-entry > p,
+.shared-afterglow-tableau-actions p { color: #666a79; }
+
+.alliance-tableau-members figure { background: rgba(231,226,232,.72); }
+.alliance-tableau-members img,
+.alliance-tableau-actions img { filter: saturate(1) brightness(1.03); }
+.alliance-tableau-members figcaption { background: linear-gradient(90deg, transparent, rgba(251,247,245,.94) 42%); }
+
+.shared-night-accord-ledger blockquote,
+.alliance-tableau-entry > blockquote,
+.shared-afterglow-tableau-entry > blockquote {
+  color: #4b655f;
+  border-left-color: rgba(63,143,131,.54);
+  background: rgba(63,143,131,.07);
+}
+
+.gallery-overlay,
+.confirm-overlay,
+.roster-overlay,
+.epilogue-overlay,
+.fate-coda-overlay {
+  background: rgba(224, 220, 226, .62);
+  backdrop-filter: blur(14px) saturate(.82);
+}
+
+.gallery-book > header,
+.roster-sheet > header,
+.epilogue-copy > header,
+.fate-coda-copy > header { border-color: rgba(79,94,122,.19); }
+
+.roster-sheet,
+.gallery-book { color: #383c4a; }
+
+/* 压力与成功只改变局部色，不改变整场曝光。 */
+.day-consequence.resolved {
+  border-color: rgba(63,143,131,.4);
+  background: rgba(63,143,131,.07);
+}
+
+.day-consequence.missed,
+.hud-notice.urgent {
+  border-color: rgba(200,79,92,.44);
+  background: rgba(200,79,92,.075);
+}
+
+.fast .scene-view > img { animation: none; filter: saturate(1.02) brightness(1.03); }
+
+/*
+ * 复合叙事页不能继续沿用旧主题的“黑底上叠半透明卡”结构。新插画本身已经
+ * 承担场景气氛；面板、旁听者和多人回应要成为彼此分开的纸面层，不能互相透图。
+ */
+#app :is(.opening-aftermath-stage, .day-aftermath-stage, .aftermath-stage, [class*="-aftermath-stage"]) {
+  background: #e8e4e7;
+}
+
+#app :is(
+  .day-aftermath-lead,
+  .aftermath-main,
+  .personal-afterglow-aftermath-close
+) {
+  filter: saturate(1.02) brightness(1.04) contrast(1.01);
+}
+
+#app .decision-panel :is(p:not(.eyebrow), li, dd, small, em) { color: #626574; }
+#app .decision-panel :is(h2, h3, h4, b, strong, dt) { color: #343746; }
+
+#app .decision-panel :is(
+  blockquote,
+  [class*="-origin"],
+  [class*="-echo"],
+  [class*="-memory"],
+  [class*="-stake"],
+  [class*="-ledger"],
+  [class*="-rule"],
+  [class*="-voice"],
+  [class*="-note"]
+) {
+  color: #515565;
+  border-color: rgba(75, 91, 120, .22);
+  background: rgba(255, 253, 250, .72);
+}
+
+#app .decision-panel :is(
+  [class*="-transcript"],
+  [class*="-archive"]
+) li,
+#app .supporting-context > summary,
+#app .supporting-context-pages > * {
+  color: #5f6271;
+  border-color: rgba(75, 91, 120, .18);
+  background: rgba(244, 240, 241, .82);
+}
+
+#app .decision-panel :is(
+  blockquote,
+  [class*="-origin"],
+  [class*="-echo"],
+  [class*="-memory"],
+  [class*="-stake"],
+  [class*="-ledger"],
+  [class*="-rule"],
+  [class*="-voice"],
+  [class*="-note"],
+  [class*="-transcript"] li,
+  [class*="-archive"] li
+) :is(p, small, em) { color: #626574; }
+
+#app .decision-panel :is(
+  blockquote,
+  [class*="-origin"],
+  [class*="-echo"],
+  [class*="-memory"],
+  [class*="-stake"],
+  [class*="-ledger"],
+  [class*="-rule"],
+  [class*="-voice"],
+  [class*="-note"],
+  [class*="-transcript"] li,
+  [class*="-archive"] li
+) :is(b, strong) { color: #3f4352; }
+
+#app .decision-panel :is(
+  blockquote,
+  [class*="-origin"],
+  [class*="-echo"],
+  [class*="-memory"],
+  [class*="-stake"],
+  [class*="-ledger"],
+  [class*="-rule"],
+  [class*="-voice"],
+  [class*="-note"],
+  [class*="-transcript"] li,
+  [class*="-archive"] li
+) > span { color: #91623f; }
+
+/* 多人卡不再悬浮在同一张人物图上：给卡组一张不透底的薄绢托纸。 */
+#app :is(
+  .opening-aftermath-cast,
+  .crisis-cast,
+  .crisis-aftermath-cast,
+  .pair-portraits,
+  .pair-aftermath-cast,
+  .jiaoer-aftermath-cast,
+  .invitation-aftermath-cast,
+  .council-resolution-cast,
+  .public-aftermath-cast,
+  .act-aftermath-cast,
+  .final-aftermath-cast,
+  .alliance-assembly-cast,
+  .alliance-result-cast,
+  .collapse-cast,
+  .collapse-result-cast,
+  .shared-result-cast,
+  .shared-dawn-result-cast
+) {
+  padding: .45rem;
+  border: 1px solid rgba(80, 95, 123, .18);
+  background: rgba(249, 246, 246, .94);
+  box-shadow: 0 18px 52px rgba(67, 63, 84, .14);
+  backdrop-filter: blur(12px) saturate(.9);
+}
+
+#app :is(
+  .opening-aftermath-cast,
+  .day-aftermath-reactions,
+  .crisis-cast,
+  .crisis-aftermath-cast,
+  .pair-portraits,
+  .pair-aftermath-cast,
+  .jiaoer-aftermath-cast,
+  .invitation-aftermath-cast,
+  .council-resolution-cast,
+  .public-aftermath-cast,
+  .act-aftermath-cast,
+  .final-aftermath-cast,
+  .alliance-assembly-cast,
+  .alliance-result-cast,
+  .collapse-cast,
+  .collapse-result-cast,
+  .shared-result-cast,
+  .shared-dawn-result-cast
+) figure {
+  border-color: rgba(80, 95, 123, .2);
+  background: #eee7e6;
+  filter: none;
+  transform: none;
+}
+
+#app :is(
+  .opening-aftermath-cast,
+  .day-aftermath-reactions,
+  .crisis-cast,
+  .crisis-aftermath-cast,
+  .pair-portraits,
+  .pair-aftermath-cast,
+  .jiaoer-aftermath-cast,
+  .invitation-aftermath-cast,
+  .council-resolution-cast,
+  .public-aftermath-cast,
+  .act-aftermath-cast,
+  .final-aftermath-cast,
+  .alliance-assembly-cast,
+  .alliance-result-cast,
+  .collapse-cast,
+  .collapse-result-cast,
+  .shared-result-cast,
+  .shared-dawn-result-cast
+) figure:not(.speaking):not(.is-responding) { opacity: .8; }
+
+#app :is(
+  .opening-aftermath-cast,
+  .day-aftermath-reactions,
+  .crisis-cast,
+  .crisis-aftermath-cast,
+  .pair-portraits,
+  .pair-aftermath-cast,
+  .jiaoer-aftermath-cast,
+  .invitation-aftermath-cast,
+  .council-resolution-cast,
+  .public-aftermath-cast,
+  .act-aftermath-cast,
+  .final-aftermath-cast,
+  .alliance-assembly-cast,
+  .alliance-result-cast,
+  .collapse-cast,
+  .collapse-result-cast,
+  .shared-result-cast,
+  .shared-dawn-result-cast
+) figure:is(.speaking, .is-responding) {
+  opacity: 1;
+  border-color: rgba(200, 79, 92, .54);
+  box-shadow: 0 10px 28px rgba(130, 66, 82, .14);
+}
+
+#app :is(
+  .opening-aftermath-cast,
+  .day-aftermath-reactions,
+  .crisis-cast,
+  .crisis-aftermath-cast,
+  .pair-portraits,
+  .pair-aftermath-cast,
+  .jiaoer-aftermath-cast,
+  .invitation-aftermath-cast,
+  .council-resolution-cast,
+  .public-aftermath-cast,
+  .act-aftermath-cast,
+  .final-aftermath-cast,
+  .alliance-assembly-cast,
+  .alliance-result-cast,
+  .collapse-cast,
+  .collapse-result-cast,
+  .shared-result-cast,
+  .shared-dawn-result-cast
+) img { filter: saturate(1.02) brightness(1.04) contrast(1.01); }
+
+#app :is(
+  .opening-aftermath-cast,
+  .day-aftermath-reactions,
+  .crisis-cast,
+  .crisis-aftermath-cast,
+  .pair-portraits,
+  .pair-aftermath-cast,
+  .jiaoer-aftermath-cast,
+  .invitation-aftermath-cast,
+  .council-resolution-cast,
+  .public-aftermath-cast,
+  .act-aftermath-cast,
+  .final-aftermath-cast,
+  .alliance-assembly-cast,
+  .alliance-result-cast,
+  .collapse-cast,
+  .collapse-result-cast,
+  .shared-result-cast,
+  .shared-dawn-result-cast
+) figcaption {
+  color: #444856;
+  background: linear-gradient(transparent, rgba(252, 248, 246, .98) 48%);
+}
+
+#app :is(
+  .opening-aftermath-cast,
+  .day-aftermath-reactions,
+  .crisis-cast,
+  .crisis-aftermath-cast,
+  .pair-portraits,
+  .pair-aftermath-cast,
+  .jiaoer-aftermath-cast,
+  .invitation-aftermath-cast,
+  .council-resolution-cast,
+  .public-aftermath-cast,
+  .act-aftermath-cast,
+  .final-aftermath-cast,
+  .alliance-assembly-cast,
+  .alliance-result-cast,
+  .collapse-cast,
+  .collapse-result-cast,
+  .shared-result-cast,
+  .shared-dawn-result-cast
+) figcaption :is(b, strong) { color: #353846; }
+
+#app :is(
+  .opening-aftermath-cast,
+  .day-aftermath-reactions,
+  .crisis-cast,
+  .crisis-aftermath-cast,
+  .pair-portraits,
+  .pair-aftermath-cast,
+  .jiaoer-aftermath-cast,
+  .invitation-aftermath-cast,
+  .council-resolution-cast,
+  .public-aftermath-cast,
+  .act-aftermath-cast,
+  .final-aftermath-cast,
+  .alliance-assembly-cast,
+  .alliance-result-cast,
+  .collapse-cast,
+  .collapse-result-cast,
+  .shared-result-cast,
+  .shared-dawn-result-cast
+) figcaption :is(span, small, em, p) { color: #666978; }
+
+.day-aftermath-reactions figure:only-child {
+  width: min(250px, 100%);
+  height: min(520px, 72%);
+  align-self: center;
+}
+
+.aftermath-observer {
+  padding: .38rem;
+  color: #3f4352;
+  border: 1px solid rgba(80, 95, 123, .2);
+  background: rgba(252, 248, 246, .94);
+  box-shadow: 0 14px 38px rgba(67, 63, 84, .14);
+  opacity: 1;
+}
+
+.aftermath-observer img {
+  mask-image: none;
+  filter: saturate(1.02) brightness(1.04) contrast(1.01);
+}
+
+.aftermath-observer figcaption span { color: #91623f; }
+.aftermath-observer figcaption b { color: #353846; }
+
+/* 单人抉择按内容收高，避免短段落被一整块空白纸面包到屏幕底。 */
+.dialogue-panel,
+.night-talk-panel {
+  top: 50%;
+  bottom: auto;
+  max-height: 88%;
+  overflow-y: auto;
+  transform: translateY(-50%);
+}
+
+/* 结局与后日谈也必须延续亮色叙事，不在最后一屏突然回到旧黑金主题。 */
+.ending-view {
+  color: var(--ink);
+  background: #eee7e6;
+}
+
+.ending-art,
+.ending-view[data-ending="exclusive"] .ending-art,
+.ending-view[data-ending="intrigue"] .ending-art,
+.ending-view[data-ending="unstable"] .ending-art {
+  filter: saturate(1.01) brightness(1.03) contrast(1.01);
+  background-blend-mode: screen;
+}
+
+.ending-copy {
+  border-left: 1px solid rgba(80, 95, 123, .16);
+  background:
+    radial-gradient(circle at 18% 12%, rgba(218, 113, 126, .08), transparent 35%),
+    linear-gradient(145deg, rgba(255, 253, 249, .985), rgba(240, 237, 243, .97));
+  box-shadow: -20px 0 54px rgba(67, 63, 84, .12);
+}
+
+.ending-copy h1 { color: #303342; }
+.ending-copy h1:focus-visible {
+  outline: 2px solid rgba(200, 79, 92, .54);
+  outline-offset: .3rem;
+}
+.ending-tag { color: #9a6834; }
+.ending-copy > p:not(.eyebrow):not(.ending-tag):not(.ending-note) { color: #5f6372; }
+.ending-note { color: #737584; }
+
+/* 长结局总账允许读者翻动正文，但结果动作始终像书页脚签一样留在视口内。 */
+.ending-copy > .button-row {
+  position: sticky;
+  z-index: 4;
+  bottom: -4vh;
+  margin: auto -1.2vw -4vh;
+  padding: .7rem 1.2vw .8rem;
+  border-top: 1px solid rgba(80, 95, 123, .16);
+  background: linear-gradient(0deg, rgba(250,248,247,.995), rgba(250,248,247,.96));
+  box-shadow: 0 -12px 28px rgba(67,63,84,.08);
+}
+
+.ending-copy > .button-row .ink-button {
+  flex: 1 1 7.5rem;
+  min-width: 0;
+  padding: .58rem .7rem;
+  font-size: .7rem;
+}
+
+.ending-ledger span,
+.ending-habits,
+.ending-habits article,
+.household-ending span {
+  color: #626574;
+  border-color: rgba(80, 95, 123, .18);
+  background: rgba(255, 253, 250, .64);
+}
+
+.ending-ledger b,
+.ending-habits > header b,
+.ending-habits article b,
+.household-ending b { color: #454958; }
+
+.ending-habits > header,
+.ending-habits article span,
+.ending-habits article small,
+.household-ending small { color: #737584; }
+
+.epilogue-book,
+.fate-coda-book {
+  color: var(--ink);
+  border-color: rgba(80, 95, 123, .24);
+  background: #eee7e8;
+  box-shadow: 0 32px 90px rgba(67, 63, 84, .28);
+}
+
+.epilogue-art { background: #e8e2e3; }
+.epilogue-art::after { background: linear-gradient(90deg, transparent 62%, rgba(244, 239, 240, .9)); }
+.epilogue-art img { filter: saturate(1.02) brightness(1.03) contrast(1.01); }
+.epilogue-art > span { color: rgba(154, 104, 52, .22); }
+
+.epilogue-copy h2,
+.epilogue-body,
+.epilogue-progress,
+.epilogue-relations b,
+.epilogue-route-note,
+.epilogue-habit b,
+.epilogue-habit p,
+.epilogue-night-conversations header b,
+.epilogue-night-conversations li b,
+.epilogue-night-conversations li p { color: #4e5261; }
+
+.epilogue-relations span,
+.epilogue-route-note,
+.epilogue-habit,
+.epilogue-night-conversations,
+.epilogue-night-conversations li {
+  color: #666978;
+  border-color: rgba(80, 95, 123, .18);
+  background: rgba(255, 253, 250, .64);
+}
+
+.fate-coda-art { filter: saturate(1.01) brightness(1.03) contrast(1.01); }
+.fate-coda-art::after {
+  background: linear-gradient(90deg, rgba(242, 241, 246, .98) 0%, rgba(242, 241, 246, .9) 31%, rgba(242, 241, 246, .2) 55%, transparent 76%);
+}
+
+.fate-coda-copy {
+  color: #4e5261;
+  background: linear-gradient(90deg, rgba(248, 250, 252, .99), rgba(248, 250, 252, .9) 72%, transparent);
+}
+
+.fate-coda-copy > header p,
+.fate-coda-copy > header .eyebrow,
+.fate-coda-progress i,
+.fate-coda-variants > span { color: #6d7180; }
+
+.fate-coda-variants,
+.fate-coda-variants button {
+  color: #555968;
+  border-color: rgba(80, 95, 123, .2);
+  background: rgba(255, 253, 250, .7);
+}
+
+.fate-coda-variants button.current {
+  color: #8d4450;
+  border-color: rgba(200, 79, 92, .48);
+  background: rgba(200, 79, 92, .07);
+}
+
+.fate-coda-copy h2 { color: #303442; }
+.fate-coda-body,
+.fate-coda-decision > p,
+.fate-coda-result p,
+.fate-coda-combination > p { color: #5f6372; }
+
+.fate-coda-ledger-section,
+.fate-coda-ledger-section article,
+.fate-coda-result {
+  color: #555968;
+  border-color: rgba(80, 95, 123, .2);
+  background: rgba(255, 253, 250, .7);
+}
+
+.fate-coda-ledger-section > header span,
+.fate-coda-ledger-section article > span,
+.fate-coda-result span,
+.fate-coda-combination > span { color: #737786; }
+
+.fate-coda-ledger-section > header h3,
+.fate-coda-ledger-section article > b,
+.fate-coda-result b,
+.fate-coda-combination > b { color: #454958; }
+
+.fate-coda-ledger-section article > p { color: #626574; }
+
+.fate-coda-decision .choice-button {
+  color: #343745;
+  border-color: rgba(79, 91, 120, .2);
+  background: rgba(255, 253, 249, .82);
+}
+
+.fate-coda-decision .choice-button:hover,
+.fate-coda-decision .choice-button:focus-visible {
+  border-color: rgba(200, 79, 92, .5);
+  background: #fffaf7;
+}
+
+.fate-coda-copy > footer > span { color: #707483; }
+
+@media (max-width: 900px) {
+  .age-gate {
+    background:
+      linear-gradient(0deg, rgba(255,250,245,.98) 0%, rgba(255,250,245,.87) 56%, rgba(255,250,245,.22) 100%),
+      url('../assets/bg/compound_new_guofeng.webp') center / cover;
+  }
+
+  .title-art {
+    inset: 0 0 auto;
+    height: 52%;
+    background-color: #f8e8e2;
+    background-position: 63% top;
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+  }
+
+  .title-art::after {
+    background: linear-gradient(0deg, #f7e8e2 0%, rgba(247,232,226,.86) 36%, rgba(247,232,226,.04) 72%);
+  }
+
+  .title-copy {
+    justify-content: flex-start;
+    padding: 42vh 1.2rem 1.25rem;
+    background: linear-gradient(0deg, rgba(247,232,226,.99), rgba(247,232,226,.8) 68%, transparent);
+  }
+
+  .title-copy h1 {
+    white-space: nowrap;
+    font-size: clamp(2rem, 8.7vw, 2.45rem);
+  }
+
+  .title-copy::after { width: 13rem; margin-bottom: .65rem; }
+  .visit-prompt { background: rgba(255,251,248,.94); }
+
+  /* 窄屏只保留一张主图；重复的人物卡会把画面和正文同时吃掉。 */
+  .opening-aftermath-cast,
+  .day-aftermath-reactions,
+  .aftermath-observer { display: none; }
+
+  .opening-aftermath-panel,
+  .aftermath-panel { max-height: 76%; overflow-y: auto; }
+
+  .dialogue-panel,
+  .night-talk-panel {
+    top: auto;
+    bottom: 2%;
+    max-height: 76%;
+    transform: none;
+  }
+
+  #app :is(
+    .crisis-cast,
+    .crisis-aftermath-cast,
+    .pair-portraits,
+    .pair-aftermath-cast,
+    .jiaoer-aftermath-cast,
+    .invitation-aftermath-cast,
+    .council-resolution-cast,
+    .public-aftermath-cast,
+    .act-aftermath-cast,
+    .final-aftermath-cast,
+    .alliance-assembly-cast,
+    .alliance-result-cast,
+    .collapse-cast,
+    .collapse-result-cast,
+    .shared-result-cast,
+    .shared-dawn-result-cast
+  ) {
+    top: 1.5%;
+    bottom: auto;
+    height: 22%;
+    padding: .2rem;
+  }
+
+  #app :is(
+    .crisis-cast,
+    .crisis-aftermath-cast,
+    .pair-portraits,
+    .pair-aftermath-cast,
+    .jiaoer-aftermath-cast,
+    .invitation-aftermath-cast,
+    .council-resolution-cast,
+    .public-aftermath-cast,
+    .act-aftermath-cast,
+    .final-aftermath-cast,
+    .alliance-assembly-cast,
+    .alliance-result-cast,
+    .collapse-cast,
+    .collapse-result-cast,
+    .shared-result-cast,
+    .shared-dawn-result-cast
+  ) figcaption :is(p, small, em) { display: none; }
+
+  #app .scene-scrim {
+    background: linear-gradient(0deg, rgba(246,242,246,.96), rgba(246,242,246,.16) 74%);
+  }
+
+  .close-cg::after,
+  .morning-cg::after {
+    background: linear-gradient(0deg, rgba(243,240,245,.98) 0%, rgba(243,240,245,.83) 47%, rgba(243,240,245,.05) 78%);
+  }
+
+  .fate-coda-art::after {
+    background: linear-gradient(0deg, rgba(240,244,248,.99) 0%, rgba(240,244,248,.9) 62%, rgba(240,244,248,.06) 91%);
+  }
+
+  .fate-coda-copy {
+    background: linear-gradient(0deg, rgba(248,250,252,.995), rgba(248,250,252,.91) 78%, transparent);
+  }
+
+  .ending-art { opacity: .76; }
+  .ending-copy {
+    background: linear-gradient(0deg, rgba(250, 247, 245, .995) 0%, rgba(250, 247, 245, .95) 64%, rgba(250, 247, 245, .88) 100%);
+  }
+
+  .epilogue-art::after { background: linear-gradient(0deg, rgba(244, 239, 240, .94), transparent 62%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .title-art,
+  .door-card img,
+  .night-talk-cg,
+  .close-portrait,
+  .scene-view > img {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* 2026-09 画面重构：把标题做成一张可读的“人物权力总账”，而不是文案压在 CG 上。 */
+.title-folio {
+  position: absolute;
+  z-index: 3;
+  top: 4.5vh;
+  left: 2.2vw;
+  display: grid;
+  gap: .3rem;
+  padding-left: .75rem;
+  border-left: 2px solid rgba(200, 79, 92, .54);
+  color: #3d4251;
+  writing-mode: vertical-rl;
+}
+
+.title-folio b {
+  font-size: .78rem;
+  font-weight: 600;
+  letter-spacing: .24em;
+}
+
+.title-folio span {
+  color: #8c6670;
+  font: .62rem var(--sans);
+  letter-spacing: .14em;
+}
+
+.title-cast {
+  position: absolute;
+  z-index: 4;
+  right: 2.2vw;
+  bottom: 2.4vh;
+  width: min(50rem, 55vw);
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 1px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid rgba(255,255,255,.62);
+  background: rgba(76, 78, 99, .12);
+  box-shadow: 0 16px 40px rgba(65, 56, 74, .16);
+  backdrop-filter: blur(18px) saturate(.86);
+}
+
+.title-cast li {
+  position: relative;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  column-gap: .65rem;
+  padding: .72rem .8rem .66rem;
+  color: #353947;
+  background: rgba(255, 251, 247, .78);
+}
+
+.title-cast li::after {
+  content: "";
+  position: absolute;
+  inset: auto .8rem 0;
+  height: 2px;
+  background: var(--cast-color, var(--cinnabar));
+}
+
+.title-cast li:nth-child(1) { --cast-color: var(--azurite); }
+.title-cast li:nth-child(2) { --cast-color: var(--cinnabar); }
+.title-cast li:nth-child(3) { --cast-color: #d5aa65; }
+.title-cast li:nth-child(4) { --cast-color: var(--lilac); }
+.title-cast li:nth-child(5) { --cast-color: var(--jade); }
+.title-cast i {
+  grid-row: 1 / 3;
+  align-self: center;
+  color: var(--cast-color);
+  font: 500 .62rem/1 var(--sans);
+}
+.title-cast span { font-size: .84rem; letter-spacing: .12em; }
+.title-cast b { color: #777987; font: 500 .6rem/1.4 var(--sans); letter-spacing: .1em; }
+
+/* 开局把抉择变成一张靠左的案件封套，留出右侧五人的完整表情和器物。 */
+.opening-scene::after {
+  background:
+    linear-gradient(90deg, rgba(250,246,244,.96) 0%, rgba(250,246,244,.76) 38%, rgba(250,246,244,.08) 64%, transparent 78%),
+    linear-gradient(0deg, rgba(69,61,79,.12), transparent 58%);
+}
+
+.opening-panel {
+  left: 4vw;
+  top: 50%;
+  bottom: auto;
+  width: min(38rem, 44vw);
+  display: grid;
+  grid-template-columns: 4.2rem minmax(0, 1fr);
+  column-gap: 1.15rem;
+  padding: 1.5rem 1.5rem 1.35rem 1.2rem;
+  transform: translateY(-50%);
+}
+
+.opening-panel::before {
+  inset: 8px;
+  border-color: rgba(53,95,152,.1);
+}
+
+.opening-panel > :not(.opening-case) { grid-column: 2; }
+.opening-case {
+  grid-column: 1;
+  grid-row: 1 / 4;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-right: 1rem;
+  border-right: 1px solid rgba(76, 92, 119, .18);
+}
+.opening-case span { color: #aa5260; font: 700 .52rem/1 var(--sans); letter-spacing: .18em; }
+.opening-case b { margin: .35rem 0; color: #343846; font: 300 2.8rem/1 var(--serif); }
+.opening-case i { color: #8b6a47; font: 500 .65rem/1.6 var(--sans); letter-spacing: .12em; writing-mode: vertical-rl; }
+.opening-panel .phase-header h2 { font-size: clamp(1.85rem, 2.55vw, 2.8rem); }
+.opening-panel .speaker-line {
+  margin: .9rem 0 1rem;
+  padding: .65rem .75rem;
+  border-left: 2px solid rgba(200,79,92,.48);
+}
+.opening-panel .choice-grid { gap: .55rem; }
+.opening-panel .choice-button { min-height: 4.2rem; }
+
+@media (max-width: 900px) {
+  .title-folio { display: none; }
+  .title-cast {
+    top: 35.5%;
+    right: 1rem;
+    bottom: auto;
+    left: 1rem;
+    width: auto;
+    box-shadow: 0 10px 30px rgba(65,56,74,.12);
+  }
+  .title-cast li {
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-items: center;
+    gap: .18rem;
+    padding: .48rem .2rem .45rem;
+  }
+  .title-cast i { display: none; }
+  .title-cast span { font-size: .72rem; letter-spacing: .08em; }
+  .title-cast b { font-size: .48rem; }
+  .title-copy { padding-top: 46vh; }
+
+  .opening-scene::after {
+    background: linear-gradient(0deg, rgba(247,243,245,.99) 0%, rgba(247,243,245,.92) 42%, rgba(247,243,245,.04) 76%);
+  }
+  .opening-panel {
+    left: 3%;
+    right: 3%;
+    top: auto;
+    bottom: 2%;
+    width: auto;
+    max-height: 74%;
+    grid-template-columns: 1fr;
+    gap: 0;
+    padding: 1rem;
+    transform: none;
+  }
+  .opening-panel > :not(.opening-case) { grid-column: 1; }
+  .opening-case {
+    grid-column: 1;
+    grid-row: auto;
+    min-height: 0;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: .4rem;
+    margin-bottom: .35rem;
+    padding: 0 0 .4rem;
+    border-right: 0;
+    border-bottom: 1px solid rgba(76,92,119,.16);
+  }
+  .opening-case b { margin: 0; font-size: 1.2rem; }
+  .opening-case i { writing-mode: horizontal-tb; }
+  .opening-panel .phase-header h2 { font-size: clamp(1.65rem, 7vw, 2rem); }
+  .opening-panel .phase-header > p:last-child { line-height: 1.65; }
+  .opening-panel .speaker-line { margin: .55rem 0 .7rem; padding: .45rem .55rem; }
+}
+
+@media (max-width: 460px) {
+  .title-copy h1 { font-size: 1.9rem; }
+  .title-subtitle { margin-bottom: .7rem; font-size: .88rem; }
+  .identity-line { margin-bottom: .8rem; font-size: .78rem; line-height: 1.65; }
+  .title-actions { gap: .45rem; margin-bottom: .65rem; }
+  .title-actions .ink-button { flex: 1 1 calc(50% - .45rem); min-width: 0; padding: .65rem .7rem; }
+  .title-actions #btn-gallery { flex-basis: 100%; }
+  .rating-line, .save-note { margin-block: .3rem; font-size: .62rem; }
+  .opening-panel { max-height: 78%; }
+  .opening-panel .choice-grid { grid-template-columns: 1fr; gap: .4rem; }
+  .opening-panel .choice-button { min-height: 3.6rem; }
+}
+
+/* 2026-09 第二轮整体重设：正戏不再是一组等重的审计卡，而是一桌、一物、一人。 */
+:root {
+  --scene-ink: #171d29;
+  --scene-paper: #f2eadc;
+  --scene-red: #9f2630;
+  --scene-gold: #c5a264;
+}
+
+/* 标题页不再套用第二轮的深色覆盖：那组规则是为已撤回的暗色群像配的，会把原版明亮封面压暗。
+ * 标题沿用上方 08-25 的亮底规则；下方白日、路线与夜谈的重设保留。 */
+
+/* 白日：一张掀起的宣纸靠左，院落与人物行动留出大面积呼吸。 */
+#app .hub-stage:not(.evening)::after {
+  background:
+    linear-gradient(90deg, rgba(20,28,36,.24) 0%, rgba(21,28,36,.04) 58%),
+    linear-gradient(0deg, rgba(19,27,34,.24), transparent 52%);
+}
+#app .day-panel {
+  left: clamp(1.2rem,5vw,5.5rem);
+  right: auto;
+  top: 50%;
+  bottom: auto;
+  width: min(42rem,48vw);
+  max-height: 88%;
+  padding: clamp(1.3rem,2.3vw,2.4rem) clamp(1.2rem,2.5vw,2.7rem) clamp(1.2rem,2.2vw,2.2rem) 6.1rem;
+  transform: translateY(-50%) rotate(-.22deg);
+  border: 0;
+  border-radius: 0 1.4rem 1.4rem 0;
+  background:
+    linear-gradient(96deg, rgba(229,217,197,.98), rgba(250,244,232,.94) 78%, rgba(248,241,228,.88));
+  box-shadow: 20px 28px 70px rgba(20,26,32,.3), inset 1px 0 rgba(255,255,255,.9);
+  backdrop-filter: blur(7px);
+}
+#app .day-panel::before { inset: .65rem; border: 0; border-left: 1px solid rgba(144,73,54,.22); }
+.day-scene-mark {
+  position: absolute;
+  left: 1rem;
+  top: 1.35rem;
+  bottom: 1.35rem;
+  width: 3.8rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: .35rem;
+  padding-right: .8rem;
+  border-right: 1px solid rgba(91,79,64,.2);
+}
+.day-scene-mark span { color: #a0443e; font: 700 .55rem var(--sans); letter-spacing: .24em; }
+.day-scene-mark b { color: #252a31; font: 300 2.5rem/1 var(--serif); }
+.day-scene-mark i { color: #72604c; font: 500 .66rem/1.5 var(--sans); letter-spacing: .14em; writing-mode: vertical-rl; }
+.day-panel .phase-header .eyebrow { color: #9e413d; letter-spacing: .19em; }
+.day-panel .phase-header h2 { color: #222833; font-size: clamp(2rem,3vw,3.25rem); line-height: 1.04; }
+.day-panel .phase-header > p:last-child { color: #574f45; max-width: 34rem; font-size: .95rem; line-height: 1.78; }
+.day-actions { counter-reset: day-choice; gap: .6rem; }
+.day-actions .choice-button { counter-increment: day-choice; position: relative; padding-left: 3.25rem; border: 0; border-bottom: 1px solid rgba(91,73,55,.2); border-radius: .2rem; background: rgba(255,252,244,.6); box-shadow: none; }
+.day-actions .choice-button::before { content: counter(day-choice, cjk-ideographic); position:absolute; left:.9rem; top:50%; translate:0 -50%; color:#a02d35; font: 500 1.2rem var(--serif); }
+.day-actions .choice-button:hover:not(:disabled) { transform: translateX(.35rem); background: #fffaf0; box-shadow: -4px 0 #9f2630; }
+
+/* 人物路线与普通夜晚：近景占右，左侧窄绢只承载她此刻的一句话。 */
+#app :is(.dialogue-stage, .night-talk-stage)::after {
+  background:
+    linear-gradient(90deg, rgba(13,18,28,.96) 0%, rgba(19,24,36,.91) 38%, rgba(18,23,34,.28) 61%, rgba(12,17,26,.08) 100%),
+    linear-gradient(0deg, rgba(7,12,21,.45), transparent 62%);
+}
+#app :is(.dialogue-stage, .night-talk-stage) .close-cg { filter: saturate(.92) brightness(.86) contrast(1.08); }
+#app :is(.dialogue-panel, .night-talk-panel) {
+  left: clamp(1.15rem,4.5vw,5rem);
+  right: auto;
+  top: 50%;
+  bottom: auto;
+  width: min(35rem,41vw);
+  max-height: 88%;
+  padding: 2rem 2rem 1.7rem 4.4rem;
+  transform: translateY(-50%);
+  color: #ede1cf;
+  border: 0;
+  border-left: 1px solid rgba(198,162,99,.56);
+  border-radius: 0;
+  background: linear-gradient(90deg, rgba(16,21,31,.93), rgba(24,29,41,.78));
+  box-shadow: 30px 0 70px rgba(5,8,14,.22);
+  backdrop-filter: blur(10px);
+}
+#app :is(.dialogue-panel, .night-talk-panel)::before { display: none; }
+#app :is(.dialogue-panel, .night-talk-panel) .phase-header .eyebrow { color: #c7a46c; letter-spacing: .2em; }
+#app :is(.dialogue-panel, .night-talk-panel) .phase-header h2 { color: #fff2da; font-size: clamp(2.4rem,4vw,4.5rem); line-height: .96; }
+#app :is(.dialogue-panel, .night-talk-panel) .phase-header > p:last-child { color: #e1d2bd; font-size: 1rem; line-height: 1.8; }
+.character-seal { position:absolute; left:.8rem; top:2rem; display:grid; justify-items:center; gap:.5rem; }
+.character-seal i { display:grid; place-items:center; width:2.25rem; aspect-ratio:1; color:#ffe8bd; border:1px solid rgba(202,161,95,.65); border-radius:50%; font:500 1rem var(--serif); }
+.character-seal span { color:rgba(231,211,178,.62); font:600 .55rem var(--sans); letter-spacing:.16em; writing-mode:vertical-rl; }
+#app .dialogue-panel p.want-line { margin:.85rem 0 1rem; padding:.8rem 0 .8rem 1rem; color:#d8c8b2; border:0; border-left:2px solid #8f2832; background:rgba(255,255,255,.035); }
+#app .dialogue-panel .want-line > b { display:block; margin-bottom:.3rem; color:#c9a568; font:600 .58rem var(--sans); letter-spacing:.14em; }
+#app .dialogue-panel .want-line span { color:#bdad97; }
+#app .dialogue-panel .want-line small { color:rgba(218,204,184,.64); }
+#app :is(.dialogue-panel, .night-talk-panel) :is(.choice-stack,.choice-grid) { counter-reset: night-choice; gap:.55rem; }
+#app :is(.dialogue-panel, .night-talk-panel) .choice-button { counter-increment:night-choice; position:relative; min-height:3.6rem; padding:.7rem .9rem .7rem 3.2rem; color:#f1e5d2; border:1px solid rgba(209,178,125,.2); border-left:0; background:rgba(239,223,194,.055); box-shadow:none; }
+#app :is(.dialogue-panel, .night-talk-panel) .choice-button::before { content:counter(night-choice, cjk-ideographic); position:absolute; left:1rem; top:50%; translate:0 -50%; color:#c5a264; font:500 1rem var(--serif); }
+#app :is(.dialogue-panel, .night-talk-panel) .choice-button span { color:rgba(224,208,184,.62); }
+#app :is(.dialogue-panel, .night-talk-panel) .choice-button:hover:not(:disabled) { color:#fff8eb; border-color:rgba(184,54,65,.68); background:rgba(151,35,45,.42); transform:translateX(.3rem); }
+#app :is(.dialogue-panel, .night-talk-panel) .consent-note { color:rgba(231,215,192,.65); }
+
+@media (max-width: 900px) {
+  #app .day-panel { left:3%; right:3%; top:auto; bottom:2%; width:auto; max-height:77%; padding:1rem 1rem 1rem 4.4rem; transform:none; }
+  .day-scene-mark { left:.65rem; top:1rem; bottom:1rem; width:3rem; }
+  .day-scene-mark b { font-size:1.8rem; }
+  #app :is(.dialogue-panel, .night-talk-panel) { left:3%; right:3%; top:auto; bottom:2%; width:auto; max-height:74%; padding:1.1rem 1rem 1rem 3.5rem; transform:none; background:linear-gradient(90deg, rgba(16,21,31,.97),rgba(24,29,41,.92)); }
+  .character-seal { left:.55rem; top:1.2rem; }
+}
+
+/* 第二轮文字可读性复核：纹理退到空气层，必要事实不能靠低对比度降级。 */
+#app::after {
+  opacity: .08;
+  mix-blend-mode: soft-light;
+  background-image: linear-gradient(115deg, rgba(255,255,255,.05), transparent 42%, rgba(111,58,68,.035));
+  background-size: auto;
+}
+#app :is(.dialogue-stage, .night-talk-stage)::after {
+  background:
+    linear-gradient(90deg, rgba(16,22,32,.88) 0%, rgba(19,26,37,.72) 39%, rgba(19,25,36,.16) 61%, transparent 100%),
+    linear-gradient(0deg, rgba(21,27,38,.14), transparent 58%);
+}
+#app :is(.dialogue-panel, .night-talk-panel) {
+  background: linear-gradient(100deg, rgba(25,33,45,.96), rgba(32,40,53,.91));
+}
+#app :is(.dialogue-panel, .night-talk-panel) .phase-header > p:last-child {
+  color: #f0e3d0;
+  font-size: 1.04rem;
+  line-height: 1.82;
+}
+#app .dialogue-panel p.want-line {
+  color: #eadbc5;
+  background: #303a49;
+  font-size: .9rem;
+  line-height: 1.68;
+}
+#app .dialogue-panel .want-line > b { color: #e2bd78; font-size: .75rem; }
+#app .dialogue-panel .want-line span { color: #dbc8ab; font-size: .86rem; }
+#app .dialogue-panel .want-line small { color: #cfc0aa; font-size: .76rem; line-height: 1.65; }
+#app :is(.dialogue-panel, .night-talk-panel) .choice-button b {
+  color: #fff1da;
+  font-size: .93rem;
+  line-height: 1.38;
+}
+#app :is(.dialogue-panel, .night-talk-panel) .choice-button span {
+  color: #d7c5a9;
+  font-size: .76rem;
+  line-height: 1.5;
+}
+#app :is(.dialogue-panel, .night-talk-panel) .choice-button {
+  border-color: rgba(224,193,140,.3);
+  background: rgba(249,231,201,.085);
+}
+#app :is(.dialogue-panel, .night-talk-panel) .choice-button:focus-visible {
+  outline: 2px solid #e2bd78;
+  outline-offset: 3px;
+}
+.ending-old-account {
+  margin: .8rem 0 1rem;
+  color: #5f5860;
+  border-top: 1px solid rgba(114,82,72,.18);
+  border-bottom: 1px solid rgba(114,82,72,.18);
+}
+.ending-old-account summary {
+  padding: .65rem 0;
+  color: #8d514a;
+  cursor: pointer;
+  font: 600 .76rem var(--sans);
+  letter-spacing: .08em;
+}
+.ending-old-account p { margin: 0 0 .8rem; }
+@media (max-width: 900px) {
+  #app :is(.dialogue-panel, .night-talk-panel) { max-height: 82%; }
+}
+@media (max-width: 460px) {
+  #app :is(.dialogue-panel, .night-talk-panel) { padding-top: .9rem; padding-bottom: .8rem; }
+  #app :is(.dialogue-panel, .night-talk-panel) .phase-header h2 { font-size: 2.1rem; }
+  #app :is(.dialogue-panel, .night-talk-panel) .phase-header > p:last-child { font-size: .92rem; line-height: 1.66; }
+  #app .dialogue-panel p.want-line { margin: .55rem 0 .65rem; padding-block: .5rem; font-size: .84rem; }
+  #app .dialogue-panel .want-line span { font-size: .79rem; }
+  #app .dialogue-panel .want-line small { font-size: .75rem; }
+  #app .dialogue-panel .choice-stack { grid-template-columns: 1fr; gap: .4rem; }
+  #app :is(.dialogue-panel, .night-talk-panel) .choice-button { min-height: 3.15rem; padding-block: .55rem; }
+}