/* ============================================================
   SICI 章节公共样式 (chapter-base.css)
   从 45 个章节 CSS 中提取的 176 条完全相同的规则。
   加载顺序: tokens.css → base.css → chapter-base.css → chXX.css
   ============================================================ */
/* [25次] */
.readout.big {
  font-size: var(--fs-title);
}
/* [25次] */
.op-kicker {
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.5em; color: var(--accent-ink);
}
/* [25次] */
.op-sub {
  letter-spacing: 0.6em; text-indent: 0.6em; color: var(--text-2); opacity: 0; font-size: clamp(0.9rem, 2vw, 1.1rem);
}
/* [24次] */
.op-hint {
  position: absolute; bottom: 5vh; left: 0; right: 0; font-size: 0.75rem; letter-spacing: 0.3em; color: var(--text-3); opacity: 0;
}
/* [20次] */
/* .op-title 字号唯一定义见文件后段（clamp(2.6rem,10vw,6rem)），此处不再重复声明 */
/* [15次] */
.narr .dlg {
  width: min(620px, 100%);
}
/* [15次] */
.dlg.neumann .who {
  background: var(--accent); color: var(--on-accent);
}
/* [15次] */
.dlg.neumann .avatar {
  border-color: var(--accent);
}
/* [15次] */
.dlg.boss .avatar {
  border-color: var(--ch-boss);
}
/* [15次] */
.dlg.boss p {
  font-style: italic; color: var(--text-2);
}
/* [15次] */
.inv-item:hover {
  border-color: var(--accent); transform: translateY(-3px);
}
/* [15次] */
.inv-icon {
  font-size: 1.2rem;
}
/* [15次] */
.inv-label b {
  color: var(--accent); font-family: var(--font-mono);
}
/* [15次] */
.scene-next:disabled {
  opacity: 0.35;
}
/* [15次] */
.data-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
/* [15次] */
.slider-row .readout {
  min-width: 7.5em; text-align: right;
}
/* [14次] */
.slider-row {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%;
}
/* [13次] */
.slider-row input[type="range"] {
  flex: 1;
}
/* [11次] */
/* ---------- 开场（opening） ---------- */
/* [10次] */
@keyframes simIn {
  from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; }
}
/* [10次] */
.insight.show {
  opacity: 1; transform: none;
}
/* [10次] */
#startBtn {
  opacity: 0; background-color: var(--accent);
}
/* [10次] */
#startBtn:hover {
  background-color: var(--accent-ink);
}
/* [10次] */
.option:hover {
  border-color: var(--accent); transform: scale(1.02);
}
/* [9次] */
/* ---------- 通用助手 ---------- */
.dim {
  color: var(--text-2); font-size: var(--fs-small);
}
/* [9次] */
code {
  font-family: var(--font-mono);
}
/* [9次] */
/* ---------- 叙事块 narr ---------- */
.narr-box {
  border-left-color: var(--accent);
}
/* [9次] */
.narr p {
  color: var(--text-1);
}
/* [9次] */
.narr code {
  font-family: var(--font-mono); font-size: 0.9em; background: var(--accent-soft); color: var(--accent-ink); padding: 1px 6px; border-radius: 3px;
}
/* [9次] */
/* ---------- 物品栏 inventory ---------- */
#inventory {
  gap: var(--sp-1);
}
/* [9次] */
/* ---------- 场景通用 ---------- */
.scene-next {
  margin-top: var(--sp-2); min-width: 220px;
}
/* [9次] */
.stage {
  gap: var(--sp-3);
}
/* [9次] */
.stage h3 {
  font-size: var(--fs-sub); text-align: center;
}
/* [9次] */
.stage h4 {
  font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--accent-ink);
}
/* [9次] */
.ctrl-row {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
}
/* [9次] */
/* ---------- 通用 insight 顿悟：章节定义 --ch-epiphany 用顿悟金，未定义（semi）回退境界色 ---------- */
.insight {
  border-left-color: var(--ch-epiphany, var(--accent)); background: var(--ch-epiphany-soft, var(--accent-soft)); color: var(--text-1);
}
/* [9次] */
.insight::before {
  color: var(--ch-epiphany, var(--accent));
}
/* [9次] */
.q-progress-bar {
  display: flex; gap: 4px; width: 100%; margin-bottom: var(--sp-2);
}
/* [9次] */
.q-progress-bar .q-dot {
  flex: 1; height: 6px; background: var(--glass-line); border-radius: 3px; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
/* [9次] */
.q-progress-bar .q-dot.done {
  background: var(--ch-ok);
}
/* [9次] */
.q-panel .q-text {
  margin-bottom: var(--sp-2);
}
/* [9次] */
.option.correct {
  border-color: var(--ch-ok); background: rgba(34,197,94,0.12); color: var(--ch-ok);
}
/* [9次] */
.option .opt-key {
  font-family: var(--font-mono); font-weight: 600; margin-right: var(--sp-2); color: var(--accent-ink);
}
/* [8次] */
/* ---------- 导师 / Boss 对话框变体 ---------- */
.dlg.neumann {
  border-left-color: var(--accent); box-shadow: var(--shadow), 0 0 18px var(--accent-soft);
}
/* [8次] */
/* ---------- 叙事块 ---------- */
/* [8次] */
.scene-hook {
  text-align: center; font-family: var(--font-serif); letter-spacing: 0.1em;
}
/* [8次] */
/* ---------- 通用 ---------- */
/* [8次] */
.ex-row {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; justify-content: center;
}
/* [8次] */
.btn-ghost {
  border-style: dashed; opacity: 0.8;
}
/* [8次] */
.btn-ghost:hover {
  opacity: 1;
}
/* [8次] */
.frag-node.center {
  border-color: var(--gold); color: var(--gold-ink);
}
/* [8次] */
.frag-node.center.lit {
  box-shadow: 0 0 22px var(--gold-soft);
}
/* [8次] */
.cmp-title {
  font-size: 1rem; font-weight: bold; color: var(--text-1, #F1F5F9);
}
/* [8次] */
.cmp-ctrl-col {
  flex-direction: column; align-items: stretch;
}
/* [8次] */
.cmp-row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
/* [8次] */
.cmp-canvas {
  display: block; width: 100%; height: 280px;
}
/* [8次] */
.ro-item {
  display: flex; flex-direction: column; gap: 0.1rem;
}
/* [7次] */
.dlg.boss {
  border-left-color: var(--ch-boss); box-shadow: var(--shadow), 0 0 18px var(--ch-boss-soft);
}
/* [7次] */
#carve-panel {
  position: absolute; left: 0; bottom: 70px; width: min(78vw, 320px); padding: var(--sp-4); max-height: 50vh; overflow-y: auto;
}
/* [7次] */
#carve-panel h3 {
  font-size: var(--fs-sub); margin-bottom: var(--sp-2);
}
/* [7次] */
.data-row {
  display: flex; gap: var(--sp-5); flex-wrap: wrap; justify-content: center;
}
/* [7次] */
.data-panel {
  min-height: 2.5em; text-align: center; color: var(--text-1); font-family: var(--font-serif);
}
/* [7次] */
@keyframes collapseDim {
  0% { filter: brightness(1); } 40% { filter: brightness(0.65); } 100% { filter: brightness(1); }
}
/* [7次] */
.frag-node.lit {
  color: var(--accent-ink); border-color: var(--accent); box-shadow: var(--glow);
}
/* [7次] */
@keyframes shake {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); }
}
/* [7次] */
.puzzle-piece.placed {
  opacity: 0.3; cursor: default;
}
/* [7次] */
.system-map {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
/* [7次] */
.stage-tag {
  align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.2em; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 12px; background: var(--accent-soft);
}
/* [7次] */
.inv-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; min-height: 56px; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-md); background: var(--glass-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text-2); cursor: pointer; font-size: 0.75rem; transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring), opacity var(--dur-slow), filter var(--dur-slow);
}
/* [7次] */
.btn-danger-ghost {
  border-style: dashed; border-color: var(--danger); color: var(--danger); opacity: 0.85;
}
/* [7次] */
.btn-danger-ghost:hover {
  opacity: 1; background: var(--danger-soft);
}
/* [7次] */
.ok {
  color: var(--color-correct);
}
/* [7次] */
@keyframes carve-in {
  from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; }
}
/* [7次] */
.cmp-sub {
  font-size: 0.82rem; color: var(--text-3, #94A3B8); margin-top: 0.2rem;
}
/* [7次] */
.cmp-label {
  font-size: 0.82rem; color: var(--text-3, #94A3B8); white-space: nowrap; min-width: 3.5rem;
}
/* [7次] */
.ro-k {
  font-size: 0.75rem; color: var(--text-3, #94A3B8);
}
/* [7次] */
.s10-next-link.disabled {
  pointer-events: none; opacity: 0.4; filter: grayscale(0.6);
}
/* [6次] */
:root[data-theme="dark"] {
  --accent: #34D399; --accent-ink: #10B981; --accent-soft: rgba(16, 185, 129, 0.16); --glass-line: rgba(16, 185, 129, 0.18); --glow: 0 0 22px rgba(16, 185, 129, 0.34); --on-accent: #04120F;
}
/* [6次] */
.scene-next-hint {
  text-align: center;
}
/* [6次] */
.choice-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%;
}
/* [6次] */
@media (max-width: 560px) {
  .choice-grid { grid-template-columns: 1fr; }
  .cmp-canvas { height: 200px; }
}
/* 平板横屏+（768px+）：交互组件多列增强 */
@media (min-width: 768px) {
  .adv-grid { grid-template-columns: repeat(3, 1fr); }
  .map-grid { grid-template-columns: repeat(6, 1fr); }
  .mat-row { grid-template-columns: repeat(3, 1fr); }
}
/* [6次] */
.q-options {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
/* [6次] */
.q-option {
  min-height: 44px; padding: var(--sp-2) var(--sp-3); text-align: left; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: transparent; color: var(--text-1); cursor: pointer; font-size: var(--fs-small); line-height: 1.5; transition: all var(--dur-fast) var(--ease-out);
}
/* [6次] */
.q-option:hover {
  border-color: var(--accent);
}
/* [6次] */
.frag-node:hover {
  border-color: var(--accent);
}
/* [6次] */
.frag-node.placed {
  opacity: 0.4; pointer-events: none;
}
/* [6次] */
.chain-slot.error {
  border-color: var(--ch-boss); color: var(--ch-boss); background: var(--ch-boss-soft); animation: shake 0.4s var(--ease-out);
}
/* [6次] */
.puzzle-piece:hover {
  border-color: var(--accent); box-shadow: var(--glow); transform: translateY(-2px);
}
/* [6次] */
.map-node.lit {
  opacity: 1; border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
/* [6次] */
#carve-list p {
  font-size: 0.8rem; color: var(--ch-epiphany-ink); margin: var(--sp-1) 0;
}
/* [6次] */
/* ---------- 通用 option / btn 选项 ---------- */
.option-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); width: 100%;
}
/* [6次] */
.option {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--accent-soft); cursor: pointer; font-size: 0.85rem; text-align: left; transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 44px;
}
/* [6次] */
.option.locked {
  cursor: default;
}
/* [6次] */
@keyframes riftOpen {
  from { opacity: 0; transform: scaleY(0.2); } to { opacity: 1; transform: scaleY(1); }
}
/* [6次] */
.boss-figure {
  width: 100%; display: flex; justify-content: center; margin-bottom: var(--sp-2);
}
/* [6次] */
#s9-boss-canvas {
  width: 100%; max-width: 480px; height: auto; border-radius: var(--r-sm); background: rgba(3,5,9,0.4);
}
/* [6次] */
.q-feedback {
  width: 100%; margin-top: 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); font-size: 0.82rem; min-height: 40px;
}
/* [6次] */
.q-feedback.right {
  border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok);
}
/* [6次] */
.puzzle-area {
  width: 100%; display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; padding: var(--sp-3); border: 1px dashed var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); min-height: 80px;
}
/* [6次] */
.map-node {
  padding: var(--sp-1) 4px; border: 1px solid var(--glass-line); border-radius: var(--r-xs); font-size: 0.75rem; background: var(--bg-elev); color: var(--text-3); text-align: center; opacity: 0.4; transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 44px; display: flex; align-items: center; justify-content: center;
}
/* [6次] */
/* ---------- 开场（opening） ---------- */
#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);
}
/* [6次] */
/* ---------- 崩塌演出 ---------- */
/* [6次] */
/* ---------- 知识图谱 ---------- */
.graph-wrap {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; max-width: 40rem;
}
/* [6次] */
/* 开场与场景头点缀：境界色统一走 var(--accent)，base.css 已有同款定义，此处不再覆写 */
/* [6次] */
/* 药丸按钮组 */
.cmp-btn-group {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
/* [6次] */
.op-quote {
  border-left-color: var(--accent);
}
/* [6次] */
/* 顿悟框样式由前段 .insight（var(--ch-epiphany, var(--accent)) 回退链）统一管理，此处不再覆写 */
/* [5次] */
/* ---------- 叙事块 ---------- */
.narr {
  width: min(44rem, 100%);
}
/* [5次] */
.carve-item {
  color: var(--accent);
}
/* [5次] */
.q-panel {
  width: 100%; padding: var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-elev);
}
/* [5次] */
.q-text {
  font-family: var(--font-serif); font-size: var(--fs-sub); margin-bottom: var(--sp-3);
}
/* [5次] */
.q-option.wrong {
  border-color: var(--ch-boss); color: var(--ch-boss); background: var(--ch-boss-soft);
}
/* [5次] */
.q-option.correct {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow);
}
/* [5次] */
.scar-card.lit {
  opacity: 1; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow);
}
/* [5次] */
.ledger-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunk); font-size: var(--fs-small);
}
/* [5次] */
.ledger-panel.cleared {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
/* [5次] */
.chain-slots {
  display: flex; flex-direction: column; gap: var(--sp-1); width: 100%; max-width: 480px;
}
/* [5次] */
.chain-slot.filled {
  border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
/* [5次] */
.gate-text span.lit {
  color: var(--ch-epiphany); text-shadow: 0 0 18px var(--ch-epiphany-soft);
}
/* [5次] */
/* 场景过渡暗化（崩塌时刻） */
.stage.collapse {
  animation: collapseDim 1.2s var(--ease-out);
}
/* [5次] */
@media (prefers-reduced-motion: reduce) {
  .stage.collapse { animation: none; }
}
/* [5次] */
.option.excluded {
  opacity: 0.3; cursor: default; transform: none; text-decoration: line-through;
}
/* [5次] */
.dlg.boss .who {
  background: var(--ch-boss-ink); color: #FFFFFF;
}
/* [5次] */
.option.wrong {
  border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn);
}
/* [5次] */
/* ---------- 通用 metric 标签 ---------- */
.metric {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink);
}
/* [5次] */
.metric b {
  color: var(--accent); font-size: 1rem;
}
/* [5次] */
.bet-result {
  width: 100%; padding: var(--sp-3); border-radius: var(--r-sm); font-size: 0.85rem; animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
/* [5次] */
.bet-result.wrong {
  border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn);
}
/* [5次] */
.bet-result.right {
  border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok);
}
/* [5次] */
.q-progress-bar .q-dot.current {
  background: var(--accent); box-shadow: 0 0 8px var(--accent-soft);
}
/* [5次] */
.q-panel .q-tag {
  display: inline-block; font-size: 0.75rem; font-family: var(--font-mono); color: var(--ch-boss-ink); background: var(--ch-boss-soft); padding: 1px 8px; border-radius: 3px; margin-bottom: var(--sp-2); letter-spacing: 0.1em;
}
/* [5次] */
.q-feedback.wrong {
  border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn);
}
/* [5次] */
.puzzle-piece {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-elev); cursor: pointer; font-size: 0.8rem; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none; min-height: 44px; display: flex; align-items: center;
}
/* [5次] */
.map-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
/* [5次] */
.realm-achieved {
  width: 100%; margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--accent); border-radius: var(--r-md); background: var(--accent-soft); text-align: center; animation: realmGlow 2s cubic-bezier(0.22,1,0.36,1) infinite;
}
/* [5次] */
.realm-glow {
  font-family: var(--font-serif); font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--accent-ink); letter-spacing: 0.3em; font-weight: 700;
}
/* [5次] */
.op-title {
  font-size: clamp(2.6rem, 10vw, 6rem); letter-spacing: 0.22em; text-indent: 0.22em; line-height: 1.1;
}
/* [5次] */
.inv-item.is-dim {
  opacity: 0.38; filter: grayscale(0.9);
}
/* [5次] */
.inv-item.is-dim:hover {
  border-color: var(--glass-line);
}
/* [5次] */
.inv-scar {
  font-size: 0.7rem; font-weight: 600; color: var(--calc-ink); border: 1px dashed var(--calc); border-radius: 999px; padding: 0 6px;
}
/* [5次] */
.inv-scar b {
  color: var(--calc-ink); font-family: var(--font-mono);
}
/* [5次] */
.btn.on {
  border-style: solid; border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft);
}
/* [5次] */
.stele-title {
  font-size: var(--fs-small); letter-spacing: 0.5em; text-indent: 0.5em; color: var(--accent-ink); margin-bottom: var(--sp-2);
}
/* [5次] */
.stele-line {
  font-size: var(--fs-sub); color: var(--text-1); line-height: 2;
}
/* [5次] */
.stele-foot {
  font-size: var(--fs-small); color: var(--text-3); margin-top: var(--sp-2); letter-spacing: 0.1em;
}
/* [5次] */
/* 开场标题：随主题文本色（.op-sub 已在文件头部定义为 var(--text-2)，不再覆写） */
.op-title span {
  color: var(--text-1);
}
/* [5次] */
.s10-curve-host .frag-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem;
}
/* [5次] */
.frag-node {
  padding: 0.5rem 0.7rem; border: 1px solid var(--glass-border, rgba(255,255,255,0.1)); border-radius: 8px; background: transparent; color: var(--text-3, #75878A); font-family: var(--font-mono, monospace); font-size: 0.78rem; cursor: pointer; transition: all 0.25s var(--ease-out, ease);
}