:root {
  --paper: #f3ead8;
  --paper-2: #e9dcc3;
  --paper-3: #fbf5e8;
  --ink: #23313a;
  --ink-2: #5a6b72;
  --teal: #2f6f6a;
  --teal-2: #5fa39b;
  --teal-3: #8fc0b8;
  --gold: #c9a35c;
  --gold-2: #e0c483;
  --terra: #8a4b3a;
  --line: #d3c3a2;
  --shadow: 0 24px 60px rgba(35, 49, 58, 0.18);
  --display: "STXingkai", "华文行楷", "KaiTi", "STKaiti", "FZKai-Z03", serif;
  --serif: "Songti SC", "宋体", "SimSun", serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}

* { box-sizing: border-box; }
.water { display: none; }
.river-paint { position: absolute; top: 0; pointer-events: none; z-index: 1; }
.stations { z-index: 3; pointer-events: none; }
.station { pointer-events: auto; }
.minor-city { position: absolute; bottom: 41%; z-index: 4; width: 156px; transform: translateX(-50%); display: flex; align-items: center; flex-direction: column; border: 0; padding: 0 0 9px; background: transparent; cursor: pointer; color: #354b3f; }
.minor-building { width: 128px; height: 154px; display: block; filter: drop-shadow(5px 10px 5px #4b5b3b30); transition: transform .3s; }
.minor-building svg { width: 100%; height: 100%; }
.minor-city:hover .minor-building,.minor-city:focus-visible .minor-building { transform: translateY(-7px); }
.minor-city b { font-family: var(--display); font-size: 23px; letter-spacing: 4px; }
.minor-city > span:not(.minor-building) { font-size: 12px; background: #fbf5e8dc; padding: 4px 12px; border: 1px solid #b8a880; }
.minor-city small { font-size: 10px; margin-top: 5px; color: #746549; }
.city-story { max-width: 650px; background: #fbf5e8; border: 1px solid #baa476; }
.city-story h2 { font-family: var(--display); font-size: 34px; margin: 8px 0 22px; color: #344e40; }
.story-eyebrow { font-size: 12px; color: #927542; letter-spacing: 3px; }
.story-content { display: grid; gap: 12px; }
.story-content section { padding: 12px 18px; border-left: 3px solid #9ba87b; background: #eee9d9; }
.story-content h3 { margin: 0 0 5px; font-size: 15px; color: #6b502b; }
.story-content p { margin: 0; font-size: 15px; line-height: 1.9; }
.story-note { font-size: 11px; line-height: 1.7; color: #7d786b; margin-top: 20px; }
.intro::before { background: linear-gradient(180deg, #b6bd9e, #798c65) !important; opacity: .3 !important; }
.boat::after { content: ''; position: absolute; width: 150px; height: 15px; left: 15px; bottom: 2px; border-bottom: 1px solid #e1e7cba6; border-radius: 50%; animation: boat-wake 4s ease-out infinite; }
@keyframes boat-wake { from { transform: scale(.8); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }
html, body { margin: 0; height: 100%; }
body {
  overflow: hidden;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- 顶部 HUD ---------- */
.hud-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 30px;
  background: linear-gradient(180deg, rgba(243, 234, 216, 0.97) 0%, rgba(243, 234, 216, 0.82) 62%, rgba(243, 234, 216, 0) 100%);
}
.brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.brand-cn { font-family: var(--display); font-size: 24px; letter-spacing: 2px; color: var(--ink); }
.brand i { font-style: normal; font-size: 10px; letter-spacing: 3px; color: var(--teal); }
.route { flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.route-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 4px; cursor: pointer; background: none; border: none; color: var(--ink-2);
}
.route-item i {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--ink-2);
  transition: all 0.25s ease;
}
.route-item span { font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
.route-item:hover span { color: var(--teal); }
.route-item.done i { background: var(--terra); border-color: var(--terra); box-shadow: 0 0 0 3px rgba(138, 75, 58, 0.14); }
.route-item.done span { color: var(--terra); }
.route-item.reached i { background: #c9a35c; border-color: #a27b3d; box-shadow: 0 0 0 3px rgba(201,163,92,.18); }
.route-item.reached span { color: #8a6840; font-weight: 600; }
.route-item.active i { background: var(--teal); border-color: var(--teal); transform: scale(1.25); }
.route-item.active span { color: var(--teal); font-weight: 700; }
.route-line { width: 26px; height: 1px; background: var(--line); flex: none; }
.hud-actions { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.stamp-count { font-family: var(--serif); font-size: 15px; color: var(--terra); letter-spacing: 1px; }
.hud-btn {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(251, 245, 232, 0.7); color: var(--ink); font-size: 13px; cursor: pointer;
  transition: all 0.2s ease;
}
.hud-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--paper-3); }

/* ---------- 长卷视口 ---------- */
.viewport { position: fixed; inset: 0; overflow: hidden; cursor: grab; user-select: none; }
.viewport.dragging { cursor: grabbing; }
.track { position: absolute; left: 0; top: 0; width: 8000px; height: 100%; will-change: transform; }
.sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 420px at 18% 22%, rgba(255, 248, 226, 0.9), transparent 70%),
    linear-gradient(180deg, #dce9e1 0%, #e9eddd 42%, #f3ead8 72%);
}
.hills { position: absolute; left: 0; width: 8000px; pointer-events: none; }
.hills-far { bottom: 24%; height: 48%; opacity: 0.9; }
.hills-near { bottom: 22%; height: 36%; opacity: 0.95; }
.water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
  background: linear-gradient(180deg, #8fc4bb 0%, #5fa39b 34%, #2f6f6a 100%);
  overflow: hidden;
}
.water::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 236, 0.85), transparent);
}
.water::after {
  content: ""; position: absolute; inset: 0; opacity: 0.22;
  background: repeating-linear-gradient(180deg, transparent 0 26px, rgba(255, 250, 236, 0.5) 27px 28px, transparent 29px 56px);
  animation: waterDrift 14s linear infinite;
}
@keyframes waterDrift { from { transform: translateX(0); } to { transform: translateX(-120px); } }
.water-line {
  position: absolute; left: 0; right: 0; bottom: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 236, 0.4), transparent);
}

/* ---------- 站点 / 地标 ---------- */
.stations { position: absolute; inset: 0; }
.station {
  position: absolute; bottom: 38%; transform: translateX(-50%);
  width: 230px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: opacity 0.4s ease;
}
.landmark {
  width: 186px; height: 236px;
  transform: perspective(900px) rotateY(-9deg) rotateX(2deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 20px 22px rgba(35, 49, 58, 0.2));
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.55s ease;
}
.landmark svg { display: block; width: 100%; height: 100%; }
.station.near .landmark {
  transform: perspective(900px) rotateY(-9deg) rotateX(2deg) translateY(-14px) scale(1.05);
  filter: drop-shadow(0 28px 30px rgba(35, 49, 58, 0.24));
}
.station-plate {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 18px; border-radius: 3px;
  background: rgba(251, 245, 232, 0.94);
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(35, 49, 58, 0.12);
}
.station-plate b { font-family: var(--display); font-size: 20px; letter-spacing: 2px; color: var(--ink); font-weight: 700; }
.station-plate span { font-size: 11px; letter-spacing: 1px; color: var(--ink-2); }
.station-btn {
  padding: 7px 18px; border-radius: 999px; border: 1px solid var(--teal);
  background: var(--paper-3); color: var(--teal); font-size: 12px; letter-spacing: 2px;
  cursor: pointer; transition: all 0.2s ease; opacity: 0.72;
}
.station.near .station-btn { opacity: 1; background: var(--teal); color: var(--paper-3); }
.station-btn:hover { background: var(--teal); color: var(--paper-3); opacity: 1; }
.station.done .station-btn { border-color: var(--gold); color: var(--terra); background: var(--gold-2); }
.station-seal {
  position: absolute; top: 6px; right: 18px;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--terra); color: var(--terra);
  font-family: var(--display); font-size: 17px;
  background: rgba(251, 245, 232, 0.85);
  transform: rotate(-12deg); opacity: 0; transition: opacity 0.4s ease;
}
.station.done .station-seal { opacity: 1; }

/* ---------- 小船 ---------- */
.boat {
  position: absolute; bottom: 20%; width: 172px;
  transform: translateX(-50%); z-index: 2000 !important; pointer-events: none;
}
.boat-inner { animation: bob 3.4s ease-in-out infinite; transform-origin: 50% 80%; }
.boat-inner model-viewer {
  display: block !important;
  width: 430px;
  height: 315px;
  background: transparent;
  --poster-color: transparent;
  pointer-events: none;
  visibility: visible !important;
  transform: translate(-70px, -30px);
  filter: drop-shadow(0 14px 9px rgba(30, 48, 44, 0.34));
}
.boat-inner.boat-model-error::after {
  content: '三维船只载入失败';
  display: block;
  width: 290px;
  padding-top: 92px;
  color: #f0e0b8;
  font-family: serif;
  font-size: 18px;
  text-align: center;
}
.boat-inner.boat-model-error model-viewer { display: none !important; }
.boat-model-error:after { content:'船'; display:block; color:#f0e0b8; font-family:serif; font-size:42px; text-align:center; padding-top:65px; }
.boat svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 12px rgba(20, 40, 45, 0.28)); }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-5px) rotate(0.6deg); }
}

/* ---------- 底部 HUD ---------- */
.hud-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 32px;
  background: linear-gradient(0deg, rgba(243, 234, 216, 0.97) 0%, rgba(243, 234, 216, 0.8) 60%, rgba(243, 234, 216, 0) 100%);
}
.loc { font-family: var(--display); font-size: 21px; letter-spacing: 2px; min-width: 220px; }
.hint { font-size: 12px; letter-spacing: 1px; color: var(--ink-2); }
.next-btn {
  padding: 11px 24px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--teal); color: var(--paper-3); font-size: 14px; letter-spacing: 2px;
  box-shadow: 0 8px 22px rgba(47, 111, 106, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.next-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(47, 111, 106, 0.34); }

/* ---------- 开场 ---------- */
.intro {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s ease;
  background:
    radial-gradient(1200px 600px at 50% 36%, rgba(255, 250, 236, 0.55), transparent 70%),
    linear-gradient(180deg, #dce9e1 0%, #e9eddd 50%, #f3ead8 100%);
}
.intro::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(180deg, #8fc4bb, #2f6f6a);
  opacity: 0.55;
}
.intro-paper {
  position: relative; z-index: 2; width: min(680px, 86vw); text-align: center;
  padding: 54px 56px 46px;
  background: rgba(251, 245, 232, 0.92);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.intro-paper::before, .intro-paper::after {
  content: ""; position: absolute; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.intro-paper::before { top: 14px; }
.intro-paper::after { bottom: 14px; }
.intro-kicker { margin: 0 0 18px; font-size: 12px; letter-spacing: 5px; color: var(--teal); }
.intro h1 {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(58px, 7vw, 86px); line-height: 1.05; letter-spacing: 6px; color: var(--ink);
}
.intro h1 span { color: var(--terra); }
.intro-sub { margin: 22px 0 26px; font-family: var(--serif); font-size: 16px; line-height: 2; color: var(--ink-2); }
.intro-start {
  padding: 14px 48px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--paper-3); font-size: 16px; letter-spacing: 4px;
  box-shadow: 0 12px 30px rgba(35, 49, 58, 0.28);
  transition: transform 0.2s ease, background 0.2s ease;
}
.intro-start:hover { transform: translateY(-2px); background: var(--teal); }
.intro-hint { margin: 22px 0 0; font-size: 12px; letter-spacing: 2px; color: var(--ink-2); }

/* ---------- 弹窗通用 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(24, 36, 40, 0.55);
  backdrop-filter: blur(5px);
}
.modal[hidden] { display: none; }
.game-box {
  position: relative; width: min(880px, 94vw); max-height: 90vh; overflow: auto;
  padding: 34px 38px 30px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 40px 100px rgba(20, 36, 40, 0.45);
}
.game-box::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 10px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.modal-close {
  position: absolute; top: 12px; right: 14px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--ink-2); font-size: 22px; line-height: 1; cursor: pointer;
}
.modal-close:hover { border-color: var(--terra); color: var(--terra); }
.game-kicker { margin: 0 0 6px; font-size: 12px; letter-spacing: 3px; color: var(--teal); }
.game-head h2 { margin: 0 0 8px; font-family: var(--display); font-size: 32px; letter-spacing: 3px; }
.game-desc { margin: 0 0 20px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.game-foot { min-height: 24px; font-size: 13px; color: var(--terra); letter-spacing: 1px; }
.game-result {
  margin-top: 10px; padding: 26px; text-align: center;
  background: var(--paper); border: 1px solid var(--line);
}
.game-result[hidden] { display: none; }
.result-seal {
  width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--terra); color: var(--terra);
  font-family: var(--display); font-size: 30px; transform: rotate(-10deg);
}
.game-result h3 { margin: 0 0 12px; font-family: var(--display); font-size: 26px; letter-spacing: 2px; }
.game-result p { margin: 0 auto 18px; max-width: 560px; font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.game-result button {
  padding: 11px 30px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--teal); color: var(--paper-3); font-size: 14px; letter-spacing: 2px;
}

/* ---------- 游戏：装船计量 ---------- */
.gm-load { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center; }
.gm-boat {
  position: relative; padding: 26px 0 10px; text-align: center;
  border-bottom: 3px solid var(--teal-2);
}
.gm-boat::before {
  content: "漕船 · 载重 320 石"; position: absolute; top: 0; left: 0;
  font-size: 12px; letter-spacing: 2px; color: var(--ink-2);
}
.gm-cap { height: 18px; border-radius: 9px; background: var(--paper-2); overflow: hidden; margin: 18px 0 10px; }
.gm-cap i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal-2), var(--teal)); transition: width 0.25s ease; }
.gm-cap.over i { background: linear-gradient(90deg, #c96b52, var(--terra)); }
#cap-text { font-family: var(--serif); font-size: 20px; color: var(--ink); }
.gm-sacks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sack {
  padding: 16px 8px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--paper); color: var(--ink-2); cursor: pointer; font-size: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: all 0.18s ease;
}
.sack b { font-family: var(--serif); font-size: 22px; color: var(--ink); font-weight: 700; }
.sack small { font-size: 11px; letter-spacing: 1px; }
.sack:hover { border-color: var(--teal); }
.sack.on { background: var(--gold-2); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.gm-ship {
  grid-column: 1 / -1; justify-self: center; margin-top: 6px;
  padding: 11px 30px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--paper-3); font-size: 14px; letter-spacing: 2px;
}

/* ---------- 游戏：过桥调帆 ---------- */
.gm-bridge { display: flex; flex-direction: column; gap: 18px; }
.bridge-scene {
  position: relative; height: 300px; overflow: hidden;
  background: linear-gradient(180deg, #eaf0e4 0%, #dce9e1 52%, #5fa39b 52%, #2f6f6a 100%);
  border: 1px solid var(--line);
}
.bridge-arch {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  width: 360px; height: 150px; border-radius: 180px 180px 0 0;
  background: #b9c6c2; border: 2px solid #8a9a94;
}
.bridge-arch::after {
  content: ""; position: absolute; left: 46px; right: 46px; top: 54px; bottom: 0;
  border-radius: 150px 150px 0 0; background: linear-gradient(180deg, #dce9e1, #cfe0d8);
  border: 2px solid #8a9a94;
}
.gm-boat2 {
  position: absolute; left: 6%; bottom: 10px; width: 130px;
  transition: left 1.6s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.gm-boat2 svg { display: block; width: 100%; height: auto; }
.gm-boat2 .mast { transition: height 0.18s ease; }
.sail-control { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-2); }
.sail-control input { flex: 1; accent-color: var(--teal); }
.sail-val { width: 52px; text-align: right; font-family: var(--serif); font-size: 18px; color: var(--ink); }
.gm-actions { display: flex; justify-content: center; }
.gm-actions button {
  padding: 11px 28px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--paper-3); font-size: 14px; letter-spacing: 2px;
}

/* ---------- 游戏：船闸过闸 ---------- */
.gm-lock { display: flex; flex-direction: column; gap: 16px; }
.lock-scene {
  position: relative; height: 250px; overflow: hidden;
  background: linear-gradient(180deg, #e9eddd 0%, #dce9e1 40%, #cfe0d8 100%);
  border: 1px solid var(--line);
}
.lock-wall { position: absolute; top: 0; bottom: 0; width: 46px; background: #a9b8b2; border: 2px solid #8a9a94; }
.lock-wall.left { left: 0; }
.lock-wall.right { right: 0; }
.lock-wall { z-index: 3; }
.lock-gate {
  position: absolute; width: 14px; top: 40px; bottom: 0;
  background: #7a5a3a; border: 2px solid #4a3018;
  transition: transform 0.5s ease;
  z-index: 4;
}
.gate-lower { left: 46px; }
.gate-upper { right: 46px; }
.gate-lower.open { transform: translateY(46px) rotate(18deg); transform-origin: top center; }
.gate-upper.open { transform: translateY(-46px) rotate(-18deg); transform-origin: bottom center; }
.lock-water {
  position: absolute; left: 46px; right: 46px; bottom: 0; height: 34%;
  background: linear-gradient(180deg, #7fb7b0, #2f6f6a);
  transition: height 1.2s ease;
  z-index: 1;
}
.lock-boat {
  position: absolute; left: 46px; bottom: 8%; width: 90px;
  transition: left 1.2s ease, bottom 1.2s ease;
  z-index: 5;
}
.lock-boat svg { display: block; width: 100%; height: auto; }
.lock-read { position: absolute; right: 14px; top: 12px; font-size: 12px; color: var(--ink-2); }
.lock-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lock-btns button {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink-2); font-size: 13px; cursor: pointer;
}
.lock-btns button:hover { border-color: var(--teal); color: var(--teal); }
.lock-btns button:disabled { opacity: 0.4; cursor: default; }
.lock-hint { text-align: center; font-size: 13px; color: var(--terra); min-height: 20px; }

/* ---------- 游戏：南旺分水 ---------- */
.gm-divide { display: flex; flex-direction: column; gap: 16px; }
.divide-scene {
  display: flex; align-items: flex-end; justify-content: center; gap: 60px;
  height: 230px; padding: 18px 40px 0;
  background: linear-gradient(180deg, #e9eddd, #dce9e1);
  border: 1px solid var(--line);
}
.div-river { position: relative; width: 120px; height: 190px; background: var(--paper-2); border: 2px solid #b9c6c2; }
.div-river i {
  position: absolute; left: 0; right: 0; bottom: 0; display: block;
  background: linear-gradient(180deg, #8fc0b8, #2f6f6a); transition: height 0.3s ease;
}
.div-river em {
  position: absolute; left: 0; right: 0; top: -26px; text-align: center;
  font-style: normal; font-size: 12px; letter-spacing: 2px; color: var(--ink-2);
}
.div-river.north::after, .div-river.south::after {
  position: absolute; left: 0; right: 0; bottom: -24px; text-align: center;
  font-family: var(--serif); font-size: 16px; color: var(--ink);
}
.div-river.north::after { content: "北流 · 朝天子"; }
.div-river.south::after { content: "南流 · 下江南"; }
.div-slider { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-2); }
.div-slider input { flex: 1; accent-color: var(--teal); }
.div-read { text-align: center; font-family: var(--serif); font-size: 18px; color: var(--ink); }

/* ---------- 游戏：罗盘辨向 ---------- */
.gm-compass { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.compass-wrap { position: relative; width: 260px; height: 260px; }
.compass-dial {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--ink); background: radial-gradient(circle at 50% 42%, #fbf5e8, #e9dcc3);
  cursor: grab; touch-action: none; user-select: none;
}
.compass-dial:active { cursor: grabbing; }
.compass-dial .tick { position: absolute; left: 50%; top: 10px; width: 2px; height: 12px; background: var(--ink-2); transform-origin: 50% 120px; }
.compass-dial .dir { position: absolute; font-family: var(--serif); font-size: 16px; color: var(--ink); }
.compass-dial .dir.n { left: 50%; top: 30px; transform: translateX(-50%); color: var(--terra); font-weight: 700; }
.compass-dial .dir.s { left: 50%; bottom: 30px; transform: translateX(-50%); }
.compass-dial .dir.e { right: 34px; top: 50%; transform: translateY(-50%); }
.compass-dial .dir.w { left: 34px; top: 50%; transform: translateY(-50%); }
.compass-dial .needle {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 90px;
  background: linear-gradient(180deg, var(--terra) 0 50%, var(--ink-2) 50% 100%);
  transform-origin: 50% 100%; transform: translate(-50%, -100%);
}
.compass-needle {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 96px;
  background: linear-gradient(180deg, var(--terra) 0 50%, var(--ink-2) 50% 100%);
  transform-origin: 50% 100%; transform: translate(-50%, -100%);
  pointer-events: none; z-index: 2;
}
.compass-angle { font-family: var(--serif); font-size: 16px; color: var(--ink-2); }
.compass-question { text-align: center; }
.compass-question p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.compass-question button {
  margin: 0 4px; padding: 9px 22px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink-2); cursor: pointer; font-size: 14px;
}
.compass-question button:hover { border-color: var(--teal); color: var(--teal); }

/* ---------- 游戏：入仓排序 ---------- */
.gm-granary { display: flex; flex-direction: column; gap: 16px; }
.granary-slots {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  min-height: 96px; padding: 14px; background: var(--paper-2); border: 1px dashed var(--line);
}
.granary-slot {
  display: flex; align-items: center; justify-content: center;
  border-bottom: 3px solid var(--gold); color: var(--ink-2); font-size: 12px;
}
.granary-slot.filled { background: var(--gold-2); color: var(--ink); font-family: var(--serif); font-size: 16px; }
.granary-pool { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.granary-sack {
  width: 82px; padding: 14px 6px; text-align: center; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--serif); font-size: 17px; color: var(--ink);
  transition: all 0.18s ease;
}
.granary-sack:hover { border-color: var(--teal); transform: translateY(-2px); }
.granary-sack.used { visibility: hidden; }
.granary-hint { text-align: center; font-size: 13px; color: var(--terra); min-height: 20px; }
.shake { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ---------- 收藏册 ---------- */
.collection-box h2 { margin: 0 0 6px; font-family: var(--display); font-size: 32px; letter-spacing: 3px; }
.collection-sub { margin: 0 0 20px; color: var(--ink-2); font-size: 13px; letter-spacing: 1px; }
.collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.col-card {
  padding: 16px; border: 1px solid var(--line); background: var(--paper);
  min-height: 132px;
}
.col-card.locked { opacity: 0.5; }
.col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.col-seal {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--terra); color: var(--terra); font-family: var(--display); font-size: 15px;
  transform: rotate(-10deg); flex: none;
}
.col-card.locked .col-seal { border-color: var(--line); color: var(--line); }
.col-head b { font-family: var(--display); font-size: 19px; letter-spacing: 1px; }
.col-head span { font-size: 11px; color: var(--ink-2); }
.col-card p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--ink-2); }
.collection-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.collection-foot span { font-size: 13px; color: var(--ink-2); }
.collection-foot button {
  padding: 10px 24px; border: 1px solid var(--teal); border-radius: 999px;
  background: transparent; color: var(--teal); font-size: 13px; letter-spacing: 1px; cursor: pointer;
}
.collection-foot button:hover { background: var(--teal); color: var(--paper-3); }

/* ---------- 证书 ---------- */
.cert-box { max-width: 720px; }
.cert-form { text-align: center; padding: 20px 0 10px; }
.cert-form h2 { font-family: var(--display); font-size: 32px; letter-spacing: 3px; margin: 0 0 10px; }
.cert-form p { font-size: 13px; color: var(--ink-2); margin: 0 0 18px; }
.cert-form input {
  width: 240px; padding: 11px 14px; border: 1px solid var(--line); background: var(--paper);
  font-size: 15px; color: var(--ink); text-align: center; margin-right: 10px;
}
.cert-form button {
  padding: 11px 24px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--paper-3); font-size: 14px;
}
.cert-paper {
  position: relative; padding: 46px 50px 38px; text-align: center;
  border: 1px solid var(--gold); background: var(--paper);
  box-shadow: inset 0 0 0 6px var(--paper-3), inset 0 0 0 7px var(--gold);
}
.cert-eyebrow { margin: 0 0 12px; font-size: 11px; letter-spacing: 4px; color: var(--teal); }
.cert-paper h2 { margin: 0 0 16px; font-family: var(--display); font-size: 44px; letter-spacing: 8px; color: var(--ink); }
.cert-name { margin: 0 0 12px; font-family: var(--display); font-size: 28px; color: var(--terra); border-bottom: 1px solid var(--line); display: inline-block; padding: 0 26px 4px; }
.cert-text { margin: 0 auto 20px; max-width: 460px; font-size: 14px; line-height: 2; color: var(--ink-2); }
.cert-seals { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.cert-seals .col-seal { width: 44px; height: 44px; font-size: 14px; }
.cert-date { margin: 0; font-size: 12px; letter-spacing: 2px; color: var(--ink-2); }

/* ================= 进阶玩法样式 ================= */

/* 杭州：配载与配平 */
.gm-balance { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.bal-boat {
  position: relative; width: min(580px, 92%); height: 150px;
  display: flex; gap: 14px; padding: 22px 26px;
  background: linear-gradient(180deg, #e9eddd, #dce9e1);
  border: 1px solid var(--line);
  transition: transform 0.35s ease;
}
.bal-hold {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px dashed #b9c6c2; background: rgba(251, 245, 232, 0.55);
}
.bal-hold span { font-size: 12px; letter-spacing: 3px; color: var(--ink-2); }
.bal-hold b { font-family: var(--serif); font-size: 21px; color: var(--ink); }
.bal-sacks { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bal-sack {
  width: 94px; padding: 12px 6px; border: 1px solid var(--line);
  background: var(--paper); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 2px;
}
.bal-sack b { font-family: var(--serif); font-size: 20px; color: var(--ink); }
.bal-sack small { font-size: 10px; color: var(--ink-2); }
.bal-sack em {
  font-style: normal; font-size: 11px; color: var(--ink-2);
  padding: 2px 9px; border-radius: 999px; background: var(--paper-2);
}
.bal-sack.left { border-color: var(--teal); background: #e4f0ec; }
.bal-sack.left em { background: var(--teal); color: var(--paper-3); }
.bal-sack.right { border-color: var(--gold); background: #f6ecd4; }
.bal-sack.right em { background: var(--gold); color: var(--ink); }
.bal-read { font-size: 13px; letter-spacing: 1px; color: var(--ink-2); }

/* 苏州：三桥调帆 */
.gm-bridges { display: flex; flex-direction: column; gap: 14px; }
.bridge-limit {
  position: absolute; right: 14px; top: 12px;
  padding: 4px 10px; font-size: 12px; letter-spacing: 2px;
  color: var(--ink-2); background: rgba(251, 245, 232, 0.85); border: 1px solid var(--line);
}
.bridge-progress { text-align: center; font-size: 13px; letter-spacing: 1px; color: var(--ink-2); }

/* 扬州：船闸限步 */
.gm-lock2 { display: flex; flex-direction: column; gap: 14px; }
.lock-gauge {
  position: absolute; right: 62px; top: 20px; bottom: 20px; width: 14px;
  background: rgba(251, 245, 232, 0.7); border: 1px solid #b9c6c2; z-index: 6;
}
.lock-gauge i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 10%;
  background: linear-gradient(180deg, #8fc0b8, #2f6f6a);
  transition: height 0.2s linear;
}
.lock-gauge span {
  position: absolute; left: 20px; bottom: -2px; font-size: 11px; color: var(--ink-2);
}
.lock-moves { text-align: center; font-size: 12px; letter-spacing: 1px; color: var(--ink-2); }

/* 济宁：动态分水 */
.gm-flow { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.flow-bars {
  display: flex; gap: 64px; align-items: flex-end; height: 240px;
  padding: 24px 34px 0; background: linear-gradient(180deg, #e9eddd, #dce9e1);
  border: 1px solid var(--line);
}
.flow-bar { position: relative; width: 84px; height: 190px; background: var(--paper-2); border: 1px solid #b9c6c2; }
.flow-bar span {
  position: absolute; left: 0; right: 0; top: -24px; text-align: center;
  font-size: 12px; letter-spacing: 2px; color: var(--ink-2);
}
.flow-bar i {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #8fc0b8, #2f6f6a);
  transition: height 0.12s linear;
}
.flow-bar.target em {
  position: absolute; left: 0; right: 0; bottom: 42%; height: 16%;
  background: rgba(111, 154, 85, 0.32);
  border-top: 1px dashed #6f9a55; border-bottom: 1px dashed #6f9a55;
}
.flow-slider {
  display: flex; align-items: center; gap: 14px; width: min(480px, 90%);
  font-size: 13px; color: var(--ink-2);
}
.flow-slider input { flex: 1; accent-color: var(--teal); }
.flow-read { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.flow-time { font-size: 13px; letter-spacing: 1px; color: var(--terra); }

/* 天津：三局定位 */
.gm-compass2 { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.compass-clue {
  max-width: 580px; padding: 12px 18px;
  font-size: 14px; line-height: 1.9; color: var(--ink-2);
  background: var(--paper); border-left: 3px solid var(--gold);
}
.compass-progress { font-size: 12px; letter-spacing: 1px; color: var(--ink-2); }

/* 北京：三仓分配 */
.gm-bins { display: flex; flex-direction: column; gap: 16px; }
.bin-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bin {
  padding: 14px; border: 1px solid var(--line); background: var(--paper);
  cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.bin:hover { border-color: var(--teal); background: var(--paper-3); }
.bin > span { font-family: var(--display); font-size: 19px; letter-spacing: 2px; }
.bin-bar { height: 12px; margin: 10px 0 6px; background: var(--paper-2); overflow: hidden; }
.bin-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-2), var(--teal)); transition: width 0.25s ease; }
.bin > b { font-family: var(--serif); font-size: 14px; color: var(--ink-2); font-weight: 400; }
.bin-items { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; margin-top: 10px; }
.bin-chip {
  padding: 4px 10px; border: 1px solid var(--gold);
  background: var(--gold-2); color: var(--ink); font-size: 12px; cursor: pointer;
}
.bin-pool { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bin-sack {
  padding: 12px 18px; border: 1px solid var(--line); background: var(--paper);
  font-family: var(--serif); font-size: 16px; color: var(--ink); cursor: pointer;
}
.bin-sack.sel { border-color: var(--teal); background: #e4f0ec; box-shadow: 0 0 0 2px rgba(47, 111, 106, 0.15); }
.bin-read { text-align: center; font-size: 13px; color: var(--ink-2); }
.story-content,.story-content h3,.story-content p{font-family:'STKaiti','KaiTi','FangSong',serif}
.voyage-finish-box{max-width:720px;text-align:center;background:linear-gradient(145deg,#f8f0d9,#e5ead7)}.finish-eyebrow{color:#a27b3d;letter-spacing:3px;font-size:13px}.voyage-finish-box h2{font-family:var(--display);font-size:34px;color:#31574d;margin:8px 0 20px}.voyage-finish-box>p:not(.finish-eyebrow){font-family:'STKaiti','KaiTi','FangSong',serif;font-size:18px;line-height:2;text-align:left;color:#4e5e50}.finish-fade-text{margin:18px 0 22px;color:#9a8460;font-family:'STKaiti','KaiTi',serif;font-size:20px;animation:finish-fade 3s ease-in-out infinite}.voyage-finish-box #finish-collection{padding:13px 28px;border:0;border-radius:10px;background:#3f6d60;color:#fff1ca;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 5px 0 #294a42}@keyframes finish-fade{0%,100%{opacity:.48}50%{opacity:1}}
.fixed-farmers{position:fixed;left:0;right:0;bottom:0;width:100%;height:34vh;z-index:35;pointer-events:none;transform:scaleY(1.25);transform-origin:bottom center}
.collection-blessing{margin:18px auto 0;max-width:720px;padding:14px 18px;border-radius:12px;text-align:center;font-family:'STKaiti','KaiTi',serif;font-size:17px;line-height:1.8;color:#4d604f;background:#eef0d9;border:1px solid #b9b886}.blessing-start{box-shadow:0 0 0 rgba(220,196,105,0)}.blessing-ripple{background:#e6f0df;box-shadow:0 0 18px rgba(116,177,146,.35)}.blessing-glow{background:#f5ecd0;box-shadow:0 0 24px rgba(220,169,64,.42);animation:blessing-pulse 2.6s ease-in-out infinite}.blessing-complete{background:linear-gradient(135deg,#fff0bd,#e9f1d8);border-color:#d3a64d;box-shadow:0 0 32px rgba(245,196,80,.72),0 0 70px rgba(116,177,146,.3);animation:blessing-complete 2.2s ease-in-out infinite}@keyframes blessing-pulse{50%{transform:translateY(-2px);filter:brightness(1.04)}}@keyframes blessing-complete{50%{transform:translateY(-3px) scale(1.015);filter:brightness(1.08)}}
.collection-box{position:relative;overflow:hidden}.collection-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden}.collection-petals i{position:absolute;top:-18px;width:10px;height:16px;border-radius:70% 20% 70% 20%;background:linear-gradient(135deg,#e9a4a7,#d46e79);transform:rotate(28deg);animation:petal-fall linear forwards}.collection-spark{position:absolute;left:50%;top:38%;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,132,.7),rgba(255,226,132,0) 68%);animation:spark-bloom 1.8s ease-out forwards}@keyframes petal-fall{0%{transform:translateY(-20px) rotate(20deg);opacity:0}12%{opacity:1}100%{transform:translateY(620px) rotate(480deg);opacity:0}}@keyframes spark-bloom{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}35%{opacity:1}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}