/* ============================================================
   ch07「指令集架构」章节专属样式
   境界：筑基一层·指令契约 · 深蓝 #3B82F6（--realm-2）
   Boss：语义之渊 · 深紫 #7C3AED（翻译鸿沟、位域乱序）
   顿悟：金 var(--ch-epiphany)（契约铭文、认知点亮）
   全部色值走 tokens 变量；类名体系与 ch01-ch02 对齐。
   禁止纯黑背景；发光仅限边框/背景，不出现在文字区。
   ============================================================ */

/* ---------- 章节境界色覆写：深蓝筑基 ---------- */
:root, :root[data-theme="light"] {
  --accent: #3B82F6;
  --accent-ink: #2563EB;
  --accent-soft: rgba(59, 130, 246, 0.10);
  --glass-line: rgba(59, 130, 246, 0.20);
  --glow: 0 0 18px rgba(59, 130, 246, 0.26);
  --on-accent: #FFFFFF;
}
:root[data-theme="dark"] {
  --accent: #60A5FA;
  --accent-ink: #3B82F6;
  --accent-soft: rgba(59, 130, 246, 0.16);
  --glass-line: rgba(59, 130, 246, 0.18);
  --glow: 0 0 22px rgba(59, 130, 246, 0.34);
  --on-accent: #04120F;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #7C3AED;          /* 语义之渊 · 深紫 */
  --ch-boss-ink: #6D28D9;
  --ch-boss-soft: rgba(124, 58, 237, 0.14);
  --ch-boss-line: rgba(124, 58, 237, 0.30);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟金 */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-code-c: #94A3B8;        /* C 代码层灰白 */
  --ch-code-asm: #0EA5E9;      /* 汇编层天蓝 */
  --ch-code-bin: #10B981;      /* 机器码层翠绿 */
  --ch-amber: var(--ch-amber);         /* 琥珀（PC/时钟） */
  --ch-gold: #D4A853;          /* CISC 玉碑暗金 */
  --ch-noise: #6B7280;         /* 噪声灰 */
  --ch-mod-pc: var(--ch-amber);        /* CPU 模块色 */
  --ch-mod-imem: #0EA5E9;
  --ch-mod-reg: #10B981;
  --ch-mod-alu: var(--ch-boss);
  --ch-mod-dmem: #8B5CF6;
}
/* ---------- S0 代码展示 & 下注 ---------- */
.code-display {
  font-family: var(--font-mono); font-size: 1.5rem;
  background: var(--bg-sunk); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3); text-align: center;
}
.c-code { color: var(--ch-code-c); }
.bet-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.bet-item {
  min-width: 120px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--accent-soft); cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); text-align: center;
}
.bet-item:hover { transform: scale(1.03); border-color: var(--accent); box-shadow: var(--glow); }
.bet-item.wrong { border-color: var(--ch-boss); background: var(--ch-boss-soft); opacity: 0.6; }
.bet-item.correct { border-color: #22C55E; background: rgba(34,197,94,0.12); }
.reveal-panel { margin-top: var(--sp-3); }
.asm-expansion .asm-line, .binary-expansion .bin-line {
  font-family: var(--font-mono); font-size: 0.85rem;
  padding: var(--sp-1) var(--sp-2); margin: 2px 0;
  border-left: 2px solid var(--ch-code-asm); background: rgba(14,165,233,0.06);
  opacity: 0; transform: translateX(-10px);
  transition: opacity 400ms cubic-bezier(0.22,1,0.36,1), transform 400ms cubic-bezier(0.22,1,0.36,1);
}
.asm-expansion .asm-line.show, .binary-expansion .bin-line.show { opacity: 1; transform: translateX(0); }
.binary-expansion .bin-line { border-left-color: var(--ch-code-bin); background: rgba(16,185,129,0.06); }

/* ---------- S1 三层翻译 ---------- */
.translate-layers { display: flex; flex-direction: column; gap: var(--sp-2); }
.layer-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); min-height: 48px;
}
.layer-label { font-family: var(--font-mono); font-size: 0.8rem; min-width: 60px; }
.layer-content { flex: 1; font-family: var(--font-mono); font-size: 0.85rem; }
.layer-content code { color: var(--ch-code-c); }
.layer-row.draggable { cursor: grab; border-style: dashed; }
.layer-row.drop-target { border-color: var(--accent); box-shadow: var(--glow); }
.drag-hint { text-align: center; color: var(--text-3); font-size: var(--fs-small); margin-top: var(--sp-2); }
.x86-compare { margin-top: var(--sp-3); padding: var(--sp-2); border: 1px solid var(--ch-gold); border-radius: var(--r-sm); }
.x86-compare h4 { color: var(--ch-gold); font-size: 0.9rem; }
.x86-lines { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ch-gold); }

/* ---------- S2 天平 & 特征卡 ---------- */
.scale-viz {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.scale-pan {
  padding: var(--sp-2) var(--sp-4); border: 2px solid var(--glass-line);
  border-radius: var(--r-sm); font-weight: 600; min-width: 80px; text-align: center;
}
.scale-pan[data-side="cisc"] { border-color: var(--ch-gold); color: var(--ch-gold); }
.scale-pan[data-side="risc"] { border-color: var(--accent); color: var(--accent); }
.scale-beam { width: 60px; height: 4px; background: var(--text-3); }
.card-pool { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.feat-card {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); cursor: pointer;
  font-size: 0.8rem; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.feat-card:hover { border-color: var(--accent); }
.feat-card.placed-cisc { background: rgba(212,168,83,0.12); border-color: var(--ch-gold); }
.feat-card.placed-risc { background: var(--accent-soft); border-color: var(--accent); }
.feat-card.wrong { animation: shake 300ms; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.stele-info { margin-top: var(--sp-3); padding: var(--sp-2); font-size: 0.85rem; }

/* ---------- S3 双模板 ---------- */
.dual-template { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.template-block { flex: 1; min-width: 280px; }
.template-block h4 { font-size: 0.9rem; margin-bottom: var(--sp-2); }
.bit-strip {
  display: flex; gap: 1px; height: 36px; margin-bottom: var(--sp-2);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs); overflow: hidden;
}
.bit-strip.varlen { height: auto; flex-direction: column; }
.bit-cell {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.7rem; background: var(--bg-sunk);
  transition: background 200ms cubic-bezier(0.22,1,0.36,1);
}
.bit-cell.filled { background: var(--accent-soft); color: var(--accent); }
.bit-cell.filled-c { background: rgba(212,168,83,0.15); color: var(--ch-gold); }
.density-compare { margin-top: var(--sp-3); padding: var(--sp-2); font-size: 0.85rem; }

/* ---------- S4 符文殿 ---------- */
.rune-pool { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-3); }
.rune {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.7rem; border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-sunk); cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.rune:hover { border-color: var(--accent); box-shadow: var(--glow); }
.rune.placed { opacity: 0.3; cursor: default; }
.func-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.func-slot {
  padding: var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-sm);
  min-height: 80px; font-size: 0.8rem;
}
.func-slot h5 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.reg-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.reg-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.65rem; border: 1px solid var(--glass-line);
  border-radius: 2px; background: var(--bg-sunk); cursor: pointer;
  transition: all 150ms cubic-bezier(0.22,1,0.36,1);
}
.reg-cell:hover { border-color: var(--accent); }
.reg-cell[data-reg="0"] { border-color: #22C55E; color: #22C55E; }
.count-compare { margin-top: var(--sp-3); padding: var(--sp-2); text-align: center; font-size: 0.85rem; }

/* ---------- S5 六面体位域编码器 ---------- */
.cube-nav { display: flex; gap: 4px; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.face-tab {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-sunk); cursor: pointer;
  font-size: 0.8rem; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.face-tab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.face-tab[data-type="B"].active { background: var(--ch-boss); border-color: var(--ch-boss); }
.encoder-area { margin-bottom: var(--sp-2); }
.instr-prompt {
  font-family: var(--font-mono); font-size: 1rem; text-align: center;
  padding: var(--sp-2); background: var(--bg-sunk); border-radius: var(--r-sm); margin-bottom: var(--sp-2);
}
.bit-grid { display: flex; gap: 1px; height: 32px; margin-bottom: var(--sp-2); }
.bit-slot {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.65rem; background: var(--bg-sunk);
  border: 1px solid var(--glass-line); transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.bit-slot.filled { background: var(--accent-soft); color: var(--accent); }
.bit-slot.error { background: var(--ch-boss-soft); border-color: var(--ch-boss); }
.bit-slot.correct { background: rgba(34,197,94,0.12); border-color: #22C55E; }
.hex-output { display: flex; gap: var(--sp-3); justify-content: center; font-family: var(--font-mono); font-size: 0.85rem; }
.hex-current { color: var(--accent); }
.hex-target { color: var(--text-3); }
.field-inputs { display: flex; flex-direction: column; gap: 4px; }
.field-row {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 0.8rem;
}
.field-label { min-width: 60px; color: var(--text-2); }
.field-input {
  flex: 1; padding: 2px 6px; border: 1px solid var(--glass-line);
  border-radius: 2px; background: var(--bg-sunk); color: var(--text-1);
  font-family: var(--font-mono); font-size: 0.8rem;
}
.field-bitrange { color: var(--text-3); font-size: 0.75rem; }
.reorder-anim { margin-top: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm); }

/* ---------- S6 寻址回廊 ---------- */
.instr-tray { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.instr-card {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); background: var(--bg-sunk); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.8rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.instr-card:hover { border-color: var(--accent); }
.instr-card.placed { opacity: 0.3; }
.addr-tunnels { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.tunnel {
  padding: var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-sm);
  min-height: 60px; font-size: 0.8rem;
}
.tunnel h5 { font-size: 0.85rem; margin-bottom: var(--sp-1); }
.tunnel[data-addr="imm"] h5 { color: var(--ch-mod-imem); }
.tunnel[data-addr="reg"] h5 { color: var(--tech-cyan-light); }
.tunnel[data-addr="base"] h5 { color: var(--realm-1); }
.tunnel[data-addr="pc"] h5 { color: #6366F1; }
.tunnel.match { border-style: solid; border-color: #22C55E; }
.tunnel.wrong { animation: shake 300ms; }

/* ---------- S7 迷你 CPU ---------- */
.cpu-datapath {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2);
  margin-bottom: var(--sp-2); padding: var(--sp-3);
  border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.cpu-module {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.cpu-module.active { box-shadow: var(--glow); }
.cpu-module[data-mod="pc"] { border-color: var(--ch-mod-pc); }
.cpu-module[data-mod="imem"] { border-color: var(--ch-mod-imem); }
.cpu-module[data-mod="reg"] { border-color: var(--ch-mod-reg); }
.cpu-module[data-mod="alu"] { border-color: var(--ch-mod-alu); }
.cpu-module[data-mod="dmem"] { border-color: var(--ch-mod-dmem); }
.mod-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); }
.mod-value { font-family: var(--font-mono); font-size: 0.85rem; }
.reg-display { font-family: var(--font-mono); font-size: 0.7rem; text-align: center; }
.exec-slot {
  border: 2px dashed var(--glass-line); border-radius: var(--r-sm);
  padding: var(--sp-2); text-align: center; color: var(--text-3);
  margin-bottom: var(--sp-2); min-height: 40px; font-size: 0.85rem;
}
.exec-slot.has-instr { border-color: var(--accent); border-style: solid; color: var(--accent); }
.exec-controls { display: flex; gap: var(--sp-2); justify-content: center; }

/* ---------- S8 栈帧 ---------- */
.stack-viz {
  display: flex; flex-direction: column-reverse; gap: 2px;
  border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  padding: var(--sp-2); min-height: 160px; max-width: 300px; margin: 0 auto var(--sp-2);
}
.stack-entry {
  padding: var(--sp-1) var(--sp-2); font-family: var(--font-mono); font-size: 0.75rem;
  background: var(--accent-soft); border-radius: 2px;
  animation: slideIn 300ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.stack-controls { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-bottom: var(--sp-3); }
.assembler-panel { border: 1px solid var(--glass-line); border-radius: var(--r-sm); padding: var(--sp-2); }
.assembler-panel h4 { font-size: 0.9rem; margin-bottom: var(--sp-2); }
.asm-code { font-family: var(--font-mono); font-size: 0.8rem; background: var(--bg-sunk); padding: var(--sp-2); border-radius: var(--r-xs); margin-bottom: var(--sp-2); }
.asm-output { font-family: var(--font-mono); font-size: 0.8rem; margin-top: var(--sp-2); }

/* ---------- S9 Boss 战 ---------- */
.boss-arena { border-color: var(--ch-boss-line); }
.abyss-face {
  width: 80px; height: 80px; margin: 0 auto var(--sp-2);
  font-family: var(--font-mono); font-size: 0.5rem; text-align: center;
  color: var(--ch-boss); opacity: 0.6;
}
.q-progress { display: flex; gap: 4px; margin-bottom: var(--sp-2); }
.q-dot { width: 24px; height: 4px; background: var(--glass-line); border-radius: 2px; }
.q-dot.done { background: #22C55E; }
.q-dot.current { background: var(--accent); }
.q-text { font-size: 0.9rem; margin-bottom: var(--sp-2); min-height: 40px; }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.option {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--accent-soft); cursor: pointer; font-size: 0.85rem;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.option.correct { border-color: #22C55E; background: rgba(34,197,94,0.12); }
.option.wrong { border-color: var(--ch-boss); background: var(--ch-boss-soft); }
.option.excluded { opacity: 0.3; cursor: default; }
.abyss-dialogue {
  margin-top: var(--sp-2); font-style: italic; color: var(--ch-boss);
  font-size: 0.85rem; min-height: 24px;
}
.scar-traces { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 2px; }
.scar-trace { font-size: 0.75rem; color: var(--text-3); padding: 2px var(--sp-2); border-left: 2px solid var(--accent); }
.scar-trace.lit { color: var(--accent); border-left-color: var(--accent); }
.victory-zone { margin-top: var(--sp-3); text-align: center; font-style: italic; color: var(--ch-epiphany); }

/* ---------- S10 三扇门 ---------- */
.three-doors { display: flex; gap: var(--sp-3); justify-content: center; margin-bottom: var(--sp-3); }
.door {
  width: 80px; height: 120px; border: 2px solid var(--glass-line);
  border-radius: var(--r-sm) var(--r-sm) 0 0; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: var(--sp-2); transition: all 400ms cubic-bezier(0.22,1,0.36,1);
  background: var(--bg-sunk);
}
.door:hover { border-color: var(--accent); }
.door[data-door="extension"] { border-color: var(--ch-mod-imem); }
.door[data-door="tradeoff"] { border-color: var(--ch-gold); }
.door[data-door="linking"] { border-color: #10B981; }
.door.opened { opacity: 0.5; }
.door-label { font-size: 0.75rem; writing-mode: vertical-rl; }
.door-content { min-height: 80px; margin-bottom: var(--sp-2); font-size: 0.85rem; }
.knowledge-map { margin-top: var(--sp-3); }
.map-nodes { display: flex; flex-wrap: wrap; gap: 4px; }
.map-node {
  padding: 2px 6px; border: 1px solid var(--glass-line); border-radius: 2px;
  font-size: 0.7rem; background: var(--bg-sunk); opacity: 0.4;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.map-node.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }