/* 書冊: the life reads like a chronicle. Ink on paper, a seal-red accent,
   few boxes; the year's event leads, everything else steps back.
   Presentation only — every gameplay ID and listener is untouched. */
:root {
  --ink: #221d17;
  --soft-ink: #6b6253;
  --paper: #f3ecdd;
  --paper-deep: #e6dcc6;
  --seal: #a3302a;
  --rule: rgba(34, 29, 23, .14);
}
#game-screen { background: var(--paper); gap: 10px; padding-top: 12px; }

/* Header: portrait, name and age on one line, origin below. */
.story-header { align-items: center; gap: 12px; }
.hero-portrait { width: 56px; height: 56px; flex: none; border-radius: 50%; aspect-ratio: auto; background-color: #3a2f26; border: 2px solid var(--seal); }
#character-name { font-size: 19px; }
#age-label { font-size: 15px; color: var(--soft-ink); }
.story-origin { margin-top: 2px; }
.story-controls > button { border-color: var(--rule); }

/* The five states as one quiet row of small numbers with hairline bars. */
#stat-list { gap: 10px; }
#stat-list dt { font-size: 10px; letter-spacing: .1em; }
#stat-list output { font-size: 15px; font-weight: 700; }
#stat-list .stat-meter, #stat-list .stat-meter i { height: 2px; }

/* Grain and coin as a single line, not a boxed panel. */
.story-resources { border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; padding: 6px 0; gap: 4px 16px; }
.story-resources dt { font-size: 10px; letter-spacing: .1em; }
.story-resources dd { font-size: 14px; margin-top: 1px; }
.story-resources small { font-size: 10px; }

/* The year's page and the event come first in 人生. */
#pane-life > #annual-card { order: -2; }
#pane-life > #event-stage { order: -1; }
#event-stage { border: 0; border-radius: 0; padding: 4px 2px 8px; background: transparent; min-height: 0; }
#event-kind { color: var(--seal); letter-spacing: .2em; font-size: 11px; }
#event-clock-note.decision-capsule { color: var(--seal); background: transparent; padding: 0; border-radius: 0; }
#event-title, #outcome h2 { font-size: 26px; line-height: 1.4; margin-bottom: 10px; }
#event-text, #outcome-text { font-size: 16px; line-height: 1.9; }
.event-cause { background: transparent; border-left: 2px solid var(--seal); }

/* Choices read like entries in a book: 一、二、三, ruled, no filled slab. */
#choices { counter-reset: choice; gap: 0; margin-top: 12px; border-top: 1px solid var(--rule); }
#choices .choice-button, #choices .choice-button:first-child { position: relative; min-height: 58px; padding: 12px 8px 12px 40px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink); text-align: left; font-size: 16px; }
#choices .choice-button::before { counter-increment: choice; content: counter(choice, cjk-decimal); position: absolute; left: 8px; top: 12px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; color: var(--paper); background: var(--seal); border-radius: 3px; }
#choices .choice-button:hover, #choices .choice-button:focus-visible { background: rgba(163, 48, 42, .06); }
#choices .choice-button:disabled { color: var(--soft-ink); }
#choices .choice-button:disabled::before { background: var(--soft-ink); }
#event-stage.battle-card #choices { grid-template-columns: 1fr; }
#event-stage.battle-card #choices .choice-button:first-child { grid-column: auto; }
#outcome-delta span { border-color: var(--rule); }
#next-year { background: var(--ink); color: var(--paper); border: 0; }

/* Mindset and policy fold into one line beneath the event. */
.intentions-fold { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.intentions-fold > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 13px; color: var(--soft-ink); list-style: none; }
.intentions-fold > summary::-webkit-details-marker { display: none; }
.intentions-fold > summary::after { content: '調整'; margin-left: auto; font-size: 12px; color: var(--seal); }
.intentions-fold[open] > summary::after { content: '收起'; }
.intentions-fold #life-intentions { padding-bottom: 12px; }

/* The year card: a page of the chronicle, set off by a seal-red rule. */
#annual-card { border: 0; border-top: 3px double var(--seal); border-radius: 0; background: transparent; }

/* Bottom tabs: quiet text, the current one marked by a seal-red line. */
.story-tabs { background: var(--paper); border-top: 1px solid var(--rule); }
.story-tabs [aria-current="page"] { background: transparent !important; color: var(--seal) !important; box-shadow: inset 0 2px 0 var(--seal); border-radius: 0 !important; }

/* 沙盤: the map is the board. Marks on each city say what the family has
   there; the chosen city's sheet sits right under the map; the rest folds. */
#pane-world .geographic-map { border: 0; border-radius: 0; margin: 0 -16px; background: transparent; }
#pane-world .geo-heading { padding: 4px 16px 0; }
#pane-world .geo-help { margin: 4px 16px 8px; }
#pane-world .geo-scroll { max-height: 62svh; border-block: 1px solid var(--rule); }
.geo-canvas .geo-city { display: inline-flex; align-items: center; gap: 4px; }
.geo-marks { display: inline-flex; gap: 2px; }
.geo-mark { font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 3px; border-radius: 3px; color: #fff9e9; background: #5f594b; }
.geo-mark-flag { background: var(--seal); }
.geo-mark-kin { background: #2f6b4f; }
.geo-mark-war { background: #1d1a15; }
.geo-mark-shop { background: #9a6a2b; }
.city-sheet { scroll-margin-top: 8px; padding-top: 4px; border-top: 3px double var(--seal); }
.city-sheet > .realm-card { border: 0; border-radius: 0; background: transparent; padding: 12px 0; margin: 0; }
.city-sheet > .realm-card + .realm-card, .city-sheet > .shop-row { border-top: 1px solid var(--rule); }
.city-sheet .realm-card h3 { font-size: 20px; }
.sandbox-fold { border-top: 1px solid var(--rule); }
.sandbox-fold:last-child { border-bottom: 1px solid var(--rule); }
.sandbox-fold > summary { min-height: 48px; display: flex; align-items: center; font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }
.sandbox-fold > summary::-webkit-details-marker { display: none; }
.sandbox-fold > summary::after { content: '展開'; margin-left: auto; font-size: 12px; font-weight: 400; color: var(--seal); }
.sandbox-fold[open] > summary::after { content: '收起'; }
.sandbox-fold > .realm-card { border: 0; background: transparent; padding: 0 0 12px; margin: 0; }
.sandbox-fold > .realm-card > h3:first-child { display: none; }
#pane-world .realm-actions button { border-color: var(--rule); }
.realm-amount { display: inline-flex; align-items: center; gap: 6px; grid-column: 1 / -1; font-size: 12px; }
.realm-amount input { width: 84px; min-height: 40px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; }
.realm-amount button { flex: 1; }

/* Away from 人生, the header shrinks to the portrait and name; on 天下 the
   board starts right under it. */
#game-screen:not([data-tab="life"]) #story-stats,
#game-screen:not([data-tab="life"]) .story-resources,
#game-screen:not([data-tab="life"]) .story-origin { display: none; }
#game-screen:not([data-tab="life"]) .hero-portrait { width: 40px; height: 40px; }
#pane-world > h2, #pane-world > p { display: none; }
#pane-world .geo-help { display: none; }
#event-stage.battle-card #choices .choice-button { padding: 12px 8px 12px 40px; }

/* 人生頁上方的生計捷徑列 */
#pane-life > .life-shortcuts { order: -3; }
.life-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.life-shortcuts button { flex: 1 1 auto; min-width: 64px; padding: 8px 10px; border: 1px solid var(--line, #c9b99a); border-radius: 6px; background: var(--paper, #f3ead8); color: inherit; font: inherit; font-size: .95rem; cursor: pointer; }
.life-shortcuts button:hover, .life-shortcuts button:focus-visible { background: #2b221b; color: #f3ead8; }