/* ============================================================
   演绎训练室 deduction.html
   ============================================================ */

/* ---------- 关卡卡片 ---------- */
.trials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 940px) { .trials { grid-template-columns: 1fr; } }

.trial-card {
  position: relative;
  border: 1px solid var(--fog-08);
  background: linear-gradient(168deg, var(--ink-700), var(--ink-850));
  padding: 32px 28px 28px;
  cursor: pointer;
  overflow: hidden;
  transition: all .55s var(--ease);
  min-height: 300px;
  display: flex; flex-direction: column;
}
.trial-card:hover { transform: translateY(-7px); border-color: var(--brass-600); box-shadow: 0 28px 62px rgba(0,0,0,.6); }
.trial-card::after {
  content: '';
  position: absolute; inset: auto -20% -50% -20%; height: 62%;
  background: radial-gradient(ellipse at 50% 100%, rgba(74,143,139,.22), transparent 66%);
  opacity: 0; transition: opacity .55s;
}
.trial-card:hover::after { opacity: 1; }
.trial-ico { color: var(--teal); margin-bottom: 20px; }
.trial-card h3 { font-size: 1.34rem; color: var(--paper-100); margin-bottom: 10px; }
.trial-card p { font-size: .9rem; color: var(--fog-38); line-height: 1.8; flex: 1; }
.trial-meta {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fog-08);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-type); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass);
}
.trial-score { color: var(--teal); }
.trial-num {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--f-display); font-size: 2.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(232,220,192,.16);
}

/* ---------- 关卡舞台 ---------- */
.arena {
  border: 1px solid var(--fog-18);
  background: linear-gradient(160deg, var(--ink-800), var(--ink-900));
  padding: clamp(24px, 4vw, 46px);
  min-height: 480px;
  animation: stageIn .6s var(--ease);
}
@keyframes stageIn { from { opacity: 0; transform: translateY(20px); } }

.arena-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 28px;
  border-bottom: 1px solid var(--fog-08);
}

/* 倒计时 */
.timer {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-display);
  font-size: 2.1rem;
  color: var(--brass);
  letter-spacing: .04em;
}
.timer.warn { color: var(--blood-glow); animation: tick .5s steps(2) infinite; }
@keyframes tick { 50% { opacity: .45; } }
.timer-ring { width: 46px; height: 46px; transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke-width: 3; }
.timer-ring .bg { stroke: rgba(232,220,192,.1); }
.timer-ring .fg { stroke: var(--brass); stroke-linecap: round; transition: stroke-dashoffset .95s linear; }
.timer.warn .timer-ring .fg { stroke: var(--blood-glow); }

/* ---------- 记忆场景 ---------- */
.memo-scene {
  position: relative;
  border: 1px solid var(--fog-18);
  background: radial-gradient(ellipse 70% 80% at 50% 45%, #1a1e27, #090b0f 78%);
  overflow: hidden;
}
.memo-scene svg { width: 100%; height: auto; display: block; }
.memo-scene.locked::after {
  content: '记忆封存';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(6,8,11,.97);
  font-family: var(--f-type);
  font-size: .8rem; letter-spacing: .4em;
  color: var(--fog-38);
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------- 找茬场景 ---------- */
.spot-scene {
  position: relative;
  border: 1px solid var(--fog-18);
  background: radial-gradient(ellipse 72% 82% at 48% 42%, #1c212b, #0a0c11 78%);
  overflow: hidden;
  cursor: crosshair;
}
.spot-scene svg { width: 100%; height: auto; display: block; }
.spot-target { cursor: pointer; }
.spot-target.hit { pointer-events: none; }
.spot-mark {
  position: absolute;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  pointer-events: none;
  animation: markIn .45s var(--ease);
  box-shadow: 0 0 24px rgba(74,143,139,.55);
}
.spot-mark::after {
  content: '✓';
  position: absolute; top: -8px; right: -8px;
  width: 20px; height: 20px;
  background: var(--teal); color: var(--ink-900);
  border-radius: 50%; display: grid; place-items: center;
  font-size: .7rem; font-weight: 700;
}
.spot-mark.miss { border-color: var(--blood-glow); box-shadow: 0 0 24px rgba(199,58,44,.5); animation: markIn .35s var(--ease), fadeOut .5s .6s forwards; }
.spot-mark.miss::after { content: '✕'; background: var(--blood-glow); color: #fff; }
@keyframes markIn { from { transform: scale(2.2); opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }

.spot-tally {
  display: flex; gap: 10px; align-items: center;
}
.tally-dot {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--fog-38);
  transition: all .4s var(--ease);
}
.tally-dot.on { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 12px rgba(74,143,139,.6); }

/* ---------- 问答 ---------- */
.quiz-q {
  font-family: var(--f-serif);
  font-size: clamp(1.14rem, 2.3vw, 1.44rem);
  line-height: 1.8;
  color: var(--paper-100);
  margin-bottom: 24px;
}
.quiz-obs {
  border-left: 2px solid var(--brass-600);
  background: rgba(201,162,39,.05);
  padding: 20px 24px;
  margin-bottom: 26px;
  font-family: var(--f-serif);
  font-size: 1.08rem;
  line-height: 1.95;
  color: var(--fog-100);
}
.quiz-obs em { color: var(--brass-100); font-style: normal; }

.quiz-opts { display: grid; gap: 10px; }
.quiz-opt {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px;
  border: 1px solid var(--fog-08);
  background: rgba(255,255,255,.014);
  cursor: pointer;
  transition: all .3s var(--ease);
  font-size: .98rem;
  color: var(--fog-60);
  border-radius: 2px;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--brass-600); color: var(--paper-100); background: rgba(201,162,39,.05); transform: translateX(5px); }
.quiz-opt .lt {
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid currentColor; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-type); font-size: .7rem;
  color: var(--brass);
}
.quiz-opt.right { border-color: var(--teal); background: rgba(74,143,139,.1); color: var(--paper-100); }
.quiz-opt.right .lt { background: var(--teal); color: var(--ink-900); border-color: var(--teal); }
.quiz-opt.wrong { border-color: var(--blood); background: rgba(199,58,44,.08); color: var(--fog-60); }
.quiz-opt.wrong .lt { background: var(--blood); color: #fff; border-color: var(--blood); }
.quiz-opt:disabled { cursor: default; }

.quiz-exp {
  margin-top: 22px;
  padding: 20px 24px;
  border: 1px dashed var(--fog-18);
  background: rgba(255,255,255,.02);
  font-size: .95rem;
  line-height: 1.9;
  color: var(--fog-60);
  animation: stageIn .5s var(--ease);
}
.quiz-exp strong { color: var(--brass-100); }
.quiz-exp .tt {
  display: block;
  font-family: var(--f-type); font-size: .64rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 10px;
}

.quiz-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; margin-top: 30px; flex-wrap: wrap;
}
.quiz-dots { display: flex; gap: 8px; }
.qd {
  width: 26px; height: 3px;
  background: var(--fog-08);
  transition: background .4s;
}
.qd.on { background: var(--brass); }
.qd.hit { background: var(--teal); }
.qd.bad { background: var(--blood); }

/* ---------- 结算 ---------- */
.result-hero {
  text-align: center;
  padding: clamp(36px, 6vw, 62px) 24px;
  border: 1px solid var(--brass-600);
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(201,162,39,.12), transparent 66%);
}
.result-num {
  font-family: var(--f-display);
  font-size: clamp(3.4rem, 11vw, 6.4rem);
  line-height: 1;
  background: linear-gradient(180deg, #fdf6e2, #b08e34);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 段位 ---------- */
.rank-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--fog-08);
  overflow: hidden;
}
@media (max-width: 720px) { .rank-strip { grid-template-columns: repeat(2, 1fr); } }
.rank-cell {
  padding: 18px 14px;
  text-align: center;
  border-right: 1px solid var(--fog-08);
  transition: all .5s var(--ease);
}
.rank-cell:last-child { border-right: none; }
.rank-cell b {
  display: block;
  font-family: var(--f-display);
  font-size: .96rem;
  color: var(--fog-38);
  margin-bottom: 4px;
}
.rank-cell span {
  font-family: var(--f-type); font-size: .6rem;
  letter-spacing: .14em; color: var(--fog-18);
}
.rank-cell.on {
  background: rgba(201,162,39,.1);
  box-shadow: inset 0 -2px 0 var(--brass);
}
.rank-cell.on b { color: var(--brass-100); }
.rank-cell.on span { color: var(--brass); }