/* ============================================================
   《长征：万水千山》v1 · 视觉层
   基调：旧宣纸 + 墨 + 红军红；衬线字；木刻质感
   ============================================================ */
:root {
  --paper: #efe6d2;
  --paper-2: #e6dcc4;
  --ink: #26231f;
  --ink-2: #4c463c;
  --ink-3: #5c5346;
  --line: #b3a68a;
  --red: #8C3B2E;
  --red-2: #7a3326;
  --river: #4a6f7c;
  --grass: #4d7a52;
  --gold: #a5813a;
  --warn: #7c2f22;
  --shadow: 0 18px 48px rgba(30, 24, 14, .28);
  --topbar-h: 58px;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: #14120f;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
#app { display: flex; flex-direction: column; height: 100vh; }

/* V8 跳转链接：默认离屏，键盘聚焦时显现 */
.skip { position: absolute; left: -9999px; top: 8px; background: var(--red); color: #f6ecd8; padding: 8px 14px; border-radius: 2px; text-decoration: none; font-family: var(--serif); letter-spacing: 2px; z-index: 9998; }
.skip:focus { left: 8px; z-index: 9999; }

/* ---------- 顶栏 ---------- */
#topbar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 14px 18px; padding: 9px 20px; min-height: 58px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%),
    linear-gradient(#1d1b17, #13110e);
  border-bottom: 1px solid #3a352c;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 30; transition: opacity .2s, transform .2s;
}
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-width:0; }
.brand-copy { display:flex; align-items:baseline; gap:12px; min-width:0; }
.brand-seal {
  font-family: var(--serif); font-size: 13px; letter-spacing: 2px;
  color: #f3e9d6; background: var(--red); padding: 3px 7px; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.2);
}
.brand h1 {
  margin: 0; font-size: 20px; letter-spacing: 5px; font-weight: 600;
  color: #f0e6d2; text-shadow: 0 1px 0 #000;
}
.brand-sub { font-family: var(--sans); font-size: 11px; color: #9a9282; letter-spacing: 1px; }
.mode-switch {
  display:flex; align-items:center; gap:2px; flex:0 0 auto; padding:3px;
  border:1px solid rgba(151,137,111,.34); border-radius:999px;
  background:rgba(5,5,4,.24); box-shadow:inset 0 1px 4px rgba(0,0,0,.18);
}
.mode-tab {
  display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:5px 11px;
  border:0; border-radius:999px; background:transparent; color:#a99d87;
  font-family:var(--sans); font-size:11.5px; letter-spacing:1px; cursor:pointer; transition:.18s;
}
.mode-tab i { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.65; }
.mode-tab.active {
  color:#241812; background:linear-gradient(#f3e8d2, #d8c8aa);
  box-shadow:0 2px 8px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.38);
}
.mode-tab.active i { background:var(--red); opacity:1; }
button.mode-tab:hover { color:#f2e7d2; background:rgba(255,255,255,.07); }
.mode-sync {
  display:inline-flex; align-items:center; gap:5px; margin:0 4px 0 7px; padding-left:10px;
  border-left:1px solid rgba(154,140,112,.24);
  font-family:var(--sans); font-size:9.5px; letter-spacing:.8px; color:#7f9c86; white-space:nowrap;
}
.mode-sync i { width:5px; height:5px; border-radius:50%; background:#79a987; box-shadow:0 0 0 3px rgba(121,169,135,.1); }
#topnav { display: flex; align-items:center; gap: 1px; flex-wrap: wrap; margin-left:auto; justify-content:flex-end; }
.navlink {
  font-family: var(--serif); font-size: 13.5px; letter-spacing: 1px;
  background: none; border: 0; border-radius:2px;
  color: #cbbda3; padding: 6px 8px; cursor: pointer; transition: .18s; white-space:nowrap;
}
.navlink:hover { color: #fff; background:rgba(255,255,255,.055); }
.nav-divider { width:1px; height:15px; margin:0 5px; background:rgba(151,137,111,.28); }
a.navlink { text-decoration: none; display: inline-block; }
.navlink.util { color:#b5a98f; }
.navlink.home { color:#d2af7b; margin-left:3px; padding-inline:10px; border:1px solid rgba(197,161,92,.24); }
.navlink.home:hover { color:#fff2d5; background:rgba(197,161,92,.12); }
.navlink.dim { color: #6d6558; }
.navlink.dim:hover { color: #d8c9b0; background:rgba(255,255,255,.035); }

/* ---------- HUD：右上角四资源 ---------- */
#hud {
  position: absolute; top: calc(var(--topbar-h) + 10px); right: 20px; z-index: 26;
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px; min-width: 236px;
  background: linear-gradient(160deg, rgba(30,27,22,.93), rgba(20,18,15,.9));
  border: 1px solid #4a4236; border-radius: 3px;
  box-shadow: var(--shadow);
  transition: opacity .35s, transform .35s;
}
#hud::before {
  content: '军 中 账'; position: absolute; top: -9px; left: 12px;
  font-size: 10px; letter-spacing: 4px; color: #9c8f77; background: #1c1a16; padding: 0 6px;
}
body.hud-hidden #hud { opacity: 0; transform: translateX(14px); pointer-events: none; }
/* 弹窗出现时让顶栏退场，资源条单独留在顶部，避免和导航文字叠在一起 */
body.modal-open #topbar { opacity:0; visibility:hidden; transform:translateY(-7px); pointer-events:none; }
/* 弹窗里：军账收成横条压在遮罩之上，玩家能拿它当决策依据 */
body.modal-open #hud {
  z-index: 46; top: 10px; right: 12px; min-width: 0;
  flex-direction: row; align-items: center; gap: 16px;
  padding: 7px 14px;
}
body.modal-open #hud::before { display: none; }
body.modal-open .res { grid-template-columns: auto auto; gap: 0 6px; align-items: baseline; }
body.modal-open .res-extra { grid-template-columns: auto auto; }
body.modal-open .res-bar, body.modal-open .res-sub, body.modal-open .res-drip, body.modal-open .res-unit { display: none; }
body.modal-open .res-label { font-size: 13px; }
body.modal-open .res-val { font-size: 16px; }
.res { position: relative; display: grid; grid-template-columns: 22px 40px 20px 1fr; align-items: center; gap: 7px; }
.res-label { font-size: 15px; color: #e9dcc2; letter-spacing: 1px; }
.res-val { font-family: var(--sans); font-size: 15px; font-weight: 700; color: #fff; text-align: right; }
.res-unit { font-size: 11px; color: #978c78; }
.res-bar { height: 5px; background: #332e26; border-radius: 3px; overflow: hidden; }
.res-bar i { display: block; height: 100%; background: var(--c, #b5382b); transition: width .45s cubic-bezier(.4,1.4,.6,1); }
.res[data-res=men] { --c: var(--red-2); } .res[data-res=men] .res-bar i { background: var(--red-2); }
.res[data-res=food] .res-bar i { background: var(--gold); }
.res[data-res=window] .res-bar i { background: var(--river); }
.res[data-res=trust] .res-bar i { background: var(--grass); }
.res.low .res-val { color: #f0a092; }
.res.zero .res-val { color: #fff; animation: blink 1.1s infinite; }
.res.low .res-label { color: #f0a092; }
/* V6 非颜色线索：low/zero 加文字徽标，色盲 / 低视力也能辨（aria 语义见 game.js Hud.render） */
.res.low .res-label::after { content: ' 低'; margin-left: 3px; font-family: var(--sans); font-size: 10px; letter-spacing: 1px; }
.res.zero .res-label::after { content: ' 缺'; margin-left: 3px; font-family: var(--sans); font-size: 10px; letter-spacing: 1px; }
.res-sub { grid-column: 1 / -1; font-family: var(--sans); font-size: 11px; color: #8b8171; }
.res-extra { grid-template-columns: 22px 40px auto; }
@keyframes blink { 50% { opacity: .35; } }
.float {
  position: absolute; right: -6px; top: -2px; font-family: var(--sans); font-size: 12px;
  font-weight: 700; animation: rise 1.4s forwards; pointer-events: none;
}
.float.up { color: #8fd39c; } .float.down { color: #f3907f; }
@keyframes rise { to { transform: translateY(-16px); opacity: 0; } }
.res.seep::after {
  content: ''; position: absolute; left: -8px; top: 4px; width: 3px; height: 12px;
  background: linear-gradient(var(--grass), transparent); animation: drip 1.6s infinite;
}
@keyframes drip { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(16px); opacity: 0; } }

/* ---------- 地图 ---------- */
#viewport {
  position: relative; flex: 1 1 auto; overflow: hidden; cursor: grab;
  background:
    radial-gradient(1200px 700px at 30% 20%, #2a251d, #16140f 70%),
    repeating-linear-gradient(58deg, rgba(255,255,255,.014) 0 2px, transparent 2px 7px);
  touch-action: none;
}
#viewport.grabbing { cursor: grabbing; }
#map {
  position: absolute; left: 0; top: 0; width: 2000px; height: 4600px;
  transform-origin: 0 0; will-change: transform;
}
#art-layer { position: absolute; inset: 0; }
#art-layer::after { content: ''; }

/* 底图像素：省界、江河、山脉 */
.prov-name { font-size: 78px; fill: #8d8069; opacity: .32; font-family: var(--serif); text-anchor: middle; }
.prov-sub { font-size: 20px; fill: #7d7160; opacity: .5; font-family: var(--sans); text-anchor: middle; letter-spacing: 3px; }
.river { stroke: var(--river); opacity: .78; stroke-linecap: round; }
.river.cold { stroke: #7fa8b8; }
.river.zig { stroke: #6d93a2; opacity: .28; }
.river-name { font-size: 19px; fill: #3c5a64; font-family: var(--serif); letter-spacing: 2px; opacity: .85; }
.range-name { font-size: 16px; fill: #6b614d; font-family: var(--serif); letter-spacing: 2px; opacity: .8; }
.terrain-name { font-size: 21px; fill: #5d5544; font-family: var(--serif); letter-spacing: 4px; opacity: .7; }

/* 路线 */
.route { stroke: #7a6f57; stroke-width: 4; fill: none; stroke-dasharray: 10 9; opacity: .65; }
.route.walked { stroke: var(--red); stroke-dasharray: none; opacity: .9; stroke-width: 5; }
.route.now { stroke: var(--red); stroke-dasharray: 14 10; animation: march-line 1.1s linear infinite; opacity: 1; }
.route.ghost { stroke: #6a614f; stroke-width: 3; stroke-dasharray: 6 12; opacity: .5; }
@keyframes march-line { to { stroke-dashoffset: -24; } }

/* 节点：字号按 --k（1/缩放）反向放大，缩到多远都能读 */
.node { cursor: pointer; }
.node .hit { fill: transparent; }
.node.reach .hit {
  fill: rgba(168,52,42,.08); stroke: rgba(168,52,42,.4); stroke-width: 1.6;
  stroke-dasharray: 5 7; animation: reach-breathe 2.3s ease-in-out infinite;
}
@keyframes reach-breathe { 50% { fill: rgba(168,52,42,.16); stroke-dashoffset: -12; } }
.node .glyph circle, .node .glyph path { transition: .2s; }
.ev-g circle { fill: #efe6d2; stroke: #5d5343; stroke-width: 3; }
.gate-g path { fill: none; stroke: var(--red); stroke-width: 4; }
.gate-g circle { fill: var(--red); }
.n-label { font-size: calc(21px * var(--k, 2.9)); fill: #2a2620; font-family: var(--serif); text-anchor: middle; paint-order: stroke; stroke: rgba(239,230,210,.85); stroke-width: calc(4.5px * var(--k, 2.9)); }
.n-date { font-size: calc(13px * var(--k, 2.9)); fill: #6d6350; font-family: var(--sans); text-anchor: middle; }
.n-hint { font-size: calc(26px * var(--k, 2.9)); fill: var(--red); text-anchor: middle; font-family: var(--serif); }
.n-go { font-size: calc(14px * var(--k, 2.9)); fill: #4a6f7c; font-family: var(--sans); text-anchor: middle; letter-spacing: 1px; }
body.far-view .n-date { display: none; }
.node.reach .ev-g circle { stroke: var(--river); stroke-width: 4; }
.node.reach .gate-g path { stroke-width: 5; }
.node.reach:hover .n-label { fill: var(--red); }
.node.done .n-label { fill: #7c7361; }
.node.done .gate-g path, .node.done .ev-g circle { opacity: .45; }
.node.unknown .n-label { fill: var(--red); letter-spacing: 2px; }
.node.here .n-label { fill: #000; font-weight: 700; }

/* 下一站：所有相邻格都呼吸，但只有"主打去的那一格"套旋转朱圈 + 光晕 */
.node.next .next-halo {
  r: calc(58px * var(--k, 2.9)); fill: rgba(168,52,42,.13); stroke: none;
  transform-box: fill-box; transform-origin: center; animation: next-halo 1.7s ease-in-out infinite;
}
.node.next .next-ring {
  r: calc(58px * var(--k, 2.9)); fill: none; stroke: var(--red);
  stroke-width: calc(2.4px * var(--k, 2.9)); stroke-dasharray: calc(9px * var(--k, 2.9)) calc(7px * var(--k, 2.9));
  transform-box: fill-box; transform-origin: center; animation: next-spin 11s linear infinite;
}
@keyframes next-halo { 0%,100% { opacity: .35; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes next-spin { to { transform: rotate(360deg); } }
.node.next .n-label { fill: var(--red); font-weight: 700; }
.node.next .n-go.on { fill: var(--red); font-weight: 700; font-size: calc(15.5px * var(--k, 2.9)); letter-spacing: 1.5px; }
.node.next:hover .next-ring { stroke-width: calc(3.6px * var(--k, 2.9)); }

/* 主角（整个 #army > g 由 JS 按 1/缩放 反向放大，屏幕上恒定大小） */
.army-halo { fill: rgba(168,52,42,.16); stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 4 6; }
.army-pulse { fill: none; stroke: var(--red); stroke-width: 2.4; transform-box: fill-box; transform-origin: center; animation: army-pulse 2s ease-out infinite; }
@keyframes army-pulse { 0% { transform: scale(.5); opacity: .75; } 75% { opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
.army-mark circle { fill: #1c1a16; stroke: #f0e6d2; stroke-width: 3; }
.army-mark path { stroke: var(--red); stroke-width: 3; fill: var(--red); }
.army-here { font-size: 15px; fill: var(--red); font-family: var(--sans); font-weight: 700; text-anchor: middle; letter-spacing: 3px; paint-order: stroke; stroke: rgba(239,230,210,.92); stroke-width: 4px; }
#sight-ring { fill: none; stroke: rgba(200,186,160,.28); stroke-width: 1.5; stroke-dasharray: 8 10; }
body.far-view #sight-ring { stroke-width: 3; }

/* 敌军 */
.en-arrow { fill: #4a4236; stroke: #2b2721; stroke-width: 1.5; }
.en-name { font-size: 17px; fill: #6b6152; font-family: var(--sans); text-anchor: middle; letter-spacing: 1px; }
.enemy { transform-box: fill-box; }

/* 视野遮罩 */
#fog {
  position: absolute; inset: 0; pointer-events: none; z-index: 8;
  --fog: rgba(60,58,44,.94);
  transition: background .3s linear;
  mix-blend-mode: normal;
}
#vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 9;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(12,10,8,.55) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
}
body.far-view #fog { opacity: .82; }
body.far-view #vignette { opacity: .5; }

/* 工具与注记 */
.map-tools { position: absolute; z-index: 20; left: 20px; bottom: 96px; display: flex; gap: 8px; align-items: center; }
.map-tools button, .zoom {
  font-family: var(--sans); font-size: 12px; letter-spacing: 1px;
  background: rgba(26,23,19,.86); color: #d8cbb2; border: 1px solid #4a4236;
  padding: 6px 11px; border-radius: 2px; cursor: pointer; transition: .16s;
}
.map-tools button:hover { background: var(--red); color: #fff; border-color: var(--red); }
.zoom { cursor: default; color: #8b8171; }

/* 下一站：底部药丸（常驻可达性入口）+ 视口边缘红箭头（下一站在视野外时出现） */
.next-pill {
  display: flex; align-items: center; gap: 7px; margin-left: auto;
  background: rgba(168,52,42,.92) !important; color: #f4ead6 !important; border-color: #c8664f !important;
  padding: 6px 12px;
}
.next-pill .np-tag { font-size: 10.5px; letter-spacing: 2px; opacity: .82; }
.next-pill .np-name { font-family: var(--serif); font-size: 14.5px; font-weight: 700; letter-spacing: 1px; }
.next-pill .np-go { font-size: 11px; letter-spacing: 1px; animation: pill-nudge 1.6s ease-in-out infinite; }
.next-pill[hidden] { display: none; }
@keyframes pill-nudge { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
#next-arrow {
  position: absolute; z-index: 22; left: 0; top: 0; width: 40px; height: 40px;
  display: none; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 50%; border: 1px solid #c8664f; background: rgba(168,52,42,.9);
  color: #f6ecd8; font-size: 19px; line-height: 1;
  transform: translate(-50%, -50%) rotate(var(--ang, 0deg));
  box-shadow: 0 0 0 6px rgba(168,52,42,.16);
  animation: arrow-beat 1.5s ease-in-out infinite;
}
#next-arrow.on { display: flex; }
#next-arrow::before { content: '▸'; }
#next-arrow:hover { background: var(--red-2); box-shadow: 0 0 0 9px rgba(168,52,42,.22); }
@keyframes arrow-beat { 0%,100% { box-shadow: 0 0 0 4px rgba(168,52,42,.12); } 50% { box-shadow: 0 0 0 12px rgba(168,52,42,.24); } }

/* 朱红章子：随时重开「玩家须知」 */
.map-seal {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  font-family: var(--serif) !important; font-size: 12px !important; font-weight: 700; line-height: 1.05;
  letter-spacing: 0 !important; writing-mode: vertical-rl; text-orientation: upright;
  background: var(--red); color: #f6ecd8; border: 1px solid #c8664f;
  box-shadow: inset 0 0 0 2px rgba(246,236,216,.28);
}
.map-seal:hover { background: var(--red-2); }
.map-note {
  position: absolute; z-index: 20; left: 20px; bottom: 68px;
  font-family: var(--sans); font-size: 11px; letter-spacing: 1px; color: #9a9282;
}
.compass { position: absolute; z-index: 20; right: 20px; bottom: 96px; text-align: center; color: #a1957f; }
.compass span { font-size: 15px; display: block; }
.compass i { display: block; width: 1px; height: 34px; margin: 4px auto; background: linear-gradient(#a1957f, transparent); }
.compass em { font-family: var(--sans); font-size: 10px; font-style: normal; color: #9a9282; }

/* 底部手牌托盘 */
.bottom-trays {
  position: absolute; z-index: 21; left: 0; right: 0; bottom: 0;
  display: flex; gap: 16px; padding: 10px 20px 12px;
  /* env() 不被支持时上一条兜底仍生效 */
  padding: 10px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, rgba(14,12,10,.9) 40%);
}
.tray { display: flex; align-items: center; gap: 10px; }
.tray-name { font-family: var(--sans); font-size: 11px; letter-spacing: 3px; color: #7f7768; writing-mode: horizontal-tb; }
#hand-tray, #comrade-tray { display: flex; gap: 6px; flex-wrap: wrap; max-width: 46vw; }
.chip {
  font-family: var(--serif); cursor: pointer; text-align: left;
  background: rgba(238,230,212,.94); border: 1px solid #6f675a; border-left: 4px solid var(--red);
  border-radius: 2px; padding: 5px 9px; line-height: 1.15; transition: .16s;
}
.chip b { display: block; font-size: 13px; color: #221f1a; }
.chip i { display: block; font-family: var(--sans); font-size: 10px; color: #6e6656; font-style: normal; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.chip[disabled] { opacity: .42; cursor: default; transform: none; }
.chip.comrade { border-left-color: var(--river); }
.chip.tiny { padding: 4px 8px; }
.chip.tiny.on { background: var(--red); border-color: var(--red); }
.chip.tiny.on b { color: #fff; }
.chip.school-机动 { border-left-color: var(--river); }
.chip.school-战斗 { border-left-color: #6d3a2f; }
.chip.school-团结 { border-left-color: var(--grass); }
.chip.school-坚韧 { border-left-color: var(--gold); }

/* ---------- 弹窗 ---------- */
#modal-root { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.modal-mask {
  position: absolute; inset: 0; pointer-events: auto;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(10,9,7,.42); opacity: 0; transition: opacity .22s;
}
.modal-mask.show { opacity: 1; }
body.modal-open .modal { max-height: 76vh; }
.modal {
  width: min(640px, 100%); max-height: 84vh; display: flex; flex-direction: column;
  background: linear-gradient(170deg, #f4ecdb, #e9dfc8);
  border: 1px solid #a2957a; border-radius: 3px; box-shadow: var(--shadow);
  transform: translateY(12px) scale(.985); transition: .22s;
  position: relative; overflow: hidden;
}
.modal-mask.show .modal { transform: none; }
.modal.wide { width: min(880px, 100%); }
.modal.mid { width: min(660px, 100%); }
.modal.sm { width: min(440px, 100%); }
.modal::before {
  content: ''; position: absolute; inset: 6px; border: 1px solid rgba(122,111,87,.35);
  pointer-events: none;
}
.modal-head { padding: 18px 26px 10px; border-bottom: 1px solid rgba(122,111,87,.3); }
.kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 3px; color: var(--red); }
.modal-head h2 { margin: 4px 0 0; font-size: 25px; letter-spacing: 2px; font-weight: 600; }
.modal-x {
  position: absolute; right: 12px; top: 12px; width: 30px; height: 30px;
  border: 1px solid rgba(122,111,87,.5); background: none; border-radius: 50%;
  cursor: pointer; color: #6b614f; font-size: 13px; z-index: 2;
}
.modal-x:hover { background: var(--red); color: #fff; border-color: var(--red); }
.modal-body { padding: 18px 26px 8px; overflow: auto; }
.modal-foot { padding: 12px 26px 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  font-family: var(--serif); font-size: 15px; letter-spacing: 2px; cursor: pointer;
  padding: 9px 20px; border-radius: 2px; border: 1px solid var(--ink-2);
  background: none; color: var(--ink); transition: .16s;
}
.btn:hover { background: var(--ink); color: #f0e6d2; }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary:hover { background: #8d2b22; }
.btn.warn { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn.warn:hover { background: #5f2318; }
.btn.ghost { border-color: rgba(122,111,87,.5); color: #6b614f; }

.lead { font-size: 16.5px; line-height: 1.95; margin: 0 0 12px; }
.brief { font-family: var(--sans); font-size: 12px; letter-spacing: 1px; color: var(--ink-3); margin: 0 0 14px; }
.quote { border-left: 3px solid var(--red); padding-left: 14px; color: #4c463c; line-height: 1.9; }
.dim { color: var(--ink-3); }
.src { font-family: var(--sans); font-size: 11px; color: var(--ink-3); line-height: 1.8; }
.rule-note {
  font-family: var(--sans); font-size: 12px; color: #5c6b5f; background: rgba(77,122,82,.1);
  border: 1px solid rgba(77,122,82,.32); padding: 8px 12px; border-radius: 2px; line-height: 1.8;
}
.note-hint { font-family: var(--sans); font-size: 12px; color: #6b614f; line-height: 1.9; }
.line { margin: 10px 0; }
.linkbtn { background: none; border: 0; color: var(--river); cursor: pointer; text-decoration: underline; font-family: var(--sans); font-size: 12px; }

/* 选项 */
.opts { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.opt {
  text-align: left; cursor: pointer; background: rgba(255,253,247,.66);
  border: 1px solid rgba(122,111,87,.45); border-left: 4px solid transparent;
  padding: 11px 14px; border-radius: 2px; transition: .16s; font-family: var(--serif);
}
.opt:hover { border-left-color: var(--red); background: #fffdf7; transform: translateX(3px); }
.opt-label { display: block; font-size: 16.5px; color: #221f1a; line-height: 1.75; }
/* 按下之后才亮出来的账 */
.opts.locked .opt { pointer-events: none; cursor: default; }
.opt.picked { border-left-color: var(--red); background: #fffdf7; box-shadow: inset 0 0 0 1px rgba(168,52,42,.22); }
.opt.picked .opt-label { font-weight: 600; }
.opt.passed { opacity: .66; }
.opt-reveal {
  display: block; margin-top: 6px; font-family: var(--sans); font-size: 12.5px; letter-spacing: .6px;
  color: #6d6350; animation: reveal-in .34s ease-out;
}
.opt.picked .opt-reveal { color: var(--red); font-weight: 700; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(-4px); } }
.reveal-tip {
  display: block; margin-top: 10px; font-family: var(--sans); font-size: 11px;
  letter-spacing: 2.5px; color: #9a8f79; text-align: right; animation: reveal-in .5s ease-out;
}
.cardbar.locked { opacity: .4; pointer-events: none; }
.sin-tag {
  display: inline-block; margin-top: 6px; font-family: var(--sans); font-size: 10.5px; letter-spacing: 2px;
  color: #7c2f22; border: 1px dashed rgba(124,47,34,.55); padding: 2px 7px; border-radius: 2px;
}
.lesson { display: block; margin-top: 6px; font-family: var(--sans); font-size: 11.5px; color: var(--warn); }
.cardbar { border-top: 1px dashed rgba(122,111,87,.4); padding-top: 12px; }
.cardbar-tip { font-family: var(--sans); font-size: 11.5px; color: #7b7261; display: block; margin-bottom: 8px; letter-spacing: 1px; }
#pick-card { display: flex; gap: 6px; flex-wrap: wrap; }
.costline { font-family: var(--sans); font-size: 12px; color: #5f594c; letter-spacing: 1px; }
.delta {
  margin: 10px 0 4px; padding: 8px 12px; font-family: var(--sans); font-size: 13px; letter-spacing: 1px;
  color: #3a352c; background: rgba(122,111,87,.09); border-left: 3px solid var(--red); border-radius: 2px;
}
.road-note {
  margin: 0 0 14px; padding: 10px 13px; border: 1px dashed rgba(122,111,87,.5); border-radius: 2px;
  background: rgba(233,226,208,.5);
}
.road-note .lead { font-size: 14.5px; line-height: 1.85; margin: 6px 0 0; color: #4a4437; }
.road-tag {
  display: inline-block; font-family: var(--sans); font-size: 10.5px; letter-spacing: 3px;
  color: #7b7261; border-bottom: 1px solid rgba(122,111,87,.45); padding-bottom: 2px;
}
.notelist { margin: 12px 0 6px; padding-left: 4px; font-family: var(--sans); font-size: 12.5px; color: #6b614f; line-height: 2; }
.notelist li { list-style: none; padding-left: 14px; position: relative; }
.notelist li::before { content: ''; position: absolute; left: 0; top: .82em; width: 5px; height: 5px; background: var(--red); border-radius: 50%; opacity: .55; }
.lockbox { background: rgba(168,52,42,.09); border: 1px solid rgba(168,52,42,.4); padding: 12px 14px; border-radius: 2px; }
.lockbox b { color: var(--warn); letter-spacing: 2px; font-size: 13px; }
.lockbox p { margin: 6px 0 0; font-family: var(--sans); font-size: 13px; color: #5f594c; line-height: 1.85; }
.lore-links { font-family: var(--sans); font-size: 12px; color: #6b614f; }
.lore-links a { color: var(--river); }

/* CG / 剧情翻面 */
.modal-mask.cinematic { background: rgba(8,7,6,.86); }
.modal-mask.cinematic .modal {
  background: linear-gradient(170deg, #17150f, #211d16); border-color: #4a4236; color: #e6dcc4;
}
.modal-mask.cinematic .modal::before { border-color: rgba(200,186,160,.2); }
.modal-mask.cinematic .modal-head h2 { color: #f3e9d6; }
.modal-mask.cinematic .modal-head { border-bottom-color: rgba(200,186,160,.18); }
.modal-mask.cinematic .kicker { color: #d99a86; }
.modal-mask.cinematic .modal-x { color: #a1957f; border-color: rgba(200,186,160,.3); }
.cg { font-size: 17px; line-height: 2.1; margin: 0 0 16px; letter-spacing: .5px; }
.cg.big { font-size: 20px; }
.cg.dim { color: #a89c86; font-size: 15.5px; }

/* ---------- CG 放映机：会动的静帧（17 §6.1 / 18 §九），纯 CSS + canvas，零依赖 ---------- */
.cg-stage { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.cg-stage.no-art { display: none; }   /* 图没生成或加载失败：只留原来的文字 CG */
.cg-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 1; filter: brightness(.88) saturate(.9);
  transform-origin: 50% 55%; will-change: transform;
}
.cg-weather { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.cg-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,8,6,.70) 0%, rgba(10,8,6,.40) 38%, rgba(10,8,6,.62) 72%, rgba(10,8,6,.88) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(10,8,6,.24), transparent 62%);
}
.modal-mask.cinematic .modal::before { z-index: 2; }
.modal-mask.cinematic .modal > header,
.modal-mask.cinematic .modal > .modal-body,
.modal-mask.cinematic .modal > .modal-foot { position: relative; z-index: 1; }
.modal-mask.cinematic .modal-head,
.modal-mask.cinematic .modal-body {
  text-shadow: 0 1px 2px rgba(0,0,0,.94), 0 1px 10px rgba(0,0,0,.26);
}
.modal-mask.cinematic .modal-body .cg { color: #f0e6d2; }
.modal-mask.cinematic .modal-body .cg.dim { color: #c9bda6; }
/* 深色剧情弹窗的辅助文字：不能沿用纸面弹窗的深棕字。 */
.modal-mask.cinematic .modal-body .notelist,
.modal-mask.cinematic .modal-body .costline,
.modal-mask.cinematic .modal-body .brief,
.modal-mask.cinematic .modal-body .src,
.modal-mask.cinematic .modal-body .mem,
.modal-mask.cinematic .modal-body .dim,
.modal-mask.cinematic .modal-body .lore-links,
.modal-mask.cinematic .modal-body .wc-places,
.modal-mask.cinematic .modal-body .cardbar-tip,
.modal-mask.cinematic .modal-body .lockbox p,
.modal-mask.cinematic .modal-body .echo { color: #cbbfa6; }
.modal-mask.cinematic .modal-body .lore-links a { color: #a9ced8; }
.modal-mask.cinematic .modal-body .delta {
  color: #efe3cd; background: rgba(8,7,6,.44); border-left-color: #bd6a56;
}
.modal-mask.cinematic .modal-body .note-hint {
  color: #f0e2c9; background: rgba(140,59,46,.32); border-left-color: #bd6a56;
}
.modal-mask.cinematic .modal-body .rule-note {
  color: #d7d9c9; background: rgba(30,45,32,.48); border-color: rgba(142,180,146,.34);
}
.modal-mask.cinematic .modal-body .lockbox { background: rgba(140,59,46,.20); border-color: rgba(205,120,100,.42); }
.modal-mask.cinematic .modal-body .lockbox b { color: #f1b3a2; }
.modal-mask.cinematic .modal-body .sin-tag,
.modal-mask.cinematic .modal-body .lesson { color: #e8a792; border-color: rgba(232,167,146,.54); }
.modal-mask.cinematic .modal-body .road-note {
  background: rgba(8,7,6,.48); border-color: rgba(200,186,160,.28);
}
.modal-mask.cinematic .modal-body .road-note .lead { color: #eee2cb; }
.modal-mask.cinematic .modal-body .road-tag { color: #c9bca3; border-bottom-color: rgba(200,186,160,.32); }
/* 浅色选项卡/道具卡里的黑字不再继承模糊阴影。 */
.modal-mask.cinematic .modal-body .opt,
.modal-mask.cinematic .modal-body .opt *,
.modal-mask.cinematic .modal-body .chip,
.modal-mask.cinematic .modal-body .chip *,
.modal-mask.cinematic .modal-body .rule-note,
.modal-mask.cinematic .modal-body .rule-note * { text-shadow: none; }

/* Ken Burns 缓推 / 横移，8～14s；文字逐段淡入 */
@keyframes cg-zoom-in  { from { transform: scale(1.02); } to { transform: scale(1.13); } }
@keyframes cg-pan-left  { from { transform: scale(1.10) translateX(2.5%); }  to { transform: scale(1.10) translateX(-2.5%); } }
@keyframes cg-pan-right { from { transform: scale(1.10) translateX(-2.5%); } to { transform: scale(1.10) translateX(2.5%); } }
@keyframes cg-pan-up    { from { transform: scale(1.10) translateY(2%); }    to { transform: scale(1.10) translateY(-2%); } }
@keyframes cg-fade      { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cg-stage.motion-zoom-in  .cg-img { animation: cg-zoom-in  12s ease-out forwards; }
.cg-stage.motion-pan-left .cg-img { animation: cg-pan-left  13s ease-out forwards; }
.cg-stage.motion-pan-right .cg-img { animation: cg-pan-right 13s ease-out forwards; }
.cg-stage.motion-pan-up   .cg-img { animation: cg-pan-up   13s ease-out forwards; }
.modal-mask.cinematic .modal-body > .cg { animation: cg-fade 1.1s ease-out both; }
.modal-mask.cinematic .modal-body > .cg:nth-child(2) { animation-delay: .35s; }
.modal-mask.cinematic .modal-body > .cg:nth-child(3) { animation-delay: .7s; }

/* 无障碍：系统要求减少动效时，运镜、粒子、文字淡入全部关，只留静帧 */
@media (prefers-reduced-motion: reduce) {
  .cg-stage .cg-img { animation: none !important; }
  .cg-weather { display: none; }
  .modal-mask.cinematic .modal-body > .cg { animation: none !important; }
  /* V7 关闭地图装饰循环，保留静态高亮（红圈常显不转） */
  .route.now { animation: none !important; }
  .node.reach .hit { animation: none !important; }
  .node.next .next-halo, .node.next .next-ring { animation: none !important; }
  .army-pulse { animation: none !important; }
  .next-pill .np-go { animation: none !important; }
  #next-arrow { animation: none !important; }
  .res.zero .res-val { animation: none !important; }
  .float { animation: none !important; }
}

.lore-list { margin: 8px 0 6px; }
.lore { border-top: 1px solid rgba(200,186,160,.2); padding: 12px 0; }
.lore-top { display: flex; align-items: center; gap: 10px; }
.lore-top h4 { margin: 0; font-size: 16px; color: #f0e6d2; font-weight: 600; }
.lore-where { font-family: var(--sans); font-size: 11px; color: #9c917c; margin: 4px 0 6px; letter-spacing: 1px; }
.lore-t { font-size: 14.5px; line-height: 1.95; color: #ddd2b8; margin: 0 0 6px; }
.lore-s { font-family: var(--sans); font-size: 11px; color: #958a75; margin: 0; line-height: 1.8; }
.grade {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  border-radius: 2px; padding: 2px 6px; flex: 0 0 auto;
}
.g-A { background: #3f5b41; color: #dff0dc; } .g-R { background: #6a5a2a; color: #f2e7c4; }
.g-\? { background: #6b3b32; color: #f4dcd4; } .g-— { background: #44403a; color: #cfc7b7; }
.carve { margin-top: 14px; padding: 10px 14px; background: rgba(168,52,42,.14); border-left: 3px solid var(--red);
  font-size: 14.5px; color: #f0e6d2; letter-spacing: 1px; }
.warn-block h4 { margin: 16px 0 6px; font-size: 14px; letter-spacing: 3px; color: #e3b8a6; }
.warn-block p { font-size: 14.5px; line-height: 1.95; color: #e2d8c2; margin: 0; }
.verbatim { font-style: italic; border-left: 3px solid var(--warn); padding-left: 12px; }
.invite { color: #cbbda3 !important; }

/* 史料页 */
.hist-wrap { display: grid; grid-template-columns: 176px 1fr; gap: 18px; }
.hist-index { display: flex; flex-direction: column; gap: 3px; border-right: 1px solid rgba(122,111,87,.35); padding-right: 10px; max-height: 60vh; overflow: auto; }
.hist-index a { font-family: var(--sans); font-size: 11.5px; color: var(--river); cursor: pointer; padding: 4px 6px; border-radius: 2px; }
.hist-index a:hover { background: rgba(74,111,124,.12); }
.hist-index a.off { color: #a9a08d; }
.hist-list { max-height: 60vh; overflow: auto; padding-right: 6px; }
.hist { padding: 10px 0; border-bottom: 1px dashed rgba(122,111,87,.35); }
.hist-top { display: flex; align-items: baseline; gap: 8px; }
.hist-top b { font-size: 15.5px; } .hist-top i { font-family: var(--sans); font-size: 11px; color: #8b8271; font-style: normal; }
.hist p { font-size: 14px; line-height: 1.95; margin: 6px 0; }
.hist.off { opacity: .5; }

/* 木牌 */
.wood {
  background: linear-gradient(150deg, #c9a875, #b18f5e 45%, #9b7b4d);
  border: 1px solid #6f5634; border-radius: 4px; padding: 18px 20px; color: #3a2a14;
  box-shadow: inset 0 0 34px rgba(70,44,12,.4);
}
.wood-head { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 11px; letter-spacing: 2px; color: #4e3a1c; }
.knot { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(#5e441f, #8a6a38); }
.wood-places { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.wood-places i { font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: 1px;
  border: 1px solid rgba(58,42,20,.5); padding: 3px 8px; border-radius: 2px; background: rgba(255,246,225,.35); }
.wood-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; }
.wood-names b { font-size: 15px; font-weight: 600; letter-spacing: 1px; }
.wood-blanks { margin-top: 14px; display: flex; align-items: center; gap: 6px; }
.wood-blanks span.blank { display: block; width: 26px; height: 16px; border: 1px dashed rgba(58,42,20,.6); }
.wood-blanks i { font-family: var(--sans); font-style: normal; font-size: 11.5px; color: #4e3a1c; }

/* 名单墙 */
.wall-card {
  border: 1px solid rgba(122,111,87,.5); border-left: 4px solid var(--red);
  background: rgba(255,253,247,.6); padding: 12px 14px; margin: 8px 0; border-radius: 2px;
}
.wall-card.warn { border-left-color: var(--warn); background: rgba(124,47,34,.07); }
.wc-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wc-top b { font-size: 15px; } .wc-top span { font-family: var(--sans); font-size: 11.5px; color: var(--red); }
.wc-top i { font-family: var(--sans); font-size: 10.5px; color: #978e7c; font-style: normal; margin-left: auto; }
.wc-places { margin: 6px 0; font-family: var(--sans); font-size: 11px; color: #6b614f; }
.wc-places i { font-style: normal; margin-right: 8px; }
.wc-names { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.wc-names b { font-size: 13.5px; font-weight: 600; }
.wc-blanks { font-family: var(--sans); font-size: 11px; color: var(--warn); margin-top: 6px; }
.warn-title { color: var(--warn); }
h3 { font-size: 15px; letter-spacing: 2px; border-bottom: 1px solid rgba(122,111,87,.3); padding-bottom: 6px; margin: 18px 0 10px; }
.modal-mask.cinematic h3 { border-bottom-color: rgba(200,186,160,.2); color: #e9dcc2; }
/* 弹窗里的链接：亮底用河青；黑底（终章、警示页）必须提亮，否则浏览器默认纯蓝压在深底上读不清 */
.modal-body a { color: var(--river); }
.modal-mask.cinematic a { color: #a8ccd8; text-decoration-color: rgba(168,204,216,.5); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cell { border: 1px solid rgba(122,111,87,.4); padding: 10px 12px; border-radius: 2px; background: rgba(255,253,247,.5); }
.cell b { font-size: 15px; } .cell p { font-family: var(--sans); font-size: 12px; line-height: 1.8; margin: 5px 0 0; color: #5f594c; }
.cell.used { opacity: .45; }
.cell.item { border-left: 4px solid var(--gold); }
ul { margin: 0 0 12px; padding-left: 20px; } li { font-size: 14.5px; line-height: 1.95; margin-bottom: 4px; }
kbd { font-family: var(--sans); font-size: 11px; border: 1px solid #a2957a; border-bottom-width: 2px; padding: 1px 5px; border-radius: 3px; background: #fffdf7; }

/* Toast */
#toast {
  position: absolute; z-index: 60; left: 50%; bottom: 108px; transform: translate(-50%, 14px);
  background: rgba(24,21,17,.94); color: #f0e6d2; border: 1px solid #4a4236;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 1px; padding: 9px 18px;
  border-radius: 2px; opacity: 0; transition: .28s; pointer-events: none; max-width: 70vw; text-align: center;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 底栏 */
#footbar {
  flex: 0 0 auto; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 6px 20px; background: #100e0b; border-top: 1px solid #322d25;
  font-family: var(--sans); font-size: 10.5px; color: #9a9282; letter-spacing: 1px; z-index: 30;
}

/* 小屏 */
@media (max-width: 1080px) {
  #hud { min-width: 200px; top: calc(var(--topbar-h) + 8px); right: 12px; padding: 10px; }
  .brand h1 { font-size: 17px; letter-spacing: 3px; }
  #topnav .navlink { font-size: 12.5px; padding: 5px 6px; }
  .hist-wrap { grid-template-columns: 1fr; } .hist-index { flex-direction: row; flex-wrap: wrap; border-right: 0; }
}
@media (max-width: 1220px) {
  :root { --topbar-h: 102px; }
  #topbar { align-items:flex-start; }
  #topnav {
    order:4; flex:1 0 100%; justify-content:flex-start; flex-wrap:nowrap;
    overflow-x:auto; scrollbar-width:none; padding-top:2px;
  }
  #topnav::-webkit-scrollbar { display:none; }
}
@media (max-width: 760px) {
  /* 顶栏收成两行：标题一行、导航一行横向滚，别把地图挤没 */
  #topbar { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; }
  :root { --topbar-h: 0px; }
  .brand h1 { font-size: 16px; letter-spacing: 3px; }
  .brand-sub { display: none; }
  .mode-switch { margin-left:auto; }
  .mode-sync { display:none; }
  .mode-tab { min-height:34px; padding:4px 9px; font-size:11px; }
  #topnav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 0; scrollbar-width: none; }
  #topnav::-webkit-scrollbar { display: none; }
  .navlink { padding: 8px 10px; min-height: 42px; font-size: 13px; white-space: nowrap; }
  /* 功能导航可横划，但「主入口」留在右缘，避免只露出半个字。 */
  .navlink.home {
    position: sticky; right: 0; z-index: 2; background: #13110e;
    box-shadow: -12px 0 14px rgba(19,17,14,.92);
  }

  /* 页脚三行会吃掉地图高度：窄屏只留分级说明与名单，示意图声明回落到「规则手册」里 */
  #footbar { font-size: 10px; gap: 4px 14px; }
  #footbar span:nth-child(2) { display: none; }

  /* 军账：竖排面板在窄屏会盖掉半张地图，改成贴着顶栏下方的一行 */
  #hud {
    top: auto; left: 8px; right: 8px; bottom: var(--hud-bottom, 92px); min-width: 0;
    flex-direction: row; justify-content: space-between; align-items: center; gap: 8px;
    padding: 7px 12px;
  }
  #hud::before { display: none; }
  .res { grid-template-columns: auto auto; gap: 0 5px; align-items: baseline; }
  .res-bar, .res-sub, .res-unit { display: none; }
  .res-label { font-size: 12.5px; }
  .res-extra { grid-template-columns: auto auto; }
  .res-extra .res-bar { display: none; }
  body.modal-open #hud { top: 8px; right: 8px; left: 8px; bottom: auto; }

  /* 底部托盘：横向滚，卡片不折行；触屏上把可点区域垫到 40px 以上 */
  .bottom-trays { flex-direction: row; gap: 10px; padding: 8px 10px 10px; overflow-x: auto; scrollbar-width: none; }
  .bottom-trays { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .bottom-trays::-webkit-scrollbar { display: none; }
  .tray { flex: 0 0 auto; }
  #hand-tray, #comrade-tray { flex-wrap: nowrap; max-width: none; }
  .chip { min-height: 40px; }
  .chip:hover { transform: none; box-shadow: none; }

  /* 地图控件要让位给底部那条军账，否则会被盖住（军账在 bottom:92px） */
  .map-tools { bottom: 150px; gap: 6px; }
  .map-tools button, .zoom { min-height: 40px; font-size: 11.5px; padding: 6px 9px; }
  .next-pill { margin-left: 0; }
  .next-pill .np-go { display: none; }
  .map-seal { width: 42px; height: 42px; flex: 0 0 auto; }
  #next-arrow { width: 44px; height: 44px; font-size: 21px; }
  .map-note, .compass { display: none; }
  /* 地图工具条在 bottom:150px；Toast 再抬高一层，避免盖住「下一站 / 须知」。 */
  #toast { bottom: 238px; max-width: calc(100vw - 28px); }

  /* 弹窗：接近全屏，留出手指空间 */
  .modal.wide, .modal.mid, .modal.sm { width: 100%; }
  body.modal-open .modal { max-height: 84vh; }
  .modal-head { padding: 14px 16px 8px; }
  .modal-head h2 { font-size: 19px; letter-spacing: 1px; }
  .modal-body { padding: 14px 16px 6px; }
  .modal-foot { padding: 10px 16px 16px; }
  .btn { min-height: 44px; flex: 1 1 auto; }
  .opt { padding: 12px 14px; min-height: 48px; font-size: 15px; }
  .opt-reveal { font-size: 12px; }
  .cardbar { gap: 6px; }
  .chip.tiny { min-height: 36px; }
  .lore-list { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .brand h1 { font-size: 14px; letter-spacing: 2px; }
  #hud { gap: 4px; padding: 6px 8px; }
  .res-label { font-size: 11.5px; }
  .res-val { font-size: 15px; }
  .modal-head h2 { font-size: 17px; }
  .opt { font-size: 14px; }
}
/* 触屏：没有 hover 就别留悬停态 */
@media (hover: none) {
  .chip:hover, .node:hover .n-label { transform: none; }
  .navlink:hover { border-bottom-color: transparent; }
}

/* ---------- T4：存档码 / 馆藏 / 音效 / 民心回响 / 木牌刻字 ---------- */
.code-box {
  width: 100%; font-family: var(--mono, monospace); font-size: 11.5px; line-height: 1.7;
  color: #3a352c; background: #fffdf7; border: 1px solid rgba(122,111,87,.5);
  border-radius: 2px; padding: 10px; resize: vertical; word-break: break-all;
}
.res-sound {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 1px; cursor: pointer;
  color: #6b614f; background: none; border: 1px solid rgba(122,111,87,.45);
  border-radius: 2px; padding: 2px 6px; margin-top: 4px;
}
.res-sound.on { color: #7c2f22; border-color: rgba(124,47,34,.6); }
.echo {
  margin: 8px 0 0; font-family: var(--serif); font-size: 13.5px; line-height: 1.95;
  color: #5c5346; border-top: 1px dashed rgba(168,52,42,.3); padding-top: 8px;
}
.cell.item.missing { opacity: .48; background: rgba(122,111,87,.08); }
.cell.fresh { border-left: 3px solid var(--red); }
.cell.item.missing b { color: #7b7261; font-weight: 400; }

/* 终章木牌刻字：名字逐格浮现，留白格永远不填满 */
.carve-stage { margin: 14px 0 10px; user-select: none; }
.carve-board {
  display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 14px 16px;
  background: linear-gradient(160deg, #6a563c, #4d3f2c);
  border: 1px solid rgba(200,186,160,.25); border-radius: 3px; min-height: 76px;
}
.carve-name, .carve-blank {
  font-family: var(--serif); font-size: 14px; letter-spacing: 1px;
  border-bottom: 1px solid rgba(230,220,196,.35); padding: 2px 1px; min-width: 44px;
}
.carve-name { color: #f0e6d2; opacity: 0; transform: translateY(3px); transition: opacity .45s, transform .45s; }
.carve-name.revealed { opacity: 1; transform: none; }
.carve-blank { color: #a89c86; border-bottom-style: dashed; }
.carve-hint { font-family: var(--sans); font-size: 11px; color: #9c917c; margin: 8px 0 0; line-height: 1.8; }
@media (prefers-reduced-motion: reduce) {
  .carve-name { transition: none; opacity: 1; transform: none; }
}