/* ============================================================
   ch02「炼晶筑台」章节专属样式
   境界色：松花绿 #057748（= tokens --realm-1，较 ch01 翠绿深半档）
   对立色：幻晶妖冰蓝 #A8C8E8 ｜ 理性/计算专用金 #D4A853
   一切基础色值仍走 tokens 变量；以下仅做本章变量映射与组件样式。
   ============================================================ */

/* ---------- 本章变量映射（仅影响本页，不改 tokens.css） ---------- */
:root, :root[data-theme="light"] {
  --accent: var(--realm-1);              /* 松花绿 · 点亮色 */
  --accent-ink: var(--realm-1);          /* 亮底文字级 */
  --accent-soft: rgba(5, 119, 72, 0.13);
  --glow: 0 0 18px rgba(5, 119, 72, 0.25);
  --huan: #A8C8E8;                       /* 幻晶妖冰蓝 */
  --huan-ink: #3E6B8E;                   /* 冰蓝·亮底文字级 */
  --huan-soft: rgba(168, 200, 232, 0.16);
  --calc: #D4A853;                       /* 理性/计算专用金 */
  --calc-ink: #8A6100;
  --calc-soft: rgba(212, 168, 83, 0.16);
  --color-correct: var(--realm-1);
  --color-insight: #8A6100;
}
:root[data-theme="dark"] {
  --accent: var(--realm-1);
  --accent-ink: #2BC47E;                 /* 松花绿·暗底提亮（文字级） */
  --accent-soft: rgba(5, 119, 72, 0.22);
  --glow: 0 0 22px rgba(5, 119, 72, 0.42);
  --huan: #A8C8E8;
  --huan-ink: #A8C8E8;
  --huan-soft: rgba(168, 200, 232, 0.16);
  --calc: #D4A853;
  --calc-ink: #D4A853;
  --calc-soft: rgba(212, 168, 83, 0.16);
  --color-correct: #1FA866;
  --color-insight: #D4A853;
}
.op-title span {
  display: inline-block; opacity: 0;
  text-shadow: 0 0 60px var(--huan-soft), 0 0 24px var(--accent-soft);
}
/* ---------- 幻晶妖对话框（冰蓝对立色） ---------- */
.dlg.huan { border-left-color: var(--huan); box-shadow: var(--shadow), 0 0 18px var(--huan-soft); }
.dlg.huan .who { background: var(--huan-ink); color: #F4F9FF; }
.dlg.huan .avatar { border-color: var(--huan); }
:root[data-theme="dark"] .dlg.huan .who { color: var(--bg-sunk); }
/* ---------- 物品栏 ---------- */
#inventory {
  position: fixed; left: var(--sp-3); bottom: var(--sp-3); z-index: 110;
  display: flex; gap: var(--sp-2); align-items: flex-end;
}
.inv-scar {
  font-size: 0.6rem; color: var(--danger);
  border: 1px dashed var(--danger); border-radius: 999px; padding: 0 6px;
}
#inv-palace-ico { transition: filter var(--dur-slow), transform var(--dur-slow); }
#crack-panel {
  position: absolute; left: 0; bottom: 70px; width: min(78vw, 320px);
  padding: var(--sp-4); max-height: 50vh; overflow-y: auto;
}
#crack-panel h3 { font-size: var(--fs-sub); margin-bottom: var(--sp-2); }
.crack-item {
  font-family: var(--font-serif);
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-2) 0;
  font-size: var(--fs-small);
  animation: carve-in 0.8s var(--ease-out);
}
.lattice-cv {
  width: 100%; max-width: 640px; border-radius: var(--r-md);
  background: var(--bg-sunk); border: 1px solid var(--line);
  touch-action: none;
}
/* ---------- S0 万晶之厅 ---------- */
.s0-stones { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.stone-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 96px; min-height: 96px; padding: var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; color: var(--text-1); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.stone-item .ico { font-size: 1.9rem; }
.stone-item small { color: var(--text-2); }
.stone-item:hover { border-color: var(--accent); transform: translateY(-3px); }
.stone-item.picked { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.stone-item.placed { opacity: 0.35; pointer-events: none; }
.s0-niches { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; width: 100%; }
.niche {
  flex: 1; min-width: 120px; min-height: 76px; padding: var(--sp-3);
  border: 2px dashed var(--line-strong); border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-2); cursor: pointer; font-family: var(--font-serif);
  transition: all var(--dur-fast) var(--ease-out);
}
.niche:hover { border-color: var(--accent); color: var(--accent); }
.niche.ok { border-style: solid; border-color: var(--color-correct); color: var(--color-correct); background: var(--accent-soft); }
.niche.quasi { border-color: var(--huan); color: var(--huan-ink); }
.niche .insc { font-size: 0.72rem; color: var(--text-3); font-family: var(--font-sans); }
.s0-palace-box { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; }
.palace-hotspot {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--huan); border-radius: 999px;
  background: var(--huan-soft); color: var(--text-1); cursor: pointer;
  transition: all var(--dur-mid) var(--ease-out);
}
.palace-hotspot:hover { box-shadow: 0 0 22px var(--huan-soft); transform: scale(1.04); }
.palace-ico { font-size: 1.4rem; filter: drop-shadow(0 0 8px var(--huan)); }

/* ---------- S1 拼灵台 ---------- */
.s1-modes .choice b { display: block; font-family: var(--font-serif); }
.s1-modes .choice small { color: var(--text-3); }
.s1-modes .choice.tried { border-color: var(--danger); }
.s1-modes .choice.blessed { border-color: var(--color-correct); }
.s1-gates { display: flex; gap: var(--sp-3); width: 100%; justify-content: center; flex-wrap: wrap; }
.gate {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 108px; padding: var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
}
.gate-name { font-size: var(--fs-small); color: var(--text-2); }
.gate.fail { border-color: var(--danger); background: var(--danger-soft); animation: shake 0.4s var(--ease-out); }
.gate.fail .readout { color: var(--danger); }
.gate.pass { border-color: var(--color-correct); background: var(--accent-soft); }
.s1-concepts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; margin: var(--sp-3) 0; }
@media (max-width: 560px) { .s1-concepts { grid-template-columns: 1fr; } }
.concept-card {
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--accent-soft);
  display: flex; flex-direction: column; gap: 2px;
}
.concept-card b { color: var(--accent-ink); font-family: var(--font-serif); }
.concept-card span { font-size: var(--fs-small); color: var(--text-2); }

/* ---------- S2 晶格长廊 ---------- */
.s2-systems { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.sys-btn {
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--text-2); cursor: pointer; font-size: var(--fs-small);
  transition: all var(--dur-fast);
}
.sys-btn:hover { border-color: var(--accent); color: var(--accent); }
.sys-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.s2-sys-detail { min-height: 2.6em; text-align: center; font-family: var(--font-serif); }
.s2-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); width: 100%; }
@media (max-width: 640px) { .s2-rooms { grid-template-columns: 1fr; } }
.room {
  padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  transition: border-color var(--dur-fast);
}
.room.done { border-color: var(--color-correct); }
.room h4 { font-family: var(--font-serif); color: var(--accent-ink); }
.room canvas { width: 100%; border-radius: var(--r-sm); background: var(--bg-sunk); border: 1px solid var(--line); }
.room .readout { font-size: var(--fs-body); }
.s2-lamps { display: flex; gap: var(--sp-3); justify-content: center; }
.lamp {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent;
  transition: all var(--dur-mid);
}
.lamp.lit { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px var(--gold-soft); }

/* ---------- S3 称骨殿 ---------- */
.s3-boxes { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.cu-box {
  min-width: 92px; padding: var(--sp-3);
  border: 2px solid var(--calc); border-radius: var(--r-sm);
  background: transparent; color: var(--text-1); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-sub);
  transition: all var(--dur-fast) var(--ease-spring);
}
.cu-box:hover { transform: translateY(-3px); box-shadow: 0 0 16px var(--calc-soft); }
.cu-box.on { background: var(--calc-soft); }
.cu-box.done { border-color: var(--color-correct); color: var(--color-correct); }
.s3-steps { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; }
.s3-step {
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start;
}
.s3-step b { color: var(--calc-ink); font-family: var(--font-serif); }
#s3-answer, #s5-answer {
  min-height: 44px; padding: var(--sp-2) var(--sp-4); width: 10em;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--bg-elev); color: var(--text-1); font-family: var(--font-mono); font-size: var(--fs-body);
}
#s3-answer:focus, #s5-answer:focus { border-color: var(--accent); outline: none; box-shadow: var(--glow); }
.s3-stairs { display: flex; gap: var(--sp-4); align-items: flex-end; justify-content: center; min-height: 130px; width: 100%; }
.stair { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stair i {
  display: block; width: 64px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: linear-gradient(180deg, var(--calc), var(--calc-soft));
  height: 0; transition: height 1.1s var(--ease-out);
}
.stair.lit i { box-shadow: 0 0 18px var(--calc-soft); }
.stair span { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-2); }
#s3-stair-sc.lit i { height: 68px; }
#s3-stair-bcc.lit i { height: 88px; }
#s3-stair-fcc.lit i { height: 96px; }
.huan-whisper {
  min-height: 44px; padding: var(--sp-3) var(--sp-4); width: 100%;
  border: 1px dashed var(--huan); border-radius: var(--r-md);
  background: var(--huan-soft); color: var(--huan-ink); cursor: pointer;
  font-family: var(--font-serif); font-size: var(--fs-small); line-height: 1.7;
  transition: all var(--dur-fast);
}
.huan-whisper:hover { box-shadow: 0 0 18px var(--huan-soft); }

/* ---------- S4 切面司 ---------- */
.s4-planes { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
.plane-row {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md);
}
.plane-row.cut { border-color: var(--color-correct); }
.plane-row .intercepts { font-family: var(--font-mono); color: var(--calc-ink); min-width: 9em; }
.plane-row .name-opts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.name-opt {
  min-height: 40px; padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--text-1); cursor: pointer; font-family: var(--font-mono);
  transition: all var(--dur-fast);
}
.name-opt:hover { border-color: var(--accent); }
.name-opt.right { border-color: var(--color-correct); background: var(--accent-soft); color: var(--color-correct); }
.name-opt.wrong { border-color: var(--danger); background: var(--danger-soft); }

/* ---------- S5 真身殿 ---------- */
.s5-thunder { text-align: center; padding: var(--sp-4); animation: simIn 600ms var(--ease-out); }
.thunder-num {
  font-size: var(--fs-hero); color: var(--accent-ink);
  text-shadow: 0 0 24px var(--accent-soft);
}

/* ---------- S6 双子塔 ---------- */
.dye { border-width: 2px; }
.dye-ga { border-color: var(--calc); color: var(--calc-ink); }
.dye-ga.picked { background: var(--calc-soft); }
.dye-as { border-color: var(--info); color: var(--info-ink); }
.dye-as.picked { background: var(--info-soft); }
.s6-doorplate { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; width: 100%; }
.dp-cell {
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--calc); border-radius: var(--r-md);
  background: var(--calc-soft); display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.dp-cell b { font-family: var(--font-mono); color: var(--calc-ink); }
.dp-cell span { font-size: var(--fs-small); color: var(--text-2); }

/* ---------- S7 镜湖 ---------- */
.plane-btn.on { border-color: var(--huan); background: var(--huan-soft); color: var(--huan-ink); }

/* ---------- S8 缺陷殿 ---------- */
.s8-crystals { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.crys-item {
  width: 84px; min-height: 84px; padding: var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; color: var(--text-1); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: all var(--dur-fast) var(--ease-out);
}
.crys-item .ico { font-size: 1.7rem; }
.crys-item small { color: var(--text-2); font-size: 0.68rem; }
.crys-item:hover { border-color: var(--accent); transform: translateY(-3px); }
.crys-item.seen { border-color: var(--huan); background: var(--huan-soft); }
.crys-item.phos { border-color: var(--ore-jade); box-shadow: 0 0 14px var(--accent-soft); }
.s8-atlas { width: 100%; }
.atlas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); width: 100%; }
.atlas-cell {
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0.3; transition: all var(--dur-mid) var(--ease-out);
}
.atlas-cell.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.atlas-cell b { color: var(--accent-ink); font-family: var(--font-serif); }
.atlas-cell span { font-size: var(--fs-small); color: var(--text-2); line-height: 1.6; }

/* ---------- S10 炼晶炉 ---------- */
.graph-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; max-width: 40rem; }
#s10-break, #s10-hook { font-size: var(--fs-sub); text-align: center; }