/* =========================================================================
 * 方证闯关 · 样式（贴合站点 --ziwu-* 节律语言：宣纸底 / 朱砂 / 黛绿 / 古铜金）
 * ========================================================================= */

/* ---------- 关卡地图 ---------- */
.fc-map { padding: 4px 2px 8px; }
.fc-head { margin-bottom: 14px; }
.fc-head .ph { margin: 0 0 8px; }
.fc-head .hint { margin: 0 0 10px; line-height: 1.7; }
.fc-progress {
  font-size: 13.5px; color: var(--ziwu-muted);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 9px 12px; border: 1px solid var(--ziwu-line); border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--ziwu-gold), transparent 88%);
}
.fc-progress b { color: var(--ziwu-cinnabar-deep); }
.fc-tobook { flex-direction: row; padding: 6px 12px; font-size: 12.5px; margin-left: auto; }

/* 关卡卡片：复用 .case-card，增加编号 / 锁定 / 通关态 */
.fc-lv .cc-no {
  position: absolute; left: 14px; top: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 13px;
  background: var(--ziwu-gold); color: #fff8ec;
  box-shadow: 0 4px 10px color-mix(in oklab, var(--ziwu-gold), transparent 60%);
}
.fc-lv { padding-left: 50px; min-height: 92px; }
.fc-lv .cc-name { font-size: 16px; }
.fc-lv.fc-locked { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }
.fc-lv.fc-locked::before { background: var(--ziwu-muted); }
.fc-lv.fc-cleared { border-color: color-mix(in oklab, var(--ziwu-jade), transparent 55%); }
.fc-lv.fc-cleared::before { background: var(--ziwu-jade); }
.fc-lv.fc-cleared .cc-go { color: var(--ziwu-jade); }
.fc-seal {
  position: absolute; right: 12px; top: 12px;
  width: 30px; height: 30px; border-radius: 6px; transform: rotate(-8deg);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 15px; color: #fff;
  background: var(--ziwu-jade); border: 2px solid #fff;
  box-shadow: 0 4px 10px color-mix(in oklab, var(--ziwu-jade), transparent 60%);
}

/* ---------- 答题 ---------- */
.fc-quiz { max-width: 720px; margin: 0 auto; padding: 4px 2px; }
.fc-quiz-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fc-quiz-bar .fc-back { flex-direction: row; padding: 7px 14px; font-size: 13px; }
.fc-quiz-meta { font-size: 13.5px; color: var(--ziwu-muted); margin-left: auto; }
.fc-quiz-meta b { color: var(--ziwu-cinnabar-deep); }

.fc-qcard {
  background: var(--ziwu-surface); border: 1px solid var(--ziwu-line);
  border-radius: var(--radius); padding: 22px 22px 20px;
  box-shadow: 0 16px 38px color-mix(in oklab, var(--ziwu-night), transparent 92%);
}
.fc-stem-label {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: var(--ziwu-cinnabar); padding: 3px 12px; border-radius: 999px;
  margin-bottom: 12px;
}
.fc-stem {
  font-family: "Noto Serif SC", serif; font-size: 26px; font-weight: 600;
  color: var(--ziwu-ink); line-height: 1.5; padding: 6px 2px 14px;
  border-bottom: 1px dashed var(--ziwu-line);
}
.fc-stem-comp {
  font-size: 16px; font-weight: 500; line-height: 1.9;
  background: color-mix(in oklab, var(--ziwu-gold), transparent 90%);
  border: 1px solid var(--ziwu-line); border-radius: var(--radius-sm);
  padding: 12px 14px; max-height: 220px; overflow: auto; letter-spacing: .02em;
}
.fc-stem-note { font-size: 12.5px; color: var(--ziwu-muted); margin: 10px 0 4px; }

.fc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px; }
.fc-opt {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: var(--ziwu-surface); border: 1.5px solid var(--ziwu-line);
  border-radius: var(--radius-sm); padding: 14px 14px;
  font-family: "Noto Serif SC", serif; transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.fc-opt:hover:not(:disabled) {
  border-color: var(--ziwu-cinnabar); transform: translateY(-2px);
  box-shadow: 0 8px 18px color-mix(in oklab, var(--ziwu-night), transparent 92%);
}
.fc-opt:disabled { cursor: default; }
.fc-opt-key {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--ziwu-muted);
  background: color-mix(in oklab, var(--ziwu-gold), transparent 82%); border: 1px solid var(--ziwu-line);
}
.fc-opt-txt { font-size: 17px; font-weight: 600; color: var(--ziwu-ink); line-height: 1.4; }
.fc-opt.fc-correct {
  border-color: var(--ziwu-jade); background: color-mix(in oklab, var(--ziwu-jade), transparent 88%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ziwu-jade), transparent 78%);
}
.fc-opt.fc-correct .fc-opt-key { background: var(--ziwu-jade); color: #fff; border-color: var(--ziwu-jade); }
.fc-opt.fc-wrong {
  border-color: var(--ziwu-cinnabar); background: color-mix(in oklab, var(--ziwu-cinnabar), transparent 90%);
}
.fc-opt.fc-wrong .fc-opt-key { background: var(--ziwu-cinnabar); color: #fff; border-color: var(--ziwu-cinnabar); }

.fc-feedback { min-height: 22px; margin: 12px 0 4px; font-size: 14px; font-weight: 600; }
.fc-feedback.fc-ok { color: var(--ziwu-jade); }
.fc-feedback.fc-bad { color: var(--ziwu-cinnabar-deep); }
.fc-nextwrap { display: flex; justify-content: flex-end; margin-top: 8px; }
.fc-next { flex-direction: row; padding: 9px 20px; font-size: 14px; }

/* ---------- 结算 ---------- */
.fc-result { max-width: 560px; margin: 8px auto; }
.fc-result .ph { margin: 0 0 14px; }
.fc-result-card {
  text-align: center; padding: 30px 24px;
  background: var(--ziwu-surface); border: 1px solid var(--ziwu-line); border-radius: var(--radius);
  box-shadow: 0 16px 38px color-mix(in oklab, var(--ziwu-night), transparent 92%);
}
.fc-result-card.fc-pass { border-color: color-mix(in oklab, var(--ziwu-jade), transparent 50%); }
.fc-result-card.fc-unpass { border-color: color-mix(in oklab, var(--ziwu-cinnabar), transparent 55%); }
.fc-result-emoji { font-size: 40px; line-height: 1; }
.fc-result-title { font-family: "Noto Serif SC", serif; font-size: 24px; font-weight: 700; color: var(--ziwu-cinnabar-deep); margin: 8px 0 6px; }
.fc-result-sub { font-size: 14px; color: var(--ziwu-muted); margin: 0 0 18px; }
.fc-result-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fc-result-btns .sbtn { flex-direction: row; padding: 9px 20px; font-size: 14px; }

/* ---------- 响应式 ---------- */
@media (max-width: 620px) {
  .fc-opts { grid-template-columns: 1fr; }
  .fc-stem { font-size: 22px; }
  .fc-lv { padding-left: 50px; }
}