:root {
  --realm-color: #FFC64B;
  --realm-glow: #FFC64B33;
  --parasitic-color: #8B2500;
  --parasitic-glow: #8B250055;
}
/* 顿悟框边色（雌黄） */
.insight {
  border-left-color: var(--realm-color);
}

/* focus-breath 呼吸光晕（下一场景按钮引导） */
.focus-breath {
  box-shadow: 0 0 0 0 #FFC64B66;
  animation: ch18Breath 2s ease-in-out infinite;
}

@keyframes ch18Breath {
  0%, 100% { box-shadow: 0 0 0 0 #FFC64B66; }
  50% { box-shadow: 0 0 16px 4px #FFC64B44; }
}

/* ============================================================
   ch18 专属：莫比乌斯序纹（S10 本命石第十八痕）
   一个旋转的莫比乌斯环 + 寄生暗红影
   ============================================================ */
.s10-scar-mobius {
  display: inline-block;
  width: 56px;
  height: 32px;
  position: relative;
  vertical-align: middle;
  margin: 0 0.4rem;
}

/* 莫比乌斯环主体：雌黄环 + 暗红寄生影 */
.s10-scar-mobius::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* 寄生暗红影（环背面） */
    radial-gradient(ellipse at 50% 100%, var(--parasitic-color) 0%, transparent 60%),
    /* 莫比乌斯环正面（雌黄） */
    conic-gradient(from 0deg,
      var(--realm-color) 0deg,
      #E0A93C 90deg,
      var(--realm-color) 180deg,
      #E0A93C 270deg,
      var(--realm-color) 360deg);
  -webkit-mask: radial-gradient(ellipse 24px 14px at 50% 50%, transparent 40%, #000 50%);
          mask: radial-gradient(ellipse 24px 14px at 50% 50%, transparent 40%, #000 50%);
  animation: ch18MobiusSpin 8s linear infinite;
  box-shadow: 0 0 12px #FFC64B55;
}

/* 环中央"约束即道"三字暗示（极小） */
.s10-scar-mobius::after {
  content: '約';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif, serif);
  font-size: 10px;
  color: var(--realm-color);
  text-shadow: 0 0 4px var(--realm-color);
  opacity: 0.85;
}

@keyframes ch18MobiusSpin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* ============================================================
   S9 Boss 战触发按钮：雌黄描边 + 寄生暗红警示
   ============================================================ */
#s9-start {
  border-color: var(--realm-color);
  color: var(--realm-color);
  background: rgba(139, 37, 0, 0.08);
  position: relative;
}
#s9-start:hover {
  background: var(--realm-color);
  color: #1a1a1a;
  box-shadow: 0 0 18px #FFC64B66, 0 0 32px #8B250044;
}

/* ============================================================
   ch18 专属：寄生暗红辉光（S4/S5/S6/S9 寄生苏醒/Boss 氛围）
   通过 scene[data-bg] 选择器注入氛围
   ============================================================ */
.scene[data-bg="s4"] .scene-head,
.scene[data-bg="s6"] .scene-head,
.scene[data-bg="s9"] .scene-head {
  position: relative;
}
.scene[data-bg="s4"] .scene-kicker,
.scene[data-bg="s9"] .scene-kicker {
  color: var(--realm-color);
  text-shadow: 0 0 8px #8B250066;
}

/* S4 闩锁幽灵氛围：暗红脉动 */
.scene[data-bg="s4"] .stage.glass {
  border-color: rgba(139, 37, 0, 0.4);
  box-shadow: 0 0 0 1px rgba(139, 37, 0, 0.2), 0 8px 32px rgba(139, 37, 0, 0.12);
}

/* S9 Boss 战前奏：黑白格纹 + 雌黄 */
.scene[data-bg="s9"] .stage.glass {
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 8px,
      rgba(0, 0, 0, 0.02) 8px,
      rgba(0, 0, 0, 0.02) 16px),
    var(--glass-bg, rgba(20, 24, 35, 0.55));
  border-color: rgba(255, 198, 75, 0.4);
}

/* ============================================================
   流程使 avatar 黑白格纹光刻版风格（zeng type）
   ============================================================ */
.dlg.zeng {
  border-left: 3px solid transparent;
  border-image: linear-gradient(to bottom,
    #000 0%, #000 25%,
    #fff 25%, #fff 50%,
    #000 50%, #000 75%,
    #fff 75%, #fff 100%) 1;
}
.dlg.zeng .who {
  color: var(--realm-color);
  font-weight: 600;
}

/* ============================================================
   闩锁幽灵（mist type） · 暗红嘶嘶
   ============================================================ */
.dlg.mist {
  border-left-color: var(--parasitic-color);
  background: linear-gradient(90deg, rgba(139, 37, 0, 0.08), transparent 60%);
}
.dlg.mist .who {
  color: var(--parasitic-color);
  font-style: italic;
  text-shadow: 0 0 6px #8B250066;
}
.dlg.mist .avatar {
  filter: drop-shadow(0 0 6px #8B2500aa) saturate(0.6);
}

/* ============================================================
   S10 十碎片归位网格
   ============================================================ */
.frag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  margin: 1rem 0;
}

.frag-node {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line, rgba(22, 24, 35, 0.12));
  border-radius: 8px;
  background: var(--glass-bg, rgba(20, 24, 35, 0.45));
  color: var(--text-3, #75878A);
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.25s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  text-align: center;
}

.frag-node:hover {
  border-color: var(--realm-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px #FFC64B33;
}

.frag-node.lit {
  border-color: var(--realm-color);
  background: linear-gradient(135deg, rgba(255, 198, 75, 0.18), rgba(255, 198, 75, 0.06));
  color: var(--realm-color);
  box-shadow: 0 0 14px #FFC64B44, inset 0 0 8px #FFC64B22;
  animation: ch18FragGlow 2.4s ease-in-out infinite;
}

@keyframes ch18FragGlow {
  0%, 100% { box-shadow: 0 0 10px #FFC64B33, inset 0 0 6px #FFC64B11; }
  50%      { box-shadow: 0 0 18px #FFC64B66, inset 0 0 12px #FFC64B33; }
}

/* ============================================================
   百级台阶视觉暗示（S0 scene-head 装饰）
   ============================================================ */
.scene[data-bg="s0"] .scene-head::after {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 0.6rem;
  background: repeating-linear-gradient(90deg,
    var(--realm-color) 0, var(--realm-color) 2px,
    transparent 2px, transparent 8px);
  opacity: 0.4;
}

/* ============================================================
   境界突破铭文（S10-break）
   ============================================================ */
.inscription {
  margin-top: 1.2rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--realm-color);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 198, 75, 0.14), rgba(255, 198, 75, 0.04));
  color: var(--realm-color);
  font-family: var(--font-serif, serif);
  font-size: 1.05rem;
  text-align: center;
  text-shadow: 0 0 12px #FFC64B66;
  animation: ch18InscriptionReveal 1.2s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

@keyframes ch18InscriptionReveal {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   暗影物品栏（inv-fog）寄生暗红描边
   ============================================================ */
#inv-fog {
  position: relative;
}
#inv-fog::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #8B250055, transparent 60%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}

/* ============================================================
   暗色模式下氛围增强
   ============================================================ */
:root[data-theme="dark"] .scene[data-bg="s4"] .stage.glass,
:root[data-theme="dark"] .scene[data-bg="s9"] .stage.glass {
  box-shadow: 0 0 0 1px rgba(139, 37, 0, 0.3), 0 12px 40px rgba(139, 37, 0, 0.18);
}

:root[data-theme="dark"] .dlg.mist {
  background: linear-gradient(90deg, rgba(139, 37, 0, 0.14), transparent 70%);
}

:root[data-theme="dark"] .frag-node.lit {
  background: linear-gradient(135deg, rgba(255, 198, 75, 0.24), rgba(255, 198, 75, 0.08));
}

/* ============================================================
   S6 ESD测试台警示黄
   ============================================================ */
.scene[data-bg="s6"] .scene-kicker {
  color: var(--realm-color);
  text-shadow: 0 0 6px #FFD70044;
}

/* S7 流程星图：金辉+雌黄 */
.scene[data-bg="s7"] .scene-kicker {
  color: var(--realm-color);
  text-shadow: 0 0 8px #FFD70055;
}

/* S10 序纹收尾：雌黄大盛 */
.scene[data-bg="s10"] .scene-head::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 0.6rem;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--realm-color) 20%,
    #FFD700 50%,
    var(--realm-color) 80%,
    transparent 100%);
  opacity: 0.7;
  box-shadow: 0 0 12px #FFC64B66;
}

/* ============================================================
   交互组件通用工具类
   ============================================================ */
.hidden { display: none !important; }

/* 排除刻痕条目 */
.carve-item {
  padding: 0.4rem 0.6rem;
  margin: 0.3rem 0;
  border-left: 3px solid var(--line, rgba(22,24,35,0.12));
  border-radius: 0 4px 4px 0;
  background: var(--glass-bg, rgba(20,24,35,0.4));
  font-size: 0.85rem;
  color: var(--text-2, #475569);
  font-family: var(--font-mono, monospace);
  animation: ch18CarveIn 0.3s ease-out;
}
.carve-item.used {
  border-left-color: var(--parasitic-color);
  color: var(--parasitic-color);
  opacity: 0.7;
}
@keyframes ch18CarveIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   S0 三铁律石碑按钮
   ============================================================ */
.cmp-law-btn {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 198, 75, 0.3);
  border-radius: 8px;
  background: rgba(255, 198, 75, 0.06);
  color: var(--text-1, #1e293b);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s ease-out;
}
.cmp-law-btn:hover {
  border-color: var(--realm-color);
  background: rgba(255, 198, 75, 0.14);
  box-shadow: 0 0 12px #FFC64B33;
  transform: translateX(4px);
}
:root[data-theme="dark"] .cmp-law-btn {
  color: #F1F5F9;
}

/* ============================================================
   流水线动画器通用样式（S1 CMOS截面 / S5 大马士革）
   ============================================================ */
.cmp-pipeline-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.8rem;
  border-radius: 10px;
  background: var(--glass-bg, rgba(20,24,35,0.4));
}

.cmp-cs-canvas {
  display: block;
  margin: 0 auto;
}

.cmp-cs-label {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-3, #75878A);
  font-family: var(--font-mono, monospace);
}

/* 工艺步骤流水线条 */
.cmp-step-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.4rem 0;
}

.cmp-step-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem;
  border-radius: 5px;
  font-size: 0.72rem;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  transition: all 0.25s ease-out;
}

.cmp-step-item.pending {
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-3, #75878A);
  border: 1px solid transparent;
}

.cmp-step-item.active {
  background: linear-gradient(135deg, var(--realm-color), #F59E0B);
  color: #1a1a1a;
  font-weight: 700;
  border: 1px solid var(--realm-color);
  box-shadow: 0 0 10px #FFC64B66;
  transform: scale(1.06);
}

.cmp-step-item.done {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.cmp-step-num {
  font-weight: 700;
  opacity: 0.8;
}

.cmp-step-text {
  letter-spacing: 0.02em;
}

/* 控制行 */
.cmp-ctrl-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cmp-play-btn,
.cmp-step-btn {
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s ease-out;
  border: 1px solid var(--line, rgba(22,24,35,0.12));
  background: var(--glass-bg, rgba(20,24,35,0.4));
  color: var(--text-2, #475569);
}
.cmp-play-btn:hover,
.cmp-step-btn:hover {
  border-color: var(--realm-color);
  color: var(--realm-color);
}
:root[data-theme="dark"] .cmp-play-btn,
:root[data-theme="dark"] .cmp-step-btn {
  color: #CBD5E1;
}

.cmp-speed-sel {
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  font-size: 0.75rem;
  background: var(--glass-bg, rgba(20,24,35,0.4));
  color: var(--text-2, #475569);
  border: 1px solid var(--line, rgba(22,24,35,0.12));
  cursor: pointer;
}
:root[data-theme="dark"] .cmp-speed-sel {
  color: #CBD5E1;
}

/* 信息面板 */
.cmp-info-panel {
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: rgba(255, 198, 75, 0.06);
  border-left: 3px solid var(--realm-color);
  min-height: 3.5rem;
}

.cmp-info-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--realm-color);
  margin-bottom: 0.2rem;
}

.cmp-info-desc {
  font-size: 0.78rem;
  color: var(--text-2, #475569);
  line-height: 1.5;
  margin-bottom: 0.2rem;
}
:root[data-theme="dark"] .cmp-info-desc {
  color: #94A3B8;
}

.cmp-info-params {
  display: flex;
  gap: 1rem;
  font-size: 0.72rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-3, #75878A);
}

/* 弯路按钮区 */
.cmp-wrong-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: rgba(139, 37, 0, 0.06);
  border: 1px dashed rgba(139, 37, 0, 0.3);
}

.cmp-wrong-btn {
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  font-size: 0.74rem;
  cursor: pointer;
  border: 1px solid rgba(139, 37, 0, 0.3);
  background: rgba(139, 37, 0, 0.05);
  color: var(--parasitic-color);
  transition: all 0.2s ease-out;
}
.cmp-wrong-btn:hover {
  background: rgba(139, 37, 0, 0.12);
  border-color: var(--parasitic-color);
  box-shadow: 0 0 8px #8B250044;
}

/* 导师提示框 */
.cmp-mentor-cue {
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,198,75,0.1), rgba(255,198,75,0.03));
  border: 1px solid rgba(255, 198, 75, 0.25);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-2, #475569);
  animation: ch18MentorIn 0.5s ease-out;
}
.cmp-mentor-cue b {
  color: var(--realm-color);
}
:root[data-theme="dark"] .cmp-mentor-cue {
  color: #CBD5E1;
}
@keyframes ch18MentorIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   S4 闩锁寄生BJT透视器
   ============================================================ */
.cmp-latchup-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.8rem;
  border-radius: 10px;
  background: var(--glass-bg, rgba(20,24,35,0.4));
}

.cmp-view-toggle {
  display: flex;
  gap: 0.4rem;
}

.cmp-toggle-btn {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  border: 1px solid var(--line, rgba(22,24,35,0.12));
  background: var(--glass-bg, rgba(20,24,35,0.4));
  color: var(--text-2, #475569);
  transition: all 0.2s ease-out;
  text-align: center;
}
.cmp-toggle-btn.active {
  background: linear-gradient(135deg, var(--realm-color), #F59E0B);
  color: #1a1a1a;
  font-weight: 700;
  border-color: var(--realm-color);
  box-shadow: 0 0 8px #FFC64B44;
}
:root[data-theme="dark"] .cmp-toggle-btn {
  color: #CBD5E1;
}

.cmp-latchup-canvas {
  display: block;
  margin: 0 auto;
}

/* SCR等效电路框 */
.cmp-scr-box {
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: rgba(139, 37, 0, 0.06);
  border: 1px solid rgba(139, 37, 0, 0.25);
}

.cmp-scr-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--parasitic-color);
  margin-bottom: 0.2rem;
}

.cmp-scr-diagram {
  font-size: 0.74rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-3, #75878A);
  line-height: 1.6;
}

/* β读数面板 */
.cmp-beta-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(255, 198, 75, 0.05);
  border: 1px solid rgba(255, 198, 75, 0.2);
}

.cmp-beta-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-2, #475569);
}
.cmp-beta-row b {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--realm-color);
}
:root[data-theme="dark"] .cmp-beta-row {
  color: #94A3B8;
}

.cmp-beta-status {
  font-size: 0.78rem;
  font-weight: 600;
  flex-basis: 100%;
  margin-top: 0.2rem;
}

/* 闩锁控制按钮行 */
.cmp-latchup-ctrl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cmp-trigger-btn,
.cmp-power-btn,
.cmp-guard-btn,
.cmp-soi-btn {
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.2s ease-out;
  border: 1px solid var(--line, rgba(22,24,35,0.12));
  background: var(--glass-bg, rgba(20,24,35,0.4));
  color: var(--text-2, #475569);
}
.cmp-trigger-btn {
  border-color: rgba(239, 68, 68, 0.3);
  color: #EF4444;
}
.cmp-trigger-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #EF4444;
  box-shadow: 0 0 8px #EF444444;
}
.cmp-power-btn {
  border-color: rgba(255, 165, 0, 0.3);
  color: #FFA500;
}
.cmp-power-btn:hover {
  background: rgba(255, 165, 0, 0.1);
  border-color: #FFA500;
}
.cmp-guard-btn,
.cmp-soi-btn {
  border-color: rgba(34, 197, 94, 0.3);
  color: #22C55E;
}
.cmp-guard-btn:hover,
.cmp-soi-btn:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: #22C55E;
  box-shadow: 0 0 8px #22C55E44;
}
.cmp-guard-btn.active,
.cmp-soi-btn.active {
  background: rgba(34, 197, 94, 0.15);
  border-color: #22C55E;
  font-weight: 700;
}
:root[data-theme="dark"] .cmp-trigger-btn,
:root[data-theme="dark"] .cmp-power-btn,
:root[data-theme="dark"] .cmp-guard-btn,
:root[data-theme="dark"] .cmp-soi-btn {
  color: #CBD5E1;
}

/* 闩锁状态消息 */
.cmp-latchup-msg {
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-2, #475569);
  background: rgba(100, 116, 139, 0.08);
  transition: color 0.3s ease-out;
}
:root[data-theme="dark"] .cmp-latchup-msg {
  color: #94A3B8;
}

/* ============================================================
   S5 大马士革：铝铜对比面板
   ============================================================ */
.cmp-compare-panel {
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  animation: ch18MentorIn 0.5s ease-out;
}

.cmp-compare-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #3B82F6;
  margin-bottom: 0.3rem;
}

.cmp-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
  font-family: var(--font-mono, monospace);
}

.cmp-compare-table th,
.cmp-compare-table td {
  padding: 0.3rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}

.cmp-compare-table th {
  color: var(--realm-color);
  font-weight: 700;
}

.cmp-compare-table td {
  color: var(--text-2, #475569);
}
:root[data-theme="dark"] .cmp-compare-table td {
  color: #94A3B8;
}

.cmp-compare-table tr:last-child td {
  border-bottom: none;
}