/* ============================================================
   zhenghe.css — 站 3「郑和 vs 哥伦布」站内样式
   背景：base.css 定暗金展览令牌；本文件做沙盘与对比卡布局。
   设计意图：沙盘航线点亮 + 金色宝船光点行进；
             对比卡用同比例剪影让 6.6 倍长度差一眼可见。
   ============================================================ */

.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: 640px; color: var(--ink-soft); }

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

/* ---------- 沙盘 ---------- */
.map-card {
  margin: 0;
  background: var(--paper-2);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: calc(var(--sp) * 1.5);
  display: flex;
  flex-direction: column;
}
#zhMap { display: block; width: 100%; height: auto; flex: 1; }

#zhMap .land { fill: var(--paper-3); stroke: var(--gold-soft); stroke-width: 1.4; }
#zhMap .continent { font-family: var(--font-serif); font-size: 14px; letter-spacing: .25em; fill: var(--gold-soft); opacity: .75; }
#zhMap .ocean { font-family: var(--font-serif); font-size: 22px; letter-spacing: .4em; fill: var(--gold); opacity: .14; }

#zhMap .port circle { fill: var(--gold-soft); stroke: var(--paper-2); stroke-width: 2; }
#zhMap .port.far circle { fill: var(--zhu); }
#zhMap .port text {
  font-size: 12.5px;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper-2);
  stroke-width: 3px;
}
#zhMap .port.far text { fill: var(--zhu-deep); }

#zhMap .route {
  fill: none;
  stroke: var(--gold-soft);
  stroke-opacity: .25;
  stroke-width: 2.4;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
}
#zhMap .route.lit { stroke: var(--gold); stroke-opacity: .9; stroke-dasharray: none; }
#zhMap .route-far { transition: stroke-opacity .4s ease, stroke .4s ease; }

#zhMap #zhBoat circle { fill: var(--gold); }
#zhMap #zhBoat .boat-halo { fill: none; stroke: var(--gold); stroke-opacity: .5; animation: boat-pulse 1.4s ease-out infinite; }
@keyframes boat-pulse {
  0%   { r: 8; opacity: .8; }
  100% { r: 22; opacity: 0; }
}

.map-cap {
  display: flex;
  align-items: center;
  gap: calc(var(--sp) * 2);
  padding: calc(var(--sp) * 1.5) calc(var(--sp) * 1);
}
.map-note { font-size: var(--fs-sm); color: var(--ink-soft); }

/* ---------- 对比卡 ---------- */
.vs-card {
  background: var(--paper-2);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: calc(var(--sp) * 2.5);
}
.vs-card h2 { font-size: var(--fs-lg); margin-bottom: calc(var(--sp) * 1.5); }
#vsSvg { display: block; width: 100%; height: auto; }
#vsSvg line { stroke: var(--line); stroke-width: 1.5; }
#vsSvg .hull { fill: var(--paper-3); stroke: var(--gold); stroke-width: 1.6; }
#vsSvg .deck { fill: none; stroke: var(--gold); stroke-width: 1.4; }
#vsSvg .mast { stroke: var(--gold); stroke-width: 2; }
#vsSvg .sail { fill: none; stroke: var(--gold-soft); stroke-width: 1.4; }
#vsSvg .dim { font-family: var(--font-mono); font-size: 14px; font-weight: 700; fill: var(--gold); }

.vs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--sp) * 1.5);
  margin-top: calc(var(--sp) * 2);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: .2em;
  padding: calc(var(--sp) * 1.2);
  background: var(--paper-3);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  text-align: center;
}
.stat .num { font-size: var(--fs-lg); }
.stat span:last-child { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- 两种结局 ---------- */
.duo-card {
  margin-top: calc(var(--sp) * 3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--sp) * 2.5);
}
.duo-col {
  background: var(--gold-mist);
  border: 1px solid var(--line);
  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); }

@media (max-width: 860px) {
  .zh-grid { grid-template-columns: 1fr; }
  .duo-card { grid-template-columns: 1fr; }
  .vs-stats { grid-template-columns: repeat(2, 1fr); }
  #zhMap .port text { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #zhMap #zhBoat .boat-halo { animation: none; }
}