/* ============================================================
   ch01「数字逻辑基础：从模拟到数字的跃迁」章节专属样式
   境界：炼气一层·逻辑初开 · 翠绿 var(--accent)
   全部色值走 tokens 变量；连渊真君赤红、顿悟金、退化琥珀为章节专用变量。
   类名体系与半导体 ch01 对齐（.scene/.narr-box/.stage/.glass/.btn/.data-row 等）。
   ============================================================ */

/* ---------- 章节境界色覆写：翠绿炼气 ---------- */
:root, :root[data-theme="light"] {
  --accent: #10B981;
  --accent-ink: #059669;
  --accent-soft: rgba(16, 185, 129, 0.10);
  --glass-line: rgba(16, 185, 129, 0.20);
  --glow: 0 0 18px rgba(16, 185, 129, 0.26);
  --on-accent: #FFFFFF;
}
/* ---------- 章节专用叙事色（连渊/退化/顿悟/噪声） ---------- */
:root {
  --ch-boss: var(--ch-boss);          /* 连渊真君 · 连续/模拟退化赤红 */
  --ch-boss-ink: #DC2626;
  --ch-boss-soft: rgba(239, 68, 68, 0.14);
  --ch-amber: var(--ch-amber);         /* 退化信号琥珀 */
  --ch-amber-soft: rgba(245, 158, 11, 0.14);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟金 */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-noise: #6B7280;         /* 噪声碎屑灰 */
  --ch-noise-soft: rgba(107, 114, 128, 0.16);
  --ch-mirror: #164E4A;        /* 铜镜冷青辉光 */
  --ch-signal-clean: var(--accent);  /* 干净信号翠绿 */
  --ch-signal-degraded: var(--ch-amber);
  --ch-signal-lost: var(--ch-boss);
}
.dlg.shadow { border-left-color: var(--ch-noise); box-shadow: var(--shadow), 0 0 18px var(--ch-noise-soft); }
.dlg.shadow .who { background: var(--ch-noise); color: #FFF; }
.dlg.shadow p { font-style: italic; color: var(--text-3); }

/* ---------- 物品栏（本命符 / 渊账 / 排除刻痕） ---------- */
#inventory {
  position: fixed; left: var(--sp-3); bottom: var(--sp-3); z-index: 110;
  display: flex; gap: var(--sp-2); align-items: flex-end;
}
/* ---------- 场景通用 ---------- */
.narr { max-width: var(--content-w); }
/* 通用画布 */
.chain-cv, .curve-cv, .kmap-cv, .vtc-cv, .boss-cv {
  width: 100%; max-width: 640px; border-radius: var(--r-md);
  background: var(--bg-sunk); border: 1px solid var(--line);
  touch-action: none;
}

/* ---------- S0 反直觉下注热区 ---------- */
.bet-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.bet-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  width: 104px; min-height: 104px; padding: 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);
}
.bet-item .ico { font-size: 1.8rem; filter: grayscale(1) brightness(0.7); transition: filter var(--dur-mid); }
.bet-item.lit .ico { filter: none; }
.bet-item:hover { border-color: var(--accent); }
.bet-item:active { transform: scale(0.95); }
.bet-item.lit { border-color: var(--accent); background: var(--accent-soft); }
.bet-item.faded { opacity: 0.78; }
.bet-item small { color: var(--text-2); font-size: 0.65rem; }
.bet-item .pulse-strip { font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent); letter-spacing: 0.1em; }

.civ-map {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--glass-line); border-radius: var(--r-md);
  background: var(--accent-soft); text-align: center;
  animation: simIn 600ms var(--ease-out); overflow: hidden;
}
.civ-map h4 { color: var(--accent); margin-bottom: var(--sp-2); font-size: var(--fs-sub); letter-spacing: 0.1em; }
#s0-civ-svg { width: 100%; max-width: 400px; height: auto; }
.civ-hub { fill: var(--bg-elev); stroke: var(--accent); stroke-width: 2; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.civ-hub.lit { opacity: 1; filter: drop-shadow(0 0 8px var(--accent)); }
.civ-chip { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.civ-chip.lit { opacity: 1; }
.civ-chip rect { fill: var(--bg-elev); stroke: var(--line-strong); stroke-width: 1; }
.civ-chip.lit rect { stroke: var(--accent); }
.civ-trace { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.civ-trace.lit { opacity: 0.4; }

/* ---------- S1 十六级传输链 ---------- */
.cascade-chain { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.cascade-cv { width: 100%; max-width: 640px; height: 220px; border-radius: var(--r-md); background: var(--bg-sunk); border: 1px solid var(--line); }
.degradation-meter { display: flex; align-items: center; gap: var(--sp-3); width: 100%; }
.snr-track { flex: 1; height: 12px; border-radius: 6px; background: var(--bg-sunk); border: 1px solid var(--line); overflow: hidden; }
.snr-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--ch-boss), var(--ch-amber), var(--accent)); border-radius: 6px; transition: width var(--dur-mid) var(--ease-out); }
.repair-panel { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); width: 100%; }
@media (max-width: 560px) { .repair-panel { grid-template-columns: 1fr; } }
.repair-option {
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; color: var(--text-1); cursor: pointer;
  font-size: var(--fs-small); line-height: 1.4; text-align: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.repair-option:hover { border-color: var(--accent); transform: translateY(-2px); }
.repair-option.fail { border-color: var(--ch-boss); color: var(--ch-boss); background: var(--ch-boss-soft); }
.repair-option.win { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }

/* ---------- S2 三进制对比 / 数制转换 ---------- */
.radix-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); width: 100%; }
@media (max-width: 560px) { .radix-row { grid-template-columns: 1fr; } }
.radix-card {
  padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; cursor: pointer; text-align: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.radix-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.radix-card.chosen { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.radix-card.crashed { border-color: var(--ch-boss); background: var(--ch-boss-soft); }
.radix-card .r-name { font-family: var(--font-serif); font-size: var(--fs-sub); }
.radix-card .r-bit { font-family: var(--font-mono); color: var(--accent); }
.radix-card .r-margin { font-size: 0.7rem; color: var(--text-3); }
.conv-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; justify-content: center; }
.conv-input {
  min-height: 44px; padding: var(--sp-2) var(--sp-4); width: 9em;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--bg-elev); color: var(--text-1); font-family: var(--font-mono);
}
.conv-input:focus { border-color: var(--accent); outline: none; box-shadow: var(--glow); }

/* ---------- S3 编码对比 ---------- */
.code-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); width: 100%; }
@media (max-width: 560px) { .code-row { grid-template-columns: 1fr; } }
.code-card {
  padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  text-align: center; transition: all var(--dur-fast) var(--ease-out);
}
.code-card.win { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.code-card .c-bits { font-family: var(--font-mono); font-size: var(--fs-sub); color: var(--accent); }
.code-card .c-issue { font-size: 0.72rem; color: var(--ch-boss); }

/* ---------- S4 逻辑门搭建 ---------- */
.gate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--sp-2); width: 100%; }
.gate-btn {
  min-height: 44px; padding: var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; color: var(--text-1); cursor: pointer;
  font-family: var(--font-mono); transition: all var(--dur-fast) var(--ease-out);
}
.gate-btn:hover { border-color: var(--accent); color: var(--accent); }
.gate-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tt-table { width: 100%; max-width: 420px; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-small); }
.tt-table th, .tt-table td { border: 1px solid var(--line-strong); padding: var(--sp-1) var(--sp-2); text-align: center; }
.tt-table th { color: var(--accent); }
.tt-row-1 { background: var(--accent-soft); }

/* ---------- S5 真值表 / SOP-POS ---------- */
.sop-expr, .pos-expr { font-family: var(--font-mono); font-size: var(--fs-small); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunk); word-break: break-all; }
.scale-bar-row { display: flex; gap: var(--sp-2); align-items: flex-end; justify-content: center; height: 120px; }
.scale-bar { width: 36px; background: var(--accent); border-radius: 4px 4px 0 0; transition: height var(--dur-mid) var(--ease-out); display: flex; align-items: flex-end; justify-content: center; color: var(--on-accent); font-size: 0.6rem; padding-bottom: 4px; }
.scale-bar.warn { background: var(--ch-amber); }
.scale-bar.bad { background: var(--ch-boss); }

/* ---------- S6 代数化简步进 ---------- */
.alg-expr { font-family: var(--font-mono); font-size: var(--fs-small); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunk); min-height: 3em; word-break: break-all; }
.alg-len-track { width: 100%; height: 12px; border-radius: 6px; background: var(--bg-sunk); border: 1px solid var(--line); overflow: hidden; }
.alg-len-fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width var(--dur-mid) var(--ease-out), background var(--dur-fast); }
.alg-len-fill.bad { background: var(--ch-boss); }

/* ---------- S7 卡诺图 ---------- */
.kmap-wrap { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.kmap-grid { display: grid; grid-template-columns: repeat(4, 56px); grid-template-rows: repeat(4, 56px); gap: 2px; }
@media (max-width: 560px) { .kmap-grid { grid-template-columns: repeat(4, 44px); grid-template-rows: repeat(4, 44px); } }
.kmap-cell {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--text-3); cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.kmap-cell.v1 { background: rgba(16, 185, 129, 0.45); color: var(--accent-ink); font-weight: 700; }
.kmap-cell.v0 { background: rgba(94, 234, 212, 0.05); }
.kmap-cell.dc { background: var(--ch-noise-soft); color: var(--ch-noise); }
.kmap-cell.circled { box-shadow: 0 0 0 2px var(--accent) inset; }
.kmap-cell:hover { border-color: var(--accent); }

/* ---------- S8 VTC 扫描 ---------- */
.vtc-cv { height: 260px; }
.spec-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.spec-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); }
.fanout-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.fanout-btn { min-height: 44px; min-width: 56px; padding: var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: transparent; color: var(--text-1); cursor: pointer; font-family: var(--font-mono); transition: all var(--dur-fast); }
.fanout-btn:hover { border-color: var(--accent); color: var(--accent); }
.fanout-btn.bad { border-color: var(--ch-boss); color: var(--ch-boss); }

/* ---------- S9 Boss 战 · 排除法收网器 ---------- */
.boss-stage { width: 100%; display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; }
.boss-entity {
  width: 100%; padding: var(--sp-4); border: 1px solid var(--ch-boss); border-radius: var(--r-md);
  background: var(--ch-boss-soft); text-align: center; position: relative; overflow: hidden;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.boss-wave { font-family: var(--font-mono); color: var(--ch-boss); letter-spacing: 0.3em; font-size: 1.4rem; }
.boss-entity.cracked .boss-wave { color: var(--accent); }
.boss-entity.disintegrated { opacity: 0.3; }
.q-refute { margin-top: var(--sp-3); padding: var(--sp-3); border-left: 3px solid var(--ch-boss); background: var(--ch-boss-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-small); color: var(--text-2); }
.scar-grid { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.scar-card {
  min-height: 44px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--ch-noise-soft); border-radius: var(--r-md);
  background: transparent; color: var(--text-3); font-size: var(--fs-small); text-align: center;
  opacity: 0.5; transition: all var(--dur-mid) var(--ease-out);
}
/* ---------- S10 知识图谱点亮 ---------- */
.frag-pool { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.chain-slot {
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); color: var(--text-3);
  transition: all var(--dur-fast) var(--ease-out);
}
.gate-text {
  font-family: var(--font-serif); font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: 0.3em; text-align: center; margin: var(--sp-5) 0;
}
.gate-text span { color: var(--text-3); transition: color var(--dur-slow) var(--ease-out), text-shadow var(--dur-slow); }
/* 移动端触摸目标兜底 */
button, .q-option, .repair-option, .bet-item, .radix-card, .gate-btn, .kmap-cell, .frag-node, .chain-slot, .fanout-btn, .scar-card {
  min-height: 44px;
}