/* ============================================================
   ch11「算术逻辑单元深度」章节专属样式
   境界：筑基五层·算理精微 · 深蓝 #3B82F6（--realm-2 系，与 ch08 同筑基色系）
   Boss：精度之蚀 · 深紫 #7C3AED（精度丢失/误差累积/数值稳定性）
   顿悟：金 var(--ch-epiphany)（IEEE点亮、FMA精度保留、顿悟脉冲、刻痕微光）
   全部色值走 tokens 变量；类名体系与 ch01-ch10 对齐。
   禁止纯黑背景；发光仅限边框/背景，不出现在文字区。
   ============================================================ */

/* ---------- 章节境界色覆写：深蓝筑基（同 ch08） ---------- */
:root, :root[data-theme="light"] {
  --accent: #3B82F6;
  --accent-ink: #2563EB;
  --accent-soft: rgba(59, 130, 246, 0.10);
  --glass-line: rgba(59, 130, 246, 0.20);
  --glow: 0 0 18px rgba(59, 130, 246, 0.26);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #60A5FA;
  --accent-ink: #3B82F6;
  --accent-soft: rgba(59, 130, 246, 0.16);
  --glass-line: rgba(59, 130, 246, 0.18);
  --glow: 0 0 22px rgba(59, 130, 246, 0.34);
  --on-accent: #04120F;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #7C3AED;          /* 精度之蚀 · 深紫 */
  --ch-boss-ink: #6D28D9;
  --ch-boss-soft: rgba(124, 58, 237, 0.14);
  --ch-boss-line: rgba(124, 58, 237, 0.30);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟金 */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-epiphany-ink: #D97706;
  /* 算术模块色（与 ALU 各部件对齐） */
  --ch-mod-carry: #D97706;     /* 进位链 · 琥珀 */
  --ch-mod-booth: #10B981;     /* Booth/Wallace · 翠绿 */
  --ch-mod-round: var(--ch-boss);     /* 舍入单元 · 红 */
  --ch-mod-fma: #10B981;       /* FMA 精度保留 · 翠绿 */
  --ch-mod-trade: #8B5CF6;     /* 权衡 · 紫 */
  --ch-amber: #D97706;         /* 算珠琥珀 */
  --ch-amber-soft: rgba(217, 119, 6, 0.14);
  /* 状态色 */
  --ch-ok: #22C55E;            /* 成功 */
  --ch-warn: var(--ch-boss);          /* 警示 / 违例 */
  --ch-dontcare: var(--ch-amber);      /* don't care */
  --ch-rtl: #0EA5E9;           /* 代码文本色 */
  --ch-binary: #D97706;        /* 二进制流粒子色 */
}
/* ---------- 导师 / Boss 对话框变体 ---------- */
/* 诺依曼老祖：筑基深蓝条 + 蓝名字牌 */
.dlg.neumann {
  border-left-color: var(--accent);
  box-shadow: var(--shadow), 0 0 18px var(--accent-soft);
}
/* 精度之蚀：深紫条 + 紫名字牌 + 斜体 */
.dlg.boss {
  border-left-color: var(--ch-boss);
  box-shadow: var(--shadow), 0 0 18px var(--ch-boss-soft);
}
.dlg.boss .who { background: var(--ch-boss); color: #FFFFFF; }
.inv-scar {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--ch-boss);
  background: var(--ch-boss-soft); padding: 0 4px; border-radius: 3px;
}
#carve-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-boss); }
.option.wrong { border-color: var(--ch-boss); background: var(--ch-boss-soft); color: var(--ch-boss); }
/* ============================================================
   S0 浮点精度预测挑战器 + ALU全貌 + 分野裂缝
   ============================================================ */
.cmp-float-predictor { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bet-prompt {
  text-align: center; font-size: 1rem; color: var(--accent-ink);
  padding: var(--sp-2); letter-spacing: 0.1em;
}
.hex-reveal {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-warn);
  border-radius: var(--r-sm); background: rgba(239,68,68,0.08);
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--ch-warn);
  animation: shake 300ms cubic-bezier(0.22,1,0.36,1);
}
.hex-reveal.correct { border-color: var(--ch-ok); background: rgba(34,197,94,0.08); color: var(--ch-ok); }
.hex-reveal .hex-line { margin: var(--sp-1) 0; }
.alu-overview { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); }
.alu-diagram {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.alu-diagram svg { width: 100%; height: auto; }
.alu-hotspot { cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); }
.alu-hotspot:hover { filter: brightness(1.3); }
.alu-hotspot.lit { filter: drop-shadow(0 0 6px var(--ch-epiphany)); }
.alu-annotation {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--accent);
  border-radius: var(--r-sm); background: var(--accent-soft);
  font-size: 0.85rem; min-height: 40px; color: var(--text-1);
}
.rift-display {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm); overflow: hidden;
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.rift-left, .rift-right {
  padding: var(--sp-3); font-size: 0.85rem; text-align: center;
  background: var(--bg-sunk);
}
.rift-left { border-right: 2px dashed var(--ch-boss); color: var(--accent-ink); }
.rift-right { color: var(--ch-boss); }

/* ============================================================
   S1 进位链延迟追踪器
   ============================================================ */
.mode-selector {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
}
.mode-btn {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.85rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.mode-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.mode-btn.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: var(--glow);
}
.adder-visualizer {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); overflow-x: auto;
}
.fa-row { display: flex; gap: 2px; min-width: 480px; margin-bottom: var(--sp-1); }
.fa-cell {
  flex: 1; min-width: 14px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-line); border-radius: 2px;
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.55rem;
  color: var(--text-3); transition: all 150ms cubic-bezier(0.22,1,0.36,1);
}
.fa-cell.lit { background: var(--ch-amber); color: #fff; border-color: var(--ch-amber); box-shadow: 0 0 6px var(--ch-amber-soft); }
.fa-cell.skip { background: var(--ch-epiphany); color: #000; border-color: var(--ch-epiphany); }
.adder-visualizer svg { width: 100%; min-width: 480px; height: auto; }
.delay-clock-row {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: center;
  padding: var(--sp-2);
}
.delay-chart-area {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.cost-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.cost-bar { display: flex; align-items: center; gap: var(--sp-2); }
.cost-bar .bar-label { min-width: 72px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); }
.cost-bar .bar-track {
  flex: 1; height: 24px; background: var(--bg-elev); border-radius: var(--r-xs);
  border: 1px solid var(--glass-line); overflow: hidden; position: relative;
}
.cost-bar .bar-fill { height: 100%; border-radius: var(--r-xs); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.cost-bar[data-mode="ripple"] .bar-fill { background: var(--ch-amber); }
.cost-bar[data-mode="skip"] .bar-fill { background: var(--ch-epiphany); }
.cost-bar[data-mode="select"] .bar-fill { background: var(--accent); }
.cost-bar .bar-val { min-width: 90px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-ink); }

/* ============================================================
   S2 补码加减统一电路
   ============================================================ */
.complement-section {
  width: 100%; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.sub-toggle-row, .carry-in-row, .overflow-row {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.sub-btn { min-width: 200px; }
.sub-btn.on { background: var(--ch-warn); color: #fff; border-color: var(--ch-warn); }
.xor-array { display: flex; gap: 2px; flex-wrap: wrap; padding: var(--sp-1); }
.xor-gate {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-line); border-radius: 3px;
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--text-3); transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.xor-gate.pass { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.xor-gate.invert { border-color: var(--ch-warn); color: var(--ch-warn); background: rgba(239,68,68,0.10); }
.carry-in-row .readout, .overflow-row .readout { font-family: var(--font-mono); }
.v-flag { font-family: var(--font-mono); font-weight: 600; }
.v-flag.lit { color: var(--ch-warn); animation: vPulse 0.5s cubic-bezier(0.22,1,0.36,1) 3; }
@keyframes vPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.calc-input-row {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.calc-input {
  width: 90px; min-height: 40px; padding: 4px 8px;
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); color: var(--text-1);
  font-family: var(--font-mono); font-size: 0.85rem; text-align: center;
}
.calc-input:focus { border-color: var(--accent); outline: none; box-shadow: var(--glow); }

/* ============================================================
   S3 乘除塔四选一推演器 + 整数之限
   ============================================================ */
.tower-visual {
  width: 100%; display: flex; flex-direction: column-reverse; gap: 2px;
  padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.tower-layer {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-elev);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-3);
  display: flex; justify-content: space-between; align-items: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.tower-layer.lit { border-color: var(--ch-amber); color: var(--ch-amber); background: var(--ch-amber-soft); box-shadow: 0 0 8px var(--ch-amber-soft); }
.tower-layer .layer-num { font-size: 0.65rem; opacity: 0.7; }
.choice-panel {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
}
.choice-card {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev);
  font-size: 0.8rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.choice-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.choice-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.choice-card.done { border-color: var(--ch-ok); background: rgba(34,197,94,0.08); }
.choice-card h5 { font-size: 0.85rem; margin-bottom: var(--sp-1); color: var(--accent-ink); }
.choice-card .choice-metrics { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); margin-top: var(--sp-1); }
.pentium-note {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-warn);
  border-radius: var(--r-sm); background: rgba(239,68,68,0.08);
  font-size: 0.8rem; color: var(--ch-warn);
}
.pentium-note b { color: var(--ch-warn); }
.integer-wall {
  width: 100%; padding: var(--sp-3); border: 2px solid var(--ch-warn);
  border-radius: var(--r-sm); background: rgba(239,68,68,0.06);
  display: flex; flex-direction: column; gap: var(--sp-2);
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.wall-prompt { font-size: 0.95rem; color: var(--ch-warn); text-align: center; font-weight: 600; }
.wall-input {
  width: 100%; min-height: 44px; padding: var(--sp-2);
  border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); color: var(--text-1);
  font-family: var(--font-mono); font-size: 0.9rem; text-align: center;
}
.wall-input:focus { border-color: var(--ch-warn); outline: none; }
.wall-reject {
  padding: var(--sp-2); border: 1px solid var(--ch-boss); border-radius: var(--r-sm);
  background: var(--ch-boss-soft); color: var(--ch-boss); font-style: italic;
  font-size: 0.85rem; animation: shake 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S4 IEEE 754 之镜
   ============================================================ */
.num-selector, .zone-selector { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.num-btn, .zone-btn {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.8rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 44px;
}
.num-btn:hover, .zone-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.num-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--glow); }
.zone-btn.active { background: var(--ch-amber); color: #fff; border-color: var(--ch-amber); box-shadow: 0 0 12px var(--ch-amber-soft); }
.ieee-mirror {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); overflow-x: auto;
}
.ieee-mirror svg { width: 100%; min-width: 460px; height: auto; }
.ieee-bit { transition: all 200ms cubic-bezier(0.22,1,0.36,1); }
.ieee-bit.lit.sign { fill: rgba(239,68,68,0.4); stroke: var(--ch-warn); }
.ieee-bit.lit.exp { fill: rgba(245,158,11,0.4); stroke: var(--ch-amber); }
.ieee-bit.lit.mant { fill: rgba(217,119,6,0.4); stroke: var(--ch-amber); }
.ieee-readout {
  padding: var(--sp-2); font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--accent-ink); text-align: center; min-height: 32px;
}
.ieee-readout .inf { color: var(--ch-warn); }
.precision-toggle { display: flex; gap: var(--sp-2); justify-content: center; }
.prec-btn { min-width: 140px; }
.prec-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.zone-detail {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); font-size: 0.82rem;
  min-height: 50px;
}
.zone-detail .zone-name { color: var(--ch-amber); font-weight: 600; }

/* ============================================================
   S5 对阶殿 浮点加法四步
   ============================================================ */
.addition-pipeline {
  width: 100%; display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.pipe-step {
  flex: 1; min-width: 100px; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-elev); text-align: center;
  font-size: 0.78rem; color: var(--text-3); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.pipe-step.lit { border-color: var(--ch-epiphany); color: var(--ch-epiphany-ink); background: var(--ch-epiphany-soft); box-shadow: 0 0 8px var(--ch-epiphany-soft); }
.pipe-step .pipe-idx { display: block; font-family: var(--font-mono); font-size: 0.65rem; }
.mantissa-display {
  width: 100%; display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.mantissa-reg { display: flex; gap: 2px; flex-wrap: wrap; }
.mant-bit {
  width: 18px; height: 24px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-line); border-radius: 2px; background: var(--bg-elev);
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-2);
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.mant-bit.lost { border-color: var(--ch-warn); color: var(--ch-warn); background: rgba(239,68,68,0.10); animation: bitFall 400ms cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes bitFall {
  to { transform: translateY(20px) scale(0.5); opacity: 0; }
}
.round-selector { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.round-btn {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); cursor: pointer;
  font-size: 0.78rem; transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 44px;
}
.round-btn:hover { border-color: var(--ch-epiphany); }
.round-btn.active { background: var(--ch-epiphany); color: #000; border-color: var(--ch-epiphany); }
.ulp-display {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-amber);
  border-radius: var(--r-sm); background: var(--ch-amber-soft);
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--ch-epiphany-ink);
}

/* ============================================================
   S6 误差雪崩
   ============================================================ */
.error-cumulation {
  width: 100%; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.loop-code {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-ink);
  background: var(--bg-elev); padding: var(--sp-2); border-radius: var(--r-xs);
  text-align: center;
}
#s6-curve { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.error-readout {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--ch-warn);
  text-align: center; min-height: 24px;
}
.rounding-compare {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.rounding-compare h4 { font-size: 0.85rem; margin-bottom: var(--sp-2); color: var(--accent-ink); }
.round-bar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.round-bar .bar-label { min-width: 90px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); }
.round-bar .bar-track { flex: 1; height: 18px; background: var(--bg-elev); border-radius: var(--r-xs); border: 1px solid var(--glass-line); overflow: hidden; }
.round-bar .bar-fill { height: 100%; transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.round-bar[data-mode="zero"] .bar-fill { background: var(--ch-warn); }
.round-bar[data-mode="down"] .bar-fill { background: var(--accent); }
.round-bar[data-mode="up"] .bar-fill { background: var(--ch-boss); }
.round-bar[data-mode="nearest"] .bar-fill { background: var(--ch-ok); }
.round-bar .bar-val { min-width: 90px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-ink); }
.cancel-demo, .assoc-demo {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.cancel-demo .readout { font-family: var(--font-mono); }
.cancel-demo .readout.zero { color: var(--ch-warn); font-weight: 700; }
.assoc-result { width: 100%; font-family: var(--font-mono); font-size: 0.8rem; }
.assoc-result .assoc-line { margin: var(--sp-1) 0; }
.assoc-result .assoc-line.eq { color: var(--ch-ok); }
.assoc-result .assoc-line.neq { color: var(--ch-warn); }

/* ============================================================
   S7 FMA 之光
   ============================================================ */
.fma-mode-row { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.fma-btn { min-width: 180px; }
.fma-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.fma-btn.active.fma { background: var(--ch-mod-fma); border-color: var(--ch-mod-fma); }
.fma-visual {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.fma-visual svg { width: 100%; height: auto; }
.fma-case {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.fma-case .readout { font-family: var(--font-mono); }
.fma-case .readout.split { color: var(--ch-warn); }
.fma-case .readout.fma { color: var(--ch-mod-fma); }
.fma-apply {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-mod-fma);
  border-radius: var(--r-sm); background: rgba(16,185,129,0.08);
  font-size: 0.82rem; color: var(--text-1);
}
.fma-apply h4 { color: var(--ch-mod-fma); margin-bottom: var(--sp-2); }

/* ============================================================
   S8 三角天平权衡殿
   ============================================================ */
.balance-scale {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
}
.balance-scale svg { width: 100%; height: auto; max-height: 260px; }
.scenario-config {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
}
.scn-card {
  padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev);
  font-size: 0.8rem; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.scn-card h5 { font-size: 0.85rem; margin-bottom: var(--sp-2); }
.scn-card[data-scn="embed"] h5 { color: var(--ch-amber); }
.scn-card[data-scn="desktop"] h5 { color: var(--accent); }
.scn-card[data-scn="ai"] h5 { color: var(--ch-mod-fma); }
.scn-card .scn-select {
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.scn-pick {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-sunk); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.72rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); text-align: left;
}
.scn-pick:hover { border-color: var(--accent); }
.scn-pick.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.scn-card.matched { border-style: solid; border-color: var(--ch-ok); background: rgba(34,197,94,0.08); }
.scn-card.overflow { border-color: var(--ch-warn); animation: shake 300ms; }
.budget-display {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk);
  font-family: var(--font-mono); font-size: 0.82rem; text-align: center;
}
.budget-display.over { border-color: var(--ch-warn); color: var(--ch-warn); background: rgba(239,68,68,0.08); }
.budget-display.ok { border-color: var(--ch-ok); color: var(--ch-ok); }

/* ============================================================
   S9 Boss 战 · 精度之蚀
   ============================================================ */
#s9-arena { border-color: var(--ch-boss-line); box-shadow: var(--shadow), 0 0 32px var(--ch-boss-soft); }
.q-progress-bar .q-dot.current { background: var(--ch-boss); box-shadow: 0 0 8px var(--ch-boss-soft); }
.ledger-panel {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-epiphany);
  border-radius: var(--r-sm); background: var(--ch-epiphany-soft);
  font-size: 0.8rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2);
}
.ledger-panel .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.q-panel .q-tag {
  display: inline-block; font-size: 0.7rem; font-family: var(--font-mono);
  color: var(--ch-boss); background: var(--ch-boss-soft); padding: 1px 8px;
  border-radius: 3px; margin-bottom: var(--sp-2); letter-spacing: 0.1em;
}
.q-feedback.wrong { border-color: var(--ch-boss); background: var(--ch-boss-soft); color: var(--ch-boss); }
.scar-projection {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft);
}
.scar-projection h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.scar-projection .scar-item {
  padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-1);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.scar-projection .scar-item.lit {
  border-color: var(--ch-epiphany); color: var(--ch-epiphany-ink);
  background: var(--ch-epiphany-soft); box-shadow: 0 0 8px var(--ch-epiphany-soft);
}
.fma-contrast {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ch-mod-fma); border-radius: var(--r-sm);
  background: rgba(16,185,129,0.08); font-size: 0.8rem;
}
.fma-contrast .fma-line { margin: var(--sp-1) 0; }
.fma-contrast .fma-line.before { color: var(--ch-warn); }
.fma-contrast .fma-line.after { color: var(--ch-mod-fma); }

/* ============================================================
   S10 BCD + 知识拼图
   ============================================================ */
.bcd-demo {
  width: 100%; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.bcd-encode { display: flex; flex-direction: column; gap: var(--sp-1); font-family: var(--font-mono); font-size: 0.82rem; }
.bcd-encode .bcd-line { display: flex; align-items: center; gap: var(--sp-2); }
.bcd-encode .bcd-bits { display: flex; gap: 2px; }
.bcd-bit {
  width: 20px; height: 24px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-line); border-radius: 2px; background: var(--bg-elev);
  font-size: 0.65rem; color: var(--text-2); transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.bcd-bit.on { background: var(--ch-amber); color: #fff; border-color: var(--ch-amber); }
.bcd-bit.fix { background: var(--ch-warn); color: #fff; border-color: var(--ch-warn); animation: vPulse 0.4s; }
.bcd-add-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.bcd-add-row .readout { font-family: var(--font-mono); color: var(--ch-ok); }
.bcd-compare {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev); font-size: 0.8rem;
}
.bcd-compare .cmp-row { display: flex; justify-content: space-between; padding: var(--sp-1) 0; border-bottom: 1px solid var(--glass-line); }
.bcd-compare .cmp-row:last-child { border-bottom: none; }
.bcd-compare .cmp-row .cmp-val.bcd { color: var(--ch-amber); }
.bcd-compare .cmp-row .cmp-val.flt { color: var(--accent); }
.puzzle-piece {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev); cursor: grab;
  font-size: 0.8rem; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
  user-select: none;
}
.map-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.realm-achieved {
  width: 100%; margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-md);
  background: var(--ch-epiphany-soft); text-align: center;
  animation: realmGlow 2s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes realmGlow {
  0%, 100% { box-shadow: 0 0 18px var(--ch-epiphany-soft); }
  50% { box-shadow: 0 0 32px rgba(251,191,36,0.4); }
}
.realm-glow {
  font-family: var(--font-serif); font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--ch-epiphany-ink); letter-spacing: 0.3em; font-weight: 700;
}

/* ---------- 补充：图表/对比柱/场景卡片/地图槽位 ---------- */
.cost-bar-row, .round-bar-row {
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1);
}
.cost-label, .round-label {
  min-width: 80px; font-size: var(--fs-small); color: var(--text-2); text-align: right;
}
.cost-bar-track, .round-bar-track {
  flex: 1; height: 24px; background: var(--bg-sunk); border-radius: var(--r-xs);
  overflow: hidden; border: 1px solid var(--glass-line);
}
.cost-bar-fill, .round-bar-fill {
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: var(--sp-2); font-size: var(--fs-small); color: var(--on-accent, #fff);
  border-radius: var(--r-xs); transition: width 500ms cubic-bezier(0.22,1,0.36,1);
}
.scenario-card {
  padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-elev);
  font-size: 0.85rem; min-height: 60px;
}
.scenario-card h5 { font-size: 0.85rem; margin-bottom: var(--sp-1); color: var(--accent-ink); }
.scenario-card .cfg-btn.selected { border-color: var(--ch-ok); background: rgba(34,197,94,0.12); }
.map-slot {
  min-height: 44px; padding: var(--sp-1); border: 1px dashed var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-sunk);
  font-size: 0.72rem; text-align: center; display: flex; align-items: center; justify-content: center;
}
.map-slot.filled { border-style: solid; border-color: var(--ch-ok); background: rgba(34,197,94,0.08); }
.map-slot .dim { color: var(--text-3); }

/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
@media (max-width: 640px) {
  .op-title { font-size: clamp(2rem, 12vw, 3.5rem); }
  .op-sub { letter-spacing: 0.3em; }
  .option-grid { grid-template-columns: 1fr; }
  .choice-panel { grid-template-columns: 1fr; }
  .scenario-config { grid-template-columns: 1fr; }
  .rift-display { grid-template-columns: 1fr; }
  .rift-left { border-right: none; border-bottom: 2px dashed var(--ch-boss); }
  .map-grid { grid-template-columns: repeat(3, 1fr); }
  .fa-row { min-width: 320px; }
  .ieee-mirror svg { min-width: 320px; }
  .delay-clock-row, .calc-input-row, .cancel-demo, .assoc-demo, .fma-case { flex-direction: column; align-items: stretch; }
  .cost-bar .bar-label { min-width: 56px; font-size: 0.72rem; }
  .tower-visual { font-size: 0.7rem; }
  .bcd-encode { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .v-flag.lit { animation: none; }
  .mant-bit.lost { animation: none; opacity: 0.3; }
  .rift-display, .integer-wall { animation: none; }
  .hex-reveal, .wall-reject { animation: none; }
}