/* ============================================================
   ch07「光逝无常」章节专属样式
   境界色：炼气期翠绿 var(--accent)（炼气七层·光逝无常）
   点亮色：暮光金 #E8B850（光隙中明灭的载流子 / 演出读数）
   对立色：暗棕 #4A3828（非平衡之乱 · 熵魔生灭形态）
   组件规格色：电子青 #6FD3E0 · 空穴金 #FCD34D · E_Fn翠绿 · E_Fp红
   一切基础色值仍走 tokens 变量；以下仅做本章变量映射与组件样式。
   ============================================================ */

/* ---------- 本章变量映射 ---------- */
:root, :root[data-theme="light"] {
  --accent: #10B981;                     /* 炼气期翠绿 · 境界色 */
  --accent-ink: #0E9F70;
  --accent-soft: rgba(16, 185, 129, 0.13);
  --glow: 0 0 18px rgba(16, 185, 129, 0.28);
  --mist: #4A3828;                       /* 暗棕 · 非平衡之乱 */
  --mist-ink: #6B5238;
  --mist-soft: rgba(74, 56, 40, 0.18);
  --calc: #E8B850;                       /* 暮光金（演出/读数） */
  --calc-ink: #B8881E;
  --calc-soft: rgba(232, 184, 80, 0.16);
  --waterline: #0E9F70;
  --waterline-ink: #0E9F70;
  --color-correct: var(--accent);
  --color-insight: #B8881E;
  --youying-glow: #E8E0D0;               /* 熵魔之眼虚白（暖调） */
  /* 组件规格色 */
  --c-electron: #6FD3E0;                 /* 电子（电弧青） */
  --c-hole: #FCD34D;                     /* 空穴（暖金） */
  --c-light: #FEF3C7;                    /* 光柱（暖白） */
  --c-conduction: #0891B2;               /* 导带（青蓝） */
  --c-valence: #6366F1;                  /* 价带（靛蓝） */
  --c-fermi-eq: #F59E0B;                 /* 平衡费米 E_F（金虚线） */
  --c-fermi-n: var(--accent);                  /* 电子准费米 E_Fn（翠绿） */
  --c-fermi-p: #EF4444;                  /* 空穴准费米 E_Fp（红） */
  --c-path-rad: #F59E0B;                 /* 辐射复合路径（暖金） */
  --c-path-aug: #EF4444;                 /* 俄歇复合路径（红） */
  --c-path-srh: #6366F1;                 /* SRH复合路径（靛蓝） */
  --c-data-warn: #EF4444;                /* 警告/消失 */
  --c-data-accent: #6366F1;              /* 靛蓝数据点缀 */
}
:root[data-theme="dark"] {
  --accent: #10B981;
  --accent-ink: #34D399;                 /* 翠绿·暗底提亮 */
  --accent-soft: rgba(16, 185, 129, 0.30);
  --glow: 0 0 22px rgba(52, 211, 153, 0.38);
  --mist: #4A3828;
  --mist-ink: #9E8A70;                   /* 暗棕·暗底提亮 */
  --mist-soft: rgba(74, 56, 40, 0.22);
  --calc: #E8B850;
  --calc-ink: #F5D080;
  --calc-soft: rgba(232, 184, 80, 0.18);
  --waterline: #34D399;
  --waterline-ink: #34D399;
  --color-correct: #34D399;
  --color-insight: #F5D080;
  --youying-glow: #E8E0D0;
  --c-electron: #6FD3E0;
  --c-hole: #FCD34D;
  --c-light: #FEF3C7;
  --c-conduction: #22A3C7;
  --c-valence: #818CF8;
  --c-fermi-eq: #FBBF24;
  --c-fermi-n: #34D399;
  --c-fermi-p: #F87171;
  --c-path-rad: #FBBF24;
  --c-path-aug: #F87171;
  --c-path-srh: #818CF8;
  --c-data-warn: #F87171;
  --c-data-accent: #818CF8;
}
/* ---------- 开场 ---------- */
#opening {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); text-align: center; padding: calc(var(--nav-h) + var(--sp-6)) var(--sp-4) var(--sp-7);
}
/* ---------- 非平衡之乱对话框（暗棕 · 熵魔生灭形态） ---------- */
.dlg.wuchang { border-left-color: var(--mist); box-shadow: var(--shadow), 0 0 18px var(--mist-soft); }
.dlg.wuchang .who { background: var(--mist-ink); color: #F0E8DC; }
.dlg.wuchang .avatar { border-color: var(--mist); filter: sepia(0.5) saturate(0.6) brightness(0.7); }
:root[data-theme="dark"] .dlg.wuchang .who { color: #1A140C; background: var(--mist-ink); }
.dlg.wuchang em { color: var(--mist-ink); font-style: normal; font-weight: 700; }
/* ---------- 物品栏：本命石 / 匀速纹章 / 半纹符 ---------- */
#inventory {
  position: fixed; left: var(--sp-3); bottom: var(--sp-3); z-index: 110;
  display: flex; gap: var(--sp-2); align-items: flex-end;
}
.curve-cv {
  width: 100%; max-width: 680px; border-radius: var(--r-md);
  background: var(--bg-sunk); border: 1px solid var(--line);
  touch-action: none;
}
/* ---------- 石碑（生灭纹碑） ---------- */
.stele {
  width: 100%; max-width: 520px; margin: var(--sp-2) auto 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--accent); border-radius: var(--r-md);
  background:
    linear-gradient(180deg, var(--accent-soft), transparent 60%),
    var(--bg-sunk);
  text-align: center; font-family: var(--font-serif);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.18), var(--glow);
  animation: carve-in 1s var(--ease-out);
}
/* ---------- S10 收束演出 ---------- */
.s10-progress { font-family: var(--font-mono); color: var(--accent-ink); font-size: var(--fs-sub); }
.stage canvas {
  width: 100%; max-width: 680px; border-radius: var(--r-md);
  background: var(--bg-sunk); border: 1px solid var(--line);
  touch-action: none;
}
.btn-row { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); flex-wrap: wrap; }
/* ============================================================
   S0 光生光灭预测挑战器 · cmp-light-generation-predict
   ============================================================ */
.predict-options {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center; width: 100%;
}
.predict-option {
  flex: 1 1 40%; min-width: 180px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--bg-sunk); color: var(--text-2);
  cursor: pointer; text-align: left; font-size: var(--fs-sub);
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.predict-option:hover:not(.locked) { border-color: var(--accent); transform: translateY(-2px); }
.predict-option.sel { border-style: solid; border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.predict-option.right { border-color: var(--color-correct); color: var(--color-correct); background: rgba(16,185,129,0.12); }
.predict-option.wrong { border-color: var(--c-data-warn); color: var(--c-data-warn); background: rgba(239,68,68,0.10); }
.predict-option.locked { cursor: default; opacity: 0.6; }
.reveal-zone {
  width: 100%; margin-top: var(--sp-3);
  border-top: 1px dashed var(--line); padding-top: var(--sp-3);
  animation: carve-in 0.6s var(--ease-out);
}
.wrong-feedback {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--c-data-warn); background: rgba(239,68,68,0.08);
  font-size: var(--fs-small); color: var(--text-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.mystery-token {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--gold); border-radius: var(--r-md);
  background: var(--gold-soft); color: var(--gold-ink);
  font-family: var(--font-serif); letter-spacing: 0.08em;
  box-shadow: var(--glow); animation: carve-in 0.8s var(--ease-out);
}
.mentor-cue { margin-top: var(--sp-3); }
.moer-line {
  padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--accent);
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-serif); letter-spacing: 0.06em; font-size: var(--fs-sub);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ============================================================
   S2 复合三道扫描台 · cmp-recombination-scanner
   ============================================================ */
.knob-panel {
  display: flex; flex-direction: column; gap: var(--sp-3);
  width: 100%; margin: var(--sp-2) 0;
}
.knob-row { display: flex; flex-direction: column; gap: 4px; }
.knob-row .knob-label {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--text-2); letter-spacing: 0.1em;
}
.knob-row .knob-readout {
  font-family: var(--font-mono); color: var(--accent-ink);
  font-size: var(--fs-sub); font-weight: 600;
}
.material-switch { display: flex; gap: var(--sp-2); justify-content: center; }
.mat-btn {
  padding: var(--sp-1) var(--sp-4); border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--bg-sunk); color: var(--text-3);
  cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-small);
  transition: all var(--dur-fast);
}
.mat-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.mat-btn.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.readout-panel {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-sunk); font-size: var(--fs-small); color: var(--text-2);
  line-height: 1.8;
}
.readout-panel b { color: var(--accent-ink); font-family: var(--font-mono); }
.formula-panel {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-small);
  line-height: 1.9; color: var(--text-2);
}
.formula-line { font-family: var(--font-mono); }

/* ============================================================
   S7 准费米能级联动器 · cmp-quasi-fermi-linker
   ============================================================ */
.balance-comparison {
  display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--sp-2);
}
.balance-state, .nonbalance-state {
  flex: 1 1 200px; padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--bg-sunk); font-size: var(--fs-small); color: var(--text-2);
  cursor: pointer; transition: all var(--dur-fast);
}
.balance-state:hover, .nonbalance-state:hover { border-color: var(--accent); }
.balance-state.on { border-style: solid; border-color: var(--c-fermi-eq); background: rgba(245,158,11,0.10); }
.nonbalance-state.on { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.split-width-label {
  margin-top: var(--sp-1); font-family: var(--font-mono);
  color: var(--c-data-warn); font-size: var(--fs-small); font-weight: 600;
}

/* ============================================================
   S9 数字链回收 · number-chain
   ============================================================ */
.number-chain {
  display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.chain-item {
  padding: var(--sp-1) var(--sp-3); border: 1px dashed var(--line-strong);
  border-radius: 999px; background: var(--bg-sunk); color: var(--text-3);
  font-family: var(--font-mono); font-size: var(--fs-small);
  transition: all var(--dur-med) var(--ease-out); opacity: 0.4;
}
.chain-item.lit {
  border-style: solid; border-color: var(--accent); color: var(--accent-ink);
  background: var(--accent-soft); box-shadow: var(--glow); opacity: 1;
}