/* ============================================================
   ch13 · 百器朝宗 — 章节样式
   章节色：赭红 #955539 → S10 过渡到雌黄 #FFC64B
   BJT 三色：发射极金 / 基区碧 / 集电极银
   光电色：七彩渐变   功率色：电弧白
   Boss：百器光魔（光-电-力三象同体）
   ============================================================ */
:root {
  --accent: #955539;
  --accent-ink: #C88B6F;
  --accent-soft: rgba(149,85,57,0.15);
  --ch13-golden: #FFC64B;
  --ch13-golden-soft: rgba(255,198,75,0.18);
  --bjt-e: #D97706;
  --bjt-e-soft: rgba(217,119,6,0.2);
  --bjt-b: #059669;
  --bjt-b-soft: rgba(5,150,105,0.2);
  --bjt-c: #60A5FA;
  --bjt-c-soft: rgba(96,165,250,0.2);
  --opto-rainbow: linear-gradient(90deg,#EF4444,#F59E0B,#10B981,#3B82F6,#8B5CF6);
  --power-arc: #E5E7EB;
  --power-arc-soft: rgba(229,231,235,0.25);
  --devil: #7C3AED;
  --devil-ink: #8B5CF6;
  --devil-soft: rgba(124,58,237,0.15);
  --demon: #DC2626;
  --demon-ink: #EF4444;
  --demon-soft: rgba(220,38,38,0.15);
}
:root[data-theme='dark'] {
  --accent: #C88B6F;
  --accent-ink: #955539;
  --accent-soft: rgba(200,139,111,0.18);
  --devil: #A78BFA;
  --devil-ink: #7C3AED;
  --bjt-e: #F59E0B;
  --bjt-b: #34D399;
  --bjt-c: #93C5FD;
}

/* ====== 开场 ====== */
#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(--bjt-e) 0%, var(--accent) 40%, var(--opto-rainbow) 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: 90px 1fr 70px; 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;
}

/* ====== 通用容器 ====== */
.bjt-stage, .beta-stage, .hbt-stage, .opto-stage, .power-stage {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}
.bjt-canvas, .beta-canvas, .hbt-canvas, .opto-canvas, .power-canvas {
  width: 100%; display: block; height: 260px;
}
.arena-canvas { width: 100%; height: 240px; display: block; }
.constraint-canvas { width: 100%; height: 260px; display: block; }
.map-canvas { width: 100%; height: 300px; display: block; }

/* ====== readout ====== */
.bjt-readout, .beta-readout, .hbt-readout, .opto-readout, .power-readout {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--accent-ink); text-align: center; margin-top: var(--sp-2);
}
.bjt-readout b, .beta-readout b, .hbt-readout b, .opto-readout b, .power-readout b {
  color: var(--text-1);
}

/* ====== Tabs 通用 ====== */
.mode-tabs, .hbt-tabs, .opto-tabs, .power-tabs {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap;
}
.mode-tabs .tab, .hbt-tabs .tab, .opto-tabs .tab, .power-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;
}
.mode-tabs .tab.active, .hbt-tabs .tab.active, .opto-tabs .tab.active, .power-tabs .tab.active {
  border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft);
}

/* ====== 推导步骤 ====== */
.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(--bjt-c);
  text-align: center;
  margin: var(--sp-2) 0;
  overflow-x: auto;
}

/* ====== Boss whisper / 台词 ====== */
.boss-whisper {
  text-align: center;
  color: var(--devil-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(--bjt-c);
  padding-left: var(--sp-3);
  margin: var(--sp-3) 0;
}
.dlg.shockley .who { color: var(--bjt-c); }
.dlg.sach {
  border-left: 3px solid var(--bjt-b);
  padding-left: var(--sp-3);
  margin: var(--sp-3) 0;
}
.dlg.sach .who { color: var(--bjt-b); }
.dlg.devil {
  border-left: 3px solid var(--devil);
  padding-left: var(--sp-3);
  margin: var(--sp-3) 0;
}
.dlg.devil .who { color: var(--devil-ink); }
.dlg.devil em { color: var(--devil); font-style: normal; }

/* ====== 分类拖拽区域 ====== */
.classify-area {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-2); margin: var(--sp-3) 0;
}
.classify-drop {
  border: 2px dashed var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  text-align: center;
  font-size: var(--fs-small);
  min-height: 70px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: all .3s;
  cursor: pointer;
}
.classify-drop.filled {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.classify-drop .dim { font-size: 11px; }

/* ====== 章末收束 ====== */
.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;
  transition: all 1s;
}
.scar-show.lit {
  border-color: var(--ch13-golden);
  background: radial-gradient(circle at 50% 50%, var(--ch13-golden-soft), transparent 70%);
  box-shadow: 0 0 30px var(--ch13-golden-soft);
}
.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); }

/* ====== S10 仪式过渡到雌黄 ====== */
.s10-ceremony {
  --accent: var(--ch13-golden);
  --accent-ink: #B8922E;
  --accent-soft: var(--ch13-golden-soft);
  background: linear-gradient(180deg, rgba(149,85,57,0.08) 0%, rgba(255,198,75,0.12) 100%);
}
.s10-golden .frag-grid .fg.lit {
  border-color: var(--ch13-golden);
  color: #92700E;
  background: var(--ch13-golden-soft);
  box-shadow: 0 0 16px var(--ch13-golden-soft);
}
.s10-golden .next-hook {
  border-color: var(--ch13-golden);
  background: var(--ch13-golden-soft);
}
.s10-golden .next-hook b { color: #92700E; }

/* ====== 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: 70px 1fr 55px; gap: 4px; }
  .mode-tabs, .hbt-tabs, .opto-tabs, .power-tabs { gap: 4px; }
  .mode-tabs .tab, .hbt-tabs .tab, .opto-tabs .tab, .power-tabs .tab { padding: 4px 8px; font-size: 11px; }
  .frag-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .classify-area { grid-template-columns: 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;
}