/* Shared visual language. Layout behavior and game rules live in their own modules. */
:root {
  --ui-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --reading-font: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --surface: #fafbf7;
  --surface-soft: #e3eae2;
  --ink: #283932;
  --muted: #67746f;
  --jade: #285e4b;
  --paper: #faf9f4;
  --line: #bcc7b8;
  --page-ground: #e6eae0;
  --header-ground: #293f38;
  --red: #a14635;
  --gold: #a98442;
  --action: #2e624b;
  --action-hover: #244e3a;
  --visit-ink: #953f31;
  --visit-surface: #f8ede7;
  --bronze-ink: #805b26;
  --bronze-surface: #faf3e7;
  --disabled-ink: #606963;
  --disabled-surface: #edf0ef;
}

body { font-family: var(--ui-font); background: var(--page-ground); color: var(--ink); }
body::before { display: none; }
button, select, input { font-family: var(--ui-font); letter-spacing: 0; }
button { touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #378166; outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
h1, h2, .scene-text, .npc-scene, .album-leaf-heading { font-family: var(--reading-font); }
.game-shell { max-width: 1480px; margin: auto; }
.topbar { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 8px 0 16px; }
.topbar::after { display: none; }
.title-lockup h1 { color: #243e32; font-size: 32px; line-height: 1.25; letter-spacing: 0; text-shadow: none; }
.title-lockup p { color: #68776c; font-size: 12px; }
.seal { width: 42px; border: 1px solid #e6cdb8; background: #984737; color: #fff7ef; box-shadow: none; }
.title-lockup:hover .seal { transform: none; box-shadow: none; }
.top-actions { gap: 4px; }
.top-actions button { min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #3b5145; box-shadow: none; font-size: 13px; }
.top-actions button:hover { color: #244e3c; background: #dce6dd; border-color: #b4c7b9; box-shadow: none; transform: none; }
.story-panel { border: 0; border-radius: 0; background: var(--surface); box-shadow: none; padding: 20px; }
.story-panel::before { display: none; }
.home-overview { margin: 0 0 14px; padding: 0 0 12px; border-color: var(--line); }
.home-stats { gap: 10px 24px; }
.home-stats .stat-row { gap: 7px; font-size: 13px; }
.stat-row::before { background: #d6ded8; }
.home-stats .stat-row b { font-size: 18px; font-weight: 650; color: #273a30; font-variant-numeric: tabular-nums; }
.home-stats .stat-rank { font-size: 11px; font-weight: 500; color: #6c7a70; }
.stat-label { color: #62716a; }
.home-stats .stat-help-trigger { appearance: none; min-width: 36px; min-height: 32px; padding: 4px 2px; margin: 0; border: 0; border-radius: 3px; background: transparent; color: #3b6556; box-shadow: none; font: inherit; text-decoration: underline dotted; text-underline-offset: 4px; cursor: pointer; }
.home-stats .stat-help-trigger:hover, .home-stats .stat-help-trigger:focus-visible { background: #e6eee8; color: #254c3d; transform: none; }
#statHelpDialog { scroll-padding-top: 64px; }
#statHelpDialog header { position: sticky; top: -18px; z-index: 1; background: #fcfdf8; padding-block: 8px; }
.stat-help-role { color: #66746b; margin: 0 0 10px; font-size: 13px; }
.stat-help-current { margin: 0; padding: 10px 0; border-block: 1px solid #d5dfd7; color: #315d49; font-size: 14px; line-height: 1.65; font-weight: 600; }
.stat-help-section { padding-top: 12px; }
.stat-help-section h3 { margin: 0 0 5px; font-size: 14px; color: #7a4936; }
.stat-help-section ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.stat-help-section li + li { margin-top: 5px; }
.home-statuses { border-color: var(--line); }
.home-statuses li { border: 0; border-radius: 3px; padding: 4px 6px; background: #faf1e8; color: #94652e; }
.home-statuses .empty-status { background: #edf3ee; color: #5a7465; }
.progression-summary { border-color: var(--line); }
.progression-summary > span { border: 0; padding: 0; }
.progression-summary b, .home-collection-goal b { font-size: 12px; color: #345542; }
.progression-summary small, .progression-summary em { color: #6b786f; }
.journey-strip { border-color: var(--line); }
.journey-strip button { color: #3d6452; font-size: 12px; }
.journey-strip button:last-child { color: #707454; }
.story-meta { border: 0; padding-bottom: 12px; }
.encounter-seal { border: 1px solid #bf8874; background: #f7eeea; color: #934c3a; box-shadow: none; transform: none; border-radius: 3px; }
.encounter-heading-copy small, .encounter-context small { color: #7a847c; }
.encounter-heading-copy strong { color: #2f4538; font-family: var(--reading-font); font-size: 21px; }
.difficulty-mark { border: 0; border-radius: 3px; background: #f4eee8; color: #925b35; }
.wind-mark { border: 0; padding-left: 8px; }
.wind-mark b { color: #70744f; font-size: 12px; }
.story-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.story-card::before, .story-card::after { display: none; }
.scene-scroll { border: 0; border-radius: 4px; box-shadow: none; background: #f5f7f3; }
.scene-narrative { background: #fafcf8; border-top: 1px solid #dce3d7; }
.scene-text { color: #2d3a31; }
.scene-text::first-letter { color: inherit; }
.scene-location-label { background: #234834e6; color: #f8fbf5; border: 0; border-radius: 2px; font-family: var(--ui-font); font-size: 11px; padding: 6px 9px; }
.scene-event-emblem { display: none; }
.choice-caption { color: #5c7062; margin-bottom: 8px; }
.choice-caption > i { background: var(--line); }
#approachQuickBtn, #growthSkillBtn { color: #58705f; font: 12px var(--ui-font); }
.choice-row { grid-template-columns: minmax(0, 1fr) 44px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.choices .choice-action { padding: 13px 12px; min-height: 76px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); }
.choices .choice-action:hover { border: 0; background: #f2f6f0; box-shadow: none; transform: none; }
.choices .choice-action:active { background: #e8f0e7; transform: none; }
.choices .choice-action:disabled { background: #f6f7f5; opacity: 1; color: #88908a; }
.choices .choice-action:disabled .choice-copy { opacity: .62; }
.choice-title { color: #263d30; font-weight: 600; font-size: 15px; line-height: 1.5; }
.choice-index { border: 0; border-radius: 50%; background: #a14635; color: #fff; font: 12px var(--ui-font); box-shadow: none; }
.choice-go { display: grid; place-items: center; color: #6c8372; }
.choice-go svg { width: 16px; height: 16px; }
.choice-hint { font-size: 12px; color: #78857b; }
.choice-terms { color: #68776d; font-size: 12px; line-height: 1.5; }
.choice-terms b { color: #51685a; font-weight: 500; }
.choice-loss { color: #8b674f; }
.choice-loss b { color: #8b674f; }
.choices .choice-detail { position: static; display: grid; place-items: center; align-self: stretch; width: 44px; min-width: 44px; height: 100%; min-height: 44px; padding: 0; border: 0; border-left: 1px solid var(--line); background: #edf1e8; color: #56705e; transform: none; box-shadow: none; }
.choices .choice-detail:hover { background: #edf3e9; color: #30593f; }
.choice-detail svg { width: 18px; height: 18px; }
.choice-risk { border: 0; background: #f0f3ed; color: #6b7c60; font-size: 10px; }
.result-panel:not([hidden]) { border: 0; border-top: 2px solid #597d64; border-radius: 0; background: #f7faf5; box-shadow: none; padding: 16px; }
.result-kicker { color: #52715c; font-size: 12px; }
#resultText { font-size: 14px; line-height: 1.85; }
#continueBtn, #resourceConfirmBtn, .shop-buy, .commission-submit, .exchange-action, .clean-action, #reliefBtn {
  min-height: 44px; border: 1px solid #2e624b; border-radius: 5px; background: #2e624b; color: #fff;
  box-shadow: none; font-family: var(--ui-font); font-size: 14px; font-weight: 600;
}
#continueBtn { min-height: 48px; font-size: 15px; }
#shopBuyRiverBtn { background: #2e624b; border-color: #2e624b; color: #fff; }
#shopBuyRiverBtn:hover:not(:disabled) { background: #244e3a; }
#shopBuyRiverBtn:disabled { background: #edf0eb; border-color: #dfe4da; color: #69736c; }
#continueBtn:hover, #resourceConfirmBtn:hover, .shop-buy:hover:not(:disabled), .exchange-action:hover:not(:disabled) { background: #244e3a; color: #fff; box-shadow: none; transform: none; }
.context-actions { padding-top: 10px; gap: 8px; }
.context-actions .growth-action { background: #edf3e9; border-color: transparent; color: #4b6b52; font-size: 12px; min-height: 44px; }
.growth-action, .package-shortcuts button, .route-action, .album-seek-action, .goal-links button {
  border: 1px solid #c7d4c8; border-radius: 5px; background: #f7faf4; color: #3a6247; box-shadow: none; min-height: 44px;
}
.growth-action:hover:not(:disabled), .package-shortcuts button:hover { background: #eaf1e5; }
.album-action.is-collect, #albumCoinContent .album-action.is-collect:not(:disabled) { background: #2e624b; color: #fff; border-color: #2e624b; box-shadow: none; }
.album-action.is-withdraw, #albumCoinContent .album-action.is-withdraw { background: #fcf3ee; color: #a04e3c; border-color: #ddbdad; box-shadow: none; }
.album-action:disabled, .exchange-action:disabled, .commission-submit:disabled, .shop-buy:disabled, .growth-action:disabled { opacity: 1; background: #edf0eb; color: #90988b; border-color: #dfe4da; box-shadow: none; }
.tool-overlay { background: #192f296b; backdrop-filter: none; }
.tool-panel { border: 1px solid #d0dcd2; border-radius: 8px; background: var(--surface); box-shadow: 0 18px 70px #1d392830; }
.tool-header { min-height: 68px; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--line); background: var(--header-ground); color: #fff; }
.tool-header h2 { color: #294a36; font-size: 22px; }
.tool-header > div > span { color: #d2d4bd; font-size: 11px; }
.icon-button, .dialog-close { display: grid; place-items: center; min-width: 44px; width: 44px; height: 44px; padding: 0; border: 1px solid #d7e0d3; border-radius: 50%; background: transparent; color: #5c7763; box-shadow: none; }
.tool-header .icon-button:hover, .dialog-close:hover { background: #edf3e8; }
.tool-scroll { scrollbar-width: thin; scrollbar-color: #c2cec1 transparent; }
.tool-panel :is(.package-notice, .package-shortcuts, .shop-purchase, .shop-sale-heading, .pawn-tools) { padding-inline: 18px; }
.package-notice { background: #f8f8f0; border: 0; font-size: 12px; line-height: 1.6; color: #7d785f; }
.package-notice > b { color: #a1844c; background: transparent; border-color: #d9ccb1; }
.collection-window-list { padding: 8px 18px 18px; }
.collection-window-list > li, .pawn-row { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.collection-window-list .coin-entry { padding: 14px 0; }
.collection-window-list .package-section { padding: 12px 0 6px; color: #7b8878; font-size: 11px; }
#packageList .coin-count { color: #60725e; font-variant-numeric: tabular-nums; }
.coin-info .coin-name { font-size: 14px; }
.package-detail-btn { border-color: transparent; background: #f4f7ef; color: #60785c; }
.album-action.compact-action { border-radius: 5px; min-height: 44px; padding: 6px 12px; }
.shop-section-heading { color: #73806f; }
.shop-section-heading h3 { font-size: 13px; color: #506749; }
.shop-product-copy strong { font-size: 16px; color: #354d31; }
.shop-purchase { padding-block: 14px; background: #f6f9f1; border-color: #dfe7d5; }
.shop-buy { min-width: 88px; }
.pawn-row { padding: 14px 0; gap: 10px; }
#pawnList .pawn-action { min-height: 44px; background: #faf6ee; color: #927042; border-color: #d7c6a6; border-radius: 5px; font: 13px var(--ui-font); box-shadow: none; }
.exchange-summary, .commission-summary, .route-summary, .album-panel .album-summary { background: #f4f7ef; color: #6a7b61; border-color: #dfe6d7; font-family: var(--ui-font); }
.exchange-list, .commission-list, .route-list { padding: 12px 18px 18px; }
.exchange-route, .commission-entry, .route-entry { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; padding: 16px 0; }
.exchange-route.is-ready, .commission-entry.is-ready { background: transparent; box-shadow: none; }
.exchange-progress > span { background: #e5eadc; height: 3px; }
.exchange-progress small { color: #738266; font-size: 12px; line-height: 1.6; }
.exchange-mini-coin { box-shadow: none; }
/* Scroll the list without compressing its rows below their contents. */
#exchangeList { display: block; }
#exchangeList .exchange-route { grid-template-columns: minmax(0, 1fr) 112px; gap: 18px; min-height: 0; }
#exchangeList .exchange-progress { grid-template-columns: minmax(0, 1fr); gap: 6px; }
#exchangeList .exchange-progress small { text-align: left; }
#exchangeList .exchange-controls { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
#exchangeList .exchange-controls .growth-toggle { min-height: 44px; justify-content: center; white-space: normal; }
#exchangeList .exchange-action { width: 100%; min-height: 44px; }
#growthExchangeFilter { min-height: 44px; }
@media (max-width: 820px), (max-width: 1000px) and (max-height: 500px) {
  #exchangeList .exchange-route { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #exchangeList .exchange-controls { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  #exchangeList .exchange-controls .growth-toggle { justify-content: flex-start; }
  #exchangeList .exchange-action { flex: 0 0 96px; width: 96px; }
  #exchangeList .exchange-node-copy .exchange-coin-name { font-size: 13px; line-height: 1.5; }
}
.commission-entry h3, .commission-name { color: #344e31; }
.growth-note, .commission-context { color: #76816b; font-size: 12px; }
.journal-window-list > li { border: 0; border-left: 2px solid #d5decb; border-radius: 0; background: transparent; box-shadow: none; padding: 10px 14px; }
.journal-window-list h3 { font-size: 13px; color: #49633e; }
.journal-window-list p { color: #697b5e; font-size: 13px; line-height: 1.8; }
.album-panel { background: #f8faf5; }
.album-views { border-color: #dee5d5; }
.album-views button { color: #76856b; }
.album-views button[aria-pressed="true"] { color: #365b34; border-bottom-color: #557b46; }
.album-dynasties button { background: #edf1e4; border-color: #d3dcc5; color: #718060; }
.album-dynasties button[aria-pressed="true"] { background: #3d5d38; border-color: #3d5d38; color: #f8faef; }
.album-book { background: #294f49; border-color: #23453f; box-shadow: inset 0 0 0 2px #ac9462, 0 4px 12px #45523412; }
.album-leaf { background: #fbfaf2; }
#albumList .coin-name { line-height: 1.35; font-weight: 600; }
.album-pagination { color: #768469; }
.album-pagination button { background: #f8faf3; border-color: #d4dec5; color: #557141; }
.experience-dialog, .album-coin-dialog { background: #fcfdf8; color: #31472d; border-color: #d4dec9; border-radius: 8px; box-shadow: 0 20px 70px #22371d30; }
dialog::backdrop { background: #1a302566; backdrop-filter: none; }
.experience-dialog header h2, .album-detail-header h2 { font-size: 21px; line-height: 1.5; }
.experience-toggle { min-height: 56px; border-color: #e0e6d6; }
.experience-field, .experience-toggle, .coin-sources { font-family: var(--ui-font); }
select { font-size: 13px; color: #49643b; }
.restart-setting { min-height: 44px; border-color: #ddc2b7; color: #9f5640; background: #fcf4ef; }
#resourceConfirmBtn { margin-top: 12px; min-height: 48px; }
.tool-panel .growth-section { border-color: #e0e6d7; }
.cleaning-panel, .travel-panel { box-shadow: 0 20px 80px #0b281733; }
.workshop-actions button { border-radius: 5px; }
@media (hover: none) {
  .choices .choice-action:hover { background: transparent; }
  .choices .choice-detail:hover { background: #edf1e8; }
}
@media (min-width: 821px) and (min-height: 501px) {
  .game-shell { gap: 0; padding-block: 18px; }
  .story-panel { padding: 20px 22px; }
  .story-card { gap: 24px; }
  .choice-area { padding: 0; }
}
@media (max-width: 820px), (max-width: 1000px) and (max-height: 500px) {
  body { background: var(--page-ground); }
  .game-shell { padding-top: env(safe-area-inset-top); }
  .topbar { min-height: 52px; padding: 4px 14px; background: #fff; border-bottom: 1px solid var(--line); }
  .title-lockup h1 { font-size: 21px; color: #314f30; }
  .title-lockup p { color: #66716c; font-size: 11px; }
  #mobileCommissionSlot button { color: #63804d; font-size: 12px; }
  #mobileCommissionSlot svg { width: 18px; height: 18px; }
  .story-panel { padding: 12px 14px 18px; background: var(--page-ground); }
  .home-overview { gap: 0; margin: 0 0 10px; padding: 0; }
  .home-stats { gap: 6px 16px; }
  .home-stats .stat-row { min-height: 26px; gap: 5px; }
  .home-stats .stat-row b { font-size: 17px; }
  .home-stats .stat-rank { font-size: 10px; color: #606f65; }
  .stat-label { font-size: 12px; }
  .home-collection-goal { border-bottom-color: var(--line); min-height: 44px; }
  .home-collection-goal b { font-size: 12px; font-weight: 500; }
  .home-collection-goal::after { color: #849772; }
  .journey-strip button { min-height: 44px; font-size: 11px; }
  .story-meta { padding-bottom: 8px; }
  .encounter-heading-copy strong { font-size: 19px; }
  .encounter-seal { width: 28px; height: 28px; font-size: 16px; }
  .difficulty-mark { padding: 4px 6px; }
  .difficulty-mark b { font-size: 12px; }
  .wind-mark b { font-size: 11px; }
  .scene-scroll { border-radius: 5px; }
  .scene-narrative, .story-card.has-result .scene-narrative { background: #fff; }
  .scene-text { font-size: 16px; line-height: 1.65; }
  #sceneExpandBtn { border-left: 1px solid #edf1e6; color: #758a61; font-size: 11px; }
  .choice-caption { min-height: 44px; margin: 2px 0 6px; }
  .choice-caption > span { color: #677d57; font-size: 12px; }
  #approachQuickBtn, #growthSkillBtn { min-height: 44px; min-width: 44px; padding-inline: 7px; font-size: 11px; }
  #approachQuickBtn small { font-size: 11px; }
  .choices { gap: 8px; }
  .choice-row { grid-template-columns: minmax(0, 1fr) 44px; border-color: #acbba7; }
  .choices .choice-action { grid-template-columns: 22px minmax(0, 1fr) 14px; gap: 7px; padding: 10px 9px; min-height: 72px; }
  .choice-title { font-size: 14px; }
  .choice-index { width: 22px; height: 22px; font-size: 11px; }
  .choice-terms { font-size: 11px; line-height: 1.6; }
  .choices .choice-detail { width: 44px; }
  .result-panel:not([hidden]) { padding: 14px; background: #fff; border: 1px solid #dbe5d1; border-top: 2px solid #748f61; border-radius: 5px; }
  #resultText { font-size: 14px; line-height: 1.85; }
  #mobileNav { background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -3px 12px #344b2410; }
  #mobileNav button { font-size: 11px; color: #66736b; gap: 5px; border-top: 2px solid transparent; }
  #mobileNav button svg { width: 21px; height: 21px; }
  #mobileNav [aria-current="page"] { color: #3d6531; background: #f0f5e9; border-top-color: #63864e; }
  .mobile-tool-page, .mobile-hub:not([hidden]), .mobile-tool-page .tool-panel { background: #fff; }
  .mobile-tool-page .tool-header, .mobile-page-header { background: var(--header-ground); border-bottom: 1px solid var(--line); min-height: 58px; padding: 6px 12px; }
  .mobile-tool-page .tool-header h2, .mobile-page-header h2 { color: #3a5a30; font-size: 21px; }
  .mobile-tool-page .tool-header .icon-button { color: #648153; }
  .mobile-menu-row { margin: 0 18px; border-color: #e0e7d5; }
  .mobile-menu-row button { color: #4c713a; font-size: 16px; min-height: 76px; }
  .mobile-menu-row button::after { color: #96a585; }
  .mobile-hub-art { height: 132px; }
  .mobile-tool-page .tool-panel :is(.package-notice, .package-shortcuts, .shop-purchase, .shop-sale-heading, .pawn-tools) { padding-inline: 14px; }
  #packageList { padding-inline: 14px; }
  #packageList .coin-entry { padding-block: 12px; }
  #packageList .coin-entry-actions .album-action { min-width: 60px; font-size: 12px; }
  #packageList .coin-count { font-size: 12px; }
  .package-shortcuts { border-color: #e2e8d8; }
  .package-shortcuts button { border-color: #dce5d1; font-size: 12px; }
  .exchange-list, .commission-list, .route-list { padding: 8px 14px 18px; }
  .exchange-route, .commission-entry, .route-entry { padding-block: 14px; }
  .exchange-summary, .commission-summary, .route-summary { font-size: 12px; padding: 10px 14px; }
  .mobile-tool-page .album-summary { padding: 10px 14px; background: #f0f5e8; }
  .album-views button { font-size: 12px; }
  .album-book { margin-inline: 10px; }
  .album-leaf { padding-inline: 10px; }
  dialog.experience-dialog, dialog.album-coin-dialog { background: #fcfdf8; padding: 16px 18px max(18px, env(safe-area-inset-bottom)); }
  .album-coin-dialog .album-detail-header { background: #fcfdf8; }
  #albumCoinContent .album-actions button { min-height: 48px; font-size: 14px; }
  .album-detail-count { font-size: 13px; color: #72845f; }
  .album-detail-note { color: #687361; border-color: #e0e7d4; }
  .cleaning-close { color: #e2d5a8; border-color: #8b9066; }
}

/* Color communicates action priority; rarity and result colors remain independent. */
.stat-label, .choice-caption, .choice-hint, .choice-terms,
.growth-note, .commission-context, .commission-identity small,
.commission-copy small, .shop-section-heading, .album-detail-note {
  color: #606d67;
}
.tool-header, .mobile-tool-page .tool-header, .mobile-page-header { border-bottom-color: #ad945e; }
.tool-header h2, .mobile-tool-page .tool-header h2, .mobile-page-header h2 { color: #f6f1df; }
.title-lockup h1 { color: #293f38; }
.encounter-seal { background: #a14635; color: #fff8ee; border-color: #a14635; }
.scene-narrative, .scene-text { color: #303d32; }
.choice-caption > span, .result-kicker { color: #875c31; }
.album-leaf { background: #faf8ee; }
.album-dynasties button[aria-pressed="true"] { background: #294f49; border-color: #294f49; }
.album-views button[aria-pressed="true"] { color: #294f49; border-bottom-color: #a14635; }
.tool-header .icon-button, .mobile-tool-page .tool-header .icon-button, .mobile-page-header .icon-button { color: #fff; border-color: #8b9b80; }
.tool-header .icon-button:hover, .mobile-page-header .icon-button:hover { background: #3d594b; }
.shop-product-copy strong, .commission-entry h3, .commission-name {
  color: var(--ink);
}
.exchange-summary, .commission-summary, .route-summary,
.album-panel .album-summary, .mobile-tool-page .album-summary {
  background: var(--surface-soft); color: #5b6962; border-color: var(--line);
}
.growth-action, .package-shortcuts button, .package-detail-btn {
  background: #f6f8f7; border-color: #cbd5d0; color: #40574c;
}
.npc-journey-row .growth-action {
  min-width: 72px; font-weight: 600;
  color: var(--visit-ink); background: var(--visit-surface); border-color: #d5b3a3;
}
.npc-journey-row .growth-action:hover:not(:disabled) { background: #f0ded4; border-color: #b87861; }
.npc-journey-row.has-appointment .growth-action {
  color: var(--bronze-ink); background: var(--bronze-surface); border-color: #cdb385;
}
.npc-journey-row.has-appointment .growth-action:hover:not(:disabled) { background: #f1e4cb; }
.commission-primary, .commission-submit {
  min-height: 44px; padding: 9px 14px;
  background: var(--action); border: 1px solid var(--action); color: #fff; font-weight: 600;
}
.commission-primary:hover:not(:disabled), .commission-submit:hover:not(:disabled) {
  background: var(--action-hover); border-color: var(--action-hover); color: #fff;
}
.commission-primary:active:not(:disabled), .commission-submit:active:not(:disabled) { background: #1e4131; }
.commission-entry > header > em { color: #6a665d; background: #f4f3f0; border-color: #dad7d0; }
.commission-entry.is-ready > header > em { color: var(--action); background: #eaf3ee; border-color: #a8c9b7; }
.commission-request { color: #59665f; }
.commission-request > strong { color: #766343; }
.commission-entry.is-ready .commission-request > strong { color: var(--action); }
.commission-rewards b { color: var(--bronze-ink); background: var(--bronze-surface); border-color: #e2d3b5; }
.commission-progress { background: #e6eae7; }
.commission-progress i { background: #a78b5c; }
.commission-entry.is-ready .commission-progress i { background: var(--action); }
.initiation-complete { color: #54665b; padding: 8px 10px; background: #f0f4f1; border-left: 2px solid #9eb4a5; }
.album-action:disabled, #albumCoinContent .album-action:disabled,
.exchange-action:disabled, .commission-submit:disabled, .growth-action:disabled,
.shop-buy:disabled, #shopBuyRiverBtn:disabled, #pawnList .pawn-action:disabled {
  color: var(--disabled-ink); background: var(--disabled-surface); border-color: #d5dbd8;
  opacity: 1; box-shadow: none; cursor: not-allowed;
}

.npc-journeys { background: #edf1e8; }
.npc-journey-row { border-color: #bccab9; }
.npc-journey-row:last-child { border-bottom: 0; }
.npc-journeys > h3, .commission-list-heading {
  padding-left: 9px; border-left: 3px solid #56705e; color: #354d3f;
  font-size: 14px; line-height: 1.5;
}
.commission-list-heading { margin: 16px 0 0; }
.commission-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.commission-tools .growth-action { font-size: 12px; min-height: 44px; }
.npc-journeys > h3 { border-left-color: #a14635; }
#commissionList { padding-top: 0; }
#commissionList .initiation-task {
  margin-inline: -18px; padding: 14px 18px;
  background: #f5efdf; border-top: 1px solid #c9b787; border-bottom: 1px solid #c9b787;
}
#commissionList .initiation-task h3 { color: #765329; }
.commission-entry.is-ready { border-bottom-color: #8fb09f; }
.collection-window-list .package-section { color: #354d3f; border-bottom: 2px solid #8ba086; }
.shop-sale-heading { background: var(--surface-soft); border-top: 1px solid var(--line); }
#commissionOpenBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 44px; width: 112px; flex-shrink: 0; padding: 0 10px;
  border: 1px solid #bd8068; border-radius: 5px;
  background: #f8ede7; color: #953f31; font-size: 13px; font-weight: 600;
  box-shadow: none;
}
#mobileCommissionSlot #commissionOpenBtn { color: #953f31; font-size: 13px; }
#commissionOpenBtn[data-ready="true"], #mobileCommissionSlot #commissionOpenBtn[data-ready="true"] {
  background: #a14635; border-color: #a14635; color: #fff8ee;
}
#commissionOpenBtn::after, #commissionOpenBtn[data-ready="true"]::after {
  content: attr(data-ready-count); position: static; display: grid; place-items: center;
  width: 20px; height: 20px; flex-shrink: 0; border: 0; border-radius: 50%;
  background: #fff3db; color: #873b2c; box-shadow: none;
  font: 700 11px var(--ui-font); visibility: hidden;
}
#commissionOpenBtn[data-ready="true"]::after { visibility: visible; }
#commissionOpenBtn:hover { background: #f0ded4; border-color: #a14635; transform: none; }
#commissionOpenBtn[data-ready="true"]:hover { background: #873b2c; }
#commissionOpenBtn:active { box-shadow: inset 0 0 0 2px #873b2c30; }
.collection-goal-detail { padding: 10px 0 14px; border-block: 1px solid var(--line); margin-bottom: 12px; }
.collection-goal-detail h3 { margin: 0 0 6px; font-size: 17px; }
.collection-goal-detail progress { display: block; width: 100%; height: 7px; margin: 10px 0; accent-color: #497867; }
.collection-goal-actions, .collection-goal-stages, .commission-reward-picker { display: grid; gap: 8px; margin: 10px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.collection-goal-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.collection-goal-actions button, .collection-goal-stages button, .commission-reward-picker button { min-width: 0; min-height: 44px; white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; padding: 7px; }
.commission-reward-picker .growth-action[aria-pressed="true"], .commission-reward-picker .growth-action[aria-pressed="true"]:hover:not(:disabled) { color: #fff; background: #376857; border-color: #376857; box-shadow: inset 0 -3px #244b3e; }
.experience-field.collection-goal-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.collection-goal-picker select { width: 100%; min-width: 0; }
.home-stats .stat-row[data-stat="quanLuck"] { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 5px; }
.quan-luck-bonus { margin-left: auto; color: #376857; font-size: 11px; white-space: nowrap; }
.cleaning-item-info { display: grid; gap: 4px; min-width: 0; }
.cleaning-item-info .growth-note { margin: 0; font-size: 11px; line-height: 1.5; white-space: normal; }
.commission-reward-alternative { display: block; color: #6b5140; font-size: 11px; }
.home-collection-goal.has-coin-goal b { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 820px), (max-width: 1000px) and (max-height: 500px) {
  .home-collection-goal.has-coin-goal { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 2px 6px; padding-block: 6px; }
  .home-collection-goal.has-coin-goal small { display: none; }
  .home-collection-goal.has-coin-goal b, .home-collection-goal.has-coin-goal em { grid-column: 1; }
  .home-collection-goal.has-coin-goal em { display: block; font-size: 10px; line-height: 1.4; white-space: normal; }
  .home-collection-goal.has-coin-goal::after { grid-column: 2; grid-row: 1 / 3; }
  .home-overview { background: #fff; margin: -12px -14px 10px; padding: 10px 14px 0; border-bottom: 1px solid var(--line); }
  .home-collection-goal { border-bottom: 0; background: #fff; }
  .topbar, .home-overview, .home-collection-goal, #mobileNav { background: #fafbf7; }
  #mobileNav [aria-current="page"] { color: #a14635; border-top-color: #a14635; background: #f6eee5; }
  #commissionList .initiation-task { margin-inline: -14px; padding-inline: 14px; }
}