/* ============================================================
   ch10 · 异裁缝天 — 章节样式
   章节色：赭红 #955539（主色），对应GaAs橙红 / AlGaAs淡黄双色
   Boss：异质裁缝（双色晶格布间的执针剪影）
   ============================================================ */
:root {
  --accent: #955539;
  --accent-ink: #C88B6F;
  --accent-soft: rgba(149,85,57,0.15);
  /* 双色晶格——GaAs侧深橙红 / AlGaAs侧浅金 */
  --grain-dark: #B45309;
  --grain-light: #D4A853;
  --grain-dark-ink: #F4A460;
  --grain-light-ink: #FCE8B2;
  /* 位错线 */
  --disl: #7F1D1D;
  --disl-soft: rgba(127,29,29,0.5);
  /* 2DEG金线 */
  --deg-gold: #F6D365;
  --deg-gold-soft: rgba(246,211,101,0.45);
  /* 裁缝boss色 */
  --tailor: #8B3A2A;
  --tailor-ink: #E8B5A0;
}
:root[data-theme='dark'] {
  --accent: #C88B6F;
  --accent-ink: #955539;
  --accent-soft: rgba(200,139,111,0.18);
  --grain-dark: #C4631A;
  --grain-light: #E6BE6B;
}

/* ====== 章首 ====== */
#opening {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); text-align: center;
  padding: calc(var(--nav-h) + var(--sp-6)) var(--sp-4) var(--sp-7);
  background: radial-gradient(ellipse at 50% 60%, rgba(149,85,57,0.22) 0%, rgba(8,12,22,0) 65%);
}
#startBtn { opacity: 1; }
.op-kicker { color: var(--accent-ink); }
.op-title span {
  display: inline-block;
  background: linear-gradient(135deg, var(--grain-dark) 0%, var(--accent) 50%, var(--grain-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(149,85,57,0.25);
}

/* ====== 场景骨架 ====== */
.scene-kicker { color: var(--accent-ink); letter-spacing: .4em; }
.scene-title { font-family: var(--font-serif); color: var(--text-1); }
.scene-sub { color: var(--text-3); }

/* ====== 双色晶格石 ====== */
.crystal-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: var(--sp-4) 0;
  background: var(--glass-bg);
}
.crystal-side {
  padding: var(--sp-4);
  position: relative;
}
.crystal-side.left {
  background: linear-gradient(160deg, rgba(180,83,9,0.18), rgba(180,83,9,0.04));
  border-right: 1px dashed var(--disl);
}
.crystal-side.right {
  background: linear-gradient(160deg, rgba(212,168,83,0.14), rgba(212,168,83,0.03));
}
.crystal-name {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: .2em;
  color: var(--accent-ink);
  margin-bottom: var(--sp-2);
}
.crystal-param {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-2);
  line-height: 1.8;
}
.crystal-param b { color: var(--text-1); }

/* ====== 拼接推台 ====== */
.join-stage {
  position: relative;
  height: 160px;
  margin: var(--sp-4) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--stage-bg);
  overflow: hidden;
  touch-action: pan-y;
}
.join-stage .crystal-block {
  position: absolute;
  top: 20px;
  width: 44%;
  height: calc(100% - 40px);
  border-radius: var(--r-sm);
  transition: transform .5s var(--ease-out), box-shadow .5s;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: .2em;
  user-select: none;
}
.join-stage .crystal-block.left {
  left: 4%;
  background: linear-gradient(135deg, var(--grain-dark), #7A3B08);
  color: #fff;
}
.join-stage .crystal-block.right {
  right: 4%;
  background: linear-gradient(135deg, var(--grain-light), #A8852B);
  color: #3A2A05;
}
.join-stage.joined .crystal-block { cursor: default; }
.join-stage.joined .crystal-block.left { transform: translateX(42%); box-shadow: 8px 0 24px rgba(149,85,57,0.35); }
.join-stage.joined .crystal-block.right { transform: translateX(-42%); box-shadow: -8px 0 24px rgba(149,85,57,0.35); }
.join-stage .seam-flash {
  position: absolute;
  top: 0; left: 50%;
  width: 0; height: 100%;
  background: linear-gradient(180deg, transparent, var(--deg-gold), transparent);
  opacity: 0;
  transition: all .4s;
  transform: translateX(-50%);
}
.join-stage.joined .seam-flash { width: 4px; opacity: 1; box-shadow: 0 0 30px var(--deg-gold-soft); }
.join-hint {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}

/* ====== 能带对比器 ====== */
.band-viewer {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
}
.band-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.band-tabs .tab {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-small);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all .25s;
}
.band-tabs .tab.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.band-canvas-wrap { width: 100%; height: 220px; }
.band-canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.dE-label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--accent-ink);
  margin-top: var(--sp-2);
  text-align: center;
}
.dE-label b { color: var(--deg-gold); }

/* ====== 安德森定则画板 ====== */
.anderson-board {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}
.anderson-canvas { width: 100%; height: 260px; display: block; }
.mat-picker {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin: var(--sp-2) 0;
}
.mat-picker button {
  padding: 5px 10px; font-size: var(--fs-small); font-family: var(--font-mono);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent;
  color: var(--text-2); cursor: pointer;
}
.mat-picker button.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.formula-strip {
  background: rgba(0,0,0,.35);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--grain-light-ink);
  text-align: center;
  margin: var(--sp-2) 0;
  overflow-x: auto;
}

/* ====== 三型拖拽 / 对齐 ====== */
.type-board {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}
.type-canvas { width: 100%; height: 260px; display: block; }
.type-switch { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.type-switch button {
  padding: 6px 14px; font-size: var(--fs-small);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); cursor: pointer;
  font-family: var(--font-serif);
}
.type-switch button.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.type-info { font-size: var(--fs-small); color: var(--text-2); margin-top: var(--sp-2); line-height: 1.7; }
.type-info b { color: var(--accent-ink); }

/* ====== 位错可视化 ====== */
.disl-stage {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}
.disl-canvas { width: 100%; height: 240px; display: block; }
.disl-controls {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-2);
  align-items: center; margin: var(--sp-2) 0;
  font-family: var(--font-mono); font-size: var(--fs-small);
}
.disl-controls input[type=range] { flex:1; accent-color: var(--accent); touch-action: pan-y; }
.disl-readout {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--accent-ink); text-align: center;
}
.disl-readout b { color: var(--danger); }
.disl-warning {
  color: var(--danger-ink);
  font-size: var(--fs-small);
  font-family: var(--font-mono);
  text-align: center;
  margin-top: var(--sp-2);
  min-height: 1.4em;
}

/* ====== 应变滑杆 ====== */
.strain-stage {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}
.strain-canvas { width: 100%; height: 240px; display: block; }
.strain-slider-row {
  display: grid; grid-template-columns: 80px 1fr 80px; gap: var(--sp-2);
  align-items: center; margin: var(--sp-2) 0;
  font-family: var(--font-mono); font-size: var(--fs-small);
}
.strain-slider-row input[type=range] { accent-color: var(--accent); touch-action: pan-y; }
.mob-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-small);
}
.mob-card {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--sp-2); text-align: center;
}
.mob-card .val { font-size: var(--fs-sub); color: var(--accent-ink); }
.mob-card .lbl { color: var(--text-3); }

/* ====== 调制掺杂截面 ====== */
.dope-stage {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}
.dope-canvas { width: 100%; height: 280px; display: block; }
.dope-controls {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-2);
  align-items: center; margin: var(--sp-2) 0;
  font-family: var(--font-mono); font-size: var(--fs-small);
}
.dope-controls input[type=range] { flex:1; accent-color: var(--accent); touch-action: pan-y; }

/* ====== HEMT ====== */
.hemt-stage {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}
.hemt-canvas { width: 100%; height: 260px; display: block; }
.ft-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.ft-bar .bar {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--sp-2); text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-small);
}
.ft-bar .bar b { display: block; font-size: 1.2em; color: var(--accent-ink); }

/* ====== 量子阱 ====== */
.qw-stage {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}
.qw-canvas { width: 100%; height: 260px; display: block; }
.qw-readout {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--text-2); text-align: center; margin-top: var(--sp-2);
}
.qw-readout b { color: var(--deg-gold); }

/* ====== 超晶格/DBR ====== */
.super-stage {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}
.super-canvas { width: 100%; height: 240px; display: block; }
.dbr-canvas { width: 100%; height: 200px; display: block; }
.dbr-readout { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--accent-ink); text-align: center; margin-top: var(--sp-2); }

/* ====== 伏笔/台词 ====== */
.mentor-line {
  border-left: 2px solid var(--accent);
  padding-left: var(--sp-3);
  color: var(--text-2);
  font-family: var(--font-serif);
  line-height: 1.8;
  margin: var(--sp-3) 0;
}
.mentor-line em { color: var(--accent-ink); font-style: normal; }
.boss-whisper {
  text-align: center;
  color: var(--tailor-ink);
  font-family: var(--font-serif);
  font-style: italic;
  margin: var(--sp-4) 0;
  opacity: .85;
}
.entropy-pulse {
  display: inline-block;
  color: var(--danger-ink);
  animation: entropyBreathe 2.6s ease-in-out infinite;
}
@keyframes entropyBreathe {
  0%,100% { opacity: .5; text-shadow: 0 0 0 transparent; }
  50% { opacity: 1; text-shadow: 0 0 14px var(--danger-soft); }
}

/* ====== 章末收束 ====== */
.frag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.frag-grid .fg {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: var(--fs-small);
  font-family: var(--font-mono);
  color: var(--text-3);
  background: var(--glass-bg);
  transition: all .5s;
}
.frag-grid .fg.lit {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: 0 0 16px var(--accent-soft);
}
.scar-show {
  width: 180px; height: 180px;
  margin: var(--sp-4) auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(149,85,57,0.25), transparent 70%);
  border: 1px solid var(--accent);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.scar-show svg { width: 70%; height: 70%; }
.next-hook {
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
  text-align: center;
  color: var(--text-2);
  font-family: var(--font-serif);
  line-height: 1.8;
}
.next-hook b { color: var(--accent-ink); }

/* ====== 移动端 ====== */
@media (max-width: 640px) {
  .crystal-pair { grid-template-columns: 1fr; }
  .crystal-side.left { border-right: none; border-bottom: 1px dashed var(--disl); }
  .join-stage { height: 130px; }
  .ft-bar { grid-template-columns: repeat(2,1fr); }
  .mob-panel { grid-template-columns: 1fr; }
  .disl-controls, .strain-slider-row, .dope-controls {
    grid-template-columns: 1fr; gap: 4px;
  }
}

#opening.fade-out {
  opacity: 0;
  transition: opacity .5s ease-out;
  pointer-events: none;
}

/* ====== S0 预测挑战 ====== */
.predict-challenge {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
}
.predict-challenge h3 {
  font-family: var(--font-serif);
  color: var(--text-1);
  margin-bottom: var(--sp-2);
}
.predict-options {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin: var(--sp-3) 0;
}
.pred-opt {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-small);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all .25s;
  text-align: left;
}
.pred-opt:hover { border-color: var(--accent); }
.pred-opt.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.pred-feedback { margin-top: var(--sp-2); font-size: var(--fs-small); }
.pred-feedback p { margin: 4px 0; }
.band-reveal {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
}
.band-reveal p { font-size: var(--fs-small); color: var(--text-2); margin: 4px 0; }
.band-reveal b { color: var(--accent-ink); }
.wrong-path-feedback {
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--text-3);
}
.step-marker {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--accent-ink);
  text-align: center;
}
.mentor-cue {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-serif);
  font-size: var(--fs-sub);
  color: var(--accent-ink);
  text-align: center;
  border-top: 1px dashed var(--accent);
}

/* ====== S1 安德森定则画板扩展 ====== */
.anderson-controls {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  align-items: center; margin: var(--sp-2) 0;
}
.anderson-controls .btn { font-size: var(--fs-small); padding: 4px 12px; }
.doping-toggle { display: flex; gap: 4px; }
.doping-toggle .tab {
  padding: 4px 10px; font-size: var(--fs-small); font-family: var(--font-mono);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); cursor: pointer;
}
.doping-toggle .tab.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.value-panel {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-small);
}
.vp-item { color: var(--text-3); }
.vp-item b { color: var(--accent-ink); }
.anderson-derivation {
  margin-top: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.deriv-step {
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-3);
  opacity: 0.4;
  transition: all .5s;
}
.deriv-step.lit {
  opacity: 1;
  border-left-color: var(--accent);
  color: var(--text-1);
  background: var(--accent-soft);
}

/* ====== S2 器件匹配拖拽 ====== */
.device-matching {
  margin: var(--sp-3) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  background: var(--glass-bg);
}
.device-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.dev-card {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  text-align: center;
  cursor: grab;
  transition: all .25s;
  background: rgba(0,0,0,.1);
}
.dev-card:hover { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-soft); }
.dev-card.dragging { opacity: 0.5; }
.dev-card.matched { border-color: #22C55E; background: rgba(34,197,94,0.1); cursor: default; }
.dev-name { font-family: var(--font-serif); font-size: var(--fs-small); color: var(--text-1); }
.dev-req { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.type-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.type-slot {
  border: 2px dashed var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-3);
  min-height: 60px;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
}
.type-slot.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.type-slot.filled { border-style: solid; border-color: #22C55E; color: #22C55E; }
.type-slot.wrong { border-color: var(--danger); color: var(--danger-ink); animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.match-feedback {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  text-align: center;
  min-height: 1.4em;
}
.carrier-behavior {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.15);
}
.carrier-behavior p { font-size: var(--fs-small); color: var(--text-2); margin: 4px 0; }

/* ====== S5 调制掺杂旋钮 ====== */
.knob-panel {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.knob-row {
  display: grid; grid-template-columns: 100px 1fr 90px; gap: var(--sp-2);
  align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-small);
}
.knob-row input[type=range] { accent-color: var(--accent); touch-action: pan-y; width: 100%; }
.knob-val { color: var(--accent-ink); text-align: right; }
.output-panel {
  margin-top: var(--sp-2);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
}
.op-row {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-small);
}
.op-label { color: var(--text-3); display: block; }
.op-val { color: var(--accent-ink); font-weight: bold; }
.compare-chart {
  margin-top: var(--sp-3);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--text-2);
  min-height: 60px;
}
.compare-chart b { color: var(--accent-ink); }

/* ====== S9 排除法收网器 ====== */
.cmp-hetero-app-eliminator {
  margin-top: var(--sp-3);
}
.boss-challenge {
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--fs-sub);
  color: var(--tailor-ink);
  margin-bottom: var(--sp-3);
  padding: var(--sp-2);
  border-bottom: 1px dashed var(--tailor);
}
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.device-card {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  background: rgba(0,0,0,.15);
  text-align: center;
  transition: all .3s;
}
.device-card.matched { border-color: #22C55E; background: rgba(34,197,94,0.08); }
.device-card.wrong { border-color: var(--danger); animation: shake .4s; }
.device-name { font-family: var(--font-serif); font-size: var(--fs-small); color: var(--text-1); }
.device-req { font-size: 11px; color: var(--text-3); margin: 4px 0; }
.type-slot {
  border: 2px dashed var(--line);
  border-radius: var(--r-sm);
  padding: 6px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  min-height: 28px;
  transition: all .25s;
}
.type-slot.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.type-slot.filled { border-style: solid; border-color: #22C55E; color: #22C55E; }
.type-palette {
  display: flex; gap: var(--sp-2); justify-content: center;
  margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.type-chip {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--accent-ink);
  cursor: grab;
  transition: all .25s;
  user-select: none;
}
.type-chip:hover { box-shadow: 0 0 12px var(--accent-soft); }
.type-chip.selected { box-shadow: 0 0 16px var(--accent); transform: scale(1.05); }
.type-chip.dragging { opacity: 0.4; }
.type-chip.used { opacity: 0.3; cursor: default; }
.evidence-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.evidence-item {
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  background: rgba(59,130,246,0.05);
  cursor: pointer;
  transition: all .25s;
}
.evidence-item:hover { border-color: var(--accent); color: var(--text-2); }
.evidence-item.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.net-feedback {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  text-align: center;
  min-height: 1.4em;
  color: var(--text-2);
}
.boss-defeat {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--fs-sub);
  color: #22C55E;
  border: 1px solid #22C55E;
  border-radius: var(--r-md);
  background: rgba(34,197,94,0.08);
}

/* ====== 移动端补充 ====== */
@media (max-width: 640px) {
  .device-cards { grid-template-columns: 1fr; }
  .type-slots { grid-template-columns: 1fr; }
  .knob-row { grid-template-columns: 70px 1fr 70px; }
  .output-panel { grid-template-columns: 1fr; }
  .evidence-panel { grid-template-columns: 1fr; }
  .device-grid { grid-template-columns: 1fr; }
}