:root {
  --realm-color: #FFC64B;
  --realm-glow: #FFC64B33;
  --realm-glow-44: rgba(255, 198, 75, 0.27);
  --realm-glow-55: rgba(255, 198, 75, 0.33);
  --realm-glow-66: rgba(255, 198, 75, 0.40);
  --realm-glow-25: rgba(255, 198, 75, 0.25);
  --realm-faint: rgba(255, 198, 75, 0.06);
  --realm-tint: rgba(255, 198, 75, 0.08);
  --realm-soft-10: rgba(255, 198, 75, 0.10);
  --realm-soft: rgba(255, 198, 75, 0.12);
  --realm-line: rgba(255, 198, 75, 0.15);
  --realm-glow-20: rgba(255, 198, 75, 0.20);
  --realm-glow-50: rgba(255, 198, 75, 0.50);
}
/* focus-breath 呼吸光晕（下一场景按钮引导） */
.focus-breath {
  box-shadow: 0 0 0 0 var(--realm-glow-66);
  animation: ch16Breath 2s ease-in-out infinite;
}

@keyframes ch16Breath {
  0%, 100% { box-shadow: 0 0 0 0 var(--realm-glow-66); }
  50% { box-shadow: 0 0 16px 4px var(--realm-glow-44); }
}

/* 沙漏浮栅忆纹（S10 本命石新痕） */
.s10-scar-yiwen {
  display: inline-block;
  width: 36px;
  height: 56px;
  position: relative;
  vertical-align: middle;
  margin: 0 0.4rem;
  background:
    /* 上半沙漏（V_DD金色电子沙） */
    linear-gradient(180deg, var(--realm-color) 0%, var(--realm-color) 45%, transparent 45%, transparent 100%) top / 100% 50% no-repeat,
    /* 下半沙漏（GND空底） */
    linear-gradient(0deg, var(--realm-glow-25) 0%, var(--realm-glow-25) 45%, transparent 45%, transparent 100%) bottom / 100% 50% no-repeat;
  border-left: 1px solid var(--realm-color);
  border-right: 1px solid var(--realm-color);
  clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%);
}
/* 沙漏中间的浮栅氧化层（横向窄条） */
.s10-scar-yiwen::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2px;
  background: #177CB0;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px 1px #177CB0aa;
}
/* 隧穿电子细沙（中心亮点） */
.s10-scar-yiwen::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--realm-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px 2px var(--realm-color);
  animation: ch16Tunnel 1.6s ease-in-out infinite;
}
@keyframes ch16Tunnel {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.6); opacity: 0.7; }
}

/* S9 Boss 战触发按钮的雌黄描边 */
#s9-start {
  border-color: var(--realm-color);
  color: var(--realm-color);
}
#s9-start:hover {
  background: var(--realm-color);
  color: #1a1a1a;
}

/* ============================================================
   通用交互组件样式 · 结丹期金色主题
   ============================================================ */
.mentor-cue.sac-cue {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--realm-color);
  background: var(--realm-tint);
  color: #F1F5F9;
  font-size: 0.88rem;
  line-height: 1.6;
  border-radius: 0 8px 8px 0;
}
.frag-node {
  display: inline-block;
  margin: 0.25rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(117,135,138,.3);
  border-radius: 8px;
  background: rgba(30,25,35,.5);
  color: #75878A;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 200ms ease-out;
}
.frag-node:hover { border-color: var(--realm-color); }
.frag-node.lit {
  border-color: var(--realm-color);
  background: var(--realm-soft);
  color: var(--realm-color);
}

/* ============================================================
   S0 存储器金字塔预测挑战器
   ============================================================ */
.cmp-mem-pyramid-predict { padding: 0.5rem 0; }
.mpp-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
}
.mpp-layer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: 2px solid rgba(117,135,138,.3);
  border-radius: 8px;
  background: rgba(30,25,35,.5);
  min-height: 36px;
  transition: all 300ms ease-out;
  cursor: pointer;
  position: relative;
}
.mpp-layer.drag-over {
  border-color: var(--realm-color);
  background: var(--realm-soft);
  transform: scale(1.02);
}
.mpp-layer.lit {
  border-style: solid;
  box-shadow: 0 0 8px var(--realm-glow-20);
}
.mpp-layer-name {
  font-weight: bold;
  font-size: 0.88rem;
}
.mpp-layer-sub {
  font-size: 0.72rem;
  color: #75878A;
  font-family: var(--font-mono, monospace);
}
.mpp-slot {
  min-width: 80px;
  text-align: center;
  font-size: 0.8rem;
}
.mpp-placed {
  font-size: 0.78rem;
  font-weight: bold;
}
.mpp-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin: 0.5rem 0;
}
.mpp-device {
  padding: 0.3rem 0.6rem;
  border: 2px solid rgba(117,135,138,.4);
  border-radius: 6px;
  background: rgba(30,25,35,.6);
  color: #F1F5F9;
  font-size: 0.8rem;
  cursor: grab;
  transition: all 200ms ease-out;
  user-select: none;
}
.mpp-device:hover { border-color: var(--realm-color); transform: translateY(-2px); }
.mpp-device:active { cursor: grabbing; }
.mpp-radar-wrap {
  margin-top: 0.6rem;
  text-align: center;
}
.mpp-radar-wrap canvas { width: 100%; max-width: 260px; height: auto; }
.mpp-radar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  font-size: 0.75rem;
  margin-top: 0.3rem;
}
.mpp-wrong-btn {
  margin-top: 0.5rem;
  border-color: #EF444444;
  color: #FCA5A5;
  background: rgba(239,68,68,.06);
}
.mpp-wrong-btn:disabled { opacity: 0.5; }

/* ============================================================
   S1 6T双稳态蝶形曲线追踪器
   ============================================================ */
.cmp-sram-butterfly { padding: 0.5rem 0; }
.sbt-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: flex-start;
}
.sbt-circuit { flex: 0 0 auto; }
.sbt-svg { width: 200px; max-width: 100%; height: auto; }
.sbt-q-display {
  text-align: center;
  font-size: 0.85rem;
  color: #94A3B8;
  margin-top: 0.2rem;
}
.sbt-q-display b { color: var(--realm-color); }
.sbt-controls { flex: 1; min-width: 160px; }
.sbt-knob { margin-bottom: 0.4rem; }
.sbt-knob label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #94A3B8;
}
.sbt-knob label span { color: var(--realm-color); font-family: var(--font-mono, monospace); }
.sbt-knob input[type="range"] { width: 100%; }
.sbt-modes {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.sbt-mode-btn {
  flex: 1;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(117,135,138,.4);
  border-radius: 6px;
  background: rgba(30,25,35,.5);
  color: #94A3B8;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 200ms ease-out;
}
.sbt-mode-btn:hover { border-color: var(--realm-color); }
.sbt-mode-btn.active {
  border-color: var(--realm-color);
  background: var(--realm-line);
  color: var(--realm-color);
}
.sbt-butterfly { flex: 0 0 auto; }
.sbt-butterfly canvas { width: 220px; max-width: 100%; height: auto; background: #1A1520; border-radius: 8px; }
.sbt-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.82rem;
  color: #94A3B8;
  margin-top: 0.4rem;
}
.sbt-readout b { color: var(--realm-color); }
.sbt-status {
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
}
.sbt-status.ok { background: rgba(34,197,94,.12); color: #22C55E; }
.sbt-status.warn { background: rgba(245,158,11,.12); color: #F59E0B; }
.sbt-status.fail { background: rgba(239,68,68,.12); color: #EF4444; }

/* ============================================================
   S4 DRAM刷新三旋钮实验台
   ============================================================ */
.cmp-dram-refresh-bench { padding: 0.5rem 0; }
.drb-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: flex-start;
}
.drb-circuit { flex: 0 0 auto; }
.drb-svg { width: 180px; max-width: 100%; height: auto; }
.drb-knobs { flex: 1; min-width: 160px; }
.drb-knob { margin-bottom: 0.4rem; }
.drb-knob label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #94A3B8;
}
.drb-knob label span { color: var(--realm-color); font-family: var(--font-mono, monospace); }
.drb-knob input[type="range"] { width: 100%; }
.drb-plot { margin: 0.4rem 0; }
.drb-plot canvas { width: 100%; max-width: 360px; height: auto; background: #1A1520; border-radius: 8px; }
.drb-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.82rem;
  color: #94A3B8;
  margin-top: 0.3rem;
}
.drb-metrics b { color: var(--realm-color); }
.drb-status {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: bold;
  margin-top: 0.3rem;
}
.drb-status.ok { background: rgba(34,197,94,.12); color: #22C55E; }
.drb-status.warn { background: rgba(245,158,11,.12); color: #F59E0B; }
.drb-status.fail { background: rgba(239,68,68,.12); color: #EF4444; }
.drb-wrong-btn {
  margin-top: 0.5rem;
  border-color: #EF444444;
  color: #FCA5A5;
  background: rgba(239,68,68,.06);
}
.drb-wrong-btn:disabled { opacity: 0.5; }

/* ============================================================
   S7 NAND vs NOR四选一推演器
   ============================================================ */
.cmp-nand-nor-compare { padding: 0.5rem 0; }
.nnc-topology {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}
.nnc-nor, .nnc-nand, .nnc-3d {
  flex: 1;
  min-width: 120px;
  padding: 0.5rem;
  border: 1px solid rgba(117,135,138,.2);
  border-radius: 8px;
  background: rgba(30,25,35,.5);
  text-align: center;
}
.nnc-nor h5, .nnc-nand h5, .nnc-3d h5 {
  font-size: 0.82rem;
  margin: 0 0 0.3rem;
  color: #94A3B8;
}
.nnc-svg { width: 100%; max-width: 120px; height: auto; }
.nnc-desc {
  font-size: 0.75rem;
  color: #75878A;
  margin: 0.2rem 0 0;
}
.nnc-choices {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}
.nnc-choice {
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(117,135,138,.4);
  border-radius: 6px;
  background: rgba(30,25,35,.5);
  color: #F1F5F9;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  transition: all 200ms ease-out;
}
.nnc-choice:hover:not(:disabled) { border-color: var(--realm-color); }
.nnc-choice.correct {
  border-color: #22C55E;
  background: rgba(34,197,94,.12);
  color: #22C55E;
}
.nnc-choice.wrong {
  border-color: #EF4444;
  background: rgba(239,68,68,.12);
  color: #FCA5A5;
  text-decoration: line-through;
}
.nnc-choice:disabled { opacity: 0.6; cursor: default; }
.nnc-vt-panel {
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid var(--realm-line);
  border-radius: 8px;
  background: rgba(30,25,35,.4);
}
.nnc-vt-ctrl { margin-bottom: 0.3rem; }
.nnc-vt-ctrl label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #94A3B8;
}
.nnc-vt-ctrl label span { color: var(--realm-color); font-family: var(--font-mono, monospace); }
.nnc-vt-ctrl input[type="range"] { width: 100%; }
.nnc-vt-panel canvas { width: 100%; max-width: 300px; height: auto; background: #1A1520; border-radius: 8px; }
.nnc-endurance-bar {
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid rgba(117,135,138,.2);
  border-radius: 8px;
  background: rgba(30,25,35,.4);
}
.nnc-end-title {
  font-size: 0.82rem;
  color: #94A3B8;
  margin-bottom: 0.3rem;
}
.nnc-end-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0;
}
.nnc-end-name {
  font-size: 0.78rem;
  font-weight: bold;
  min-width: 36px;
}
.nnc-end-bar-bg {
  flex: 1;
  height: 10px;
  background: rgba(117,135,138,.2);
  border-radius: 5px;
  overflow: hidden;
}
.nnc-end-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 300ms ease-out;
}
.nnc-end-val {
  font-size: 0.75rem;
  color: #94A3B8;
  min-width: 60px;
  text-align: right;
  font-family: var(--font-mono, monospace);
}
.nnc-feedback { margin-top: 0.4rem; }
.nnc-fb-wrong, .nnc-fb-correct {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.82rem;
  margin-bottom: 0.3rem;
}
.nnc-fb-wrong {
  border-left: 3px solid #EF4444;
  background: rgba(239,68,68,.08);
  color: #FCA5A5;
}
.nnc-fb-correct {
  border-left: 3px solid #22C55E;
  background: rgba(34,197,94,.08);
  color: #86EFAC;
}