/* ============================================================
   ch25「产业风云」章节样式
   元婴六层·产业风云（元婴期圆满/收束章）
   境界色：月白 #D6ECF0（S0–S9）
   章末征兆：玄青 #3D3B4F（化神期 ch26 在望）
   业纹：六环咬合生态图（月白）+ 四色流动光带 + 玄青"业"字
   ============================================================ */
:root {
  --realm-color: #D6ECF0;
  --realm-glow: #D6ECF033;
  --next-realm-color: #3D3B4F;   /* 化神期玄青征兆 */
  --next-realm-glow: #3D3B4F55;
  --gold-coin: #F2BE45;          /* 商鲲金币鳞 */
  --euv-color: #7B1FA2;          /* EUV 紫光柱 */
  --geo-color: #B71C1C;          /* 地缘关制裁红 */
  --eco-color: #8D6E63;          /* 玄金（悟道光） */
}

/* 开场标题（月白） */
.op-title span,
.op-sub {
  color: var(--realm-color);
}
/* 元婴期·月白光晕：开场与场景头点缀 */
.op-kicker,
.scene-kicker {
  color: var(--realm-color);
}
/* focus-breath 呼吸光晕（下一场景按钮引导） */
.focus-breath {
  box-shadow: 0 0 0 0 #D6ECF066;
  animation: ch25Breath 2s ease-in-out infinite;
}
@keyframes ch25Breath {
  0%, 100% { box-shadow: 0 0 0 0 #D6ECF066; }
  50% { box-shadow: 0 0 16px 4px #D6ECF044; }
}

/* S9 Boss 战触发按钮：月白描边 + 金币鳞光晕（元婴→化神临界） */
#s9-start {
  border-color: var(--realm-color);
  color: var(--realm-color);
  position: relative;
}
#s9-start::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #F2BE4522, transparent 70%);
  animation: ch25BossPulse 2.4s ease-in-out infinite;
}
@keyframes ch25BossPulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}
#s9-start:hover {
  background: var(--realm-color);
  color: #1a1a1a;
}

/* S3 光刻巨塔·EUV 紫光警示 */
.scene[data-scene="s3"] .scene-kicker {
  color: var(--euv-color);
}
.scene[data-scene="s3"] .insight {
  border-left-color: var(--euv-color);
}

/* S5 摩尔经济学台·成本反转红 */
.scene[data-scene="s5"] .scene-kicker {
  color: #D24735;
}

/* S7 地缘关·黑铁血色 */
.scene[data-scene="s7"] .scene-kicker {
  color: var(--geo-color);
}
.scene[data-scene="s7"] .insight {
  border-left-color: var(--geo-color);
}

/* S8 人才厅·周期钟暖色（青灯书院） */
.scene[data-scene="s8"] .scene-kicker {
  background: linear-gradient(90deg, var(--realm-color) 0%, var(--eco-color) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* S9 三问台·月白与玄金交战（境界临界） */
.scene[data-scene="s9"] .scene-title {
  background: linear-gradient(90deg, var(--realm-color) 0%, var(--eco-color) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   业纹（S10 本命石第二十五痕）
   六环咬合生态图（月白）+ 四色流动光带 + 玄青"业"字
   痕中央"业"字大篆 —— 产业之业、百业之业、生态之业
   ============================================================ */
.s10-scar-yewen {
  display: inline-block;
  position: relative;
  width: 96px;
  height: 56px;
  vertical-align: middle;
  margin: 0 0.4rem;
}
.s10-scar-yewen svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* 六环光带（月白） */
.s10-scar-yewen .yewen-ring {
  stroke: var(--realm-color);
  stroke-width: 1.6;
  fill: none;
  filter: drop-shadow(0 0 4px #D6ECF066);
}
/* 四色流动光带：数据/资金/物流/人才 */
.s10-scar-yewen .yewen-flow-data { stroke: #177CB0; }
.s10-scar-yewen .yewen-flow-cap  { stroke: var(--gold-coin); }
.s10-scar-yewen .yewen-flow-logi { stroke: #66BB6A; }
.s10-scar-yewen .yewen-flow-tal  { stroke: #B57BFF; }
.s10-scar-yewen .yewen-flow {
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 3 2;
  animation: ch25Flow 3s linear infinite;
}
@keyframes ch25Flow {
  to { stroke-dashoffset: -20; }
}
/* 玄青"业"字大篆（化神期颜色提前渗出） */
.s10-scar-yewen .yewen-glyph {
  font-family: var(--font-serif, serif);
  font-size: 11px;
  font-weight: 700;
  fill: var(--next-realm-color);
  text-anchor: middle;
  filter: drop-shadow(0 0 3px #3D3B4F88);
}

/* S10 碎片归位·产业生态图容器（K-244~K-253） */
.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(214,236,240,0.12);
  color: var(--realm-color);
  box-shadow: 0 0 12px rgba(214,236,240,0.3);
}

/* 境界突破铭刻（玄青化神） */
.inscription {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--next-realm-color);
  border-radius: 8px;
  background: rgba(61,59,79,0.18);
  color: var(--realm-color);
  font-family: var(--font-serif, serif);
  text-align: center;
  animation: ch25Inscription 1.2s var(--ease-out, ease);
}
@keyframes ch25Inscription {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* S10 玄青之门（月白退·玄青升的境界转换仪式） */
.s10-xuan-gate {
  display: block;
  margin: 1.4rem auto;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  position: relative;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(180deg, rgba(214,236,240,0.18) 0%, rgba(61,59,79,0.32) 55%, rgba(61,59,79,0.55) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(61,59,79,0.65) 0%, transparent 70%);
  border: 1px solid rgba(61,59,79,0.6);
  box-shadow: 0 0 32px rgba(61,59,79,0.35), inset 0 -20px 40px rgba(61,59,79,0.22);
  overflow: hidden;
}
.s10-xuan-gate::before {
  content: '后 摩 尔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif, serif);
  font-size: 1.4rem;
  letter-spacing: 0.4em;
  color: rgba(214,236,240,0.85);
  text-shadow: 0 0 12px rgba(214,236,240,0.5), 0 0 20px rgba(61,59,79,0.8);
}
.s10-xuan-gate::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(214,236,240,0.5), rgba(61,59,79,0.7));
}

/* 后摩尔新器件预览粒子（NC-FET/TFET/2D/MRAM/SiC/GaN/量子） */
.s10-postmoore {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0;
}
.s10-postmoore .pm-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: ch25PmBlink 2.6s ease-in-out infinite;
}
.s10-postmoore .pm-chip:nth-child(1) { color: var(--gold-coin); border-color: #F2BE4555; } /* NC-FET 金 */
.s10-postmoore .pm-chip:nth-child(2) { color: #B57BFF; border-color: #B57BFF55; animation-delay: .3s; } /* TFET 紫 */
.s10-postmoore .pm-chip:nth-child(3) { color: #4FC3F7; border-color: #4FC3F755; animation-delay: .6s; } /* 2D 蓝绿 */
.s10-postmoore .pm-chip:nth-child(4) { color: #E57373; border-color: #E5737355; animation-delay: .9s; } /* MRAM 自旋红 */
.s10-postmoore .pm-chip:nth-child(5) { color: #FFB74D; border-color: #FFB74D55; animation-delay: 1.2s; } /* SiC/GaN 黄蓝 */
.s10-postmoore .pm-chip:nth-child(6) { color: var(--realm-color); border-color: #D6ECF055; animation-delay: 1.5s; } /* 量子 幽光 */
@keyframes ch25PmBlink {
  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(117,135,138,0.4);
  border-radius: 8px;
  background: rgba(7,11,20,0.5);
  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: ch25FormulaFloat 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; }
.s10-entropy-formulas .f:nth-child(4) { animation-delay: 1.5s; }
@keyframes ch25FormulaFloat {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* 章末 ch26 解锁链接：从月白渐变到玄青（化神期过渡） */
.s10-next-link {
  display: inline-block;
  padding: 0.5rem 1.4rem;
  border-radius: 8px;
  border: 1px solid;
  border-image: linear-gradient(90deg, var(--realm-color), var(--next-realm-color)) 1;
  background: linear-gradient(90deg, rgba(214,236,240,0.10), rgba(61,59,79,0.22));
  color: var(--realm-color);
  text-decoration: none;
  transition: all 0.3s var(--ease-out, ease);
}
.s10-next-link:hover {
  background: linear-gradient(90deg, rgba(214,236,240,0.20), rgba(61,59,79,0.34));
  box-shadow: 0 0 18px rgba(61,59,79,0.45);
}
/* ============================================================
   通用交互组件样式 · 元婴期月白+紫色主题
   ============================================================ */

/* 组件头 */
.cmp-head {
  margin-bottom: 0.6rem;
}
.cmp-sub {
  font-size: 0.82rem;
  color: var(--text-3, #75878A);
  margin-top: 0.2rem;
}

/* 世界地图盒（S0） */
.cmp-map-box {
  position: relative;
  margin: 0.6rem 0;
  border: 1px solid rgba(214,236,240,0.15);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(7,11,20,0.5);
}
.cmp-world-canvas {
  display: block;
  width: 100%;
  height: 200px;
}
.cmp-city-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid;
  background: rgba(7,11,20,0.8);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
  padding: 0;
}
.cmp-city-marker:hover {
  transform: translate(-50%, -50%) scale(1.4);
  box-shadow: 0 0 10px currentColor;
}
.cmp-city-marker.visited {
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.cmp-city-info {
  margin: 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.82rem;
  color: var(--text-2, #CBD5E1);
  border-top: 1px solid rgba(214,236,240,0.1);
  background: rgba(7,11,20,0.4);
  line-height: 1.6;
}
.city-tag {
  font-weight: bold;
  font-size: 0.85rem;
}

/* 六环光带（S0） */
.cmp-ring-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0;
}
.cmp-ring-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem 0.7rem;
  border: 1px solid;
  border-radius: 8px;
  background: rgba(7,11,20,0.4);
  color: var(--text-3, #75878A);
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}
.cmp-ring-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px currentColor;
}
.cmp-ring-node.visited {
  background: rgba(214,236,240,0.1);
}
.ring-num {
  font-size: 0.7rem;
  opacity: 0.6;
}
.ring-name {
  font-weight: bold;
}
.cmp-ring-info {
  margin: 0.4rem 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.82rem;
  color: var(--text-2, #CBD5E1);
  border-left: 3px solid var(--realm-color);
  background: rgba(214,236,240,0.06);
  border-radius: 0 6px 6px 0;
  line-height: 1.6;
}

/* 商鲲预演面板（S0） */
.cmp-predict-panel {
  margin: 0.6rem 0;
  padding: 0.8rem;
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 8px;
  background: rgba(139,92,246,0.06);
}
.predict-q {
  font-size: 0.85rem;
  color: #B57BFF;
  margin-bottom: 0.6rem;
  font-style: italic;
}
.cmp-predict-btn {
  width: 100%;
  padding: 0.6rem;
  border-color: #8B5CF6;
  color: #B57BFF;
  background: rgba(139,92,246,0.1);
}
.cmp-predict-btn:hover {
  background: #8B5CF6;
  color: #fff;
  box-shadow: 0 0 16px rgba(139,92,246,0.4);
}
.cmp-predict-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 警告列表（S0） */
.cmp-warn-list {
  margin: 0.4rem 0;
}
.cmp-warn-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.3rem 0;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid #F59E0B;
  background: rgba(245,158,11,0.08);
  border-radius: 0 6px 6px 0;
  font-size: 0.82rem;
  color: var(--text-2, #CBD5E1);
  line-height: 1.5;
  animation: ch25WarnSlide 0.5s ease-out;
}
@keyframes ch25WarnSlide {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}
.warn-tag {
  font-weight: bold;
  color: #F59E0B;
  flex-shrink: 0;
}
.warn-text {
  flex: 1;
}
.warn-hook {
  color: #8B5CF6;
  font-size: 0.78rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 重定向 & 导师提示 */
.cmp-redirect {
  margin: 0.4rem 0;
  padding: 0.6rem 0.8rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: bold;
  animation: ch25WarnSlide 0.6s ease-out;
}
.red-text {
  color: #EF4444;
}
.cmp-mentor {
  margin: 0.4rem 0;
  padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--realm-color);
  background: rgba(214,236,240,0.06);
  border-radius: 0 6px 6px 0;
  font-size: 0.82rem;
  color: var(--realm-color);
  font-style: italic;
  line-height: 1.6;
}

/* 控件区（S6/S8） */
.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(214,236,240,0.15);
  border-radius: 8px;
  background: rgba(7,11,20,0.4);
}
.cmp-label {
  font-size: 0.82rem;
  color: var(--text-3, #75878A);
  white-space: nowrap;
  min-width: 5rem;
}
.cmp-val {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--realm-color);
  min-width: 4rem;
  text-align: right;
}
.cmp-slider {
  flex: 1;
  min-width: 120px;
  max-width: 220px;
  accent-color: #8B5CF6;
  cursor: pointer;
}
.cmp-pill {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 999px;
  background: rgba(7,11,20,0.4);
  color: var(--text-3, #75878A);
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 200ms ease-out;
}
.cmp-pill:hover {
  border-color: var(--realm-color);
  color: var(--realm-color);
}
.cmp-pill.active {
  border-color: var(--realm-color);
  background: rgba(214,236,240,0.15);
  color: var(--realm-color);
}

/* 画布容器 */
.cmp-canvas-box {
  margin: 0.6rem 0;
  border: 1px solid rgba(214,236,240,0.12);
  border-radius: 8px;
  padding: 0.5rem;
  background: var(--ch-bg-warm, #070B14);
  overflow: hidden;
}
/* 可视化行（S6） */
.cmp-vis-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}
.cmp-curve-box, .cmp-wafer-box {
  flex: 1;
  min-width: 180px;
}

/* 读数面板（S6） */
.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(7,11,20,0.3);
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.ro-k {
  font-size: 0.75rem;
  color: var(--text-3, #75878A);
}
.ro-item b {
  color: var(--realm-color);
  font-size: 0.95rem;
}

/* 公式组装区（S8） */
.cmp-asm-box {
  margin: 0.6rem 0;
}
.cmp-formula-zone {
  margin: 0.4rem 0;
  padding: 0.8rem;
  border: 1px solid rgba(214,236,240,0.15);
  border-radius: 8px;
  background: rgba(7,11,20,0.4);
}
.formula-label {
  font-size: 0.78rem;
  color: var(--text-3, #75878A);
  margin-bottom: 0.4rem;
}
.formula-line {
  font-family: var(--font-mono, monospace);
  font-size: 1rem;
  color: var(--text-2, #CBD5E1);
  text-align: center;
  padding: 0.4rem;
  transition: all 0.3s ease;
}
.formula-line.partial {
  color: var(--gold-coin);
}
.formula-line.assembled {
  color: var(--realm-color);
  text-shadow: 0 0 8px rgba(214,236,240,0.4);
}
.formula-line sup {
  font-size: 0.72rem;
}

/* 填空区（S8） */
.cmp-blank-box {
  margin: 0.6rem 0;
}
.cmp-blank-q {
  font-size: 0.85rem;
  color: var(--text-2, #CBD5E1);
  margin-bottom: 0.4rem;
}
.cmp-opt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cmp-token {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 6px;
  background: rgba(7,11,20,0.4);
  color: var(--text-2, #CBD5E1);
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  transition: all 200ms ease-out;
}
.cmp-token:hover {
  border-color: #8B5CF6;
}
.cmp-token.correct {
  border-color: #22C55E;
  background: rgba(34,197,94,0.15);
  color: #22C55E;
}
.cmp-token.wrong {
  border-color: #EF4444;
  background: rgba(239,68,68,0.15);
  color: #EF4444;
  animation: ch25Shake 0.4s ease;
}
@keyframes ch25Shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.cmp-ok {
  padding: 0.6rem;
  text-align: center;
  color: var(--realm-color);
  font-weight: bold;
  font-size: 0.9rem;
  text-shadow: 0 0 10px rgba(214,236,240,0.4);
}

/* 数值计算区（S8） */
.cmp-numeric-box {
  margin: 0.6rem 0;
  padding: 0.8rem;
  border: 1px solid rgba(214,236,240,0.15);
  border-radius: 8px;
  background: rgba(7,11,20,0.4);
  animation: ch25WarnSlide 0.5s ease-out;
}
.cmp-calc-title {
  font-size: 0.88rem;
  font-weight: bold;
  color: var(--realm-color);
  margin-bottom: 0.4rem;
}
.cmp-calc-line {
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  color: var(--text-2, #CBD5E1);
  margin: 0.2rem 0;
  line-height: 1.6;
}
.cmp-calc-q {
  font-size: 0.88rem;
  color: var(--gold-coin);
  font-weight: bold;
  margin: 0.6rem 0 0.4rem;
}
.cmp-answer {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line-strong, #475569);
  border-radius: 6px;
  background: rgba(7,11,20,0.4);
  color: var(--text-2, #CBD5E1);
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 200ms ease-out;
}
.cmp-answer:hover {
  border-color: #8B5CF6;
}
.cmp-answer.correct {
  border-color: #22C55E;
  background: rgba(34,197,94,0.15);
  color: #22C55E;
}
.cmp-answer.wrong {
  border-color: #EF4444;
  background: rgba(239,68,68,0.15);
  color: #EF4444;
  animation: ch25Shake 0.4s ease;
}

/* 硅周期钟摆（S8） */
.cmp-cycle-box {
  margin: 0.6rem 0;
  padding: 0.6rem;
  border: 1px solid rgba(214,236,240,0.12);
  border-radius: 8px;
  background: rgba(7,11,20,0.3);
  animation: ch25WarnSlide 0.5s ease-out;
}
.cmp-cycle-title {
  font-size: 0.88rem;
  font-weight: bold;
  color: var(--realm-color);
  margin-bottom: 0.4rem;
  text-align: center;
}
.cmp-cycle-canvas {
  height: 170px;
}

/* 响应式适配 */
@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; }
  .cmp-world-canvas { height: 160px; }
  .cmp-ring-banner { gap: 0.3rem; }
  .cmp-ring-node { padding: 0.3rem 0.5rem; font-size: 0.75rem; }
  .cmp-warn-item { flex-direction: column; gap: 0.2rem; }
  .warn-hook { white-space: normal; }
}