/* ============================================================
   ch04「统计定座」章节专属样式
   境界色：黛紫 #574662（从 ch03 黛蓝的能量世界滑入多体统计的「电子之海」）
   对立色：雾白 #C9CCD6（均分翁与统计迷雾）
   一切基础色值仍走 tokens 变量；以下仅做本章变量映射与组件样式。
   ============================================================ */

/* ---------- 本章变量映射（仅影响本页，不改 tokens.css） ---------- */
:root, :root[data-theme="light"] {
  --accent: #574662;                     /* 黛紫 · 点亮色 */
  --accent-ink: #574662;                 /* 亮底文字级 */
  --accent-soft: rgba(87, 70, 98, 0.13);
  --glow: 0 0 18px rgba(87, 70, 98, 0.25);
  --mist: #C9CCD6;                       /* 均分翁雾白 */
  --mist-ink: #5A5E6E;                   /* 雾白·亮底文字级 */
  --mist-soft: rgba(160, 166, 186, 0.18);
  --calc: #8B7BC7;                       /* 泽萤亮紫（演出/读数） */
  --calc-ink: #4A3F7A;
  --calc-soft: rgba(139, 123, 199, 0.16);
  --waterline: #3E6C8E;                  /* 水位线 */
  --waterline-ink: #3E6C8E;
  --color-correct: #1FA866;
  --color-insight: #4A3F7A;
}
:root[data-theme="dark"] {
  --accent: #574662;
  --accent-ink: #B9A8CC;                 /* 黛紫·暗底提亮（文字级） */
  --accent-soft: rgba(87, 70, 98, 0.32);
  --glow: 0 0 22px rgba(185, 168, 204, 0.35);
  --mist: #C9CCD6;
  --mist-ink: #C9CCD6;                   /* 雾白·暗底直接用 */
  --mist-soft: rgba(201, 204, 214, 0.16);
  --calc: #8B7BC7;
  --calc-ink: #B9A8F0;
  --calc-soft: rgba(139, 123, 199, 0.18);
  --waterline: #7FA8E0;
  --waterline-ink: #7FA8E0;
  --color-correct: #2BC47E;
  --color-insight: #B9A8F0;
}
.op-title span {
  display: inline-block; opacity: 0;
  text-shadow: 0 0 60px var(--mist-soft), 0 0 24px var(--accent-soft);
}
/* ---------- 均分翁对话框（雾白对立色） ---------- */
.dlg.junfen { border-left-color: var(--mist); box-shadow: var(--shadow), 0 0 18px var(--mist-soft); }
.dlg.junfen .who { background: var(--mist-ink); color: #F4F5F9; }
.dlg.junfen .avatar { border-color: var(--mist); }
:root[data-theme="dark"] .dlg.junfen .who { color: #1A1C26; background: var(--mist-ink); }
.dlg.junfen 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;
}
.inv-scar {
  font-size: 0.6rem; color: var(--waterline-ink);
  border: 1px dashed var(--waterline); border-radius: 999px; padding: 0 6px;
}
.inv-scar b { color: var(--waterline-ink); font-family: var(--font-mono); }
#inv-book b { color: var(--mist-ink); }
#book-panel {
  position: absolute; left: 0; bottom: 70px; width: min(78vw, 320px);
  padding: var(--sp-4); max-height: 50vh; overflow-y: auto;
}
#book-panel h3 { font-size: var(--fs-sub); margin-bottom: var(--sp-2); }
.ash-item {
  font-family: var(--font-serif);
  color: var(--mist-ink);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-2) 0;
  font-size: var(--fs-small);
  animation: carve-in 0.8s var(--ease-out);
}
.lattice-cv, .curve-cv {
  width: 100%; max-width: 680px; border-radius: var(--r-md);
  background: var(--bg-sunk); border: 1px solid var(--line);
  touch-action: none;
}
.concept-card {
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--accent-soft);
  display: flex; flex-direction: column; gap: 2px;
}
.concept-card b { color: var(--accent-ink); font-family: var(--font-serif); }
.concept-card span { font-size: var(--fs-small); color: var(--text-2); }
/* ---------- S0 雾泽拾簿 · 焦簿对读 ---------- */
.s0-bookrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; }
@media (max-width: 560px) { .s0-bookrow { grid-template-columns: 1fr; } }
.bookpage {
  min-height: 88px; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--mist); border-radius: var(--r-md);
  background: var(--mist-soft); color: var(--text-1); cursor: pointer;
  font-family: var(--font-serif); text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  transition: all var(--dur-fast) var(--ease-out);
}
.bookpage:hover { transform: translateY(-3px); box-shadow: 0 0 16px var(--mist-soft); }
.bookpage.on { border-color: var(--accent); background: var(--accent-soft); }
.bookpage b { color: var(--mist-ink); font-size: var(--fs-small); }
.bookpage span { font-size: var(--fs-small); color: var(--text-2); line-height: 1.6; }
.bookpage s { color: var(--danger); }

/* ---------- 测量/旋钮（沿用 ch03 模式） ---------- */
.measure-box {
  display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; width: 100%;
}
.knob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); width: 100%; }
@media (max-width: 560px) { .knob-grid { grid-template-columns: 1fr; } }
.knob {
  padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  background: transparent; color: var(--text-1); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.knob:hover { border-color: var(--accent); transform: translateY(-3px); }
.knob.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.measure-num {
  font-family: var(--font-mono); font-size: var(--fs-title); color: var(--danger);
  text-shadow: 0 0 18px var(--danger-soft);
}
.ammeter {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  font-family: var(--font-mono);
}
.ammeter b, .ammeter .readout.big { color: var(--calc-ink); }

/* ---------- S10 温区即疆域 ---------- */
.s10-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; }
.s10-ctl { display: flex; align-items: center; gap: var(--sp-3); width: 100%; max-width: 620px; flex-wrap: wrap; justify-content: center; }
.s10-ctl input[type="range"] { flex: 1; min-width: 140px; }
.s10-lb { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-2); }
.s10-read { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--calc-ink); text-align: center; }
.s10-msg { font-size: var(--fs-small); color: var(--text-2); line-height: 1.8; max-width: 40rem; text-align: center; }
.s10-msg.ok { color: var(--color-correct); font-family: var(--font-serif); }
.s10-progress { font-family: var(--font-mono); color: var(--accent-ink); font-size: var(--fs-sub); }
.s10-wrap canvas {
  width: 100%; max-width: 680px; border-radius: var(--r-md);
  background: var(--bg-sunk); border: 1px solid var(--line);
  touch-action: none;
}
/* ---------- 崩角演出 ---------- */
.stage.collapse { animation: collapseDim 1.2s var(--ease-out); }
.page-burn { animation: pageBurn 1s var(--ease-out); }
@keyframes pageBurn {
  0% { filter: brightness(1) sepia(0); }
  45% { filter: brightness(1.6) sepia(0.8) hue-rotate(-18deg); }
  100% { filter: brightness(1) sepia(0); }
}
.corner-break { animation: cornerBreak 1.1s var(--ease-out); }
@keyframes cornerBreak {
  0% { filter: brightness(1); transform: none; }
  35% { filter: brightness(1.5) saturate(0.4); transform: rotate(-0.6deg); }
  100% { filter: brightness(1); transform: none; }
}

/* ---------- S0 载流子浓度预测挑战器 ---------- */
.cmp-carrier-predict {
  display: flex; flex-direction: column; gap: var(--sp-3); width: 100%;
}
.predict-options {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); width: 100%;
}
@media (max-width: 640px) { .predict-options { grid-template-columns: repeat(2, 1fr); } }
.predict-options .option {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--sp-3) var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; color: var(--text-1); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out); font-family: var(--font-mono);
}
.predict-options .option:hover { border-color: var(--accent); transform: translateY(-3px); }
.predict-options .option b { font-size: 1.4rem; color: var(--accent-ink); }
.predict-options .option span { font-size: var(--fs-small); color: var(--text-2); }
.predict-options .option.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.predict-options .option.sel b { color: var(--accent); }
.predict-options .option.wrong { border-color: var(--danger); background: var(--danger-soft); }
.predict-options .option.wrong b { color: var(--danger); }
.predict-options .option.right { border-color: #10B981; background: rgba(16,185,129,0.12); }
.predict-options .option.right b { color: #10B981; }
.predict-options .option:disabled { opacity: 0.5; cursor: default; transform: none; }

.reveal-zone {
  display: flex; flex-direction: column; gap: var(--sp-3); width: 100%;
  animation: simIn 0.6s var(--ease-out);
}
.result-banner {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); text-align: center;
  font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.8;
  border: 1px solid var(--line);
}
.result-banner.wrong { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.result-banner.right { border-color: #10B981; background: rgba(16,185,129,0.10); color: #10B981; }
.energy-barrier {
  display: flex; flex-direction: column; gap: var(--sp-2); cursor: pointer;
  padding: var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  transition: all var(--dur-fast) var(--ease-out);
}
.energy-barrier:hover { border-color: var(--accent); background: var(--accent-soft); }
.energy-barrier .barrier-wall, .energy-barrier .barrier-step {
  display: flex; align-items: center; gap: var(--sp-3);
}
.energy-barrier .barrier-wall { position: relative; }
.energy-barrier .barrier-wall::before {
  content: ''; width: 4px; height: 48px; background: var(--danger); border-radius: 2px;
  box-shadow: 0 0 8px var(--danger-soft);
}
.energy-barrier .barrier-step { position: relative; }
.energy-barrier .barrier-step::before {
  content: ''; width: 4px; height: 6px; background: var(--gold); border-radius: 2px;
  box-shadow: 0 0 6px var(--gold-soft);
}
.energy-barrier .bh { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; }
.energy-barrier .barrier-wall .bh { color: var(--danger); }
.energy-barrier .barrier-step .bh { color: var(--gold); }
.energy-barrier .bl { font-size: var(--fs-small); color: var(--text-2); }
.energy-barrier .ratio-label {
  font-family: var(--font-mono); font-size: 1rem; color: var(--calc-ink);
  padding-top: var(--sp-2); border-top: 1px solid var(--line);
}
.energy-barrier.expanded .ratio-label { color: var(--danger); font-weight: 700; }
.mystery-token {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); text-align: center;
  font-family: var(--font-serif); font-size: 1.1rem; color: #10B981;
  background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.3);
  animation: simIn 0.8s var(--ease-out);
}

/* ---------- S2 态密度三旋钮实验台 ---------- */
.knob-grid .knob label {
  font-size: var(--fs-small); color: var(--text-2); font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.knob-grid .knob .readout { font-size: var(--fs-small); }

/* ---------- S3 费米分布追踪器 · 视图切换 ---------- */
.view-toggle {
  display: flex; gap: var(--sp-1); width: 100%; margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.vt-btn {
  padding: var(--sp-2) var(--sp-4); border: none; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-2); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.05em;
  transition: all var(--dur-fast) var(--ease-out);
}
.vt-btn:hover { color: var(--text-1); }
.vt-btn.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.s3-view-hide { display: none; }

/* ---------- S9 热平衡排除法收网器 · 数字链+排除轨迹 ---------- */
.number-chain {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center;
  margin-top: var(--sp-4); width: 100%;
}
.chain-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; opacity: 0.3; transition: all var(--dur-med) var(--ease-out);
}
.chain-item.lit { opacity: 1; border-color: #10B981; background: rgba(16,185,129,0.08); box-shadow: 0 0 12px rgba(16,185,129,0.2); }
.chain-item .chain-num { font-family: var(--font-mono); font-weight: 700; color: var(--accent-ink); font-size: 1rem; }
.chain-item.lit .chain-num { color: #10B981; }
.chain-item .chain-desc { font-size: var(--fs-small); color: var(--text-2); }
.elimination-trail {
  display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-3); width: 100%;
}
.trail-row {
  display: flex; align-items: center; gap: var(--sp-2); padding: 2px 0;
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-2);
  animation: carve-in 0.5s var(--ease-out);
}
.trail-row .trail-q { color: var(--accent-ink); font-weight: 700; min-width: 3em; }
.trail-row .trail-elim { text-decoration: line-through; color: var(--danger); }
.trail-row .trail-keep { color: #10B981; }

@media (prefers-reduced-motion: reduce) {
  .stage.collapse, .page-burn, .corner-break { animation: none; }
  .reveal-zone, .mystery-token, .chain-item, .trail-row { animation: none; }
}