/* ============================================================
   ch26「超凡入圣」章节样式
   化神一层·后摩尔之路·六道奇径（化神期开篇）
   境界色：玄青 #3D3B4F（S1–S10 渗透完成）
   S0 残光：月白 #D6ECF0（元婴圆满→化神过渡）
   六光纹：NCFET 银白 / TFET 金橙 / 二维 虹彩 / 自旋 紫蓝 /
           SET 深蓝 / 宽禁带 电白
   越纹：六色光纹拧绳 + 硅晶剪影（翠绿）+ 玄青"越"字
   暗狱：熵魔沙漏色 var(--entropy)（S7 全章最暗）
   ============================================================ */
:root {
  --realm-color: #3D3B4F;        /* 化神期玄青 —— 过 verify 第 7 项 */
  --realm-glow: #3D3B4F33;
  --moon-remnant: #D6ECF0;       /* S0 月白残光（元婴退散） */
  --moon-remnant-glow: #D6ECF055;
  /* 六光纹色 */
  --light-nc:    #C0C0C0;       /* NCFET 银白 */
  --light-tfet:  #F59E0B;       /* TFET 金橙 */
  --light-2d:    #7DD3FC;       /* 二维 虹彩 */
  --light-spin:  #7C3AED;       /* 自旋 紫蓝 */
  --light-set:   #1E40AF;       /* SET 深蓝 */
  --light-wbg:   #F0F0F0;       /* 宽禁带 电白 */
  --silicon-core:#10B981;       /* 硅晶剪影 翠绿（地基） */
  --entropy:     #050508;       /* S7 暗狱全章最暗 */
  --entropy-glow:#05050899;
  --hci-color:   #E55934;       /* HCI 橙红裂痕 */
  --nbti-color:  #7C3AED;       /* NBTI 紫蓝裂痕 */
  --tddb-color:  #E0E0E0;      /* TDDB 银白裂痕 */
}

/* ---------- 开场标题（玄青） ---------- */
.op-title span,
.op-sub {
  color: var(--realm-color);
}
.op-quote {
  border-left-color: var(--realm-color);
}

/* 化神期·玄青光晕：开场与场景头点缀 */
.op-kicker,
.scene-kicker {
  color: var(--realm-color);
}

/* 顿悟框边色（玄青） */
.insight {
  border-left-color: var(--realm-color);
}

/* ---------- focus-breath 呼吸光晕（下一场景按钮引导 · 玄青） ---------- */
.focus-breath {
  box-shadow: 0 0 0 0 #3D3B4F66;
  animation: ch26Breath 2s ease-in-out infinite;
}
@keyframes ch26Breath {
  0%, 100% { box-shadow: 0 0 0 0 #3D3B4F66; }
  50%      { box-shadow: 0 0 16px 4px #3D3B4F44; }
}

/* ---------- S8 Boss 触发按钮：六光纹描边 + 玄青压迫光晕 ---------- */
#s9-start {
  border-color: var(--realm-color);
  color: var(--realm-color);
  position: relative;
  background: linear-gradient(135deg, rgba(61,59,79,0.10), rgba(61,59,79,0.24));
}
#s9-start::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(192,192,192,0.12), rgba(245,158,11,0.10), rgba(125,211,252,0.10),
    rgba(124,58,237,0.12), rgba(30,64,175,0.10), rgba(240,240,240,0.10), transparent 70%);
  animation: ch26BossPulse 2.4s ease-in-out infinite;
}
@keyframes ch26BossPulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
#s9-start:hover {
  background: var(--realm-color);
  color: #f4f4f8;
}

/* ============================================================
   S0 序章 · 玄青界门——摩尔之墙
   月白残光 → 玄青渐变（元婴圆满退散 · 化神渗透仪式）
   ============================================================ */
.scene[data-scene="s0"] .scene-kicker {
  background: linear-gradient(90deg, var(--moon-remnant) 0%, var(--realm-color) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.scene[data-scene="s0"] .scene-title {
  background: linear-gradient(90deg, rgba(214,236,240,0.85) 0%, var(--realm-color) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.scene[data-scene="s0"] .insight {
  border-left-color: var(--realm-color);
}

/* ============================================================
   S1 负电容径 · HZO 铁电之桥（银白光纹）
   ============================================================ */
.scene[data-scene="s1"] .scene-kicker { color: var(--light-nc); }
.scene[data-scene="s1"] .insight {
  border-left-color: var(--light-nc);
}

/* ============================================================
   S2 隧穿径 · 针尖渡关（金橙光纹 · 能带图）
   ============================================================ */
.scene[data-scene="s2"] .scene-kicker { color: var(--light-tfet); }
.scene[data-scene="s2"] .insight {
  border-left-color: var(--light-tfet);
}

/* ============================================================
   S3 二维径 · 薄到极限（虹彩光纹 · 蜂窝六元环）
   ============================================================ */
.scene[data-scene="s3"] .scene-kicker { color: var(--light-2d); }
.scene[data-scene="s3"] .insight {
  border-left-color: var(--light-2d);
}

/* ============================================================
   S4 自旋径 · 磁电之舞（紫蓝光纹）
   ============================================================ */
.scene[data-scene="s4"] .scene-kicker { color: var(--nbti-color); }
.scene[data-scene="s4"] .insight {
  border-left-color: var(--nbti-color);
}

/* ============================================================
   S5 单电子径 · 库仑孤岛（深蓝光纹）
   ============================================================ */
.scene[data-scene="s5"] .scene-kicker { color: var(--light-set); }
.scene[data-scene="s5"] .insight {
  border-left-color: var(--light-set);
}

/* ============================================================
   S6 宽禁带径 · 电弧之王（电白光纹 · 三塔对峙）
   ============================================================ */
.scene[data-scene="s6"] .scene-kicker { color: var(--light-wbg); }
.scene[data-scene="s6"] .insight {
  border-left-color: var(--light-wbg);
}

/* ============================================================
   S7 暗狱 · 时间的侵蚀（全章最暗 · 熵魔主场）
   HCI 橙红 / NBTI 紫蓝 / TDDB 银白 —— 三裂痕
   ============================================================ */
.scene[data-scene="s7"] {
  position: relative;
}
.scene[data-scene="s7"]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(5,5,8,0.0) 0%, rgba(5,5,8,0.32) 70%, rgba(5,5,8,0.55) 100%);
  z-index: 0;
}
.scene[data-scene="s7"] > .scene-inner { position: relative; z-index: 1; }
.scene[data-scene="s7"] .scene-kicker { color: var(--hci-color); }
.scene[data-scene="s7"] .scene-title {
  background: linear-gradient(90deg, var(--hci-color) 0%, var(--nbti-color) 50%, var(--tddb-color) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.scene[data-scene="s7"] .insight {
  border-left-color: var(--hci-color);
  background: rgba(5,5,8,0.32);
}

/* ============================================================
   S8 裂隙 · 极限真人降世（六光纹道袍 · 幻象崩碎）
   ============================================================ */
.scene[data-scene="s8"] .scene-kicker {
  background: linear-gradient(90deg,
    var(--light-nc) 0%, var(--light-tfet) 20%, var(--light-2d) 40%,
    var(--nbti-color) 60%, var(--light-set) 80%, var(--light-wbg) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.scene[data-scene="s8"] .scene-title {
  background: linear-gradient(90deg, var(--realm-color) 0%, var(--light-nc) 50%, var(--realm-color) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   S9 极限真人 · 三问（玄青清算 · 七刻痕收网）
   ============================================================ */
.scene[data-scene="s9"] .scene-kicker { color: var(--realm-color); }
.scene[data-scene="s9"] .scene-title {
  background: linear-gradient(90deg, var(--realm-color) 0%, var(--light-nc) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* 七道排除刻痕收网样式（boss.js .carve-item.used 补强） */
.scene[data-scene="s9"] .carve-item.used {
  color: var(--realm-color);
  text-shadow: 0 0 8px #3D3B4F88;
}

/* ============================================================
   越纹（S10 本命石第二十六痕）
   六色光纹拧绳 + 硅晶剪影（翠绿）+ 玄青"越"字
   痕中央"越"字大篆 —— 越过边界、看见边界之后的超越
   ============================================================ */
.s10-scar-yuewen {
  display: inline-block;
  position: relative;
  width: 96px;
  height: 56px;
  vertical-align: middle;
  margin: 0 0.4rem;
}
.s10-scar-yuewen svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* 六色光纹拧绳（绕硅晶剪影流转） */
.s10-scar-yuewen .yuewen-strand {
  stroke-width: 1.6;
  fill: none;
  stroke-dasharray: 4 2;
  animation: ch26StrandFlow 4s linear infinite;
  filter: drop-shadow(0 0 3px currentColor);
}
@keyframes ch26StrandFlow {
  to { stroke-dashoffset: -24; }
}
.s10-scar-yuewen .s-nc   { stroke: var(--light-nc); }
.s10-scar-yuewen .s-tfet { stroke: var(--light-tfet); }
.s10-scar-yuewen .s-2d   { stroke: var(--light-2d); }
.s10-scar-yuewen .s-spin { stroke: var(--nbti-color); }
.s10-scar-yuewen .s-set  { stroke: var(--light-set); }
.s10-scar-yuewen .s-wbg  { stroke: var(--light-wbg); }
/* 硅晶剪影（翠绿，地基不被六色淹没） */
.s10-scar-yuewen .yuewen-silicon {
  fill: var(--silicon-core);
  filter: drop-shadow(0 0 5px #10B98188);
}
/* 玄青"越"字大篆（化神期本色） */
.s10-scar-yuewen .yuewen-glyph {
  font-family: var(--font-serif, serif);
  font-size: 11px;
  font-weight: 700;
  fill: var(--realm-color);
  text-anchor: middle;
  filter: drop-shadow(0 0 3px #3D3B4FAA);
}

/* ============================================================
   S10 碎片归位 · 越纹生成容器（K-264~K-266 三问碎片）
   ============================================================ */
.s10-curve-host {
  margin: 1.2rem 0;
  padding: 1rem;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 12px;
  background: rgba(0,0,0,0.2);
}
.frag-node:hover {
  border-color: var(--realm-color);
  color: var(--realm-color);
}
.frag-node.lit {
  border-color: var(--realm-color);
  background: rgba(61,59,79,0.18);
  color: var(--light-nc);
  box-shadow: 0 0 12px rgba(61,59,79,0.4);
}

/* ============================================================
   S10 TRL 成熟度路线图（后摩尔器件 · 各归其位）
   ============================================================ */
.s10-trl-roadmap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0;
}
.s10-trl-roadmap .trl-chip {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  background: rgba(0,0,0,0.25);
  animation: ch26TrlBlink 3s ease-in-out infinite;
}
/* TRL 越高越亮（量产已落地） · 越低越幽（实验室原型） */
.s10-trl-roadmap .trl-9 {
  color: var(--silicon-core); border-color: #10B98155;
}
.s10-trl-roadmap .trl-8 {
  color: var(--light-nc); border-color: #C0C0C055; animation-delay: .3s;
}
.s10-trl-roadmap .trl-7 {
  color: var(--light-2d); border-color: #7DD3FC55; animation-delay: .6s;
}
.s10-trl-roadmap .trl-4 {
  color: var(--light-tfet); border-color: #F59E0B55; animation-delay: .9s;
}
.s10-trl-roadmap .trl-3 {
  color: var(--nbti-color); border-color: #7C3AED55; animation-delay: 1.2s;
}
.s10-trl-roadmap .trl-2 {
  color: var(--light-set); border-color: #1E40AF55; animation-delay: 1.5s;
}
@keyframes ch26TrlBlink {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; box-shadow: 0 0 10px currentColor; }
}

/* ============================================================
   熵魔热力学公式漂浮（S10 正面现身 · 化神深空伏笔）
   ============================================================ */
.s10-entropy-formulas {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border: 1px dashed rgba(5,5,8,0.6);
  border-radius: 8px;
  background: rgba(7,11,20,0.55);
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  color: #B8C0C4;
  text-align: center;
  line-height: 1.9;
}
.s10-entropy-formulas .f {
  display: inline-block;
  margin: 0 0.6rem;
  animation: ch26FormulaFloat 4s ease-in-out infinite;
}
.s10-entropy-formulas .f:nth-child(2) { animation-delay: .5s; }
.s10-entropy-formulas .f:nth-child(3) { animation-delay: 1s; }
@keyframes ch26FormulaFloat {
  0%, 100% { transform: translateY(0);    opacity: .7; }
  50%      { transform: translateY(-4px); opacity: 1;  }
}

/* ============================================================
   境界突破铭刻（化神一层 · 越纹初成）
   ============================================================ */
.inscription {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--realm-color);
  border-radius: 8px;
  background: rgba(61,59,79,0.22);
  color: var(--moon-remnant);
  font-family: var(--font-serif, serif);
  text-align: center;
  animation: ch26Inscription 1.2s var(--ease-out, ease);
}
@keyframes ch26Inscription {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   章末 ch27 解锁链接：玄青描边 + 量子界门预告
   ============================================================ */
.s10-next-link {
  display: inline-block;
  padding: 0.5rem 1.4rem;
  border-radius: 8px;
  border: 1px solid var(--realm-color);
  background: linear-gradient(90deg, rgba(61,59,79,0.18), rgba(61,59,79,0.32));
  color: var(--light-nc);
  text-decoration: none;
  transition: all 0.3s var(--ease-out, ease);
}
.s10-next-link:hover {
  background: linear-gradient(90deg, rgba(61,59,79,0.32), rgba(61,59,79,0.46));
  box-shadow: 0 0 18px rgba(61,59,79,0.55);
  color: var(--light-wbg);
}
/* ============================================================
   通用交互组件样式 · 化神期玄青/赤红主题
   ============================================================ */

/* 组件头 */
.cmp-head {
  margin-bottom: 0.6rem;
}
/* 控件区 */
.cmp-ctrl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(61, 59, 79, 0.25);
  border-radius: 8px;
  background: rgba(10, 10, 26, 0.4);
}
.cmp-val {
  font-size: 0.85rem;
  font-weight: bold;
  color: #EF4444;
  min-width: 4rem;
  text-align: right;
}
.cmp-slider {
  flex: 1;
  min-width: 120px;
  max-width: 220px;
  accent-color: #EF4444;
  cursor: pointer;
}

/* 切换按钮 */
.cmp-toggle {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 6px;
  background: rgba(10, 10, 26, 0.5);
  color: var(--text-3, #94A3B8);
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 200ms ease-out;
}
.cmp-toggle:hover { border-color: #EF4444; }
.cmp-toggle.active {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}
.cmp-pill {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 999px;
  background: rgba(10, 10, 26, 0.5);
  color: var(--text-3, #94A3B8);
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 200ms ease-out;
}
.cmp-pill:hover { border-color: #EF4444; }
.cmp-pill.active {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

/* 画布容器 */
.cmp-canvas-box {
  margin: 0.6rem 0;
  border: 1px solid rgba(61, 59, 79, 0.2);
  border-radius: 8px;
  padding: 0.5rem;
  background: var(--ch-bg-warm, #0A0A1A);
  overflow: hidden;
}
/* 读数面板 */
.cmp-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 8px;
  background: rgba(10, 10, 26, 0.3);
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.ro-item b {
  color: #EF4444;
  font-size: 0.95rem;
}

/* 通量说明 */
.cmp-flux {
  margin: 0.5rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(61, 59, 79, 0.2);
  border-radius: 8px;
  background: rgba(10, 10, 26, 0.3);
  font-size: 0.82rem;
}
.flux-eq {
  text-align: center;
  margin-bottom: 0.4rem;
  color: var(--text-1, #F1F5F9);
}
.flux-eq b { color: #EF4444; }

/* 警告框 */
.cmp-warn {
  margin: 0.5rem 0;
  padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--light-tfet);
  background: rgba(245, 158, 11, 0.08);
  color: #FCD34D;
  font-size: 0.82rem;
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
}
.cmp-warn.danger {
  border-left-color: #EF4444;
  background: rgba(239, 68, 68, 0.1);
  color: #FCA5A5;
}

/* 可视化行 */
.cmp-vis-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}
.cmp-img-box, .cmp-path-box {
  flex: 1;
  min-width: 180px;
}
.path-label {
  font-size: 0.78rem;
  color: var(--text-3, #94A3B8);
  margin-bottom: 0.3rem;
}

/* ============================================================
   S0 时间轴游标专属样式
   ============================================================ */
.ch26-tl-canvas {
  height: 260px;
  cursor: ew-resize;
}
.ch26-tl-detail {
  font-size: 0.82rem;
  line-height: 1.6;
}
.ch26-trl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.5rem;
}
.ch26-trl-chip {
  padding: 0.25rem 0.6rem;
  border: 1px solid;
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  background: rgba(10, 10, 26, 0.4);
}

/* ============================================================
   S10 知识图谱点亮专属样式
   ============================================================ */
.ch26-scar-weave {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0;
}
.ch26-scar-strand {
  padding: 0.5rem 1rem;
  border: 1px solid;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-serif, serif);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 300ms ease-out;
  opacity: 0.6;
}
.ch26-scar-strand:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.ch26-scar-strand.lit {
  opacity: 1;
}
.ch26-scar-strand:disabled {
  cursor: default;
}
.ch26-fuse-area {
  margin: 1rem 0;
  padding: 1rem;
  border: 2px solid #EF4444;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.08);
  text-align: center;
  animation: ch26FuseGlow 1.5s ease-out;
}
@keyframes ch26FuseGlow {
  0% { opacity: 0; transform: scale(0.9); }
  60% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
.ch26-fuse-text {
  font-family: var(--font-serif, serif);
  font-size: 1rem;
  color: var(--text-1, #F1F5F9);
}
.ch26-kp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.4rem;
  margin: 1rem 0;
}
.ch26-kp-node {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
  border-radius: 6px;
  background: rgba(10, 10, 26, 0.3);
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 250ms ease-out;
  text-align: center;
}
.ch26-kp-node:hover {
  border-color: #EF4444;
  transform: translateY(-1px);
}
.ch26-narration {
  margin: 1.2rem 0;
  padding: 1rem;
  border-left: 3px solid #EF4444;
  background: rgba(239, 68, 68, 0.06);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-serif, serif);
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--text-2, #CBD5E1);
  animation: ch26NarrIn 1s ease-out;
}
.ch26-narration p {
  margin: 0.3rem 0;
}
@keyframes ch26NarrIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

/* 响应式适配 */
@media (max-width: 600px) {
  .cmp-ctrl { flex-direction: column; align-items: stretch; }
  .cmp-slider { max-width: 100%; }
  .cmp-vis-row { flex-direction: column; }
  .cmp-canvas { height: 200px; }
  .ch26-tl-canvas { height: 200px; }
  .ch26-kp-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
}