/* ============================================================
   dusk.css — 站 7「帝国的黄昏」站内样式
   背景：base.css 定暗金展览令牌；本文件做滑杆面板与表盘布局。
   设计意图：四滑杆在左、稳定度表盘在右，拖动即时反馈；
             表盘指针旋转过渡；结局卡按区间换色（金/橙/朱砂）。
   ============================================================ */

.head-actions { display: flex; gap: var(--sp); align-items: center; }
.back-link { text-decoration: none; }

.lesson-head { padding: calc(var(--sp) * 5) 0 calc(var(--sp) * 3); }
.kicker { font-size: var(--fs-sm); letter-spacing: .14em; margin-bottom: var(--sp); }
.lesson-head h1 { font-size: var(--fs-xl); margin-bottom: calc(var(--sp) * 2); }
.intro { max-width: 660px; color: var(--ink-soft); }

.dusk-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: calc(var(--sp) * 3);
  align-items: stretch;
}

/* ---------- 滑杆面板 ---------- */
.dusk-panel {
  background: var(--paper-2);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: calc(var(--sp) * 3);
}
.dusk-panel h2 { font-size: var(--fs-lg); margin: 0 0 calc(var(--sp) * 2.2); }
.dusk-panel h2 + .dusk-panel h2 { margin-top: calc(var(--sp) * 2.5); }
.dusk-panel h2:nth-of-type(2) { margin-top: calc(var(--sp) * 3); }

.dslider { margin-bottom: calc(var(--sp) * 2.2); }
.ds-head {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: calc(var(--sp) * 0.9);
}
.ds-head .icon { color: var(--gold); }
.ds-head .ds-val { margin-left: auto; font-size: var(--fs-md); }

.dslider input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--zhu) var(--v, 10%), var(--paper-3) var(--v, 10%));
  outline: none;
}
.dslider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--paper-2);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
  cursor: pointer;
}
.dslider input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--paper-2);
  cursor: pointer;
}

.era-nav { display: flex; flex-wrap: wrap; gap: calc(var(--sp) * 1); }
.era-btn {
  font: inherit;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--gold);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .32em .9em;
  cursor: pointer;
}
.era-btn:hover { background: var(--gold-mist); }
.era-btn.active { background: var(--gold); border-color: var(--gold); color: #fff8ea; }

/* ---------- 表盘 ---------- */
.gauge-card {
  background: var(--paper-2);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: calc(var(--sp) * 3);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gauge-card h2 { font-size: var(--fs-lg); margin-bottom: var(--sp); align-self: flex-start; }
#dialSvg { display: block; width: 100%; max-width: 340px; height: auto; }

#dialSvg .arc { fill: none; stroke-width: 10; stroke-linecap: round; }
#dialSvg .arc-safe { stroke: var(--gold); opacity: .85; }
#dialSvg .arc-warn { stroke: #cf8a3e; opacity: .8; }
#dialSvg .arc-danger { stroke: var(--zhu); opacity: .85; }
#dialSvg .ticks line { stroke: var(--gold-soft); stroke-width: 1.5; }
#dialSvg .hand {
  stroke: var(--zhu);
  stroke-width: 4;
  stroke-linecap: round;
  transition: transform .5s cubic-bezier(.3, 1.2, .4, 1);
}
#dialSvg .hub { fill: var(--gold); }
#dialSvg #dialNum { font-size: 40px; fill: var(--zhu); }
#dialSvg.critical .hand { stroke: var(--zhu); }
#dialSvg.critical #dialNum { fill: var(--zhu); }

.dial-zone {
  margin: calc(var(--sp) * 1.2) 0 0;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--gold);
  text-align: center;
}
.dial-zone.critical { color: var(--zhu); }

/* ---------- 结局卡 ---------- */
.dusk-card {
  margin-top: calc(var(--sp) * 3);
  border-radius: var(--radius);
  padding: calc(var(--sp) * 3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  background: var(--gold-mist);
}
.dusk-card h3 { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--zhu); margin-bottom: calc(var(--sp) * 1.2); }
.dusk-card p { margin: 0; max-width: 720px; }
.dusk-card.warn { border-left-color: #cf8a3e; }
.dusk-card.critical { border-left-color: var(--zhu); background: var(--zhu-mist); }

/* ---------- 对照卡 ---------- */
.duo-card {
  margin-top: calc(var(--sp) * 2.5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--sp) * 2.5);
}
.duo-col {
  background: var(--paper-2);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: calc(var(--sp) * 2.5);
}
.duo-col:first-child { border-left: 4px solid var(--gold); }
.duo-col:last-child { border-left: 4px solid var(--zhu); }
.duo-col h3 { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--zhu); margin-bottom: calc(var(--sp) * 1.2); }
.duo-col p { margin: 0; font-size: var(--fs-sm); }

.ending { text-align: center; padding-bottom: calc(var(--sp) * 6); }
.ending-line {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.65;
  max-width: 720px;
  margin: 0 auto calc(var(--sp) * 3);
}

@media (max-width: 860px) {
  .dusk-grid { grid-template-columns: 1fr; }
  .duo-card { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #dialSvg .hand { transition: none; }
}