@charset "UTF-8";

:root {
  --paper: #e9e1d0;
  --paper-light: #f3eddf;
  --paper-deep: #d8cdb6;
  --ink: #20241f;
  --ink-soft: #555a50;
  --ink-faint: #696c62;
  --cinnabar: #9d3d2e;
  --river: #718780;
  --line: rgba(32, 36, 31, .2);
  --display: "STKaiti", "KaiTi", "Kaiti SC", "FZKai-Z03", serif;
  --serif: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --sans: "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; min-width: 320px; min-height: 100vh; font-family: var(--serif); -webkit-font-smoothing: antialiased; }
button { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 4px; }
[hidden] { display: none !important; }
.paper-noise { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .055; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
#app { position: relative; z-index: 1; }
.section-label, .eyebrow { display: block; color: var(--cinnabar); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; }

/* 封面：留足空白，让两个字先站住。 */
.cover { position: relative; min-height: 100svh; overflow: hidden; background: radial-gradient(circle at 76% 24%, rgba(255,255,255,.55), transparent 32%), linear-gradient(112deg, var(--paper-light), var(--paper) 56%, #ded3bd); }
.cover-rule { position: absolute; left: 6vw; top: 6vh; bottom: 6vh; width: 1px; background: var(--ink); opacity: .65; }
.cover-rule::before, .cover-rule::after { content: ""; position: absolute; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.cover-rule::before { top: 0; } .cover-rule::after { bottom: 0; }
.cover-kicker { position: absolute; left: 9vw; top: 8vh; margin: 0; color: var(--ink-soft); font-family: var(--sans); font-size: 12px; letter-spacing: .28em; animation: rise-in .8s .1s both; }
.cover-ghost { position: absolute; left: 28vw; top: 1vh; color: rgba(32,36,31,.035); font-family: var(--display); font-size: min(72vh, 55vw); line-height: 1; user-select: none; }
.cover-title-wrap { position: absolute; right: 11vw; top: 10vh; display: flex; align-items: flex-start; gap: 18px; }
.cover-title-wrap h1 { margin: 0; font-family: var(--display); font-size: clamp(150px, 27vh, 270px); font-weight: 400; letter-spacing: .02em; line-height: .82; writing-mode: vertical-rl; animation: title-in 1.15s cubic-bezier(.2,.7,.2,1) both; }
.seal { display: grid; place-items: center; width: 38px; height: 38px; margin-top: 10px; border: 2px solid var(--cinnabar); color: var(--cinnabar); font-family: var(--display); font-size: 25px; transform: rotate(-5deg); animation: seal-in .5s .85s both; }
.cover-copy { position: absolute; left: 12vw; bottom: 10vh; width: min(480px, 42vw); }
.cover-question { margin: 0 0 28px; font-family: var(--display); font-size: clamp(40px, 4.4vw, 64px); line-height: 1.2; letter-spacing: .03em; animation: rise-in .8s .35s both; }
.cover-intro { margin: 0 0 30px; color: var(--ink-soft); font-size: 16px; line-height: 2; animation: rise-in .8s .5s both; }
.cover-meta { margin: 14px 0 0; color: var(--ink-faint); font-family: var(--sans); font-size: 11px; letter-spacing: .08em; }
.cover-side-note { position: absolute; right: 4vw; bottom: 7vh; margin: 0; color: var(--ink-faint); font-family: var(--display); font-size: 18px; letter-spacing: .45em; writing-mode: vertical-rl; }
.brush-button { min-height: 52px; padding: 0 24px; border: 0; border-radius: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 44px; cursor: pointer; font-family: var(--sans); font-size: 15px; letter-spacing: .12em; transition: transform .2s, background .2s, color .2s; }
.brush-button:hover { transform: translateY(-2px); }
.brush-button.primary { background: var(--ink); color: var(--paper-light); box-shadow: 7px 7px 0 rgba(157,61,46,.18); }
.brush-button.primary:hover { background: var(--cinnabar); }
.brush-button.secondary { border: 1px solid var(--ink); background: transparent; }
.button-arrow { font-size: 22px; font-weight: 400; }

/* 战局骨架 */
.game { max-width: 1540px; margin: 0 auto; padding: 28px 34px 54px; }
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.game-brand { display: flex; align-items: baseline; gap: 18px; }
.brand-mark { font-family: var(--display); font-size: 37px; line-height: 1; }
.brand-chapter { color: var(--ink-soft); font-family: var(--sans); font-size: 12px; letter-spacing: .12em; }
.deadline { margin: 0; color: var(--cinnabar); font-size: 12px; letter-spacing: .08em; }
.status-strip { display: grid; grid-template-columns: repeat(5, 1fr); padding: 17px 0; border-bottom: 1px solid var(--line); }
.status-item { display: flex; align-items: baseline; justify-content: center; gap: 8px; min-width: 0; border-right: 1px solid var(--line); }
.status-item:last-child { border-right: 0; }
.status-label { color: var(--ink-faint); font-family: var(--sans); font-size: 11px; }
.status-item strong { font-family: Georgia, var(--serif); font-size: 26px; font-weight: 400; font-variant-numeric: tabular-nums; }
.status-tail { color: var(--ink-faint); font-size: 11px; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(310px, .78fr); gap: 34px; padding-top: 28px; }
.map-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.map-heading h2 { margin: 5px 0 0; font-family: var(--display); font-size: clamp(27px, 2.5vw, 40px); font-weight: 400; }
.map-hint { color: var(--ink-faint); font-size: 12px; white-space: nowrap; }
.map-shell { position: relative; aspect-ratio: 1000 / 640; overflow: hidden; border: 1px solid rgba(32,36,31,.28); background: rgba(243,237,223,.38); box-shadow: inset 0 0 60px rgba(82,70,45,.08); }
.map-shell::before, .map-shell::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.map-shell::before { inset: 12px; border: 1px solid rgba(32,36,31,.08); }
.map-shell::after { width: 160px; height: 160px; right: -65px; bottom: -65px; border: 1px solid rgba(157,61,46,.16); border-radius: 50%; }
.ink-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.terrain-wash { fill: rgba(96,102,83,.04); }
.river { fill: none; stroke: url(#riverWash); stroke-width: 74; stroke-linecap: round; filter: url(#soft); }
.river-line { fill: none; stroke: rgba(83,112,105,.26); stroke-width: 1.4; stroke-dasharray: 7 15; animation: river-flow 20s linear infinite; }
.mountains { fill: rgba(45,53,44,.18); }
.mountain-inner { fill: rgba(243,237,223,.45); }
.ink-stroke, .tree-trunk, .city-lines, .bridge-arch, .bridge-post, .camp-flag { fill: none; stroke: rgba(32,36,31,.55); stroke-width: 3; stroke-linecap: round; }
.city-drawing { fill: rgba(32,36,31,.13); }
.city-lines.thin { stroke-width: 1.5; }
.forest { fill: rgba(45,64,48,.23); }
.bridge-arch, .bridge-post { stroke: rgba(60,57,44,.48); stroke-width: 4; }
.west-path { fill: none; stroke: rgba(32,36,31,.26); stroke-width: 3; stroke-dasharray: 5 12; }
.camp-drawing { fill: rgba(32,36,31,.1); }
.contours { fill: none; stroke: rgba(32,36,31,.13); stroke-width: 2; }
.compass { fill: none; stroke: rgba(32,36,31,.25); stroke-width: 1; }
.compass text { fill: var(--ink-faint); stroke: none; font-family: var(--display); font-size: 18px; text-anchor: middle; }
.state-effect { fill: none; stroke: var(--cinnabar); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: effect-in .45s cubic-bezier(.34,1.56,.64,1) both; }
.scout-ring { stroke-width: 2; stroke-dasharray: 7 11; opacity: .65; }
.supply-cut { stroke-width: 4; }
.supply-cut circle { stroke-dasharray: 5 8; opacity: .65; }
.ambush-marks circle { fill: var(--ink); stroke: none; }
.ambush-marks path { stroke: var(--ink); stroke-width: 3; }
.highland-flags { fill: rgba(157,61,46,.18); stroke-width: 3; }
.escape-arrow { stroke-width: 5; }
.number-bump { animation: number-bump .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes effect-in { from { opacity: 0; transform: scale(.86); transform-origin: center; } to { opacity: 1; transform: scale(1); } }
@keyframes number-bump { 50% { transform: translateY(-3px); color: var(--cinnabar); } }
.map-location { position: absolute; z-index: 3; min-width: 82px; min-height: 52px; padding: 7px 10px 7px 13px; border: 0; background: rgba(233,225,208,.68); text-align: left; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; animation: rise-in .45s both; }
.map-location::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px; background: transparent; }
.map-location:hover { background: rgba(243,237,223,.94); transform: translateY(-2px); }
.map-location[aria-pressed="true"] { background: rgba(243,237,223,.95); box-shadow: 0 5px 20px rgba(32,36,31,.08); }
.map-location[aria-pressed="true"]::before { background: var(--cinnabar); }
.location-name { display: block; font-family: var(--display); font-size: 24px; line-height: 1; }
.location-sub { display: block; margin-top: 6px; color: var(--ink-soft); font-family: var(--sans); font-size: 9px; letter-spacing: .05em; white-space: nowrap; }
.loc-highland { left: 11%; top: 30%; }
.loc-bridge { left: 43%; top: 51%; }
.loc-woods { left: 9%; top: 73%; }
.loc-city { left: 69%; top: 39%; }
.loc-west-road { left: 78%; top: 72%; }
.loc-camp { left: 30%; top: 82%; }
.map-effects { position: absolute; z-index: 4; left: 22px; top: 20px; display: flex; flex-wrap: wrap; gap: 6px; max-width: 65%; pointer-events: none; }
.effect-chip { padding: 4px 8px; border: 1px solid rgba(157,61,46,.35); background: rgba(243,237,223,.82); color: var(--cinnabar); font-family: var(--sans); font-size: 10px; letter-spacing: .08em; }
.map-footer { display: flex; align-items: center; gap: 20px; padding-top: 12px; color: var(--ink-faint); font-family: var(--sans); font-size: 10px; }
.legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; }
.legend-dot.own { background: var(--ink); } .legend-dot.enemy { border: 1px solid var(--cinnabar); }
.map-footer-note { margin-left: auto; }
.command-column { display: flex; flex-direction: column; gap: 22px; }
.enemy-panel, .orders-panel, .log-panel { padding-top: 13px; border-top: 1px solid var(--ink); }
.enemy-report { min-height: 66px; margin-top: 11px; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.enemy-numbers { display: flex; gap: 22px; margin-top: 10px; color: var(--ink-faint); font-size: 11px; }
.enemy-numbers strong { margin-left: 5px; color: var(--ink); font-family: Georgia, var(--serif); font-size: 18px; font-weight: 400; }
.orders-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.orders-heading h3 { margin: 3px 0 0; font-family: var(--display); font-size: 31px; font-weight: 400; }
#selected-subtitle { color: var(--ink-faint); font-size: 10px; }
.action-list { display: flex; flex-direction: column; }
.action-button { display: grid; grid-template-columns: 34px 1fr; gap: 11px; width: 100%; min-height: 65px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; transition: padding .2s, background .2s; }
.action-button:hover:not(:disabled) { padding-left: 10px; background: rgba(255,255,255,.22); }
.action-button:disabled { cursor: not-allowed; background: rgba(32,36,31,.025); }
.action-button:disabled .action-mark { opacity: .35; }
.action-button:disabled .action-name { color: var(--ink-faint); }
.action-mark { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--ink-soft); font-family: var(--display); font-size: 20px; }
.action-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--display); font-size: 21px; }
.action-state { color: var(--cinnabar); font-family: var(--sans); font-size: 9px; }
.action-description { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
.end-day { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 16px; padding: 0 16px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-light); cursor: pointer; font-family: var(--sans); font-size: 13px; letter-spacing: .1em; transition: background .2s; }
.end-day:hover { background: var(--cinnabar); border-color: var(--cinnabar); }
.orders-note { margin: 8px 0 0; color: var(--ink-faint); font-size: 10px; text-align: center; }
.latest-log { min-height: 56px; margin-top: 10px; color: var(--ink-soft); font-size: 12px; line-height: 1.8; }
.latest-log strong { display: block; color: var(--ink); font-family: var(--display); font-size: 19px; font-weight: 400; }
.full-log { margin-top: 8px; color: var(--ink-faint); font-size: 11px; }
.full-log summary, .ending-timeline summary { cursor: pointer; font-family: var(--sans); }
.full-log ol, .ending-timeline ol { max-height: 300px; overflow: auto; padding-left: 22px; line-height: 1.8; }
.full-log li { margin: 8px 0; padding-left: 4px; }
.full-log li strong { color: var(--ink-soft); font-weight: 400; }

/* 结算：先照见这局，再见原文。 */
.ending { max-width: 1100px; margin: 0 auto; padding: 8vh 34px 60px; }
.ending-kicker { margin: 0 0 14px; color: var(--cinnabar); font-family: var(--sans); font-size: 11px; letter-spacing: .3em; animation: rise-in .5s both; }
.ending h2 { margin: 0; font-family: var(--display); font-size: clamp(54px, 8vw, 100px); font-weight: 400; line-height: 1.1; animation: rise-in .65s .08s both; }
.ending-subtitle { margin: 15px 0 34px; color: var(--ink-faint); font-size: 14px; }
.ending-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.ending-stats > div { padding: 20px 14px; border-right: 1px solid var(--line); }
.ending-stats > div:last-child { border-right: 0; }
.ending-stats span { display: block; color: var(--ink-faint); font-family: var(--sans); font-size: 10px; letter-spacing: .1em; }
.ending-stats strong { display: block; margin-top: 5px; font-family: Georgia, var(--serif); font-size: 30px; font-weight: 400; }
.ending-reflection { display: grid; grid-template-columns: 1.2fr .8fr; gap: 45px; padding: 38px 0; }
.mirror p { margin: 12px 0 0; font-family: var(--display); font-size: clamp(25px, 3vw, 37px); line-height: 1.55; }
.ending-quote { align-self: end; margin: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--cinnabar); }
.ending-quote p { margin: 0; font-size: 17px; line-height: 1.9; }
.ending-quote cite { display: block; margin-top: 10px; color: var(--ink-faint); font-size: 12px; font-style: normal; }
.ending-timeline { padding: 18px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; }
.ending-timeline li { margin: 10px 0; }
.ending-timeline li span { color: var(--ink-faint); }
.ending-actions-row { display: flex; justify-content: flex-end; gap: 14px; margin-top: 25px; }
.ending-footnote { margin: 20px 0 0; color: var(--ink-faint); font-size: 11px; text-align: right; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; background: var(--ink); color: var(--paper-light); font-family: var(--sans); font-size: 12px; line-height: 1.7; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes title-in { from { opacity: 0; transform: translateY(-30px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes seal-in { from { opacity: 0; transform: scale(1.6) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(-5deg); } }
@keyframes river-flow { to { stroke-dashoffset: -220; } }

@media (max-width: 980px) {
  .game { padding: 20px 20px 40px; }
  .game-layout { grid-template-columns: 1fr; gap: 26px; }
  .command-column { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .orders-panel { grid-row: span 2; }
  .map-shell { max-height: 680px; }
  .ending-reflection { gap: 28px; }
}

@media (max-width: 640px) {
  .cover-rule { left: 5vw; }
  .cover-kicker { left: 9vw; font-size: 10px; }
  .cover-title-wrap { right: 7vw; top: 12vh; }
  .cover-title-wrap h1 { font-size: 31vw; }
  .seal { width: 29px; height: 29px; font-size: 20px; }
  .cover-copy { left: 9vw; bottom: 7vh; width: 82vw; }
  .cover-question { margin-bottom: 18px; font-size: 11vw; }
  .cover-intro { margin-bottom: 22px; font-size: 13px; }
  .cover-side-note { display: none; }
  .cover-ghost { left: 5vw; top: 8vh; font-size: 100vw; }
  .game { padding: 15px 12px 32px; }
  .game-header { align-items: flex-start; padding-bottom: 12px; }
  .game-brand { flex-direction: column; gap: 4px; }
  .brand-mark { font-size: 31px; }
  .brand-chapter { font-size: 9px; }
  .deadline { max-width: 95px; font-size: 10px; text-align: right; line-height: 1.6; }
  .status-strip { padding: 12px 0; }
  .status-item { flex-direction: column; align-items: center; gap: 1px; }
  .status-item strong { font-size: 21px; }
  .status-tail { display: inline; font-size: 9px; }
  .status-label { font-size: 10px; }
  .game-layout { padding-top: 19px; }
  .map-heading { margin-bottom: 11px; }
  .map-heading h2 { font-size: 26px; }
  .map-hint { font-size: 10px; }
  .map-shell { aspect-ratio: 1 / .78; }
  .ink-map { transform: scale(1.13); transform-origin: 52% 52%; }
  .map-location { min-width: 54px; min-height: 44px; padding: 5px 7px 5px 10px; background: rgba(233,225,208,.8); }
  .location-name { font-size: 20px; }
  .location-sub { display: none; }
  .loc-highland { left: 7%; top: 28%; }
  .loc-bridge { left: 42%; top: 49%; }
  .loc-woods { left: 6%; top: 71%; }
  .loc-city { left: 68%; top: 36%; }
  .loc-west-road { left: 74%; top: 70%; }
  .loc-camp { left: 29%; top: 81%; }
  .map-effects { left: 13px; top: 12px; max-width: 85%; }
  .effect-chip { font-size: 8px; }
  .map-footer { gap: 13px; }
  .map-footer-note { display: none; }
  .command-column { display: flex; gap: 20px; }
  .orders-panel { order: -1; }
  .enemy-report { min-height: 0; }
  .action-button { min-height: 68px; }
  .latest-log { min-height: 0; }
  .ending { padding: 6vh 20px 40px; }
  .ending h2 { font-size: 15vw; }
  .ending-stats { grid-template-columns: 1fr 1fr; }
  .ending-stats > div:nth-child(2) { border-right: 0; }
  .ending-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ending-stats strong { font-size: 26px; }
  .ending-reflection { grid-template-columns: 1fr; gap: 28px; padding: 28px 0; }
  .mirror p { font-size: 28px; }
  .ending-quote { align-self: auto; }
  .ending-actions-row { flex-direction: column-reverse; }
  .ending-actions-row .brush-button { width: 100%; }
  .ending-footnote { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}