/* ===========================================================================
 * themes.css — 章节主题
 * ---------------------------------------------------------------------------
 * body 上挂 .th-<name>，整套配色/字体/氛围层随之切换。
 * 每一幕换一次，玩家的眼睛会先于剧情知道「场景变了」。
 * ========================================================================= */

:root {
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-display: "PingFang SC", "Songti SC", "Noto Serif SC", serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --radius: 11px;
  --bubble-radius: 15px;
  --font-scale: 1;

  /* 默认（标题界面）：夜蓝 */
  --bg: #0b0d12;
  --fg: #c3c8d4;
  --fg-bright: #eef1f7;
  --fg-dim: #8b93a5;
  --fg-faint: #5c6377;
  --accent: #6ea8d8;
  --accent-glow: rgba(110, 168, 216, .4);
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .16);
  --panel: rgba(255, 255, 255, .03);
  --panel-solid: rgba(13, 16, 22, .92);
  --hover: rgba(255, 255, 255, .05);
  --choice-bg: rgba(255, 255, 255, .025);
  --choice-bg-hover: rgba(110, 168, 216, .09);
  --bubble-them: rgba(255, 255, 255, .05);
  --bubble-them-fg: #d5d9e3;
  --bubble-them-line: rgba(255, 255, 255, .08);
  --bubble-me: rgba(110, 168, 216, .13);
  --bubble-me-fg: #cfe2f2;
  --bubble-me-line: rgba(110, 168, 216, .28);
  --end-accent: var(--accent);
  --card-hue: 210;
}

/* 主题切换时，颜色平滑过渡而不是硬切 */
body {
  transition: background-color 1.1s ease, color 1.1s ease;
}
.topbar, .choices, .sheet-panel {
  transition: background-color 1.1s ease, border-color 1.1s ease;
}

/* =========================================================================
 * 游戏一《长夜灯塔》
 * ========================================================================= */

/* 第一幕 · 地下 —— 隧道里只有应急灯和检修终端的绿字 */
body.th-tunnel {
  --bg: #07090a;
  --fg: #9fb0a4;
  --fg-bright: #d8f0dd;
  --fg-dim: #6d8175;
  --fg-faint: #47564c;
  --accent: #e8913c;                       /* 应急灯的橙 */
  --accent-glow: rgba(232, 145, 60, .42);
  --line: rgba(140, 200, 160, .07);
  --line-strong: rgba(140, 200, 160, .17);
  --panel: rgba(180, 255, 200, .02);
  --panel-solid: rgba(6, 9, 8, .94);
  --hover: rgba(140, 200, 160, .05);
  --choice-bg: rgba(140, 200, 160, .022);
  --choice-bg-hover: rgba(232, 145, 60, .1);
  --bubble-them: rgba(150, 220, 175, .055);
  --bubble-them-fg: #bfe0c8;
  --bubble-them-line: rgba(150, 220, 175, .12);
  --bubble-me: rgba(232, 145, 60, .1);
  --bubble-me-fg: #f0c799;
  --bubble-me-line: rgba(232, 145, 60, .24);
  --font-body: var(--font-mono), "PingFang SC", sans-serif;
  --radius: 4px;
  --bubble-radius: 5px;
  --card-hue: 28;
}
/* CRT 扫描线 + 微弱的绿色辉光 */
body.th-tunnel #ambience {
  background:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .34) 0px, rgba(0, 0, 0, .34) 1px,
      transparent 1px, transparent 3px),
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(90, 200, 130, .07), transparent 62%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 42%, rgba(0, 0, 0, .72) 100%);
  animation: crt-roll 9s linear infinite;
}
@keyframes crt-roll { to { background-position: 0 3px, 0 0, 0 0; } }

/* 第二幕 · 地表 —— 落灰的城市，铁锈与血 */
body.th-ash {
  --bg: #12100e;
  --fg: #b6ada2;
  --fg-bright: #ece5db;
  --fg-dim: #857b70;
  --fg-faint: #5b5349;
  --accent: #b84a3c;                       /* 锈红 */
  --accent-glow: rgba(184, 74, 60, .4);
  --line: rgba(230, 210, 190, .07);
  --line-strong: rgba(230, 210, 190, .17);
  --panel: rgba(230, 210, 190, .028);
  --panel-solid: rgba(15, 13, 11, .93);
  --hover: rgba(230, 210, 190, .05);
  --choice-bg: rgba(230, 210, 190, .025);
  --choice-bg-hover: rgba(184, 74, 60, .1);
  --bubble-them: rgba(230, 210, 190, .055);
  --bubble-them-fg: #d6ccc0;
  --bubble-them-line: rgba(230, 210, 190, .1);
  --bubble-me: rgba(184, 74, 60, .12);
  --bubble-me-fg: #e8b8ae;
  --bubble-me-line: rgba(184, 74, 60, .26);
  --radius: 3px;
  --bubble-radius: 6px;
  --card-hue: 8;
}
/* 空气里飘的灰 + 顶部的暗橙天光 */
body.th-ash #ambience {
  background:
    radial-gradient(ellipse 130% 55% at 50% 0%, rgba(190, 110, 50, .11), transparent 66%),
    radial-gradient(ellipse 100% 100% at 50% 55%, transparent 38%, rgba(0, 0, 0, .68) 100%);
}
body.th-ash #ambience::after {
  content: '';
  position: absolute;
  inset: -40%;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(210, 200, 185, .5), transparent),
    radial-gradient(1.2px 1.2px at 46% 61%, rgba(210, 200, 185, .4), transparent),
    radial-gradient(1.6px 1.6px at 73% 34%, rgba(210, 200, 185, .45), transparent),
    radial-gradient(1.1px 1.1px at 29% 79%, rgba(210, 200, 185, .35), transparent),
    radial-gradient(1.3px 1.3px at 88% 71%, rgba(210, 200, 185, .4), transparent),
    radial-gradient(1px 1px at 61% 12%, rgba(210, 200, 185, .3), transparent);
  background-size: 340px 340px;
  animation: ash-drift 46s linear infinite;
  opacity: .55;
}
@keyframes ash-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-140px, 340px); }
}

/* 第三幕 · 灯塔 —— 冷青色的机械神性 */
body.th-beacon {
  --bg: #05080d;
  --fg: #9fc0cc;
  --fg-bright: #dff3fa;
  --fg-dim: #64848f;
  --fg-faint: #405761;
  --accent: #3fd6d0;
  --accent-glow: rgba(63, 214, 208, .45);
  --line: rgba(90, 210, 220, .09);
  --line-strong: rgba(90, 210, 220, .2);
  --panel: rgba(90, 210, 220, .03);
  --panel-solid: rgba(4, 7, 11, .94);
  --hover: rgba(90, 210, 220, .06);
  --choice-bg: rgba(90, 210, 220, .028);
  --choice-bg-hover: rgba(63, 214, 208, .1);
  --bubble-them: rgba(120, 220, 230, .06);
  --bubble-them-fg: #c3e4ec;
  --bubble-them-line: rgba(120, 220, 230, .13);
  --bubble-me: rgba(63, 214, 208, .11);
  --bubble-me-fg: #a8ecea;
  --bubble-me-line: rgba(63, 214, 208, .27);
  --radius: 2px;
  --bubble-radius: 4px;
  --card-hue: 178;
}
/* 从底部向上扩散的脉冲 —— 灯塔在呼吸 */
body.th-beacon #ambience {
  background:
    radial-gradient(ellipse 90% 45% at 50% 108%, rgba(63, 214, 208, .16), transparent 68%),
    repeating-linear-gradient(0deg,
      rgba(63, 214, 208, .028) 0px, rgba(63, 214, 208, .028) 1px,
      transparent 1px, transparent 5px),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 34%, rgba(0, 0, 0, .78) 100%);
  animation: beacon-breathe 6.5s ease-in-out infinite;
}
@keyframes beacon-breathe {
  0%, 100% { opacity: .78; }
  50%      { opacity: 1; }
}

/* =========================================================================
 * 游戏二《黎明回声》
 * ========================================================================= */

/* 第一幕 · 圣所 —— 羊皮纸与金，唯一的亮色主题 */
body.th-sanctum {
  --bg: #efe6d3;
  --fg: #4a3f31;
  --fg-bright: #241d14;
  --fg-dim: #7a6a55;
  --fg-faint: #9c8c76;
  --accent: #a8791f;                        /* 金 */
  --accent-glow: rgba(168, 121, 31, .35);
  --line: rgba(80, 62, 38, .13);
  --line-strong: rgba(80, 62, 38, .26);
  --panel: rgba(255, 250, 238, .5);
  --panel-solid: rgba(243, 234, 218, .95);
  --hover: rgba(120, 95, 55, .07);
  --choice-bg: rgba(255, 252, 244, .55);
  --choice-bg-hover: rgba(168, 121, 31, .13);
  --bubble-them: rgba(255, 252, 243, .82);
  --bubble-them-fg: #3d3427;
  --bubble-them-line: rgba(120, 95, 55, .18);
  --bubble-me: rgba(168, 121, 31, .14);
  --bubble-me-fg: #543c11;
  --bubble-me-line: rgba(168, 121, 31, .32);
  --font-body: "Songti SC", "Noto Serif SC", "PingFang SC", serif;
  --font-display: "Songti SC", "Noto Serif SC", serif;
  --radius: 3px;
  --bubble-radius: 8px;
  --card-hue: 42;
}
/* 纸的纹理 + 从彩窗漏进来的光 */
body.th-sanctum #ambience {
  background:
    radial-gradient(ellipse 70% 42% at 50% -6%, rgba(255, 226, 160, .55), transparent 62%),
    radial-gradient(ellipse 100% 100% at 50% 46%, transparent 46%, rgba(96, 74, 42, .22) 100%),
    repeating-linear-gradient(122deg,
      rgba(140, 110, 70, .026) 0px, rgba(140, 110, 70, .026) 2px,
      transparent 2px, transparent 5px);
}
/* 亮色主题下滚动条要跟着变 */
body.th-sanctum ::-webkit-scrollbar-thumb { background: rgba(80, 62, 38, .3); }

/* 第二幕 · 地下书库 —— 铜绿与烛火 */
body.th-crypt {
  --bg: #0e1412;
  --fg: #a6b8ae;
  --fg-bright: #dfeee6;
  --fg-dim: #6f857b;
  --fg-faint: #4a5a53;
  --accent: #d9a441;                        /* 烛火 */
  --accent-glow: rgba(217, 164, 65, .38);
  --line: rgba(150, 210, 185, .08);
  --line-strong: rgba(150, 210, 185, .18);
  --panel: rgba(150, 210, 185, .028);
  --panel-solid: rgba(10, 16, 14, .94);
  --hover: rgba(150, 210, 185, .05);
  --choice-bg: rgba(150, 210, 185, .025);
  --choice-bg-hover: rgba(217, 164, 65, .1);
  --bubble-them: rgba(150, 210, 185, .055);
  --bubble-them-fg: #c8dcd2;
  --bubble-them-line: rgba(150, 210, 185, .12);
  --bubble-me: rgba(217, 164, 65, .12);
  --bubble-me-fg: #ecd09a;
  --bubble-me-line: rgba(217, 164, 65, .26);
  --font-body: "Songti SC", "Noto Serif SC", "PingFang SC", serif;
  --font-display: "Songti SC", "Noto Serif SC", serif;
  --radius: 3px;
  --bubble-radius: 8px;
  --card-hue: 158;
}
/* 烛光在角落摇 */
body.th-crypt #ambience {
  background:
    radial-gradient(ellipse 55% 40% at 14% 82%, rgba(217, 164, 65, .15), transparent 64%),
    radial-gradient(ellipse 45% 35% at 88% 24%, rgba(90, 190, 160, .07), transparent 64%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 26%, rgba(0, 0, 0, .84) 100%);
  animation: candle 5.2s ease-in-out infinite;
}
@keyframes candle {
  0%, 100% { opacity: .88; }
  38%      { opacity: 1; }
  62%      { opacity: .82; }
}

/* 第三幕 · 神之躯 —— 紫与虚空 */
body.th-divine {
  --bg: #0a0713;
  --fg: #b3a4cc;
  --fg-bright: #ece2ff;
  --fg-dim: #7d6d9c;
  --fg-faint: #574a70;
  --accent: #b98cff;
  --accent-glow: rgba(185, 140, 255, .45);
  --line: rgba(180, 150, 255, .1);
  --line-strong: rgba(180, 150, 255, .22);
  --panel: rgba(180, 150, 255, .035);
  --panel-solid: rgba(8, 5, 16, .94);
  --hover: rgba(180, 150, 255, .07);
  --choice-bg: rgba(180, 150, 255, .03);
  --choice-bg-hover: rgba(185, 140, 255, .12);
  --bubble-them: rgba(190, 165, 255, .07);
  --bubble-them-fg: #d5c8ee;
  --bubble-them-line: rgba(190, 165, 255, .15);
  --bubble-me: rgba(185, 140, 255, .13);
  --bubble-me-fg: #d9c2ff;
  --bubble-me-line: rgba(185, 140, 255, .3);
  --font-display: "Songti SC", "Noto Serif SC", serif;
  --radius: 2px;
  --bubble-radius: 3px;
  --card-hue: 268;
}
/* 缓慢流动的光纹 —— 像还在运行的东西 */
body.th-divine #ambience {
  background:
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(185, 140, 255, .1), transparent 66%),
    repeating-linear-gradient(96deg,
      rgba(185, 140, 255, .038) 0px, rgba(185, 140, 255, .038) 1px,
      transparent 1px, transparent 22px),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0, 0, 0, .8) 100%);
  background-size: auto, 300% 100%, auto;
  animation: divine-flow 24s linear infinite;
}
@keyframes divine-flow {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 300% 0, 0 0; }
}

/* =========================================================================
 * 游戏三《归零之前》
 * ========================================================================= */

/* 第一幕 · 值班 —— 冰蓝玻璃，仪表盘 */
body.th-probe {
  --bg: #04070d;
  --fg: #a7b6c9;
  --fg-bright: #e6eef8;
  --fg-dim: #67788e;
  --fg-faint: #445468;
  --accent: #5ba8f5;
  --accent-glow: rgba(91, 168, 245, .4);
  --line: rgba(140, 190, 255, .08);
  --line-strong: rgba(140, 190, 255, .18);
  --panel: rgba(140, 190, 255, .028);
  --panel-solid: rgba(3, 6, 11, .93);
  --hover: rgba(140, 190, 255, .055);
  --choice-bg: rgba(140, 190, 255, .025);
  --choice-bg-hover: rgba(91, 168, 245, .1);
  --bubble-them: rgba(150, 195, 255, .055);
  --bubble-them-fg: #c8d8ea;
  --bubble-them-line: rgba(150, 195, 255, .12);
  --bubble-me: rgba(91, 168, 245, .11);
  --bubble-me-fg: #b3d7fa;
  --bubble-me-line: rgba(91, 168, 245, .26);
  --font-body: "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --radius: 8px;
  --bubble-radius: 12px;
  --card-hue: 208;
}
body.th-probe #ambience {
  background:
    linear-gradient(180deg, rgba(91, 168, 245, .05), transparent 34%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 44%, rgba(0, 0, 0, .62) 100%);
}

/* 第二幕 · 深空 —— 深紫 + 真实星场（canvas 绘制） */
body.th-deep {
  --bg: #030209;
  --fg: #a99fc4;
  --fg-bright: #e4dcf7;
  --fg-dim: #6f6690;
  --fg-faint: #4a4468;
  --accent: #8f7ae0;
  --accent-glow: rgba(143, 122, 224, .42);
  --line: rgba(160, 145, 230, .09);
  --line-strong: rgba(160, 145, 230, .19);
  --panel: rgba(160, 145, 230, .03);
  --panel-solid: rgba(2, 1, 7, .9);
  --hover: rgba(160, 145, 230, .06);
  --choice-bg: rgba(160, 145, 230, .026);
  --choice-bg-hover: rgba(143, 122, 224, .11);
  --bubble-them: rgba(170, 155, 235, .06);
  --bubble-them-fg: #cfc6e6;
  --bubble-them-line: rgba(170, 155, 235, .13);
  --bubble-me: rgba(143, 122, 224, .12);
  --bubble-me-fg: #c9bcf2;
  --bubble-me-line: rgba(143, 122, 224, .28);
  --font-body: "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --radius: 8px;
  --bubble-radius: 12px;
  --card-hue: 258;
}
body.th-deep #ambience {
  background:
    radial-gradient(ellipse 70% 44% at 50% 112%, rgba(143, 122, 224, .13), transparent 66%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0, 0, 0, .7) 100%);
}

/* 第三幕 · 归零 —— 褪色。整个界面正在失去意义 */
body.th-null {
  --bg: #e9e9ea;
  --fg: #55565a;
  --fg-bright: #1c1d20;
  --fg-dim: #85868c;
  --fg-faint: #a9aab0;
  --accent: #6a6b72;
  --accent-glow: rgba(106, 107, 114, .3);
  --line: rgba(0, 0, 0, .1);
  --line-strong: rgba(0, 0, 0, .2);
  --panel: rgba(255, 255, 255, .55);
  --panel-solid: rgba(236, 236, 238, .95);
  --hover: rgba(0, 0, 0, .04);
  --choice-bg: rgba(255, 255, 255, .6);
  --choice-bg-hover: rgba(0, 0, 0, .06);
  --bubble-them: rgba(255, 255, 255, .82);
  --bubble-them-fg: #3f4045;
  --bubble-them-line: rgba(0, 0, 0, .1);
  --bubble-me: rgba(0, 0, 0, .06);
  --bubble-me-fg: #4a4b50;
  --bubble-me-line: rgba(0, 0, 0, .14);
  --font-body: "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --radius: 2px;
  --bubble-radius: 2px;
  --card-hue: 220;
  --font-scale: calc(1 * var(--user-font-scale, 1));
}
/* 慢慢加重的白 —— 越往后越像纸被漂白 */
body.th-null #ambience {
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
    rgba(255, 255, 255, .5) 0%, transparent 58%);
  animation: null-bleach 20s ease-in-out infinite alternate;
}
@keyframes null-bleach {
  from { opacity: .35; }
  to   { opacity: .85; }
}
body.th-null ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); }
body.th-null .msg.them { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }

/* =========================================================================
 * 结局配色（覆盖 --end-accent）
 * ========================================================================= */

body.end-true  { --end-accent: #e8c66a; }
body.end-good  { --end-accent: #7fc99a; }
body.end-gray  { --end-accent: #8b93a3; }
body.end-death { --end-accent: #c4646a; }

/* 死亡结局：整个界面压暗、去饱和 */
body.end-death #screen-ending {
  background: radial-gradient(ellipse at center, transparent 32%, rgba(80, 6, 10, .3) 100%);
}
/* 真结局：暖金辉光 */
body.end-true #screen-ending {
  background: radial-gradient(ellipse at 50% 30%, rgba(232, 198, 106, .1), transparent 62%);
}