/* ============================================================================
 * settle.css —— 通关结算 / 破境
 * 依据：art-bible §7.3（结算顺序纪律）§7.4（符文黯淡失败哲学）§4.4（境界纹）
 *
 * 🔒 结算顺序纪律：符文点亮 → 数值滚动 → 器灵 → 灵石 / 掉落。
 *    「先学后奖」：知识层反馈必须排在奖励层之前，顺序不可调换。
 * 🔒 总时长 ≤ --dur-settle 的级联；破境 ≤ --dur-realm。
 * ========================================================================== */

.settle {
  padding-top: 26px;
  text-align: center;
}

/* ---------- 第 1 拍：符文点亮（0ms） ---------- */
.settle-runes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.srune {
  width: 13px; height: 13px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  opacity: 0;
  animation: runeLit 240ms var(--ease-enter) both;
}
.srune[data-lit="1"] { background: var(--accent); border-color: var(--accent); }
/* 待巩固：不是失败，是「还没亮透」——黯淡而非红 */
.srune[data-lit="0"] { opacity: var(--dim-opacity); filter: saturate(var(--dim-saturate)); }
@keyframes runeLit {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: none; }
}

.settle-cap {
  font-family: var(--font-sutra);
  font-size: 20px;
  letter-spacing: .1em;
  opacity: 0;
  animation: fadeIn 200ms var(--ease-enter) 180ms both;
}
.settle-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 3px;
  opacity: 0;
  animation: fadeIn 200ms var(--ease-enter) 220ms both;
}

/* ---------- 第 2 拍：数值滚动（+180ms） ---------- */
.settle-nums {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 22px 0 6px;
  opacity: 0;
  animation: fadeIn 220ms var(--ease-enter) 260ms both;
}
.snum { text-align: center; }
.snum .v {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}
.snum .k { font-size: 11px; color: var(--text-2); letter-spacing: .06em; }
.snum[data-kind="dao"] .v   { color: var(--accent-text); }
.snum[data-kind="mastery"] .v { color: var(--ok-text); }

/* ---------- 第 3 拍：器灵一句（+340ms） ---------- */
.settle-spirit {
  margin: 18px auto 0;
  max-width: 420px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px dashed var(--border);
  opacity: 0;
  animation: fadeIn 220ms var(--ease-enter) 340ms both;
}
.settle-spirit .who {
  font-family: var(--font-sutra);
  color: var(--ornament);
  letter-spacing: .1em;
  margin-right: 6px;
}

/* ---------- 第 4 拍：灵石 / 掉落（+440ms，🔒 必须最后） ---------- */
.settle-loot {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  opacity: 0;
  animation: fadeIn 220ms var(--ease-enter) 440ms both;
}
.loot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
}
.loot .n { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; }
/* 法宝：脉图标 + 鎏金框（§4.6 组合生成） */
.loot[data-kind="artifact"] { border-color: var(--ornament); color: var(--ornament); }

.settle-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
  opacity: 0;
  animation: fadeIn 200ms var(--ease-enter) 520ms both;
}

/* ============================================================
 * 破境（≤ --dur-realm 1200ms）
 * 🔒 只做一次；靠境界纹的【结构增量】表达，不靠特效堆叠
 * ============================================================ */
.ascend {
  margin: 26px auto 0;
  max-width: 360px;
  padding: 22px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--ornament);
  background: var(--surface);
  animation: ascendIn var(--dur-realm) var(--ease-enter) both;
}
@keyframes ascendIn {
  0%   { opacity: 0; transform: scale(.96); }
  40%  { opacity: 1; transform: scale(1.005); }
  100% { opacity: 1; transform: scale(1); }
}
.ascend .realm-sigil {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
}
.ascend .cap {
  font-family: var(--font-sutra);
  font-size: 24px;
  letter-spacing: .2em;
  color: var(--ornament);
}
.ascend .from-to {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 6px;
}
.ascend .unlock {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.6;
}

/* ============================================================
 * 关卡剧情收束（②.5 拍，排在器灵之前、灵石之后之前）
 * 叙事不是奖励：先学（符文/器灵）后奖（灵石），剧情夹在中间。
 * ============================================================ */
.settle-story {
  margin: 16px auto 0;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2);
  letter-spacing: .04em;
  opacity: 0;
  animation: fadeIn 220ms var(--ease-enter) 380ms both;
}
