/* 宣和穿越录：一幅绢本设色的天下舆图，旁边是一本账簿。
   单一主题（绢、墨、朱砂），刻意不做暗色模式。 */
:root {
  --silk: #EFE6CF;
  --paper: #F5EEDC;
  --paper-2: #EDE3CA;
  --paper-3: #E3D6B6;
  --ink: #2A2621;
  --ink-2: #5A5144;
  --ink-3: #8A7E69;
  --line: #CDBE9C;
  --cinnabar: #B23A2A;
  --cinnabar-2: #D5745F;
  --celadon: #3D6C76;
  --celadon-soft: #D7E2DC;
  --gold: #A07A36;
  --good: #3B7550;
  --warn: #A1642A;
  --bad: #A3392D;
  --brush: "Ma Shan Zheng", "STKaiti", "KaiTi", "Kaiti SC", serif;
  --serif: "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "SimSun", serif;
  --sans: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --panel-w: 420px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #CFC3A6; color: var(--ink); font-family: var(--serif); font-size: 15px; line-height: 1.65; overflow: hidden; }
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; }

.app { display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w); height: 100%; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* ---------- 地图舞台 ---------- */
.stage { position: relative; overflow: hidden; min-width: 0; background: #B4CAC3; }
.map { position: absolute; inset: 0; }
.map-canvas { display: block; touch-action: none; cursor: grab; outline: none; }
.map-canvas.dragging { cursor: grabbing; }
.map-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(70, 50, 20, 0.28), inset 0 0 16px rgba(70, 50, 20, 0.35); }

.me-seal { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; display: grid; place-items: center; pointer-events: none; }
.me-seal span { position: relative; z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; background: var(--cinnabar); color: #FBF3E4; font: 400 15px/1 var(--brush); border-radius: 3px; box-shadow: 0 1px 3px rgba(60, 20, 10, 0.4), inset 0 0 0 1.5px rgba(255, 240, 225, 0.35); }
.me-seal::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(178, 58, 42, 0.55); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

.ev-pin { position: absolute; left: 0; top: 0; pointer-events: auto; border: 0; background: none; padding: 0; display: flex; align-items: center; gap: 4px; margin: -9px 0 0 -9px; }
.ev-pin i { width: 18px; height: 18px; border-radius: 50%; display: block; background: var(--cinnabar); box-shadow: 0 0 0 2px rgba(245, 238, 220, 0.9), 0 0 12px 4px rgba(178, 58, 42, 0.45); position: relative; }
.ev-pin i::after { content: ""; position: absolute; inset: 5px; background: #FBF3E4; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.ev-pin.ev-court i, .ev-pin.ev-minor i { background: var(--gold); box-shadow: 0 0 0 2px rgba(245, 238, 220, 0.9), 0 0 10px 3px rgba(160, 122, 54, 0.4); }
.ev-pin.ev-rebel i { background: #8A4A7A; }
.ev-pin b { font: 600 12px/1.2 var(--serif); color: #FBF3E4; background: rgba(42, 38, 33, 0.82); padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.ev-pin.compact b { display: none; }
.ev-pin:hover b { display: inline; }

.cartouche { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); left: 14px; display: flex; align-items: stretch; gap: 12px; padding: 10px 16px 10px 10px; background: rgba(245, 238, 220, 0.92); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 2px 10px rgba(60, 40, 10, 0.18); max-width: calc(100% - 120px); }
.seal-title { display: grid; grid-template-rows: 1fr 1fr; width: 46px; background: var(--cinnabar); color: #FBF3E4; font: 400 17px/1 var(--brush); text-align: center; border-radius: 3px; padding: 4px 0; align-content: center; gap: 2px; box-shadow: inset 0 0 0 2px rgba(255, 240, 225, 0.3); }
.when { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.when-main { font: 400 26px/1.15 var(--brush); letter-spacing: 0.06em; }
.when-sub { font-size: 12px; color: var(--ink-3); letter-spacing: 0.05em; }
.when-count { font-size: 13px; font-weight: 600; color: var(--celadon); }
.when-count.near, .when-count.war { color: var(--cinnabar); }
.when-count.fall { color: #fff; background: var(--cinnabar); padding: 0 6px; border-radius: 2px; align-self: flex-start; }

.zoombar { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: 14px; display: flex; flex-direction: column; background: rgba(245, 238, 220, 0.92); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 10px rgba(60, 40, 10, 0.15); }
.zoombar button { border: 0; background: none; padding: 7px 12px; font: 400 16px/1.2 var(--brush); letter-spacing: 0.1em; border-bottom: 1px solid var(--paper-3); }
.zoombar button:hover { background: var(--paper-3); }
.zoombar button.on { color: var(--cinnabar); }
.zoombar .me { background: var(--cinnabar); color: #FBF3E4; border-bottom: 0; }
.zoombar .me:hover { background: #9C3022; }

.mapfoot { position: absolute; left: 14px; bottom: max(14px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: flex-end; gap: 14px; pointer-events: none; }
.viewname { font: 400 22px/1 var(--brush); color: rgba(42, 38, 33, 0.82); letter-spacing: 0.2em; text-shadow: 0 0 6px rgba(245, 238, 220, 0.9), 0 0 2px rgba(245, 238, 220, 1); }
.scale { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); text-shadow: 0 0 4px rgba(245, 238, 220, 1); }
.scale .bar { display: block; height: 6px; border: 1.5px solid var(--ink); border-top: 0; }
.compass { position: absolute; right: 18px; bottom: max(18px, env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; pointer-events: none; }

/* 地图上的弹出卡片 */
.popover { position: absolute; z-index: 5; width: min(300px, calc(100% - 28px)); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 8px 28px rgba(50, 30, 10, 0.28); padding: 14px 16px 12px; }
.popover h3 { margin: 0; font: 400 24px/1.2 var(--brush); letter-spacing: 0.05em; padding-right: 22px; }
.popover .meta { font-size: 12px; color: var(--ink-3); margin: 2px 0 8px; }
.popover p { margin: 0 0 10px; font-size: 14px; }
.popover .x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--ink-3); padding: 4px; }
.popover .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.popover .warn { font-size: 13px; color: var(--warn); margin: 0 0 8px; }

/* 大事横幅 */
.banner { position: absolute; z-index: 6; top: 124px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 28px)); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--cinnabar); border-radius: 4px; box-shadow: 0 12px 40px rgba(50, 30, 10, 0.35); padding: 16px 20px 14px; animation: drop 0.45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes drop { from { transform: translate(-50%, -20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.banner .eyebrow { font-size: 12px; letter-spacing: 0.25em; color: var(--cinnabar); font-weight: 600; }
.banner h2 { margin: 2px 0 6px; font: 400 32px/1.15 var(--brush); letter-spacing: 0.08em; }
.banner p { margin: 0 0 12px; }
.banner .acts { display: flex; gap: 8px; align-items: center; }
.banner .count { margin-left: auto; font-size: 12px; color: var(--ink-3); }

.notice { position: absolute; z-index: 6; left: 50%; bottom: 70px; transform: translateX(-50%); width: min(560px, calc(100% - 28px)); background: #FFF6E5; border: 1px solid var(--warn); color: var(--warn); border-radius: 4px; padding: 10px 14px; font-size: 14px; }

/* ---------- 账簿面板 ---------- */
.panel { display: flex; flex-direction: column; min-height: 0; background: var(--paper); border-left: 1px solid var(--line); box-shadow: -6px 0 24px rgba(50, 30, 10, 0.18); position: relative; z-index: 2; }
.ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 14px 18px 12px; padding-top: max(14px, env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.stat { min-width: 0; }
.stat .k { font-size: 12px; color: var(--ink-3); letter-spacing: 0.12em; }
.stat .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }
.stat .v small { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 2px; }
.stat .v.flash-up { animation: up 1.4s ease; } .stat .v.flash-down { animation: down 1.4s ease; }
@keyframes up { 0%, 40% { color: var(--good); } } @keyframes down { 0%, 40% { color: var(--bad); } }
.meter { grid-column: 1 / -1; display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 2.4em; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.meter .bar { height: 6px; background: var(--paper-3); border-radius: 3px; overflow: hidden; }
.meter .bar i { display: block; height: 100%; background: var(--celadon); border-radius: 3px; transition: width 0.6s ease; }
.meter.def .bar i { background: #6C5A3A; }
.meter.heat .bar i { background: var(--warn); } .meter.heat.hot .bar i { background: var(--bad); }
.meter span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.ledger .place { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ledger .place b { color: var(--cinnabar); font-weight: 600; }
.linkish { border: 0; background: none; padding: 0; color: var(--celadon); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }

.tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 12px; background: var(--paper-2); }
.tabs button { border: 0; background: none; padding: 8px 14px 6px; font: 400 18px/1.2 var(--brush); letter-spacing: 0.15em; color: var(--ink-3); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--cinnabar); }
.tabs .restart { margin-left: auto; align-self: center; font-family: var(--serif); letter-spacing: 0; color: var(--ink-3); border-color: transparent; background: none; }
.tabs .restart:hover { color: var(--cinnabar); border-color: var(--line); }
.tab { flex: 1; min-height: 0; overflow-y: auto; }
.tab-month { display: flex; flex-direction: column; overflow: hidden; }

/* 编年 */
.chron { flex: 1 1 auto; min-height: clamp(180px, 30vh, 420px); overflow-y: auto; padding: 8px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.mhead { display: flex; align-items: center; gap: 10px; margin-top: 10px; font: 400 19px/1.2 var(--brush); letter-spacing: 0.1em; color: var(--ink); }
.mhead::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.mhead small { font: 400 12px var(--serif); color: var(--ink-3); letter-spacing: 0; }
.story p { margin: 0 0 0.6em; max-width: 40em; }
.you { align-self: flex-end; max-width: 88%; background: var(--celadon-soft); border-radius: 6px 6px 2px 6px; padding: 6px 12px; font-size: 14px; }
.you .tag { font-size: 11px; letter-spacing: 0.12em; color: var(--celadon); font-weight: 700; margin-right: 6px; }
.card { background: #FBF6EA; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.card .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verdict { font: 400 17px/1 var(--brush); letter-spacing: 0.1em; padding: 4px 8px 3px; border-radius: 3px; color: #FBF3E4; }
.v-0 { background: var(--bad); } .v-1 { background: var(--warn); } .v-2 { background: var(--good); } .v-3 { background: var(--good); box-shadow: 0 0 0 2px #E7C66E; } .v-n { background: var(--ink-3); }
.checks { display: flex; flex-wrap: wrap; gap: 5px; }
.ck { font-size: 12px; padding: 0 7px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); line-height: 1.7; }
.ck.ok { border-color: #9DBBA6; color: var(--good); } .ck.miss { border-color: #D9B48A; color: var(--warn); } .ck.none { border-color: #D79A90; color: var(--bad); border-style: dashed; }
.card .nar { margin: 0; }
.card .con { margin: 0; font-size: 14px; color: var(--warn); }
.card .dl { font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.dl .p { color: var(--good); } .dl .n { color: var(--bad); }
.settle { font-size: 12px; color: var(--ink-3); border-left: 2px solid var(--paper-3); padding-left: 8px; }
.incident { font-size: 14px; border-left: 3px solid var(--warn); padding: 2px 0 2px 10px; }
.histev { border: 1px solid #DDB2A6; background: #F9EDE6; border-radius: 4px; padding: 8px 12px; }
.histev .t { font: 400 18px/1.3 var(--brush); color: var(--cinnabar); letter-spacing: 0.08em; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.histev p { margin: 2px 0 0; font-size: 14px; }
.sys { font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sys.err { color: var(--bad); }
.thinking { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 14px; }
.brush-loader { width: 46px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--ink) 40%, transparent); background-size: 200% 100%; animation: sweep 1.1s linear infinite; opacity: 0.6; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.endcard { border: 1px solid var(--cinnabar); background: #FBF0E8; border-radius: 4px; padding: 12px 14px; }

/* 建议 */
.advisor { border-top: 1px solid var(--line); background: var(--paper-2); padding: 10px 14px 6px; flex: none; }
.advisor-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; cursor: pointer; user-select: none; }
.advisor-head::after { content: "▾"; margin-left: auto; color: var(--ink-3); font-size: 12px; transition: transform 0.2s; }
.advisor.collapsed .advisor-head::after { transform: rotate(-90deg); }
.advisor.collapsed .sugs, .advisor.collapsed .advisor-head .scene { display: none; }
.ai-seal { width: 20px; height: 20px; display: grid; place-items: center; background: var(--celadon); color: #fff; font: 400 13px/1 var(--brush); border-radius: 3px; }
.advisor-head .scene { flex-basis: 100%; color: var(--ink); font-size: 13.5px; }
.sugs { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 26vh; overflow-y: auto; }
.sug { display: flex; align-items: stretch; border: 1px solid var(--line); background: var(--paper); border-radius: 4px; overflow: hidden; transition: border-color 0.15s, transform 0.15s; }
.sug:hover { border-color: var(--celadon); }
.sug .fill { flex: 1; display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: none; padding: 6px 10px; font-size: 14px; min-width: 0; }
.sug .kind { flex: none; font-size: 11px; letter-spacing: 0.1em; padding: 1px 6px; border-radius: 2px; background: var(--paper-3); color: var(--ink-2); }
.sug .kind.k-经营 { background: #EADFC2; color: #7A5A20; } .sug .kind.k-打听 { background: #DCE6E2; color: #3D6C76; } .sug .kind.k-人脉 { background: #EFDCD5; color: #934235; }
.sug .kind.k-技艺 { background: #E3E2C8; color: #5E6A2E; } .sug .kind.k-备战 { background: #E2D8E4; color: #5C4466; } .sug .kind.k-远行 { background: #D7E0EA; color: #3B5A80; }
.sug .go { flex: none; border: 0; border-left: 1px solid var(--line); background: none; padding: 0 12px; font-size: 13px; color: var(--celadon); white-space: nowrap; }
.sug .go:hover { background: var(--celadon); color: #fff; }

.composer { padding: 8px 14px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); background: var(--paper-2); }
.composer textarea { width: 100%; resize: vertical; min-height: 64px; max-height: 40vh; border: 1px solid var(--line); border-radius: 4px; background: #FDFAF1; padding: 8px 10px; font-family: var(--serif); font-size: 15px; line-height: 1.6; }
.composer textarea:focus { border-color: var(--celadon); outline: none; box-shadow: 0 0 0 3px rgba(61, 108, 118, 0.15); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.hint { font-size: 12px; color: var(--ink-3); margin-left: auto; }
.btn { border: 1px solid var(--line); background: var(--paper); border-radius: 4px; padding: 6px 14px; font-size: 14px; line-height: 1.4; }
.btn:hover:not(:disabled) { border-color: var(--ink-3); }
.btn.primary { background: var(--cinnabar); border-color: var(--cinnabar); color: #FBF3E4; font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #9C3022; }
.btn.ghost { background: none; }
.btn.sm { padding: 3px 10px; font-size: 13px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* 家业、史事 */
.sheet { padding: 12px 18px 24px; display: flex; flex-direction: column; gap: 16px; }
.sheet h3 { margin: 0 0 6px; font: 400 19px/1.2 var(--brush); letter-spacing: 0.12em; display: flex; justify-content: space-between; align-items: baseline; }
.sheet h3 small { font: 400 12px var(--serif); color: var(--ink-3); letter-spacing: 0; }
.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.items li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--paper-3); font-size: 14px; }
.items li .d { color: var(--ink-3); font-size: 12.5px; }
.items li .n { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; padding: 1px 9px; border: 1px solid var(--line); border-radius: 12px; background: #FBF6EA; }
.empty { font-size: 13px; color: var(--ink-3); margin: 0; }
.prog { height: 4px; background: var(--paper-3); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.prog i { display: block; height: 100%; background: var(--gold); }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 12px 22px; }
.timeline li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-3); }
.timeline li.past::before { background: var(--cinnabar); border-color: var(--cinnabar); }
.timeline li.now::before { box-shadow: 0 0 0 4px rgba(178, 58, 42, 0.2); }
.timeline .when2 { font-size: 12px; color: var(--ink-3); }
.timeline .tt { font: 400 17px/1.3 var(--brush); letter-spacing: 0.06em; }
.timeline li.future .tt { color: var(--ink-2); }
.timeline p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }
.timeline button { margin-top: 3px; }
.danger-zone { border-top: 1px solid var(--line); padding-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }

/* 结局 */
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(30, 22, 12, 0.55); display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal .box { width: min(560px, 100%); max-height: calc(100% - 32px); overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--cinnabar); border-radius: 4px; padding: 22px 26px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.modal h2 { margin: 0 0 4px; font: 400 34px/1.2 var(--brush); letter-spacing: 0.1em; }
.modal .tier { display: inline-block; font: 400 22px/1 var(--brush); color: #FBF3E4; background: var(--cinnabar); padding: 6px 12px 4px; border-radius: 3px; letter-spacing: 0.15em; margin: 6px 0 10px; }
.modal .sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 14px; }
.modal .epi { white-space: pre-wrap; border-left: 3px solid var(--line); padding-left: 12px; min-height: 3em; }

/* 开局：挑出身 */
.start-box { width: min(640px, 100%); }
.start-box h2 { margin-bottom: 2px; }
.start-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); }
.starts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; }
.start-card { width: 100%; height: 100%; display: grid; gap: 5px; text-align: left; border: 1px solid var(--line); background: #FBF6EA; border-radius: 4px; padding: 11px 13px; }
.start-card:hover { border-color: var(--cinnabar); background: #FDF9F0; }
.start-card .sr-label { font: 400 21px/1.2 var(--brush); letter-spacing: 0.06em; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.start-card .sr-label em { font: 400 12px var(--serif); color: var(--ink-3); letter-spacing: 0.1em; font-style: normal; }
.start-card .risk { justify-self: start; font-size: 11.5px; padding: 0 7px; border-radius: 10px; line-height: 1.7; border: 1px solid var(--line); }
.start-card .risk.r-high { color: var(--bad); border-color: #D79A90; background: #FBEEEA; }
.start-card .risk.r-mid { color: var(--warn); border-color: #D9B48A; background: #FCF3E6; }
.start-card .risk.r-low { color: var(--good); border-color: #9DBBA6; background: #EFF5F0; }
.start-card .sb { font-size: 14px; line-height: 1.6; }
.start-card .sg { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- 第二版：歇着、市集、势力、分卷 ---------- */
.restgrp { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.restgrp .btn { border: 0; border-radius: 0; }
.restgrp select { border: 0; border-left: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 13px; padding: 0 6px; color: var(--ink-2); }
.ledger .hold { justify-content: space-between; align-items: center; }
.ledger .hold .btn { padding: 2px 10px; }
.chapcard { text-align: center; padding: 14px 0 6px; font: 400 26px/1.2 var(--brush); letter-spacing: 0.2em; color: var(--cinnabar); display: flex; flex-direction: column; gap: 2px; }
.chapcard small { font: 400 13px var(--serif); letter-spacing: 0.1em; color: var(--ink-3); }
.modal .eyebrow { font-size: 12px; letter-spacing: 0.25em; color: var(--cinnabar); font-weight: 600; }
.modal .x.xm { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 22px; color: var(--ink-3); }
.modal .box { position: relative; }
.market-box { width: min(760px, 100%); }
.mtable { overflow-x: auto; margin: 6px 0 10px; }
.mtable table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.mtable th { text-align: left; font-weight: 400; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line); padding: 4px 6px; white-space: nowrap; }
.mtable td { border-bottom: 1px dashed var(--paper-3); padding: 5px 6px; white-space: nowrap; }
.mtable td small { color: var(--ink-3); font-size: 11.5px; }
.mtable tr.have td:first-child { color: var(--celadon); font-weight: 600; }
.mtable td.acts { text-align: right; }
.mtable td.acts .btn { margin-left: 4px; }
.mtable .btn.sm { padding: 1px 8px; font-size: 12px; }
.mtable table.guide td { white-space: normal; font-size: 13px; }
.mflash { background: #F7EFD9; border-left: 3px solid var(--gold); padding: 4px 10px; font-size: 13.5px; margin: 0 0 6px; }
.hint-prices summary { cursor: pointer; font-size: 13px; color: var(--celadon); }
.tagw { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 5px; border-radius: 2px; background: #EFDCD5; color: #934235; vertical-align: 1px; }
.faction { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 16px; }
.fsw { width: 16px; height: 16px; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.fl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); margin: 10px 0; }
.fl input { font: 400 22px/1.3 var(--brush); padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: #FDFAF1; letter-spacing: 0.1em; }
.sw { display: flex; gap: 8px; flex-wrap: wrap; }
.swb { width: 30px; height: 30px; border-radius: 4px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.swb.on { border-color: var(--ink); }
.timeline li.volhead { padding-left: 0; margin: 6px 0 8px; }
.timeline li.volhead::before { display: none; }
.timeline li.volhead .tt { font-size: 21px; color: var(--ink-3); letter-spacing: 0.15em; }
.timeline li.volhead.on .tt { color: var(--cinnabar); }
.popover .warn .ok { color: var(--good); } .popover .warn .bad { color: var(--bad); }
.popover .acts .btn { margin-bottom: 4px; }

/* ---------- 窄屏：地图在上，账簿在下 ---------- */
@media (max-width: 900px) {
  .banner { top: 84px; }
  .banner h2 { font-size: 24px; }
  body { overflow: auto; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 54vh auto; height: auto; min-height: 100%; }
  .stage { height: 54vh; }
  .panel { border-left: 0; border-top: 1px solid var(--line); min-height: 46vh; }
  .tab-month { overflow: visible; }
  .chron { max-height: 52vh; }
  .cartouche { padding: 6px 10px 6px 6px; gap: 8px; max-width: calc(100% - 84px); }
  .seal-title { width: 34px; font-size: 13px; }
  .when-main { font-size: 20px; }
  .zoombar button { padding: 5px 9px; font-size: 14px; }
  .compass { display: none; }
  .ledger { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .viewname { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- 第三版：走遍天下、见闻、改写历史 ---------- */
.tabs button { padding-left: 11px; padding-right: 11px; }
.hold-acts { display: inline-flex; gap: 6px; }
.when-count.pivot { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.trip-bubble { position: absolute; left: 0; top: 0; margin: -42px 0 0 -10px; padding: 3px 9px; background: rgba(42, 38, 33, 0.88); color: #FBF3E4; font: 600 13px/1.3 var(--serif); border-radius: 3px; white-space: nowrap; animation: bub 2.6s ease forwards; }
.trip-bubble::after { content: ""; position: absolute; left: 10px; bottom: -5px; border: 5px solid transparent; border-top-color: rgba(42, 38, 33, 0.88); border-bottom: 0; }
@keyframes bub { 0% { opacity: 0; transform-origin: left bottom; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }
.regev { font-size: 14px; border-left: 3px solid var(--celadon); padding: 2px 0 2px 10px; }
.regev b { font-family: var(--brush); font-weight: 400; font-size: 17px; color: var(--celadon); margin-right: 8px; letter-spacing: 0.06em; }
.regev small { display: block; color: var(--ink-3); font-size: 12px; }
.arrive { border: 1px solid #B7CBC4; background: #EEF4F0; border-radius: 4px; padding: 8px 12px; }
.arrive .t { font: 400 18px/1.3 var(--brush); color: var(--celadon); letter-spacing: 0.06em; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.arrive p { margin: 2px 0 0; font-size: 14px; }
.pivotcard { border: 1px solid var(--line); border-left: 4px solid var(--ink-3); background: #F6F0E2; border-radius: 4px; padding: 8px 12px; }
.pivotcard.alt { border-left-color: var(--good); background: #EEF4EC; }
.pivotcard .t { font: 400 19px/1.3 var(--brush); letter-spacing: 0.06em; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pivotcard.alt .t { color: var(--good); }
.pivotcard .t small { font: 400 12px var(--serif); color: var(--ink-3); }
.pivotcard p { margin: 2px 0; font-size: 14px; }
.pivotcard > small { color: var(--ink-3); font-size: 12px; }
.banner.pivotb { border-top-color: var(--ink-3); }
.banner.pivotb.alt { border-top-color: var(--good); }
.banner.pivotb.alt .eyebrow { color: var(--good); }
.ask { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 4px; width: 100%; }
.ask-h { font-weight: 700; font-size: 14px; }
.ask-segs { font-size: 12.5px; color: var(--ink-2); margin: 2px 0 6px !important; }
.ask-cost { font-size: 12.5px; color: var(--ink-2); margin: 4px 0 8px !important; }
.opt { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; margin: 3px 0; cursor: pointer; }
.opt input { margin-top: 4px; }
.hintline { font-size: 12.5px; color: var(--ink-3); margin: 6px 0 0 !important; }
.popover { width: min(340px, calc(100% - 28px)); max-height: calc(100% - 24px); overflow-y: auto; }
.arrive-box .now { margin: -2px 0 8px; font-size: 13px; color: var(--ink-3); }
.arrive-box .first { font-size: 15.5px; line-height: 1.8; margin: 4px 0 12px; }
.reg-card { background: #F2ECDC; border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 10px; }
.reg-card p { margin: 0 0 6px; }
.reg-card b, .jmeta b { display: inline-block; min-width: 5.5em; color: var(--ink-3); font-weight: 400; font-size: 12px; letter-spacing: 0.1em; }
.reg-rumor { border-left: 3px solid var(--gold); padding-left: 10px; font-size: 13.5px; margin-bottom: 8px; }
.reg-rumor p { margin: 0 0 6px; }
.reg-rumor small { color: var(--ink-3); }
.jreg { border-bottom: 1px dashed var(--paper-3); padding: 6px 0; }
.jreg summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; list-style: none; }
.jreg summary::-webkit-details-marker { display: none; }
.jreg summary b { font: 400 18px/1.3 var(--brush); letter-spacing: 0.06em; }
.jreg summary::before { content: "▸"; color: var(--ink-3); font-size: 12px; }
.jreg[open] summary::before { content: "▾"; }
.jintro { font-size: 13.5px; margin: 6px 0; }
.jmeta { font-size: 13px; margin: 2px 0; color: var(--ink-2); }
.pivots { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pv { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: #FBF6EA; }
.pv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pv .tt { font: 400 19px/1.2 var(--brush); letter-spacing: 0.06em; }
.pv-c { font-size: 13px; color: var(--ink-2); }
.pv-c b { font-size: 18px; color: var(--cinnabar); }
.pv .when2 { font-size: 12px; color: var(--ink-3); }
.pv p { margin: 4px 0; font-size: 13.5px; }
.pv-parts { font-size: 12px; color: var(--good); margin: 4px 0 6px; }
.tagw.ok { background: #DDEBDF; color: var(--good); }
.tagw.seed { background: #E3E2C8; color: #5E6A2E; }
.aid-box { width: min(620px, 100%); }
.aid-chance { font-size: 14px; margin: 6px 0 10px; }
.aid-chance b { font-size: 22px; color: var(--cinnabar); margin: 0 4px; }
.aid-chance .d { font-size: 12px; color: var(--ink-3); }
.aid-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aid-list li { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; background: #FBF6EA; }
.aid-h { display: flex; gap: 10px; align-items: baseline; }
.aid-h .d, .aid-list p.d { font-size: 12.5px; color: var(--ink-3); }
.aid-list p { margin: 2px 0 6px; }
.aid-in { display: flex; gap: 6px; align-items: center; }
.aid-in input { width: 7em; padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; background: #FDFAF1; font-variant-numeric: tabular-nums; }

/* v5.1 饥饿与死亡 */
.stat .k em { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 4px; }
.stat .k em.bad { color: var(--bad); font-weight: 600; }
.stat.starving .v { color: var(--bad); }
.incident.hunger { border-left-color: var(--bad); color: var(--bad); font-weight: 600; }
.endcard.death { border-color: var(--ink); background: rgba(42, 38, 33, 0.06); }
.death-box h2 { color: var(--ink); }
.death-box .eyebrow { color: var(--ink-3); }

/* 语音输入、市集提示 */
.inwrap { position: relative; }
.inwrap textarea { padding-right: 40px; }
.mic { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.mic:hover { border-color: var(--celadon); color: var(--celadon); }
.mic.on { background: var(--cinnabar); border-color: var(--cinnabar); color: #FBF3E4; animation: micpulse 1.2s infinite; }
@keyframes micpulse { 0% { box-shadow: 0 0 0 0 rgba(178, 58, 42, .45); } 100% { box-shadow: 0 0 0 10px rgba(178, 58, 42, 0); } }
.mtable td.tipc { white-space: normal; font-size: 12.5px; color: var(--ink-3); min-width: 120px; }
.mtable td.tipc .up { color: var(--good); font-weight: 600; }

/* 出门带多少、家里 */
.take { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; margin: 6px 0; background: rgba(255, 252, 240, .6); }
.take-h { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.take label { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; font-size: 13px; }
.take input[type=number] { width: 72px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 3px; background: #FDFAF1; }
.take-p { margin-top: 4px; font-size: 13px; }
.place.homeline { color: var(--ink-2); font-size: 12.5px; }
.place.homeline .d { color: var(--ink-3); margin-left: 4px; }
.chron-y { margin: 6px 0 10px; font-size: 13.5px; }
.chron-y b { font-weight: 600; color: var(--ink-2); font-size: 12.5px; }
.chron-y p { margin: 2px 0 0; line-height: 1.7; }
.granary { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); background: rgba(255, 250, 235, .7); border-radius: 4px; padding: 6px 10px; margin: 6px 0; font-size: 14px; }
.granary small { color: var(--ink-3); margin-left: 4px; }
.granary .acts .btn { margin-left: 4px; }
/* v6：兵、价目簿 */
.meter.armyrow { all: unset; grid-column: 1 / -1; display: grid; grid-template-columns: 5.2em minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; padding: 2px 0; }
.meter.armyrow .armytxt { color: var(--ink); font-weight: 600; }
.meter.armyrow .more { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.meter.armyrow:hover .more { color: var(--cinnabar); }
.mtable table.guide td.src { font-weight: 700; color: var(--celadon); }
.mtable table.guide th, .mtable table.guide td { padding: 3px 5px; font-size: 12.5px; }

/* 家业：总账、地点、收起的家什 */
.estate-sheet { gap: 14px; }
.estate-heading { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); }
.estate-help { position:relative; margin-left:auto; }
.estate-help button { border:1px solid var(--line); border-radius:50%; background:none; color:var(--ink-3); width:23px; height:23px; padding:0; font-size:12px; }
.estate-help [role=tooltip] { display:none; position:absolute; right:0; top:28px; width:min(300px,70vw); padding:12px; border:1px solid var(--line); border-radius:4px; background:#fffaf0; box-shadow:0 4px 16px #382e2420; z-index:4; line-height:1.8; color:var(--ink-2); }
.estate-help:hover [role=tooltip],.estate-help:focus-within [role=tooltip] { display:block; }
.estate-totals { display:flex; flex-wrap:wrap; gap:4px 0; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:13px; font-variant-numeric:tabular-nums; }
.estate-stat + .estate-stat::before { content:'·'; padding:0 7px; color:var(--ink-3); }
.estate-stat.bad { color:var(--bad); font-weight:600; }
.estate-places { display:flex; flex-direction:column; gap:10px; }
.estate-place { border:1px solid var(--line); border-radius:5px; background:#fbf6ea; }
.estate-place.is-current { border-left:3px solid var(--celadon); }
.estate-place summary { padding:10px 12px; cursor:pointer; display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; list-style:none; }
.estate-place summary::-webkit-details-marker,.estate-kit summary::-webkit-details-marker { display:none; }
.estate-place summary::after,.estate-kit summary::after { content:'›'; color:var(--ink-3); margin-left:auto; }
.estate-place[open] summary::after,.estate-kit[open] summary::after { transform:rotate(90deg); }
.estate-place summary b { font-size:15px; font-weight:600; }
.estate-place-meta,.estate-count { font-size:12px; color:var(--ink-3); }
.estate-count { margin-left:auto; }
.estate-place-body { padding:0 12px 10px; }
.estate-assets { list-style:none; padding:0; margin:0; }
.estate-assets li { display:grid; grid-template-columns:minmax(72px,1fr) minmax(0,1.7fr) auto; align-items:baseline; gap:7px; padding:7px 0; border-top:1px dashed var(--line); font-size:13px; }
.estate-asset-name { overflow-wrap:anywhere; }
.estate-asset-detail { color:var(--ink-3); font-size:12px; }
.estate-output { color:var(--ink-2); text-align:right; font-size:12px; font-variant-numeric:tabular-nums; }
.estate-project { display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:7px 0; color:var(--ink-2); }
.estate-project em { font-style:normal; color:var(--warn); padding-right:4px; }
.estate-place-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:4px; }
.estate-place-actions .linkish { font-size:12px; }
.estate-people,.estate-kit-row { display:flex; align-items:baseline; gap:10px; }
.estate-label { flex:none; color:var(--ink-3); font-size:12px; }
.estate-people .chip,.estate-kit .chip { font-size:12px; padding:1px 7px; }
.estate-kit { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0; }
.estate-kit summary { display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none; font-size:13px; }
.estate-kit summary b { font-weight:500; }
.estate-kit-body { display:flex; flex-direction:column; gap:10px; padding-top:12px; }
.estate-reset { display:flex; flex-wrap:wrap; gap:8px; color:var(--ink-3); font-size:11px; padding-top:4px; }
.estate-reset button { border:0; background:none; color:var(--ink-3); font-size:12px; padding:0; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:480px) { .estate-assets li { grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; } .estate-asset-detail { grid-row:2; } .estate-output { grid-column:2; grid-row:1 / span 2; align-self:center; } .estate-count { display:none; } }

/* 邀请码、设置 */
.tabs .settings { margin-left: auto; align-self: center; padding: 2px 10px; font-size: 12px; }
.invite-box input, #keyIn { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 4px; background: #FDFAF1; font: inherit; margin: 6px 0; }
.invite-box h2 { letter-spacing: .15em; }