@charset "UTF-8";
/* Keep the mother art at a useful size. Long recipes scroll inside the
   portrait viewport instead of compressing wood, illustrations and labels. */
#app .game-shell[data-page] .screen-scroll { scroll-padding-bottom: 16px; }
#app .game-shell[data-page] :is(.mother-camp,.mother-tap,.mother-growth,.mother-trip,.mother-adventure) { gap: 8px; padding-bottom: 16px; }
#app .game-shell[data-page] :is(.mother-camp,.mother-tap,.mother-growth,.mother-trip) .mother-panel,
#app .game-shell[data-page="adventure"] :is(.mother-party-panel,.mother-reward-panel,.mother-growth-panel) { margin-bottom: 2px; }

/* Nine-slice the complete button. The emblem stays in the uniformly scaled
   left edge; only the plain leaf face extends to fit the action label. */
:is(.mother-camp,.mother-tap,.mother-growth,.mother-trip,.mother-offline-modal) .button,
.game-shell[data-page="adventure"] :is(.mother-growth-train,.mother-departure,.mother-adjust-party).button,
.game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .text-button {
  border-image: var(--rich-button-art) 62 78 62 165 fill stretch !important;
  border-width: 14px 18px 14px 38px !important;
  padding: 0 4px !important;
  background: none !important;
  background-clip: border-box !important;
  box-shadow: none !important;
}
:is(.mother-camp,.mother-tap,.mother-growth,.mother-trip,.mother-offline-modal) .button::before,
.game-shell[data-page="adventure"] :is(.mother-growth-train,.mother-departure,.mother-adjust-party).button::before,
.game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .text-button::before { content: none !important; }
:is(.mother-camp,.mother-tap,.mother-growth,.mother-trip,.mother-offline-modal) .button.secondary,
.game-shell[data-page="adventure"] .mother-adjust-party.button {
  border-image-slice: 62 78 62 78 fill !important;
  border-width: 14px 18px !important;
  white-space: nowrap;
}

#app .game-shell[data-page="growth"] .mother-growth-scene { height: 156px; }
#app .game-shell[data-page="growth"] .mother-growth > .tab-strip { position: relative; z-index: 4; margin: -50px 8px 2px; width: calc(100% - 16px); }
#app .game-shell[data-page="growth"] .mother-growth-boards { gap: 9px; }
#app .game-shell[data-page="growth"] .mother-growth-board { grid-template-columns: 78px minmax(0,1fr); gap: 7px; align-items: center; min-height: 180px; }
#app .game-shell[data-page="growth"] .mother-growth-board .mother-board-art {
  position: relative; align-self: stretch; width: 100%; height: auto; min-height: 110px; max-height: none;
  border: 1px solid #b79953;
  background: linear-gradient(#c4dfb233,#294f3333), url(../assets/environments/scene-expedition-mother-v2.png) center 65% / auto 220px;
  overflow: hidden;
}
#app .game-shell[data-page="growth"] .mother-growth-board .mother-board-art > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; filter: drop-shadow(0 2px 1px #25422e); }
#app .game-shell[data-page="growth"] .mother-board-content > h2 { font-size: 15px; line-height: 1.25; margin-bottom: 3px; }
#app .game-shell[data-page="growth"] .mother-board-content h3,
#app .game-shell[data-page="growth"] .mother-board-content :is(.mother-upgrade-cost,.mother-upgrade-stats) > h3 { font-size: 10px; line-height: 1.35; margin-bottom: 4px; }
#app .game-shell[data-page="growth"] .mother-board-content :is(.resource-value,.stat-row,.deficit,.sufficient),
#app .game-shell[data-page="growth"] .mother-upgrade-cost .resource-value { font-size: 11px; line-height: 1.4; }
#app .game-shell[data-page="growth"] .mother-board-content .resource-value b,
#app .game-shell[data-page="growth"] .mother-upgrade-cost .resource-value b,
#app .game-shell[data-page="growth"] .mother-board-content .stat-row b { font-size: 15px; line-height: 1.3; }
#app .game-shell[data-page="growth"] .mother-board-content .resource-icon { width: 14px; height: 16px; }
#app .game-shell[data-page="growth"] .mother-board-content .stat-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 3px; margin: 3px 0; }
#app .game-shell[data-page="growth"] .mother-board-content .stat-row > span { flex-basis: 100%; }
#app .game-shell[data-page="growth"] .mother-board-content .stat-row small { font-size: 9px; line-height: 1.2; text-align: right; }
#app .game-shell[data-page="growth"] .mother-upgrade-cost > .sufficient { position: static; margin-top: 2px; font-size: 10px; }
#app .game-shell[data-page="growth"] .mother-board-content .mother-payment { font-size: 10px; line-height: 1.4; margin: 2px 0; padding-top: 3px; }
#app .game-shell[data-page="growth"] .mother-board-content .mother-payment .resource-list { flex-direction: row; flex-wrap: wrap; gap: 2px 6px; }
#app .game-shell[data-page="growth"] .mother-board-content .mother-payment .resource-value > span { font-size: 0; }
#app .game-shell[data-page="growth"] .mother-board-content .mother-payment .resource-value { font-size: 10px; }
#app .game-shell[data-page="growth"] .mother-board-content .mother-payment .resource-value b { font-size: 13px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-current .mother-board-content { grid-template-columns: minmax(0,1fr); gap: 3px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-current .mother-board-content > :is(.mother-payment,.button) { grid-column: 1; }
#app .game-shell[data-page="growth"] .mother-board-content > .button,
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .text-button { min-height: 48px; font-size: 13px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > h3 { grid-column: 1; grid-row: 2; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .resource-list { grid-column: 1; grid-row: 3; flex-direction: column; align-items: start; gap: 1px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .mother-upgrade-stats { grid-column: 2; grid-row: 2 / span 2; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .mother-next-shortfall { grid-column: 1 / -1; grid-row: 4; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .text-button { grid-column: 1 / -1; grid-row: 5; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content { display: flex; flex-direction: column; gap: 4px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next { width: 100%; margin-top: 5px; padding: 5px 0 0; border-left: 0; border-top: 1px solid #b79757; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next .resource-list { flex-direction: row; gap: 6px; }
#app .game-shell[data-page="growth"] .mother-animal-next details > summary { font-size: 10px; }

/* Make costs and rewards readable without flattening the paper ornaments. */
:is(.mother-camp,.mother-tap) .mother-upgrade-split h2 { font-size: 13px; }
:is(.mother-camp,.mother-tap) .mother-upgrade-split h3,
:is(.mother-camp,.mother-tap) .mother-upgrade-split .resource-value,
:is(.mother-camp,.mother-tap) .mother-upgrade-split .stat-row,
:is(.mother-camp,.mother-tap) .mother-upgrade-split .mother-payment,
:is(.mother-camp,.mother-tap) .mother-upgrade-split .mother-next-shortfall { font-size: 10px; line-height: 1.4; }
:is(.mother-camp,.mother-tap) .mother-upgrade-split :is(.resource-value b,.stat-row b) { font-size: 13px; }
:is(.mother-camp,.mother-tap) .mother-upgrade-split .stat-row small { font-size: 9px; }
:is(.mother-camp,.mother-tap) .mother-upgrade-split :is(.deficit,.sufficient) { font-size: 9px; }
:is(.mother-camp,.mother-tap) .mother-upgrade-cost > .sufficient { position: static; margin-top: 3px; }
.game-shell[data-page="camp"] .mother-camp-scene { height: 290px; }
.game-shell[data-page="camp"] .mother-camp-departure { grid-row: 2; width: 230px; min-height: 50px; }
.game-shell[data-page="camp"] .mother-camp-departure > .button { font-size: 19px; }
.game-shell[data-page="camp"] .mother-workshop-sign { top: 40%; width: 116px; border-image-slice: 160 130 160 130 fill; border-width: 14px 12px; padding: 2px 3px; }
.game-shell[data-page="camp"] .mother-workshop-sign b { font-size: 10px; }
.game-shell[data-page="camp"] .mother-workshop-sign > span { font-size: 9px; }
.game-shell[data-page="camp"] .camp-tap-hotspot { background: none; border: solid transparent; border-width: 7px; border-image: url(../assets/ui/button-secondary-wood-plank.png) 62 78 62 78 fill stretch; color: #fff1cf; }
.game-shell[data-page="tap"] .mother-acorn-target.tap-target { width: 119px; height: 130px; }
.game-shell[data-page="tap"] .mother-acorn-target.tap-target > .resource-icon { width: 119px; height: 119px; max-width: 119px; max-height: 119px; }
.game-shell[data-page="tap"] .mother-combo :is(p,b,span,small) { font-size: 10px; line-height: 1.4; }

.game-shell[data-page="adventure"] .mother-route-showcase { min-height: 174px; padding-top: 60px; padding-left: 42px; }
.game-shell[data-page="adventure"] .route-showcase-card { grid-template-rows: 56px 20px 18px; min-height: 127px; }
.game-shell[data-page="adventure"] .route-showcase-art { height: 56px; }
.game-shell[data-page="adventure"] .mother-departure-row { position: relative; bottom: auto; z-index: 2; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); margin: 0; padding: 3px 0 5px; min-height: 58px; background: none; box-shadow: none; }
.game-shell[data-page="adventure"] .mother-departure.button { width: 100%; font-size: 17px; }
.game-shell[data-page="adventure"] .mother-adjust-party.button { font-size: 12px; }
.game-shell[data-page="adventure"] .mother-departure-row { grid-row: 3; }
.game-shell[data-page="adventure"] .mother-departure-blockers { grid-row: 3; }
.game-shell[data-page="adventure"] .mother-departure-blockers + .mother-departure-row { grid-row: 4; }
.game-shell[data-page="adventure"] .route-showcase-card.is-selected { outline: 2px solid #f4c652; outline-offset: -3px; filter: drop-shadow(0 0 4px #ffd45d); }
.game-shell[data-page="adventure"] .route-showcase-lock::before { filter: drop-shadow(0 2px #20180f) sepia(1) saturate(3); }
.game-shell[data-page="adventure"] .mother-growth-train.button { min-height: 48px; }
.game-shell[data-page="adventure"] .mother-growth-balance,
.game-shell[data-page="adventure"] .mother-growth-next { font-size: 10px; line-height: 1.4; }
.game-shell[data-page="adventure"] .mother-decision-grid p { font-size: 11px; }
.game-shell[data-page="adventure"] .mother-growth-cost .resource-value { font-size: 10px; }
.game-shell[data-page="adventure"] .packing-shortcut { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 44px; margin-top: 5px; border: 1px solid #ac8c54; background: #f6e9c7; color: #4e582b; font-size: 10px; font-weight: 800; }
.game-shell[data-page="adventure"] .packing-shortcut .resource-icon { width: 17px; height: 19px; }
#toast-root .toast { padding: 7px 10px; font-size: 11px; }

@media (min-width: 410px) {
  #app .game-shell[data-page="growth"] .mother-growth-scene { height: 180px; }
  #app .game-shell[data-page="growth"] .mother-growth-board { grid-template-columns: 96px minmax(0,1fr); }
}

/* Keep the narrow adventure suggestion readable without squeezing its label. */
@media (max-width: 360px) {
  #app .game-shell[data-page="adventure"] .mother-growth-stats p { white-space: normal; overflow-wrap: anywhere; }
  #app .game-shell[data-page="adventure"] .mother-growth-train.button {
    border-image: url(../assets/ui/button-secondary-wood-plank.png) 62 78 62 78 fill stretch !important;
    border-width: 12px 10px !important;
    padding: 0 2px !important;
    white-space: nowrap;
    font-size: 12px;
  }
}