/* ============================================================
   ch11 · 栅极魅影 — 章节样式
   章节色：赭红 #955539（筑基统一）
   MOS 三层：金属栅银灰 / 氧化层乳蓝 / 硅赭红
   Boss：栅极魅影（Si-SiO2 界面态人形）
   ============================================================ */
:root {
  --accent: #955539;
  --accent-ink: #C88B6F;
  --accent-soft: rgba(149,85,57,0.15);
  /* MOS 三层色 */
  --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);
  /* 界面态/魅影色 */
  --phantom: #6B7280;
  --phantom-ink: #9CA3AF;
  --h-blue: #60A5FA;
  --h-blue-soft: rgba(96,165,250,0.3);
  /* 四类电荷色 */
  --chg-f: #F59E0B;
  --chg-it: #6B7280;
  --chg-m: #EAB308;
  --chg-ot: #7C3AED;
}
:root[data-theme='dark'] {
  --accent: #C88B6F;
  --accent-ink: #955539;
  --accent-soft: rgba(200,139,111,0.18);
  --phantom: #9CA3AF;
  --phantom-ink: #6B7280;
}

/* ====== 开场 ====== */
#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(--mos-ox) 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;
}

/* ====== 通用容器 ====== */
.cv-stage, .fb-stage, .vp-stage, .vth-stage,
.freq-stage, .dit-stage, .hkm-stage, .qrel-stage {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}
.cv-canvas, .fb-canvas, .vp-canvas, .vth-canvas,
.freq-canvas, .dit-canvas, .hkm-canvas, .qrel-canvas {
  width: 100%; display: block;
}
.cv-canvas { height: 260px; }
.fb-canvas, .vp-canvas, .vth-canvas, .freq-canvas, .dit-canvas, .hkm-canvas, .qrel-canvas { height: 240px; }

/* ====== C-V 频率切换 ====== */
.freq-switch { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.freq-switch .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;
}
.freq-switch .tab.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.cv-readout, .freq-readout {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--accent-ink); text-align: center; margin-top: var(--sp-2);
}
.cv-readout b, .freq-readout b { color: var(--text-1); }

/* ====== S1 功函数差 ====== */
.fb-picker { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.fb-picker .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;
}
.fb-picker .tab.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }

/* ====== S2 分压条 ====== */
.vp-bars { margin: var(--sp-2) 0; }
.vp-bar-wrap {
  display: grid; grid-template-columns: 50px 1fr 70px; gap: var(--sp-2);
  align-items: center; margin: 4px 0;
  font-family: var(--font-mono); font-size: var(--fs-small);
}
.vp-label { color: var(--text-3); text-align: right; }
.vp-bar {
  height: 20px; border-radius: 99px; border: 1px solid var(--line);
  background: rgba(0,0,0,.2); overflow: hidden; position: relative;
}
.vp-fill {
  height: 100%; border-radius: 99px; width: 0%;
  transition: width .3s;
}
.vp-bar-wrap:first-child .vp-fill { background: var(--accent); }
.vp-bar-wrap:last-child .vp-fill { background: var(--mos-ox); }
.vp-val { color: var(--text-2); font-size: var(--fs-small); }
.region-label {
  text-align: center; font-family: var(--font-serif);
  font-size: var(--fs-sub); color: var(--accent-ink);
  padding: var(--sp-2); border-radius: var(--r-sm);
  background: var(--accent-soft);
}

/* ====== 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); }
.vth-readout {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--accent-ink); text-align: center; margin-top: var(--sp-2);
}
.vth-readout b { color: var(--text-1); }

/* ====== S4 频率扫描 ====== */

/* ====== S5 四类电荷 ====== */
.charge-legend {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-2); font-family: var(--font-mono);
  font-size: var(--fs-small);
}
.chg-item {
  padding: 3px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.chg-f { border-color: var(--chg-f); color: var(--chg-f); }
.chg-it { border-color: var(--chg-it); color: var(--chg-it); }
.chg-m { border-color: var(--chg-m); color: var(--chg-m); }
.chg-ot { border-color: var(--chg-ot); color: var(--chg-ot); }

/* ====== S6 HKMG ====== */
.hkm-switch { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.hkm-switch .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;
}
.hkm-switch .tab.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.hkm-readout {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--accent-ink); text-align: center; margin-top: var(--sp-2);
}
.hkm-readout b { color: var(--text-1); }

/* ====== S7 量子/可靠性/缩放 tabs ====== */
.qrel-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.qrel-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;
}
.qrel-tabs .tab.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.qrel-readout {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--text-2); text-align: center; margin-top: var(--sp-2); line-height: 1.6;
}
.qrel-readout b { color: var(--accent-ink); }

/* ====== S8 MOS全景图 ====== */
.mos-map { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--glass-bg); padding: var(--sp-3); }
.mos-map-canvas { width: 100%; height: 300px; display: block; }

/* 八叛逆照片 */
.eight-photo { margin: var(--sp-3) 0; }
.photo-frame {
  border: 2px solid #8B7355; border-radius: var(--r-sm);
  background: linear-gradient(145deg, #3A2F28, #2A231C);
  padding: var(--sp-4); text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.photo-faces {
  display: flex; justify-content: center; gap: var(--sp-2);
  flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.photo-face {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #8B7355, #6B5B4E);
  border: 1px solid #A0917E;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #D4C5B5; font-family: var(--font-mono);
  transition: all .3s; cursor: pointer;
}
.photo-face:hover { transform: scale(1.15); box-shadow: 0 0 12px rgba(149,85,57,0.4); }
.photo-face .name { font-size: 9px; }
.photo-caption {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: #8B7355; font-style: italic;
}

/* ====== 伏笔/台词 ====== */
.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;
}
.boss-whisper {
  text-align: center;
  color: var(--phantom-ink);
  font-family: var(--font-serif);
  font-style: italic;
  margin: var(--sp-4) 0;
  opacity: .85;
}
.entropy-pulse {
  display: inline-block;
  color: var(--danger-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(--danger-soft); }
}

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

/* ====== 章末收束 ====== */
.frag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.frag-grid .fg {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  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; }
  .vp-bar-wrap { grid-template-columns: 40px 1fr 55px; }
  .freq-switch, .fb-picker, .hkm-switch, .qrel-tabs { gap: 4px; }
  .freq-switch .tab, .fb-picker .tab, .hkm-switch .tab, .qrel-tabs .tab { padding: 4px 8px; font-size: 11px; }
  .photo-face { width: 36px; height: 36px; font-size: 8px; }
  .frag-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .charge-legend { font-size: 10px; }
}

/* ====== 触控增强 ====== */
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;
}