@charset "UTF-8";
/* A completed home recipe becomes one illustrated board. Its artwork and
   frame corners retain their proportions over the continuous forest. */
#app .game-shell[data-page="camp"] .camp-mastered-board {
  position: absolute; z-index: 3; isolation: isolate; bottom: 3px; left: 4px; right: 4px;
  padding: 10px 13px 12px; color: #5b4025;
}
#app .game-shell[data-page="camp"] .camp-mastered-board > .paper-frame-skin { --paper-frame-scale: .09; }
#app .game-shell[data-page="camp"] .camp-mastered-heading {
  display: flex; gap: 8px; align-items: center; min-width: 0; margin-bottom: 5px;
}
#app .game-shell[data-page="camp"] .camp-mastered-art { width: 42px; height: 47px; flex: 0 0 42px; object-fit: contain; }
#app .game-shell[data-page="camp"] .camp-mastered-heading > div { flex: 1; min-width: 0; }
#app .game-shell[data-page="camp"] .camp-mastered-heading h2 { font-size: 16px; line-height: 1.3; margin: 0 0 2px; }
#app .game-shell[data-page="camp"] .camp-mastered-heading h2 > span { color: #426b31; }
#app .game-shell[data-page="camp"] .camp-mastered-heading p { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; margin: 0; font-size: 10px; line-height: 1.5; }
#app .game-shell[data-page="camp"] .camp-mastered-heading p .ui-icon { width: 17px; height: 18px; object-fit: contain; }
#app .game-shell[data-page="camp"] .camp-mastered-heading p b { color: #426b31; font-size: 12px; }
#app .game-shell[data-page="camp"] .camp-mastered-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
#app .game-shell[data-page="camp"] .camp-mastered-actions .button { min-width: 0; min-height: 48px; margin: 0; padding: 4px 10px !important; color: #fff0cd; text-shadow: 0 1px #402b18; }
#app .game-shell[data-page="camp"] .camp-mastered-actions .button-label { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; }
#app .game-shell[data-page="camp"] .camp-mastered-actions .ui-icon { width: 27px; height: 29px; flex: 0 0 27px; object-fit: contain; }
#app .game-shell[data-page="camp"] .camp-mastered-actions small { display: block; color: #ead7af; font-size: 10px; font-weight: 400; line-height: 1.4; }
@container (max-width: 340px) {
  #app .game-shell[data-page="camp"] .camp-mastered-heading { gap: 5px; }
  #app .game-shell[data-page="camp"] .camp-mastered-heading h2 { font-size: 15px; }
  #app .game-shell[data-page="camp"] .camp-mastered-art { width: 35px; flex-basis: 35px; }
  #app .game-shell[data-page="camp"] .camp-mastered-actions { gap: 4px; }
  #app .game-shell[data-page="camp"] .camp-mastered-actions .button-label { gap: 3px; font-size: 12px; }
  #app .game-shell[data-page="camp"] .camp-mastered-actions .ui-icon { width: 22px; flex-basis: 22px; }
}
/* Match the reference's illustrated controls at phone size. Only the plain
   paper and wood rails stretch; every icon and character keeps its ratio. */
#app .game-shell[data-page] { container-type: inline-size; }
#app .game-shell[data-page] .topbar {
  padding: 3px 4px; border-bottom: 2px solid #c69b54;
}
#app .game-shell[data-page] .brand-row { display: none; }
#app .game-shell[data-page] .wallet { margin-right: 0; gap: 2px; }
#app .game-shell[data-page] .wallet-chip { gap: 4px; font-size: 10px; }
#app .game-shell[data-page] .wallet-chip b { font-size: 14px; line-height: 1.2; }
#app .game-shell[data-page] .wallet .resource-icon { flex-basis: 21px; width: 21px; height: 26px; }
#app .game-shell[data-page] .bottom-nav {
  flex-basis: 68px; height: 68px; min-height: 68px;
  gap: 3px; padding: 4px 5px 5px;
  box-shadow: inset 0 2px #c6a064, inset 0 -3px #20180e, 0 -2px #25361e;
}
#app .game-shell[data-page] .bottom-nav .nav-item {
  height: 58px; min-height: 58px; grid-template-rows: 30px 14px;
  border-width: 7px 8px; border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch;
  background: #ead4a8; background-clip: padding-box;
  color: #51391f; text-shadow: 0 1px #fff4ce;
}
#app .game-shell[data-page] .bottom-nav .nav-item .nav-art { width: 31px; height: 30px; max-height: 30px; }
#app .game-shell[data-page] .bottom-nav .nav-item b { font-size: 12px; line-height: 14px; letter-spacing: 0; }
#app .game-shell[data-page] .bottom-nav .nav-item.active {
  color: #3d3219; background-color: #f6d16b;
  filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: inset 0 0 0 2px #e8b74a, 0 2px #c3913f;
}
#app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure {
  border-image: url(../assets/ui/button-depart-gold-footprints.png) 62 78 62 165 fill stretch;
  border-width: 10px 9px 10px 29px; background: #edc262; background-clip: padding-box;
}
#app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure b { font-size: 15px; line-height: 1.2; }
#app .game-shell[data-page="camp"] .mother-scene-heading {
  top: 5px; left: 50%; transform: translateX(-50%);
  width: 148px; max-width: 48%; padding: 3px 5px;
  border-width: 7px 10px;
  filter: drop-shadow(0 2px 0 #322515);
}
#app .game-shell[data-page="camp"] .mother-scene-heading h1 {
  color: #ffe093; font-size: 27px; line-height: 1.15; font-weight: 900;
  -webkit-text-stroke: 1px #6c3f1e; paint-order: stroke fill;
  text-shadow: 0 2px #5e381c, 1px 0 #5e381c, -1px 0 #5e381c;
}
#app .game-shell[data-page="camp"] .mother-scene-heading p { font-size: 10px; letter-spacing: 2px; line-height: 1.3; }
#app .game-shell[data-page="camp"] .camp-journal-shortcut { top: 63px; width: 91px; }
#app .game-shell[data-page="camp"] > .offline-notice { top: 174px; width: 83px; left: 6px; right: auto; }
#app .game-shell[data-page="camp"] .camp-upgrade-compact { border-image: url(../assets/ui/ui-camp-goal-board.png) 150 135 110 145 fill stretch !important; }
#app .game-shell[data-page="camp"] .mother-workshop-sign { top: 30%; right: 3px; }

/* Keep the forest visible behind the whole scroll, rather than ending in a
   flat green block after the first illustration. The image uses cover. */
#app .game-shell[data-page="adventure"] .screen-scroll {
  background: linear-gradient(#173b2b22,#173b2b66), url(../assets/environments/scene-expedition-mother-v2.png) center / cover no-repeat;
}
#app .game-shell[data-page="adventure"][data-region="spring-woods"] .screen-scroll {
  background-image: linear-gradient(#173b2b22,#173b2b66), url(../assets/environments/scene-spring-valley-portrait-v1.png);
}
#app .game-shell[data-page="adventure"] .mother-adventure { background: none; gap: 7px; }
#app .game-shell[data-page="adventure"] .dispatch-lineup {
  display: flex; align-items: center; gap: 5px; min-height: 74px;
  border: solid transparent; border-width: 8px 10px;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch;
  background: #f5e7c6; background-clip: padding-box;
}
#app .game-shell[data-page="adventure"] .dispatch-lineup-animals { flex: 1; display: flex; gap: 9px; min-width: 0; }
#app .game-shell[data-page="adventure"] .dispatch-lineup-animals > div { display: flex; gap: 3px; align-items: center; min-width: 0; }
#app .game-shell[data-page="adventure"] .lineup-animal { display: block; width: 41px; height: 55px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .dispatch-lineup-animals b { display: block; font-size: 13px; }
#app .game-shell[data-page="adventure"] .dispatch-lineup-animals small { display: block; font-size: 10px; line-height: 1.4; white-space: nowrap; }
#app .game-shell[data-page="adventure"] .lineup-adjust {
  flex: 0 0 70px; min-width: 70px; min-height: 44px; padding: 3px;
  color: #fff0cd; text-shadow: 0 1px #493019; font-size: 11px;
}
#app .game-shell[data-page="adventure"] .lineup-empty { font-size: 12px; color: #8b5f35; }
#app .game-shell[data-page="adventure"] .mother-advanced:not([open]),
#app .game-shell[data-page="adventure"] .dispatch-companions:not([open]) {
  margin: 0; padding: 0 6px !important; border: solid transparent; border-width: 6px 8px !important;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 62 78 62 78 fill stretch !important;
  border-radius: 0; background: #674526; background-clip: padding-box;
}
#app .game-shell[data-page="adventure"] :is(.mother-advanced,.dispatch-companions):not([open]) > summary {
  min-height: 44px; padding: 5px 0; display: flex; align-items: center;
  color: #fff0ca; text-shadow: 0 1px #402513; font-size: 12px; line-height: 1.4;
  list-style: none;
}
#app .game-shell[data-page="adventure"] .mother-advanced:not([open]) > summary::before,
#app .game-shell[data-page="adventure"] .dispatch-companions:not([open]) > summary::before {
  content: ""; flex: 0 0 27px; width: 27px; height: 31px; margin-right: 9px;
  background: url(../assets/ui/nav-map-scroll.png) center / contain no-repeat; image-rendering: pixelated;
}
#app .game-shell[data-page="adventure"] [data-ui-key="dispatch-advanced-options"]:not([open]) > summary::before { background-image: url(../assets/ui/icon-capacity-crate.png); }
#app .game-shell[data-page="adventure"] [data-ui-key="dispatch-supply-options"]:not([open]) > summary::before { background-image: url(../assets/ui/nav-material-chest.png); }
#app .game-shell[data-page="adventure"] .dispatch-companions:not([open]) > summary::before { background-image: url(../assets/ui/nav-companion-paw.png); }
#app .game-shell[data-page="growth"] .mother-growth > .tab-strip .pill { white-space: normal; text-align: center; }
#app .game-shell[data-page="growth"] .mother-growth-board { grid-template-columns: 112px minmax(0,1fr); }
#app .game-shell[data-page="growth"] .mother-growth-board .mother-board-art { height: 200px; min-height: 0; align-self: start; }
#app .game-shell[data-page="growth"] .mother-growth-board .mother-board-art > img { object-position: center 12px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-art { height: 220px; }
@container (min-width: 410px) {
  #app .game-shell[data-page="growth"] .mother-growth-board { grid-template-columns: 138px minmax(0,1fr); }
}
@container (max-width: 380px) {
  #app .game-shell[data-page="camp"] .mother-camp-overview > .camp-upgrade-compact {
    gap: 4px; border-width: 27px 22px 20px 24px !important; padding: 0 2px !important;
  }
  #app .game-shell[data-page="camp"] .camp-upgrade-compact h2 { margin: 0; font-size: 15px; line-height: 1.3; color: #573b21; }
  #app .game-shell[data-page="camp"] .camp-output-line {
    font-size: 11px; line-height: 1.3; display: flex; gap: 3px; align-items: baseline; flex-wrap: wrap;
  }
  #app .game-shell[data-page="camp"] .camp-output-line > span { margin-left: 5px; }
  #app .game-shell[data-page="camp"] .camp-output-line b { color: #38652c; font-size: 13px; }
  #app .game-shell[data-page="camp"] .camp-cost-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 3px 0; border-bottom: 1px solid #c9ad75; }
  #app .game-shell[data-page="camp"] .camp-cost-columns > article + article { border-left: 1px solid #c9ad75; padding-left: 8px; }
  #app .game-shell[data-page="camp"] .camp-cost-columns h3 { font-size: 11px; margin: 0 0 2px; line-height: 1.3; color: #7b5a34; }
  #app .game-shell[data-page="camp"] .camp-cost-columns .resource-list { display: flex; flex-wrap: wrap; gap: 2px 8px; }
  #app .game-shell[data-page="camp"] .camp-current-cost { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-block: 1px solid #c9ad75; }
  #app .game-shell[data-page="camp"] .camp-current-cost > span { font-size: 11px; white-space: nowrap; color: #7b5a34; }
  #app .game-shell[data-page="camp"] .camp-current-cost .resource-list { display: flex; flex-wrap: wrap; gap: 3px 8px; }
  #app .game-shell[data-page="camp"] .camp-upgrade-compact .resource-value > span { font-size: 0; }
  #app .game-shell[data-page="camp"] .camp-upgrade-compact .resource-value b { font-size: 13px; }
  #app .game-shell[data-page="camp"] :is(.camp-current-gap,.camp-next-gap) { font-size: 11px; line-height: 1.3; margin: 0; }
  #app .game-shell[data-page="camp"] .camp-current-gap { color: #9a3f22; }
  #app .game-shell[data-page="camp"] .camp-next-gap { color: #826640; }
  #app .game-shell[data-page="camp"] .camp-balance-inline { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; font-size: 11px; }
}
@container (max-width: 340px) {
  #app .game-shell[data-page] .wallet-chip { gap: 2px; font-size: 10px; }
  #app .game-shell[data-page] .wallet-chip b { font-size: 13px; }
  #app .game-shell[data-page] .wallet .resource-icon { flex-basis: 18px; width: 18px; height: 24px; }
  #app .game-shell[data-page="camp"] .mother-camp-scene { background-position: center 90%; }
  #app .game-shell[data-page="camp"] .mother-workshop-sign { top: 27%; width: 111px; }
  #app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure { border-left-width: 24px; border-right-width: 8px; }
  #app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure b { font-size: 13px; }
  #app .game-shell[data-page="growth"] .mother-growth-board { grid-template-columns: 104px minmax(0,1fr); }
  #app .game-shell[data-page="growth"] .mother-board-content .mother-columns,
  #app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content { grid-template-columns: minmax(0,1fr); row-gap: 7px; }
  #app .game-shell[data-page="growth"] .mother-board-content .mother-upgrade-cost > .resource-list,
  #app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .resource-list { flex-direction: row; flex-wrap: wrap; gap: 3px 7px; }
  #app .game-shell[data-page="adventure"] .dispatch-lineup-animals { gap: 4px; }
  #app .game-shell[data-page="adventure"] .lineup-animal { width: 33px; height: 49px; }
}

/* Keep the gold action below the animals, above the production ledger.
   Render-time source windows discard transparent padding without resampling
   the PNG; only the empty middle wood stretches horizontally. */
#app .game-shell[data-page="tap"] .mother-tap > .offline-notice {
  position: absolute; z-index: 6; top: 6px; right: 6px; width: 83px;
  display: flex; flex-direction: column; gap: 0; padding: 0;
  border: solid transparent; border-width: 5px 7px;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch;
  background: none; color: #614626; font-size: 0; line-height: 1.3;
  text-align: center; filter: drop-shadow(0 2px 1px #19332388);
}
#app .game-shell[data-page="tap"] .mother-tap > .offline-notice .text-button {
  width: 100%; min-height: 44px; padding: 2px; font-size: 11px;
}
#app .game-shell[data-page="tap"] .mother-tap { --scene-height: clamp(216px,66.6667cqw,290px); position: relative; gap: 8px; }
#app .game-shell[data-page="tap"] .mother-tap-scene { height: var(--scene-height); }
#app .game-shell[data-page="tap"] .mother-tap-button {
  --tap-skin-height: 56px;
  position: relative; inset: auto; z-index: 5; align-self: center;
  width: min(78cqw,274px); height: var(--tap-skin-height); min-height: var(--tap-skin-height);
  flex: none; margin: 0 auto; font-size: 21px; line-height: 1.2;
  transform: none;
  border: 0 !important; border-image: none !important; padding: 0 18px 0 53px !important;
  background: none !important; box-shadow: none;
}
#app .game-shell[data-page="tap"] .mother-tap-button::before { content: none !important; }
#app .game-shell[data-page="tap"] .mother-tap-button:active { transform: translateY(2px); }
#app .game-shell[data-page="tap"] .tap-button-skin {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: calc(var(--tap-skin-height) * 146 / 165) minmax(0,1fr) calc(var(--tap-skin-height) * 56 / 165);
  pointer-events: none;
}
#app .game-shell[data-page="tap"] .tap-button-skin > svg { width: 100%; height: 100%; overflow: hidden; image-rendering: pixelated; }
#app .game-shell[data-page="tap"] .mother-tap-button .button-label { pointer-events: none; }
#app .game-shell[data-page="tap"] .mother-acorn-target.tap-target { top: 40%; }
#app .game-shell[data-page="tap"] .mother-tap-info {
  display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 6px 10px;
  height: auto; min-height: 0; margin: 0 7px; overflow: visible;
  border: solid transparent !important; border-width: 16px 14px !important;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch !important;
  padding: 3px 5px 5px !important; background: #f6e6bf; background-clip: padding-box;
  box-shadow: 0 3px #26351d;
}
#app .game-shell[data-page="tap"] .mother-tap-workshop { grid-column: 1; grid-row: 1 / 3; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#app .game-shell[data-page="tap"] .mother-tap-workshop > img { width: 78px; height: 92px; object-fit: contain; }
#app .game-shell[data-page="tap"] .mother-tap-level { position: static; width: auto; color: #57391f; text-shadow: 0 1px #fff6d9; font-size: 12px; white-space: nowrap; }
#app .game-shell[data-page="tap"] .mother-tap-metrics { grid-column: 2; grid-row: 1; grid-template-columns: 1fr 1fr; align-content: center; gap: 8px; padding: 0; border: 0; background: none; }
#app .game-shell[data-page="tap"] .mother-tap-metrics > div { display: flex; flex-direction: column; align-items: start; gap: 3px; padding: 0; }
#app .game-shell[data-page="tap"] .mother-tap-metrics > div + div { border-left: 1px solid #c5a264; padding-left: 8px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics span { flex-basis: auto; font-size: 11px; color: #75532f; }
#app .game-shell[data-page="tap"] .mother-tap-metrics b { font-size: 19px; color: #3a622c; line-height: 1.1; white-space: nowrap; }
#app .game-shell[data-page="tap"] .mother-tap-metrics small { font-size: 10px; white-space: nowrap; }
#app .game-shell[data-page="tap"] .mother-combo { grid-column: 2; grid-row: 2; margin-top: 0; padding-top: 5px; border-top: 1px solid #c5a264; }
#app .game-shell[data-page="tap"] .mother-combo :is(b,span,p) { font-size: 11px; line-height: 1.4; }
#app .game-shell[data-page="tap"] .mother-combo-segments { height: 20px; margin: 5px 0; padding: 0; gap: 3px; background: none; align-items: stretch; }
#app .game-shell[data-page="tap"] .mother-combo-segments > i { height: 20px; min-height: 20px; border: 2px solid #795332; border-radius: 2px; background: #8d6846; box-shadow: inset 0 2px #b48b5e,0 1px #fff3ca; }
#app .game-shell[data-page="tap"] .mother-combo-segments > i.is-filled { border-color: #a36b26; background: linear-gradient(#ffe68c,#edb03d); box-shadow: inset 0 2px #fff4bf,0 1px #84552b; }
#app .game-shell[data-page="tap"] .mother-tap-note { order: initial; margin: 0 7px; width: auto; padding: 6px 8px; }
#app .game-shell[data-page="tap"] .mother-tap-info > .mother-tap-note {
  grid-column: 1 / -1; margin: 0; width: auto; padding: 5px 0 0;
  border: 0; border-top: 1px solid #c5a264; background: none;
  font-size: 10px; line-height: 1.4; color: #75532f;
}
#app .game-shell[data-page="tap"] .mother-upgrade-split { order: initial; grid-template-columns: minmax(0,1fr); margin: 0 7px; gap: 12px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split h2 { font-size: 17px; margin-bottom: 8px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split h3 { font-size: 12px; margin-bottom: 5px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split .mother-columns { gap: 12px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split :is(.resource-value,.stat-row,.mother-payment,.mother-next-shortfall,.deficit,.sufficient) { font-size: 11px; line-height: 1.5; }
#app .game-shell[data-page="tap"] .mother-upgrade-split :is(.resource-value b,.stat-row b) { font-size: 15px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split .resource-icon { width: 18px; height: 21px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split .stat-row small { font-size: 10px; white-space: nowrap; }
#app .game-shell[data-page="tap"] .mother-next-upgrade { border-left: 0; border-top: 2px solid #c5a264; padding: 10px 0 0; }
#app .game-shell[data-page="tap"] .mother-next-upgrade > .resource-list { gap: 6px 10px; }

#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .screen-scroll { scrollbar-width: none; background: #ead7ad; }
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .scene-shell { height: 58cqw; min-height: 180px; max-height: 250px; border-bottom: 3px solid #674b30; }
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .scene-heading {
  top: 8px; left: 50%; right: auto; transform: translateX(-50%); width: 190px;
  padding: 4px 5px; text-align: center;
  border: solid transparent; border-width: 9px 12px;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 62 78 62 78 fill stretch;
  background: #674526; background-clip: padding-box;
}
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .scene-heading .eyebrow { display: none; }
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .scene-heading h1 { font-size: 24px; line-height: 1.15; color: #ffe3a0; margin: 0 0 3px; text-shadow: 0 2px #55351d; }
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .scene-heading p { font-size: 10px; line-height: 1.4; margin: 0; white-space: nowrap; }
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .screen-content { padding: 10px 12px 20px; }
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .section-title { margin: 2px 0 10px; }
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .section-title h2 { font-size: 17px; }
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .animal-card { padding: 8px 3px; gap: 1px; }
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .animal-card > small { font-size: 10px; }
@container (max-width: 340px) {
  #app .game-shell[data-page="tap"] .mother-tap-info { grid-template-columns: 74px minmax(0,1fr); gap: 5px 7px; margin-inline: 5px; padding-inline: 2px !important; }
  #app .game-shell[data-page="tap"] .mother-tap-workshop > img { width: 74px; height: 76px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics { gap: 5px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics b { font-size: 17px; }
}

/* The return reference gives the reward illustrations and claim action the
   first view. Longer upgrade forecasts remain readable in the same scroll. */
#modal-root { container-type: inline-size; }
#modal-root .mother-offline-modal.modal {
  display: flex; flex-direction: column; height: calc(100% - 12px); max-height: calc(100% - 12px); overflow: hidden;
  scrollbar-width: none;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 180 160 180 160 stretch;
  border-width: 12px 10px;
  background: #203c29 url(../assets/environments/scene-night-mother-v2.png) center bottom / auto 200% no-repeat;
}
#modal-root .mother-offline-modal > .modal-body {
  --offline-forest-offset: calc(100px - 78cqw);
  display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; gap: 8px; padding-bottom: 8px;
  background: none;
}
#modal-root .mother-offline-scroll {
  display: flex; flex-direction: column; flex: 1 1 0; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  gap: 8px; padding-bottom: 8px;
}
#modal-root .mother-offline-scroll::-webkit-scrollbar { display: none; }
#modal-root .mother-offline-scroll > * { flex-shrink: 0; }
#modal-root .mother-offline-action-dock {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px;
  flex: none; padding: 7px 3px 2px; border-top: 1px solid #a88750; background: #f0e2bf;
}
#modal-root .modal.mother-offline-modal .mother-offline-action-dock > button.button.illustrated-button:is(.mother-offline-claim,.mother-offline-growth) {
  --offline-action-height: 44px;
  position: relative; isolation: isolate; width: 100%; min-width: 0;
  height: 52px; min-height: 52px; margin: 0; grid-row: 1; grid-column: auto;
  border: 0 !important; border-image: none !important; background: none !important; box-shadow: none;
  font-size: var(--offline-action-font,13px); line-height: 17px;
  padding: 3px var(--offline-action-right,calc(44px * 218 / 660 + 3px)) 3px var(--offline-action-left,calc(44px * 650 / 660 + 3px)) !important;
}
#modal-root .mother-offline-action-dock > button.mother-offline-growth.illustrated-button {
  --offline-action-left: calc(44px * 150 / 165 + 3px);
  --offline-action-right: calc(44px * 54 / 165 + 3px);
  --offline-action-font: 12px;
}
#modal-root .mother-offline-action-dock > button.illustrated-button > .illustrated-button-skin {
  inset: auto 0; top: 50%; height: var(--offline-action-height); transform: translateY(-50%);
}
#modal-root .modal.mother-offline-modal .mother-offline-action-dock .button-label { font-size: inherit; line-height: inherit; white-space: nowrap; }
/* Keep the full-size companions below the title and close target. The extra
   header space prevents either rabbit ear from being covered at phone widths. */
#modal-root .mother-offline-hero { flex: 0 0 184px; height: 184px; background: url(../assets/environments/scene-night-mother-v2.png) center var(--offline-forest-offset) / 100% auto no-repeat; }
#modal-root .mother-offline-hero h2 { top: 6px; width: 170px; padding: 4px 5px; border-width: 7px 10px; font-size: 23px; }
#modal-root .mother-offline-hero p { margin: 0; padding: 5px 3px; font-size: 10px; line-height: 1.4; }
#modal-root .mother-offline-hero p { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 9px; row-gap: 2px; }
#modal-root .mother-offline-hero p > span { white-space: nowrap; }
#modal-root .mother-offline-animal { height: 105px; max-height: 105px; bottom: 22px; }
#modal-root .mother-offline-sources { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); min-height: 0; margin: 0 5px; padding: 5px 6px; border-width: 9px 10px; gap: 8px; }
#modal-root .mother-offline-sources > * { min-height: 90px; }
#modal-root .mother-offline-sources h3 { font-size: 12px; line-height: 1.4; margin: 0 0 4px; }
#modal-root .mother-offline-auto { grid-template-columns: 48px minmax(0,1fr); gap: 5px; align-items: center; }
#modal-root .mother-offline-auto .mother-board-art { width: 48px; height: 85px; }
#modal-root .mother-offline-auto span { font-size: 10px; }
#modal-root .mother-offline-auto strong { font-size: 24px; line-height: 1.3; }
#modal-root .mother-offline-expeditions b { font-size: 11px; line-height: 1.5; }
#modal-root .mother-offline-sources .resource-value { font-size: 11px; }
#modal-root .mother-offline-sources .resource-value b { font-size: 14px; }
#modal-root .mother-offline-sources .resource-icon { width: 20px; height: 22px; }
#modal-root .mother-offline-inventory { margin: 0 5px; padding: 5px 6px !important; border-width: 10px 11px !important; }
#modal-root .mother-offline-inventory h3 { font-size: 13px; margin: 0 0 6px; }
#modal-root .mother-offline-inventory .resource-list { gap: 6px 10px; }
#modal-root .mother-offline-inventory .resource-value { font-size: 11px; }
#modal-root .mother-offline-inventory .resource-value b { font-size: 15px; }
#modal-root .mother-offline-inventory .resource-icon { width: 21px; height: 24px; }
#modal-root :is(.mother-offline-claim.button,.mother-offline-growth.button) { flex: none; align-self: center; width: 240px; min-height: 52px; margin: 0; font-size: 17px; }
#modal-root .mother-offline-upgrade { margin: 0 5px; padding: 5px 6px !important; border-width: 14px 14px !important; }
#modal-root .mother-offline-upgrade > .mother-board-art { width: 74px; height: 82px; left: 6px; top: 5px; }
#modal-root .mother-offline-upgrade .mother-upgrade-split { display: flex; flex-direction: column; gap: 8px; }
#modal-root .mother-offline-upgrade .mother-offline-upgrade-caption { padding-left: 82px; min-height: 20px; font-size: 10px; }
#modal-root .mother-offline-upgrade .mother-current-upgrade > h2 { padding-left: 82px; min-height: 58px; font-size: 16px; line-height: 1.4; }
#modal-root .mother-offline-upgrade h3 { font-size: 12px; margin: 3px 0 5px; }
#modal-root .mother-offline-upgrade .mother-columns { gap: 10px; }
#modal-root .mother-offline-upgrade .resource-value { font-size: 11px; line-height: 1.4; }
#modal-root .mother-offline-upgrade .resource-value b { font-size: 15px; }
#modal-root .mother-offline-upgrade .resource-icon { width: 18px; height: 21px; }
#modal-root .mother-offline-upgrade .stat-row { font-size: 11px; gap: 2px 5px; margin: 4px 0; }
#modal-root .mother-offline-upgrade .stat-row b { font-size: 15px; }
#modal-root .mother-offline-upgrade .stat-row small { font-size: 10px; white-space: nowrap; }
#modal-root .mother-offline-upgrade :is(.mother-payment,.mother-next-shortfall,.deficit,.sufficient) { font-size: 11px; line-height: 1.5; }
#modal-root .mother-offline-upgrade .mother-next-upgrade { padding: 0; border: 0; border-top: 1px solid #bda16b; }
#modal-root .mother-offline-upgrade .mother-next-upgrade > summary { min-height: 44px; padding: 10px 0; font-size: 12px; font-weight: bold; color: #654426; }
#modal-root .mother-offline-upgrade .mother-upgrade-inventory > summary { font-size: 11px; }
#modal-root .mother-offline-footnote { margin: 0 8px; padding: 5px; font-size: 11px; line-height: 1.5; color: #fff0cc; background: #203427bd; }

/* Wide reward totals need the whole left panel rather than the small label
   column beside the workshop. Keep both the number and illustration intact. */
#modal-root .mother-offline-auto { grid-template-columns: minmax(58px,1fr) minmax(0,1.1fr); grid-template-rows: auto auto auto; gap: 2px 6px; }
#modal-root .mother-offline-auto > .mother-board-art { grid-column: 1; grid-row: 1 / span 2; width: 100%; height: 94px; }
#modal-root .mother-offline-auto > div:not(.mother-board-art) { display: contents; }
#modal-root .mother-offline-auto h3 { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
#modal-root .mother-offline-auto span { grid-column: 2; grid-row: 2; align-self: start; }
#modal-root .mother-offline-auto strong { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: clamp(22px,6cqw,28px); text-align: center; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#modal-root .mother-offline-auto strong .resource-icon { width: 24px; height: 29px; max-height: 29px; flex: 0 0 24px; }
#modal-root .mother-offline-auto .resource-list { grid-column: 1 / -1; }
#modal-root .mother-offline-expeditions .offline-journey-art { display: flex; align-items: center; justify-content: center; gap: 5px; height: 66px; margin: 2px 0 6px; }
#modal-root .offline-journey-art > img { width: calc(50% - 3px); height: 100%; object-fit: contain; image-rendering: pixelated; }
#modal-root .mother-offline-sources.is-legacy { grid-template-columns: minmax(0,1fr); }
#modal-root .mother-offline-transfer {
  display: grid; grid-template-columns: 60px minmax(0,1fr) 28px 40px; align-items: center; gap: 5px;
  margin: 0 5px; padding: 3px 2px;
  border: solid transparent; border-width: 9px 8px;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 180 160 180 160 fill stretch;
  background: #f5e5bb; background-clip: padding-box; color: #614323;
}
#modal-root .mother-offline-transfer > img { width: 100%; height: 76px; object-fit: contain; image-rendering: pixelated; }
#modal-root .mother-offline-transfer > div { min-width: 0; }
#modal-root .mother-offline-transfer h3 { margin: 0 0 5px; font-size: 12px; color: #614323; }
#modal-root .mother-offline-transfer .resource-list { gap: 5px 8px; }
#modal-root .mother-offline-transfer .resource-value { font-size: 10px; }
#modal-root .mother-offline-transfer .resource-value b { font-size: 14px; color: #4d663a; }
#modal-root .mother-offline-transfer .resource-icon { width: 19px; height: 23px; max-height: 23px; }
#modal-root .offline-transfer-arrow { display: grid; place-items: center; min-width: 0; color: #8b5d25; font-size: 26px; line-height: 1; font-weight: bold; text-align: center; }
#modal-root .mother-offline-transfer > .offline-transfer-chest { height: 44px; }
@container (max-width: 340px) {
  #modal-root .mother-offline-sources { grid-template-columns: minmax(0,1fr); gap: 8px; }
  #modal-root .mother-offline-auto { grid-template-columns: 76px minmax(0,1fr); }
  #modal-root .mother-offline-auto > .mother-board-art { height: 84px; }
  #modal-root .mother-offline-auto strong { grid-column: 2; grid-row: 3; justify-content: start; font-size: 25px; }
  #modal-root .mother-offline-auto > .mother-board-art { grid-row: 1 / span 3; }
  #modal-root .mother-offline-auto h3 { align-self: center; }
  #modal-root .mother-offline-expeditions { border-left: 0; border-top: 1px solid #c9aa74; padding: 7px 0 0; }
  #modal-root .mother-offline-expeditions .offline-journey-art { float: right; width: 104px; height: 66px; margin: 2px 0 0 5px; }
  #modal-root .mother-offline-transfer { grid-template-columns: 42px minmax(0,1fr) 22px 30px; gap: 3px; }
  #modal-root .offline-transfer-arrow { font-size: 22px; }
  #modal-root .mother-offline-transfer > img { height: 66px; }
  #modal-root .mother-offline-transfer .resource-list { flex-direction: column; align-items: start; gap: 3px; }
  #modal-root .mother-offline-upgrade > .mother-board-art { width: 62px; height: 76px; }
  #modal-root .mother-offline-upgrade .mother-offline-upgrade-caption,
  #modal-root .mother-offline-upgrade .mother-current-upgrade > h2 { padding-left: 70px; }
}

/* The active-adventure reference gives the route, timer and party distinct
   zones. Two header rows preserve that hierarchy in the narrower viewport. */
#app .game-shell[data-page="trip"] .mother-trip { --scene-height: clamp(204px,65cqw,290px); gap: 7px; }
#app .game-shell[data-page="trip"] .mother-trip-scene {
  height: var(--scene-height); grid-row: auto; margin-top: 0;
}
#app .game-shell[data-page="trip"] .mother-trip-status {
  display: grid; grid-template-columns: minmax(0,1fr) 83px; grid-template-rows: auto auto;
  grid-row: auto; margin-top: 0;
  gap: 6px 8px; min-height: 90px; padding: 4px 6px !important;
}
#app .game-shell[data-page="trip"] .mother-trip-route { grid-column: 1; grid-row: 1; }
#app .game-shell[data-page="trip"] .mother-trip-route h1 { font-size: 14px; line-height: 1.3; margin: 0 0 3px; }
#app .game-shell[data-page="trip"] .mother-trip-route p { font-size: 10px; line-height: 1.4; }
#app .game-shell[data-page="trip"] .mother-trip-status[data-trip-phase="returning"] .mother-trip-route p {
  color: #446635; background: #adbf7b33; font-weight: 700;
}
#app .game-shell[data-page="trip"] .mother-trip-timer { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0,1fr) 35px; gap: 3px 5px; }
#app .game-shell[data-page="trip"] .mother-trip-timer > b { font-size: 12px; line-height: 1.4; }
#app .game-shell[data-page="trip"] .mother-trip-timer > strong { grid-column: 2; grid-row: 1; font-size: 13px; line-height: 1.4; }
#app .game-shell[data-page="trip"] .mother-trip-timer .progress { grid-column: 1 / -1; grid-row: 2; height: 9px; margin: 0; }
#app .game-shell[data-page="trip"] .mother-trip-timer {
  padding: 5px 6px; border: 2px solid #8a633c;
  background: linear-gradient(#77502e,#5e3e25); box-shadow: inset 0 1px #b88b50;
  color: #fff0d0;
}
#app .game-shell[data-page="trip"] .mother-trip-timer > b { display: flex; align-items: center; gap: 4px; }
#app .game-shell[data-page="trip"] .mother-trip-timer > b .ui-icon { width: 16px; height: 20px; margin: 0; }
#app .game-shell[data-page="trip"] .mother-trip-timer > strong { color: #fff0d0; }
#app .game-shell[data-page="trip"] .mother-trip-timer .progress { background: #2f3025; border-color: #b2945d; }
#app .game-shell[data-page="trip"] .mother-trip-party { grid-column: 2; grid-row: 1 / span 2; gap: 7px; justify-content: center; align-self: center; }
#app .game-shell[data-page="trip"] .mother-trip-party { padding-left: 5px; border-left: 1px solid #c5a264; }
#app .game-shell[data-page="trip"] .mother-trip-party img { width: 31px; height: 40px; max-height: 40px; }
#app .game-shell[data-page="trip"] .mother-trip-party :is(b,small) { font-size: 10px; line-height: 1.4; }
#app .game-shell[data-page="trip"] .mother-trip-cargo { min-height: 0; padding: 4px 5px !important; }
#app .game-shell[data-page="trip"] .mother-trip-cargo h2 { font-size: 16px; margin-bottom: 7px; }
#app .game-shell[data-page="trip"] .mother-trip-cargo h2 {
  display: flex; align-items: center; gap: 6px; padding-bottom: 6px;
  border-bottom: 1px dashed #b6945c;
}
#app .game-shell[data-page="trip"] .mother-trip-cargo h2 .ui-icon { width: 25px; height: 25px; margin: 0; }
#app .game-shell[data-page="trip"] .mother-trip-cargo h3 { font-size: 11px; line-height: 1.4; }
#app .game-shell[data-page="trip"] :is(.mother-trip-bag,.mother-trip-expected) { grid-template-columns: 54px minmax(0,1fr); gap: 5px; }
#app .game-shell[data-page="trip"] .mother-trip-cargo .resource-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 7px; }
#app .game-shell[data-page="trip"] .mother-trip-cargo .resource-value { justify-content: start; font-size: 11px; gap: 3px; }
#app .game-shell[data-page="trip"] .mother-trip-cargo .resource-value b { font-size: 14px; }
#app .game-shell[data-page="trip"] .mother-trip-cargo .resource-icon { width: 18px; height: 21px; }
#app .game-shell[data-page="trip"] .mother-trip-bag > .muted { font-size: 11px; line-height: 1.5; }
#app .game-shell[data-page="trip"] .mother-trip-load { margin: 6px 0; font-size: 11px; gap: 7px; }
#app .game-shell[data-page="trip"] .mother-trip-load b { font-size: 14px; }
#app .game-shell[data-page="trip"] .mother-trip-load > span { display: flex; align-items: center; gap: 3px; }
#app .game-shell[data-page="trip"] .mother-trip-load .ui-icon { width: 21px; height: 23px; margin: 0 2px 0 0; }
#app .game-shell[data-page="trip"] .mother-trip-load .progress { height: 10px; }
#app .game-shell[data-page="trip"] .mother-trip-return-note { margin: 6px 0; font-size: 11px; line-height: 1.4; }
#app .game-shell[data-page="trip"] .mother-trip-return-note b { font-size: 14px; }
#app .game-shell[data-page="trip"] .mother-trip-return-note > span { display: inline-flex; align-items: center; gap: 3px; }
#app .game-shell[data-page="trip"] .mother-trip-return-note .ui-icon { width: 15px; height: 18px; margin: 0; }
#app .game-shell[data-page="trip"] .mother-trip-actions {
  position: static; gap: 8px; margin-top: 6px;
  padding: 3px 0; background: #f5e7c5; border-top: 1px solid #c5a264;
}
#app .game-shell[data-page="trip"] .mother-trip-actions .button { min-height: 50px; font-size: 16px; }
/* Keep expedition actions close to their material ledger on portrait screens.
   Preserve the source corner ratio and crop scenery without stretching it. */
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] {
  --scene-height: clamp(152px,calc(100svh - 540px),218px);
}
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] :is(.mother-trip-status,.mother-trip-cargo) {
  --recipe-frame-scale: .055;
}
/* Keep five/six-material ledgers at two rows without reducing icon, text or
   action sizes. Narrow phones retain the readable two-column scrolling view. */
@container (min-width: 340px) {
  #app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] .mother-trip-cargo .resource-list:has(> .resource-value:nth-child(5)) {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}
#app .game-shell[data-page="trip"] .mother-trip-objective { grid-template-columns: 94px minmax(0,1fr); gap: 10px; }
#app .game-shell[data-page="trip"] .mother-trip-objective .mother-board-art { width: 94px; min-height: 132px; }
#app .game-shell[data-page="trip"] .mother-trip-objective h2 { font-size: 16px; }
#app .game-shell[data-page="trip"] .mother-trip-objective p { font-size: 11px; line-height: 1.5; }
#app .game-shell[data-page="trip"] .mother-trip-objective .resource-value { font-size: 11px; }
#app .game-shell[data-page="trip"] .mother-trip-objective .resource-value b { font-size: 14px; }
#app .game-shell[data-page="trip"] .mother-trip-objective .resource-icon { width: 18px; height: 21px; }
#app .game-shell[data-page="trip"] .mother-trip-objective .stat-row { font-size: 11px; line-height: 1.4; }
#app .game-shell[data-page="trip"] .mother-trip-objective .stat-row b { font-size: 15px; }
#app .game-shell[data-page="trip"] .mother-trip-objective .stat-row small { font-size: 10px; white-space: nowrap; }

/* Reuse the illustrated letter at its native ratio. Unlock conditions sit
   below the paper so long route names cannot collide with the quill or seal. */
#app .game-shell[data-page="codex"] .codex-grid { gap: 14px 8px; align-items: stretch; }
#app .game-shell[data-page="codex"] .codex-stamp {
  min-height: 0; padding: 0; gap: 4px; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: #6d5436; justify-content: start;
  transition: filter .15s ease;
}
#app .game-shell[data-page="codex"] .codex-stamp-sheet {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4;
}
#app .game-shell[data-page="codex"] .codex-stamp-art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: saturate(.3); opacity: .8; pointer-events: none;
}
#app .game-shell[data-page="codex"] .codex-stamp.unlocked .codex-stamp-art { filter: none; opacity: 1; }
#app .game-shell[data-page="codex"] .codex-stamp-copy {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; width: 70%; margin: 0 7% 8% 0; color: #664429;
}
#app .game-shell[data-page="codex"] .codex-folio { font-size: 10px; line-height: 1.4; color: #93734a; white-space: nowrap; }
#app .game-shell[data-page="codex"] .codex-stamp b { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
#app .game-shell[data-page="codex"] .codex-seal-label { border-top: 1px solid #c6ac76; padding-top: 6px; font-size: 10px; line-height: 1.4; color: #8a7959; }
#app .game-shell[data-page="codex"] .codex-stamp.unlocked .codex-seal-label { color: #536e35; }
#app .game-shell[data-page="codex"] .codex-stamp > small { display: block; padding: 0 6px; font-size: 11px; line-height: 1.6; text-align: center; color: #755a38; overflow-wrap: anywhere; }
#app .game-shell[data-page="codex"] .codex-stamp:focus-visible { outline: 3px solid #886126; outline-offset: 2px; }

#app .game-shell[data-page="season"] .talent-card {
  display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 9px 12px; align-items: center;
  border: solid transparent !important; border-width: 16px 15px !important;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch !important;
  background: #f6e6bf; background-clip: padding-box; padding: 6px 7px 7px !important;
}
#app .game-shell[data-page="season"] .talent-art { width: 64px; height: 72px; object-fit: contain; }
#app .game-shell[data-page="season"] .talent-card h3 { margin: 0 0 5px; font-size: 18px; line-height: 1.4; color: #644426; }
#app .game-shell[data-page="season"] .talent-card h3 small { display: block; font-size: 11px; line-height: 1.6; color: #87704a; }
#app .game-shell[data-page="season"] .talent-card p { margin: 0; font-size: 12px; line-height: 1.6; }
#app .game-shell[data-page="season"] .talent-card .button { grid-column: 1 / -1; width: 100%; margin: 0; min-height: 52px; font-size: 15px; }
#app .game-shell[data-page="season"] .talent-card .button:disabled { opacity: .68; }
#app .game-shell[data-page="season"] .screen-content > .parchment:first-child p { font-size: 12px; line-height: 1.7; }
#app .game-shell[data-page="season"] .notice {
  border-width: 14px 18px;
  border-image-slice: 30% 27% 26% 28%;
  padding: 6px 5px; color: #4c5d32;
}
@container (max-width: 340px) {
  #app .game-shell[data-page="trip"] .mother-trip-status { grid-template-columns: minmax(0,1fr) 76px; gap: 4px 6px; padding-inline: 3px !important; }
  #app .game-shell[data-page="trip"] .mother-trip-route h1 { font-size: 13px; }
  #app .game-shell[data-page="trip"] .mother-trip-route p { font-size: 9px; }
  #app .game-shell[data-page="trip"] .mother-trip-cargo .resource-value { font-size: 10px; }
  #app .game-shell[data-page="trip"] .mother-trip-objective { grid-template-columns: 78px minmax(0,1fr); }
  #app .game-shell[data-page="trip"] .mother-trip-objective .mother-board-art { width: 78px; }
}

/* Preserve the mother's scenic route cards when locked and give selected
   routes a visible gold rim and paw. Labels keep their own rows at phone size. */
#app .game-shell[data-page="adventure"] .mother-route-showcase { height: max(210px,59cqw); min-height: max(210px,59cqw); padding-left: 38px; }
#app .game-shell[data-page="adventure"] .route-showcase-card { grid-template-columns: minmax(0,1fr); grid-template-rows: 64px auto auto auto; row-gap: 2px; min-height: 0; }
#app .game-shell[data-page="adventure"] .route-showcase-art { height: 64px; }
#app .game-shell[data-page="adventure"] .route-showcase-name { font-size: 12px; line-height: 1.3; white-space: nowrap; }
#app .game-shell[data-page="adventure"] .route-showcase-risk { max-width: none; font-size: 10px; line-height: 1.2; }
#app .game-shell[data-page="adventure"] .route-showcase-time { font-size: 13px; line-height: 1.3; }
#app .game-shell[data-page="adventure"] .route-showcase-card.is-selected { outline: 3px solid #ffdc63; outline-offset: 0; filter: drop-shadow(0 0 3px #f7b92c); transform: translateY(-3px); }
#app .game-shell[data-page="adventure"] .route-showcase-card.is-selected::after {
  content: ""; position: absolute; top: -12px; left: calc(50% - 12px); width: 24px; height: 24px;
  border: 2px solid #ffe98d; border-radius: 50%;
  background: #d6962e url(../assets/ui/nav-companion-paw.png) center / 21px 21px no-repeat;
  box-shadow: 0 1px 2px #5b3e22; pointer-events: none;
}
#app .game-shell[data-page="adventure"] .is-locked .route-showcase-art > img { filter: brightness(.82) saturate(.75); }
#app .game-shell[data-page="adventure"] .route-showcase-lock { background: #13213922; gap: 3px; }
#app .game-shell[data-page="adventure"] .route-showcase-lock small { padding: 2px 3px; background: #252536d9; font-size: 9px; line-height: 1.3; }
/* Native lock medallion window: (704,76,138,140) in the 946x579 route
   frame, uniformly displayed at .2 scale. No asset pixels are changed. */
#app .game-shell[data-page="adventure"] .route-showcase-card .route-showcase-lock::before {
  width: 27.6px; height: 28px;
  background: url(../assets/ui/frame-route-card.png) -140.8px -15.2px / 189.2px 115.8px no-repeat;
  filter: drop-shadow(0 1px #302619);
}

/* Every route uses the same paper frame. Locking is a live state over its
   actual scenery, rather than a different oversized frame with a baked lock. */
#app .game-shell[data-page="adventure"] .route-chooser .route-list { gap: 10px; margin: 6px 0 9px; }
#app .game-shell[data-page="adventure"] .route-map-progress {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin: 2px 1px 7px; color: #70502d; font-size: 11px; line-height: 1.5;
}
#app .game-shell[data-page="adventure"] .route-map-progress > span { color: #58703a; font-size: 10px; }
#app .game-shell[data-page="adventure"] .route-chooser .illustrated-route-card {
  display: grid; grid-template-columns: 68px minmax(0,1fr); align-items: center;
  position: relative; gap: 6px 9px; min-width: 0; min-height: 0;
  margin: 0; padding: 5px; border-style: solid; border-color: transparent;
  border-width: 12px 11px !important; border-radius: 0;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 180 160 180 160 fill stretch !important;
  background: none; box-shadow: none; color: #5b3c22; text-align: left;
}
#app .game-shell[data-page="adventure"] .route-chooser .illustrated-route-card.selected {
  outline: 2px solid #6b8a44; outline-offset: -6px; box-shadow: 0 0 0 1px #c4d28d;
}
#app .game-shell[data-page="adventure"] .route-chooser .illustrated-route-card:focus-visible {
  outline: 3px solid #e7ae39; outline-offset: 1px;
}
#app .game-shell[data-page="adventure"] .route-card-thumb {
  grid-column: 1; grid-row: 1; display: block; position: relative;
  width: 68px; height: 66px; border: 2px solid #9a7948; overflow: hidden;
  background: #708456; box-shadow: 0 1px #fff2c7;
}
#app .game-shell[data-page="adventure"] .route-card-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
#app .game-shell[data-page="adventure"] .illustrated-route-card.locked .route-card-thumb > img { filter: brightness(.62) saturate(.6); }
#app .game-shell[data-page="adventure"] .illustrated-route-card .route-no {
  position: absolute; left: 0; bottom: 0; z-index: 2; width: auto;
  padding: 1px 4px; background: #62432ae8; color: #fff1c4;
  font-size: 10px; line-height: 1.4; font-weight: 800;
}
#app .game-shell[data-page="adventure"] .route-card-glyph { position: absolute; right: 2px; bottom: 1px; z-index: 2; width: 20px; height: 20px; }
#app .game-shell[data-page="adventure"] .route-card-glyph > img { display: block; width: 100%; height: 100%; object-fit: contain; }
#app .game-shell[data-page="adventure"] .route-chooser .route-card-heading {
  grid-column: 2; grid-row: 1; min-width: 0; padding: 0 12px 0 0; background: none;
}
#app .game-shell[data-page="adventure"] .illustrated-route-card .route-card-state {
  display: block; margin: 0 0 2px; color: #6b8150; font-size: 9px; line-height: 1.5;
}
#app .game-shell[data-page="adventure"] .illustrated-route-card.locked .route-card-state { color: #9a673c; }
#app .game-shell[data-page="adventure"] .illustrated-route-card .route-card-heading > b { font-size: 15px; line-height: 1.5; }
#app .game-shell[data-page="adventure"] .illustrated-route-card .route-card-meta { margin-top: 3px; color: #88683e; font-size: 10px; line-height: 1.5; }
#app .game-shell[data-page="adventure"] .illustrated-route-card .route-card-rewards {
  grid-column: 1 / -1; min-width: 0; padding-top: 5px; border-top: 1px solid #d3b47c;
}
#app .game-shell[data-page="adventure"] .illustrated-route-card .route-card-rewards > small { margin: 0 0 4px; font-size: 9px; color: #927247; line-height: 1.4; }
#app .game-shell[data-page="adventure"] .illustrated-route-card .route-base-resources {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px;
}
#app .game-shell[data-page="adventure"] .illustrated-route-card .resource-value { min-width: 0; gap: 3px; white-space: nowrap; font-size: 9px; }
#app .game-shell[data-page="adventure"] .illustrated-route-card .resource-value b { font-size: 13px; }
#app .game-shell[data-page="adventure"] .illustrated-route-card .resource-icon { width: 15px; height: 18px; object-fit: contain; flex-shrink: 0; }
#app .game-shell[data-page="adventure"] .illustrated-route-card .lock-reason {
  grid-column: 1 / -1; display: block; margin: 0; padding: 4px 5px;
  color: #965333; background: #d4b57a26; border-left: 2px solid #b68a4c;
  font-size: 10px; line-height: 1.5;
}
#app .game-shell[data-page="adventure"] .route-chooser .illustrated-route-card .route-arrow {
  display: block; position: absolute; top: 18px; right: 4px; margin: 0;
  color: #a17e49; font-size: 22px; line-height: 1;
}
#app .game-shell[data-page="adventure"] .route-base-note { margin: 4px 2px 0; color: #8a6b40; font-size: 10px; line-height: 1.6; }
@container (max-width: 350px) {
  #app .game-shell[data-page="adventure"] .route-chooser .illustrated-route-card { grid-template-columns: 60px minmax(0,1fr); gap: 6px 7px; padding: 4px; }
  #app .game-shell[data-page="adventure"] .route-card-thumb { width: 60px; height: 62px; }
  #app .game-shell[data-page="adventure"] .illustrated-route-card .route-base-resources { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #app .game-shell[data-page="adventure"] .illustrated-route-card .route-card-heading > b { font-size: 14px; }
}

#app .game-shell[data-page="adventure"] .mother-party-body { grid-template-columns: minmax(0,1fr) 48px; height: auto; min-height: 134px; gap: 6px; }
#app .game-shell[data-page="adventure"] .mother-party-panel .section-title { margin-bottom: 6px; }
#app .game-shell[data-page="adventure"] .mother-party-panel .section-title h2 { font-size: 14px; line-height: 1.4; }
#app .game-shell[data-page="adventure"] .mother-party-panel .section-title > span { font-size: 11px; }
#app .game-shell[data-page="adventure"] .mother-party-strip { align-items: start; }
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice { height: 134px; min-height: 134px; padding: 2px 1px; background: linear-gradient(#789774 0 66px,#fff0c9 66px); }
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice.is-selected { border-color: #edb633; background: linear-gradient(#4f7e62 0 66px,#fff0c9 66px); box-shadow: inset 0 0 0 1px #ffe783,0 1px #92601e; }
#app .game-shell[data-page="adventure"] .party-showcase-portrait { flex-basis: 62px; height: 62px; min-height: 62px; }
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice .party-showcase-portrait > img.animal-art { height: 62px; max-height: 62px; }
#app .game-shell[data-page="adventure"] .party-showcase-card > strong { font-size: 12px; line-height: 1.3; margin-top: 3px; }
#app .game-shell[data-page="adventure"] .party-showcase-card > strong small { display: block; font-size: 10px; line-height: 1.3; }
#app .game-shell[data-page="adventure"] .party-showcase-card .party-showcase-primary { font-size: 11px; line-height: 1.4; white-space: nowrap; }
#app .game-shell[data-page="adventure"] .party-showcase-card .party-showcase-capacity { font-size: 10px; line-height: 1.4; white-space: nowrap; }
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice .resource-icon { width: 14px; height: 15px; max-height: 15px; }
#app .game-shell[data-page="adventure"] .party-showcase-card .party-showcase-check { top: 47px; right: 1px; width: 17px; height: 17px; font-size: 13px; line-height: 15px; }
#app .game-shell[data-page="adventure"] .mother-party-pack { height: 134px; }
#app .game-shell[data-page="adventure"] .mother-party-pack > img { width: 48px; height: 76px; max-height: 76px; }
#app .game-shell[data-page="adventure"] .mother-party-pack > b { font-size: 10px; line-height: 1.4; }
#app .game-shell[data-page="adventure"] .mother-departure-row { position: sticky; bottom: 4px; z-index: 8; min-height: 58px; padding: 4px 0; background: #f1dfb8; border-block: 1px solid #a8834b; }
#app .game-shell[data-page="adventure"] :is(.mother-departure-blockers,.mother-departure-row),
#app .game-shell[data-page="adventure"] .mother-departure-blockers + .mother-departure-row { grid-row: auto; }

/* The reference's two ledgers become full-width boards in a portrait phone.
   The material icons, companion art and upgrade effects retain useful sizes. */
#app .game-shell[data-page="adventure"] .mother-decision-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
#app .game-shell[data-page="adventure"] .mother-decision-grid h3 { font-size: 16px; line-height: 1.4; margin: 0 0 6px; }
#app .game-shell[data-page="adventure"] .mother-reward-intro { gap: 10px; }
#app .game-shell[data-page="adventure"] .mother-reward-intro > img { width: 58px; height: 52px; object-fit: cover; }
#app .game-shell[data-page="adventure"] .mother-reward-route b { font-size: 15px; line-height: 1.5; }
#app .game-shell[data-page="adventure"] .mother-reward-route span { font-size: 12px; line-height: 1.5; }
#app .game-shell[data-page="adventure"] .mother-reward-resources { gap: 7px; padding: 8px 0; }
#app .game-shell[data-page="adventure"] .mother-reward-resources .resource-value { font-size: 11px; line-height: 1.5; }
#app .game-shell[data-page="adventure"] .mother-reward-resources .resource-icon { width: 25px; height: 28px; }
#app .game-shell[data-page="adventure"] .mother-reward-resources .resource-value b { font-size: 20px; }
#app .game-shell[data-page="adventure"] .mother-load-row { font-size: 12px; gap: 8px; margin-top: 8px; }
#app .game-shell[data-page="adventure"] .mother-load-row b { font-size: 16px; }
#app .game-shell[data-page="adventure"] .packing-shortcut { font-size: 12px; margin-top: 8px; }
#app .game-shell[data-page="adventure"] .mother-growth-panel { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 6px 10px; align-items: start; }
#app .game-shell[data-page="adventure"] .mother-growth-panel > h3 { grid-column: 1 / -1; }
#app .game-shell[data-page="adventure"] .mother-growth-heading { grid-column: 1; grid-row: 2 / span 2; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
#app .game-shell[data-page="adventure"] .mother-growth-portrait { width: 60px; height: 68px; max-height: 68px; }
#app .game-shell[data-page="adventure"] .mother-growth-heading > b { font-size: 13px; line-height: 1.5; }
#app .game-shell[data-page="adventure"] .mother-growth-heading small { font-size: 11px; }
#app .game-shell[data-page="adventure"] .mother-growth-cost { grid-column: 2; grid-row: 2; gap: 8px; padding: 3px 0 7px; }
#app .game-shell[data-page="adventure"] .mother-growth-cost .resource-value { font-size: 12px; }
#app .game-shell[data-page="adventure"] .mother-growth-cost .resource-value b { font-size: 16px; }
#app .game-shell[data-page="adventure"] .mother-growth-cost .resource-icon { width: 20px; height: 23px; }
#app .game-shell[data-page="adventure"] .mother-growth-stats { grid-column: 2; grid-row: 3; margin: 0; }
#app .game-shell[data-page="adventure"] .mother-growth-stats p { font-size: 12px; line-height: 1.7; }
#app .game-shell[data-page="adventure"] .mother-growth-stats b { font-size: 15px; white-space: nowrap; }
#app .game-shell[data-page="adventure"] :is(.mother-growth-balance,.mother-growth-next,.mother-growth-train) { grid-column: 1 / -1; }
#app .game-shell[data-page="adventure"] :is(.mother-growth-balance,.mother-growth-next) { margin: 0; font-size: 12px; line-height: 1.6; }
#app .game-shell[data-page="adventure"] .mother-growth-train.button { border-image: url(../assets/ui/button-upgrade-green-hammer.png) 62 78 62 165 fill stretch !important; border-width: 10px 13px 10px 27px !important; padding: 1px 3px !important; min-height: 48px; font-size: 15px; white-space: normal; }
@container (max-width: 340px) {
  #app .game-shell[data-page="adventure"] .route-showcase-time { font-size: 12px; white-space: nowrap; }
  #app .game-shell[data-page="adventure"] .route-showcase-time::before { width: 10px; height: 12px; }
}

/* Keep a unit intact below the change, instead of joining half of it to a
   value and wrapping the final character onto another line. */
#app .game-shell[data-page="growth"] .mother-board-content .stat-row small { flex-basis: 100%; white-space: nowrap; }

/* Carry the recipe mother's illustrated wood-and-paper system through all
   growth tabs. Portraits and recipe objects always keep their source ratio. */
#app .game-shell[data-page="growth"] .animal-selector {
  min-width: 0; max-width: 100%; margin: 0 0 6px; padding: 4px 3px 7px;
  gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
#app .game-shell[data-page="growth"] .animal-selector::-webkit-scrollbar { display: none; }
#app .game-shell[data-page="growth"] .animal-select {
  flex: 0 0 74px; width: 74px; min-width: 74px; min-height: 98px;
  gap: 3px; padding: 2px; border: solid transparent; border-width: 9px 8px;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch;
  border-radius: 0; background: #ead7ae; background-clip: padding-box;
  box-shadow: none; color: #644426; font-size: 12px; font-weight: bold;
}
#app .game-shell[data-page="growth"] .animal-select .mini-animal {
  width: 100%; max-width: 54px; height: 58px; max-height: 58px; object-fit: contain;
}
#app .game-shell[data-page="growth"] .animal-select.selected {
  outline: 2px solid #e3b548; outline-offset: 0; background-color: #f7e8b8;
  filter: brightness(1.08);
}
#app .game-shell[data-page="growth"] .animal-select:focus-visible { outline: 3px solid #80602c; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card,
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) {
  min-width: 0; border: solid transparent !important; border-width: 16px 15px !important;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch !important;
  border-radius: 0; background: #f6e6bf; background-clip: padding-box;
  padding: 6px 7px 8px !important; box-shadow: none; overflow: visible;
}
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card::before,
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card::after,
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card)::before,
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card)::after { content: none; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card {
  display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 6px 10px; align-items: start;
}
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card > * { min-width: 0; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-art {
  grid-column: 1; grid-row: 1 / span 3; width: 100%; height: 126px;
  max-height: 126px; object-fit: contain; margin: 0;
}
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card > :is(.section-title,.effect-description,.muted) { grid-column: 2; margin: 0; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card .section-title { display: block; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card h2 { font-size: 17px; line-height: 1.4; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card .section-title > span { display: block; font-size: 11px; line-height: 1.5; margin-top: 2px; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card .effect-description { font-size: 12px; line-height: 1.6; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card > .muted { font-size: 11px; line-height: 1.6; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card > :is(.resource-list,.notice,.deficit,.sufficient,.button) { grid-column: 1 / -1; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card .resource-list { padding-top: 6px; border-top: 1px solid #d2b57c; gap: 6px 12px; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card .resource-icon { width: 22px; height: 25px; object-fit: contain; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card .resource-value { font-size: 12px; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card .resource-value b { font-size: 16px; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card .button { min-height: 50px; font-size: 15px; margin: 0; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .notice {
  border-width: 14px 18px; border-image-slice: 30% 27% 26% 28%;
  padding: 6px 5px; color: #4c5d32; font-size: 12px; line-height: 1.7;
}
#app .game-shell[data-page="growth"] .craft-card > .section-title { margin: 0 0 8px; gap: 5px; }
#app .game-shell[data-page="growth"] .craft-card h2 { font-size: 18px; }
#app .game-shell[data-page="growth"] .craft-intro { display: grid; grid-template-columns: 84px minmax(0,1fr); align-items: center; gap: 10px; }
#app .game-shell[data-page="growth"] .craft-intro .recipe-art { width: 84px; height: 92px; max-height: 92px; object-fit: contain; margin: 0; }
#app .game-shell[data-page="growth"] .craft-intro p { margin: 0; font-size: 12px; line-height: 1.7; }
#app .game-shell[data-page="growth"] .craft-batch { padding-block: 7px; margin: 6px 0; border-block: 1px solid #d2b57c; font-size: 12px; line-height: 1.6; }
#app .game-shell[data-page="growth"] .craft-batch b { font-size: 18px; color: #55723a; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) h3 { margin: 5px 0 8px; font-size: 16px; line-height: 1.4; color: #644426; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .resource-value { font-size: 12px; gap: 4px; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .resource-value b { font-size: 17px; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .resource-icon { width: 22px; height: 25px; object-fit: contain; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .button { min-height: 50px; font-size: 15px; }
#app .game-shell[data-page="growth"] .craft-card .art-upgrade {
  border-image: url(../assets/ui/button-upgrade-green-hammer.png) 62 78 62 165 fill stretch !important;
  border-width: 10px 13px 10px 27px !important; padding: 1px 3px !important;
}
#app .game-shell[data-page="growth"] .trade-card .recipe-row { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); gap: 5px; align-items: stretch; }
#app .game-shell[data-page="growth"] .trade-card .recipe-row > div { min-width: 0; padding: 8px 5px; background: #e5cea050; border-block: 1px solid #d2b57c; }
#app .game-shell[data-page="growth"] .trade-card .recipe-row > b { display: grid; place-items: center; font-size: 23px; color: #718b45; }
#app .game-shell[data-page="growth"] .trade-card .recipe-row small { font-size: 12px; }
#app .game-shell[data-page="growth"] .trade-card .resource-list { gap: 6px; }
@container (max-width: 340px) {
  #app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card { grid-template-columns: 85px minmax(0,1fr); gap: 6px 8px; }
  #app .game-shell[data-page="growth"] .craft-intro { grid-template-columns: 70px minmax(0,1fr); gap: 8px; }
  #app .game-shell[data-page="growth"] .craft-intro .recipe-art { width: 70px; height: 84px; }
}

/* The companion frame is a complete portrait card with two footer slots.
   Fit the whole source and anchor text to those slots instead of placing a
   second rectangular panel over its paper and leaves. */
#app .game-shell:is([data-page="team"],[data-page="codex"],[data-page="landmarks"],[data-page="season"],[data-page="settings"]) .screen-scroll {
  background: linear-gradient(#193f3526,#193f354d), url(../assets/environments/scene-expedition-mother-v2.png) center bottom / auto 200% no-repeat #203e30;
}
#app .game-shell:is([data-page="team"],[data-page="codex"],[data-page="landmarks"],[data-page="season"],[data-page="settings"]) .scene-shell { border-bottom: 0; }
#app .game-shell:is([data-page="team"],[data-page="codex"],[data-page="landmarks"],[data-page="season"],[data-page="settings"]) .screen-content { background: none; }
#app .game-shell[data-page="team"] .section-title {
  min-height: 40px; margin: 0 0 8px; padding: 2px 5px; gap: 6px;
  border: solid transparent; border-width: 7px 10px;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 62 78 62 78 fill stretch;
  color: #ffe9b6;
}
#app .game-shell[data-page="team"] .section-title h2 { font-size: 15px; color: inherit; }
#app .game-shell[data-page="team"] .section-title > span { font-size: 10px; color: #f4d89c; }
#app .game-shell[data-page="team"] .animal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#app .game-shell[data-page="team"] .animal-card {
  display: block; min-width: 0; min-height: 0; padding: 0 !important;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: #5a3d22;
}
#app .game-shell[data-page="team"] .animal-card-sheet {
  display: block; position: relative; width: 100%; aspect-ratio: 467 / 569;
  padding: 0; background: none;
  image-rendering: pixelated;
}
#app .game-shell[data-page="team"] .animal-card-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#app .game-shell[data-page="team"] .animal-card .animal-card-portrait {
  position: absolute; left: 15%; top: 21%; width: 70%; height: 38%;
  max-width: none; max-height: none; object-fit: contain; object-position: center bottom;
}
#app .game-shell[data-page="team"] .animal-card .animal-card-name {
  position: absolute; top: 60%; left: 16%; width: 68%; margin: 0; padding: 0;
  background: none; font-size: 14px; line-height: 1.3; text-align: center;
}
#app .game-shell[data-page="team"] .animal-card .animal-card-name small { display: block; margin: 0; font-size: 10px; line-height: 1.4; color: #8a6d42; }
#app .game-shell[data-page="team"] .animal-card :is(.animal-card-level,.animal-card-state) {
  position: absolute; top: 82%; width: 32%; padding: 0;
  background: none; color: #684a29; font-size: 11px; font-weight: bold;
  line-height: 1.7; white-space: nowrap; text-align: center;
}
#app .game-shell[data-page="team"] .animal-card-level { left: 16%; }
#app .game-shell[data-page="team"] .animal-card-state { left: 52%; }
#app .game-shell[data-page="team"] .animal-card .animal-card-specialty {
  display: flex; justify-content: center; align-items: center; gap: 3px;
  min-height: 27px; margin: 2px 4% 0; padding: 0 2px; border: solid transparent; border-width: 4px 5px;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 180 160 180 160 fill stretch;
  background: none; color: #65492c; font-size: 10px; line-height: 1.4; text-align: center;
}
#app .game-shell[data-page="team"] .animal-card-specialty .resource-icon { width: 14px; height: 16px; max-width: none; flex-shrink: 0; object-fit: contain; }
#app .game-shell[data-page="team"] .animal-card.locked .animal-card-portrait { filter: saturate(.25); opacity: .65; }
#app .game-shell[data-page="team"] .animal-card.locked .animal-card-state { color: #927752; }
#app .game-shell[data-page="team"] .animal-card:focus-visible { outline: 3px solid #ad853e; outline-offset: 1px; }

/* Supporting pages continue the camp at the canvas's former camera offset.
   One proportional plate scrolls with the cards and fades into the forest floor. */
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .screen-scroll {
  --support-scene-height: clamp(180px,58cqw,250px);
  --support-forest-offset: calc(var(--support-scene-height) * .125 - 18.75cqw);
  --support-forest-bottom: calc(var(--support-forest-offset) + 150cqw);
  background-color: #203e30;
  background-image: linear-gradient(to bottom,transparent calc(var(--support-forest-bottom) - 80px),#203e30 var(--support-forest-bottom)),url(../assets/environments/scene-camp-mother-v1.png);
  background-position: 0 0,center var(--support-forest-offset);
  background-size: 100% 100%,100% auto;
  background-repeat: no-repeat;
  background-attachment: local;
}
#app .game-shell[data-page="season"] .screen-scroll { --support-scene-height: 160px; }
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .scene-shell { background: none; }
#app .game-shell:is([data-page="team"],[data-page="landmarks"],[data-page="codex"],[data-page="season"],[data-page="settings"]) .scene-vignette { background: none !important; }
#app .game-shell[data-page="team"] .animal-card .animal-card-specialty {
  position: relative; isolation: isolate; gap: 4px; min-width: 0; min-height: 36px;
  padding: 7px 8px; border: 0; border-image: none;
  font-size: 11px; line-height: 18px;
}
#app .game-shell[data-page="team"] .animal-card-specialty > .paper-frame-skin { --paper-frame-scale: .045; }
#app .game-shell[data-page="team"] .animal-card-specialty .resource-icon { flex: 0 0 17px; width: 17px; height: 21px; }
#app .game-shell[data-page="team"] .animal-card-specialty-copy { min-width: 0; }

#app .game-shell[data-page="settings"] .screen-content > .parchment {
  border: solid transparent; border-width: 16px 15px;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch;
  border-radius: 0; background: #f6e6bf; background-clip: padding-box;
  padding: 6px 8px 9px; box-shadow: none;
}
#app .game-shell[data-page="settings"] .screen-content > .parchment::before,
#app .game-shell[data-page="settings"] .screen-content > .parchment::after { content: none; }
#app .game-shell[data-page="settings"] .setting-row { min-height: 58px; gap: 10px; padding: 10px 0; font-size: 13px; border-color: #cdb17a; }
#app .game-shell[data-page="settings"] .setting-row > span:first-child { flex: 1; min-width: 0; }
#app .game-shell[data-page="settings"] .setting-row input { position: absolute; right: 0; width: 50px; height: 44px; margin: 0; opacity: 0; z-index: 1; cursor: pointer; }
#app .game-shell[data-page="settings"] .switch-look {
  display: block; position: relative; flex: 0 0 48px; width: 48px; height: 26px;
  border: 2px solid #8f7042; border-radius: 3px; background: #c4ac7d;
  box-shadow: inset 0 2px #9e855a,0 1px #fff1ca; pointer-events: none;
}
#app .game-shell[data-page="settings"] .switch-look::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 19px; height: 20px;
  border: 1px solid #9e7b47; border-radius: 2px; background: #f9e8ba;
  box-shadow: inset 0 2px #fff6d8,0 1px #795a32;
}
#app .game-shell[data-page="settings"] input:checked + .switch-look { background: #6e8c43; border-color: #4e6434; box-shadow: inset 0 2px #526d33,0 1px #fff1ca; }
#app .game-shell[data-page="settings"] input:checked + .switch-look::after { left: 24px; }
#app .game-shell[data-page="settings"] input:focus-visible + .switch-look { outline: 3px solid #a17a32; outline-offset: 3px; }
#app .game-shell[data-page="settings"] input:disabled + .switch-look { opacity: .45; }
#app .game-shell[data-page="settings"] .parchment > p { font-size: 12px; line-height: 1.7; }
#app .game-shell[data-page="settings"] .button-row .button { min-height: 50px; font-size: 14px; }
#app .game-shell[data-page="settings"] .danger-panel h3 { font-size: 17px; color: #8c4530; }

/* Keep modal actions outside the scrolling document, while the portrait
   frame, title and close target stay in view. Offline rewards retain their
   illustrated, independently tuned layout. */
#modal-root .modal:not(.mother-offline-modal) { display: flex; flex-direction: column; overflow: hidden; padding: 8px 6px 6px; }
#modal-root .modal:not(.mother-offline-modal) > #dialog-title {
  flex: none; margin: 0 0 7px; padding: 4px 42px 10px 2px;
  border-bottom: 1px solid #ccb07a; border-radius: 0; background: none;
  color: #583a21; font-size: 18px; line-height: 1.5; text-wrap: balance;
}
#modal-root .modal:not(.mother-offline-modal) > .modal-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #b29761 transparent;
  padding: 7px 5px; border: 0; border-radius: 0; background: none;
  font-size: 12px; line-height: 1.7;
}
#modal-root .modal:not(.mother-offline-modal) > .modal-actions { flex: none; margin-top: 6px; padding-top: 7px; border-top: 1px solid #ccb07a; background: none; }
#modal-root .modal:not(.mother-offline-modal) .modal-actions .button { min-height: 48px; font-size: 14px; }
#modal-root .modal-actions .button.modal-confirm-upgrade {
  border-image: url(../assets/ui/button-upgrade-green-hammer.png) 62 78 62 165 fill stretch !important;
  border-width: 10px 13px 10px 27px !important; padding: 1px 3px !important;
  color: #fff3cb; text-shadow: 0 1px #304722;
}
#modal-root .modal-actions .button.modal-confirm-depart {
  border-image: url(../assets/ui/button-depart-gold-footprints.png) 62 78 62 165 fill stretch !important;
  border-width: 10px 13px 10px 27px !important; padding: 1px 3px !important;
  color: #57351a; text-shadow: 0 1px #ffe7a1;
}
#modal-root .modal:not(.mother-offline-modal) > .close-button { top: 1px; right: 1px; width: 44px; height: 44px; min-height: 44px; }
#modal-root .recruit-intro { display: grid; grid-template-columns: 105px minmax(0,1fr); align-items: center; gap: 12px; }
#modal-root .recruit-intro .recruit-art { width: 105px; height: 126px; max-height: 126px; object-fit: contain; margin: 0; }
#modal-root .recruit-intro h3 { margin: 0 0 6px; font-size: 16px; }
#modal-root .recruit-intro p { margin: 2px 0; font-size: 12px; line-height: 1.7; }
#modal-root .recruit-sheet > .notice { border-width: 14px 18px; border-image-slice: 30% 27% 26% 28%; padding: 6px 5px; font-size: 12px; }
#modal-root .recruit-sheet > h3 { font-size: 14px; margin: 12px 0 7px; }
#modal-root .recruit-sheet .resource-value { font-size: 12px; }
#modal-root .recruit-sheet .resource-value b { font-size: 17px; }
#modal-root .recruit-sheet .resource-icon { width: 23px; height: 26px; object-fit: contain; }
#modal-root .recruit-sheet > .muted { font-size: 11px; line-height: 1.6; }
@container (max-width: 340px) {
  #app .game-shell[data-page="team"] .animal-card .animal-card-name { font-size: 13px; }
}

/* Illustrated commissions use the same paper, rails and actual claim basket
   as the growth pages. Art keeps its aspect ratio; only the paper stretches. */
#app .game-shell[data-page="missions"] .screen-scroll {
  background: linear-gradient(#173b2b22,#173b2b77), url(../assets/environments/scene-camp-mother-v1.png) center / cover no-repeat;
  scrollbar-width: thin; scrollbar-color: #ae8c52 transparent;
}
#app .game-shell[data-page="missions"] .scene-shell {
  height: auto; aspect-ratio: 1781 / 889; border: 0; background: none;
}
#app .game-shell[data-page="missions"] .scene-shell > :is(canvas,.scene-vignette) { visibility: hidden; }
#app .game-shell[data-page="missions"] .mission-commission-board { inset: 0 5px; }
#app .game-shell[data-page="missions"] .mission-board-copy { left: 22%; right: 22%; top: 29%; bottom: 21%; }
#app .game-shell[data-page="missions"] .mission-board-copy h1 { font-size: 23px; line-height: 1.3; }
#app .game-shell[data-page="missions"] .mission-board-copy p { font-size: 11px; line-height: 1.5; }
#app .game-shell[data-page="missions"] .mission-board-copy small { font-size: 9px; line-height: 1.5; }
#app .game-shell[data-page="missions"] .screen-content { padding: 5px 8px 18px; background: none; }
#app .game-shell[data-page="missions"] .mission {
  border: solid transparent; border-width: 16px 15px;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch;
  border-radius: 0; background: #f6e6bf; background-clip: padding-box;
  padding: 7px 8px 9px; margin: 0 0 12px; box-shadow: 0 3px #182d1c66;
}
#app .game-shell[data-page="missions"] .mission::before,
#app .game-shell[data-page="missions"] .mission::after { content: none; }
#app .game-shell[data-page="missions"] .mission.completed { opacity: 1; }
#app .game-shell[data-page="missions"] .mission-heading { display: grid; grid-template-columns: 68px minmax(0,1fr); align-items: center; gap: 10px; }
#app .game-shell[data-page="missions"] .mission-heading > div { min-width: 0; }
#app .game-shell[data-page="missions"] .mission-art { width: 68px; height: 78px; object-fit: contain; image-rendering: pixelated; }
#app .game-shell[data-page="missions"] .mission-kicker { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 0 0 4px; font-size: 10px; line-height: 1.5; color: #967b50; }
#app .game-shell[data-page="missions"] .mission-state { color: #856e48; padding: 1px 7px; background: #e7d6ac; border: 1px solid #bfa36a; }
#app .game-shell[data-page="missions"] .is-ready .mission-state { color: #fff2bb; background: #687d3c; border-color: #455e2d; }
#app .game-shell[data-page="missions"] .completed .mission-state { color: #526a3b; background: #dce0b4; border-color: #99a36a; }
#app .game-shell[data-page="missions"] .mission h2 { color: #5c3c21; font-size: 18px; line-height: 1.4; margin: 0; }
#app .game-shell[data-page="missions"] .mission-objective { color: #82633c; font-size: 12px; line-height: 1.6; margin: 5px 0 0; }
#app .game-shell[data-page="missions"] .mission-progress { margin: 9px 0 10px; }
#app .game-shell[data-page="missions"] .mission-progress > div:first-child { display: flex; justify-content: space-between; gap: 8px; color: #84663d; font-size: 11px; line-height: 1.6; margin-bottom: 4px; }
#app .game-shell[data-page="missions"] .mission-progress b { color: #526d35; font-size: 14px; font-variant-numeric: tabular-nums; }
#app .game-shell[data-page="missions"] .mission .progress { height: 10px; padding: 1px; margin: 0; border: 1px solid #a7884e; border-radius: 1px; background: #d2bd8d; box-shadow: inset 0 1px #ad925f,0 1px #fff3ce; }
#app .game-shell[data-page="missions"] .mission .progress > span { height: 100%; background: linear-gradient(#a3c15d,#698b3b); box-shadow: inset 0 1px #c9d88a; }
#app .game-shell[data-page="missions"] .mission-reward { padding-top: 8px; border-top: 1px solid #ceb17a; }
#app .game-shell[data-page="missions"] .mission-reward h3 { color: #94764a; font-size: 11px; font-weight: normal; margin: 0 0 6px; }
#app .game-shell[data-page="missions"] .mission-reward .resource-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
#app .game-shell[data-page="missions"] .mission-reward .resource-value { display: flex; min-width: 0; gap: 4px; font-size: 11px; line-height: 1.3; }
#app .game-shell[data-page="missions"] .mission-reward .resource-value > span { display: flex; flex-direction: column; min-width: 0; color: #846139; }
#app .game-shell[data-page="missions"] .mission-reward .resource-value b { font-size: 17px; color: #604023; }
#app .game-shell[data-page="missions"] .mission-reward .resource-icon { width: 24px; height: 29px; object-fit: contain; }
#app .game-shell[data-page="missions"] .mission .button { margin-top: 10px; min-height: 50px; font-size: 15px; padding: 1px 3px; }
#app .game-shell[data-page="missions"] .mission .button.art-confirm { border-image: url(../assets/ui/button-claim-basket.png) 62 78 62 165 fill stretch; border-width: 10px 13px 10px 27px; color: #58391e; text-shadow: 0 1px #fff0bb; }
#app .game-shell[data-page="missions"] .mission .button.secondary { border-width: 10px 13px; }
#app .game-shell[data-page="missions"] .mission .button:disabled { opacity: .6; filter: saturate(.65); }

/* Small illustrated chapter entries keep the handbook useful on a phone. */
#modal-root .camp-journal-content .feature-grid { gap: 9px; }
#modal-root .camp-journal-content .feature-button { display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 5px; min-height: 136px; padding: 5px; text-align: center; }
#modal-root .handbook-feature-art { width: 55px; height: 55px; object-fit: contain; image-rendering: pixelated; }
#modal-root .camp-journal-content .feature-button strong { font-size: 14px; line-height: 1.5; }
#modal-root .camp-journal-content .feature-button small { font-size: 11px; line-height: 1.5; margin-top: 2px; }
#modal-root .camp-journal-content .feature-button small > span { display: block; white-space: nowrap; }
#modal-root .camp-journal-content .feature-button > span { min-width: 0; }
#modal-root .camp-journal-content .feature-button:focus-visible { outline: 3px solid #9b7737; outline-offset: 1px; }
#modal-root .camp-journal-content .mother-upgrade-inventory { border: solid transparent; border-width: 8px 10px; border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch; background: #f6e6bf; padding: 3px 5px; }
@container (max-width: 340px) {
  #app .game-shell[data-page="missions"] .mission-heading { grid-template-columns: 57px minmax(0,1fr); gap: 8px; }
  #app .game-shell[data-page="missions"] .mission-art { width: 57px; height: 70px; }
  #app .game-shell[data-page="missions"] .mission h2 { font-size: 17px; }
  #app .game-shell[data-page="missions"] .mission-board-copy h1 { font-size: 21px; }
}

#app .game-shell[data-page="season"] .screen-content > .parchment:first-child {
  border: solid transparent; border-width: 16px 15px;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch;
  border-radius: 0; background: #f6e6bf; background-clip: padding-box; padding: 6px 7px 8px; box-shadow: none;
}
#app .game-shell[data-page="season"] .screen-content > .parchment:first-child::before,
#app .game-shell[data-page="season"] .screen-content > .parchment:first-child::after { content: none; }
#app .game-shell[data-page="season"] .screen-content > .parchment:first-child .section-title { flex-wrap: wrap; gap: 4px 8px; margin: 2px 0 8px; }
#app .game-shell[data-page="season"] .screen-content > .parchment:first-child h2 { font-size: 17px; line-height: 1.5; }
#app .game-shell[data-page="season"] .milestone-grid { margin: 8px 0; gap: 7px; }
#app .game-shell[data-page="season"] .milestone-grid > div { display: grid; grid-template-columns: 32px minmax(0,1fr); align-content: center; align-items: center; column-gap: 5px; padding: 9px 5px; min-width: 0; min-height: 78px; border: 1px solid #c9af7b; border-radius: 0; background: #eddaab55; text-align: left; }
#app .game-shell[data-page="season"] .milestone-art { grid-row: 1 / 3; width: 32px; height: 42px; object-fit: contain; image-rendering: pixelated; }
#app .game-shell[data-page="season"] .milestone-grid b { font-size: 21px; line-height: 1.4; white-space: nowrap; letter-spacing: -.5px; }
#app .game-shell[data-page="season"] .milestone-grid span { margin: 0; font-size: 11px; line-height: 1.5; }

#app .game-shell[data-page="codex"] .codex-directory { border: 0; border-image: none; border-radius: 0; background: none; padding: 0; }
#app .game-shell[data-page="codex"] .codex-directory > summary { padding: 4px 5px; line-height: 1.5; min-height: 64px; border: solid transparent; border-width: 9px 12px; border-image: url(../assets/ui/button-secondary-wood-plank.png) 62 78 62 78 fill stretch; color: #fff0cd; text-shadow: 0 1px #483017; }
#app .game-shell[data-page="codex"] .codex-directory > summary b { font-size: 16px; }
#app .game-shell[data-page="codex"] .codex-directory > summary small { font-size: 11px; color: #e5cda1; }
#app .game-shell[data-page="codex"] .codex-entity-grid { gap: 9px 6px; padding: 6px 0; align-items: stretch; }
#app .game-shell[data-page="codex"] .codex-entity-card { min-width: 0; padding: 4px 3px 6px; border: solid transparent; border-width: 9px 8px; border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch; border-radius: 0; background: #f8e9c7; background-clip: padding-box; color: #705735; gap: 5px; }
#app .game-shell[data-page="codex"] .codex-entity-card.is-collected { background-color: #fff0c9; border-style: solid; }
#app .game-shell[data-page="codex"] .codex-entity-art { width: 100%; height: 82px; max-height: 82px; object-fit: contain; image-rendering: pixelated; }
#app .game-shell[data-page="codex"] .codex-entity-card > b { font-size: 14px; line-height: 1.5; }
#app .game-shell[data-page="codex"] .codex-entity-card > b small { display: block; font-size: 10px; margin: 0; }
#app .game-shell[data-page="codex"] .codex-entity-card > :is(span,small) { font-size: 11px; line-height: 1.6; }
#app .game-shell[data-page="codex"] .codex-entity-card .material-term { display: inline-block; white-space: nowrap; }
#app .game-shell[data-page="codex"] .codex-entity-card > small:last-child { margin-top: auto; padding-top: 5px; border-top: 1px solid #cdb681; width: 100%; }
#modal-root .codex-entity-detail .button.primary {
  border: solid transparent; border-width: 10px 13px;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 62 78 62 78 fill stretch;
  background: none; border-radius: 0; box-shadow: none; min-height: 50px;
  padding: 1px 3px; color: #fff0cd; text-shadow: 0 1px #483017; font-size: 14px;
}
@container (max-width: 340px) {
  #app .game-shell[data-page="season"] .milestone-grid > div { grid-template-columns: 25px minmax(0,1fr); column-gap: 4px; padding-inline: 4px; }
  #app .game-shell[data-page="season"] .milestone-art { width: 25px; height: 36px; }
  #app .game-shell[data-page="season"] .milestone-grid b { font-size: 16px; }
}

/* The full counter has its own line. Longer balances use the whole paper
   width instead of competing with a fixed icon beside them. */
#app .game-shell[data-page] .wallet-chip {
  flex-direction: column; gap: 0; justify-content: center;
  padding: 0 1px; line-height: 1;
}
#app .game-shell[data-page] .wallet-label {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; height: 17px; font-size: 10px; line-height: 1;
}
#app .game-shell[data-page] .wallet .resource-icon { flex: 0 0 15px; width: 15px; height: 17px; }
#app .game-shell[data-page] .wallet-chip b { display: block; max-width: 100%; font-size: 14px; line-height: 16px; }
#app .game-shell[data-page] .wallet-chip b[data-wallet-length="medium"] { font-size: 12px; }
#app .game-shell[data-page] .wallet-chip b[data-wallet-length="long"] { font-size: 10px; }

/* Keep the illustrated home action substantial without replacing the
   current/next recipe information or covering the continuous forest. */
#app .game-shell[data-page="camp"] .mother-upgrade-split h2 { font-size: 15px; line-height: 1.3; }
#app .game-shell[data-page="camp"] .mother-upgrade-split .stat-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1px 3px;
}
#app .game-shell[data-page="camp"] .mother-upgrade-split .stat-row > span { grid-row: 1; grid-column: 1; order: initial; }
#app .game-shell[data-page="camp"] .mother-upgrade-split .stat-row > b { grid-row: 1; grid-column: 2; order: initial; white-space: nowrap; }
#app .game-shell[data-page="camp"] .mother-upgrade-split .stat-row > small { grid-row: 2; grid-column: 1 / -1; order: initial; justify-self: end; font-size: 10px; }
#app .game-shell[data-page="camp"] :is(.mother-upgrade-split,.camp-upgrade-compact) .button {
  min-height: 58px; font-size: 15px; line-height: 1.25;
  border-width: 12px 14px 12px 32px !important;
}

/* Recent trips are individual illustrated journal leaves. Each leaf has its
   own frame, so an expanding history never stretches one tall decoration. */
#app .game-shell[data-page] .log-entry {
  border: solid transparent; border-width: 13px 12px;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch;
  border-radius: 0; background: #f9ebca; background-clip: padding-box;
  padding: 6px 7px; margin: 12px 0; color: #5c4024;
}
#app .game-shell[data-page] .journey-record-heading {
  display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center;
  gap: 10px; padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid #c9ac74;
}
#app .game-shell[data-page] .journey-record-art { width: 76px; height: 68px; object-fit: contain; image-rendering: pixelated; }
#app .game-shell[data-page] .journey-record-heading > div { min-width: 0; }
#app .game-shell[data-page] .journey-record-heading small { display: block; color: #907044; font-size: 10px; margin-bottom: 3px; }
#app .game-shell[data-page] .journey-record-heading strong { display: block; font-size: 16px; line-height: 1.4; }
#app .game-shell[data-page] .journey-record-result { display: inline-block; margin-top: 4px; color: #4e7138; font-size: 11px; font-weight: bold; }
#app .game-shell[data-page] .log-entry.is-risk .journey-record-result { color: #9b4c2e; }
#app .game-shell[data-page] .log-entry p { font-size: 11px; line-height: 1.7; color: #82633b; margin: 5px 0; }
#app .game-shell[data-page] .log-entry h3 { margin: 9px 0 7px; font-size: 12px; color: #5c4024; }
#app .game-shell[data-page] .log-entry > .resource-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px 5px; padding: 7px 0; border-block: 1px solid #dec794; }
#app .game-shell[data-page] .log-entry .resource-value { min-width: 0; gap: 4px; }
#app .game-shell[data-page] .log-entry .resource-value > span { display: flex; flex-direction: column; gap: 2px; font-size: 10px; }
#app .game-shell[data-page] .log-entry .resource-value b { font-size: 15px; line-height: 1.2; }
#app .game-shell[data-page] .log-entry .resource-icon { width: 22px; height: 27px; flex: 0 0 22px; object-fit: contain; }

/* Reserve a real footer row for dispatch. A sticky row inside the long
   ledger used to paint over the companion's last attribute line. */
#app .game-shell[data-page="adventure"] .screen-scroll { margin-bottom: 78px; }
#app .game-shell[data-page="adventure"] .mother-departure-row {
  position: absolute; bottom: 72px; left: 6px; right: 6px;
  margin: 0; min-height: 58px;
}

/* A normal expedition has already deposited its cargo. Give that real
   outcome the same homecoming art language as the offline reference. */
#app .game-shell[data-page="trip"] .screen-scroll:has(.mother-return) {
  background: linear-gradient(#203c2944,#203c2966), url(../assets/environments/scene-night-mother-v2.png) center bottom / auto 200% no-repeat #203c29;
}
#app .game-shell[data-page="trip"] .mother-return {
  display: grid; gap: 9px; padding: 4px 8px 16px;
  background: linear-gradient(#203c2911,#203c2999), url(../assets/environments/scene-night-mother-v2.png) center top / 100% auto no-repeat;
}
#app .game-shell[data-page="trip"] .mother-return-hero { position: relative; height: clamp(150px,calc(100svh - 542px),178px); }
#app .game-shell[data-page="trip"] .mother-return-hero h1 {
  position: absolute; left: 50%; top: 2px; transform: translateX(-50%); z-index: 2;
  width: 180px; margin: 0; padding: 4px 6px; text-align: center; font-size: 23px; line-height: 1.2;
  border: solid transparent; border-width: 8px 12px;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 62 78 62 78 fill stretch;
  color: #ffe9ad; text-shadow: 0 2px #52351c;
}
#app .game-shell[data-page="trip"] .mother-return-animal { position: absolute; bottom: 24px; width: 28%; height: min(112px,calc(100% - 58px)); object-fit: contain; object-position: bottom; image-rendering: pixelated; }
#app .game-shell[data-page="trip"] .mother-return-animal[data-side="0"] { left: 10%; }
#app .game-shell[data-page="trip"] .mother-return-animal[data-side="1"] { right: 10%; }
#app .game-shell[data-page="trip"] .mother-return-hero > p { position: absolute; bottom: 0; width: 100%; padding: 4px; background: #392b22c9; color: #fff0ca; text-align: center; font-size: 11px; line-height: 1.5; }
#app .game-shell[data-page="trip"] .mother-return > .log-entry { margin: 0; --recipe-frame-scale: .055; }
#app .game-shell[data-page="trip"] .mother-return-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#app .game-shell[data-page="trip"] .mother-return-actions .button { min-height: 58px; font-size: 15px; }
#app .game-shell[data-page="trip"] .mother-return-growth {
  display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 10px; align-items: start;
  border: solid transparent; border-width: 13px 12px;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 100 125 95 125 fill stretch;
  background: #f9ebca; background-clip: padding-box; padding: 5px 6px; color: #5c4024;
}
#app .game-shell[data-page="trip"] .mother-return-growth > img { width: 75px; height: 90px; object-fit: contain; }
#app .game-shell[data-page="trip"] .mother-return-growth h2 { font-size: 15px; margin: 0 0 4px; }
#app .game-shell[data-page="trip"] .mother-return-growth p { font-size: 11px; line-height: 1.6; }
#app .game-shell[data-page="trip"] .mother-return-growth .resource-list { gap: 4px 8px; font-size: 11px; margin-top: 5px; }
#app .game-shell[data-page="trip"] .mother-return-growth .resource-value b { font-size: 13px; }
#app .game-shell[data-page="trip"] .mother-return-growth .resource-icon { width: 20px; height: 22px; }
#app .game-shell[data-page="trip"] .mother-return-growth-identity > img { width: 100%; height: 112px; object-fit: contain; }
#app .game-shell[data-page="trip"] .mother-return-growth-identity > p { margin: 5px 0 0; text-align: center; color: #85633a; font-size: 10px; }
#app .game-shell[data-page="trip"] .mother-return-growth-recipe { min-width: 0; }
#app .game-shell[data-page="trip"] .mother-return-growth-recipe h2 { font-size: 17px; line-height: 1.5; }
#app .game-shell[data-page="trip"] .mother-return-growth-recipe h2 > span { display: block; color: #91602c; }
#app .game-shell[data-page="trip"] .mother-return-growth-recipe h3 { margin: 7px 0 4px; font-size: 12px; }
#app .game-shell[data-page="trip"] .mother-return-growth-recipe .mother-columns { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
#app .game-shell[data-page="trip"] .mother-return-growth-recipe .resource-list { flex-direction: column; align-items: start; }
#app .game-shell[data-page="trip"] .mother-return-growth-recipe .stat-row { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 11px; margin: 5px 0; }
#app .game-shell[data-page="trip"] .mother-return-growth-recipe .stat-row b { font-size: 16px; color: #4c7239; white-space: nowrap; }
#app .game-shell[data-page="trip"] .mother-return-growth-recipe .stat-row small { flex-basis: 100%; font-size: 10px; }
#app .game-shell[data-page="trip"] .mother-return-growth-recipe .mother-payment { border-top: 1px solid #c5a264; margin-top: 9px; padding-top: 8px; font-size: 11px; }
#app .game-shell[data-page="trip"] .mother-return-next { grid-column: 1 / -1; border-top: 1px solid #c5a264; padding-top: 3px; }
#app .game-shell[data-page="trip"] .mother-return-next > summary { min-height: 44px; padding: 10px 0; font-size: 12px; font-weight: bold; cursor: pointer; }
#app .game-shell[data-page="trip"] .mother-return-next h3 { font-size: 12px; margin: 8px 0 4px; }
#app .game-shell[data-page="trip"] .mother-return-next .stat-row { flex-wrap: wrap; font-size: 12px; }
#app .game-shell[data-page="trip"] .mother-return-history > summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 7px;
  color: #ffedc4; font-size: 13px; text-shadow: 0 1px #402513; cursor: pointer; list-style: none;
  border: solid transparent; border-width: 7px 9px;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 62 78 62 78 fill stretch;
  background: #664728; background-clip: padding-box;
}
#app .game-shell[data-page="trip"] .mother-return-history > summary::-webkit-details-marker { display: none; }
#app .game-shell[data-page="trip"] .mother-return-history > summary::before {
  content: ""; width: 24px; height: 27px; flex: 0 0 24px;
  background: url(../assets/ui/nav-map-scroll.png) center / contain no-repeat; image-rendering: pixelated;
}
@container (max-width: 340px) {
  #app .game-shell[data-page] .wallet-chip b { font-size: 13px; }
  #app .game-shell[data-page] .wallet-chip b[data-wallet-length="medium"] { font-size: 11px; }
  #app .game-shell[data-page] .wallet-chip b[data-wallet-length="long"] { font-size: 9px; }
  #app .game-shell[data-page] .journey-record-heading { grid-template-columns: 62px minmax(0,1fr); gap: 8px; }
  #app .game-shell[data-page] .journey-record-art { width: 62px; height: 60px; }
  #app .game-shell[data-page] .journey-record-heading strong { font-size: 14px; }
  #app .game-shell[data-page="adventure"] .mother-route-showcase { height: 174px; min-height: 174px; padding-top: 36px; }
  #app .game-shell[data-page="adventure"] .route-showcase-card { grid-template-rows: 54px auto auto auto; }
  #app .game-shell[data-page="adventure"] .route-showcase-art { height: 54px; }
  #app .game-shell[data-page="adventure"] .mother-expedition-title { left: 50%; top: 0; transform: translateX(-50%); width: 140px; height: 29px; }
  #app .game-shell[data-page="adventure"] .mother-expedition-title b { font-size: 17px; }
  #app .game-shell[data-page="adventure"] .mother-expedition-title span { display: none; }
}

/* Keep the mother's illustrated left column beside the live recipe.
   The forest is cropped proportionally; the building always uses contain. */
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-art {
  align-self: stretch; height: auto; min-height: 165px; aspect-ratio: auto;
  margin: 0; overflow: hidden; border: 1px solid #b39a60;
  background: linear-gradient(0deg,#52794455,#e7edb71a),url(../assets/environments/scene-spring-valley-portrait-v1.png) 23% 70% / cover;
}
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-art > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  object-position: center 74%; max-height: none;
}
/* The mother's workshop recipe places cost and gains beside the building. */
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) {
  grid-template-columns: 116px minmax(0,1fr); gap: 9px; align-items: start;
}
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) > .mother-board-content { display: contents; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-art { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; margin: 0; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-content > h2 {
  grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 22px; line-height: 29px;
}
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-content > h2 span { display: block; font-size: 20px; white-space: nowrap; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-current .mother-columns {
  display: grid; grid-column: 2; grid-row: 2; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 8px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-current .mother-upgrade-cost { grid-column: auto; grid-row: auto; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-upgrade-stats {
  grid-column: auto; grid-row: auto; display: block; padding: 0 0 0 7px; border-top: 0; border-left: 1px solid #c9ab72;
}
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-content h3 { font-size: 13px; line-height: 20px; margin: 0 0 6px; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-upgrade-cost > .sufficient { position: static; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-content .resource-list { gap: 7px 9px; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .resource-value { gap: 3px; font-size: 11px; line-height: 26px; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .resource-value b { font-size: 18px; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .resource-icon { width: 22px; height: 27px; flex-shrink: 0; max-height: none; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-upgrade-cost .resource-value { max-width: 100%; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-upgrade-cost .resource-value > span { min-width: 0; white-space: normal; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-upgrade-cost .resource-value b { display: inline-block; white-space: nowrap; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) :is(.sufficient,.deficit,.muted) { font-size: 12px; line-height: 20px; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-upgrade-cost .resource-list,
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .resource-list { flex-direction: column; align-items: start; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .stat-row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: start; gap: 0; margin: 0 0 8px; font-size: 12px; line-height: 22px; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .stat-row > :is(span,b,small) { flex-basis: auto; flex-shrink: 0; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .stat-row > span { display: flex; align-items: center; gap: 3px; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .stat-row > span::before { content: ''; display: block; width: 16px; height: 21px; flex: 0 0 16px; background: url(../assets/ui/icon-duration-hourglass.png) center / contain no-repeat; image-rendering: pixelated; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .stat-row:last-child > span::before { background-image: url(../assets/ui/nav-companion-paw.png); }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .stat-row b { max-width: 100%; font-size: 23px; line-height: 29px; white-space: normal; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .stat-row small { font-size: 11px; line-height: 18px; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-content > :is(.mother-payment,.mother-next-shortfall) {
  grid-column: 1 / -1; grid-row: 3; margin: 0; padding-top: 8px; font-size: 12px; line-height: 20px;
}
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-payment > .resource-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px 10px; margin-top: 3px; }
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-content > :is(.button,.text-button) {
  grid-column: 1 / -1; grid-row: 4; margin: 0; min-height: 50px; font-size: 15px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-next { grid-template-columns: 116px minmax(0,1fr) minmax(0,1.1fr); }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-art { grid-row: 1 / span 2; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > h2 { grid-column: 2 / -1; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-upgrade-cost { grid-column: 2; grid-row: 2; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .mother-upgrade-stats { grid-column: 3; grid-row: 2; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .mother-next-shortfall { grid-row: 3; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-next-shortfall .deficit-label { display: none; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > :is(.button,.text-button) { grid-row: 4; }
@container (max-width: 340px) {
  #app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) { grid-template-columns: 70px minmax(0,1fr); gap: 6px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-next { grid-template-columns: 70px minmax(0,.9fr) minmax(0,1.1fr); }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-current .mother-columns { gap: 6px; }
  #app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-content > h2 { font-size: 20px; line-height: 27px; }
  #app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-content > h2 span { font-size: 18px; }
  #app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-upgrade-stats { padding-left: 5px; }
}

/* Animal recipes share the mother's portrait-and-recipe composition. Let the
   effects, balance and action use the whole paper instead of a narrow column. */
@container (max-width: 365px) {
  #app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) { grid-template-columns: 92px minmax(0,1fr); }
  #app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-art { grid-row: 1 / span 3; min-height: 148px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-current .mother-columns { display: contents; }
  #app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-upgrade-cost { grid-column: 2; grid-row: 2 / span 2; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .mother-upgrade-stats,
  #app .game-shell[data-page="growth"] .mother-growth-board.is-current .mother-upgrade-stats {
    grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 4px 10px; padding: 7px 0 0; border-left: 0; border-top: 1px solid #c9ab72;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-upgrade-stats > h3 { grid-column: 1 / -1; }
  #app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-content > :is(.mother-payment,.mother-next-shortfall) { grid-row: 5; }
  #app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) .mother-board-content > :is(.button,.text-button) { grid-row: 6; }
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal {
  grid-template-columns: 116px minmax(0,1fr); gap: 8px 12px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal > .mother-board-content,
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-columns { display: contents; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-art {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  height: auto; min-height: 0; aspect-ratio: 1 / 1.18; margin: 0;
  border: 0; overflow: visible;
  background: radial-gradient(ellipse at 50% 82%,#78945088,transparent 68%);
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-art > img {
  position: static; width: 100%; height: 100%; object-fit: contain;
  object-position: center; max-height: none;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > h2 {
  grid-column: 2; grid-row: 1; align-self: end; font-size: 18px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-cost {
  grid-column: 2; grid-row: 2; align-self: start;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > :is(.animal-availability-panel,.mother-payment,.button,.text-button,.mother-animal-next) {
  grid-column: 1 / -1; grid-row: auto;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats {
  grid-column: 1 / -1; grid-row: auto; display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4px 12px;
  border-top: 1px solid #c9ab72; padding-top: 8px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats > h3 { grid-column: 1 / -1; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats > .stat-row {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 2px;
  padding-left: 25px; position: relative; margin: 0;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats > .stat-row::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 24px;
  background: url(../assets/ui/nav-companion-paw.png) center / contain no-repeat;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats > .stat-row:last-child::before {
  background-image: url(../assets/ui/icon-capacity-crate.png);
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats .stat-row b { font-size: 19px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats .stat-row small { white-space: nowrap; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > .button {
  min-height: 52px; font-size: 16px; margin-top: 0;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next { padding-top: 9px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next-stats {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4px 12px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next-stats .stat-row {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 2px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next-stats .stat-row b { font-size: 17px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next-stats .stat-row small { white-space: nowrap; }
@container (max-width: 340px) {
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal { grid-template-columns: 104px minmax(0,1fr); gap: 8px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats { gap: 4px 8px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats > .stat-row { padding-left: 22px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats > .stat-row::before { width: 18px; height: 21px; }
}

/* These two actions share the modal confirmation handler, but their visual
   roles differ: collect the reward, then choose a growth destination. */
#modal-root .mother-offline-claim.button {
  --rich-button-art: url(../assets/ui/button-claim-gold-basket-v1.png);
  border-image: url(../assets/ui/button-claim-gold-basket-v1.png) 266 260 266 740 fill stretch !important;
  border-width: 15px 15px 15px 42px !important;
  color: #573315; text-shadow: 0 1px #fff4b7;
}
#modal-root .mother-offline-growth.button {
  --rich-button-art: url(../assets/ui/button-upgrade-green-hammer.png);
  border-image: url(../assets/ui/button-upgrade-green-hammer.png) 62 78 62 165 fill stretch !important;
  border-width: 15px 18px 15px 40px !important;
  color: #fff3ce; text-shadow: 0 1px #294823;
}
#app .game-shell[data-page="trip"] [data-action="continue-trip"].button {
  --rich-button-art: url(../assets/ui/button-continue-green-fastforward-v1.png);
  border-image: url(../assets/ui/button-continue-green-fastforward-v1.png) 260 260 260 700 fill stretch !important;
  border-width: 15px 15px 15px 41px !important;
  min-height: 52px; color: #fff4d5; text-shadow: 0 1px #294823;
}

/* The last ledger line needs room above the frame's leaf ornaments. */
#app .game-shell[data-page] .log-entry { padding-bottom: 14px; }

/* Reuse the original button paintings at their visible bounds. Percentage
   height plus aspect-ratio gives every end cap one uniform scale, regardless
   of the button width or whether its label needs a second line. */
#app .game-shell[data-page] button.illustrated-button[data-button-skin]:is(.button,.nav-item,.text-button),
#app .start-screen button.illustrated-button[data-button-skin],
#modal-root .modal button.illustrated-button[data-button-skin] {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  border: 0 !important; border-image: none !important; background: none !important;
  box-shadow: none !important; padding: 7px 15px 7px 53px !important;
}
#app .game-shell[data-page] button.illustrated-button[data-button-skin="wood"]:is(.button,.nav-item,.text-button),
#modal-root .modal button.illustrated-button[data-button-skin="wood"] { padding-inline: 16px !important; }
#app .game-shell[data-page] button.illustrated-button[data-button-skin]::before,
#app .start-screen button.illustrated-button[data-button-skin]::before,
#modal-root .modal button.illustrated-button[data-button-skin]::before { content: none !important; }
.illustrated-button-skin { position: absolute; inset: 0; z-index: -1; display: flex; pointer-events: none; }
.illustrated-button-skin .button-skin-part { display: block; height: 100%; min-width: 0; }

/* The dismiss action shares the native wood caps with the other controls.
   Its 44px target and each dialog's existing position remain unchanged. */
#modal-root .modal > .close-button[data-action="close-modal"] {
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-image: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff1cf;
  text-shadow: 0 2px #3d2718;
}
#modal-root .modal > .close-button > .close-mark {
  position: relative;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
}
#modal-root .modal > .close-button:hover { filter: brightness(1.12); }
#modal-root .modal > .close-button:active { filter: brightness(.9); }
#modal-root .modal > .close-button:focus-visible {
  outline: 2px solid #f2cd6c;
  outline-offset: 2px;
}
.illustrated-button-skin .is-cap { flex: 0 0 auto; }
.illustrated-button-skin .is-middle { flex: 1 1 0; aspect-ratio: auto !important; }
.illustrated-button-skin svg { display: block; width: 100%; height: 100%; overflow: hidden; image-rendering: pixelated; }
.art-window {
  display: block; width: 100%; height: 100%; overflow: hidden;
  background-size: var(--art-width) var(--art-height);
  background-position: var(--art-x) var(--art-y);
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
button.illustrated-button > .button-label { position: relative; pointer-events: none; line-height: 1.25; }
#app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure.illustrated-button { padding-left: 45px !important; padding-right: 8px !important; }

/* Continuous resource rail and proportional navigation frames. The corner
   source windows all use the same scale on both axes. */
.paper-frame-skin {
  --paper-frame-scale: .085;
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  display: grid;
  grid-template-columns: calc(114px * var(--paper-frame-scale)) minmax(0,1fr) calc(114px * var(--paper-frame-scale));
  grid-template-rows: calc(150px * var(--paper-frame-scale)) minmax(0,1fr) calc(150px * var(--paper-frame-scale));
}
.paper-frame-skin > :is(svg,.art-window) { width: 100%; height: 100%; display: block; overflow: hidden; image-rendering: pixelated; }
/* Text layout rules may target descendant spans. The nine decorative cells
   must keep their own three-by-three grid rather than inherit text columns. */
.paper-frame-skin > .art-window { grid-area: auto !important; }
#app .game-shell[data-page] .topbar {
  display: flex; gap: 3px; align-items: center;
  flex-basis: 58px; height: 58px; min-height: 58px;
  padding: 2px 4px; border: 0; box-shadow: 0 2px #25391e;
}
#app .game-shell[data-page] .wallet {
  position: relative; isolation: isolate; flex: 1; min-width: 0;
  height: 54px; margin: 0; gap: 0; padding: 5px 9px;
}
#app .game-shell[data-page] .topbar .wallet-chip {
  height: 44px; min-height: 44px; border: 0; border-image: none;
  background: none; box-shadow: none; color: #78562f; text-shadow: 0 1px #fff7df;
  padding: 0 2px; overflow: hidden;
}
#app .game-shell[data-page] .wallet-chip + .wallet-chip { border-left: 1px solid #bda06a77; }
#app .game-shell[data-page] .wallet-label { font-size: 10px; height: 18px; }
#app .game-shell[data-page] .wallet-chip b { color: #49321b; font-size: 15px; line-height: 18px; }
#app .game-shell[data-page] .wallet-chip b[data-wallet-length="medium"] { font-size: 12px; }
#app .game-shell[data-page] .wallet-chip b[data-wallet-length="long"] { font-size: 9px; }
#app .game-shell[data-page] .wallet-offline-shortcut {
  position: relative; isolation: isolate; flex: 0 0 44px; height: 50px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 2px; border: 0; border-radius: 0;
  background: none; color: #674321; box-shadow: none;
  text-shadow: 0 1px #fff3cc; cursor: pointer;
}
#app .game-shell[data-page] .wallet-offline-shortcut .paper-frame-skin { --paper-frame-scale: .065; }
#app .game-shell[data-page] .wallet-offline-art { width: 37px; height: 27px; object-fit: contain; image-rendering: pixelated; }
#app .game-shell[data-page] .wallet-offline-shortcut small { font-size: 10px; line-height: 13px; }
#app .game-shell[data-page] .bottom-nav {
  flex-basis: 74px; height: 74px; min-height: 74px;
  gap: 3px; padding: 4px 5px 6px;
}
#app .game-shell[data-page] .bottom-nav .nav-item:not(.camp-main-departure) {
  position: relative; isolation: isolate; height: 64px; min-height: 64px;
  border: 0; border-image: none; background: none; box-shadow: none;
  grid-template-rows: 32px 16px; gap: 0; align-content: center;
  padding: 7px 5px 6px; overflow: visible;
}
#app .game-shell[data-page] .bottom-nav .nav-item .nav-art { width: 33px; height: 32px; max-height: 32px; }
#app .game-shell[data-page] .bottom-nav .nav-item b { font-size: 13px; line-height: 16px; }
#app .game-shell[data-page] .bottom-nav .nav-item.active { filter: none; transform: translateY(-1px); }
#app .game-shell[data-page] .bottom-nav .nav-item.active .paper-frame-skin {
  filter: sepia(.35) saturate(2.4) brightness(1.09);
}
#app .game-shell[data-page] .bottom-nav .nav-item.active b { color: #765013; }
#app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure {
  height: 58px; min-height: 58px; align-self: center; overflow: visible;
}
#app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure.illustrated-button { padding-left: 53px !important; padding-right: 8px !important; }
#app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure b { line-height: 1.2; }
#app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure .button-label { font-size: 15px; line-height: 1.2; }
#app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure b > span { font: inherit; }
#app .game-shell[data-page="adventure"] .mother-departure-row { bottom: 78px; }
@container (max-width: 380px) {
  #app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure :is(b,.button-label) { display: block; font-size: 14px; line-height: 1.2; white-space: nowrap; }
  #app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure b > span { display: block; }
  #app .game-shell[data-page] .wallet-chip b { font-size: 14px; }
  #app .game-shell[data-page] .bottom-nav .nav-item b { font-size: 12px; }
}

/* Recipe panels use the same scale in both directions at every corner.
   Source canvas: 576x437. Cuts: x=160/416, y=180/257. Transparent outer
   margins stay in the source; only the timber spans and paper center stretch. */
#app .game-shell[data-page] :is(.mother-growth-board,.mother-party-panel,.mother-reward-panel,.mother-growth-panel,.mother-trip-status,.mother-trip-cargo,.mother-trip-objective,.log-entry,.mother-return-growth),
#app .game-shell[data-page="tap"] :is(.mother-tap-info,.mother-upgrade-split,.mother-upgrade-inventory),
#app .game-shell[data-page="missions"] .mission,
#app .game-shell[data-page="codex"] .codex-entity-card,
#app .game-shell[data-page="season"] .screen-content > .parchment,
#app .game-shell[data-page="landmarks"] .landmark-card,
#app .game-shell[data-page="growth"] :is(.animal-select,.landmark-card,.craft-card,.trade-card),
#app .game-shell[data-page="adventure"] :is(.route-showcase-card,.dispatch-lineup),
#app .game-shell[data-page="adventure"] .mother-advanced.dispatch-options[open],
#app .game-shell[data-page="adventure"] .dispatch-companions[open],
#app .game-shell[data-page="adventure"] .dispatch-comparing .plan-comparison,
#app .game-shell[data-page="settings"] .screen-content > .parchment,
#modal-root .camp-journal-content :is(.feature-button,.mother-upgrade-inventory),
#modal-root .mother-offline-modal :is(.mother-offline-sources,.mother-offline-inventory,.mother-offline-upgrade) {
  --recipe-frame-scale: .1;
  border-style: solid; border-color: transparent;
  border-width: calc(180px * var(--recipe-frame-scale)) calc(160px * var(--recipe-frame-scale)) !important;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 180 160 180 160 fill stretch !important;
  background-clip: padding-box;
}
/* Smaller entries share the exact same source cuts, at a lighter scale.
   Keep leaves inside the corners instead of stretching them along the rails. */
#app .game-shell[data-page="tap"] :is(.mother-tap-info,.mother-upgrade-split),
#app .game-shell[data-page="missions"] .mission,
#app .game-shell[data-page="season"] .screen-content > .parchment,
#app .game-shell[data-page="growth"] :is(.landmark-card,.craft-card,.trade-card),
#app .game-shell[data-page="landmarks"] .landmark-card { --recipe-frame-scale: .14; }
#app .game-shell[data-page="growth"] .animal-select { --recipe-frame-scale: .06; }
#app .game-shell[data-page="adventure"] .route-showcase-card { --recipe-frame-scale: .055; }
#app .game-shell[data-page="adventure"] .dispatch-lineup,
#app .game-shell[data-page="adventure"] .dispatch-comparing .plan-comparison { --recipe-frame-scale: .065; }
#app .game-shell[data-page="adventure"] .dispatch-companions[open] {
  border-radius: 0; padding: 3px 5px 5px; background: #f6e6bf; background-clip: padding-box;
}
#modal-root .camp-journal-content .feature-button { --recipe-frame-scale: .09; }
#app .game-shell[data-page="codex"] .codex-entity-card { --recipe-frame-scale: .08; }
#app .game-shell[data-page="tap"] .mother-upgrade-inventory,
#modal-root .camp-journal-content .mother-upgrade-inventory { --recipe-frame-scale: .065; }
#app .game-shell[data-page="tap"] .mother-upgrade-split { padding: 5px 6px 7px; }
#app .game-shell[data-page="tap"] .mother-upgrade-inventory { margin-inline: 7px; }
#app .game-shell[data-page="season"] .talent-card { border-radius: 0; box-shadow: none; }
#app .game-shell[data-page="season"] .talent-card::before,
#app .game-shell[data-page="season"] .talent-card::after { content: none; }
#app .game-shell[data-page="settings"] .screen-content > .parchment {
  padding: 8px 10px 15px;
}
#app .game-shell[data-page="settings"] .settings-panel > .muted {
  padding-left: 0; margin: 12px 0 0; line-height: 1.6;
}

/* Inline notes follow the mother's tinted paper strips. The irregular whole
   leaf painting cannot be stretched around text of arbitrary width/height. */
#app .game-shell[data-page] .screen-content .notice,
#modal-root .modal .notice {
  border: 1px solid #c5aa76;
  border-left: 3px solid #7c9252;
  border-image: none;
  border-radius: 0;
  background: linear-gradient(100deg,#e9ddb8,#f5e8c8);
  padding: 8px 10px;
  color: #53643c; font-size: 12px; line-height: 1.7;
  box-shadow: inset 0 1px #fff5dc;
}

/* The wide modal painting stretched its central leaves down a tall phone.
   Use the same proportional recipe corners as the growth page instead. */
#modal-root .modal:not(.mother-offline-modal) {
  border-style: solid; border-color: transparent;
  border-width: 18px 16px !important;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 180 160 180 160 fill stretch !important;
  background: #f6e6bf; background-clip: padding-box;
}
#modal-root .upgrade-confirm-sheet { display: flex; flex-direction: column; gap: 11px; }
#modal-root .upgrade-confirm-sheet :is(h3,h4,p) { margin: 0; }
#modal-root .upgrade-confirm-sheet h3 { font-size: 13px; line-height: 1.5; }
#modal-root .upgrade-confirm-sheet h4 { font-size: 11px; line-height: 1.5; margin-bottom: 4px; color: #75522f; }
#modal-root .upgrade-confirm-identity { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; gap: 12px; }
#modal-root .upgrade-confirm-portrait {
  height: 112px; padding: 5px; border: 2px solid #a17b44;
  background: url(../assets/environments/scene-growth-mother-v2.png) center / cover;
  box-shadow: inset 0 0 0 2px #f1d79a,0 2px #73512e;
}
#modal-root .upgrade-confirm-portrait img { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center bottom; }
#modal-root .upgrade-confirm-sheet[data-upgrade-kind="workshop"] .upgrade-confirm-portrait {
  padding: 1px;
  background: radial-gradient(ellipse at 50% 75%,#76944d88,transparent 72%),#e9dbb6;
}
#modal-root .upgrade-confirm-identity h3 { font-size: 21px; margin: 1px 0 4px; }
#modal-root .upgrade-confirm-identity p { color: #8a673e; font-size: 11px; line-height: 1.6; }
#modal-root .upgrade-confirm-identity strong { font-size: 18px; line-height: 1.5; color: #8f4b24; }
#modal-root .upgrade-confirm-identity :is(i,b) { color: #3e702f; font-style: normal; }
#modal-root .upgrade-confirm-current { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
#modal-root .upgrade-confirm-current > div { min-width: 0; }
#modal-root .upgrade-confirm-current > div + div { border-left: 1px solid #c9aa70; padding-left: 10px; }
#modal-root .upgrade-confirm-current > div > h3 { margin-bottom: 5px; }
#modal-root .upgrade-confirm-current .resource-list { flex-direction: column; align-items: start; gap: 5px; }
#modal-root .upgrade-confirm-sheet .resource-value { font-size: 11px; gap: 3px; line-height: 1.5; }
#modal-root .upgrade-confirm-sheet .resource-value b { font-size: 15px; }
#modal-root .upgrade-confirm-sheet .resource-icon { width: 20px; height: 23px; object-fit: contain; }
#modal-root .upgrade-confirm-stats .stat-row { display: flex; flex-direction: column; align-items: start; gap: 0; margin: 0 0 7px; font-size: 11px; line-height: 1.5; }
#modal-root .upgrade-confirm-stats .stat-row b { font-size: 19px; line-height: 1.35; white-space: nowrap; color: #426d30; }
#modal-root .upgrade-confirm-stats .stat-row small { font-size: 10px; color: #8b7047; }
#modal-root .upgrade-confirm-stats .stat-row i { color: #9c8755; font-style: normal; }
#modal-root .upgrade-confirm-sheet :is(.deficit,.sufficient,.muted) { font-size: 11px; line-height: 1.6; margin-top: 6px; }
#modal-root .upgrade-confirm-sheet .text-button { min-height: 44px; max-width: 100%; padding: 6px 0; font-size: 11px; text-align: left; }
#modal-root :is(.upgrade-confirm-balance,.upgrade-confirm-next,.upgrade-confirm-inventory) { border-top: 1px solid #c9aa70; padding-top: 9px; }
#modal-root .upgrade-confirm-balance { background: #e2ce9b55; padding: 7px 6px; }
#modal-root .upgrade-confirm-balance h3 { color: #8b4b2f; margin-bottom: 5px; }
#modal-root .upgrade-confirm-balance .resource-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 8px; }
#modal-root .upgrade-confirm-balance .resource-value { flex-wrap: wrap; }
#modal-root .upgrade-confirm-next > h3 { margin-bottom: 7px; font-size: 15px; }
#modal-root .upgrade-confirm-next > h3 i { font-style: normal; color: #4d7335; }
#modal-root .upgrade-confirm-inventory summary { min-height: 44px; padding: 8px 0; font-size: 12px; font-weight: bold; color: #705131; cursor: pointer; }
#modal-root .upgrade-confirm-inventory h3 { margin: 6px 0; }
/* Registration source window only removes its transparent surround.
   The 1330x670 painted card and growth portrait both keep their ratio. */
#modal-root .recruit-sheet { display: flex; flex-direction: column; gap: 12px; }
#modal-root .recruit-registration { position: relative; flex: none; width: 100%; aspect-ratio: 1330 / 670; }
#modal-root .recruit-registration > svg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#modal-root .recruit-registration > div { position: absolute; left: 26.5%; top: 21%; width: 65%; height: 59%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#modal-root .recruit-registration h3 { margin: 0 0 5px; font-size: 16px; line-height: 1.5; }
#modal-root .recruit-registration .resource-list { justify-content: center; gap: 4px 10px; }
#modal-root .recruit-registration :is(.deficit,.sufficient) { margin: 5px 0 0; font-size: 11px; line-height: 1.6; }
#modal-root .recruit-intro { grid-template-columns: 104px minmax(0,1fr); gap: 13px; }
#modal-root .recruit-portrait { height: 130px; }
#modal-root .recruit-intro .recruit-portrait .recruit-art { width: 100%; height: 100%; max-height: none; }
#modal-root .recruit-intro h3 { font-size: 22px; margin-bottom: 5px; }
#modal-root .recruit-intro h3 small { font-size: 12px; color: #8b7047; }
#modal-root .recruit-intro strong { font-size: 17px; color: #426d30; }
#modal-root .recruit-primary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
#modal-root .recruit-primary .resource-icon { width: 23px; height: 26px; }
#modal-root .recruit-primary b { font-size: 13px; }
#modal-root .recruit-route {
  display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center;
  gap: 0 9px; padding: 10px 0 0; border-top: 1px solid #c9aa70;
}
#modal-root .recruit-route-art { width: 46px; height: 50px; object-fit: contain; }
#modal-root .recruit-route h3 { margin: 0 0 3px; color: #8b7047; font-size: 12px; }
#modal-root .recruit-route b { display: block; font-size: 14px; line-height: 1.6; }
#modal-root .recruit-route p { margin: 3px 0 0; font-size: 11px; line-height: 1.6; }
#modal-root .recruit-route .text-button { grid-column: 2; min-height: 44px; justify-self: start; padding: 7px 0; text-align: left; font-size: 12px; }
#modal-root .recruit-once-note { padding: 8px; margin: 0; border: 1px solid #ceb17b; background: #e2ce9b40; font-size: 11px; line-height: 1.7; }
#modal-root .codex-entity-detail:has(.codex-portrait) > header { grid-template-columns: 100px minmax(0,1fr); gap: 12px; }
#modal-root .codex-portrait { height: 130px; }
#modal-root .codex-entity-detail .codex-detail-name { display: block; font-size: 22px; line-height: 1.4; }
#modal-root .codex-detail-name small { font-size: 12px; color: #8b7047; }
#modal-root .codex-primary-material { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#modal-root .codex-primary-material .resource-icon { width: 23px; height: 26px; object-fit: contain; }
#modal-root .codex-primary-material b { font-size: 13px; }
/* Keep the letter painting intact and put the route reference on its paper.
   The title, condition and yield share the plain area clear of the quill/seal. */
#modal-root .codex-letter-copy {
  inset: 18% 21% 26% 15%; padding: 0; overflow: visible;
  display: flex; flex-direction: column; gap: 6px;
}
#modal-root .codex-letter-copy > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 5px;
  padding: 0 0 6px 20px; border-bottom: 1px solid #c8aa70; color: #4b7132;
}
#modal-root .codex-letter-copy > header b { font-size: 12px; line-height: 1.5; white-space: nowrap; }
#modal-root .codex-letter-copy > header small { font-size: 10px; line-height: 1.5; white-space: nowrap; color: #8b7047; }
#modal-root .codex-letter-copy > h3 { margin: 0 !important; font-size: 17px; line-height: 1.45; }
#modal-root .codex-letter-copy > p { margin: 0; font-size: 12px; line-height: 1.65; }
#modal-root .codex-letter-yield { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #c8aa70; }
#modal-root .codex-letter-yield h4 { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: #8b4b2f; }
#modal-root .codex-letter-yield .resource-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 8px; margin: 0; }
#modal-root .codex-letter-yield .resource-value { min-width: 0; font-size: 11px; line-height: 1.5; gap: 3px; white-space: nowrap; }
#modal-root .codex-letter-yield .resource-value b { font-size: 15px; }
#modal-root .codex-letter-yield .resource-icon { width: 19px; height: 23px; object-fit: contain; }
#modal-root .codex-letter-footnote { margin: 2px 0 9px; padding: 8px; border: 1px solid #ceb17b; background: #e2ce9b40; font-size: 11px; line-height: 1.7; color: #8b7047; }
#modal-root .codex-letter-appendix { margin-top: 10px; padding-top: 9px; border-top-style: solid; }
#modal-root .codex-letter-appendix > h3 { margin: 0 0 8px; }
#modal-root .codex-letter-appendix .resource-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 10px; }
#modal-root .codex-letter-appendix .resource-value { display: flex; align-items: center; gap: 4px; }
#modal-root .codex-letter-appendix .resource-value b { font-size: 15px; }
#modal-root .codex-letter-appendix .resource-icon { width: 21px; height: 25px; object-fit: contain; }
@container (max-width: 340px) {
  #modal-root .codex-entity-detail:has(.codex-portrait) > header { grid-template-columns: 82px minmax(0,1fr); gap: 9px; }
  #modal-root .codex-portrait { height: 108px; padding: 3px; }
  #modal-root .codex-entity-detail .codex-detail-name { font-size: 20px; }
  #modal-root .codex-letter-copy { gap: 4px; }
  #modal-root .codex-letter-copy > header { padding-bottom: 4px; }
  #modal-root .codex-letter-copy > header b { font-size: 10px; }
  #modal-root .codex-letter-copy > header small { font-size: 9px; }
  #modal-root .codex-letter-copy > h3 { font-size: 13px; line-height: 1.4; }
  #modal-root .codex-letter-copy > p { font-size: 11px; line-height: 1.5; }
  #modal-root .codex-letter-yield { margin-top: 1px; padding-top: 4px; }
  #modal-root .codex-letter-yield h4 { margin-bottom: 4px; font-size: 11px; }
  #modal-root .codex-letter-yield .resource-list { gap: 3px 5px; }
  #modal-root .codex-letter-yield .resource-value { font-size: 10px; gap: 2px; }
  #modal-root .codex-letter-yield .resource-value b { font-size: 13px; }
  #modal-root .codex-letter-yield .resource-icon { width: 16px; height: 20px; }
  #modal-root .recruit-intro { grid-template-columns: 82px minmax(0,1fr); gap: 9px; }
  #modal-root .recruit-portrait { height: 108px; padding: 3px; }
  #modal-root .recruit-intro h3 { font-size: 20px; }
  #modal-root .recruit-registration h3 { margin-bottom: 3px; font-size: 12px; }
  #modal-root .recruit-registration .resource-list { gap: 3px 6px; }
  #modal-root .recruit-registration .resource-value { gap: 2px; font-size: 10px; }
  #modal-root .recruit-registration .resource-value b { font-size: 14px; }
  #modal-root .recruit-registration .resource-icon { width: 17px; height: 20px; }
  #modal-root .recruit-registration :is(.deficit,.sufficient) { margin-top: 3px; font-size: 10px; }
  #modal-root .upgrade-confirm-identity { grid-template-columns: 74px minmax(0,1fr); gap: 9px; }
  #modal-root .upgrade-confirm-portrait { height: 96px; }
  #modal-root .upgrade-confirm-identity h3 { font-size: 19px; }
  #modal-root .upgrade-confirm-current { gap: 8px; }
  #modal-root .upgrade-confirm-current > div + div { padding-left: 8px; }
  #modal-root .upgrade-confirm-sheet .resource-value b { font-size: 14px; }
  #modal-root .upgrade-confirm-stats .stat-row b { font-size: 18px; }
}

/* Supply uses the same forest, timber and paper; its manifest is settled once
   per trip, so it must not inherit the expedition's incremental bag display. */
#app .game-shell[data-page="adventure"] .supply-dispatch-hero {
  position: relative; display: flex; flex-direction: column; align-items: center;
  min-width: 0; min-height: 238px; margin: -5px -6px 0; padding: 14px 12px 9px;
  background: linear-gradient(#173d39bb,transparent 66%,#203a29b0);
  color: #fff1c4; text-align: center; isolation: isolate;
}
#app .supply-hero-heading { position: relative; z-index: 1; text-shadow: 0 2px 2px #293d26; }
#app .supply-hero-heading small { font-size: 10px; letter-spacing: 2px; }
#app .supply-hero-heading h1 { margin: 3px 0; color: #ffe3a0; font-size: 29px; line-height: 1.4; }
#app .supply-hero-heading p { margin: 0; font-size: 11px; line-height: 1.6; }
#app .supply-hero-wagon { display: block; width: 220px; height: 126px; max-height: none; object-fit: contain; margin: -5px 0 -10px; filter: drop-shadow(0 5px 3px #1d2e26aa); }
#app .supply-hero-seal { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 2px solid #bd9253; background: #48351eea; box-shadow: inset 0 0 0 1px #7f653b; text-align: left; }
#app .supply-hero-seal .ui-icon { width: 24px; height: 30px; margin: 0; object-fit: contain; }
#app .supply-hero-seal b { font-size: 19px; line-height: 1.2; }
#app .supply-hero-seal b small { display: block; margin-top: 3px; font-size: 10px; font-weight: normal; }
#app .supply-hero-seal > span { border-left: 1px solid #9e8051; padding-left: 9px; margin-left: 7px; font-size: 10px; line-height: 1.6; }
#app .supply-yield-ranges { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 8px 0; }
#app .supply-yield-ranges > div { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; background: #d3b77b33; border-block: 1px solid #c9aa70; }
#app .supply-yield-ranges .resource-icon { width: 36px; height: 38px; max-height: none; object-fit: contain; }
#app .supply-yield-ranges span { font-size: 11px; }
#app .supply-yield-ranges b { font-size: 23px; line-height: 1.3; color: #5e4327; white-space: nowrap; }
#app .supply-yield-ranges b small { margin-left: 3px; font-size: 10px; font-weight: normal; }
#app .supply-growth-note { font-size: 11px; line-height: 1.7; color: #876a42; margin: 3px 0; }
:is(#app,#modal-root) .supply-manifest-heading { display: grid; grid-template-columns: 65px minmax(0,1fr); align-items: center; gap: 9px; margin: 3px 0 8px; }
:is(#app,#modal-root) .supply-manifest-art { display: block; width: 65px; height: 70px; max-height: none; object-fit: contain; }
:is(#app,#modal-root) .supply-manifest-heading small { font-size: 11px; color: #8e6b39; }
:is(#app,#modal-root) .supply-manifest-heading h3 { font-size: 19px !important; line-height: 1.5; color: #654529; margin: 3px 0; }
:is(#app,#modal-root) .supply-manifest-heading p { font-size: 11px; line-height: 1.6; margin: 0; color: #896b46; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources,
#modal-root .supply-manifest-resources { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 8px 0; border-block: 1px solid #c8ac77; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources .resource-value,
#modal-root .supply-manifest-resources .resource-value { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; min-width: 0; font-size: 11px; white-space: nowrap; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources .resource-icon,
#modal-root .supply-manifest-resources .resource-icon { width: 31px; height: 34px; max-height: none; object-fit: contain; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources b,
#modal-root .supply-manifest-resources b { font-size: 22px; color: #654529; }
:is(#app,#modal-root) .supply-manifest-capacity { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 9px 0; font-size: 12px; line-height: 1.6; }
:is(#app,#modal-root) .supply-manifest-capacity .ui-icon { width: 22px; height: 25px; object-fit: contain; margin: 0; }
:is(#app,#modal-root) .supply-manifest-capacity b { font-size: 18px; color: #67502c; }
:is(#app,#modal-root) .supply-manifest-capacity > span { width: 100%; font-size: 10px; color: #8b7048; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-delivery-time { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px; margin: 0 0 8px; background: #dcc79055; }
#app .supply-delivery-time > .ui-icon { width: 18px; height: 22px; margin: 0; object-fit: contain; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-delivery-time b { margin-left: auto; font-size: 20px; color: #63472b; }
#app .supply-repeat-control { width: 100%; min-height: 58px; display: flex; justify-content: space-between; align-items: center; gap: 9px; text-align: left; padding: 8px; border: 1px solid #ae915d; background: #dfcda955; color: #6b5539; }
#app .supply-repeat-control strong { display: block; font-size: 13px; line-height: 1.5; }
#app .supply-repeat-control small { display: block; margin-top: 3px; font-size: 10px; line-height: 1.5; }
#app .supply-repeat-control > i { position: relative; flex: 0 0 38px; width: 38px; height: 21px; border: 2px solid #8d784f; background: #b8a67d; box-shadow: inset 0 1px 2px #57482d55; }
#app .supply-repeat-control > i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border: 1px solid #8c7445; background: #efddaf; }
#app .supply-repeat-control.is-on { background: #8ca66a33; color: #4d6538; border-color: #839558; }
#app .supply-repeat-control.is-on > i { background: #64834c; border-color: #496439; }
#app .supply-repeat-control.is-on > i::after { left: 19px; background: #ffe5a4; }
#app .supply-repeat-control:focus-visible { outline: 3px solid #a17531; outline-offset: 2px; }
/* Transport shares the compact portrait ledger, with a paired delivery/repeat
   row. Preserve the wagon view and all manifest text without burying actions. */
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="supply"] {
  --scene-height: clamp(120px,calc(100svh - 556px),190px);
}
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="supply"] :is(.mother-trip-status,.mother-trip-cargo) {
  --recipe-frame-scale: .055;
}
#app .game-shell[data-page="trip"] .supply-trip-cargo {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 8px;
}
#app .game-shell[data-page="trip"] .supply-trip-cargo > :is(h2,.supply-manifest-heading,.supply-manifest-resources,.supply-manifest-capacity,.mother-trip-actions) {
  grid-column: 1 / -1; margin: 0;
}
#app .game-shell[data-page="trip"] .supply-trip-cargo > h2 { min-height: 25px; padding-bottom: 3px; font-size: 14px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo > h2 .ui-icon { width: 21px; height: 21px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-heading { grid-template-columns: 42px minmax(0,1fr); gap: 7px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-art { width: 42px; height: 46px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-heading h3 { font-size: 14px !important; line-height: 1.4; margin: 1px 0; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-heading :is(small,p) { font-size: 10px; line-height: 1.4; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources { padding: 4px 0; gap: 5px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources .resource-value { flex-direction: row; gap: 4px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources .resource-icon { width: 23px; height: 27px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources b { font-size: 17px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-capacity { gap: 3px 5px; font-size: 10px; line-height: 1.4; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-capacity .ui-icon { width: 18px; height: 21px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-capacity b { font-size: 14px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-capacity > span { width: auto; margin-left: auto; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-delivery-time { gap: 3px; padding: 4px; margin: 0; font-size: 10px; align-content: center; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-delivery-time .ui-icon { width: 14px; height: 18px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-delivery-time b { font-size: 15px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-repeat-control {
  min-height: 48px; min-width: 0; padding: 2px 4px; gap: 5px;
  border: solid transparent; border-width: 5px 6px;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 62 78 62 78 fill stretch;
  background: #674526; background-clip: padding-box; color: #fff0ca; text-shadow: 0 1px #402513;
}
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-repeat-control strong { font-size: 11px; line-height: 1.4; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-repeat-control small { font-size: 10px; line-height: 1.3; margin-top: 1px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-repeat-control > i { flex-basis: 31px; width: 31px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-repeat-control.is-on { color: #ffe7a0; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-repeat-control.is-on > i::after { left: 12px; }
@container (max-width: 340px) {
  #app .game-shell[data-page="trip"] .supply-trip-cargo > :is(.supply-delivery-time,.supply-repeat-control) { grid-column: 1 / -1; }
}
#app .party-reward-label { display: block; margin: 6px 0; color: #846239; font-size: 11px; }
#modal-root .supply-stop-sheet { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#modal-root .supply-stop-sheet .supply-manifest-capacity { margin: 0; }
#modal-root .supply-stop-timing { display: flex; align-items: center; gap: 7px; background: #dcc79055; padding: 8px; font-size: 12px; line-height: 1.5; }
#modal-root .supply-stop-timing .ui-icon { width: 20px; height: 25px; object-fit: contain; margin: 0; }
#modal-root .supply-stop-timing b { margin-left: 5px; font-size: 20px; color: #6a4b2d; }
#modal-root .supply-stop-consequence { border-top: 1px solid #c8ac77; margin-top: 3px; padding-top: 10px; }
#modal-root .supply-stop-consequence h3 { margin: 0 0 6px; color: #9b5433; font-size: 14px; }
#modal-root .supply-stop-consequence p { margin: 4px 0; font-size: 12px; line-height: 1.7; }
@media (max-width: 360px) {
  :is(#app,#modal-root) .supply-manifest-heading { grid-template-columns: 53px minmax(0,1fr); gap: 7px; }
  :is(#app,#modal-root) .supply-manifest-art { width: 53px; height: 62px; }
  :is(#app,#modal-root) .supply-manifest-heading h3 { font-size: 17px !important; }
  #app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources b,
  #modal-root .supply-manifest-resources b { font-size: 19px; }
}

/* Landmark art keeps its native silhouette; paper follows the growth mother. */
#modal-root :is(.landmark-repair-sheet,.codex-landmark-detail,.season-confirm-sheet) { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
#modal-root :is(.landmark-repair-sheet,.codex-landmark-detail,.season-confirm-sheet) :is(h3,p,figure) { margin: 0; }
#modal-root :is(.landmark-repair-sheet,.codex-landmark-detail,.season-confirm-sheet) h3 { font-size: 14px; line-height: 1.5; }
#modal-root .landmark-state-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; position: relative; }
#modal-root .landmark-state-pair::after { content: '→'; position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); color: #8c6a35; font-size: 20px; }
#modal-root .landmark-state-pair figure { min-width: 0; text-align: center; }
#modal-root .landmark-state-art { display: block; width: 100%; height: 140px; max-height: none; object-fit: contain; }
#modal-root .landmark-state-pair figcaption { padding-top: 4px; font-size: 11px; line-height: 1.6; color: #87663f; }
#modal-root .landmark-state-pair figure:last-child figcaption { color: #416b33; font-weight: bold; }
#modal-root .landmark-effect-panel { border-block: 1px solid #c9ac72; background: #dccda044; padding: 9px 8px; }
#modal-root .landmark-effect-panel h3 { margin-bottom: 5px; color: #7b5830; font-size: 12px; }
#modal-root .landmark-effect-panel p { color: #416b33; font-size: 17px; line-height: 1.5; font-weight: bold; text-wrap: balance; }
:is(#app, #modal-root) .landmark-effect-clause { display: inline-block; max-inline-size: 100%; }
#modal-root .landmark-repair-materials h3 { margin-bottom: 7px; }
#modal-root .landmark-repair-materials .resource-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 10px; }
#modal-root .landmark-repair-materials .resource-value { min-width: 0; gap: 4px; font-size: 11px; line-height: 1.5; }
#modal-root .landmark-repair-materials .resource-value b { font-size: 17px; color: #634426; }
#modal-root .landmark-repair-materials .resource-icon { width: 25px; height: 28px; object-fit: contain; }
#modal-root .landmark-repair-materials :is(.deficit,.sufficient) { margin: 8px 0 0; font-size: 12px; }
#modal-root .landmark-repair-sheet :is(.landmark-condition,.muted) { font-size: 11px; line-height: 1.7; color: #8b6d43; }
#modal-root .codex-landmark-detail > header { display: grid; grid-template-columns: 128px minmax(0,1fr); align-items: center; gap: 12px; }
#modal-root .landmark-portrait { display: grid; place-items: center; min-width: 0; height: 145px; padding: 6px; border: 2px solid #ac8b51; background: radial-gradient(ellipse at 50% 72%,#a5af7066,transparent 72%),#ead9af; box-shadow: inset 0 0 0 2px #f5e3b8; }
#modal-root .landmark-portrait .codex-detail-art { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; }
#modal-root .codex-landmark-detail > header p { margin-top: 5px; font-size: 11px; line-height: 1.6; color: #84663f; }
#modal-root .codex-landmark-detail .codex-detail-name { font-size: 22px; }
#modal-root .landmark-codex-condition p { margin-top: 5px; }

/* Preview existing season conditions without granting the domain action. */
#app .game-shell[data-page="season"] .milestone-grid > div { grid-template-columns: 44px minmax(0,1fr); gap: 3px 6px; }
#app .game-shell[data-page="season"] .milestone-art { width: 44px; height: 50px; }
:is(#app,#modal-root) .season-requirements { border-top: 1px solid #ccb07b; padding-top: 10px; }
:is(#app,#modal-root) .season-requirements h3 { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 3px 8px; margin: 0 0 7px; font-size: 14px; line-height: 1.6; }
:is(#app,#modal-root) .season-requirements h3 small { font-size: 11px; font-weight: normal; color: #8b6c43; }
:is(#app,#modal-root) .season-requirements ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
:is(#app,#modal-root) .season-requirements li { display: grid; grid-template-columns: 25px minmax(0,1fr); align-items: center; gap: 6px; padding: 6px 5px; background: #e4cda340; }
:is(#app,#modal-root) .season-condition-mark { display: grid; place-items: center; width: 23px; height: 25px; color: #a4824f; font-size: 20px; }
:is(#app,#modal-root) .season-requirements li b { display: block; font-size: 12px; line-height: 1.6; color: #705235; }
:is(#app,#modal-root) .season-requirements li small { display: block; font-size: 11px; line-height: 1.6; color: #8f734d; }
:is(#app,#modal-root) .season-requirements .is-complete .season-condition-mark { color: #4f7639; }
:is(#app,#modal-root) .season-requirements .is-complete b { color: #4e6c37; }
:is(#app,#modal-root) .season-transition-summary { display: grid; gap: 9px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #ccb07b; }
:is(#app,#modal-root) .season-transition-summary h3 { margin: 0 0 3px; color: #8c5033; font-size: 12px; line-height: 1.6; }
:is(#app,#modal-root) .season-transition-summary section:last-child h3 { color: #4d7238; }
:is(#app,#modal-root) .season-transition-summary p { margin: 0; font-size: 11px; line-height: 1.8; color: #84663f; }
#modal-root .season-gift-heading { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 12px; align-items: center; }
#modal-root .season-oak-art { display: block; width: 100%; height: 132px; max-height: none; object-fit: contain; }
#modal-root .season-gift-heading h3 { margin: 4px 0 7px; font-size: 19px; line-height: 1.5; }
#modal-root .season-gift-heading :is(p,small) { font-size: 11px; line-height: 1.7; color: #8b6a40; }
#modal-root .season-talent-preview { display: grid; grid-template-columns: 60px minmax(0,1fr); align-items: center; gap: 10px; padding: 9px 6px; border-block: 1px solid #c9ac72; background: #dccda044; }
#modal-root .season-talent-preview .talent-art { display: block; width: 60px; height: 68px; object-fit: contain; }
#modal-root .season-talent-preview h3 { font-size: 19px; color: #5c442b; }
#modal-root .season-talent-preview p { margin: 3px 0; font-size: 12px; }
#modal-root .season-talent-preview p b { color: #496e32; font-size: 16px; }
#modal-root .season-talent-preview small { display: block; font-size: 11px; line-height: 1.7; color: #84663f; }
#modal-root .season-confirm-sheet .season-transition-summary { margin-top: 0; }
#modal-root .season-confirm-sheet .notice { margin: 0; font-size: 11px; }
@media (max-width: 360px) {
  #modal-root .landmark-state-art { height: 108px; }
  #modal-root .codex-landmark-detail > header { grid-template-columns: 104px minmax(0,1fr); gap: 8px; }
  #modal-root .landmark-portrait { height: 124px; }
  #modal-root .codex-landmark-detail .codex-detail-name { font-size: 19px; }
  #modal-root .landmark-effect-panel p { font-size: 15px; }
  #modal-root .landmark-repair-materials .resource-value b { font-size: 15px; }
  #app .game-shell[data-page="season"] .milestone-grid > div { grid-template-columns: 31px minmax(0,1fr); gap: 3px; }
  #app .game-shell[data-page="season"] .milestone-art { width: 31px; height: 40px; }
  #modal-root .season-gift-heading { grid-template-columns: 86px minmax(0,1fr); gap: 9px; }
  #modal-root .season-oak-art { height: 110px; }
  #modal-root .season-gift-heading h3 { font-size: 17px; }
  #modal-root .season-talent-preview { grid-template-columns: 45px minmax(0,1fr); gap: 7px; }
  #modal-root .season-talent-preview .talent-art { width: 45px; height: 58px; }
}

#app .game-shell[data-page="adventure"] .supply-dispatch .party-showcase-primary .ui-icon { width: 15px; height: 17px; margin: 0 2px 0 0; object-fit: contain; vertical-align: middle; }

/* A shared moon and clock distinguish rest from a locked or busy companion.
   These panels explain availability without changing any domain guard. */
:is(#app,#modal-root) .rest-moon { display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; vertical-align: middle; shape-rendering: crispEdges; }
:is(#app,#modal-root) .animal-rest-clock { display: inline-flex; align-items: center; justify-content: center; gap: 3px; color: #5b6388; white-space: nowrap; }
:is(#app,#modal-root) .animal-rest-clock b { font: inherit; font-weight: bold; font-variant-numeric: tabular-nums; }
#app .game-shell[data-page="team"] .animal-card.is-resting .animal-card-state { color: #5b6388; }
#app .game-shell[data-page="team"] .animal-card-state .rest-moon { width: 12px; height: 12px; flex-basis: 12px; }
#app .game-shell[data-page="team"] .animal-card.is-resting .animal-card-portrait { filter: saturate(.75); }
#app .game-shell[data-page="team"] .animal-card.is-resting .animal-card-specialty { color: #5b6388; }
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice.is-resting {
  background: linear-gradient(#737c8e 0 66px,#e8e2d5 66px); border-color: #8d8c9b; opacity: 1;
}
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice.is-resting .party-showcase-portrait > img { opacity: .82; filter: saturate(.6); }
#app .game-shell[data-page="adventure"] .party-showcase-card.is-resting .party-showcase-capacity { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.2; }
#app .game-shell[data-page="adventure"] .party-showcase-card.is-resting .party-showcase-capacity > small { font-size: 9px; color: #666b83; line-height: 1.4; }
#app .game-shell[data-page="adventure"] .party-showcase-capacity .animal-rest-clock { font-size: 11px; line-height: 1.3; }
#app .game-shell[data-page="adventure"] .party-showcase-capacity .rest-moon { width: 12px; height: 12px; flex-basis: 12px; }
:is(#app,#modal-root) .animal-availability-panel { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 7px; align-items: center; padding: 9px 7px; margin: 0 0 10px; background: #d8d5dd66; border-block: 1px solid #aaa6ac; color: #5b6388; }
:is(#app,#modal-root) .animal-availability-panel > .rest-moon { width: 23px; height: 23px; }
:is(#app,#modal-root) .animal-availability-panel b { font-size: 12px; line-height: 1.5; }
:is(#app,#modal-root) .animal-availability-panel strong { font-size: 19px; margin-left: 5px; font-variant-numeric: tabular-nums; }
:is(#app,#modal-root) .animal-availability-panel p { margin: 4px 0 0 !important; font-size: 11px !important; line-height: 1.6 !important; color: inherit; }
:is(#app,#modal-root) .animal-availability-panel.is-busy { background: #9db28133; border-color: #a1a977; color: #56703f; }
:is(#app,#modal-root) .animal-availability-panel .ui-icon { width: 24px; height: 28px; object-fit: contain; margin: 0; }
#app .game-shell[data-page="growth"] .animal-select.is-resting { position: relative; min-height: 118px; background-color: #e5dfd7; }
#app .game-shell[data-page="growth"] .animal-select .animal-rest-clock { font-size: 10px; gap: 2px; }
#app .game-shell[data-page="growth"] .animal-select .rest-moon { width: 12px; height: 12px; flex-basis: 12px; }
@container (max-width: 340px) {
  #app .game-shell[data-page="team"] .animal-card-state .animal-rest-clock { font-size: 10px; gap: 1px; }
  #app .game-shell[data-page="team"] .animal-card-state .rest-moon { width: 10px; height: 10px; flex-basis: 10px; }
}

/* The full raster is preserved; SVG viewports omit transparent padding only. */
:is(#app,#modal-root) svg.animal-rest-art { display: block; flex-shrink: 0; }
#app .game-shell[data-page="adventure"] .party-showcase-portrait > svg.animal-rest-art { height: 62px; max-height: 62px; }
#app .game-shell[data-page="growth"] .mother-board-art > svg.animal-rest-art { width: 100%; height: 100%; max-height: 100%; }
#modal-root .upgrade-confirm-portrait > svg.animal-rest-art { width: 100%; height: 100%; max-height: none; }

/* A readable card width is preserved as the roster grows to twelve animals. */
#app .game-shell[data-page="adventure"] .mother-party-strip { grid-template-columns: none; grid-auto-columns: 82px; gap: 6px; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 5px; }
#app .game-shell[data-page="adventure"] .mother-party-strip > .party-choice { min-width: 0; width: 82px; scroll-snap-align: start; }

/* The mother's resource counters live on dark timber. Only the empty middle
   of this shared plank extends; leaves, bolts and end caps keep their ratio. */
#app .game-shell[data-page] .wallet { padding-inline: 12px; }
#app .game-shell[data-page] .wallet > .illustrated-button-skin { inset: 0; }
#app .game-shell[data-page] .topbar .wallet-chip {
  color: #f1deb1; text-shadow: 0 1px 1px #39200f;
}
#app .game-shell[data-page] .wallet-chip + .wallet-chip { border-left-color: #e6b97955; }
#app .game-shell[data-page] .wallet-chip b { color: #fff3cf; }
#app .game-shell[data-page] .wallet-label { color: #f1deb1; }
#app .game-shell[data-page] .wallet-chip:focus-visible { outline: 2px solid #ffe399; outline-offset: -2px; }

/* Settings use the same illustrated ledger, with one icon and one text
   column per row. Labels remain live DOM; the whole row is still clickable. */
#app .game-shell[data-page="settings"] .settings-ledger { display: flex; flex-direction: column; gap: 12px; padding: 10px 12px 18px; }
#app .game-shell[data-page="settings"] .settings-ledger > .parchment { margin: 0; padding: 5px 7px 8px; }
#app .game-shell[data-page="settings"] .settings-ledger .section-title { margin: 0 0 3px; }
#app .game-shell[data-page="settings"] .setting-row { min-height: 65px; padding: 9px 0; gap: 8px; }
#app .game-shell[data-page="settings"] .setting-copy { display: flex; align-items: center; gap: 8px; }
#app .game-shell[data-page="settings"] .setting-copy > .ui-icon { width: 29px; height: 33px; margin: 0; object-fit: contain; }
#app .game-shell[data-page="settings"] .setting-copy > span { display: block; min-width: 0; }
#app .game-shell[data-page="settings"] .setting-copy b { display: block; font-size: 13px; line-height: 1.6; color: #5b4026; }
#app .game-shell[data-page="settings"] .setting-copy small { display: block; margin-top: 2px; font-size: 10px; line-height: 1.5; color: #8a6b43; }
#app .game-shell[data-page="settings"] .switch-look,
#app .game-shell[data-page="settings"] .switch-look::after { border-radius: 0; }
#app .game-shell[data-page="settings"] .settings-section-heading { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 9px; margin-bottom: 7px; }
#app .game-shell[data-page="settings"] .settings-book-art { display: block; width: 64px; height: 82px; object-fit: contain; }
#app .game-shell[data-page="settings"] .settings-section-heading h2 { font-size: 16px; line-height: 1.5; margin: 0 0 5px; }
#app .game-shell[data-page="settings"] .settings-section-heading p { font-size: 11px; line-height: 1.7; }
#app .game-shell[data-page="settings"] .settings-backup .button-row { margin: 7px 0; gap: 5px; }
#app .game-shell[data-page="settings"] .danger-panel h3 { display: flex; gap: 6px; align-items: center; margin: 0 0 5px; font-size: 16px; }
#app .game-shell[data-page="settings"] .danger-panel h3 .ui-icon { width: 25px; height: 29px; margin: 0; object-fit: contain; }
#app .game-shell[data-page="settings"] .danger-panel > .button { min-height: 50px; min-width: 130px; color: #fff0d0; text-shadow: 0 1px #4c2417; }

/* Completed growth keeps the paper/wood composition and makes the attained
   attributes readable, instead of leaving the ordinary recipe mostly empty. */
#app .game-shell[data-page="growth"] .mastered-growth-board {
  display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 10px;
  border: solid transparent; border-width: 18px 16px !important;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 180 160 180 160 fill stretch !important;
  border-radius: 0; padding: 5px 6px 8px !important; margin: 0; box-shadow: none;
  background: #f8e9c4; background-clip: padding-box;
}
#app .game-shell[data-page="growth"] .mastered-growth-board::before,
#app .game-shell[data-page="growth"] .mastered-growth-board::after { content: none; }
#app .game-shell[data-page="growth"] .mastered-growth-board > * { min-width: 0; }
#app .game-shell[data-page="growth"] .mastered-growth-board > .animal-availability-panel { grid-column: 1 / -1; margin: 0; }
#app .game-shell[data-page="growth"] .mastered-growth-art {
  height: 127px; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 78%,#93a26055,transparent 72%);
}
#app .game-shell[data-page="growth"] .mastered-growth-art > :is(img,svg) { display: block; width: 100%; height: 127px; max-height: none; object-fit: contain; }
#app .game-shell[data-page="growth"] .mastered-growth-heading { align-self: center; }
#app .game-shell[data-page="growth"] .mastered-growth-heading > small { display: flex; align-items: center; gap: 4px; color: #8b642d; font-size: 11px; }
#app .game-shell[data-page="growth"] .mastered-growth-heading .ui-icon { width: 23px; height: 25px; margin: 0; object-fit: contain; }
#app .game-shell[data-page="growth"] .mastered-growth-heading h2 { font-size: 21px; line-height: 1.5; margin: 3px 0; color: #654325; }
#app .game-shell[data-page="growth"] .mastered-growth-heading h2 > span { display: block; color: #567336; font-size: 18px; }
#app .game-shell[data-page="growth"] .mastered-growth-heading p { margin: 0; font-size: 10px; line-height: 1.7; color: #8a6b43; }
#app .game-shell[data-page="growth"] .mastered-growth-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 9px 0; border-block: 1px solid #caae74; }
#app .game-shell[data-page="growth"] .mastered-growth-stats > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
#app .game-shell[data-page="growth"] .mastered-stat-art { width: 30px; height: 35px; object-fit: contain; }
#app .game-shell[data-page="growth"] .mastered-growth-stats > div > span { font-size: 11px; line-height: 1.6; color: #87653c; }
#app .game-shell[data-page="growth"] .mastered-growth-stats b { display: block; font-size: 23px; line-height: 1.4; color: #4d6e31; }
#app .game-shell[data-page="growth"] .mastered-growth-stats b small { display: block; font-size: 10px; font-weight: normal; color: #8a6b43; }
#app .game-shell[data-page="growth"] .mastered-growth-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
#app .game-shell[data-page="growth"] .mastered-growth-actions > .button { min-height: 50px; margin: 0; font-size: 13px; }
@container (max-width: 340px) {
  #app .game-shell[data-page="growth"] .mastered-growth-board { grid-template-columns: 93px minmax(0,1fr); gap: 8px; padding-inline: 3px !important; }
  #app .game-shell[data-page="growth"] .mastered-growth-heading h2 { font-size: 18px; }
  #app .game-shell[data-page="growth"] .mastered-growth-stats { gap: 7px; }
  #app .game-shell[data-page="growth"] .mastered-growth-stats > div { gap: 4px; }
  #app .game-shell[data-page="growth"] .mastered-stat-art { width: 25px; height: 30px; }
  #app .game-shell[data-page="growth"] .mastered-growth-stats b { font-size: 21px; }
}
@container (max-width: 340px) {
  #app .game-shell[data-page="settings"] .settings-ledger { padding-inline: 9px; }
  #app .game-shell[data-page="settings"] .settings-ledger > .parchment { padding-inline: 4px; }
  #app .game-shell[data-page="settings"] .setting-copy { gap: 5px; }
  #app .game-shell[data-page="settings"] .setting-copy > .ui-icon { width: 24px; height: 29px; }
  #app .game-shell[data-page="settings"] .setting-copy b { font-size: 12px; }
  #app .game-shell[data-page="settings"] .setting-copy small { font-size: 9px; }
  #app .game-shell[data-page="settings"] .settings-section-heading { grid-template-columns: 53px minmax(0,1fr); gap: 7px; }
  #app .game-shell[data-page="settings"] .settings-book-art { width: 53px; height: 72px; }
  #app .game-shell[data-page="settings"] .settings-section-heading h2 { font-size: 15px; }
}

/* Tap reference: separate the live production totals from the full-width
   ten-step combo, and give the burst its own stable gold state. */
#app .game-shell[data-page="tap"] .mother-tap-info {
  grid-template-columns: 84px minmax(0,1fr); gap: 7px 9px;
  padding: 2px 3px 4px !important;
}
#app .game-shell[data-page="tap"] .mother-tap-workshop { grid-row: 1; }
#app .game-shell[data-page="tap"] .mother-tap-workshop > img { width: 82px; height: 78px; }
#app .game-shell[data-page="tap"] .mother-tap-level { font-size: 12px; line-height: 1.4; }
#app .game-shell[data-page="tap"] .mother-tap-metrics { align-items: center; gap: 8px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics > div { gap: 3px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics span { display: flex; align-items: center; gap: 3px; font-size: 12px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics span :is(img,.resource-icon) { width: 20px; height: 22px; flex: 0 0 20px; object-fit: contain; }
#app .game-shell[data-page="tap"] .mother-tap-metrics b { font-size: 23px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics small { font-size: 11px; }
#app .game-shell[data-page="tap"] .mother-combo {
  grid-column: 1 / -1; grid-row: 2; padding: 7px 0 0; margin: 0;
}
#app .game-shell[data-page="tap"] .mother-combo-heading { display: flex; align-items: center; gap: 5px; }
#app .game-shell[data-page="tap"] .mother-combo-heading > img { width: 23px; height: 23px; object-fit: contain; }
#app .game-shell[data-page="tap"] .mother-combo-heading b { color: #61401e; font-size: 15px; }
#app .game-shell[data-page="tap"] .mother-combo-heading [data-burst] {
  margin-left: auto; padding: 2px 6px; color: #78522e; font-size: 12px;
  background: #e4c994; border: 1px solid #c2a166; border-radius: 2px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
#app .game-shell[data-page="tap"] .mother-combo-segments { height: 23px; gap: 3px; margin: 5px 0; }
#app .game-shell[data-page="tap"] .mother-combo-segments > i { height: 23px; min-height: 23px; }
#app .game-shell[data-page="tap"] .mother-combo p { margin: 2px 0 0; color: #765431; font-size: 12px; }
#app .game-shell[data-page="tap"] .mother-combo p strong { color: #865220; font-size: 14px; }
#app .game-shell[data-page="tap"] .mother-tap-info > .mother-tap-note { grid-row: 3; padding-top: 5px; }
#app .game-shell[data-page="tap"] .mother-tap-note p {
  display: flex; align-items: center; gap: 5px; margin: 0;
  color: #75532f; font-size: 11px; line-height: 1.6;
}
#app .game-shell[data-page="tap"] .mother-tap-note p :is(img,.resource-icon) {
  flex: 0 0 15px; width: 15px; height: 16px; object-fit: contain;
}
#app .game-shell[data-page="tap"] .mother-acorn-target::before {
  content: ""; position: absolute; z-index: -1; inset: -5px -9px 27px;
  pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse,#fff1a079 0%,#ffd44f32 38%,#f5bf2600 70%);
}
#app .game-shell[data-page="tap"] .is-burst .mother-acorn-target {
  filter: drop-shadow(0 0 7px #fff1a3) drop-shadow(0 0 20px #ffc835);
}
#app .game-shell[data-page="tap"] .mother-tap-info.is-burst { background-color: #fff0bd; }
#app .game-shell[data-page="tap"] .is-burst .mother-combo-heading b { color: #985215; }
#app .game-shell[data-page="tap"] .is-burst .mother-combo-heading [data-burst] {
  color: #fff3c4; background: #95602a; border-color: #68401b;
}
#app .game-shell[data-page="tap"] .is-burst .mother-tap-metrics > div + div b { color: #a65318; }
#app .game-shell[data-page="tap"] .tap-workshop-complete {
  order: initial; margin: 0 7px; padding: 5px 6px 7px !important;
  border-style: solid; border-color: transparent; border-width: 18px 16px !important;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 180 160 180 160 fill stretch !important;
  background: #f6e6bf; background-clip: padding-box;
}
#app .game-shell[data-page="tap"] .tap-workshop-complete header { display: flex; align-items: center; gap: 8px; }
#app .game-shell[data-page="tap"] .tap-workshop-complete header > img { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; }
#app .game-shell[data-page="tap"] .tap-workshop-complete h2 { color: #63401f; font-size: 17px; }
#app .game-shell[data-page="tap"] .tap-workshop-complete p { margin: 0; font-size: 12px; line-height: 1.5; }
#app .game-shell[data-page="tap"] .tap-workshop-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 7px; margin-top: 10px; }
#app .game-shell[data-page="tap"] .tap-workshop-actions .button { width: 100%; min-width: 0; height: 50px; margin: 0; font-size: 13px; }
@container (max-width: 340px) {
  #app .game-shell[data-page="tap"] .mother-tap-info { grid-template-columns: 70px minmax(0,1fr); gap: 6px; }
  #app .game-shell[data-page="tap"] .mother-tap-workshop > img { width: 70px; height: 74px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics { gap: 6px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics > div + div { padding-left: 5px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics span { font-size: 11px; gap: 2px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics span :is(img,.resource-icon) { width: 16px; height: 19px; flex-basis: 16px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics b { font-size: 19px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics small { font-size: 10px; }
  #app .game-shell[data-page="tap"] .tap-workshop-complete h2 { font-size: 16px; }
}

#app .game-shell[data-page="tap"] .mother-tap-info > .mother-tap-note { justify-self: stretch; min-width: 0; }

#app .game-shell[data-page="tap"] .mother-upgrade-inventory:not([open]) {
  border-width: 10px 13px !important;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 62 78 62 78 fill stretch !important;
  padding: 0 5px !important; background: #674526; background-clip: padding-box;
}
#app .game-shell[data-page="tap"] .mother-upgrade-inventory:not([open]) > summary {
  min-height: 44px; gap: 7px; color: #fff0ca; text-shadow: 0 1px #402513; font-size: 12px;
}
#app .game-shell[data-page="tap"] .mother-upgrade-inventory:not([open]) > summary::before {
  content: ""; flex: 0 0 25px; width: 25px; height: 27px;
  background: url(../assets/ui/nav-material-chest.png) center / contain no-repeat; image-rendering: pixelated;
}

/* Return decision: show the actual party, live packed inventory and the
   consequence before the fixed wooden confirm controls. */
#modal-root .return-trip-modal .return-preview-sheet { display: grid; gap: 10px; min-width: 0; }
#modal-root .return-trip-modal .return-preview-sheet :is(h3,p) { margin: 0; }
#modal-root .return-preview-hero {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px;
  padding: 8px; border: 1px solid #b89d67;
  background: linear-gradient(#f4e6c4e8,#f4e6c4c2),url(../assets/environments/scene-active-mother-v2.png) center 70% / cover;
}
#modal-root .return-preview-route { display: flex; align-items: center; gap: 6px; min-width: 0; }
#modal-root .return-preview-route > img { flex: 0 0 28px; width: 28px; height: 32px; object-fit: contain; }
#modal-root .return-preview-route small { color: #80603a; font-size: 11px; }
#modal-root .return-preview-route h3 { color: #62401e; font-size: 17px; line-height: 1.35; }
#modal-root .return-preview-time { display: flex; align-items: center; gap: 5px; padding-left: 7px; border-left: 1px solid #bfa477; }
#modal-root .return-preview-time > img { flex: 0 0 22px; width: 22px; height: 29px; object-fit: contain; }
#modal-root .return-preview-time span { display: flex; flex-direction: column; color: #7a5a34; font-size: 10px; }
#modal-root .return-preview-time b { color: #79502b; font-size: 22px; line-height: 1.25; font-variant-numeric: tabular-nums; }
#modal-root .return-preview-party { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; border-top: 1px solid #c8b184; padding-top: 5px; }
#modal-root .return-preview-party > div { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; }
#modal-root .return-preview-party .return-preview-animal { display: block; width: 52px; height: 65px; flex: 0 0 52px; object-fit: contain; }
#modal-root .return-preview-party span { display: flex; flex-direction: column; min-width: 0; }
#modal-root .return-preview-party b { color: #634622; font-size: 14px; }
#modal-root .return-preview-party small { color: #7b5e38; font-size: 11px; white-space: nowrap; }
#modal-root .return-preview-bag { border: 1px solid #c3a46b; padding: 8px; background: #f2dca844; }
#modal-root .return-preview-bag > header { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
#modal-root .return-preview-pack { width: 44px; height: 49px; flex: 0 0 44px; object-fit: contain; }
#modal-root .return-preview-bag h3 { font-size: 15px; line-height: 1.4; color: #65431e; }
#modal-root .return-preview-bag header p { color: #7c5c33; font-size: 11px; }
#modal-root .return-preview-bag header b { color: #45692f; font-size: 16px; }
#modal-root .return-preview-materials { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin: 0; }
#modal-root .return-preview-materials > div {
  display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 0 4px;
  min-width: 0; padding: 4px 3px; border: 1px solid #cfb985; background: #ffefcc66;
}
#modal-root .return-preview-materials .resource-icon { grid-row: 1 / 3; width: 22px; height: 27px; max-height: 27px; object-fit: contain; }
#modal-root .return-preview-materials dt { font-size: 10px; line-height: 1.3; color: #80613c; }
#modal-root .return-preview-materials dd { margin: 0; color: #41652e; font-size: 20px; line-height: 1.3; font-weight: 800; }
#modal-root .return-preview-materials dd small { color: #80613c; font-size: 10px; font-weight: 400; margin-left: 3px; }
#modal-root .return-preview-consequences { padding-top: 7px; border-top: 1px solid #c9ad75; }
#modal-root .return-preview-consequences h3,#modal-root .return-preview-discarded h3 { display: flex; align-items: center; gap: 6px; margin-bottom: 4px !important; color: #79502c; font-size: 14px; }
#modal-root .return-preview-consequences h3 > img,#modal-root .return-preview-discarded h3 > img { width: 22px; height: 23px; object-fit: contain; }
#modal-root .return-preview-consequences p { font-size: 11px; line-height: 1.8; color: #75532e; }
#modal-root .return-preview-discarded { padding-top: 7px; border-top: 1px solid #c9ad75; }
#modal-root .return-preview-discarded .resource-value { font-size: 11px; }
#modal-root .return-preview-discarded p { font-size: 11px; color: #956039; }
@container (max-width: 350px) {
  #modal-root .return-preview-hero { padding: 6px; gap: 6px; }
  #modal-root .return-preview-route > img { width: 23px; height: 28px; flex-basis: 23px; }
  #modal-root .return-preview-route h3 { font-size: 15px; }
  #modal-root .return-preview-time { gap: 3px; padding-left: 5px; }
  #modal-root .return-preview-time > img { width: 18px; height: 25px; flex-basis: 18px; }
  #modal-root .return-preview-time b { font-size: 20px; }
  #modal-root .return-preview-party { gap: 5px; }
  #modal-root .return-preview-party > div { gap: 4px; }
  #modal-root .return-preview-party .return-preview-animal { width: 44px; height: 58px; flex-basis: 44px; }
  #modal-root .return-preview-materials { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Match the illustrated recipe panels: one card for this payment, then a
   separate, illustrated card for the following level. Keep numbers live. */
#modal-root .upgrade-confirm-identity {
  position: relative; isolation: isolate;
  grid-template-columns: 112px minmax(0,1fr); gap: 11px; padding: 12px;
  border: 0; background: none;
}
#modal-root .upgrade-confirm-identity > .paper-frame-skin { --paper-frame-scale: .065; }
#modal-root .upgrade-confirm-identity .upgrade-confirm-portrait {
  height: 132px; border: 1px solid #b39a60; padding: 0; box-shadow: none;
  background: url(../assets/environments/scene-spring-valley-portrait-v1.png) 23% 70% / cover;
}
#modal-root .upgrade-confirm-sheet[data-upgrade-kind="workshop"] .upgrade-confirm-identity .upgrade-confirm-portrait {
  background: url(../assets/environments/scene-spring-valley-portrait-v1.png) 23% 70% / cover; padding: 0;
}
#modal-root .upgrade-confirm-identity-copy { min-width: 0; }
#modal-root .upgrade-confirm-identity .upgrade-confirm-kicker { font-size: 12px; color: #58753b; }
#modal-root .upgrade-confirm-identity h3 { color: #67411e; }
#modal-root .upgrade-confirm-identity strong {
  display: inline-block; padding: 1px 7px; margin: 3px 0;
  background: #f8edcebb; border: 1px solid #c6aa70; font-size: 20px;
}
#modal-root :is(.upgrade-confirm-recipe,.upgrade-confirm-next) {
  position: relative; isolation: isolate; border: 0; padding: 13px 11px;
  background: none;
}
#modal-root :is(.upgrade-confirm-recipe,.upgrade-confirm-next) > .paper-frame-skin { --paper-frame-scale: .065; }
#modal-root .upgrade-confirm-recipe > .upgrade-confirm-current { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
#modal-root .upgrade-confirm-current > div > :is(h3,h4) { display: flex; align-items: center; gap: 4px; color: #74502b; }
#modal-root .upgrade-confirm-current > div > h3 > .ui-icon { flex: 0 0 20px; width: 20px; height: 22px; object-fit: contain; }
#modal-root .upgrade-confirm-recipe .resource-list { gap: 7px; }
#modal-root .upgrade-confirm-recipe .resource-value b { font-size: 19px; }
#modal-root .upgrade-confirm-recipe .resource-icon { width: 25px; height: 29px; }
#modal-root .upgrade-stat-card {
  display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 0 4px;
  padding: 5px; margin-top: 5px; background: #f3dfae77; border: 1px solid #c8af7a;
}
#modal-root .upgrade-stat-card > .ui-icon { width: 22px; height: 25px; object-fit: contain; grid-row: 1 / 3; }
#modal-root .upgrade-stat-card > span { color: #745331; font-size: 11px; line-height: 1.4; }
#modal-root .upgrade-stat-card > b { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; font-size: 20px; line-height: 1.4; font-variant-numeric: tabular-nums; }
#modal-root .upgrade-stat-card > b > span { color: #8b6b45; font-weight: 600; }
#modal-root .upgrade-stat-card i { color: #847542; font-size: 15px; font-style: normal; }
#modal-root .upgrade-stat-card strong { color: #3f6b2c; }
#modal-root .upgrade-stat-card > small { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 4px; color: #856742; font-size: 10px; line-height: 1.5; }
#modal-root .upgrade-stat-card em { color: #4e7334; font-size: 10px; font-style: normal; font-weight: 800; }
#modal-root .upgrade-confirm-recipe .upgrade-confirm-balance { margin-top: 8px; padding: 7px 0 0; background: none; }
#modal-root .upgrade-confirm-recipe .upgrade-confirm-balance .resource-value b { font-size: 16px; }
#modal-root .upgrade-confirm-next-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; border-bottom: 1px solid #c9ae76; padding-bottom: 5px; }
#modal-root .upgrade-confirm-next-heading .upgrade-next-art { flex: 0 0 52px; width: 52px; height: 62px; object-fit: contain; }
#modal-root .upgrade-confirm-next-heading p { color: #8c6c43; font-size: 11px; }
#modal-root .upgrade-confirm-next-heading h3 { color: #64421f; font-size: 18px; }
#modal-root .upgrade-confirm-next-heading i { color: #4d7335; font-style: normal; }
#modal-root .upgrade-confirm-next .upgrade-stat-card > b { font-size: 17px; gap: 4px; }
#modal-root .upgrade-confirm-inventory { position: relative; isolation: isolate; border: 0; padding: 11px; }
#modal-root .upgrade-confirm-inventory > .paper-frame-skin { --paper-frame-scale: .065; }
#modal-root .upgrade-confirm-inventory:not([open]) { padding: 0; }
#modal-root .upgrade-confirm-inventory:not([open]) > .paper-frame-skin { display: none; }
#modal-root .upgrade-confirm-inventory > summary {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  gap: 5px; min-height: 48px; border: 0; background: none; padding: 7px 14px;
  color: #fff0c9; text-shadow: 0 1px #654021; list-style: none;
}
#modal-root .upgrade-confirm-inventory > summary::-webkit-details-marker { display: none; }
#modal-root .upgrade-confirm-inventory > summary::before { content: '▸'; color: #795c30; }
#modal-root .upgrade-confirm-inventory[open] > summary::before { content: '▾'; }
#modal-root .upgrade-confirm-inventory > summary::before { color: #efd49d; }
#modal-root .upgrade-confirm-sheet .upgrade-confirm-route { min-height: 48px; margin-top: 9px; font-size: 13px; }
#modal-root .upgrade-confirm-recipe .upgrade-confirm-route { font-size: 12px; padding-inline: 10px; }

/* Material screens keep the same illustrated forest, paper and timber
   proportions as the growth reference. Objects always use contain. */
#modal-root .backup-sheet { display: grid; gap: 10px; min-width: 0; }
#modal-root .backup-sheet :is(h3,p,dl,dd) { margin: 0; }
#modal-root .backup-identity {
  display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; gap: 9px;
  padding: 7px; border: 1px solid #c1a26b;
  background: linear-gradient(90deg,#f5e7bf99,#f8eacdeb 65%),url(../assets/environments/scene-camp-mother-v1.png) center / cover;
}
#modal-root .backup-hero-art { display: block; width: 76px; height: 86px; object-fit: contain; max-height: none; }
#modal-root .backup-identity p { color: #8a6940; font-size: 10px; }
#modal-root .backup-identity h3 { color: #64411f; font-size: 20px; line-height: 1.5; }
#modal-root .backup-identity small { display: block; color: #7c633b; font-size: 10px; line-height: 1.7; }
#modal-root .backup-identity.is-reset { background: linear-gradient(90deg,#ead4a6c0,#f8e8c4ef),url(../assets/environments/scene-camp-mother-v1.png) center / cover; }
#modal-root .backup-identity.is-reset h3 { color: #894c2d; }
#modal-root .backup-progress-card { position: relative; isolation: isolate; min-width: 0; padding: 12px 10px; }
#modal-root .backup-progress-card > .paper-frame-skin { --paper-frame-scale: .065; }
#modal-root .backup-progress-card h3 { color: #75502b; font-size: 12px; line-height: 1.5; margin-bottom: 7px; }
#modal-root .backup-progress-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 10px; }
#modal-root .backup-progress-card dl > div { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 4px; min-width: 0; padding: 4px 0; border-bottom: 1px solid #d5b98688; }
#modal-root .backup-progress-card dl img { width: 20px; height: 24px; object-fit: contain; max-height: none; }
#modal-root .backup-progress-card dt { color: #8b693e; font-size: 10px; }
#modal-root .backup-progress-card dd { color: #4c7032; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#modal-root .backup-progress-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
#modal-root .backup-progress-pair .backup-progress-card dl { grid-template-columns: minmax(0,1fr); }
#modal-root .backup-progress-pair .backup-progress-card dd { font-size: 14px; }
#modal-root .backup-reset-scope { padding: 8px; background: #e7c69344; border: 1px solid #c6a06c; }
#modal-root .backup-reset-scope h3 { color: #8d4d2d; font-size: 13px; margin-bottom: 5px; }
#modal-root .backup-reset-scope p { display: flex; align-items: center; gap: 6px; padding-block: 3px; font-size: 11px; color: #80603b; }
#modal-root .backup-reset-scope img { width: 23px; height: 26px; flex: 0 0 23px; object-fit: contain; }
#modal-root .backup-reset-input { padding-top: 7px; border-top: 1px solid #cdb17c; }
#modal-root .backup-reset-input label { display: block; color: #81552f; font-size: 13px; font-weight: 800; margin-bottom: 5px; }
#modal-root .backup-reset-input .text-input { display: block; width: 100%; min-width: 0; min-height: 48px; border: 1px solid #ad8951; border-radius: 0; background: #fff2d5; color: #674522; padding: 10px; font-size: 16px; box-shadow: inset 0 2px #c6a16d33; }
#modal-root .backup-reset-input p { margin-top: 5px; color: #8d7045; font-size: 10px; }
#modal-root .backup-reset-input .text-input[aria-invalid="true"] { border: 2px solid #a45f37; background: #fff0d0; }
#modal-root .backup-reset-input .backup-reset-error { color: #97452c; font-size: 11px; font-weight: 800; line-height: 1.7; }
#modal-root .modal-actions .modal-confirm-danger { color: #fff0ce; text-shadow: 0 1px #4c2718; }
#modal-root .modal-confirm-danger .button-label { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
#modal-root .modal-confirm-danger .button-label::before { content: ''; display: inline-block; flex: 0 0 18px; width: 18px; height: 21px; background: url(../assets/ui/icon-danger-triangle.png) center / contain no-repeat; image-rendering: pixelated; }
#modal-root .backup-file { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 8px; padding: 8px; background: #e5d09c44; border: 1px solid #c7ab75; }
#modal-root .backup-file h3 { display: flex; align-items: center; gap: 5px; grid-column: 1 / -1; color: #785730; font-size: 11px; }
#modal-root .backup-file h3 > img { width: 22px; height: 23px; object-fit: contain; }
#modal-root .backup-file bdi { min-width: 0; color: #6a4a26; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
#modal-root .backup-file > small { color: #927347; font-size: 10px; white-space: nowrap; }
#modal-root .backup-file-materials { border: 1px solid #c7aa73; padding: 8px; background: #ecd7a744; }
#modal-root .backup-file-materials h3 { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: #76532b; font-size: 12px; }
#modal-root .backup-file-materials h3 > img { width: 25px; height: 26px; object-fit: contain; }
#modal-root .backup-file-materials dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
#modal-root .backup-file-materials dl > div { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 1px 4px; padding: 4px 6px; border: 1px solid #d4bb88; background: #fff0cd66; min-width: 0; }
#modal-root .backup-file-materials .resource-icon { width: 22px; height: 26px; max-height: none; object-fit: contain; }
#modal-root .backup-file-materials dt { color: #88683f; font-size: 10px; }
#modal-root .backup-file-materials dd { grid-column: 1 / -1; color: #4d6e33; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#modal-root .backup-import-note { color: #82643a; font-size: 10px; line-height: 1.7; }
@container (max-width: 350px) {
  #modal-root .backup-identity { grid-template-columns: 60px minmax(0,1fr); gap: 6px; padding: 5px; }
  #modal-root .backup-hero-art { width: 60px; height: 76px; }
  #modal-root .backup-identity h3 { font-size: 18px; }
  #modal-root .backup-progress-card { padding: 11px 8px; }
  #modal-root .backup-progress-card dl { gap: 3px 7px; }
  #modal-root .backup-progress-card dl > div { grid-template-columns: 16px minmax(0,1fr) auto; gap: 3px; }
  #modal-root .backup-progress-card dl img { width: 16px; height: 22px; }
  #modal-root .backup-progress-card dd { font-size: 13px; }
  #modal-root .backup-progress-card dt { font-size: 9px; }
  #modal-root .backup-progress-pair { gap: 5px; }
  #modal-root .backup-progress-pair .backup-progress-card dl > div { grid-template-columns: 16px minmax(0,1fr); }
  #modal-root .backup-progress-pair .backup-progress-card dd { grid-column: 1 / -1; font-size: 14px; }
  #modal-root .backup-reset-scope { padding: 6px; }
  #modal-root .backup-reset-scope p { font-size: 10px; }
}
#modal-root :is(.inventory-sheet,.trade-confirm-sheet) { display: grid; gap: 10px; min-width: 0; }
#modal-root :is(.inventory-sheet,.trade-confirm-sheet) :is(h3,p,dl,dd) { margin: 0; }
#modal-root :is(.inventory-identity,.trade-confirm-identity) {
  display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; gap: 10px;
  padding: 6px 8px; border: 1px solid #c3a771;
  background: linear-gradient(90deg,#f2e2b6aa,#f7e7c3ee 65%),url(../assets/environments/scene-growth-mother-v2.png) center / cover;
}
#modal-root :is(.inventory-chest,.trade-scale) { display: block; width: 90px; height: 90px; object-fit: contain; }
#modal-root :is(.inventory-identity,.trade-confirm-identity) h3 { color: #67431e; font-size: 20px; line-height: 1.5; }
#modal-root :is(.inventory-identity,.trade-confirm-identity) p { color: #87663e; font-size: 10px; }
#modal-root :is(.inventory-identity,.trade-confirm-identity) small { color: #667442; font-size: 11px; }
#modal-root .inventory-slots { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
#modal-root .inventory-slot {
  display: grid; grid-template-columns: 35px minmax(0,1fr); align-items: center; column-gap: 6px;
  padding: 9px 7px; min-width: 0; border: 1px solid #c6a971;
  background: linear-gradient(#fff1d0b0,#ead19b55); box-shadow: inset 0 0 0 2px #fff0cf99,0 2px #b4955b33;
}
#modal-root .inventory-slot .resource-icon { grid-row: 1 / 3; width: 35px; height: 43px; max-height: none; object-fit: contain; }
#modal-root .inventory-slot dt { font-size: 11px; line-height: 1.4; color: #87613a; }
#modal-root .inventory-slot dd { font-size: 23px; line-height: 1.45; color: #4b6e32; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
#modal-root .inventory-slot[data-value-length="medium"] dd { grid-column: 1 / -1; font-size: 20px; }
#modal-root .inventory-slot[data-value-length="long"] dd { grid-column: 1 / -1; font-size: 12px; }
#modal-root .inventory-slot > small { grid-column: 1 / -1; border-top: 1px solid #d8bd8655; margin-top: 4px; padding-top: 3px; font-size: 9px; color: #907145; }
#modal-root .inventory-slot.is-empty dd { color: #9d8762; }
#modal-root .inventory-seeds { display: flex; align-items: center; gap: 9px; padding: 7px; border: 1px solid #c5ac78; background: #e9d7a555; }
#modal-root .inventory-seeds > img { width: 40px; height: 48px; flex: 0 0 40px; object-fit: contain; }
#modal-root .inventory-seeds > div { flex: 1; min-width: 0; }
#modal-root .inventory-seeds h3 { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; color: #6a4b28; }
#modal-root .inventory-seeds h3 b { font-size: 22px; color: #4f7135; }
#modal-root .inventory-seeds h3 small { font-size: 10px; font-weight: 400; }
#modal-root .inventory-seeds p { color: #86663e; font-size: 10px; }
#modal-root .inventory-note { display: flex; align-items: center; gap: 8px; color: #7c613c; font-size: 10px; line-height: 1.7; }
#modal-root .inventory-note > img { width: 27px; height: 30px; object-fit: contain; }
#app .game-shell[data-page="growth"] .craft-identity { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 8px; align-items: center; margin-bottom: 7px; }
#app .game-shell[data-page="growth"] .craft-workshop-art > img { display: block; width: 96px; height: 90px; object-fit: contain; }
#app .game-shell[data-page="growth"] .craft-identity p { font-size: 10px; color: #8c6a3d; margin: 0; }
#app .game-shell[data-page="growth"] .craft-identity h2 { font-size: 22px; color: #694321; margin: 0 0 4px; }
#app .game-shell[data-page="growth"] .craft-stock { display: inline-block; color: #7f5d35; font-size: 11px; padding: 2px 7px; border: 1px solid #c8ae76; background: #f6e9c588; }
#app .game-shell[data-page="growth"] .craft-stock b { font-size: 19px; color: #537334; }
#app .game-shell[data-page="growth"] .craft-effect { display: flex; align-items: center; gap: 7px; padding: 7px 0; margin: 0; color: #5d6c39; font-size: 11px; line-height: 1.7; }
#app .game-shell[data-page="growth"] .craft-effect > img { width: 30px; height: 35px; flex: 0 0 30px; object-fit: contain; }
#app .game-shell[data-page="growth"] .craft-effect small { display: block; color: #876a43; font-size: 10px; }
#app .game-shell[data-page="growth"] .craft-batch { display: flex; align-items: baseline; gap: 4px; font-size: 11px; margin-top: 0; padding-block: 5px; }
#app .game-shell[data-page="growth"] .craft-batch > span { margin-left: auto; font-size: 10px; color: #927348; }
#app .game-shell[data-page="growth"] .market-identity {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 8px;
  align-items: center; padding: 12px 16px; margin: 12px 7px 8px; min-width: 0;
}
#app .game-shell[data-page="growth"] .market-identity > .paper-frame-skin { --paper-frame-scale: .08; }
#app .game-shell[data-page="growth"] .market-illustration { position: relative; height: 94px; }
#app .game-shell[data-page="growth"] .market-merchant { position: absolute; left: 0; bottom: 0; width: 68px; height: 91px; object-fit: contain; }
#app .game-shell[data-page="growth"] .market-scale { position: absolute; right: 0; bottom: 0; width: 57px; height: 60px; object-fit: contain; }
#app .game-shell[data-page="growth"] .market-identity p { margin: 0; color: #8d6c43; font-size: 10px; }
#app .game-shell[data-page="growth"] .market-identity h2 { color: #68431e; font-size: 21px; margin: 0; }
#app .game-shell[data-page="growth"] .market-identity small { font-size: 10px; color: #77633b; }
#app .game-shell[data-page="growth"] .trade-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 5px; margin-bottom: 5px; }
#app .game-shell[data-page="growth"] .trade-heading h3 { margin: 0; font-size: 18px; }
#app .game-shell[data-page="growth"] .trade-heading > small { color: #947349; font-size: 9px; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-row,
#modal-root .trade-confirm-recipe .recipe-row { display: grid; grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr); gap: 5px; align-items: stretch; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-row > div,
#modal-root .trade-confirm-recipe .recipe-row > div { min-width: 0; padding: 7px; border-block: 1px solid #ccb07a; background: #e4c88e33; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-row > b,
#modal-root .trade-confirm-recipe .recipe-row > b { display: grid; place-items: center; color: #66813d; font-size: 23px; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-row small,
#modal-root .trade-confirm-recipe .recipe-row small { display: block; color: #8a673c; font-size: 10px; margin-bottom: 5px; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-payment .resource-list,
#modal-root .trade-confirm-recipe .recipe-payment .resource-list { display: flex; flex-direction: column; align-items: start; gap: 4px; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-row .resource-value { font-size: 10px; gap: 3px; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-row .resource-value b { font-size: 18px; }
#app .game-shell[data-page="growth"] .recipe-reward,
#modal-root .trade-confirm-recipe .recipe-reward { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #b8c78b33 !important; }
#app .game-shell[data-page="growth"] .recipe-result-art { display: block; width: 48px; height: 59px; object-fit: contain; }
#app .game-shell[data-page="growth"] .recipe-reward > strong { color: #6e512c; font-size: 11px; }
#app .game-shell[data-page="growth"] .recipe-reward > strong b { color: #4a7231; font-size: 19px; }
#app .game-shell[data-page="growth"] .recipe-reward .resource-list,
#modal-root .trade-confirm-recipe .recipe-reward .resource-list { justify-content: center; }
#app .game-shell[data-page="growth"] .recipe-reward .resource-value,
#modal-root .trade-confirm-recipe .recipe-reward .resource-value { display: flex; flex-direction: column; gap: 2px; }
#app .game-shell[data-page="growth"] .recipe-reward .resource-icon,
#modal-root .trade-confirm-recipe .recipe-reward .resource-icon { width: 43px; height: 50px; max-height: none; flex: 0 0 50px; object-fit: contain; }
#app .game-shell[data-page="growth"] .recipe-reward .resource-value b,
#modal-root .trade-confirm-recipe .recipe-reward .resource-value b { color: #4d7132; font-size: 23px; }
#modal-root .trade-confirm-recipe { position: relative; isolation: isolate; padding: 12px 10px; }
#modal-root .trade-confirm-recipe > .paper-frame-skin { --paper-frame-scale: .065; }
#modal-root .trade-confirm-recipe .resource-value { font-size: 11px; }
#modal-root .trade-confirm-recipe .resource-value b { font-size: 18px; }
#modal-root .trade-confirm-recipe .resource-icon { width: 23px; height: 28px; object-fit: contain; }
#modal-root .trade-balance { padding: 8px; border: 1px solid #c7ac77; background: #ecd8a555; }
#modal-root .trade-balance h3 { display: flex; align-items: center; gap: 6px; color: #72502a; font-size: 13px; }
#modal-root .trade-balance h3 > img { width: 25px; height: 26px; object-fit: contain; }
#modal-root .trade-balance-labels { display: flex; justify-content: space-between; color: #95764d; font-size: 9px; padding: 5px 0 3px; border-bottom: 1px solid #d4b984; }
#modal-root .trade-balance-row { display: flex; align-items: center; gap: 5px; padding: 5px 0; border-bottom: 1px solid #d6bd8d77; }
#modal-root .trade-balance-row:last-child { border: 0; }
#modal-root .trade-balance-row > img { width: 23px; height: 25px; flex: 0 0 23px; object-fit: contain; }
#modal-root .trade-balance-row > span { color: #88643b; font-size: 11px; }
#modal-root .trade-balance-row > b { margin-left: auto; font-size: 16px; color: #95774d; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#modal-root .trade-balance-row i { color: #8f8650; font-style: normal; }
#modal-root .trade-balance-row strong { color: #4b7231; }
#modal-root .trade-confirm-note { color: #8a6b41; font-size: 10px; line-height: 1.7; }
@container (max-width: 350px) {
  #modal-root :is(.inventory-identity,.trade-confirm-identity) { grid-template-columns: 68px minmax(0,1fr); gap: 6px; padding: 5px; }
  #modal-root :is(.inventory-chest,.trade-scale) { width: 68px; height: 76px; }
  #modal-root :is(.inventory-identity,.trade-confirm-identity) h3 { font-size: 18px; }
  #modal-root .inventory-slots { gap: 5px; }
  #modal-root .inventory-slot { grid-template-columns: 27px minmax(0,1fr); padding: 7px 5px; column-gap: 4px; }
  #modal-root .inventory-slot .resource-icon { width: 27px; height: 30px; grid-row: 1; }
  #modal-root .inventory-slot dd { grid-column: 1 / -1; font-size: 20px; }
  #modal-root .inventory-slot[data-value-length="medium"] dd { font-size: 17px; }
  #modal-root .inventory-slot[data-value-length="long"] dd { font-size: 11px; }
  #modal-root .inventory-slot > small { font-size: 8px; }
  #app .game-shell[data-page="growth"] .craft-identity { grid-template-columns: 75px minmax(0,1fr); }
  #app .game-shell[data-page="growth"] .craft-workshop-art > img { width: 75px; height: 83px; }
  #app .game-shell[data-page="growth"] .craft-identity h2 { font-size: 20px; }
  #app .game-shell[data-page="growth"] .craft-batch { flex-wrap: wrap; }
  #app .game-shell[data-page="growth"] .craft-batch > span { margin-left: 0; }
  #app .game-shell[data-page="growth"] .market-identity { grid-template-columns: 88px minmax(0,1fr); gap: 6px; padding: 10px 12px; }
  #app .game-shell[data-page="growth"] .market-illustration { height: 84px; }
  #app .game-shell[data-page="growth"] .market-merchant { width: 58px; height: 81px; }
  #app .game-shell[data-page="growth"] .market-scale { width: 43px; height: 49px; }
  #app .game-shell[data-page="growth"] .trade-heading { flex-wrap: wrap; }
}
@container (max-width: 350px) {
  #modal-root .upgrade-confirm-identity { grid-template-columns: 88px minmax(0,1fr); gap: 8px; padding: 11px; }
  #modal-root .upgrade-confirm-identity .upgrade-confirm-portrait { height: 116px; }
  #modal-root .upgrade-confirm-identity h3 { font-size: 19px; }
  #modal-root .upgrade-confirm-identity strong { font-size: 18px; padding: 1px 5px; }
  #modal-root :is(.upgrade-confirm-recipe,.upgrade-confirm-next) { padding: 12px 9px; }
  #modal-root .upgrade-confirm-current { gap: 7px; }
  #modal-root .upgrade-confirm-current > div + div { padding-left: 7px; }
  #modal-root .upgrade-confirm-current > div > h3 { font-size: 12px; flex-wrap: wrap; }
  #modal-root .upgrade-confirm-current > div > h3 > .ui-icon { display: none; }
  #modal-root .upgrade-confirm-recipe .resource-value b { font-size: 17px; }
  #modal-root .upgrade-confirm-recipe .resource-icon { width: 21px; height: 26px; }
  #modal-root .upgrade-stat-card { grid-template-columns: 18px minmax(0,1fr); gap: 0 3px; padding: 4px; }
  #modal-root .upgrade-stat-card > .ui-icon { width: 18px; height: 22px; grid-row: 1; }
  #modal-root .upgrade-stat-card > b { grid-column: 1 / -1; font-size: 20px; gap: 4px; }
  #modal-root .upgrade-stat-card > small { flex-wrap: wrap; }
}

/* Keep the mother's illustrated route and companion areas large enough to
   read as places and animals. Details scroll above the reserved action dock. */
#app .game-shell[data-page="adventure"] .mother-adventure { --scene-height: 170px; }
#app .game-shell[data-page="adventure"] .mother-route-showcase { height: 170px; min-height: 170px; margin: 0; padding: 28px 3px 0; align-items: start; }
#app .game-shell[data-page="adventure"] .mother-expedition-title { left: 50%; top: 0; transform: translateX(-50%); width: 137px; height: 25px; }
#app .game-shell[data-page="adventure"] .mother-expedition-title b { font-size: 17px; line-height: 1.2; }
#app .game-shell[data-page="adventure"] .mother-expedition-title span { display: none; }
#app .game-shell[data-page="adventure"] .route-showcase-card { height: 138px; min-height: 138px; padding: 1px; grid-template-rows: 64px 16px 12px 17px; row-gap: 2px; }
#app .game-shell[data-page="adventure"] .route-showcase-art { height: 64px; }
#app .game-shell[data-page="adventure"] .mother-party-panel { --recipe-frame-scale: .055; padding: 2px 4px 3px !important; }
#app .game-shell[data-page="adventure"] .mother-party-panel > .section-title { min-height: 0; padding: 0; margin: 0 0 4px; }
#app .game-shell[data-page="adventure"] .mother-party-panel .section-title h2 { font-size: 13px; line-height: 18px; }
#app .game-shell[data-page="adventure"] .mother-party-body { height: auto; min-height: 0; }
#app .game-shell[data-page="adventure"] .mother-party-strip { padding-bottom: 3px; }
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice { height: 136px; min-height: 136px; }
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice:not(.is-resting) { background: #fff0c9; }
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice.is-selected:not(.is-resting) { background: #fff0c9; }
#app .game-shell[data-page="adventure"] .party-showcase-portrait {
  flex-basis: 72px; height: 72px; min-height: 72px;
  background: linear-gradient(#193c3022,#193c3022),url(../assets/environments/scene-expedition-mother-v2.png) center 48% / auto 170px no-repeat;
  border-bottom: 1px solid #b99a5f;
}
#app .game-shell[data-page="adventure"][data-region="spring-woods"] .party-showcase-portrait {
  background-image: linear-gradient(#193c3022,#193c3022),url(../assets/environments/scene-spring-valley-portrait-v1.png);
}
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice .party-showcase-portrait > :is(img.animal-art,svg.animal-rest-art) { height: 71px; max-height: 71px; }
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice.is-resting { height: 150px; min-height: 150px; background: #e8e2d5; }
#app .game-shell[data-page="adventure"] .party-showcase-card.is-resting .party-showcase-portrait { background-image: linear-gradient(#737c8ecc,#737c8e88),url(../assets/environments/scene-expedition-mother-v2.png); }
#app .game-shell[data-page="adventure"] .party-showcase-card > strong { display: flex; align-items: baseline; justify-content: center; gap: 3px; min-height: 17px; margin: 1px 0; }
#app .game-shell[data-page="adventure"] .party-showcase-card > strong small { display: inline; }
#app .game-shell[data-page="adventure"] .party-showcase-card .party-showcase-check { top: 57px; }
#app .game-shell[data-page="adventure"] .mother-party-pack { height: 112px; }
#app .game-shell[data-page="adventure"] .mother-party-pack img { height: 70px; max-height: 70px; }
#app .game-shell[data-page="adventure"] .mother-reward-panel { --recipe-frame-scale: .065; position: relative; min-height: 0; gap: 4px; padding: 3px 5px !important; }
#app .game-shell[data-page="adventure"] .mother-reward-intro { gap: 6px; min-height: 40px; padding-right: 44px; }
#app .game-shell[data-page="adventure"] .mother-reward-intro > img { width: 36px; height: 32px; flex: 0 0 36px; }
#app .game-shell[data-page="adventure"] .mother-reward-intro > div { min-width: 0; flex: 1; }
#app .game-shell[data-page="adventure"] .mother-reward-panel h3 { font-size: 14px; line-height: 1.3; margin: 0 0 2px; }
#app .game-shell[data-page="adventure"] .mother-reward-route { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px; margin: 0; font-size: 11px; line-height: 1.4; }
#app .game-shell[data-page="adventure"] .mother-reward-route b { font-size: 11px; }
#app .game-shell[data-page="adventure"] .mother-reward-route span { font-size: 10px; }
#app .game-shell[data-page="adventure"] .mother-reward-resources { gap: 4px; margin: 0; padding: 0; }
#app .game-shell[data-page="adventure"] .mother-reward-resources .resource-value { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 2px; padding: 3px 2px; border: 1px solid #d2b67f; background: #f1dfb4; font-size: 10px; line-height: 12px; }
#app .game-shell[data-page="adventure"] .mother-reward-resources .resource-icon { width: 22px; height: 26px; }
#app .game-shell[data-page="adventure"] .mother-reward-resources .resource-value > span { min-width: 0; }
#app .game-shell[data-page="adventure"] .mother-reward-resources .resource-value b { display: block; font-size: 17px; line-height: 20px; color: #42672f; }
#app .game-shell[data-page="adventure"] .mother-load-row { font-size: 11px; margin: 0; gap: 7px; }
#app .game-shell[data-page="adventure"] .mother-load-track { height: 8px; }
#app .game-shell[data-page="adventure"] .mother-reward-meta { font-size: 11px; line-height: 1.4; margin: 0; }
#app .game-shell[data-page="adventure"] .packing-shortcut { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 6px; border: 1px solid #ad8951; background: linear-gradient(#fff2cd,#e6cc94); font-size: 0; line-height: 0; }
#app .game-shell[data-page="adventure"] .packing-shortcut .ui-icon { width: 27px; height: 28px; margin: 0; object-fit: contain; }

#app .game-shell[data-page="adventure"] .mother-reward-panel button.packing-shortcut.illustrated-button[data-button-skin="wood"] { position: absolute; padding: 3px !important; border: 0 !important; background: none !important; color: #fff0cd; text-shadow: 0 1px #493019; }
#app .game-shell[data-page="adventure"] .packing-shortcut .button-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: 10px; line-height: 12px; white-space: nowrap; }
#app .game-shell[data-page="adventure"] .packing-shortcut .ui-icon { width: 21px; height: 22px; }

/* Keep the wagon illustration and the supply manifest in the same portrait view. */
#app .game-shell[data-page="adventure"] .supply-dispatch-hero {
  display: grid; grid-template-columns: 46% minmax(0,1fr); grid-template-rows: auto 100px;
  align-items: center; justify-items: center; gap: 3px 5px; height: 174px; min-height: 174px;
  padding: 5px 8px; margin: 0;
}
#app .game-shell[data-page="adventure"] .supply-hero-heading { grid-column: 1 / -1; }
#app .game-shell[data-page="adventure"] .supply-hero-heading small { font-size: 9px; letter-spacing: 1px; }
#app .game-shell[data-page="adventure"] .supply-hero-heading h1 { font-size: 23px; line-height: 1.2; margin: 1px 0; }
#app .game-shell[data-page="adventure"] .supply-hero-heading p { font-size: 10px; line-height: 1.4; }
#app .game-shell[data-page="adventure"] .supply-hero-wagon { width: 100%; height: 100px; margin: 0; }
#app .game-shell[data-page="adventure"] .supply-hero-seal { gap: 5px; padding: 7px; max-width: 100%; }
#app .game-shell[data-page="adventure"] .supply-hero-seal .ui-icon { width: 20px; height: 25px; }
#app .game-shell[data-page="adventure"] .supply-hero-seal b { font-size: 17px; white-space: nowrap; }
#app .game-shell[data-page="adventure"] .supply-hero-seal b small { font-size: 9px; }
#app .game-shell[data-page="adventure"] .supply-hero-seal > span { margin-left: 0; padding-left: 5px; font-size: 9px; }
#app .game-shell[data-page="adventure"] .supply-yield-ranges { gap: 4px; margin: 0; }
#app .game-shell[data-page="adventure"] .supply-yield-ranges > div { grid-template-columns: 24px minmax(0,1fr); align-items: center; justify-items: start; gap: 1px 4px; padding: 4px; }
#app .game-shell[data-page="adventure"] .supply-yield-ranges .resource-icon { grid-row: 1 / 3; width: 24px; height: 30px; }
#app .game-shell[data-page="adventure"] .supply-yield-ranges span { font-size: 10px; line-height: 13px; }
#app .game-shell[data-page="adventure"] .supply-yield-ranges b { font-size: 18px; line-height: 21px; color: #42672f; }
#app .game-shell[data-page="adventure"] .supply-yield-ranges b small { font-size: 9px; }
#app .game-shell[data-page="adventure"] .supply-growth-note { font-size: 10px; line-height: 1.5; margin: 0; }

/* Current commissions stay above the illustrated keepsake archive. */
#app .game-shell[data-page="missions"] .mission-ledger .mission { --recipe-frame-scale: .08; }
#app .game-shell[data-page="missions"] .mission-ledger .mission-heading { grid-template-columns: 54px minmax(0,1fr); gap: 8px; }
#app .game-shell[data-page="missions"] .mission-ledger .mission-art { width: 54px; height: 62px; }
#app .game-shell[data-page="missions"] .mission-ledger .mission-progress { margin: 5px 0; }
#app .game-shell[data-page="missions"] .mission-ledger .mission-reward { padding-top: 5px; }
#app .game-shell[data-page="missions"] .mission-ledger .mission .button { margin-top: 7px; }
#app .game-shell[data-page="missions"] .mission-list-title { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; margin: 0 8px 7px; color: #ffe8b0; text-shadow: 0 1px 2px #193b29; font-size: 15px; line-height: 1.5; }
#app .game-shell[data-page="missions"] .mission-list-title small { font-size: 10px; font-weight: normal; }
#app .game-shell[data-page="missions"] .mission-archive { margin: 4px 0 0; border: 0; background: none; padding: 0; min-width: 0; }
#app .game-shell[data-page="missions"] .mission-archive > summary { display: flex; align-items: center; gap: 8px; min-height: 76px; padding: 5px 9px; border: 1px solid #baa16c; background: #f6e5bd; color: #674725; cursor: pointer; box-shadow: inset 0 0 0 3px #d5bc87,0 3px #18302466; list-style: none; }
#app .game-shell[data-page="missions"] .mission-archive > summary::-webkit-details-marker { display: none; }
#app .game-shell[data-page="missions"] .mission-archive > summary > img { width: 45px; height: 58px; object-fit: contain; }
#app .game-shell[data-page="missions"] .mission-archive > summary > span { flex: 1; min-width: 0; }
#app .game-shell[data-page="missions"] .mission-archive > summary b { display: block; font-size: 15px; line-height: 1.5; }
#app .game-shell[data-page="missions"] .mission-archive > summary em { font-style: normal; font-size: 18px; color: #4d7133; margin-left: 5px; }
#app .game-shell[data-page="missions"] .mission-archive > summary small { display: block; font-size: 10px; line-height: 1.6; color: #87683d; }
#app .game-shell[data-page="missions"] .mission-archive > summary > i { font-style: normal; font-size: 17px; color: #66813c; transform: rotate(-90deg); }
#app .game-shell[data-page="missions"] .mission-archive[open] > summary > i { transform: none; }
#app .game-shell[data-page="missions"] .mission-archive-cards { padding-top: 10px; }
#app .game-shell[data-page="missions"] .mission-all-complete { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 13px; margin-bottom: 10px; border: 1px solid #b6a06c; background: #f5e7c6; }
#app .game-shell[data-page="missions"] .mission-all-complete > img { width: 55px; height: 70px; object-fit: contain; }
#app .game-shell[data-page="missions"] .mission-all-complete h2 { margin: 0 0 5px; font-size: 17px; color: #587136; }
#app .game-shell[data-page="missions"] .mission-all-complete p { margin: 0; font-size: 11px; color: #87683f; }

/* The seasonal forest and illustrated choices keep their portrait proportions. */
#app .game-shell[data-page="season"] .scene-shell { height: 160px; min-height: 160px; max-height: 160px; }
#app .game-shell[data-page="season"] .screen-content > .season-overview { --recipe-frame-scale: .065; padding: 4px 7px !important; }
#app .game-shell[data-page="season"] .screen-content > .season-guidance { --recipe-frame-scale: .065; padding: 2px 7px !important; }
#app .game-shell[data-page="season"] .screen-content > .season-overview .section-title { margin: 0 0 4px; }
#app .game-shell[data-page="season"] .season-overview .section-title h2 { font-size: 16px; }
#app .game-shell[data-page="season"] .season-overview .milestone-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin: 5px 0; }
#app .game-shell[data-page="season"] .season-overview .milestone-grid > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 66px; padding: 4px 2px; text-align: center; }
#app .game-shell[data-page="season"] .season-overview .milestone-art { width: 24px; height: 25px; }
#app .game-shell[data-page="season"] .season-overview .milestone-grid b { font-size: 16px; line-height: 1.3; letter-spacing: 0; }
#app .game-shell[data-page="season"] .season-overview .milestone-grid span { font-size: 9px; line-height: 1.5; }
#app .game-shell[data-page="season"] .season-ready-summary { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 6px; margin: 7px 0 5px; padding: 4px 6px; border: 1px solid #c9af78; background: #e8cc9c55; }
#app .game-shell[data-page="season"] .season-ready-summary > .ui-icon { width: 25px; height: 30px; object-fit: contain; }
#app .game-shell[data-page="season"] .season-ready-summary b { display: block; color: #866036; font-size: 12px; line-height: 1.5; }
#app .game-shell[data-page="season"] .season-ready-summary small { display: block; color: #8d6e44; font-size: 10px; line-height: 1.5; }
#app .game-shell[data-page="season"] .season-ready-summary > strong { color: #876b3d; font-size: 21px; }
#app .game-shell[data-page="season"] .season-ready-summary.is-ready { background: #b9cd8644; }
#app .game-shell[data-page="season"] .season-ready-summary.is-ready :is(b,strong) { color: #4a7032; }
#app .game-shell[data-page="season"] .season-overview-details { padding: 0; margin: 0; border: 0; background: none; }
#app .game-shell[data-page="season"] .season-overview-details > summary { display: flex; align-items: center; gap: 5px; min-height: 44px; border-top: 1px solid #ccb17b; font-size: 11px; color: #795a33; list-style: none; cursor: pointer; }
#app .game-shell[data-page="season"] .season-overview-details > summary::before { content: '▸'; color: #718146; }
#app .game-shell[data-page="season"] .season-overview-details[open] > summary::before { content: '▾'; }
#app .game-shell[data-page="season"] .season-overview-details > :is(.season-requirements,.season-transition-summary) { margin-top: 0; border-top: 0; padding: 2px 0 8px; }
#app .game-shell[data-page="season"] .season-choices-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: 4px 5px; color: #6d4d29; font-size: 15px; line-height: 1.6; }
#app .game-shell[data-page="season"] .season-choices-heading small { font-size: 10px; font-weight: normal; color: #8d6d43; }
#app .game-shell[data-page="season"] .screen-content > article.talent-card { --recipe-frame-scale: .065; grid-template-columns: 48px minmax(0,1fr); gap: 5px 8px; padding: 5px !important; }
#app .game-shell[data-page="season"] .talent-card > .talent-art { width: 48px; height: 57px; }
#app .game-shell[data-page="season"] .talent-card h3 { font-size: 17px; margin-bottom: 1px; }
#app .game-shell[data-page="season"] .talent-card h3 small { display: inline; font-size: 10px; margin-left: 6px; }
#app .game-shell[data-page="season"] .talent-card p { font-size: 11px; }
#app .game-shell[data-page="season"] .talent-card > .season-effect-change { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:is(#app,#modal-root) .season-effect-change { min-width: 0; padding: 5px 7px; border: 1px solid #c7ad77; background: #e6d39c44; }
:is(#app,#modal-root) .season-effect-change > small { display: block; font-size: 10px; line-height: 1.5; color: #927144; }
:is(#app,#modal-root) .season-effect-change > p { display: flex; align-items: baseline; gap: 8px; margin: 0; line-height: 1.6; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
:is(#app,#modal-root) .season-effect-change p > span { color: #8c7047; }
:is(#app,#modal-root) .season-effect-change p > i { color: #82914c; font-size: 17px; font-style: normal; }
:is(#app,#modal-root) .season-effect-change p > b { color: #487032; }
#app .game-shell[data-page="season"] .talent-card .season-effect-change > p { font-size: 18px; }
#app .game-shell[data-page="season"] .talent-card .button { min-height: 46px; font-size: 14px; }
#app .game-shell[data-page="codex"] .codex-collection-cover {
  display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 8px;
  padding: 5px 4px; margin-bottom: 10px;
  border: solid transparent; border-width: 9px 8px;
  border-image: url(../assets/ui/ui-upgrade-recipe-frame.png) 180 160 180 160 fill stretch;
  background: #f8e9c7; background-clip: padding-box;
}
#app .game-shell[data-page="codex"] .codex-cover-book { width: 64px; height: 72px; object-fit: contain; }
#app .game-shell[data-page="codex"] .codex-collection-cover > div { min-width: 0; }
#app .game-shell[data-page="codex"] .codex-collection-cover h2 { color: #684522; margin: 0; font-size: 18px; line-height: 1.5; }
#app .game-shell[data-page="codex"] .codex-collection-cover p { margin: 0 0 5px; color: #917045; font-size: 10px; line-height: 1.5; }
#app .game-shell[data-page="codex"] .codex-collection-counts { display: flex; justify-content: space-between; gap: 5px; }
#app .game-shell[data-page="codex"] .codex-collection-counts b { font-weight: normal; font-size: 10px; color: #8b6c43; white-space: nowrap; }
#app .game-shell[data-page="codex"] .codex-collection-counts strong { font-size: 18px; color: #4e7135; font-variant-numeric: tabular-nums; }
#app .game-shell[data-page="codex"] .codex-collection-cover small { font-size: 9px; line-height: 1.6; color: #92744c; }

/* Keep information on paper and navigation on wood over the shared forest. */
#app .game-shell[data-page="codex"] .screen-content > .section-title,
#app .game-shell[data-page="landmarks"] .landmark-survey > h2,
#app .game-shell[data-page="season"] .season-choices-heading {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  min-height: 40px; gap: 2px 6px; margin: 0 0 8px; padding: 2px 5px;
  border: solid transparent; border-width: 7px 10px;
  border-image: url(../assets/ui/button-secondary-wood-plank.png) 62 78 62 78 fill stretch;
  color: #ffe9b6; text-shadow: 0 1px #483017; font-size: 15px; line-height: 1.5;
}
#app .game-shell[data-page="codex"] .screen-content > .section-title h2 { color: inherit; font-size: 15px; }
#app .game-shell[data-page="codex"] .screen-content > .section-title > span,
#app .game-shell[data-page="landmarks"] .landmark-survey > h2 small,
#app .game-shell[data-page="season"] .season-choices-heading small { color: #f4d89c; font-size: 10px; }
#app .game-shell[data-page="codex"] .codex-directory { margin-bottom: 10px; }
#app .game-shell[data-page="codex"] .codex-grid { gap: 10px 8px; }
#app .game-shell[data-page="codex"] .codex-stamp > small,
#app .game-shell[data-page="landmarks"] .landmark-survey > p {
  padding: 5px 7px; margin: 4px 0 0; border: 1px solid #c7ad77;
  background: #f5e6bf; color: #745431; font-size: 11px; line-height: 1.6;
  box-shadow: inset 0 0 0 2px #e7d29e;
}
#app .game-shell[data-page="codex"] .codex-stamp > small { width: calc(100% - 12px); }
#app .game-shell[data-page="landmarks"] .landmark-survey > p { margin-inline: 8px; }
@container (max-width: 350px) {
  #app .game-shell[data-page="codex"] .codex-collection-cover { grid-template-columns: 42px minmax(0,1fr); gap: 5px; }
  #app .game-shell[data-page="codex"] .codex-cover-book { width: 42px; height: 66px; }
  #app .game-shell[data-page="codex"] .codex-collection-counts { gap: 3px; }
  #app .game-shell[data-page="codex"] .codex-collection-counts strong { font-size: 16px; }
  #app .game-shell[data-page="missions"] .mission-archive > summary { gap: 6px; padding-inline: 7px; }
  #app .game-shell[data-page="missions"] .mission-archive > summary b { font-size: 14px; }
}
@container (max-width: 350px) {
  #app .game-shell[data-page="adventure"] .supply-hero-seal { flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; }
  #app .game-shell[data-page="adventure"] .supply-hero-seal > span { border-left: 0; border-top: 1px solid #9e8051; padding: 3px 0 0; text-align: center; width: 100%; }
  #app .game-shell[data-page="adventure"] .supply-hero-seal > span br { display: none; }
  #app .game-shell[data-page="adventure"] .supply-yield-ranges > div { grid-template-columns: 20px minmax(0,1fr); gap: 1px 2px; padding: 3px; }
  #app .game-shell[data-page="adventure"] .supply-yield-ranges .resource-icon { width: 20px; height: 26px; }
  #app .game-shell[data-page="adventure"] .supply-yield-ranges b { font-size: 15px; }
}


/* The hero keeps its original source window; the viewport has a forest
   backing so long paper ledgers never expose an empty green gap. */
#app .game-shell[data-page="growth"] .screen-scroll {
  background: #203e30 url(../assets/environments/scene-growth-mother-v2.png) center / cover no-repeat;
}
#app .game-shell[data-page="growth"] .mother-growth {
  background: var(--forest-plate) center var(--forest-offset) / 100% auto no-repeat;
}
#app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) { --recipe-frame-scale: .08; gap: 5px 9px; }
@container (max-width: 340px) {
  #app .game-shell[data-page="growth"] .mother-growth-board:not(.is-animal) { gap: 5px 6px; }
}

/* Let four starter cards use the full paper; the pack becomes a heading mark. */
#app .game-shell[data-page="adventure"] .mother-party-body { grid-template-columns: minmax(0,1fr); gap: 0; }
#app .game-shell[data-page="adventure"] .mother-party-panel .section-title h2 { display: flex; align-items: center; gap: 5px; min-width: 0; }
#app .game-shell[data-page="adventure"] .dispatch-roster-mark { width: 20px; height: 20px; object-fit: contain; flex: 0 0 20px; }
#app .game-shell[data-page="adventure"] .mother-party-strip { scrollbar-width: thin; scrollbar-color: #9b7946 #d5bf91; }
#app .game-shell[data-page="adventure"] .dispatch-roster-help { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 2px 0 0; padding-top: 2px; border-top: 1px solid #c5a870; color: #8d6a3b; font-size: 10px; line-height: 1.4; }
#app .game-shell[data-page="adventure"] .dispatch-roster-help span { color: #546d3b; }
@container (min-width: 382px) {
  #app .game-shell[data-page="adventure"] .mother-party-panel[data-roster-size="4"] .dispatch-roster-help { display: none; }
}

/* Reflow the mother's reward and growth ledgers together on wider portraits.
   Narrow phones keep full-width ledgers so the live amounts remain readable. */
@container (min-width: 382px) {
  #app .game-shell[data-page="adventure"] .mother-decision-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; align-items: start; }
  #app .game-shell[data-page="adventure"] .mother-decision-grid > article { --recipe-frame-scale: .05; min-width: 0; padding: 3px 4px 4px !important; }
  #app .game-shell[data-page="adventure"] .mother-decision-grid h3 { margin: 0; font-size: 14px; line-height: 18px; }
  #app .game-shell[data-page="adventure"] .mother-reward-panel { gap: 6px; }
  #app .game-shell[data-page="adventure"] .mother-reward-intro { padding-right: 0; min-height: 44px; gap: 5px; }
  #app .game-shell[data-page="adventure"] .mother-reward-route { display: block; }
  #app .game-shell[data-page="adventure"] .mother-reward-route span { display: block; font-size: 11px; line-height: 15px; }
  #app .game-shell[data-page="adventure"] .mother-reward-resources { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
  #app .game-shell[data-page="adventure"] .mother-reward-resources .resource-value { grid-template-columns: 20px minmax(0,1fr); padding: 3px 2px; }
  #app .game-shell[data-page="adventure"] .mother-reward-resources .resource-icon { width: 20px; height: 24px; }
  #app .game-shell[data-page="adventure"] .mother-reward-resources .resource-value b { font-size: 16px; }
  #app .game-shell[data-page="adventure"] .mother-load-row { flex-wrap: wrap; gap: 3px; }
  #app .game-shell[data-page="adventure"] .mother-load-track { flex: 1 0 100%; }
  #app .game-shell[data-page="adventure"] .mother-reward-panel button.packing-shortcut.illustrated-button[data-button-skin="wood"] { position: relative; inset: auto; align-self: stretch; width: 100%; height: 44px; min-height: 44px; margin-top: 2px; }
  #app .game-shell[data-page="adventure"] .packing-shortcut .button-label { flex-direction: row; gap: 4px; font-size: 12px; }
  #app .game-shell[data-page="adventure"] .supply-yield-ranges { grid-template-columns: minmax(0,1fr); gap: 3px; }
  #app .game-shell[data-page="adventure"] .supply-yield-ranges > div { grid-template-columns: 22px minmax(0,1fr) auto; gap: 3px; padding: 2px 4px; }
  #app .game-shell[data-page="adventure"] .supply-yield-ranges .resource-icon { grid-row: auto; width: 20px; height: 24px; }
  #app .game-shell[data-page="adventure"] .supply-yield-ranges span { font-size: 11px; }
  #app .game-shell[data-page="adventure"] .supply-yield-ranges b { font-size: 16px; }
  #app .game-shell[data-page="adventure"] .mother-growth-panel { grid-template-columns: minmax(0,1fr); gap: 5px; }
  #app .game-shell[data-page="adventure"] .mother-growth-panel > * { grid-column: 1 / -1; grid-row: auto; min-width: 0; }
  #app .game-shell[data-page="adventure"] .mother-growth-heading { flex-direction: row; text-align: left; gap: 6px; min-height: 44px; }
  #app .game-shell[data-page="adventure"] .mother-growth-portrait { flex: 0 0 38px; width: 38px; height: 44px; max-height: 44px; }
  #app .game-shell[data-page="adventure"] .mother-growth-heading > b { font-size: 13px; line-height: 18px; }
  #app .game-shell[data-page="adventure"] .mother-growth-heading small { display: block; font-size: 11px; }
  #app .game-shell[data-page="adventure"] .mother-growth-cost { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px; padding: 0 0 4px; }
  #app .game-shell[data-page="adventure"] .mother-growth-cost .resource-value { gap: 2px; font-size: 10px; white-space: normal; line-height: 14px; }
  #app .game-shell[data-page="adventure"] .mother-growth-cost .resource-value b { font-size: 13px; white-space: nowrap; }
  #app .game-shell[data-page="adventure"] .mother-growth-cost .resource-icon { flex: 0 0 16px; width: 16px; height: 20px; }
  #app .game-shell[data-page="adventure"] .mother-growth-stats p { font-size: 11px; line-height: 18px; margin: 0; }
  #app .game-shell[data-page="adventure"] .mother-growth-stats b { font-size: 13px; }
  #app .game-shell[data-page="adventure"] :is(.mother-growth-balance,.mother-growth-next) { margin: 0; font-size: 11px; line-height: 16px; word-break: keep-all; overflow-wrap: normal; }
  #app .game-shell[data-page="adventure"] .mother-growth-train.button { min-height: 44px; height: auto; font-size: 13px; }
}

/* Tap mother: workshop beside its live ledger, and the two recipe forecasts
   together. Keep the narrow layout and every live amount intact. */
#app .game-shell[data-page="tap"] :is(.mother-tap-info,.mother-upgrade-split) { --recipe-frame-scale: .065; }
#app .game-shell[data-page="tap"] .mother-next-shortfall .deficit-label { display: none; }
@container (min-width: 382px) {
  #app .game-shell[data-page="tap"] .mother-tap-info { grid-template-columns: 90px minmax(0,1fr); gap: 5px 8px; padding: 4px 5px !important; }
  #app .game-shell[data-page="tap"] .mother-tap-workshop { grid-row: 1 / 4; }
  #app .game-shell[data-page="tap"] .mother-tap-workshop > img { width: 88px; height: 112px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics b { font-size: 21px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics span { font-size: 11px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics span :is(img,.resource-icon) { width: 17px; height: 20px; flex-basis: 17px; }
  #app .game-shell[data-page="tap"] .mother-combo { grid-column: 2; padding-top: 4px; }
  #app .game-shell[data-page="tap"] .mother-combo-heading { gap: 3px; }
  #app .game-shell[data-page="tap"] .mother-combo-heading > img { width: 18px; height: 20px; }
  #app .game-shell[data-page="tap"] .mother-combo-heading b { font-size: 13px; }
  #app .game-shell[data-page="tap"] .mother-combo-heading [data-burst] { padding: 2px 4px; font-size: 11px; }
  #app .game-shell[data-page="tap"] .mother-combo-segments { height: 18px; gap: 2px; margin: 4px 0; }
  #app .game-shell[data-page="tap"] .mother-combo-segments > i { height: 18px; min-height: 18px; }
  #app .game-shell[data-page="tap"] .mother-combo p { font-size: 11px; line-height: 16px; }
  #app .game-shell[data-page="tap"] .mother-tap-info > .mother-tap-note { grid-column: 2; padding-top: 4px; }
  #app .game-shell[data-page="tap"] .mother-tap-note p { align-items: start; gap: 3px; font-size: 11px; line-height: 16px; }
  #app .game-shell[data-page="tap"] .mother-upgrade-split { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 8px; padding: 4px 5px 6px; }
  #app .game-shell[data-page="tap"] .mother-upgrade-split > article { min-width: 0; }
  #app .game-shell[data-page="tap"] .mother-upgrade-split h2 { margin: 0 0 5px; font-size: 15px; line-height: 20px; }
  #app .game-shell[data-page="tap"] .mother-upgrade-split h3 { margin: 0 0 3px; font-size: 11px; line-height: 15px; }
  #app .game-shell[data-page="tap"] .mother-upgrade-split .mother-columns { grid-template-columns: minmax(0,1fr); gap: 5px; }
  #app .game-shell[data-page="tap"] .mother-upgrade-cost > .resource-list { flex-direction: row; flex-wrap: wrap; gap: 3px 6px; }
  #app .game-shell[data-page="tap"] .mother-upgrade-cost > .sufficient { position: static; margin: 3px 0 0; }
  #app .game-shell[data-page="tap"] .mother-upgrade-split :is(.resource-value,.stat-row,.mother-payment,.mother-next-shortfall,.deficit,.sufficient) { font-size: 11px; line-height: 16px; }
  #app .game-shell[data-page="tap"] .mother-upgrade-split :is(.resource-value b,.stat-row b) { font-size: 13px; }
  #app .game-shell[data-page="tap"] .mother-upgrade-split .resource-icon { flex-shrink: 0; width: 16px; height: 20px; }
  #app .game-shell[data-page="tap"] .mother-upgrade-split .stat-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 3px; }
  #app .game-shell[data-page="tap"] .mother-upgrade-split .stat-row > small { grid-column: 1 / -1; justify-self: end; }
  #app .game-shell[data-page="tap"] .mother-current-upgrade > .button { min-height: 44px; font-size: 14px; margin-top: 6px; }
  #app .game-shell[data-page="tap"] .mother-next-upgrade { border-top: 0; border-left: 1px solid #c5a264; padding: 0 0 0 7px; }
  #app .game-shell[data-page="tap"] .mother-next-upgrade > .resource-list { flex-direction: column; gap: 3px; align-items: start; }
  #app .game-shell[data-page="tap"] .mother-next-shortfall { word-break: keep-all; overflow-wrap: normal; }
}

/* Keep the animal portrait, recipe and next step together like the source
   paper. Small phones retain the full-width reading order above. */
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal { --recipe-frame-scale: .07; }
@container (min-width: 382px) {
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal {
    grid-template-columns: 86px minmax(0,.95fr) minmax(0,1.05fr); gap: 5px 7px;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-art { grid-column: 1; grid-row: 2 / 4; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > h2 {
    grid-column: 2 / -1; grid-row: 2; margin: 0; font-size: 17px; line-height: 22px;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > h2 span { display: inline; font-size: 15px; white-space: nowrap; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content h3 { margin: 0 0 4px; font-size: 11px; line-height: 16px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-cost { grid-column: 2; grid-row: 3; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats {
    grid-column: 3; grid-row: 3; grid-template-columns: minmax(0,1fr); gap: 5px;
    align-content: start; border-top: 0; border-left: 1px solid #c9ab72; padding: 0 0 0 6px;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats > .stat-row { padding-left: 20px; gap: 0; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats > .stat-row::before { width: 17px; height: 20px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .stat-row { font-size: 11px; line-height: 15px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats .stat-row b { font-size: 17px; line-height: 22px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .stat-row small { font-size: 10px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .resource-list { gap: 3px 5px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal :is(.mother-upgrade-cost,.mother-animal-next) > .resource-list { flex-direction: column; align-items: start; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .resource-value { gap: 3px; font-size: 11px; line-height: 17px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .resource-value b { font-size: 14px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .resource-icon { width: 17px; height: 21px; flex-shrink: 0; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal :is(.sufficient,.deficit,.muted) { font-size: 11px; line-height: 16px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-cost > .sufficient { position: static; margin: 4px 0 0; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > .animal-availability-panel { grid-column: 1 / -1; grid-row: 1; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > .mother-payment { grid-column: 1 / 3; grid-row: 4; font-size: 11px; line-height: 16px; padding-top: 6px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > .button { grid-column: 1 / 3; grid-row: 5; min-height: 48px; font-size: 15px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > .text-button { grid-column: 1 / -1; grid-row: 6; min-height: 44px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > .mother-animal-next {
    grid-column: 3; grid-row: 4 / 6; min-width: 0; margin: 0; padding: 6px 0 0 6px;
    border-top: 1px solid #c9ab72; border-left: 1px solid #c9ab72;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next summary { min-height: 44px; display: flex; align-items: center; font-size: 11px; line-height: 16px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next-stats { grid-template-columns: minmax(0,1fr); gap: 6px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal:not(:has(.mother-animal-next)) .mother-board-content > :is(.mother-payment,.button) { grid-column: 1 / -1; }
}

/* A completed return goal retains the paper's portrait-and-ledger hierarchy. */
#app .game-shell[data-page="trip"] .mother-return-growth.is-mastered { --recipe-frame-scale: .07; gap: 6px 10px; align-items: center; }
#app .game-shell[data-page="trip"] .is-mastered .mother-return-growth-identity > img { height: 105px; }
#app .game-shell[data-page="trip"] .is-mastered .mother-return-growth-identity > p { margin-top: 2px; line-height: 15px; }
#app .game-shell[data-page="trip"] .return-mastered-badge { display: flex; align-items: center; gap: 4px; color: #8d6934; margin: 0 0 3px; }
#app .game-shell[data-page="trip"] .return-mastered-badge .ui-icon { width: 22px; height: 24px; object-fit: contain; }
#app .game-shell[data-page="trip"] .is-mastered .mother-return-growth-recipe h2 { margin-bottom: 8px; font-size: 17px; }
#app .game-shell[data-page="trip"] .is-mastered .mother-return-growth-recipe h2 > span { display: inline; font-size: 16px; color: #557735; white-space: nowrap; }
#app .game-shell[data-page="trip"] .return-mastered-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding-top: 7px; border-top: 1px solid #c5a264; }
#app .game-shell[data-page="trip"] .return-mastered-stats > div { display: flex; gap: 5px; align-items: start; min-width: 0; }
#app .game-shell[data-page="trip"] .return-mastered-stats :is(.resource-icon,.ui-icon) { width: 20px; height: 24px; object-fit: contain; flex: 0 0 20px; }
#app .game-shell[data-page="trip"] .return-mastered-stats span { font-size: 11px; line-height: 16px; }
#app .game-shell[data-page="trip"] .return-mastered-stats b { display: block; color: #4e7136; font-size: 23px; line-height: 29px; }
#app .game-shell[data-page="trip"] .return-mastered-stats small { display: block; color: #85633a; font-size: 10px; line-height: 15px; white-space: nowrap; }
#app .game-shell[data-page="trip"] .return-mastered-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding-top: 6px; border-top: 1px solid #c5a264; }
#app .game-shell[data-page="trip"] .return-mastered-actions > .button { min-width: 0; min-height: 48px; margin: 0; font-size: 13px; }

/* Offline mother: keep the bag ledger aligned and show both growth steps
   together. Values and the full inventory disclosure retain their content. */
#modal-root .mother-offline-modal :is(.mother-offline-inventory,.mother-offline-upgrade) { --recipe-frame-scale: .065; }
#modal-root .mother-offline-inventory > .resource-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
#modal-root .mother-offline-inventory > .resource-list:has(> .resource-value:nth-child(5)) { grid-template-columns: repeat(3,minmax(0,1fr)); }
#modal-root .mother-offline-inventory .resource-value { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; background: #fff6dc70; border: 1px solid #d7bc84; text-align: center; }
#modal-root .mother-offline-inventory .resource-value > span { min-width: 0; max-width: 100%; }
#modal-root .mother-offline-inventory .resource-value b { display: block; font-size: clamp(13px,3.6cqw,15px); line-height: 20px; overflow-wrap: anywhere; }
#modal-root .mother-offline-inventory .resource-icon { flex: 0 0 24px; width: 24px; height: 24px; max-height: 24px; }
#modal-root .mother-offline-upgrade .mother-upgrade-split { min-height: 0; }
#modal-root .mother-offline-upgrade .offline-mastered-badge { display: flex; gap: 4px; align-items: center; margin: 2px 0 6px; color: #8d6934; }
#modal-root .mother-offline-upgrade .offline-mastered-badge > img { width: 20px; height: 23px; object-fit: contain; }
#modal-root .mother-offline-upgrade .offline-mastered-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding-top: 7px; border-top: 1px solid #c5a264; }
#modal-root .mother-offline-upgrade .offline-mastered-stats > div { display: flex; gap: 5px; align-items: start; min-width: 0; }
#modal-root .mother-offline-upgrade .offline-mastered-stats :is(.resource-icon,.ui-icon) { width: 20px; height: 24px; max-height: 24px; flex: 0 0 20px; object-fit: contain; }
#modal-root .mother-offline-upgrade .offline-mastered-stats span { font-size: 11px; line-height: 16px; }
#modal-root .mother-offline-upgrade .offline-mastered-stats b { display: block; color: #4e7136; font-size: 23px; line-height: 29px; }
#modal-root .mother-offline-upgrade .offline-mastered-stats small { display: block; color: #85633a; font-size: 10px; line-height: 15px; white-space: nowrap; }
@container (min-width: 382px) {
  #modal-root .mother-offline-upgrade .mother-upgrade-split { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 8px; align-items: start; }
  #modal-root .mother-offline-upgrade .mother-upgrade-split:not(:has(.mother-next-upgrade)) { grid-template-columns: minmax(0,1fr); }
  #modal-root .mother-offline-upgrade > .mother-board-art { width: 52px; height: 72px; }
  #modal-root .mother-offline-upgrade .mother-offline-upgrade-caption { min-height: 16px; padding-left: 59px; line-height: 16px; }
  #modal-root .mother-offline-upgrade .mother-current-upgrade > h2 { min-height: 51px; padding-left: 59px; margin: 0 0 6px; font-size: 14px; line-height: 18px; }
  #modal-root .mother-offline-upgrade .mother-current-upgrade > h2 span { display: block; white-space: nowrap; font-size: 13px; }
  #modal-root .mother-offline-upgrade .mother-columns { grid-template-columns: minmax(0,1fr); gap: 6px; }
  #modal-root .mother-offline-upgrade h3 { margin: 0 0 4px; font-size: 11px; line-height: 16px; }
  #modal-root .mother-offline-upgrade .mother-upgrade-cost > .resource-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 3px; }
  #modal-root .mother-offline-upgrade .resource-value { gap: 2px; font-size: 11px; line-height: 17px; }
  #modal-root .mother-offline-upgrade .resource-value b { font-size: 13px; }
  #modal-root .mother-offline-upgrade .resource-icon { flex-shrink: 0; width: 15px; height: 19px; }
  #modal-root .mother-offline-upgrade .mother-upgrade-cost > .sufficient { position: static; margin: 4px 0 0; }
  #modal-root .mother-offline-upgrade .mother-current-upgrade .mother-upgrade-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding-top: 6px; border-top: 1px solid #c9ab72; }
  #modal-root .mother-offline-upgrade .mother-current-upgrade .mother-upgrade-stats > h3 { grid-column: 1 / -1; margin: 0; }
  #modal-root .mother-offline-upgrade .stat-row { display: flex; flex-direction: column; align-items: start; gap: 0; margin: 0; font-size: 11px; line-height: 16px; }
  #modal-root .mother-offline-upgrade .stat-row > span { flex-basis: auto; }
  #modal-root .mother-offline-upgrade .stat-row b { font-size: 16px; line-height: 22px; }
  #modal-root .mother-offline-upgrade .stat-row small { font-size: 10px; line-height: 15px; }
  #modal-root .mother-offline-upgrade .mother-payment { margin: 6px 0 0; padding-top: 5px; font-size: 11px; line-height: 16px; }
  #modal-root .mother-offline-upgrade .mother-payment > .resource-list { gap: 3px 6px; }
  #modal-root .mother-offline-upgrade .mother-next-upgrade { border-top: 0; border-left: 1px solid #c5a264; padding: 0 0 0 7px; }
  #modal-root .mother-offline-upgrade .mother-next-upgrade > summary { min-height: 44px; padding: 3px 0 6px; font-size: 11px; line-height: 16px; }
  #modal-root .mother-offline-upgrade .mother-next-upgrade > h2 { font-size: 13px; margin: 0 0 5px; }
  #modal-root .mother-offline-upgrade .mother-next-upgrade > .resource-list { flex-direction: column; align-items: start; gap: 3px; margin-bottom: 6px; }
  #modal-root .mother-offline-upgrade .mother-next-upgrade .mother-upgrade-stats > .stat-row + .stat-row { margin-top: 5px; }
  #modal-root .mother-offline-upgrade .mother-next-shortfall { font-size: 11px; line-height: 16px; overflow-wrap: normal; word-break: keep-all; }
  #modal-root .mother-offline-upgrade .mother-next-shortfall .deficit-label { display: none; }
  #modal-root .mother-offline-upgrade .mother-upgrade-inventory { padding: 0 3px; border-width: 5px 6px; }
}
@container (max-width: 340px) {
  #modal-root .mother-offline-inventory > .resource-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #modal-root .mother-offline-inventory > .resource-list:has(> .resource-value:nth-child(5)) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #modal-root .mother-offline-inventory .resource-value { flex-direction: row; gap: 5px; padding: 4px; text-align: left; }
  #modal-root .mother-offline-inventory .resource-value b { font-size: 15px; }
}
@container (max-width: 340px) {
  #app .game-shell[data-page="trip"] .mother-return-growth.is-mastered { grid-template-columns: 70px minmax(0,1fr); gap: 6px; }
  #app .game-shell[data-page="trip"] .is-mastered .mother-return-growth-identity > img { height: 93px; }
  #app .game-shell[data-page="trip"] .return-mastered-stats { gap: 4px; }
  #app .game-shell[data-page="trip"] .return-mastered-stats > div { gap: 3px; }
  #app .game-shell[data-page="trip"] .return-mastered-stats :is(.resource-icon,.ui-icon) { width: 16px; height: 20px; flex-basis: 16px; }
}

/* Camp mother: resources flank the title on one timber header. The forest
   below stays one continuous illustration and every live counter is a button. */
#app .game-shell[data-page="camp"] .topbar {
  position: relative; z-index: 7; flex-basis: 96px; height: 96px; min-height: 96px;
  padding: 2px 3px; background: transparent; box-shadow: none;
}
#app .game-shell[data-page="camp"] .wallet {
  height: 92px; display: grid; grid-template-columns: minmax(0,1fr) 35% minmax(0,1fr);
  grid-template-rows: repeat(2,44px); gap: 0; padding: 2px 17px;
}
#app .game-shell[data-page="camp"] .wallet > .illustrated-button-skin { inset: 1px 0; }
#app .game-shell[data-page="camp"] .topbar .wallet-chip {
  display: flex; flex-direction: row; justify-content: space-between; gap: 2px;
  height: 44px; min-height: 44px; min-width: 0; padding: 0 2px;
  background: transparent; border: 0; overflow: visible;
}
#app .game-shell[data-page="camp"] .wallet-chip:nth-of-type(1) { grid-column: 1; grid-row: 1; }
#app .game-shell[data-page="camp"] .wallet-chip:nth-of-type(2) { grid-column: 1; grid-row: 2; border-top: 1px solid #e6b97955; }
#app .game-shell[data-page="camp"] .wallet-chip:nth-of-type(3) { grid-column: 3; grid-row: 1; }
#app .game-shell[data-page="camp"] .wallet-chip:nth-of-type(4) { grid-column: 3; grid-row: 2; border-top: 1px solid #e6b97955; }
#app .game-shell[data-page="camp"] .wallet-label {
  display: flex; gap: 1px; align-items: center; height: auto; font-size: 10px; white-space: nowrap;
}
#app .game-shell[data-page="camp"] .wallet .resource-icon { width: 19px; height: 25px; flex: 0 0 19px; }
#app .game-shell[data-page="camp"] .wallet-chip b { font-size: 15px; line-height: 20px; white-space: nowrap; }
#app .game-shell[data-page="camp"] .wallet-chip b[data-wallet-length="medium"] { font-size: 11px; }
#app .game-shell[data-page="camp"] .wallet-chip b[data-wallet-length="long"] { font-size: 9px; }
#app .game-shell[data-page="camp"] .camp-header-title {
  grid-column: 2; grid-row: 1 / -1; position: relative; isolation: isolate;
  align-self: center; min-width: 0; height: 78px; padding: 13px 0 9px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  filter: drop-shadow(0 3px 0 #352211);
}
#app .game-shell[data-page="camp"] .camp-header-title > .illustrated-button-skin { inset: 0 -3px; }
#app .game-shell[data-page="camp"] .camp-header-title h1 {
  margin: 0; color: #ffe093; font-size: 30px; line-height: 36px; font-weight: 900;
  -webkit-text-stroke: 1px #6c3f1e; paint-order: stroke fill;
  text-shadow: 0 2px #5e381c, 1px 0 #5e381c, -1px 0 #5e381c;
}
#app .game-shell[data-page="camp"] .camp-header-title p { margin: 0; font-size: 10px; line-height: 15px; color: #ffeac0; letter-spacing: 1px; }
#app .game-shell[data-page="camp"] .mother-scene-heading { display: none; }
#app .game-shell[data-page="camp"] .camp-journal-shortcut { top: 10px; }
#app .game-shell[data-page="camp"] .topbar .wallet-offline-shortcut { position: absolute; top: 164px; left: 10px; right: auto; width: 50px; height: 55px; }
#app .game-shell[data-page="camp"] .mother-workshop-sign { top: 15%; }

/* Each recipe owns its paper, wood posts and leaves. Source corners use one
   scale on both axes; only the plain center and rail spans extend. */
#app .game-shell[data-page="camp"] .mother-camp-overview > .camp-recipe-papers {
  border: 0 !important; border-image: none !important; background: none !important;
  padding: 0 !important; gap: 4px; left: 4px; right: 4px; bottom: 3px;
  max-height: 56%; overflow: auto; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
}
#app .game-shell[data-page="camp"] .camp-recipe-papers > article {
  position: relative; isolation: isolate; min-width: 0; padding: 10px 12px 11px;
  border: 0; background: none;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers > article > .paper-frame-skin { --paper-frame-scale: .145; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade { padding-left: 12px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade > h2 { font-size: 15px; line-height: 20px; margin-bottom: 3px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade > h2 { font-size: 14px; line-height: 20px; margin-bottom: 3px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade .mother-upgrade-stats { padding-left: 4px; border-left: 1px solid #c9ab72; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .stat-row { grid-template-columns: auto minmax(0,1fr); }
#app .game-shell[data-page="camp"] .camp-recipe-papers .stat-row > span { grid-row: 1; grid-column: 1 / -1; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .stat-row > b { grid-row: 2; grid-column: 1; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .stat-row > small { grid-row: 2; grid-column: 2; align-self: center; font-size: 9px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-payment { border-top-style: dashed; margin: 5px 0; padding-top: 5px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-payment .resource-value > span { font-size: 0; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-payment .resource-value b { font-size: 13px; }
@container (max-width: 380px) {
  #app .game-shell[data-page="camp"] .mother-camp-overview > .camp-upgrade-compact {
    isolation: isolate; border: 0 !important; border-image: none !important;
    background: none; padding: 9px 14px 11px !important; gap: 3px;
  }
  #app .game-shell[data-page="camp"] .camp-upgrade-compact > .paper-frame-skin { --paper-frame-scale: .13; }
}
@container (max-width: 350px) {
  #app .game-shell[data-page="camp"] .wallet { padding-inline: 13px; grid-template-columns: minmax(0,1fr) 33% minmax(0,1fr); }
  #app .game-shell[data-page="camp"] .wallet .resource-icon { width: 16px; flex-basis: 16px; height: 22px; }
  #app .game-shell[data-page="camp"] .wallet-label { font-size: 9px; }
  #app .game-shell[data-page="camp"] .wallet-chip b { font-size: 12px; }
  #app .game-shell[data-page="camp"] .camp-header-title h1 { font-size: 26px; }
  #app .game-shell[data-page="camp"] .camp-header-title p { font-size: 9px; letter-spacing: 0; }
  #app .game-shell[data-page="camp"] .mother-workshop-sign { top: 15%; }
}

/* Regenerated from the mother: only the plain gold middle extends. The
   complete boot and arrow caps use one scale on both axes, including alpha. */
#app .game-shell[data-page] button.illustrated-button[data-button-skin="departure"]:is(.button,.nav-item,.text-button),
#app .start-screen button.illustrated-button[data-button-skin="departure"],
#modal-root .modal button.illustrated-button[data-button-skin="departure"] {
  --departure-height: 58px; min-height: var(--departure-height);
  padding: 8px calc(var(--departure-height) * 518 / 856) 8px calc(var(--departure-height) * 600 / 856) !important;
  color: #573515; text-shadow: 0 1px #fff4b8;
}
#app .game-shell[data-page] button[data-button-skin="departure"] > .illustrated-button-skin,
#app .start-screen button[data-button-skin="departure"] > .illustrated-button-skin,
#modal-root .modal button[data-button-skin="departure"] > .illustrated-button-skin {
  height: var(--departure-height); top: 50%; bottom: auto; transform: translateY(-50%);
}
/* Five destination tabs flank the mother's separate gold departure action. */
#app .bottom-nav .mother-nav-art { overflow: visible; image-rendering: pixelated; pointer-events: none; }
#app .bottom-nav .mother-nav-recruit-badge[data-visible="false"] { display: none; }
#app .game-shell[data-page="camp"] .bottom-nav {
  grid-template-columns: minmax(44px,1fr) minmax(44px,1fr) minmax(0,2.6fr) repeat(3,minmax(44px,1fr));
}
#app .game-shell[data-page="camp"] .bottom-nav button.camp-main-departure[data-button-skin="departure"] {
  --departure-height: 58px; height: 64px; min-height: 64px;
  padding-left: calc(var(--departure-height) * 600 / 856) !important;
  padding-right: calc(var(--departure-height) * 518 / 856) !important;
}
#app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure[data-button-skin="departure"] :is(b,.button-label) { font-size: 13px; line-height: 1.2; }
@container (max-width: 400px) {
  #app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure[data-button-skin="departure"] :is(b,.button-label) { display: block; font-size: 14px; line-height: 1.2; white-space: nowrap; }
  #app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure[data-button-skin="departure"] b > span { display: block; }
}
@container (max-width: 350px) {
  #app .game-shell[data-page="camp"] .bottom-nav {
    grid-template-columns: 44px 44px minmax(0,1fr) repeat(3,44px);
    gap: 1px; padding-inline: 3px;
  }
  #app .game-shell[data-page="camp"] .bottom-nav button.camp-main-departure[data-button-skin="departure"] { --departure-height: 48px; }
  #app .game-shell[data-page="camp"] .bottom-nav .camp-main-departure[data-button-skin="departure"] :is(b,.button-label) { font-size: 12px; }
}

/* Mother headers: the camp has recessed timber counters and a leafy crest;
   other pages keep four separate paper counters with undistorted corners. */
#app .game-shell[data-page="camp"] .topbar .wallet-chip {
  position: relative; isolation: isolate; padding-inline: 6px; border: 0;
}
#app .game-shell[data-page="camp"] .topbar .wallet-chip::before {
  content: ""; position: absolute; z-index: -1; inset: 5px 1px;
  background: #4c2d1d; border: 1px solid #b68b54;
  box-shadow: inset 0 2px 2px #25190d99;
  clip-path: polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);
}
#app .game-shell[data-page="camp"] .wallet-label { font-size: 9px; }
#app .game-shell[data-page="camp"] .wallet .resource-icon { width: 17px; height: 23px; flex-basis: 17px; }
#app .game-shell[data-page="camp"] .wallet-chip b { font-size: 14px; }
#app .game-shell[data-page="camp"] .camp-header-title {
  height: auto; width: calc(100% + 12px); aspect-ratio: 1586 / 992;
  margin-inline: -6px; padding: 0; filter: drop-shadow(0 2px 0 #352211);
}
#app .game-shell[data-page="camp"] .camp-title-art {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: contain; z-index: -1; image-rendering: pixelated;
}
#app .game-shell[data-page="camp"] .camp-header-title h1 {
  position: absolute; top: 32%; left: 0; right: 0;
  text-align: center; font-size: 26px; line-height: 1.1; white-space: nowrap;
}
#app .game-shell[data-page="camp"] .camp-header-title p {
  position: absolute; top: 72%; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; font-size: 10px; line-height: 12px; letter-spacing: 0;
  color: #53341b; text-shadow: 0 1px #fff4c5;
}
#app .game-shell[data-page]:not([data-page="camp"]) .wallet {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  height: 54px; padding: 2px 0; gap: 3px;
}
#app .game-shell[data-page]:not([data-page="camp"]) .topbar .wallet-chip {
  position: relative; isolation: isolate; height: 50px; min-height: 50px;
  padding: 4px 6px; border: 0; overflow: visible; text-shadow: none;
}
#app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip > .paper-frame-skin { --paper-frame-scale: .055; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet-label { color: #68451f; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip b { color: #3f2c18; font-size: 14px; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip b[data-wallet-length="medium"] { font-size: 11px; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip b[data-wallet-length="long"] { font-size: 8px; }

/* The tap action has the mother's single paw, bright gold face and square
   timber border. Only its blank middle stretches; the complete raster stays. */
#app .game-shell[data-page="tap"] button.mother-tap-button.illustrated-button[data-button-skin="tap"] {
  --tap-skin-height: 64px; height: 64px; min-height: 64px;
  width: min(86cqw,300px); padding: 8px calc(64px * 300 / 774) 8px calc(64px * 620 / 774) !important;
  color: #4b2b13; text-shadow: 0 1px #fff4b3;
}
#app .game-shell[data-page="tap"] button[data-button-skin="tap"] > .illustrated-button-skin {
  height: 64px; top: 50%; bottom: auto; transform: translateY(-50%);
}
@container (max-width: 350px) {
  #app .game-shell[data-page="camp"] .wallet-chip b { font-size: 12px; }
  #app .game-shell[data-page="camp"] .camp-header-title h1 { font-size: 22px; }
  #app .game-shell[data-page="camp"] .camp-header-title p { font-size: 9px; line-height: 11px; }
  #app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip b { font-size: 11px; }
  #app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip b[data-wallet-length="medium"] { font-size: 9px; }
  #app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip b[data-wallet-length="long"] { font-size: 7px; }
  #app .game-shell[data-page="tap"] button.mother-tap-button[data-button-skin="tap"] { font-size: 19px; }
}

/* Actual upgrades follow the recipe mother's green bevel. The transparent
   full source remains intact; its ends scale uniformly and only blank face
   spans stretch. Workshop/navigation/repair retain distinct action roles. */
#app .game-shell[data-page] button.illustrated-button[data-button-skin="workshop"]:is(.button,.nav-item,.text-button),
#modal-root .modal button.illustrated-button[data-button-skin="workshop"] {
  --upgrade-skin-height: 88px;
  --upgrade-left: calc(88px * 400 / 750); --upgrade-right: calc(88px * 450 / 750);
  height: 68px; min-height: 68px;
  padding: 7px calc(88px * 450 / 750) 7px calc(88px * 400 / 750) !important;
  color: #fff6d6; text-shadow: 0 2px #294119; font-size: 18px;
}
#app .game-shell[data-page] button.illustrated-button[data-button-skin="animal"]:is(.button,.nav-item,.text-button),
#modal-root .modal button.illustrated-button[data-button-skin="animal"] {
  --upgrade-skin-height: 108px;
  --upgrade-left: calc(108px * 720 / 793); --upgrade-right: calc(108px * 240 / 793);
  height: 68px; min-height: 68px;
  padding: 7px var(--upgrade-right) 7px var(--upgrade-left) !important;
  color: #fff6d6; text-shadow: 0 2px #294119; font-size: 18px;
}
:is(#app,#modal-root) button:is([data-button-skin="workshop"],[data-button-skin="animal"]) > .illustrated-button-skin {
  height: var(--upgrade-skin-height); top: 50%; bottom: auto; transform: translateY(-50%);
}
#app .game-shell[data-page] button.illustrated-button:is([data-button-skin="workshop"],[data-button-skin="animal"]):is(.button,.nav-item,.text-button) {
  border: 0 !important; border-image: none !important; font-size: 18px;
}
#app .game-shell[data-page="growth"] .mother-growth-board > .mother-board-content > button:is([data-button-skin="workshop"],[data-button-skin="animal"]) {
  width: min(100%,300px); justify-self: center;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-animal) .mother-board-content > button.illustrated-button[data-button-skin] {
  border: 0 !important; border-image: none !important;
  padding: 7px var(--upgrade-right) 7px var(--upgrade-left) !important; font-size: 18px;
}
#modal-root .modal button.modal-confirm-stat-upgrade.illustrated-button[data-button-skin="workshop"] {
  --upgrade-skin-height: 76px;
  height: 60px; min-height: 60px; font-size: 15px;
  padding-inline: calc(76px * 400 / 750) calc(76px * 450 / 750) !important;
}
#app .game-shell[data-page="growth"] .mastered-growth-actions button.illustrated-button[data-button-skin="workshop"] {
  --upgrade-skin-height: 70px;
  padding-inline: calc(70px * 400 / 750) calc(70px * 450 / 750) !important;
  font-size: 16px;
}

/* Use the same unwarped paper corners as camp, with the frame on its own
   layer. Preserve the previous ledger content width and live recipe flow. */
#app .game-shell[data-page="growth"] .mother-growth-board {
  isolation: isolate; border-width: 0 !important; border-image: none !important;
  background: none !important; padding: 17px 16px 19px !important;
}
#app .game-shell[data-page="growth"] .mother-growth-board > .paper-frame-skin { --paper-frame-scale: .13; }
@container (max-width: 340px) {
  #app .game-shell[data-page="growth"] .mother-growth-board { padding: 15px 13px 17px !important; }
  #app .game-shell[data-page="growth"] .mother-growth-board > .paper-frame-skin { --paper-frame-scale: .11; }
  #app .game-shell[data-page] button.illustrated-button[data-button-skin="animal"]:is(.button,.nav-item,.text-button) {
    font-size: 16px;
  }
}

/* Timber is the default resource rail. Explicit page variants below retain
   the light counters shown in the tap and expedition-selection mothers. */
#app .game-shell[data-page]:not([data-page="camp"]) .wallet {
  padding: 4px 9px; gap: 4px; isolation: isolate;
}
#app .game-shell[data-page]:not([data-page="camp"]) .wallet > .illustrated-button-skin { inset: 0; }
#app .game-shell[data-page]:not([data-page="camp"]) .topbar .wallet-chip {
  height: 46px; min-height: 44px; padding: 2px 3px;
  background: transparent !important; border: 0 !important; text-shadow: 0 1px #21160f;
}
#app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip::before {
  /* The shared raster plank owns this rail's frame. A second frame on each
     counter covered its face and left duplicate edges showing through. */
  content: none;
}
#app .game-shell[data-page]:not([data-page="camp"]) .topbar:has(> .wallet[data-wallet-style="timber"]) {
  background: none; box-shadow: none;
}
#app .game-shell[data-page]:not([data-page="camp"]) .wallet[data-wallet-style="timber"] .wallet-chip + .wallet-chip::after {
  content: ""; position: absolute; left: -2px; top: 8px; bottom: 8px;
  width: 1px; background: #e6b97966; pointer-events: none;
}
#app .game-shell[data-page]:not([data-page="camp"]) .wallet-label { color: #ffeac7; font-size: 10px; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip b { color: #fff8e5; font-size: 15px; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip b[data-wallet-length="medium"] { font-size: 11px; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip b[data-wallet-length="long"] { font-size: 8px; }

/* Route paper, timber timer and the selected party follow the active mother.
   Each frame owns its decoration; complete corners keep one scale. */
#app .game-shell[data-page="trip"] .mother-trip-status {
  grid-template-columns: minmax(0,1fr) 152px; gap: 4px 6px;
  border: 0 !important; border-image: none !important; background: none !important;
  padding: 0 !important; min-height: 0; box-shadow: none;
}
#app .game-shell[data-page="trip"] .mother-trip-status::before,
#app .game-shell[data-page="trip"] .mother-trip-status::after { content: none; }
#app .game-shell[data-page="trip"] .mother-trip-route {
  position: relative; isolation: isolate; padding: 8px 10px; min-width: 0;
}
#app .game-shell[data-page="trip"] .mother-trip-route > .paper-frame-skin { --paper-frame-scale: .075; }
#app .game-shell[data-page="trip"] .mother-trip-route h1 { font-size: 14px; line-height: 19px; }
#app .game-shell[data-page="trip"] .mother-trip-route p { margin: 0; font-size: 10px; line-height: 14px; }
#app .game-shell[data-page="trip"] .mother-trip-timer {
  position: relative; isolation: isolate; padding: 7px 12px 8px;
  border: 0; border-image: none; background: none; box-shadow: none;
}
#app .game-shell[data-page="trip"] .mother-trip-party {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: auto 1fr;
  align-self: stretch; align-content: center; gap: 3px; padding: 5px;
  border: 2px solid #9d754a; border-top-color: #d3aa70; background: #573822;
  box-shadow: inset 0 0 0 2px #302116,0 2px #2a2017;
}
#app .game-shell[data-page="trip"] .mother-trip-party-caption {
  grid-column: 1 / -1; display: block; text-align: center; font-size: 12px; line-height: 16px;
  color: #fff0cc; border-bottom: 1px solid #b48b54; padding-bottom: 3px;
}
#app .game-shell[data-page="trip"] .mother-trip-party > div {
  min-width: 0; display: flex; flex-direction: column; align-items: center; color: #fff0cc;
}
#app .game-shell[data-page="trip"] .mother-trip-party :is(img,svg) {
  width: 30px; height: 36px; max-height: 36px; object-fit: contain; overflow: hidden;
  background: #302619; border: 2px solid #92734d; box-shadow: inset 0 0 0 1px #c1a371;
}
#app .game-shell[data-page="trip"] .mother-trip-member[data-party-state="active"] .animal-head-portrait { border-color: #91c64b; box-shadow: 0 0 0 1px #496b2a,inset 0 0 0 1px #d9e987; }
#app .game-shell[data-page="trip"] .mother-trip-member[data-party-state="resting"] .animal-head-portrait { border-color: #bfa7d0; }
#app .game-shell[data-page="trip"] .mother-trip-member[data-party-state="away"] .animal-head-portrait { border-color: #d4a660; }
#app .game-shell[data-page="trip"] .mother-trip-party :is(b,small) { color: #fff0cc; font-size: 10px; line-height: 13px; }
#app .game-shell[data-page="trip"] .mother-trip .progress {
  box-sizing: border-box; height: 12px; min-height: 12px; padding: 1px;
  border: 1px solid #8c7951; background: #4b4838; background-image: none !important;
  border-radius: 1px; overflow: hidden; box-shadow: inset 0 1px #1d251a;
}
#app .game-shell[data-page="trip"] .mother-trip .progress > span {
  display: block; height: 100%; max-height: 100%; border: 0; border-radius: 0;
  background: linear-gradient(#a8ee67 0 23%,#6bc53a 24% 78%,#4e9a2c 79%); box-shadow: inset 0 0 0 1px #9bd55a;
}
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] .mother-trip-cargo,
#app .game-shell[data-page="trip"] .mother-trip-objective {
  position: relative; isolation: isolate; border: 0 !important; border-image: none !important;
  background: none !important; padding: 12px 13px 14px !important;
}
#app .game-shell[data-page="trip"] :is(.mother-trip-cargo,.mother-trip-objective) > .paper-frame-skin { --paper-frame-scale: .105; }
#app .game-shell[data-page="trip"] .mother-trip-cargo .mother-trip-actions {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px;
  background: none; padding: 3px 0 0; margin-top: 6px;
}
#app .game-shell[data-page] button.illustrated-button:is([data-button-skin="returnCamp"],[data-button-skin="collect"]):is(.button,.nav-item,.text-button),
#modal-root .modal button.illustrated-button[data-button-skin="returnCamp"] {
  --trip-action-art-height: 94px; min-width: 0; height: 64px; min-height: 64px;
  border: 0 !important; border-image: none !important; background: none !important;
  padding: 6px calc(94px * 110 / 753) 6px calc(94px * 700 / 753) !important;
  font-size: 16px; letter-spacing: 0; white-space: nowrap; text-decoration: none;
}
#app .game-shell[data-page] button[data-button-skin="returnCamp"] { color: #452912; text-shadow: 0 1px #fff3ba; }
#app .game-shell[data-page] button[data-button-skin="collect"] { color: #fff6d7; text-shadow: 0 2px #2d401c; }
:is(#app,#modal-root) button:is([data-button-skin="returnCamp"],[data-button-skin="collect"]) > .illustrated-button-skin {
  height: var(--trip-action-art-height); top: 50%; bottom: auto; transform: translateY(-50%);
}
#modal-root .modal button.modal-confirm-return-camp.illustrated-button[data-button-skin="returnCamp"] {
  color: #452912; text-shadow: 0 1px #fff3ba;
}

/* The workshop objective keeps its illustration and both production metrics,
   including the mastered branch, on the same paper as the next destination. */
#app .game-shell[data-page="trip"] .mother-trip-objective { display: block; }
#app .game-shell[data-page="trip"] .mother-trip-objective > h2 {
  display: flex; align-items: center; gap: 5px; padding-bottom: 5px; margin: 0 0 6px;
  border-bottom: 1px dashed #b59055; font-size: 16px;
}
#app .game-shell[data-page="trip"] .mother-trip-objective h2 .ui-icon { width: 22px; height: 25px; margin: 0; }
#app .game-shell[data-page="trip"] .trip-objective-body { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 8px; align-items: center; }
#app .game-shell[data-page="trip"] .trip-objective-art > img { display: block; width: 100%; height: 125px; object-fit: contain; }
#app .game-shell[data-page="trip"] .trip-objective-content { min-width: 0; }
#app .game-shell[data-page="trip"] .trip-objective-content > .button { min-height: 48px; width: 100%; margin-top: 5px; font-size: 15px; }
#app .game-shell[data-page="trip"] .trip-objective-recipe > p,
#app .game-shell[data-page="trip"] .trip-objective-mastered > p { margin: 0 0 5px; font-size: 11px; color: #71532f; }
#app .game-shell[data-page="trip"] .trip-objective-recipe > .resource-list { display: flex; flex-wrap: wrap; gap: 4px 8px; }
#app .game-shell[data-page="trip"] .trip-objective-effects { margin-top: 5px; padding-top: 4px; border-top: 1px solid #d1b47b; }
#app .game-shell[data-page="trip"] .trip-objective-effects .stat-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 5px; }
#app .game-shell[data-page="trip"] .trip-production-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#app .game-shell[data-page="trip"] .trip-production-metrics > div { display: flex; gap: 4px; align-items: center; min-width: 0; }
#app .game-shell[data-page="trip"] .trip-production-metrics :is(.resource-icon,.ui-icon) { width: 20px; height: 24px; margin: 0; flex: 0 0 20px; object-fit: contain; }
#app .game-shell[data-page="trip"] .trip-production-metrics span { font-size: 10px; }
#app .game-shell[data-page="trip"] .trip-production-metrics b { display: block; font-size: 22px; line-height: 27px; color: #496c32; }
#app .game-shell[data-page="trip"] .trip-production-metrics small { display: block; font-size: 9px; color: #836b43; }
@container (min-width: 382px) {
  #app .game-shell[data-page="trip"] .mother-trip-cargo .resource-list:not(:has(> .resource-value:nth-child(5))) { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
  #app .game-shell[data-page="trip"] .mother-trip-cargo .resource-value > span { display: block; line-height: 15px; }
  #app .game-shell[data-page="trip"] .mother-trip-cargo .resource-value b { display: block; font-size: 15px; line-height: 18px; }
}
@container (max-width: 350px) {
  #app .game-shell[data-page]:not([data-page="camp"]) .wallet-label { font-size: 9px; }
  #app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip b { font-size: 12px; }
  #app .game-shell[data-page]:not([data-page="camp"]) .wallet-chip b[data-wallet-length="medium"] { font-size: 9px; }
  #app .game-shell[data-page="trip"] .mother-trip-status { grid-template-columns: minmax(0,1fr) 132px; gap: 4px; }
  #app .game-shell[data-page="trip"] .mother-trip-route { padding: 7px 9px; }
  #app .game-shell[data-page="trip"] .mother-trip-route h1 { font-size: 12px; line-height: 17px; }
  #app .game-shell[data-page="trip"] .mother-trip-route p { font-size: 9px; line-height: 13px; }
  #app .game-shell[data-page="trip"] .mother-trip-party { gap: 3px; padding: 4px; }
  #app .game-shell[data-page="trip"] .mother-trip-party :is(img,svg) { width: 26px; height: 32px; }
  #app .game-shell[data-page="trip"] .mother-trip-member:not([data-party-state="active"]) small { font-size: 9px; white-space: nowrap; }
  #app .game-shell[data-page="trip"] .mother-trip-timer { padding-inline: 9px; }
  #app .game-shell[data-page="trip"] .mother-trip-timer > b { font-size: 11px; }
  #app .game-shell[data-page="trip"] .mother-trip-cargo .mother-trip-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  #app .game-shell[data-page="trip"] .trip-objective-body { grid-template-columns: 74px minmax(0,1fr); gap: 6px; }
  #app .game-shell[data-page="trip"] .trip-objective-art > img { height: 108px; }
  #app .game-shell[data-page="trip"] .trip-production-metrics { gap: 5px; }
  #app .game-shell[data-page="trip"] .trip-production-metrics :is(.resource-icon,.ui-icon) { width: 16px; flex-basis: 16px; }
}

/* The active mother pairs its material rows and its return/collect actions.
   Keep those pairs at phone width; source button caps retain equal axes. */
#app .game-shell[data-page="trip"] .mother-trip-timer > b { font-size: 14px; line-height: 23px; }
#app .game-shell[data-page="trip"] .mother-trip-timer > b .ui-icon { width: 20px; height: 23px; }
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] :is(.mother-trip-bag,.mother-trip-expected) {
  grid-template-columns: 64px minmax(0,1fr); gap: 6px;
}
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] .mother-trip-cargo h3 { font-size: 12px; line-height: 18px; }
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] .mother-trip-cargo .resource-list {
  grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px 4px; padding: 0; border: 0;
}
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] .mother-trip-cargo .resource-list:has(> .resource-value:nth-child(5)) { grid-template-columns: repeat(3,minmax(0,1fr)); }
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] .mother-trip-cargo .resource-value {
  display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 3px;
  min-width: 0; text-align: left; font-size: 12px; line-height: 18px;
}
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] .mother-trip-cargo .resource-icon { width: 24px; height: 29px; max-height: none; margin: 0; object-fit: contain; }
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] .mother-trip-cargo .resource-value > span { display: block; min-width: 0; line-height: 18px; }
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] .mother-trip-cargo .resource-value b { display: block; color: #694526; font-size: 18px; line-height: 22px; }
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] .mother-trip-load { padding: 8px 0; margin: 7px 0; border-block: 1px solid #ccb17c; font-size: 12px; }
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] .mother-trip-load b { font-size: 17px; }
#app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] .mother-trip-return-note { font-size: 12px; line-height: 20px; margin: 8px 0 4px; }
#app .game-shell[data-page="trip"] .mother-trip-cargo .mother-trip-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
#app .game-shell[data-page="trip"] .mother-trip-cargo .mother-trip-actions button.illustrated-button:is([data-button-skin="returnCamp"],[data-button-skin="collect"]) {
  --trip-action-art-height: 78px; height: 56px; min-height: 56px;
  padding: 5px calc(78px * 110 / 753) 5px calc(78px * 700 / 753) !important;
}
#app .game-shell[data-page="trip"] .mother-trip-details > summary { font-size: 12px; line-height: 20px; }
#app .game-shell[data-page="trip"] .trip-objective-body { grid-template-columns: 112px minmax(0,1fr); }
#app .game-shell[data-page="trip"] .trip-objective-art > img { height: 136px; }
@container (max-width: 381px) {
  #app .game-shell[data-page="trip"] .mother-trip-timer > b { font-size: 13px; }
  #app .game-shell[data-page="trip"] .mother-trip[data-trip-kind="expedition"] :is(.mother-trip-bag,.mother-trip-expected) { grid-template-columns: minmax(0,1fr); gap: 4px; }
  #app .game-shell[data-page="trip"] .mother-trip-cargo .mother-trip-actions button.illustrated-button:is([data-button-skin="returnCamp"],[data-button-skin="collect"]) { font-size: 14px; }
  #app .game-shell[data-page="trip"] .trip-objective-body { grid-template-columns: 92px minmax(0,1fr); gap: 7px; }
  #app .game-shell[data-page="trip"] .trip-objective-art > img { height: 116px; }
}
@container (max-width: 350px) {
  #app .game-shell[data-page="trip"] .mother-trip-timer > b { font-size: 11px; gap: 3px; white-space: nowrap; }
  #app .game-shell[data-page="trip"] .mother-trip-timer > b .ui-icon { width: 15px; height: 20px; }
  #app .game-shell[data-page="trip"] .mother-trip-timer { grid-template-columns: minmax(0,1fr) 29px; gap: 3px; }
  #app .game-shell[data-page="trip"] .mother-trip-timer > strong { font-size: 11px; }
}


/* Camp recipes mirror the mother's inset cost/effect groups. Values and
   their units have separate grid slots; the next recipe keeps one material
   per row instead of mixing two materials into a narrow line. */
#app .game-shell[data-page="camp"] .camp-recipe-papers :is(h3,.resource-value,.mother-payment,.mother-next-shortfall,.deficit,.sufficient) {
  font-size: 11px; line-height: 15px;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-columns {
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 4px; align-items: stretch;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade .mother-columns > div {
  min-width: 0; padding: 4px; border: 1px solid #d6bd85; border-radius: 3px;
  background: #ffefc178; box-shadow: inset 0 1px #fff7de;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers h3 { margin: 0 0 3px; font-weight: 700; }
#app .game-shell[data-page="camp"] .camp-recipe-papers :is(.mother-upgrade-cost > .resource-list,.mother-next-upgrade > .resource-list) {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .resource-value { gap: 3px; line-height: 18px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .resource-value b { font-size: 14px; line-height: 18px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .resource-icon { width: 18px; height: 20px; flex: 0 0 18px; object-fit: contain; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade .stat-row {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0 2px; margin: 0; line-height: 14px;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade .stat-row > span {
  grid-row: 1; grid-column: 1; font-size: 10px; line-height: 14px;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade .stat-row > small {
  grid-row: 1; grid-column: 2; justify-self: end; font-size: 10px; line-height: 14px; white-space: nowrap;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade .stat-row > b {
  grid-row: 2; grid-column: 1 / -1; font-size: 17px; line-height: 22px; color: #3e692d;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade .stat-row + .stat-row { margin-top: 4px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade > .resource-list,
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade > .mother-upgrade-stats {
  padding: 4px 5px; border: 1px solid #d6bd85; border-radius: 3px; background: #ffefc178;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade > .mother-upgrade-stats { margin-top: 5px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade .stat-row {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0 3px; margin: 0; line-height: 16px;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade .stat-row > span {
  grid-row: 1; grid-column: 1; font-size: 10px; line-height: 18px;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade .stat-row > b {
  grid-row: 1; grid-column: 2; justify-self: end; font-size: 15px; line-height: 18px; color: #3e692d;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade .stat-row > small {
  grid-row: 2; grid-column: 1 / -1; justify-self: end; font-size: 10px; line-height: 13px;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-payment { margin: 5px 0 2px; padding-top: 4px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-payment > span { display: block; margin-bottom: 2px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-payment .resource-list {
  display: grid; grid-template-columns: minmax(0,1.5fr) repeat(2,minmax(0,1fr)); gap: 2px;
}
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-payment .resource-value { gap: 2px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-payment .resource-value b { font-size: 13px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-payment .resource-icon { width: 16px; height: 19px; flex-basis: 16px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-shortfall { margin-top: 5px; padding-top: 0; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-shortfall > span { display: block; margin-bottom: 2px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-shortfall .material-term { display: block; font-size: 11px; line-height: 16px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-shortfall .deficit { display: flex; flex-direction: column; gap: 1px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-shortfall .deficit .material-term .ui-icon { width: 17px; height: 19px; }

/* The narrow second paper uses the same rates with short, explicit labels.
   A warning icon stays beside the shortage list; separator text takes no row. */
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade > .resource-list { padding: 3px 4px; gap: 2px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade .resource-icon { width: 16px; height: 18px; flex-basis: 16px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade .stat-row { grid-template-columns: auto minmax(0,1fr) auto; gap: 0 2px; min-height: 22px; align-items: center; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade .stat-row > span { grid-column: 1; grid-row: 1; font-size: 11px; line-height: 20px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade .stat-row > b { grid-column: 2; grid-row: 1; font-size: 14px; line-height: 20px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-upgrade .stat-row > small { grid-column: 3; grid-row: 1; font-size: 10px; line-height: 20px; white-space: nowrap; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-shortfall .deficit { position: relative; display: block; padding-left: 20px; font-size: 0; line-height: 0; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-shortfall .deficit > .ui-icon { position: absolute; left: 0; top: 0; width: 17px; height: 19px; margin: 0; }

/* Keep the inset ledger low enough to leave the camp animals in view. */
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade .mother-columns > div { padding: 3px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers h3 { line-height: 14px; margin-bottom: 2px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-upgrade-cost > .resource-list { gap: 2px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-upgrade-cost .resource-icon { height: 18px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-upgrade-cost > .sufficient { line-height: 13px; margin-top: 2px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade .stat-row { min-height: 0; padding: 0; border: 0; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade .stat-row > :is(span,small) { line-height: 12px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade .stat-row > b { font-size: 16px; line-height: 20px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade .stat-row + .stat-row { margin-top: 2px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-current-upgrade > .button { height: 48px; min-height: 48px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-payment { margin-top: 3px; margin-bottom: 0; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-payment > span { line-height: 14px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-payment .resource-value { height: 20px; line-height: 18px; }
#app .game-shell[data-page="camp"] .camp-recipe-papers .mother-next-shortfall .material-term { display: inline-block; margin-right: 4px; }

/* The tap mother has four paper counters; expedition selection has one paper
   rail. Reuse the measured frame windows and keep their corner scale uniform. */
#app .game-shell[data-page]:not([data-page="camp"]) .wallet[data-wallet-style^="paper-"] .wallet-chip {
  background: transparent !important; border: 0 !important; text-shadow: none;
}
#app .game-shell[data-page]:not([data-page="camp"]) .wallet[data-wallet-style^="paper-"] .wallet-chip::before { content: none; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet[data-wallet-style^="paper-"] .wallet-label { color: #68451f; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet[data-wallet-style^="paper-"] .wallet-chip b { color: #3f2c18; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet[data-wallet-style="paper-cards"] { padding: 2px 0; gap: 3px; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet[data-wallet-style="paper-cards"] .wallet-chip {
  height: 50px; min-height: 50px; padding: 4px 6px;
}
#app .game-shell[data-page]:not([data-page="camp"]) .wallet[data-wallet-style="paper-cards"] .wallet-chip > .paper-frame-skin { --paper-frame-scale: .055; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet[data-wallet-style="paper-rail"] { gap: 0; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet[data-wallet-style="paper-rail"] > .paper-frame-skin { --paper-frame-scale: .065; }
#app .game-shell[data-page]:not([data-page="camp"]) .wallet[data-wallet-style="paper-rail"] .wallet-chip + .wallet-chip::after {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: #bd9a625c; pointer-events: none;
}

/* Tap ledger: complete paper corners frame the workshop, production totals,
   combo and recipe forecasts; inset groups keep live amounts together. */
#app .game-shell[data-page="tap"] :is(.mother-tap-info,.mother-upgrade-split) {
  isolation: isolate; border: 0 !important; border-image: none !important;
  background: none !important; padding: 14px !important;
}
#app .game-shell[data-page="tap"] :is(.mother-tap-info,.mother-upgrade-split)::before,
#app .game-shell[data-page="tap"] :is(.mother-tap-info,.mother-upgrade-split)::after { content: none; }
#app .game-shell[data-page="tap"] :is(.mother-tap-info,.mother-upgrade-split) > .paper-frame-skin { --paper-frame-scale: .085; }
#app .game-shell[data-page="tap"] .mother-tap-info { grid-template-columns: 84px minmax(0,1fr); gap: 5px 8px; }
#app .game-shell[data-page="tap"] .mother-tap-workshop { grid-row: 1 / 4; }
#app .game-shell[data-page="tap"] .mother-tap-workshop > img { width: 84px; height: 112px; }
#app .game-shell[data-page="tap"] .mother-tap-level { padding: 3px 5px; border: 1px solid #b99b60; background: #ead09b; font-size: 12px; line-height: 16px; }
#app .game-shell[data-page="tap"] :is(.mother-tap-metrics,.mother-combo) { padding: 5px; border: 1px solid #cdb17a; background: #fff1cb9c; border-radius: 3px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics { gap: 5px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics > div { gap: 2px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics > div + div { padding-left: 5px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics span { font-size: 11px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics b { font-size: 22px; line-height: 24px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics small { font-size: 10px; line-height: 14px; }
#app .game-shell[data-page="tap"] .mother-combo { grid-column: 2; grid-row: 2; }
#app .game-shell[data-page="tap"] .mother-combo-heading { gap: 3px; }
#app .game-shell[data-page="tap"] .mother-combo-heading b { font-size: 14px; }
#app .game-shell[data-page="tap"] .mother-combo-heading > img { width: 17px; height: 20px; }
#app .game-shell[data-page="tap"] .mother-combo-heading [data-burst] { padding: 1px 3px; font-size: 10px; }
#app .game-shell[data-page="tap"] .mother-combo-segments { height: 20px; gap: 2px; margin: 4px 0; }
#app .game-shell[data-page="tap"] .mother-combo-segments > i { height: 20px; min-height: 20px; min-width: 0; }
#app .game-shell[data-page="tap"] .mother-combo p { font-size: 11px; line-height: 15px; }
#app .game-shell[data-page="tap"] .mother-tap-info > .mother-tap-note { grid-column: 2; padding: 3px 0 0 5px; border: 0; border-left: 2px solid #bfa16c; }
#app .game-shell[data-page="tap"] .mother-tap-note p { font-size: 11px; line-height: 15px; }
#app .game-shell[data-page="tap"] .is-burst .mother-tap-metrics { background: #ffe9a4; border-color: #c99132; }
#app .game-shell[data-page="tap"] .is-burst .mother-combo { background: #ffe6a8; border-color: #c99132; }
#app .game-shell[data-page="tap"] .mother-upgrade-split h2 { font-size: 16px; line-height: 21px; margin: 0 0 6px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split h3 { font-size: 11px; line-height: 15px; margin: 0 0 3px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split .mother-columns { gap: 5px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split .mother-columns > div,
#app .game-shell[data-page="tap"] .mother-next-upgrade > :is(.resource-list,.mother-upgrade-stats) { padding: 4px 5px; border: 1px solid #d2b781; border-radius: 3px; background: #fff1cb80; }
#app .game-shell[data-page="tap"] .mother-upgrade-cost > .resource-list,
#app .game-shell[data-page="tap"] .mother-next-upgrade > .resource-list { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
#app .game-shell[data-page="tap"] .mother-next-upgrade > .mother-upgrade-stats { margin-top: 5px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split .resource-value { gap: 3px; line-height: 19px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split .resource-value b { font-size: 14px; line-height: 19px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split .stat-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 2px; margin: 0; }
#app .game-shell[data-page="tap"] .mother-upgrade-split .stat-row > span { grid-row: 1; grid-column: 1 / -1; font-size: 11px; line-height: 15px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split .stat-row > b { grid-row: 2; grid-column: 1; justify-self: start; font-size: 16px; line-height: 21px; white-space: nowrap; }
#app .game-shell[data-page="tap"] .mother-upgrade-split .stat-row > small { grid-row: 2; grid-column: 2; align-self: center; justify-self: end; font-size: 10px; line-height: 14px; }
#app .game-shell[data-page="tap"] .mother-upgrade-split .stat-row + .stat-row { margin-top: 3px; }
#app .game-shell[data-page="tap"] .mother-payment { padding: 5px 0 0; margin-top: 5px; }
#app .game-shell[data-page="tap"] .mother-payment > span { display: block; margin-bottom: 3px; font-size: 11px; line-height: 15px; }
#app .game-shell[data-page="tap"] .mother-payment > .resource-list { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(2,minmax(0,1fr)); gap: 2px; }
#app .game-shell[data-page="tap"] .mother-payment .resource-value { gap: 2px; }
#app .game-shell[data-page="tap"] .mother-payment .resource-value > span { font-size: 0; }
#app .game-shell[data-page="tap"] .mother-payment .resource-value b { font-size: 13px; }
#app .game-shell[data-page="tap"] .mother-payment .resource-icon { width: 15px; height: 19px; flex: 0 0 15px; }
#app .game-shell[data-page="tap"] .mother-next-shortfall > span { display: block; margin-bottom: 2px; }
#app .game-shell[data-page="tap"] .mother-next-shortfall .material-term { display: inline-block; font-size: 11px; line-height: 16px; margin-right: 4px; }
#app .game-shell[data-page="tap"] .mother-next-shortfall .deficit { font-size: 0; line-height: 0; }
#app .game-shell[data-page="tap"] .mother-next-shortfall .deficit > .ui-icon { width: 17px; height: 19px; vertical-align: middle; }
#app .game-shell[data-page="tap"] .mother-current-upgrade > button.tap-workshop-upgrade-action.illustrated-button[data-button-skin="animal"] {
  --upgrade-skin-height: 68px; --upgrade-left: calc(68px * 780 / 793); --upgrade-right: calc(68px * 320 / 793);
  height: 54px; min-height: 54px; margin-top: 7px; font-size: 16px;
  padding: 5px var(--upgrade-right) 5px var(--upgrade-left) !important;
}
@container (max-width: 381px) {
  #app .game-shell[data-page="tap"] .mother-tap-info { grid-template-columns: 70px minmax(0,1fr); }
  #app .game-shell[data-page="tap"] .mother-tap-workshop { grid-row: 1; }
  #app .game-shell[data-page="tap"] .mother-tap-workshop > img { width: 70px; height: 78px; }
  #app .game-shell[data-page="tap"] .mother-combo { grid-column: 1 / -1; grid-row: 2; }
  #app .game-shell[data-page="tap"] .mother-tap-info > .mother-tap-note { grid-column: 1 / -1; grid-row: 3; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics b { font-size: 20px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics span { font-size: 10px; }
}

/* Landmark ledgers show the actual broken and restored art together. The
   restored half is labelled as a preview until the committed repair exists. */
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr);
  gap: 8px; padding: 15px 16px 17px !important;
  border: 0 !important; border-image: none !important; background: none !important;
}
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card > .paper-frame-skin { --paper-frame-scale: .105; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card > :is(.section-title,.muted) { grid-column: 1; margin: 0; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card > .section-title {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border-bottom: 1px solid #c8a870; padding-bottom: 5px;
}
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card > .section-title h2 { font-size: 19px; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card > .section-title > span {
  margin: 0; padding: 2px 7px; border: 1px solid #b9a16c; background: #ebd7aa; color: #775b31; font-size: 11px; line-height: 16px;
}
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card[data-landmark-state="repaired"] > .section-title > span {
  border-color: #82914f; color: #3e632c; background: #e5e5b8;
}
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card[data-landmark-state="short"] > .section-title > span {
  border-color: #b28b50; color: #825227; background: #ead6a0;
}
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-preview {
  display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); align-items: center; gap: 5px;
}
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-preview-state {
  display: grid; grid-template-rows: 112px auto; margin: 0; padding: 5px 4px 4px;
  border: 1px solid #d0b681; background: #e4d0a151; box-shadow: inset 0 1px #fff4d1;
}
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-preview-state.is-restored { background: #ebebbd73; border-color: #b3ad74; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-preview-art {
  display: block; width: 100%; height: 112px; max-height: none; object-fit: contain; margin: 0;
}
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-preview-state figcaption { margin-top: 3px; text-align: center; color: #7f6337; font-size: 11px; line-height: 16px; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-preview-state.is-restored figcaption { color: #526735; font-weight: 700; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-preview-arrow { text-align: center; color: #7b8d43; font-size: 24px; font-weight: 700; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) :is(.landmark-card-effect,.landmark-card-materials) { min-width: 0; padding: 6px 8px; border: 1px solid #d1b780; background: #fff0c286; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card :is(.landmark-card-effect,.landmark-card-materials) h3 {
  display: flex; align-items: center; gap: 4px; margin: 0 0 3px; color: #82643b; font-size: 11px; line-height: 17px;
}
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-effect h3 .ui-icon { width: 17px; height: 18px; margin: 0; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-effect p { margin: 0; font-size: 15px; line-height: 21px; font-weight: 700; color: #4a6b30; text-wrap: balance; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-materials > .resource-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px 7px; border: 0; padding: 0; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-materials .resource-value { min-width: 0; gap: 3px; font-size: 11px; line-height: 20px; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-materials .resource-value b { font-size: 15px; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-materials .resource-icon { flex: 0 0 19px; width: 19px; height: 22px; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-materials > :is(.sufficient,.deficit,.landmark-card-condition) { margin: 5px 0 0; padding-top: 5px; border-top: 1px dashed #c6ab75; font-size: 11px; line-height: 17px; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-condition { display: flex; align-items: center; gap: 4px; color: #795f37; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-condition .ui-icon { width: 18px; height: 20px; margin: 0; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-complete { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px; margin: 0; border: 1px solid #aab57a; background: #e7e9b9; font-size: 12px; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-complete .ui-icon { width: 19px; height: 21px; margin: 0; }
#app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card > .landmark-next-target { padding-top: 5px; border-top: 1px dashed #c8ad78; font-size: 11px; line-height: 16px; color: #8b7046; }
@container (max-width: 350px) {
  #app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card { gap: 7px; padding: 13px 13px 15px !important; }
  #app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card > .paper-frame-skin { --paper-frame-scale: .09; }
  #app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-preview { grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr); gap: 3px; }
  #app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-preview-state { grid-template-rows: 92px auto; }
  #app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-preview-art { height: 92px; }
  #app .game-shell:is([data-page="growth"],[data-page="landmarks"]) .landmark-card-materials > .resource-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* The recipe ledger keeps its paper corners at the same scale as the growth
   cards. Material ownership belongs beside the cost, before the action. */
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr);
  gap: 9px; padding: 16px 17px 18px !important;
  border: 0 !important; border-image: none !important; background: none !important;
}
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) > .paper-frame-skin { --paper-frame-scale: .105; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) > :is(p,.button,.craft-identity,.trade-heading) { margin: 0; }
#app .game-shell[data-page="growth"] .craft-identity { grid-template-columns: 88px minmax(0,1fr); gap: 3px 9px; }
#app .game-shell[data-page="growth"] .craft-workshop-art { grid-row: 1 / 3; }
#app .game-shell[data-page="growth"] .craft-workshop-art > img { width: 88px; height: 100px; }
#app .game-shell[data-page="growth"] .craft-identity > .recipe-state { grid-column: 2; justify-self: start; }
#app .game-shell[data-page="growth"] .recipe-state {
  display: inline-block; padding: 2px 7px; border: 1px solid #bda16a; background: #ead8af;
  color: #80623c; font-size: 11px; line-height: 18px; white-space: nowrap;
}
#app .game-shell[data-page="growth"] .recipe-state.is-ready { border-color: #9eac69; background: #e1e7b5; color: #46652d; }
#app .game-shell[data-page="growth"] .recipe-state.is-short { border-color: #c69b70; background: #f1ddbc; color: #9b4d32; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-row { grid-template-columns: minmax(0,1.25fr) 18px minmax(0,1fr); gap: 6px; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-row > div { padding: 8px; border: 1px solid #cbb17b; box-shadow: inset 0 0 0 2px #fff0ce66; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-row small { font-size: 11px; }
#app .game-shell[data-page="growth"] .recipe-materials { display: grid; gap: 5px; margin: 0; }
#app .game-shell[data-page="growth"] .recipe-material {
  display: grid; grid-template-columns: 23px minmax(0,1fr) auto; gap: 0 4px; align-items: center;
  min-width: 0; padding-bottom: 5px; border-bottom: 1px solid #c8ad7855;
}
#app .game-shell[data-page="growth"] .recipe-material:last-child { border: 0; padding-bottom: 0; }
#app .game-shell[data-page="growth"] .recipe-material > .resource-icon { grid-row: 1 / 3; width: 23px; height: 32px; max-height: none; object-fit: contain; }
#app .game-shell[data-page="growth"] .recipe-material dt { color: #79552c; font-size: 11px; }
#app .game-shell[data-page="growth"] .recipe-material dd { display: contents; }
#app .game-shell[data-page="growth"] .recipe-material dd > span { color: #896a42; font-size: 10px; white-space: nowrap; }
#app .game-shell[data-page="growth"] .recipe-material dd > span > b { color: #5f4225; font-size: 19px; font-variant-numeric: tabular-nums; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-material dd > small { grid-column: 2 / -1; margin: 0; color: #627040; font-size: 10px; line-height: 16px; overflow-wrap: anywhere; }
#app .game-shell[data-page="growth"] .recipe-material dd > small > b { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-material.is-short dd > small { color: #ad4830; }
#app .game-shell[data-page="growth"] .craft-effect { padding: 7px; border: 1px solid #b4bc84; background: #e2e7bb55; }
#app .game-shell[data-page="growth"] .craft-effect > span > b { display: block; color: #536f35; font-size: 12px; }
#app .game-shell[data-page="growth"] .craft-batch { padding: 6px 0; border-block: 1px dashed #c4ab79; }
#app .game-shell[data-page="growth"] .recipe-unlock { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 7px; border: 1px solid #c8ac77; background: #e7d5ac55; }
#app .game-shell[data-page="growth"] .recipe-unlock > p { margin: 0; font-size: 11px; color: #83613a; }
#app .game-shell[data-page="growth"] :is(.recipe-unlock,.market-identity) .text-button { min-height: 44px; padding: 4px; color: #6c6e33; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
#app .game-shell[data-page="growth"] .trade-heading { align-items: center; padding-bottom: 6px; border-bottom: 1px solid #c8ac77; }
#app .game-shell[data-page="growth"] .trade-heading > div > small { display: block; font-size: 10px; color: #8b6a40; }
#app .game-shell[data-page="growth"] .recipe-locked-note { color: #8a6d44; font-size: 11px; }
#app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) > .button { min-height: 50px; }
@container (max-width: 350px) {
  #app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) { padding: 14px 13px 16px !important; gap: 8px; }
  #app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) > .paper-frame-skin { --paper-frame-scale: .09; }
  #app .game-shell[data-page="growth"] .craft-identity { grid-template-columns: 72px minmax(0,1fr); }
  #app .game-shell[data-page="growth"] .craft-workshop-art > img { width: 72px; height: 96px; }
  #app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-row { gap: 4px; grid-template-columns: minmax(0,1.3fr) 16px minmax(0,1fr); }
  #app .game-shell[data-page="growth"] :is(.craft-card,.trade-card) .recipe-row > div { padding: 6px; }
  #app .game-shell[data-page="growth"] .recipe-material { grid-template-columns: 20px minmax(0,1fr) auto; gap: 0 3px; }
  #app .game-shell[data-page="growth"] .recipe-material > .resource-icon { width: 20px; height: 29px; }
  #app .game-shell[data-page="growth"] .recipe-material dd > span > b { font-size: 17px; }
  #app .game-shell[data-page="growth"] .recipe-unlock { flex-wrap: wrap; gap: 0; padding-block: 4px; }
}

/* Event routes use the same illustrated ledger as ordinary dispatch. The
   recipe sections stay readable before the player chooses a departure. */
#app .game-shell[data-page="adventure"] :is(.dispatch-lineup,.plan-comparison,.plan-card) {
  position: relative; isolation: isolate; border: 0 !important; border-image: none !important;
  background: none !important; border-radius: 0;
}
#app .game-shell[data-page="adventure"] .dispatch-lineup { padding: 10px 12px; min-height: 78px; }
#app .game-shell[data-page="adventure"] .dispatch-lineup > .paper-frame-skin { --paper-frame-scale: .075; }
#app .game-shell[data-page="adventure"] .dispatch-comparing .plan-comparison { padding: 12px 11px; }
#app .game-shell[data-page="adventure"] .plan-comparison > .paper-frame-skin { --paper-frame-scale: .085; }
#app .game-shell[data-page="adventure"] .comparison-context { display: grid; gap: 3px; padding-bottom: 6px; border-bottom: 1px solid #c6a977; }
#app .game-shell[data-page="adventure"] .comparison-context > b { display: flex; gap: 5px; align-items: center; font-size: 15px; line-height: 23px; color: #694621; }
#app .game-shell[data-page="adventure"] .comparison-context .ui-icon { width: 23px; height: 25px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .comparison-context > span { color: #8a693f; font-size: 11px; }
#app .game-shell[data-page="adventure"] .comparison-intro { margin: 6px 0 8px; color: #816840; font-size: 11px; line-height: 17px; }
#app .game-shell[data-page="adventure"] .plan-columns { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; align-items: stretch; }
#app .game-shell[data-page="adventure"] .plan-card { padding: 10px 9px !important; min-width: 0; box-shadow: none; }
#app .game-shell[data-page="adventure"] .plan-card > .paper-frame-skin { --paper-frame-scale: .065; }
#app .game-shell[data-page="adventure"] .plan-card.selected { box-shadow: inset 0 0 0 2px #6b8a43; }
#app .game-shell[data-page="adventure"] .plan-card .choice-button { width: 100%; min-height: 56px; margin: 0; color: #fff1c8; text-shadow: 0 1px #432a15; line-height: 1.3; }
#app .game-shell[data-page="adventure"] .plan-card .choice-button > .button-label { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; }
#app .game-shell[data-page="adventure"] .plan-choice-title { display: block; font-size: 14px; overflow-wrap: anywhere; }
#app .game-shell[data-page="adventure"] .plan-choice-title > small { display: block; font-size: 10px; line-height: 16px; color: #ead5a0; }
#app .game-shell[data-page="adventure"] .plan-choice-mark { display: grid; place-items: center; flex: 0 0 20px; height: 20px; border: 1px solid #c4a45c; color: #e6d296; font-size: 16px; line-height: 20px; }
#app .game-shell[data-page="adventure"] .choice-button[aria-pressed="true"] .plan-choice-mark { border-color: #d4dd8b; background: #5c7c38; color: #fff2ba; }
#app .game-shell[data-page="adventure"] .plan-numbers { display: grid; gap: 3px; margin: 8px 0; padding: 5px 0; border-block: 1px solid #c7ae7a; }
#app .game-shell[data-page="adventure"] .plan-numbers > div { min-height: 24px; align-items: center; gap: 3px; }
#app .game-shell[data-page="adventure"] .plan-numbers dt { display: flex; align-items: center; gap: 3px; color: #87643b; font-size: 11px; }
#app .game-shell[data-page="adventure"] .plan-numbers dt > .ui-icon { width: 17px; height: 21px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .plan-numbers dd { color: #496b2e; font-size: 16px; line-height: 24px; }
#app .game-shell[data-page="adventure"] .plan-numbers dd > small { color: #886d42; font-size: 10px; font-weight: 500; }
#app .game-shell[data-page="adventure"] :is(.plan-reward-block,.plan-cost-block) { min-width: 0; padding: 7px 6px; border: 1px solid #cbb17a; background: #e6c98f33; }
#app .game-shell[data-page="adventure"] .plan-reward-block { background: #dbe1ae44; }
#app .game-shell[data-page="adventure"] :is(.plan-reward-block,.plan-cost-block) > h3 { margin: 0 0 5px; padding: 0; border: 0; color: #78542b; font-size: 12px; line-height: 18px; }
#app .game-shell[data-page="adventure"] .plan-reward-block .comparison-resources { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 3px; }
#app .game-shell[data-page="adventure"] :is(.plan-reward-block,.plan-cost-block) .comparison-resources .resource-value { display: grid; grid-template-columns: 19px minmax(0,1fr); gap: 3px; white-space: normal; min-width: 0; }
#app .game-shell[data-page="adventure"] :is(.plan-reward-block,.plan-cost-block) .comparison-resources .resource-icon { width: 19px; height: 28px; object-fit: contain; }
#app .game-shell[data-page="adventure"] :is(.plan-reward-block,.plan-cost-block) .comparison-resources .resource-value > span { display: flex; flex-direction: column; color: #85653c; font-size: 10px; line-height: 15px; overflow-wrap: anywhere; }
#app .game-shell[data-page="adventure"] :is(.plan-reward-block,.plan-cost-block) .comparison-resources .resource-value b { font-size: 16px; line-height: 20px; color: #4f6f34; }
#app .game-shell[data-page="adventure"] .plan-cost-block .comparison-resources { grid-template-columns: minmax(0,1fr); }
#app .game-shell[data-page="adventure"] .plan-discarded { min-height: 0; margin: 7px 0; color: #956d44; font-size: 11px; line-height: 17px; overflow-wrap: anywhere; word-break: normal; }
#app .game-shell[data-page="adventure"] .plan-discarded > b { display: block; color: #8b5735; font-weight: 500; }
#app .game-shell[data-page="adventure"] .plan-discarded strong { font-size: 14px; }
#app .game-shell[data-page="adventure"] .plan-discarded > span { display: block; font-size: 10px; line-height: 17px; }
#app .game-shell[data-page="adventure"] .plan-free { margin: 0; font-size: 11px; line-height: 24px; color: #6d7040; }
#app .game-shell[data-page="adventure"] .plan-free > b { font-size: 18px; color: #4e7132; }
#app .game-shell[data-page="adventure"] .plan-seed { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; margin: 4px 0 0; font-size: 11px; line-height: 20px; }
#app .game-shell[data-page="adventure"] .plan-seed > img { width: 20px; height: 24px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .plan-risk-brief { display: flex; align-items: center; gap: 5px; min-height: 40px; padding: 7px 0 0; margin: 7px 0 0; font-size: 11px; line-height: 17px; border-top: 1px dashed #c1a674; color: #587139; }
#app .game-shell[data-page="adventure"] .plan-risk-brief > .ui-icon { width: 23px; height: 26px; object-fit: contain; flex: 0 0 23px; }
#app .game-shell[data-page="adventure"] .plan-risk-brief[data-risk="danger"] { color: #9c4e32; }
#app .game-shell[data-page="adventure"] .plan-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 15px 0; text-align: center; }
#app .game-shell[data-page="adventure"] .plan-empty > img { width: 65px; height: 75px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .plan-empty > p { margin: 0; color: #8a6a40; font-size: 12px; line-height: 19px; }
#app .game-shell[data-page="adventure"] .plan-event-details > summary { font-size: 12px; min-height: 44px; margin-top: 5px; padding-top: 4px; border-top: 1px solid #c4aa75; color: #78572e; }
@container (max-width: 350px) {
  #app .game-shell[data-page="adventure"] .dispatch-comparing .plan-comparison { padding: 12px 10px; }
  #app .game-shell[data-page="adventure"] .plan-columns { grid-template-columns: minmax(0,1fr); gap: 10px; }
  #app .game-shell[data-page="adventure"] .plan-card { padding: 12px !important; }
  #app .game-shell[data-page="adventure"] .plan-reward-block .comparison-resources { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
  #app .game-shell[data-page="adventure"] .plan-cost-block .comparison-resources { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app .game-shell[data-page="adventure"] .plan-choice-title { font-size: 15px; }
  #app .game-shell[data-page="adventure"] .plan-numbers dd { font-size: 18px; }
}

/* Ordinary dispatch and supply share the mother's paper ledgers. Keep the
   painted corners proportional and let the live recipe set the card height. */
#app .game-shell[data-page="adventure"] section.mother-party-panel,
#app .game-shell[data-page="adventure"] .mother-decision-grid > article:is(.mother-reward-panel,.mother-growth-panel) {
  position: relative; isolation: isolate; min-width: 0;
  border: 0 !important; border-image: none !important; background: none !important;
  box-shadow: none; padding: 12px !important;
}
#app .game-shell[data-page="adventure"] :is(.mother-party-panel,.mother-reward-panel,.mother-growth-panel) > .paper-frame-skin { --paper-frame-scale: .085; }
#app .game-shell[data-page="adventure"] .mother-growth-panel > .paper-frame-skin { grid-area: auto; }
#app .game-shell[data-page="adventure"] section.mother-party-panel { padding: 10px !important; }
#app .game-shell[data-page="adventure"] .mother-party-panel .section-title { margin: 0 0 4px; }
#app .game-shell[data-page="adventure"] .mother-decision-grid { gap: 8px; align-items: start; }
#app .game-shell[data-page="adventure"] .mother-reward-panel { display: grid; gap: 8px; align-content: start; }
#app .game-shell[data-page="adventure"] .mother-reward-intro { padding: 0; gap: 7px; }
#app .game-shell[data-page="adventure"] .mother-reward-intro > img { width: 42px; height: 46px; flex: 0 0 42px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .mother-reward-route { display: block; }
#app .game-shell[data-page="adventure"] .mother-reward-route > span { display: block; font-size: 11px; line-height: 16px; }
#app .game-shell[data-page="adventure"] .mother-reward-panel button.packing-shortcut.illustrated-button[data-button-skin="wood"] { position: relative; inset: auto; width: 100%; height: 48px; min-height: 48px; margin: 0; }
#app .game-shell[data-page="adventure"] .packing-shortcut .button-label { flex-direction: row; gap: 5px; font-size: 12px; }
#app .game-shell[data-page="adventure"] .mother-growth-panel { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; align-content: start; }
#app .game-shell[data-page="adventure"] .mother-growth-panel > * { grid-column: 1 / -1; grid-row: auto; min-width: 0; }
#app .game-shell[data-page="adventure"] .mother-growth-panel > h3 { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 14px; line-height: 22px; }
#app .game-shell[data-page="adventure"] .mother-growth-panel > h3 > .ui-icon { width: 20px; height: 23px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .mother-growth-heading { flex-direction: row; align-items: center; gap: 7px; text-align: left; }
#app .game-shell[data-page="adventure"] .mother-growth-portrait { flex: 0 0 52px; width: 52px; height: 62px; max-height: 62px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .mother-growth-heading > b { min-width: 0; font-size: 14px; line-height: 21px; }
#app .game-shell[data-page="adventure"] .mother-growth-heading small { display: block; font-size: 11px; line-height: 18px; }
#app .game-shell[data-page="adventure"] .mother-growth-heading :is(i,strong) { font-style: normal; color: #537431; }
#app .game-shell[data-page="adventure"] .mother-growth-panel h4 { margin: 0 0 4px; color: #886339; font-size: 11px; line-height: 17px; font-weight: 500; }
#app .game-shell[data-page="adventure"] :is(.dispatch-growth-recipe,.mother-growth-stats) { margin: 0; padding-top: 6px; border-top: 1px solid #c6aa73; }
#app .game-shell[data-page="adventure"] .mother-growth-cost { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 3px; padding: 0; border: 0; }
#app .game-shell[data-page="adventure"] .mother-growth-cost .resource-value { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 3px; min-width: 0; white-space: normal; }
#app .game-shell[data-page="adventure"] .mother-growth-cost .resource-icon { width: 18px; height: 26px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .mother-growth-cost .resource-value > span { font-size: 10px; line-height: 15px; }
#app .game-shell[data-page="adventure"] .mother-growth-cost .resource-value b { display: block; font-size: 16px; line-height: 21px; }
#app .game-shell[data-page="adventure"] .dispatch-growth-stat { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 4px; align-items: baseline; padding: 3px 0; }
#app .game-shell[data-page="adventure"] .dispatch-growth-stat > span { font-size: 11px; line-height: 18px; }
#app .game-shell[data-page="adventure"] .dispatch-growth-stat > b { font-size: 16px; line-height: 22px; white-space: nowrap; color: #6b4d2d; }
#app .game-shell[data-page="adventure"] .dispatch-growth-stat :is(i,strong) { color: #4e7431; font-style: normal; }
#app .game-shell[data-page="adventure"] .dispatch-growth-stat > small { grid-column: 1 / -1; justify-self: end; color: #8b6d43; font-size: 10px; line-height: 15px; }
#app .game-shell[data-page="adventure"] :is(.dispatch-growth-balance,.dispatch-growth-next) { padding: 6px; border: 1px solid #cbb17a; background: #e9cd9940; }
#app .game-shell[data-page="adventure"] .dispatch-growth-balance { background: #d8dfa33b; }
#app .game-shell[data-page="adventure"] :is(.dispatch-growth-balance-values,.dispatch-growth-next-values) { display: flex; flex-direction: column; align-items: start; gap: 3px; }
#app .game-shell[data-page="adventure"] :is(.dispatch-growth-balance-values,.dispatch-growth-next-values) .resource-value { display: flex; gap: 4px; align-items: center; min-width: 0; font-size: 11px; line-height: 19px; white-space: normal; }
#app .game-shell[data-page="adventure"] :is(.dispatch-growth-balance-values,.dispatch-growth-next-values) .resource-icon { flex: 0 0 17px; width: 17px; height: 20px; object-fit: contain; }
#app .game-shell[data-page="adventure"] :is(.dispatch-growth-balance-values,.dispatch-growth-next-values) .resource-value b { font-size: 13px; white-space: nowrap; }
#app .game-shell[data-page="adventure"] .dispatch-growth-balance.is-short :is(h4,b) { color: #a0442b; }
#app .game-shell[data-page="adventure"] button.mother-growth-train.button.illustrated-button[data-button-skin] { --upgrade-skin-height: 66px; height: 52px; min-height: 52px; border: 0 !important; border-image: none !important; padding: 0 21px 0 60px !important; font-size: 14px; }
#app .game-shell[data-page="adventure"] .mother-growth-train .button-label { white-space: nowrap; font-size: 14px; }
#app .game-shell[data-page="adventure"] .mother-growth-mastered { margin: 0; color: #537431; font-size: 16px; }
@container (max-width: 381px) {
  #app .game-shell[data-page="adventure"] .mother-reward-resources { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app .game-shell[data-page="adventure"] .mother-growth-cost { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app .game-shell[data-page="adventure"] :is(.dispatch-growth-balance-values,.dispatch-growth-next-values) { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
}

/* Supporting pages carry the same painted paper corners as the core pages.
   The art remains behind live content; long cards grow and scroll normally. */
#app .game-shell[data-page="missions"] .mission-ledger article.mission,
#app .game-shell[data-page="missions"] :is(.mission-all-complete,.mission-archive > summary),
#app .game-shell[data-page="codex"] :is(.codex-collection-cover,button.codex-entity-card),
#app .game-shell[data-page="settings"] .settings-ledger > article.parchment,
#app .game-shell[data-page] article.log-entry {
  position: relative; isolation: isolate; min-width: 0;
  border: 0 !important; border-image: none !important;
  background: none !important; box-shadow: none; padding: 14px !important;
}
#app .game-shell[data-page="missions"] :is(.mission,.mission-all-complete,.mission-archive > summary) > .paper-frame-skin,
#app .game-shell[data-page="codex"] :is(.codex-collection-cover,.codex-entity-card) > .paper-frame-skin,
#app .game-shell[data-page="settings"] .settings-ledger > article > .paper-frame-skin,
#app .game-shell[data-page] .log-entry > .paper-frame-skin { --paper-frame-scale: .085; grid-area: auto; }
#app .game-shell[data-page="missions"] .mission-archive > summary { gap: 9px; }
#app .game-shell[data-page="missions"] .mission-progress b { font-size: 16px; }
#app .game-shell[data-page="missions"] .mission-state { font-size: 11px; line-height: 18px; }
#app .game-shell[data-page="codex"] button.codex-entity-card { padding: 12px !important; gap: 6px; }
#app .game-shell[data-page="codex"] .codex-entity-art { height: 96px; max-height: 96px; }
#app .game-shell[data-page="codex"] .codex-directory > summary {
  position: relative; isolation: isolate; display: flex; align-items: center;
  gap: 8px; min-height: 64px; padding: 12px 20px;
  border: 0 !important; border-image: none !important; background: none;
  box-shadow: none; list-style: none;
}
#app .game-shell[data-page="codex"] .codex-directory > summary::-webkit-details-marker { display: none; }
#app .game-shell[data-page="codex"] .codex-directory-copy { display: block; flex: 1; min-width: 0; }
#app .game-shell[data-page="codex"] .codex-directory-copy > :is(b,small) { display: block; }
#app .game-shell[data-page="codex"] .codex-directory-chevron { font-size: 20px; font-style: normal; transform: rotate(-90deg); }
#app .game-shell[data-page="codex"] .codex-directory[open] > summary .codex-directory-chevron { transform: none; }
#app .game-shell[data-page="settings"] .setting-copy b { font-size: 14px; }
#app .game-shell[data-page="settings"] .setting-copy small { font-size: 11px; line-height: 17px; }
@container (max-width: 340px) {
  #app .game-shell[data-page="codex"] button.codex-entity-card { padding: 11px !important; }
  #app .game-shell[data-page="codex"] .codex-entity-art { height: 88px; max-height: 88px; }
  #app .game-shell[data-page="settings"] .settings-ledger > article.parchment { padding: 13px !important; }
  #app .game-shell[data-page="settings"] .setting-copy b { font-size: 13px; }
  #app .game-shell[data-page="settings"] .setting-copy small { font-size: 10px; line-height: 16px; }
}

/* Roster and season headings keep the painted wood ends at one scale.
   Companion cards retain their own illustrated frames and source ratio. */
#app .game-shell[data-page="team"] .screen-content > .section-title,
#app .game-shell[data-page="season"] .season-choices-heading {
  position: relative; isolation: isolate; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 2px 8px;
  min-height: 52px; margin: 0 0 10px; padding: 10px 20px;
  border: 0 !important; border-image: none !important; background: none;
  color: #ffe9b6; text-shadow: 0 1px #483017;
}
#app .game-shell[data-page="team"] .screen-content > .section-title h2,
#app .game-shell[data-page="season"] .season-choices-heading > span:not(.illustrated-button-skin) {
  font-size: 15px; line-height: 22px;
}
#app .game-shell[data-page="season"] .season-choices-heading small { font-size: 10px; line-height: 16px; }

/* Seasonal gifts use the core recipe's complete paper corners. Only the
   undecorated spans extend as conditions and descriptions grow. */
#app .game-shell[data-page="season"] .season-ledger > article:is(.season-overview,.talent-card,.season-guidance) {
  position: relative; isolation: isolate; min-width: 0;
  border: 0 !important; border-image: none !important;
  background: none !important; box-shadow: none; padding: 14px !important;
}
#app .game-shell[data-page="season"] .season-ledger > article > .paper-frame-skin {
  --paper-frame-scale: .095; grid-area: auto;
}
#app .game-shell[data-page="season"] .season-overview .section-title { gap: 6px; margin: 0 0 8px; }
#app .game-shell[data-page="season"] .season-overview .milestone-grid { gap: 5px; margin: 0 0 8px; }
#app .game-shell[data-page="season"] .season-overview .milestone-grid > div {
  min-height: 78px; padding: 5px 2px; gap: 2px;
  background: #e7cc9340; box-shadow: inset 0 0 0 2px #ead5aa;
}
#app .game-shell[data-page="season"] .season-overview .milestone-art { width: 30px; height: 31px; object-fit: contain; }
#app .game-shell[data-page="season"] .season-ready-summary { margin: 0; padding: 7px; gap: 7px; }
#app .game-shell[data-page="season"] .season-ready-summary b { font-size: 13px; }
#app .game-shell[data-page="season"] .season-ready-summary small { font-size: 11px; line-height: 17px; }
#app .game-shell[data-page="season"] .season-ledger > article.talent-card {
  grid-template-columns: 62px minmax(0,1fr); gap: 9px 10px; align-items: center;
}
#app .game-shell[data-page="season"] .talent-card > .talent-art { width: 62px; height: 68px; object-fit: contain; }
#app .game-shell[data-page="season"] .talent-card-copy { min-width: 0; }
#app .game-shell[data-page="season"] .talent-card h3 { font-size: 19px; line-height: 26px; margin: 0 0 3px; }
#app .game-shell[data-page="season"] .talent-card h3 small { display: inline-block; font-size: 11px; line-height: 18px; margin-left: 6px; font-weight: normal; }
#app .game-shell[data-page="season"] .talent-card-copy > p { font-size: 12px; line-height: 19px; }
#app .game-shell[data-page="season"] .talent-card > .season-effect-change { padding: 8px; gap: 6px 12px; flex-wrap: wrap; }
#app .game-shell[data-page="season"] .talent-card .season-effect-change > small { font-size: 11px; line-height: 18px; }
#app .game-shell[data-page="season"] .talent-card .season-effect-change > p { font-size: 20px; line-height: 28px; white-space: nowrap; }
#app .game-shell[data-page="season"] .talent-card .button { min-height: 50px; font-size: 14px; }
#app .game-shell[data-page="season"] .season-guidance .season-overview-details > summary { font-size: 13px; min-height: 48px; }
#app .game-shell[data-page="season"] .season-guidance > details:first-of-type > summary { border-top: 0; }
@container (max-width: 340px) {
  #app .game-shell[data-page="team"] .screen-content > .section-title,
  #app .game-shell[data-page="season"] .season-choices-heading { padding-inline: 17px; gap: 2px 5px; }
  #app .game-shell[data-page="season"] .season-choices-heading > span:not(.illustrated-button-skin) { font-size: 14px; }
  #app .game-shell[data-page="season"] .season-choices-heading small { font-size: 9px; }
  #app .game-shell[data-page="season"] .season-ledger > article:is(.season-overview,.talent-card,.season-guidance) { padding: 13px !important; }
  #app .game-shell[data-page="season"] .season-overview .milestone-grid { gap: 4px; }
  #app .game-shell[data-page="season"] .season-overview .milestone-grid b { font-size: 14px; }
  #app .game-shell[data-page="season"] .season-ledger > article.talent-card { grid-template-columns: 54px minmax(0,1fr); gap: 8px; }
  #app .game-shell[data-page="season"] .talent-card > .talent-art { width: 54px; height: 64px; }
  #app .game-shell[data-page="season"] .talent-card h3 { font-size: 18px; }
}

/* State variants carry the same paper treatment as their ordinary pages. */
#app .game-shell[data-page] article.party-card,
#modal-root .camp-journal-content :is(article.party-card,button.feature-button),
#app .game-shell[data-page="tap"] .tap-workshop-complete,
#app .game-shell[data-page="trip"] :is(.supply-trip-cargo,.mother-return-growth,.mother-return-empty),
#modal-root .mother-offline-modal :is(.mother-offline-sources,.mother-offline-inventory,.mother-offline-upgrade) {
  position: relative; isolation: isolate; min-width: 0;
  border: 0 !important; border-image: none !important;
  background: none !important; box-shadow: none; padding: 14px !important;
}
#app .game-shell[data-page] article.party-card > .paper-frame-skin,
#modal-root .camp-journal-content :is(.party-card,.feature-button) > .paper-frame-skin,
#app .game-shell[data-page="tap"] .tap-workshop-complete > .paper-frame-skin,
#app .game-shell[data-page="trip"] :is(.supply-trip-cargo,.mother-return-growth,.mother-return-empty) > .paper-frame-skin,
#modal-root .mother-offline-modal :is(.mother-offline-sources,.mother-offline-inventory,.mother-offline-upgrade) > .paper-frame-skin {
  --paper-frame-scale: .095; grid-area: auto;
}
#modal-root .camp-journal-content button.feature-button { gap: 7px; min-height: 142px; color: #674725; }
#modal-root .camp-journal-content button.feature-button > .paper-frame-skin { --paper-frame-scale: .075; }
#modal-root .camp-journal-content button.feature-button > span:not(.paper-frame-skin) { min-width: 0; }
:is(#app,#modal-root) article.party-card .section-title { margin: 0 0 8px; gap: 6px; }
:is(#app,#modal-root) article.party-card .section-title h2 { font-size: 15px; }
:is(#app,#modal-root) article.party-card .section-title > span { font-size: 11px; }
:is(#app,#modal-root) article.party-card .party-mini { display: grid; grid-template-columns: 38px 38px minmax(0,1fr) 64px; gap: 5px; }
:is(#app,#modal-root) article.party-card .mini-animal { width: 38px; height: 48px; object-fit: contain; }
:is(#app,#modal-root) article.party-card .party-mini > div { margin: 0; min-width: 0; }
:is(#app,#modal-root) article.party-card .party-mini small { font-size: 10px; line-height: 15px; }
:is(#app,#modal-root) article.party-card .party-mini .button { min-height: 44px; margin: 0; font-size: 12px; }
:is(#app,#modal-root) article.party-card .progress { height: 10px; padding: 1px; border: 1px solid #9a8052; background: #c6b181; background-image: none; margin: 9px 0; }
:is(#app,#modal-root) article.party-card .progress > span { height: 100%; background: #79a347; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-repeat-control {
  position: relative; isolation: isolate; border: 0 !important; border-image: none !important;
  padding: 7px 12px; min-height: 54px; background: none; box-shadow: none;
}
#app .game-shell[data-page="trip"] .supply-repeat-control > .illustrated-button-skin { grid-area: auto; }
/* Supply has the same paper ledger and paired actions as the active mother.
   Its full-width switch keeps the transport consequence readable at 320px. */
#app .game-shell[data-page="trip"] .supply-trip-cargo { gap: 8px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo > h2 { font-size: 16px; min-height: 29px; padding-bottom: 5px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo > h2 .ui-icon { width: 25px; height: 25px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-heading { grid-template-columns: 56px minmax(0,1fr); gap: 9px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-art { width: 56px; height: 62px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-heading h3 { font-size: 16px !important; line-height: 22px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-heading :is(small,p) { font-size: 12px; line-height: 19px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources { grid-template-columns: repeat(3,minmax(0,1fr)); padding: 7px 0; gap: 6px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources .resource-value {
  display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 5px; text-align: left; font-size: 12px; line-height: 18px;
}
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources .resource-icon { width: 28px; height: 34px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources .resource-value > span { display: block; line-height: 18px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-resources .resource-value b { display: block; font-size: 22px; line-height: 26px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-capacity { font-size: 12px; line-height: 20px; gap: 3px 5px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-capacity b { font-size: 18px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-manifest-capacity > span { font-size: 11px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-delivery-time {
  grid-column: 1 / -1; min-height: 39px; padding: 6px 0; gap: 6px;
  border-block: 1px solid #cbb07b; background: none; font-size: 12px; line-height: 22px;
}
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-delivery-time .ui-icon { width: 20px; height: 24px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-delivery-time b { margin-left: auto; font-size: 22px; line-height: 27px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-repeat-control { grid-column: 1 / -1; min-height: 60px; padding: 7px 30px; gap: 10px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-repeat-control strong { font-size: 13px; line-height: 20px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-repeat-control small { margin-top: 1px; font-size: 11px; line-height: 17px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-repeat-control > i { width: 38px; flex-basis: 38px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .supply-repeat-control.is-on > i::after { left: 19px; }
#app .game-shell[data-page="trip"] .supply-trip-cargo .mother-trip-actions button.illustrated-button:is([data-button-skin="returnCamp"],[data-button-skin="collect"]) {
  padding-right: calc(78px * 280 / 753) !important;
}
@container (max-width: 350px) {
  #app .game-shell[data-page="trip"] .supply-trip-cargo .mother-trip-actions button.illustrated-button:is([data-button-skin="returnCamp"],[data-button-skin="collect"]) {
    --trip-action-art-height: 68px; font-size: 13px;
    padding: 5px calc(68px * 280 / 753) 5px calc(68px * 700 / 753) !important;
  }
}
#modal-root .mother-offline-sources > .paper-frame-skin { min-height: 0; }
#modal-root .mother-offline-upgrade > .mother-board-art { left: 14px; top: 14px; }
#app .game-shell[data-page="trip"] .mother-return-growth > .mother-return-next { grid-column: 1 / -1; }
#app .game-shell[data-page="trip"] .mother-return-empty { color: #674725; opacity: 1; text-align: left; }
#app .game-shell[data-page="trip"] .mother-return-empty > b { display: block; font-size: 15px; line-height: 22px; }
#app .game-shell[data-page="trip"] .mother-return-empty > p { margin: 7px 0 0; color: #85633a; font-size: 12px; line-height: 20px; }
@container (max-width: 340px) {
  #app .game-shell[data-page] article.party-card,
  #modal-root .camp-journal-content :is(article.party-card,button.feature-button),
  #app .game-shell[data-page="tap"] .tap-workshop-complete,
  #app .game-shell[data-page="trip"] :is(.supply-trip-cargo,.mother-return-growth,.mother-return-empty),
  #modal-root .mother-offline-modal :is(.mother-offline-sources,.mother-offline-inventory,.mother-offline-upgrade) { padding: 12px !important; }
  :is(#app,#modal-root) article.party-card .party-mini { grid-template-columns: 31px 31px minmax(0,1fr) 58px; gap: 4px; }
  :is(#app,#modal-root) article.party-card .mini-animal { width: 31px; height: 44px; }
  #modal-root .mother-offline-upgrade > .mother-board-art { left: 12px; top: 12px; }
}

/* Homecoming keeps the reference's paper title and campfire between the
   companions. Crop the environment in the hero instead of its mountain top. */
#app .game-shell[data-page="trip"] .mother-return-hero {
  height: 214px;
  background: url(../assets/environments/scene-night-mother-v2.png) center 44% / 100% auto no-repeat;
}
#app .game-shell[data-page="trip"] .mother-return-hero h1 {
  isolation: isolate; display: flex; align-items: center; justify-content: center;
  width: min(68%,250px); min-height: 60px; padding: 12px 18px;
  border: 0; border-image: none; background: none;
  color: #553315; text-shadow: 0 1px #fff1cd; font-size: 28px; line-height: 1.2;
}
#app .game-shell[data-page="trip"] .mother-return-hero h1 > .paper-frame-skin { --paper-frame-scale: .11; grid-area: auto; }
#app .game-shell[data-page="trip"] .mother-return-animal { bottom: 30px; height: 118px; width: 29%; }
#app .game-shell[data-page="trip"] .mother-return-animal[data-side="0"] { left: 7%; }
#app .game-shell[data-page="trip"] .mother-return-animal[data-side="1"] { right: 7%; }
#app .game-shell[data-page="trip"] .mother-return-hero > p { margin: 0; }
#app .game-shell[data-page="trip"] .mother-return-history > summary {
  position: relative; isolation: isolate; min-height: 54px; padding: 10px 17px;
  border: 0; border-image: none; background: none;
}
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) {
  grid-template-columns: 104px minmax(0,1fr); gap: 11px 12px; align-items: center;
}
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .mother-return-growth-identity { grid-column: 1; grid-row: 1; }
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .mother-return-growth-identity > img { height: 112px; }
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .mother-return-growth-recipe { display: contents; }
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .mother-return-growth-recipe h2 {
  grid-column: 2; grid-row: 1; font-size: 22px; line-height: 29px;
}
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .mother-columns {
  grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch;
}
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .mother-payment { grid-column: 1 / -1; margin-top: 0; }
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .mother-payment > .resource-list { flex-direction: row; flex-wrap: wrap; gap: 5px 12px; }
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) :is(.mother-upgrade-cost,.mother-upgrade-stats) {
  padding: 7px; border: 1px solid #cdb47d; background: #fff1cc66;
}
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .resource-list { gap: 6px; font-size: 12px; }
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .resource-value b { font-size: 18px; }
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .resource-icon { width: 24px; height: 28px; flex-shrink: 0; }
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .stat-row { display: flex; flex-direction: column; align-items: start; gap: 0; font-size: 12px; line-height: 20px; margin: 5px 0 8px; }
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .stat-row b { font-size: 23px; line-height: 29px; }
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .stat-row small { flex-basis: auto; font-size: 11px; line-height: 18px; }
#app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .mother-return-next { margin-top: 3px; padding: 0; border: 0; min-width: 0; }
#app .game-shell[data-page="trip"] .mother-return-next > summary {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  gap: 6px; min-height: 48px; padding: 8px 12px; font-size: 13px; line-height: 20px;
  color: #ffedc6; text-shadow: 0 1px #483017; list-style: none;
}
#app .game-shell[data-page="trip"] .mother-return-next > summary::-webkit-details-marker { display: none; }
#app .game-shell[data-page="trip"] .mother-return-next > summary::before { content: '▸'; }
#app .game-shell[data-page="trip"] .mother-return-next[open] > summary::before { content: '▾'; }
#app .game-shell[data-page="trip"] .mother-return-next > summary > span:not(.illustrated-button-skin) { position: relative; }
#app .game-shell[data-page="trip"] .return-next-recipe { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 20px auto auto; align-items: start; gap: 5px 10px; padding-top: 10px; }
#app .game-shell[data-page="trip"] .return-next-recipe > h3 { grid-column: 1; grid-row: 1; margin: 0; font-size: 13px; line-height: 20px; }
#app .game-shell[data-page="trip"] .return-next-recipe > .resource-list { grid-column: 1; grid-row: 2; flex-direction: column; align-items: start; margin: 0; }
#app .game-shell[data-page="trip"] .return-next-recipe > .mother-upgrade-stats { grid-column: 2; grid-row: 1 / span 2; }
#app .game-shell[data-page="trip"] .return-next-recipe > .mother-upgrade-stats > h3 { margin: 0 0 4px; font-size: 13px; line-height: 20px; }
#app .game-shell[data-page="trip"] .return-next-recipe > .mother-next-shortfall { grid-column: 1 / -1; margin: 3px 0 0; padding-top: 7px; font-size: 12px; line-height: 20px; }
#app .game-shell[data-page="trip"] .return-next-recipe .mother-next-shortfall .deficit-label { display: none; }

/* Confirming an early return uses the same paper windows as the cargo and
   recipe ledgers. The footer remains outside the scrolling body. */
#modal-root .return-trip-modal :is(.return-preview-hero,.return-preview-bag,.return-preview-consequences,.return-preview-discarded) {
  position: relative; isolation: isolate; min-width: 0;
  border: 0; border-image: none; background: none; padding: 14px;
}
#modal-root .return-trip-modal :is(.return-preview-hero,.return-preview-bag,.return-preview-consequences,.return-preview-discarded) > .paper-frame-skin {
  --paper-frame-scale: .085; grid-area: auto;
}
#modal-root .return-preview-party { gap: 8px; padding-top: 8px; }
#modal-root .return-preview-party .return-preview-animal { width: 58px; height: 74px; flex-basis: 58px; }
#modal-root .return-preview-party b { font-size: 15px; }
#modal-root .return-preview-route h3 { font-size: 18px; }
#modal-root .return-preview-bag h3 { font-size: 16px; }
#modal-root .return-preview-pack { width: 48px; height: 54px; flex-basis: 48px; }
#modal-root .return-preview-materials { gap: 6px; }
#modal-root .return-preview-materials > div { min-height: 60px; padding: 6px 4px; grid-template-columns: 24px minmax(0,1fr); }
#modal-root .return-preview-materials .resource-icon { width: 24px; height: 29px; }
#modal-root .return-preview-materials dt { font-size: 11px; }
#modal-root .return-preview-materials dd { font-size: 22px; }
#modal-root .return-preview-consequences h3 { font-size: 15px; }
#modal-root .return-preview-consequences p { font-size: 12px; line-height: 20px; }
@container (max-width: 350px) {
  #app .game-shell[data-page="trip"] .mother-return-hero { height: 200px; }
  #app .game-shell[data-page="trip"] .mother-return-hero h1 { min-height: 54px; font-size: 25px; padding: 10px 16px; }
  #app .game-shell[data-page="trip"] .mother-return-animal { height: 106px; bottom: 32px; }
  #app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) { grid-template-columns: 88px minmax(0,1fr); gap: 8px; }
  #app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .mother-return-growth-identity > img { height: 98px; }
  #app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .mother-return-growth-recipe h2 { font-size: 20px; line-height: 27px; }
  #app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .resource-icon { width: 21px; height: 26px; }
  #app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .resource-value { gap: 2px; font-size: 11px; }
  #app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .resource-value b { font-size: 17px; }
  #app .game-shell[data-page="trip"] .mother-return-growth:not(.is-mastered) .stat-row b { font-size: 21px; }
  #modal-root .return-trip-modal :is(.return-preview-hero,.return-preview-bag,.return-preview-consequences,.return-preview-discarded) { padding: 12px; }
  #modal-root .return-preview-party .return-preview-animal { width: 48px; height: 64px; flex-basis: 48px; }
  #modal-root .return-preview-time b { font-size: 21px; }
  #modal-root .return-preview-materials > div { min-height: 57px; }
}

/* Detail windows share the same source paper corners as the growth recipes. */
#modal-root :is(.codex-facts-paper,.codex-recruitment,.codex-history-overview,.codex-history-failures,.codex-history-recent,.codex-history-empty),
#modal-root .codex-landmark-detail > :is(.landmark-effect-panel,.landmark-codex-condition,.landmark-repair-materials),
:is(#app,#modal-root) .animal-availability-panel {
  position: relative; isolation: isolate; min-width: 0; padding: 14px;
  border: 0; border-image: none; background: none; box-shadow: none;
}
#modal-root :is(.codex-facts-paper,.codex-recruitment,.codex-history-overview,.codex-history-failures,.codex-history-recent,.codex-history-empty) > .paper-frame-skin,
#modal-root .codex-landmark-detail > section > .paper-frame-skin,
:is(#app,#modal-root) .animal-availability-panel > .paper-frame-skin {
  --paper-frame-scale: .085; grid-area: auto;
}
#modal-root .codex-entity-detail > :is(.codex-facts-paper,.codex-recruitment) { margin-top: 12px; }
#modal-root .codex-facts { margin: 0; padding: 0; border: 0; background: none; font-size: 13px; }
#modal-root .codex-facts > div { padding: 7px 0; border-bottom: 1px solid #cbb18466; }
#modal-root .codex-facts > div:first-child { padding-top: 0; }
#modal-root .codex-facts > div:last-child { padding-bottom: 0; border-bottom: 0; }
#modal-root .codex-facts dd { font-size: 15px; line-height: 22px; }
#modal-root .codex-recruitment > h3 { margin: 0 0 5px; font-size: 15px; }
#modal-root .codex-recruitment > p { margin: 5px 0; }
#modal-root .codex-recruitment .resource-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
#modal-root .codex-recruitment .resource-value b { font-size: 17px; }
#modal-root .codex-landmark-detail > section h3 { font-size: 15px; }
#modal-root .codex-landmark-detail .landmark-codex-condition p { font-size: 12px; line-height: 20px; }
:is(#app,#modal-root) .animal-availability-panel { padding: 13px; gap: 8px; color: #6f5c85; }
:is(#app,#modal-root) .animal-availability-panel.is-busy { background: none; color: #55733c; }
:is(#app,#modal-root) .animal-availability-panel b { font-size: 14px; }
:is(#app,#modal-root) .animal-availability-panel strong { display: inline-block; font-size: 21px; }
:is(#app,#modal-root) .animal-availability-panel p { font-size: 12px !important; line-height: 20px !important; }

#modal-root .codex-letter-appendix { border: 0; padding: 0; display: grid; gap: 10px; }
#modal-root .codex-letter-appendix > h3.codex-history-title {
  position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: 54px; margin: 0; padding: 10px 18px;
  color: #ffeac1; text-shadow: 0 1px #503519; font-size: 15px;
}
#modal-root .codex-history-overview > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#modal-root .codex-history-overview > header h4 { margin: 0; font-size: 15px; }
#modal-root .codex-history-overview > header > span { font-size: 12px; }
#modal-root .codex-history-overview > header b { font-size: 19px; }
#modal-root .codex-history-counts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 9px 0; }
#modal-root .codex-history-counts > div { min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 7px 2px; background: #d6bc7f33; border: 1px solid #cbb18288; text-align: center; }
#modal-root .codex-history-counts .ui-icon { width: 27px; height: 29px; object-fit: contain; }
#modal-root .codex-history-counts span { font-size: 11px; line-height: 18px; }
#modal-root .codex-history-counts b { display: block; color: #526e35; font-size: 24px; line-height: 29px; }
#modal-root .codex-history-counts > div:nth-child(2) b { color: #9b4f33; }
#modal-root .codex-history-counts small { font-size: 10px; font-weight: normal; margin-left: 2px; }
#modal-root .codex-letter-appendix .codex-history-protection { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; margin: 0; font-size: 12px; }
#modal-root .codex-history-protection > img { width: 23px; height: 27px; object-fit: contain; }
#modal-root .codex-history-protection > span { margin-left: auto; }
#modal-root :is(.codex-history-failures,.codex-history-recent,.codex-history-empty) h4 { margin: 0 0 7px; display: flex; align-items: center; gap: 6px; font-size: 14px; }
#modal-root .codex-history-failures h4 > .ui-icon { width: 24px; height: 27px; object-fit: contain; }
#modal-root :is(.codex-history-failures,.codex-history-recent) .resource-list { margin: 8px 0; gap: 9px 8px; }
#modal-root :is(.codex-history-failures,.codex-history-recent) .resource-value { font-size: 12px; }
#modal-root :is(.codex-history-failures,.codex-history-recent) .resource-value b { font-size: 19px; }
#modal-root :is(.codex-history-failures,.codex-history-recent) .resource-icon { width: 23px; height: 27px; }
#modal-root .codex-history-fatigue { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; border-top: 1px solid #cbb184; margin-top: 10px; padding-top: 9px; color: #706183; font-size: 12px; }
#modal-root .codex-history-fatigue > .rest-moon { width: 19px; height: 19px; }
#modal-root .codex-history-fatigue > span:last-child { margin-left: auto; }
#modal-root .codex-history-fatigue strong { display: inline-block; font-size: 20px; font-variant-numeric: tabular-nums; }
#modal-root .codex-history-recent > header { display: grid; grid-template-columns: 68px minmax(0,1fr); align-items: center; gap: 9px; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid #cbb184; }
#modal-root .codex-history-route-art { width: 68px; height: 65px; object-fit: contain; }
#modal-root .codex-history-recent > header small { font-size: 11px; color: #8b6d43; }
#modal-root .codex-history-recent > header h4 { font-size: 19px; margin: 2px 0; }
#modal-root .codex-history-recent > header p { margin: 0; font-size: 12px; }
#modal-root .codex-letter-appendix p.codex-history-discarded { border-top: 1px solid #cbb184; margin: 9px 0 0; padding-top: 7px; font-size: 12px; }
#modal-root .codex-history-paid { margin-top: 8px; }
#modal-root .codex-letter-appendix .codex-history-footnote { margin: 0; font-size: 11px; color: #8b6d43; }
#modal-root .codex-history-empty > .ui-icon { width: 36px; height: 40px; object-fit: contain; margin-bottom: 6px; }
#modal-root .codex-history-empty p { margin: 0; font-size: 12px; }
#modal-root .codex-letter-appendix > .button { margin-top: 0; min-height: 50px; }
@container (max-width: 350px) {
  #modal-root :is(.codex-facts-paper,.codex-recruitment,.codex-history-overview,.codex-history-failures,.codex-history-recent,.codex-history-empty),
  #modal-root .codex-landmark-detail > :is(.landmark-effect-panel,.landmark-codex-condition,.landmark-repair-materials),
  :is(#app,#modal-root) .animal-availability-panel { padding: 12px; }
  #modal-root .codex-facts { font-size: 12px; }
  #modal-root .codex-facts dd { font-size: 14px; }
  #modal-root .codex-history-counts { gap: 4px; }
  #modal-root .codex-history-counts b { font-size: 22px; }
  #modal-root .codex-history-counts .ui-icon { width: 24px; height: 26px; }
  #modal-root .codex-history-protection > span { margin-left: 28px; }
  #modal-root .codex-history-recent > header { grid-template-columns: 56px minmax(0,1fr); gap: 7px; }
  #modal-root .codex-history-route-art { width: 56px; height: 58px; }
  #modal-root .codex-history-recent > header h4 { font-size: 17px; }
}

/* Dispatch details continue the expedition mother's paper and timber language.
   Both the ledger and each priority card keep proportional source corners. */
#app .game-shell[data-page="adventure"] .dispatch-manifest[open],
#app .game-shell[data-page="adventure"] :is(.dispatch-packing-sheet,.packing-options,.priority-item) {
  position: relative; isolation: isolate; border: 0 !important; border-image: none !important;
  border-radius: 0; background: none !important; box-shadow: none;
}
#app .game-shell[data-page="adventure"] .dispatch-manifest[open] { padding: 12px !important; }
#app .game-shell[data-page="adventure"] .dispatch-manifest > .paper-frame-skin { --paper-frame-scale: .085; }
#app .game-shell[data-page="adventure"] .dispatch-manifest[open] > summary {
  font-size: 14px; line-height: 22px; padding: 3px 0 9px; margin-bottom: 10px;
}
#app .game-shell[data-page="adventure"] .dispatch-packing-sheet { padding: 12px; margin: 0 0 10px; }
#app .game-shell[data-page="adventure"] .dispatch-packing-sheet > .paper-frame-skin { --paper-frame-scale: .065; }
#app .game-shell[data-page="adventure"] .packing-sheet-heading { display: grid; grid-template-columns: 53px minmax(0,1fr); gap: 8px; align-items: center; }
#app .game-shell[data-page="adventure"] .packing-sheet-heading > img { width: 53px; height: 66px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .packing-sheet-heading h3 { margin: 0; font-size: 17px; line-height: 24px; }
#app .game-shell[data-page="adventure"] .packing-sheet-heading p { margin: 2px 0; color: #856339; font-size: 12px; line-height: 18px; }
#app .game-shell[data-page="adventure"] .packing-sheet-heading span { font-size: 12px; line-height: 21px; }
#app .game-shell[data-page="adventure"] .packing-sheet-heading b { color: #527233; font-size: 17px; }
#app .game-shell[data-page="adventure"] .packing-sheet-note { margin: 7px 0 9px; color: #866a41; font-size: 11px; line-height: 18px; }
#app .game-shell[data-page="adventure"] .packing-material-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#app .game-shell[data-page="adventure"] .packing-material-table :is(th,td) { padding: 4px; border: 1px solid #c8ad78; text-align: center; }
#app .game-shell[data-page="adventure"] .packing-material-table thead th { color: #7f5b32; background: #dcc08a40; font-size: 11px; line-height: 19px; font-weight: 500; }
#app .game-shell[data-page="adventure"] .packing-material-table thead th:first-child { width: 40%; }
#app .game-shell[data-page="adventure"] .packing-material-table tbody th { text-align: left; font-size: 12px; line-height: 26px; font-weight: 500; }
#app .game-shell[data-page="adventure"] .packing-material-table tbody .resource-icon { width: 23px; height: 27px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
#app .game-shell[data-page="adventure"] .packing-material-table td { font-size: 17px; line-height: 27px; color: #80613b; }
#app .game-shell[data-page="adventure"] .packing-material-table .packing-amount { background: #d6deaa44; color: #4e7134; font-size: 20px; font-weight: 700; }
#app .game-shell[data-page="adventure"] .packing-sheet-remainder { display: grid; gap: 4px; margin-top: 9px; color: #55723b; font-size: 11px; line-height: 18px; }
#app .game-shell[data-page="adventure"] .packing-sheet-remainder > b { display: flex; gap: 5px; align-items: center; font-size: 13px; }
#app .game-shell[data-page="adventure"] .packing-sheet-remainder .ui-icon { width: 22px; height: 24px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .packing-sheet-remainder > span { padding-left: 27px; }
#app .game-shell[data-page="adventure"] .packing-sheet-remainder.has-remainder { color: #9b5738; }
#app .game-shell[data-page="adventure"] .packing-remainder-materials { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
#app .game-shell[data-page="adventure"] .packing-remainder-materials .resource-value { min-width: 0; gap: 3px; white-space: normal; font-size: 11px; }
#app .game-shell[data-page="adventure"] .packing-remainder-materials .resource-icon { width: 20px; height: 24px; object-fit: contain; flex: 0 0 20px; }
#app .game-shell[data-page="adventure"] .packing-remainder-materials b { font-size: 16px; }
#app .game-shell[data-page="adventure"] .packing-options { margin: 0 !important; padding: 9px !important; }
#app .game-shell[data-page="adventure"] .packing-options > .paper-frame-skin { --paper-frame-scale: .065; }
#app .game-shell[data-page="adventure"] .packing-options > summary {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 5px 22px; margin: 0; border: 0; list-style: none;
  color: #fff0c5; font-size: 14px; line-height: 20px; text-shadow: 0 1px #51331c;
}
#app .game-shell[data-page="adventure"] .packing-options > summary::marker { content: ''; }
#app .game-shell[data-page="adventure"] .packing-options > summary::-webkit-details-marker { display: none; }
#app .game-shell[data-page="adventure"] .packing-options > summary::after { content: '›'; margin-left: 6px; font-size: 20px; }
#app .game-shell[data-page="adventure"] .packing-options[open] > summary::after { content: '⌄'; }
#app .game-shell[data-page="adventure"] .packing-order-help { margin: 8px 2px; color: #85653e; font-size: 12px; line-height: 20px; }
#app .game-shell[data-page="adventure"] .packing-options .priority-row { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; overflow: visible; padding: 0; }
#app .game-shell[data-page="adventure"] .packing-options .priority-item { display: grid; grid-template-columns: 30px minmax(0,1fr); grid-template-rows: auto auto; gap: 1px 3px; align-items: center; min-width: 0; min-height: 74px; padding: 12px 7px 8px; text-align: left; color: #654526; }
#app .game-shell[data-page="adventure"] .priority-item > .paper-frame-skin { --paper-frame-scale: .045; }
#app .game-shell[data-page="adventure"] .packing-options .priority-item > .resource-icon { grid-column: 1; grid-row: 1 / 3; width: 28px; height: 36px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .priority-item > .packing-rank { position: absolute; top: 4px; left: 6px; color: #a17b40; font-size: 10px; line-height: 13px; }
#app .game-shell[data-page="adventure"] .priority-item > span:not(.paper-frame-skin) { font-size: 13px; line-height: 20px; }
#app .game-shell[data-page="adventure"] .packing-options .priority-item > small { color: #927044; font-size: 10px; line-height: 16px; }
#app .game-shell[data-page="adventure"] .packing-options .priority-item.is-first { outline: 2px solid #7a9148; outline-offset: -3px; }
#app .game-shell[data-page="adventure"] .packing-options .priority-item.is-first > small { color: #527239; }
@container (max-width: 350px) {
  #app .game-shell[data-page="adventure"] .dispatch-manifest[open] { padding: 10px !important; }
  #app .game-shell[data-page="adventure"] .dispatch-packing-sheet { padding: 10px; }
  #app .game-shell[data-page="adventure"] .packing-sheet-heading { grid-template-columns: 43px minmax(0,1fr); gap: 6px; }
  #app .game-shell[data-page="adventure"] .packing-sheet-heading > img { width: 43px; height: 59px; }
  #app .game-shell[data-page="adventure"] .packing-sheet-heading h3 { font-size: 16px; }
  #app .game-shell[data-page="adventure"] .packing-material-table :is(th,td) { padding: 3px; }
  #app .game-shell[data-page="adventure"] .packing-material-table tbody .resource-icon { width: 20px; height: 25px; margin-right: 3px; }
  #app .game-shell[data-page="adventure"] .packing-options .priority-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Seasonal gifts use the same framed paper as material growth. Conditions and
   the two consequences remain separate panels at every phone width. */
:is(#app,#modal-root) :is(.season-requirements,.season-rebuild-paper,.season-keepsake-paper),
#modal-root .season-gift-paper {
  position: relative; isolation: isolate; border: 0 !important; border-image: none !important;
  border-radius: 0; background: none; padding: 13px;
}
:is(#app,#modal-root) :is(.season-requirements,.season-rebuild-paper,.season-keepsake-paper) > .paper-frame-skin,
#modal-root .season-gift-paper > .paper-frame-skin { --paper-frame-scale: .065; }
#app .game-shell[data-page="season"] .season-overview-details > .season-requirements { margin-top: 0; padding: 12px; }
:is(#app,#modal-root) .season-requirements > h3 {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between;
  gap: 4px 8px; min-height: 48px; margin: 0 0 8px; padding: 5px 20px;
  color: #fff0c6; text-shadow: 0 1px #4b2e16; font-size: 15px; line-height: 22px;
}
:is(#app,#modal-root) .season-requirements > h3 > small { color: #eddaa8; font-size: 12px; line-height: 20px; }
:is(#app,#modal-root) .season-requirements ul { gap: 0; }
:is(#app,#modal-root) .season-requirements li { grid-template-columns: 26px minmax(0,1fr); gap: 7px; padding: 10px 3px; background: none; border-bottom: 1px solid #d2ba89; }
:is(#app,#modal-root) .season-requirements li:last-child { border-bottom: 0; padding-bottom: 4px; }
:is(#app,#modal-root) .season-requirements li b { font-size: 14px; line-height: 22px; }
:is(#app,#modal-root) .season-requirements li small { font-size: 12px; line-height: 19px; }
:is(#app,#modal-root) .season-condition-mark { display: grid; place-items: center; width: 26px; height: 28px; border: 1px solid #c6aa72; color: #a2844c; font-size: 22px; line-height: 26px; background: #d7bf8a25; }
:is(#app,#modal-root) .season-requirements .is-complete .season-condition-mark { background: #d7deac77; border-color: #98a369; }
:is(#app,#modal-root) .season-transition-summary { gap: 10px; margin-top: 0; padding-top: 0; border: 0; }
#app .game-shell[data-page="season"] .season-overview-details > .season-transition-summary { padding: 0 0 5px; }
:is(#app,#modal-root) .season-transition-summary section h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 16px; line-height: 25px; }
:is(#app,#modal-root) .season-transition-summary section h3 > .ui-icon { width: 29px; height: 31px; object-fit: contain; }
:is(#app,#modal-root) .season-transition-summary section p { margin: 0; font-size: 13px; line-height: 22px; }
#modal-root .season-gift-paper { padding: 13px; }
#modal-root .season-gift-paper .season-talent-preview { grid-template-columns: 62px minmax(0,1fr); gap: 10px; padding: 0 0 9px; border: 0; background: none; }
#modal-root .season-gift-paper .season-talent-preview .talent-art { width: 62px; height: 72px; }
#modal-root .season-gift-paper .season-talent-preview h3 { font-size: 21px; line-height: 28px; }
#modal-root .season-gift-paper .season-talent-preview p { font-size: 13px; line-height: 23px; }
#modal-root .season-gift-paper .season-talent-preview p b { font-size: 18px; }
#modal-root .season-gift-paper .season-talent-preview small { font-size: 12px; line-height: 20px; }
#modal-root .season-gift-paper .season-effect-change { padding: 9px 0 0; border: 0; border-top: 1px solid #c7ad77; background: none; }
#modal-root .season-gift-paper .season-effect-change > small { font-size: 12px; line-height: 20px; }
#modal-root .season-gift-paper .season-effect-change > p { gap: 10px; margin: 3px 0; font-size: 24px; line-height: 31px; }
#modal-root .season-confirm-sheet .season-transition-summary section h3 { font-size: 16px; }
@container (max-width: 350px) {
  :is(#app,#modal-root) :is(.season-requirements,.season-rebuild-paper,.season-keepsake-paper),
  #modal-root .season-gift-paper { padding: 11px; }
  :is(#app,#modal-root) .season-requirements > h3 { padding-inline: 16px; gap: 3px 7px; font-size: 14px; }
  :is(#app,#modal-root) .season-requirements > h3 > small { font-size: 11px; }
  :is(#app,#modal-root) .season-requirements li b { font-size: 13px; }
  :is(#app,#modal-root) .season-requirements li small { font-size: 11px; }
  #modal-root .season-gift-paper .season-talent-preview { grid-template-columns: 48px minmax(0,1fr); gap: 8px; }
  #modal-root .season-gift-paper .season-talent-preview .talent-art { width: 48px; height: 64px; }
}

/* Introduce a companion before the recruitment receipt. Keep the painted
   receipt proportional and give the route condition its own paper and action. */
#modal-root .recruit-sheet { gap: 10px; min-width: 0; }
#modal-root .recruit-sheet :is(.recruit-intro,.recruit-route) {
  position: relative; isolation: isolate; min-width: 0; padding: 12px;
  border: 0; background: none;
}
#modal-root .recruit-sheet :is(.recruit-intro,.recruit-route) > .paper-frame-skin { --paper-frame-scale: .065; }
#modal-root .recruit-sheet .recruit-intro { grid-template-columns: 104px minmax(0,1fr); gap: 11px; }
#modal-root .recruit-intro > div { min-width: 0; }
#modal-root .recruit-sheet .recruit-intro p { font-size: 13px; line-height: 23px; }
#modal-root .recruit-sheet .recruit-intro strong { font-size: 20px; }
#modal-root .recruit-registration > div { top: 18%; height: 65%; }
#modal-root .recruit-sheet .recruit-registration h3 { font-size: 16px; line-height: 24px; }
#modal-root .recruit-sheet .recruit-registration :is(.deficit,.sufficient) { padding: 0; border: 0; background: none; font-size: 12px; line-height: 21px; }
#modal-root .recruit-sheet .recruit-route { gap: 5px 9px; }
#modal-root .recruit-route > div { min-width: 0; }
#modal-root .recruit-sheet .recruit-route h3 { font-size: 13px; line-height: 21px; }
#modal-root .recruit-sheet .recruit-route b { font-size: 15px; line-height: 24px; }
#modal-root .recruit-sheet .recruit-route p { font-size: 12px; line-height: 21px; }
#modal-root .recruit-route > .button { grid-column: 1 / -1; min-height: 48px; margin-top: 4px; font-size: 14px; }
#modal-root .recruit-sheet > .recruit-once-note { padding: 2px 4px; border: 0; background: none; font-size: 12px; line-height: 21px; }
@container (max-width: 350px) {
  #modal-root .recruit-sheet :is(.recruit-intro,.recruit-route) { padding: 11px; }
  #modal-root .recruit-sheet .recruit-intro { grid-template-columns: 78px minmax(0,1fr); gap: 9px; }
  #modal-root .recruit-sheet .recruit-portrait { height: 105px; }
  #modal-root .recruit-sheet .recruit-intro h3 { font-size: 20px; line-height: 27px; }
  #modal-root .recruit-sheet .recruit-intro p { font-size: 12px; line-height: 22px; }
  #modal-root .recruit-sheet .recruit-intro strong { font-size: 18px; }
  #modal-root .recruit-sheet .recruit-registration h3 { margin-bottom: 4px; font-size: 14px; line-height: 22px; }
  #modal-root .recruit-sheet .recruit-registration .resource-list { gap: 3px 7px; }
  #modal-root .recruit-sheet .recruit-registration .resource-value { gap: 3px; font-size: 11px; }
  #modal-root .recruit-sheet .recruit-registration .resource-value b { font-size: 16px; }
  #modal-root .recruit-sheet .recruit-registration .resource-icon { width: 19px; height: 22px; }
  #modal-root .recruit-sheet .recruit-registration :is(.deficit,.sufficient) { margin-top: 4px; font-size: 11px; line-height: 19px; }
  #modal-root .recruit-sheet .recruit-route { grid-template-columns: 36px minmax(0,1fr); gap: 5px 7px; }
  #modal-root .recruit-sheet .recruit-route-art { width: 36px; height: 45px; }
  #modal-root .recruit-route > .button { font-size: 13px; }
}

/* Store materials in the same illustrated paper frames as the growth ledgers.
   Give each value its own full row so live inventory numbers never crowd icons. */
#modal-root .inventory-sheet { gap: 10px; }
#modal-root .inventory-sheet :is(.inventory-identity,.inventory-slot,.inventory-seeds) {
  position: relative; isolation: isolate; min-width: 0; padding: 12px;
  border: 0; background: none; box-shadow: none;
}
#modal-root .inventory-identity > .paper-frame-skin { --paper-frame-scale: .075; }
#modal-root .inventory-identity { grid-template-columns: 82px minmax(0,1fr); gap: 9px; }
#modal-root .inventory-identity .inventory-chest { width: 82px; height: 86px; }
#modal-root .inventory-identity h3 { font-size: 22px; line-height: 32px; }
#modal-root .inventory-identity :is(p,small) { font-size: 12px; line-height: 20px; }
#modal-root .inventory-slots { gap: 9px; align-items: stretch; }
#modal-root .inventory-slot { grid-template-columns: 31px minmax(0,1fr); gap: 4px 6px; align-content: start; }
#modal-root .inventory-slot > .paper-frame-skin { --paper-frame-scale: .045; }
#modal-root .inventory-slot .resource-icon { grid-row: 1; width: 31px; height: 33px; }
#modal-root .inventory-slot dt { font-size: 13px; line-height: 22px; }
#modal-root .inventory-slot dd { grid-column: 1 / -1; font-size: 26px; line-height: 32px; white-space: normal; overflow-wrap: anywhere; }
#modal-root .inventory-slot[data-value-length="medium"] dd { font-size: 22px; }
#modal-root .inventory-slot[data-value-length="long"] dd { font-size: 17px; }
#modal-root .inventory-slot > small { margin-top: 2px; padding-top: 5px; font-size: 11px; line-height: 19px; color: #80613a; }
#modal-root .inventory-seeds { gap: 10px; }
#modal-root .inventory-seeds > .paper-frame-skin { --paper-frame-scale: .06; }
#modal-root .inventory-seeds > img { width: 43px; height: 53px; flex-basis: 43px; }
#modal-root .inventory-seeds h3 { flex-wrap: wrap; gap: 2px 10px; font-size: 16px; line-height: 27px; }
#modal-root .inventory-seeds h3 b { font-size: 24px; white-space: normal; overflow-wrap: anywhere; }
#modal-root .inventory-seeds h3 small { font-size: 12px; }
#modal-root .inventory-seeds p { font-size: 12px; line-height: 21px; }
#modal-root .inventory-note { font-size: 12px; line-height: 21px; padding: 2px 3px; }
@container (max-width: 350px) {
  #modal-root .inventory-sheet :is(.inventory-identity,.inventory-slot,.inventory-seeds) { padding: 10px; }
  #modal-root .inventory-identity { grid-template-columns: 60px minmax(0,1fr); gap: 7px; }
  #modal-root .inventory-identity .inventory-chest { width: 60px; height: 76px; }
  #modal-root .inventory-identity h3 { font-size: 19px; line-height: 29px; }
  #modal-root .inventory-identity :is(p,small) { font-size: 11px; line-height: 19px; }
  #modal-root .inventory-slots { gap: 7px; }
  #modal-root .inventory-slot { grid-template-columns: 26px minmax(0,1fr); column-gap: 5px; }
  #modal-root .inventory-slot .resource-icon { width: 26px; height: 29px; }
  #modal-root .inventory-slot dd { font-size: 23px; line-height: 30px; }
  #modal-root .inventory-slot[data-value-length="medium"] dd { font-size: 18px; }
  #modal-root .inventory-slot[data-value-length="long"] dd { font-size: 16px; }
  #modal-root .inventory-slot > small { font-size: 11px; line-height: 18px; }
  #modal-root .inventory-seeds h3 { font-size: 15px; }
  #modal-root .inventory-seeds p { font-size: 11px; line-height: 19px; }
}

/* Keep a future recipe below the current action. Expanding its attributes
   must not stretch the payment and upgrade-button rows beside it. */
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > :is(.mother-payment,.button) { grid-column: 1 / -1; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > .mother-animal-next {
  position: relative; isolation: isolate; display: grid;
  grid-column: 1 / -1; grid-row: 7; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px 13px; width: 100%; min-width: 0; margin: 3px 0 0;
  padding: 12px; border: 0; background: none;
}
#app .game-shell[data-page="growth"] .mother-animal-next > .paper-frame-skin { --paper-frame-scale: .06; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next > .growth-next-heading {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  grid-column: 1 / -1; min-height: 44px; margin: 0; padding: 5px 20px;
  color: #fff0c6; text-shadow: 0 1px #4a2f19; font-size: 14px; line-height: 22px;
}
#app .game-shell[data-page="growth"] .mother-animal-next > :is(.growth-next-cost,.growth-next-balance) { min-width: 0; }
#app .game-shell[data-page="growth"] .mother-animal-next h4 { margin: 0 0 5px; color: #846139; font-size: 12px; line-height: 20px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next .resource-list { display: flex; flex-direction: column; gap: 5px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next .resource-value { gap: 5px; font-size: 12px; line-height: 23px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next .resource-value b { font-size: 17px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next .resource-icon { width: 22px; height: 26px; max-height: none; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next :is(.deficit,.sufficient,.muted) { margin: 0; font-size: 12px; line-height: 22px; }
#app .game-shell[data-page="growth"] .mother-animal-next > details { grid-column: 1 / -1; min-width: 0; border-top: 1px solid #cbb07b; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next summary { min-height: 44px; display: flex; align-items: center; font-size: 13px; line-height: 22px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 2px 0 4px; }
#app .game-shell[data-page="growth"] .mother-animal-next .upgrade-stat-card { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 4px 6px; align-content: start; min-width: 0; }
#app .game-shell[data-page="growth"] .mother-animal-next .upgrade-stat-card > .ui-icon { width: 25px; height: 29px; object-fit: contain; grid-row: 1 / 3; }
#app .game-shell[data-page="growth"] .mother-animal-next .upgrade-stat-card > span { color: #77542c; font-size: 12px; line-height: 22px; }
#app .game-shell[data-page="growth"] .mother-animal-next .upgrade-stat-card > b { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; color: #59763b; font-size: 20px; line-height: 27px; }
#app .game-shell[data-page="growth"] .mother-animal-next .upgrade-stat-card > b i { color: #a58d56; font-size: 15px; font-style: normal; }
#app .game-shell[data-page="growth"] .mother-animal-next .upgrade-stat-card > small { display: flex; flex-wrap: wrap; justify-content: space-between; grid-column: 1 / -1; gap: 2px 5px; color: #8b7148; font-size: 11px; line-height: 20px; }
#app .game-shell[data-page="growth"] .mother-animal-next .upgrade-stat-card em { color: #557338; font-size: 13px; font-style: normal; }

/* Keep the tap mother's workshop illustration beside both live ledgers.
   Put the shared rules below them, so the artwork can use the whole column. */
#app .game-shell[data-page="tap"] .mother-tap-info {
  grid-template-columns: 112px minmax(0,1fr); gap: 5px 8px;
  align-items: start;
}
#app .game-shell[data-page="tap"] .mother-tap-workshop {
  grid-column: 1; grid-row: 1 / 3; align-self: stretch;
  justify-content: center; gap: 3px;
}
#app .game-shell[data-page="tap"] .mother-tap-workshop > img {
  width: 112px; height: 104px; max-width: 100%; object-fit: contain;
}
#app .game-shell[data-page="tap"] .mother-tap-level {
  display: flex; align-items: center; justify-content: center;
  min-height: 24px; padding: 2px 5px; font-size: 12px; line-height: 18px;
}
#app .game-shell[data-page="tap"] :is(.mother-tap-metrics,.mother-combo) {
  position: relative; isolation: isolate; min-width: 0; padding: 7px 8px;
  border: 0; border-radius: 0; background: none;
}
#app .game-shell[data-page="tap"] :is(.mother-tap-metrics,.mother-combo) > .paper-frame-skin { --paper-frame-scale: .04; display: grid; grid-area: auto; gap: 0; }
#app .game-shell[data-page="tap"] .mother-tap-metrics { grid-column: 2; grid-row: 1; gap: 5px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics > div {
  display: grid; grid-template-columns: auto minmax(0,1fr); align-items: baseline; gap: 2px 4px;
}
#app .game-shell[data-page="tap"] .mother-tap-metrics > div + div { padding-left: 2px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics span { grid-column: 1 / -1; font-size: 11px; line-height: 18px; }
#app .game-shell[data-page="tap"] .mother-tap-metrics b { font-size: 21px; line-height: 26px; white-space: nowrap; }
#app .game-shell[data-page="tap"] .mother-tap-metrics small { min-width: max-content; font-size: 10px; line-height: 15px; white-space: nowrap; }
#app .game-shell[data-page="tap"] .mother-combo { grid-column: 2; grid-row: 2; }
#app .game-shell[data-page="tap"] .mother-combo-segments,
#app .game-shell[data-page="tap"] .mother-combo-segments > i { height: 16px; min-height: 16px; }
#app .game-shell[data-page="tap"] .mother-combo p { font-size: 12px; line-height: 18px; }
#app .game-shell[data-page="tap"] .mother-tap-info > .mother-tap-note {
  grid-column: 1 / -1; grid-row: 3; padding: 5px 0 0;
  border: 0; border-top: 1px solid #bfa16c;
}
#app .game-shell[data-page="tap"] .mother-tap-note p { font-size: 12px; line-height: 19px; }
#app .game-shell[data-page="tap"] .is-burst :is(.mother-tap-metrics,.mother-combo) { background: none; }
#app .game-shell[data-page="tap"] .is-burst :is(.mother-tap-metrics,.mother-combo) > .paper-frame-skin { filter: sepia(.35) saturate(1.3); }

/* One action serves the current recipe. Its full-width placement matches
   the mother and leaves both forecast columns aligned above it. */
#app .game-shell[data-page="tap"] .tap-recipe-ledger {
  grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px;
}
#app .game-shell[data-page="tap"] .tap-recipe-ledger > article {
  display: flex; flex-direction: column; min-width: 0;
}
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-columns {
  grid-template-columns: minmax(0,1fr); gap: 5px;
}
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-current-upgrade > .mother-payment,
#app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-next-shortfall { margin-top: auto; padding-top: 6px; }
#app .game-shell[data-page="tap"] .tap-recipe-ledger > .tap-workshop-upgrade-action.illustrated-button[data-button-skin="animal"] {
  --upgrade-skin-height: 68px; --upgrade-left: calc(68px * 780 / 793); --upgrade-right: calc(68px * 320 / 793);
  grid-column: 1 / -1; height: 54px; min-height: 54px; margin: 0; font-size: 17px;
  padding: 5px var(--upgrade-right) 5px var(--upgrade-left) !important;
}

/* Keep the two expedition ledgers together. Later cultivation costs belong
   below both current decisions, rather than extending only the right card. */
#app .game-shell[data-page="adventure"] .mother-decision-grid { align-items: stretch; }
#app .game-shell[data-page="adventure"] .mother-decision-grid:has(> .mother-reward-panel > h3) { grid-template-columns: minmax(0,1fr); }
#app .game-shell[data-page="adventure"] .mother-decision-grid > .mother-reward-panel {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
#app .game-shell[data-page="adventure"] .mother-decision-grid > .mother-growth-panel {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
#app .game-shell[data-page="adventure"] .mother-decision-grid > article > :is(.packing-shortcut,.mother-growth-train) { margin-top: auto; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup {
  position: relative; isolation: isolate; grid-column: 1 / -1;
  min-width: 0; padding: 12px; margin: 0;
}
#app .game-shell[data-page="adventure"] .dispatch-growth-followup > .paper-frame-skin { --paper-frame-scale: .065; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup > h3 {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 8px; font-size: 14px; line-height: 23px;
}
#app .game-shell[data-page="adventure"] .dispatch-growth-followup > h3 .ui-icon { width: 24px; height: 27px; object-fit: contain; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup-columns > section { min-width: 0; padding: 0; border: 0; background: none; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup-columns > section:only-child { grid-column: 1 / -1; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup-columns > section + section { border-left: 1px solid #c7ac77; padding-left: 12px; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup h4 { margin: 0 0 6px; color: #866039; font-size: 12px; line-height: 20px; font-weight: 500; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup :is(.dispatch-growth-balance-values,.dispatch-growth-next-values) { flex-direction: column; align-items: start; gap: 4px; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup .resource-value { font-size: 12px; line-height: 22px; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup .resource-value b { font-size: 15px; }
@container (min-width: 382px) {
  #app .game-shell[data-page="adventure"] .supply-dispatch .mother-decision-grid .mother-reward-intro { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; }
  #app .game-shell[data-page="adventure"] .supply-dispatch .mother-decision-grid .mother-reward-intro > div { grid-row: 1; }
  #app .game-shell[data-page="adventure"] .supply-dispatch .mother-decision-grid .mother-reward-intro > img { grid-row: 2; width: 100%; height: 84px; object-fit: contain; }
}
/* Show the live harvest before the painted route. The scene stays in the
   ledger, while the complete roster and reserved departure area stay intact. */
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) .mother-reward-intro { display: block; min-height: 0; }
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; }
#app .game-shell[data-page="adventure"] .mother-reward-intro h3 small { color: #806037; font-size: 11px; line-height: 16px; font-weight: 500; }
#app .game-shell[data-page="adventure"] .mother-reward-scene { display: block; flex: 0 0 84px; width: 100%; height: 84px; min-height: 84px; object-fit: contain; margin: auto 0 0; }
@container (max-width: 350px) {
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > .mother-animal-next { gap: 8px; padding: 11px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next > .growth-next-heading { padding-inline: 15px; font-size: 13px; }
  #app .game-shell[data-page="growth"] .mother-animal-next .upgrade-stat-card { grid-template-columns: 21px minmax(0,1fr); gap: 3px 4px; }
  #app .game-shell[data-page="growth"] .mother-animal-next .upgrade-stat-card > .ui-icon { width: 21px; height: 26px; }
  #app .game-shell[data-page="growth"] .mother-animal-next .upgrade-stat-card > b { gap: 3px; font-size: 18px; }
}
@container (max-width: 381px) {
  #app .game-shell[data-page="tap"] .mother-tap-info { grid-template-columns: 96px minmax(0,1fr); gap: 5px 7px; }
  #app .game-shell[data-page="tap"] .mother-tap-workshop > img { width: 96px; height: 88px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics { grid-template-columns: minmax(0,1fr); gap: 5px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics > div { grid-template-columns: minmax(0,1fr) auto; gap: 0 3px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics > div + div { border-left: 0; border-top: 1px solid #ccb180; padding: 4px 0 0; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics span { grid-column: 1 / -1; font-size: 11px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics b { font-size: 19px; line-height: 24px; }
  #app .game-shell[data-page="tap"] .mother-tap-metrics small { font-size: 10px; }
  #app .game-shell[data-page="tap"] .mother-combo { grid-column: 1 / -1; grid-row: 2; }
  #app .game-shell[data-page="tap"] .mother-tap-workshop { grid-row: 1; }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger { grid-template-columns: minmax(0,1fr); }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app .game-shell[data-page="tap"] .tap-recipe-ledger .mother-next-upgrade { border-left: 0; border-top: 1px solid #c5a264; padding: 8px 0 0; }
}

/* One harvest ledger follows the offline mother from sources to the bag.
   Only its center spans resize; the nine source windows preserve corners. */
#modal-root .mother-offline-ledger {
  position: relative; isolation: isolate; margin: 0 5px; padding: 14px 13px 16px;
  min-width: 0; display: grid; gap: 10px; color: #614323;
}
#modal-root .mother-offline-ledger > .paper-frame-skin { --paper-frame-scale: .11; }
#modal-root .mother-offline-ledger > :not(.paper-frame-skin) { grid-area: auto; }
#modal-root .mother-offline-ledger :is(.mother-offline-sources,.mother-offline-transfer,.mother-offline-inventory) {
  border: 0 !important; border-image: none !important; background: none !important;
  box-shadow: none; margin: 0; padding: 0 !important; min-width: 0;
}
#modal-root .mother-offline-ledger .mother-offline-sources { gap: 9px; }
#modal-root .mother-offline-ledger .mother-offline-sources h3 { font-size: 13px; line-height: 19px; }
#modal-root .mother-offline-ledger .mother-offline-auto > .mother-board-art { height: 104px; }
#modal-root .mother-offline-ledger .mother-offline-auto strong { font-size: 29px; line-height: 35px; }
#modal-root .mother-offline-ledger .mother-offline-expeditions b { font-size: 12px; line-height: 19px; }
#modal-root .mother-offline-ledger .mother-offline-sources .resource-icon { width: 22px; height: 27px; }
#modal-root .mother-offline-ledger .mother-offline-sources .resource-value b { font-size: 18px; }
#modal-root .mother-offline-ledger .mother-offline-transfer {
  grid-template-columns: 62px minmax(0,1fr) 26px 44px; gap: 5px;
  padding-block: 9px !important; border-block: 1px solid #c7a770 !important;
}
#modal-root .mother-offline-ledger .mother-offline-transfer > img { height: 74px; }
#modal-root .mother-offline-ledger .mother-offline-transfer > .offline-transfer-chest { height: 52px; }
#modal-root .mother-offline-ledger .mother-offline-transfer h3 { font-size: 13px; }
#modal-root .mother-offline-ledger .mother-offline-transfer .resource-value { font-size: 11px; }
#modal-root .mother-offline-ledger .mother-offline-transfer .resource-value b { font-size: 18px; }
#modal-root .mother-offline-ledger .mother-offline-inventory h3 { display: flex; align-items: center; justify-content: center; font-size: 13px; }
#modal-root .mother-offline-ledger .mother-offline-inventory .resource-value b { font-size: 17px; line-height: 23px; }
#modal-root .mother-offline-ledger .mother-offline-inventory .resource-icon { width: 28px; height: 30px; flex-basis: 30px; max-height: 30px; }

/* Full-width recipes give the illustration and both upgrade steps room on
   9:16 phones instead of reducing the title, materials and effects to fit. */
#modal-root .mother-offline-upgrade {
  position: relative; isolation: isolate; display: block;
  border: 0 !important; border-image: none !important; background: none !important;
  padding: 15px 14px 17px !important; min-width: 0;
}
#modal-root .mother-offline-upgrade > .paper-frame-skin { --paper-frame-scale: .11; }
#modal-root .mother-offline-upgrade .mother-upgrade-split {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0;
  padding: 0; border: 0; background: none; box-shadow: none;
}
#modal-root .mother-offline-upgrade .mother-current-upgrade { position: relative; padding: 0; border: 0; min-width: 0; }
#modal-root .mother-offline-upgrade .mother-current-upgrade > .mother-board-art { position: absolute; left: 0; top: 0; width: 96px; height: 104px; }
#modal-root .mother-offline-upgrade .mother-current-upgrade > .mother-board-art img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
#modal-root .mother-offline-upgrade .mother-offline-upgrade-caption { padding: 7px 0 0 108px; min-height: 29px; margin: 0; font-size: 12px; line-height: 20px; color: #8a6539; }
#modal-root .mother-offline-upgrade .mother-current-upgrade > h2 { padding: 3px 0 12px 108px; margin: 0 0 9px; min-height: 75px; font-size: 21px; line-height: 29px; }
#modal-root .mother-offline-upgrade .mother-current-upgrade > h2 span { display: block; font-size: 20px; line-height: 27px; white-space: nowrap; }
#modal-root .mother-offline-upgrade .mother-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
#modal-root .mother-offline-upgrade h3 { margin: 0 0 6px; font-size: 13px; line-height: 20px; }
#modal-root .mother-offline-upgrade .mother-upgrade-cost > .resource-list { display: flex; flex-direction: column; align-items: start; gap: 5px; }
#modal-root .mother-offline-upgrade .resource-value { font-size: 12px; line-height: 21px; gap: 4px; }
#modal-root .mother-offline-upgrade .resource-value b { font-size: 18px; }
#modal-root .mother-offline-upgrade .resource-icon { width: 23px; height: 28px; flex-shrink: 0; }
#modal-root .mother-offline-upgrade .mother-upgrade-cost > .sufficient { position: static; margin: 5px 0 0; }
#modal-root .mother-offline-upgrade .mother-upgrade-stats,
#modal-root .mother-offline-upgrade .mother-current-upgrade .mother-upgrade-stats { display: block; border-top: 0; border-left: 1px solid #c9ab72; padding: 0 0 0 10px; }
#modal-root .mother-offline-upgrade .stat-row { display: flex; flex-direction: column; align-items: start; gap: 0; font-size: 12px; line-height: 19px; margin: 0 0 8px; }
#modal-root .mother-offline-upgrade .stat-row > span { flex-basis: auto; }
#modal-root .mother-offline-upgrade .stat-row b { font-size: 23px; line-height: 29px; white-space: nowrap; }
#modal-root .mother-offline-upgrade .stat-row small { font-size: 11px; line-height: 18px; }
#modal-root .mother-offline-upgrade .mother-payment { margin: 8px 0 0; padding: 8px 0 0; font-size: 12px; line-height: 20px; }
#modal-root .mother-offline-upgrade .mother-payment > .resource-list { gap: 5px 12px; }
#modal-root .mother-offline-upgrade .mother-next-upgrade { border: 0; padding: 0; min-width: 0; }
#modal-root .mother-offline-upgrade :is(.mother-next-upgrade,.mother-upgrade-inventory) > summary {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 7px 12px; color: #ffedc6; text-shadow: 0 1px #483017;
  font-size: 13px; line-height: 20px; list-style: none; cursor: pointer;
}
#modal-root .mother-offline-upgrade summary::-webkit-details-marker { display: none; }
#modal-root .mother-offline-upgrade summary::before { content: '▸'; }
#modal-root .mother-offline-upgrade details[open] > summary::before { content: '▾'; }
#modal-root .mother-offline-upgrade summary > span:not(.illustrated-button-skin) { position: relative; }
#modal-root .mother-offline-upgrade .offline-next-recipe { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 20px auto auto; align-items: start; gap: 4px 11px; padding: 10px 0 0; }
#modal-root .mother-offline-upgrade .offline-next-recipe > h3 { grid-column: 1; grid-row: 1; }
#modal-root .mother-offline-upgrade .offline-next-recipe > .resource-list { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: start; gap: 5px; }
#modal-root .mother-offline-upgrade .offline-next-recipe > .mother-upgrade-stats { grid-column: 2; grid-row: 1 / span 2; }
#modal-root .mother-offline-upgrade .offline-next-recipe > .mother-next-shortfall { grid-column: 1 / -1; margin: 4px 0 0; padding: 7px 0 0; font-size: 12px; line-height: 20px; }
#modal-root .mother-offline-upgrade .mother-next-shortfall .deficit-label { display: none; }
#modal-root .mother-offline-upgrade .mother-upgrade-inventory { position: relative; isolation: isolate; margin: 10px 0 0; padding: 0 !important; border: 0 !important; border-image: none !important; background: none; }
#modal-root .mother-offline-upgrade .mother-upgrade-inventory > .paper-frame-skin { --paper-frame-scale: .075; }
#modal-root .mother-offline-upgrade .mother-upgrade-inventory:not([open]) > .paper-frame-skin { display: none; }
#modal-root .mother-offline-upgrade .mother-upgrade-inventory[open] { padding: 0 9px 12px !important; }
#modal-root .mother-offline-upgrade .mother-upgrade-inventory[open] > summary { margin-inline: -9px; }
#modal-root .mother-offline-upgrade .mother-upgrade-inventory h3 { margin: 10px 0 5px; }
#modal-root .mother-offline-upgrade .offline-mastered-badge { margin: 0 0 12px 108px; }
#modal-root .mother-offline-upgrade .offline-mastered-stats { clear: both; }
@container (max-width: 350px) {
  #modal-root .mother-offline-ledger { padding: 12px 11px 14px; }
  #modal-root .mother-offline-ledger .mother-offline-auto { grid-template-columns: 86px minmax(0,1fr); }
  #modal-root .mother-offline-ledger .mother-offline-auto strong { grid-column: 2; justify-content: start; }
  #modal-root .mother-offline-ledger .mother-offline-transfer { grid-template-columns: 48px minmax(0,1fr) 20px 34px; gap: 4px; }
  #modal-root .mother-offline-ledger .mother-offline-transfer > img { height: 65px; }
  #modal-root .mother-offline-ledger .mother-offline-transfer .resource-list { flex-direction: row; flex-wrap: wrap; }
  #modal-root .mother-offline-ledger .mother-offline-inventory .resource-value b { font-size: 17px; }
  #modal-root .mother-offline-upgrade { padding: 13px 12px 15px !important; }
  #modal-root .mother-offline-upgrade .mother-current-upgrade > .mother-board-art { width: 82px; height: 96px; }
  #modal-root .mother-offline-upgrade .mother-offline-upgrade-caption { padding-left: 92px; }
  #modal-root .mother-offline-upgrade .mother-current-upgrade > h2 { padding-left: 92px; min-height: 67px; font-size: 19px; }
  #modal-root .mother-offline-upgrade .mother-current-upgrade > h2 span { font-size: 18px; }
  #modal-root .mother-offline-upgrade .mother-columns,
  #modal-root .mother-offline-upgrade .offline-next-recipe { gap: 4px 7px; }
  #modal-root .mother-offline-upgrade .mother-upgrade-stats { padding-left: 7px; }
  #modal-root .mother-offline-upgrade .resource-value { font-size: 11px; gap: 2px; }
  #modal-root .mother-offline-upgrade .resource-value b { font-size: 17px; }
  #modal-root .mother-offline-upgrade .resource-icon { width: 20px; height: 25px; }
  #modal-root .mother-offline-upgrade .stat-row b { font-size: 21px; }
  #modal-root .mother-offline-upgrade .offline-mastered-badge { margin-left: 92px; }
}