/* ============================================================
   ch12 · 逻辑之王 — 章节样式
   章节色：赭红 #955539（筑基统一）
   MOSFET 四色：栅极银灰 / 氧化层乳蓝 / 沟道赭红 / 心魔暗红
   Boss：逻辑之王（通道主宰）
   ============================================================ */
:root {
  --accent: #955539;
  --accent-ink: #C88B6F;
  --accent-soft: rgba(149,85,57,0.15);
  --mos-metal: #94A3B8;
  --mos-ox: #BFDBFE;
  --mos-si: #955539;
  --mos-metal-soft: rgba(148,163,184,0.25);
  --mos-ox-soft: rgba(191,219,254,0.25);
  --demon: #DC2626;
  --demon-ink: #EF4444;
  --demon-soft: rgba(220,38,38,0.15);
  --king: #D97706;
  --king-ink: #F59E0B;
  --king-soft: rgba(217,119,6,0.15);
  --h-blue: #60A5FA;
  --h-blue-soft: rgba(96,165,250,0.3);
}
:root[data-theme='dark'] {
  --accent: #C88B6F;
  --accent-ink: #955539;
  --accent-soft: rgba(200,139,111,0.18);
  --demon: #F87171;
  --demon-ink: #DC2626;
  --king: #F59E0B;
  --king-ink: #D97706;
}

/* ====== 开场 ====== */
#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);
  background: radial-gradient(ellipse at 50% 60%, rgba(149,85,57,0.22) 0%, rgba(8,12,22,0) 65%);
}
#startBtn { opacity: 1; }
.op-kicker { color: var(--accent-ink); }
.op-title span {
  display: inline-block;
  background: linear-gradient(135deg, var(--mos-metal) 0%, var(--accent) 50%, var(--king) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(149,85,57,0.25);
}
#opening.fade-out {
  opacity: 0;
  transition: opacity .5s ease-out;
  pointer-events: none;
}

/* ====== 场景骨架 ====== */
.scene-kicker { color: var(--accent-ink); letter-spacing: .4em; }
.scene-title { font-family: var(--font-serif); color: var(--text-1); }
.scene-sub { color: var(--text-3); }

/* ====== 通用滑杆行 ====== */
.strain-slider-row {
  display: grid; grid-template-columns: 80px 1fr 80px; gap: var(--sp-2);
  align-items: center; margin: var(--sp-2) 0;
  font-family: var(--font-mono); font-size: var(--fs-small);
}
.strain-slider-row input[type=range] {
  accent-color: var(--accent);
  touch-action: pan-y;
  width: 100%;
}
.strain-slider-row input[type=range]::-webkit-slider-thumb {
  width: 24px; height: 24px;
}
.strain-slider-row input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px;
}

/* ====== 通用容器 ====== */
.ch-stage, .vt-stage, .body-stage, .iv-stage, .out-stage,
.sub-stage, .sce-stage, .evo-stage {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}
.ch-canvas, .vt-canvas, .body-canvas, .iv-canvas, .out-canvas,
.sub-canvas, .sce-canvas, .evo-canvas {
  width: 100%; display: block;
}
.ch-canvas { height: 260px; }
.vt-canvas, .body-canvas, .iv-canvas, .out-canvas,
.sub-canvas, .sce-canvas, .evo-canvas { height: 240px; }
.pano-canvas { width: 100%; height: 300px; display: block; }

/* ====== readout 通用 ====== */
.ch-readout, .vt-readout, .body-readout, .iv-readout, .out-readout,
.sub-readout, .sce-readout, .evo-readout {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--accent-ink); text-align: center; margin-top: var(--sp-2);
}
.ch-readout b, .vt-readout b, .body-readout b, .iv-readout b,
.out-readout b, .sub-readout b, .sce-readout b, .evo-readout b {
  color: var(--text-1);
}

/* ====== S1/S3 推导步骤 ====== */
.derive-steps {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3); margin: var(--sp-3) 0;
  background: var(--glass-bg);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.dstep {
  padding: var(--sp-2); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--text-2); line-height: 1.7;
  border-left: 3px solid var(--line);
  opacity: 0.4; transition: all .5s;
}
.dstep.lit {
  opacity: 1; border-left-color: var(--accent);
  color: var(--text-1); background: var(--accent-soft);
}
.dstep b { color: var(--accent-ink); }

/* ====== 公式条 ====== */
.formula-strip {
  background: rgba(0,0,0,.35);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--mos-ox);
  text-align: center;
  margin: var(--sp-2) 0;
  overflow-x: auto;
}

/* ====== Tabs 通用 ====== */
.sce-tabs, .evo-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.sce-tabs .tab, .evo-tabs .tab {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); font-size: var(--fs-small);
  font-family: var(--font-mono); cursor: pointer; transition: all .25s;
}
.sce-tabs .tab.active, .evo-tabs .tab.active {
  border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft);
}

/* ====== Boss whisper / 台词 ====== */
.boss-whisper {
  text-align: center;
  color: var(--demon-ink);
  font-family: var(--font-serif);
  font-style: italic;
  margin: var(--sp-4) 0;
  opacity: .85;
}
.entropy-pulse {
  display: inline-block;
  color: var(--demon-ink);
  animation: entropyBreathe 2.6s ease-in-out infinite;
}
@keyframes entropyBreathe {
  0%,100% { opacity: .5; text-shadow: 0 0 0 transparent; }
  50% { opacity: 1; text-shadow: 0 0 14px var(--demon-soft); }
}

/* 对话样式 */
.dlg.shockley {
  border-left: 3px solid var(--mos-ox);
  padding-left: var(--sp-3);
  margin: var(--sp-3) 0;
}
.dlg.shockley .who { color: #7DD3FC; }
.dlg.demon {
  border-left: 3px solid var(--demon);
  padding-left: var(--sp-3);
  margin: var(--sp-3) 0;
}
.dlg.demon .who { color: var(--demon-ink); }
.dlg.demon em { color: var(--demon); font-style: normal; }
.dlg.king {
  border-left: 3px solid var(--king);
  padding-left: var(--sp-3);
  margin: var(--sp-3) 0;
}
.dlg.king .who { color: var(--king-ink); }
.dlg.king em { color: var(--king); font-style: normal; }

/* ====== 章末收束 ====== */
.frag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.frag-grid .fg {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  font-size: var(--fs-small);
  font-family: var(--font-mono);
  color: var(--text-3);
  background: var(--glass-bg);
  transition: all .5s;
}
.frag-grid .fg.lit {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: 0 0 16px var(--accent-soft);
}
.scar-show {
  width: 180px; height: 180px;
  margin: var(--sp-4) auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(149,85,57,0.25), transparent 70%);
  border: 1px solid var(--accent);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.scar-show svg { width: 70%; height: 70%; }
.next-hook {
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
  text-align: center;
  color: var(--text-2);
  font-family: var(--font-serif);
  line-height: 1.8;
}
.next-hook b { color: var(--accent-ink); }

/* ====== Insight ====== */
.insight {
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
  background: var(--accent-soft);
}
.insight-label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--accent);
  letter-spacing: .1em;
  margin-bottom: var(--sp-2);
}
.insight h3 {
  font-family: var(--font-serif);
  color: var(--accent-ink);
  margin-bottom: var(--sp-2);
}
.insight p {
  font-size: var(--fs-small);
  color: var(--text-2);
  line-height: 1.8;
}

/* ====== 移动端 ====== */
@media (max-width: 640px) {
  .strain-slider-row { grid-template-columns: 60px 1fr 60px; gap: 4px; }
  .sce-tabs, .evo-tabs { gap: 4px; }
  .sce-tabs .tab, .evo-tabs .tab { padding: 4px 8px; font-size: 11px; }
  .frag-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ====== 触控增强 ====== */
input[type=range] {
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 99px;
  background: var(--line);
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--accent-ink);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--accent-ink);
  cursor: pointer;
}