@charset "UTF-8";
/* Portrait adaptation of the expedition mother. Keep four starter companions
   together and the paired ledgers compact; all monetary previews stay visible.
   Artwork uses contain and existing proportional paper/button slices. */
#app .game-shell[data-page="adventure"] .mother-route-showcase {
  height: 154px; min-height: 154px; padding-top: 28px;
}
#app .game-shell[data-page="adventure"] .route-showcase-card {
  height: 122px; min-height: 122px;
  grid-template-rows: 50px 16px 12px 17px;
}
#app .game-shell[data-page="adventure"] .route-showcase-art { height: 50px; }
#app .game-shell[data-page="adventure"] section.mother-party-panel { padding: 9px !important; }
#app .game-shell[data-page="adventure"] .mother-party-panel[data-roster-size="4"] .mother-party-strip {
  grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-columns: auto; gap: 5px;
}
#app .game-shell[data-page="adventure"] .mother-party-panel[data-roster-size="4"] .mother-party-strip > .party-choice { width: 100%; }
#app .game-shell[data-page="adventure"] .mother-party-panel[data-roster-size="4"] .dispatch-roster-help { display: none; }
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice {
  height: 122px; min-height: 122px;
}
#app .game-shell[data-page="adventure"] .party-showcase-card.party-choice.is-resting { height: 138px; min-height: 138px; }
#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 > :is(img.animal-art,svg.animal-rest-art) {
  height: 61px; max-height: 61px; object-fit: contain;
}
#app .game-shell[data-page="adventure"] .party-showcase-card .party-showcase-check { top: 47px; }
#app .game-shell[data-page="adventure"] .mother-decision-grid:not(:has(> .mother-reward-panel > h3)) {
  grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; align-items: stretch;
}
#app .game-shell[data-page="adventure"] .mother-decision-grid > article:is(.mother-reward-panel,.mother-growth-panel) { padding: 10px !important; }
#app .game-shell[data-page="adventure"] .mother-decision-grid > .mother-growth-panel {
  display: grid; grid-template-columns: 40px minmax(0,1fr);
  grid-template-rows: auto auto auto auto auto 1fr;
  gap: 3px 5px; align-content: start;
}
#app .game-shell[data-page="adventure"] .mother-growth-panel > h3 { grid-column: 1 / -1; grid-row: 1; font-size: 13px; line-height: 18px; }
#app .game-shell[data-page="adventure"] .mother-growth-panel > h3 > .ui-icon { width: 17px; height: 18px; }
#app .game-shell[data-page="adventure"] .mother-growth-heading { display: contents; }
#app .game-shell[data-page="adventure"] .mother-growth-heading > .mother-growth-portrait {
  grid-column: 1; grid-row: 2 / span 2; align-self: center;
  width: 40px; height: 66px; max-height: 66px; object-fit: contain;
}
#app .game-shell[data-page="adventure"] .mother-growth-heading > b {
  grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 3px; font-size: 12px; line-height: 16px;
}
#app .game-shell[data-page="adventure"] .mother-growth-heading small { display: inline; font-size: 10px; line-height: 16px; }
#app .game-shell[data-page="adventure"] .dispatch-growth-recipe { grid-column: 2; grid-row: 3; padding: 0; border: 0; }
#app .game-shell[data-page="adventure"] .mother-growth-panel h4 { margin: 0; font-size: 10px; line-height: 15px; }
#app .game-shell[data-page="adventure"] .mother-growth-cost { display: flex; flex-direction: column; align-items: start; gap: 0; }
#app .game-shell[data-page="adventure"] .mother-growth-cost .resource-value { display: flex; gap: 2px; font-size: 10px; line-height: 19px; }
#app .game-shell[data-page="adventure"] .mother-growth-cost .resource-value > span { font-size: 10px; line-height: 19px; }
#app .game-shell[data-page="adventure"] .mother-growth-cost .resource-value b { display: inline; font-size: 14px; line-height: 19px; }
#app .game-shell[data-page="adventure"] .mother-growth-cost .resource-icon { flex: 0 0 15px; width: 15px; height: 19px; }
#app .game-shell[data-page="adventure"] .mother-growth-stats { grid-column: 1 / -1; grid-row: 4; padding-top: 3px; }
/* The level arrow, resource icons and stat units already label these two
   groups visually. Keep full headings for assistive reading without two extra
   label rows that are absent from the mother. */
#app .game-shell[data-page="adventure"] :is(.dispatch-growth-recipe,.mother-growth-stats) > h4 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#app .game-shell[data-page="adventure"] .dispatch-growth-stat { padding: 0; gap: 0 2px; align-items: baseline; }
#app .game-shell[data-page="adventure"] .dispatch-growth-stat > span { grid-column: 1; grid-row: 1; font-size: 11px; line-height: 21px; white-space: nowrap; }
#app .game-shell[data-page="adventure"] .dispatch-growth-stat > span > small { margin-left: 2px; font-size: 9px; color: #886339; }
#app .game-shell[data-page="adventure"] .dispatch-growth-stat > b { grid-column: 2; grid-row: 1; font-size: 15px; line-height: 21px; }
#app .game-shell[data-page="adventure"] .mother-growth-panel .dispatch-growth-followup {
  grid-column: 1 / -1; grid-row: 5; display: grid; gap: 2px;
  padding: 3px 0 0; margin: 0; border-top: 1px solid #c7ac77;
}
#app .game-shell[data-page="adventure"] .dispatch-growth-followup > section { padding: 0; border: 0; background: none; min-width: 0; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup :is(.dispatch-growth-balance-values,.dispatch-growth-next-values) {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 6px;
}
#app .game-shell[data-page="adventure"] .dispatch-growth-followup .resource-value { font-size: 10px; line-height: 18px; gap: 2px; }
/* Material identities remain in the DOM/alt text; the repeated ledger rows
   use the same resource pictures as the named recipe above. */
#app .game-shell[data-page="adventure"] .dispatch-growth-followup .resource-value > span { font-size: 0; line-height: 18px; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup .resource-value b { font-size: 12px; line-height: 18px; }
#app .game-shell[data-page="adventure"] .dispatch-growth-followup .resource-icon { flex-basis: 14px; width: 14px; height: 18px; }
#app .game-shell[data-page="adventure"] button.mother-growth-train.button.illustrated-button[data-button-skin="animal"] {
  grid-column: 1 / -1; grid-row: 6; align-self: end;
  --upgrade-skin-height: 40px;
  --upgrade-left: calc(var(--upgrade-skin-height) * 644 / 400);
  --upgrade-right: calc(var(--upgrade-skin-height) * 185 / 400);
  height: 44px; min-height: 44px; margin: 0;
  padding: 0 var(--upgrade-right) 0 var(--upgrade-left) !important;
}
#app .game-shell[data-page="adventure"] .mother-growth-train .button-label { font-size: 12px; white-space: nowrap; }
/* Match the mother's small route illustration and material slots, instead of
   stretching a large empty row to the height of the longer growth ledger. */
#app .game-shell[data-page="adventure"] .mother-decision-grid > .mother-reward-panel:has(> .mother-reward-scene) {
  display: grid; grid-template-columns: 38px minmax(0,1fr);
  grid-template-rows: auto auto auto auto auto auto 1fr;
  align-content: start; gap: 5px;
}
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) > .mother-reward-scene {
  grid-column: 1; grid-row: 1; order: 0; align-self: center;
  width: 38px; height: 38px; min-height: 0; flex-basis: auto; object-fit: contain; margin: 0;
}
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) > .mother-reward-intro {
  grid-column: 2; grid-row: 1; align-self: center; min-width: 0; padding: 0; margin: 0;
}
#app .game-shell[data-page="adventure"] .mother-reward-intro h3 { font-size: 13px; line-height: 18px; }
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) > .mother-reward-resources {
  grid-column: 1 / -1; grid-row: 2; margin: 0; grid-template-columns: repeat(2,minmax(0,1fr));
}
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) .mother-reward-resources .resource-value { padding: 2px; }
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) .mother-reward-resources .resource-value > span { line-height: 12px; }
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) .mother-reward-resources .resource-value b { line-height: 20px; }
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) > .mother-load-row { grid-column: 1 / -1; grid-row: 3; margin: 0; }
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) > .mother-reward-meta { grid-column: 1 / -1; grid-row: 4; margin: 0; }
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) > .mother-reward-discard { grid-column: 1 / -1; grid-row: 5; margin: 0; }
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) > .mother-reward-cost { grid-column: 1 / -1; grid-row: 6; margin: 0; }
#app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) > .packing-shortcut { grid-column: 1 / -1; grid-row: 7; align-self: end; }
#app .game-shell[data-page="adventure"] .mother-reward-panel button.packing-shortcut.illustrated-button[data-button-skin="wood"] { height: 44px; min-height: 44px; }
/* Supply uses the same small illustrated heading as the expedition ledger;
   a stacked full-width backpack would hide all three material ranges. */
#app .game-shell[data-page="adventure"] .supply-dispatch .mother-decision-grid .mother-reward-intro {
  display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 5px; min-height: 50px;
}
#app .game-shell[data-page="adventure"] .supply-dispatch .mother-decision-grid .mother-reward-intro > img {
  grid-column: 1; grid-row: 1; width: 38px; height: 50px; object-fit: contain;
}
#app .game-shell[data-page="adventure"] .supply-dispatch .mother-decision-grid .mother-reward-intro > div { grid-column: 2; grid-row: 1; }
#app .game-shell[data-page="adventure"] .supply-dispatch .mother-decision-grid > .mother-reward-panel { gap: 5px; }
@container (min-width: 382px) {
  #app .game-shell[data-page="adventure"] .mother-growth-panel .dispatch-growth-followup { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  #app .game-shell[data-page="adventure"] .dispatch-growth-followup :is(.dispatch-growth-balance-values,.dispatch-growth-next-values) { flex-direction: column; align-items: start; }
}
@container (max-width: 381px) {
  #app .game-shell[data-page="adventure"] .dispatch-manifest .mother-decision-grid:not(:has(> .mother-reward-panel > h3)) { grid-template-columns: minmax(0,1fr); }
}
@container (max-width: 350px) {
  #app .game-shell[data-page="adventure"] .party-showcase-card > strong { gap: 2px; font-size: 11px; }
  #app .game-shell[data-page="adventure"] .mother-decision-grid > .mother-growth-panel { grid-template-columns: 30px minmax(0,1fr); gap: 3px; }
  #app .game-shell[data-page="adventure"] .mother-growth-heading > .mother-growth-portrait { width: 30px; height: 60px; max-height: 60px; }
  #app .game-shell[data-page="adventure"] .mother-growth-heading > b { font-size: 11px; }
  #app .game-shell[data-page="adventure"] .mother-growth-heading small { font-size: 10px; white-space: nowrap; }
  #app .game-shell[data-page="adventure"] .mother-growth-cost .resource-value b { font-size: 12px; }
  #app .game-shell[data-page="adventure"] .dispatch-growth-stat > span { font-size: 10px; }
  #app .game-shell[data-page="adventure"] .dispatch-growth-stat > span > small { font-size: 9px; margin-left: 1px; }
  #app .game-shell[data-page="adventure"] .dispatch-growth-stat > b { font-size: 13px; }
  #app .game-shell[data-page="adventure"] .mother-decision-grid > .mother-reward-panel:has(> .mother-reward-scene) { grid-template-columns: 30px minmax(0,1fr); }
  #app .game-shell[data-page="adventure"] .mother-reward-panel:has(> .mother-reward-scene) > .mother-reward-scene { width: 30px; height: 38px; }
  #app .game-shell[data-page="adventure"] .mother-reward-intro h3 { font-size: 12px; }
  #app .game-shell[data-page="adventure"] button.mother-growth-train.button.illustrated-button[data-button-skin="animal"] { --upgrade-skin-height: 32px; }
}

/* Welcome-home mother: compact source ledger; current recipe alongside the
   next cost. Extended next-level attributes remain available on disclosure. */
#modal-root .mother-offline-ledger { padding: 12px 12px 13px; gap: 6px; }
#modal-root .mother-offline-ledger .mother-offline-sources { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 7px; }
#modal-root .mother-offline-ledger .mother-offline-sources.is-legacy { grid-template-columns: minmax(0,1fr); }
#modal-root .mother-offline-ledger .mother-offline-auto { grid-template-columns: 64px minmax(0,1fr); gap: 4px; align-content: start; }
#modal-root .mother-offline-ledger .mother-offline-auto > .mother-board-art { grid-row: 1 / span 2; width: 64px; height: 76px; }
#modal-root .mother-offline-ledger .mother-offline-auto strong {
  grid-column: 1 / -1; margin-top: 0; font-size: clamp(20px,6cqw,26px); line-height: 30px;
  white-space: nowrap; overflow-wrap: normal; word-break: normal;
}
#modal-root .mother-offline-ledger .mother-offline-auto strong .resource-icon { flex-basis: 20px; width: 20px; height: 24px; max-height: 24px; }
#modal-root .mother-offline-ledger .mother-offline-sources h3 { font-size: 12px; line-height: 18px; }
#modal-root .mother-offline-ledger .offline-journey-art { height: 48px; margin: 2px 0; }
#modal-root .mother-offline-ledger .offline-journey-art > img { height: 48px; max-height: 48px; object-fit: contain; }
#modal-root .mother-offline-ledger .mother-offline-expeditions b { font-size: 11px; line-height: 18px; }
#modal-root .mother-offline-ledger .mother-offline-sources .resource-value b { font-size: 16px; }
#modal-root .mother-offline-ledger .mother-offline-transfer { grid-template-columns: 48px minmax(0,1fr) 20px 34px; gap: 4px; padding-block: 5px !important; }
#modal-root .mother-offline-ledger .mother-offline-transfer > img { height: 54px; }
#modal-root .mother-offline-ledger .mother-offline-transfer > .offline-transfer-chest { height: 38px; }
#modal-root .mother-offline-ledger .mother-offline-transfer h3 { margin: 0 0 2px; font-size: 12px; }
#modal-root .mother-offline-ledger .mother-offline-transfer .resource-list { flex-direction: row; flex-wrap: wrap; gap: 2px 6px; }
#modal-root .mother-offline-ledger .mother-offline-transfer .resource-value b { font-size: 16px; }
#modal-root .mother-offline-ledger .mother-offline-inventory h3 { margin: 0 0 3px; font-size: 12px; line-height: 20px; }
#modal-root .mother-offline-ledger .mother-offline-inventory > .resource-list { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
#modal-root .mother-offline-ledger .mother-offline-inventory > .resource-list:has(> .resource-value:nth-child(5)) { grid-template-columns: repeat(3,minmax(0,1fr)); }
#modal-root .mother-offline-ledger .mother-offline-inventory .resource-value { flex-direction: column; padding: 4px 1px; gap: 1px; text-align: center; }
#modal-root .mother-offline-ledger .mother-offline-inventory .resource-value b { font-size: 16px; line-height: 21px; }
#modal-root .mother-offline-ledger .mother-offline-inventory .resource-icon { width: 23px; height: 25px; flex-basis: 25px; max-height: 25px; }
#modal-root .mother-offline-upgrade { padding: 12px !important; }
#modal-root .mother-offline-upgrade .mother-upgrade-split { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); gap: 10px; align-items: start; }
#modal-root .mother-offline-upgrade .mother-current-upgrade { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 3px 5px; }
#modal-root .mother-offline-upgrade .mother-current-upgrade > .mother-board-art { position: static; width: 62px; height: 84px; grid-column: 1; grid-row: 1 / span 2; }
#modal-root .mother-offline-upgrade .mother-offline-upgrade-caption { grid-column: 2; grid-row: 1; padding: 0; min-height: 0; font-size: 10px; line-height: 16px; }
#modal-root .mother-offline-upgrade .mother-current-upgrade > h2 { grid-column: 2; grid-row: 2; padding: 0; margin: 0; min-height: 0; font-size: 16px; line-height: 23px; }
#modal-root .mother-offline-upgrade .mother-current-upgrade > h2 span { font-size: 13px; line-height: 20px; }
#modal-root .mother-offline-upgrade .mother-columns { grid-column: 1 / -1; grid-row: 3; gap: 5px; }
#modal-root .mother-offline-upgrade h3 { margin: 0 0 3px; font-size: 10px; line-height: 16px; }
#modal-root .mother-offline-upgrade .mother-upgrade-cost > .resource-list { gap: 2px; }
#modal-root .mother-offline-upgrade .resource-value { font-size: 10px; line-height: 20px; gap: 2px; }
#modal-root .mother-offline-upgrade .resource-value b { font-size: 14px; }
#modal-root .mother-offline-upgrade .resource-icon { width: 17px; height: 21px; }
#modal-root .mother-offline-upgrade .mother-current-upgrade .mother-upgrade-stats { padding-left: 5px; }
#modal-root .mother-offline-upgrade .stat-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; margin: 0 0 4px; font-size: 10px; line-height: 15px; }
#modal-root .mother-offline-upgrade .stat-row b { font-size: 17px; line-height: 23px; }
#modal-root .mother-offline-upgrade .stat-row small { font-size: 9px; line-height: 14px; }
#modal-root .mother-offline-upgrade .stat-row > span { font-size: 10px; line-height: 15px; }
#modal-root .mother-offline-upgrade .stat-row > span::before { width: 13px; height: 14px; flex-basis: 13px; }
#modal-root .mother-offline-upgrade .mother-payment { grid-column: 1 / -1; grid-row: 4; margin: 0; padding-top: 4px; font-size: 10px; line-height: 16px; }
#modal-root .mother-offline-upgrade .mother-payment > .resource-list { flex-wrap: wrap; gap: 0 6px; }
#modal-root .mother-offline-upgrade .mother-next-upgrade { border-left: 1px solid #c9ab72; padding-left: 8px; }
#modal-root .mother-offline-upgrade .mother-next-upgrade > summary { min-height: 44px; padding: 4px 6px; gap: 2px; font-size: 10px; line-height: 16px; }
#modal-root .mother-offline-upgrade .offline-next-recipe { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
#modal-root .mother-offline-upgrade .offline-next-recipe > .resource-list { gap: 2px; }
#modal-root .mother-offline-upgrade .offline-next-recipe > .mother-next-shortfall { margin: 0; padding-top: 4px; font-size: 10px; line-height: 16px; }
#modal-root .mother-offline-upgrade .offline-next-attributes { width: 100%; min-width: 0; }
#modal-root .mother-offline-upgrade .offline-next-attributes > summary { min-height: 44px; padding: 3px; background: #ddc28c55; color: #674725; text-shadow: none; font-size: 10px; line-height: 16px; list-style: none; }
#modal-root .mother-offline-upgrade .offline-next-attributes > summary::-webkit-details-marker { display: none; }
#modal-root .mother-offline-upgrade .offline-next-attributes .mother-upgrade-stats { border: 0; padding: 4px 0 0; }
#modal-root .mother-offline-upgrade .mother-upgrade-inventory { margin-top: 7px; }
#modal-root .mother-offline-upgrade .mother-upgrade-inventory > summary { min-height: 44px; padding-block: 4px; font-size: 11px; }
#modal-root .mother-offline-upgrade .offline-mastered-badge { grid-column: 1 / -1; margin: 0; }
#modal-root .mother-offline-upgrade .offline-mastered-stats { grid-column: 1 / -1; }
#modal-root .mother-offline-upgrade .mother-upgrade-split:not(:has(.mother-next-upgrade)) { grid-template-columns: minmax(0,1fr); }
@container (max-width: 350px) {
  #modal-root .mother-offline-ledger .mother-offline-auto { grid-template-columns: 52px minmax(0,1fr); }
  #modal-root .mother-offline-ledger .mother-offline-auto > .mother-board-art { width: 52px; height: 70px; }
  #modal-root .mother-offline-ledger .mother-offline-auto strong { grid-column: 1 / -1; }
  #modal-root .mother-offline-ledger .mother-offline-inventory .resource-value b { font-size: 14px; }
  #modal-root .mother-offline-upgrade .mother-upgrade-split { grid-template-columns: minmax(0,1fr); gap: 7px; }
  #modal-root .mother-offline-upgrade .mother-current-upgrade { grid-template-columns: 62px minmax(0,1fr); }
  #modal-root .mother-offline-upgrade .mother-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #modal-root .mother-offline-upgrade .mother-next-upgrade { padding: 7px 0 0; border-left: 0; border-top: 1px solid #c9ab72; }
  #modal-root .mother-offline-upgrade .offline-next-recipe { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px 8px; }
  #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; }
  #modal-root .mother-offline-upgrade .offline-next-recipe > .mother-next-shortfall { grid-column: 1 / -1; grid-row: 3; }
  #modal-root .mother-offline-upgrade .offline-next-attributes { grid-column: 2; grid-row: 1 / span 2; }
}