@charset "UTF-8";
/* Offline mother: camp, source ledger, inventory and claim, then paired
   upgrade recipes. Original bitmap windows and exact quantities stay live. */
#modal-root .mother-offline-modal .mother-offline-scroll { gap: 4px; }
#modal-root .mother-offline-modal .mother-offline-hero {
  flex-basis: auto;
  height: clamp(128px,34cqw,140px);
  background-size: cover; background-position: center 48%;
}
#modal-root .mother-offline-modal .mother-offline-hero h2 {
  top: 5px; width: 175px; padding: 4px 6px;
  font-size: 22px; line-height: 26px;
}
#modal-root .mother-offline-modal .mother-offline-animal {
  bottom: 32px; height: clamp(68px,21cqw,84px); max-height: none;
  width: auto; max-width: 30%; object-fit: contain;
}
#modal-root .mother-offline-modal .mother-offline-hero p {
  display: grid; grid-template-columns: 1fr 1fr .85fr;
  gap: 3px; padding: 4px 6px; font-size: 10px; line-height: 14px;
}
#modal-root .mother-offline-modal .mother-offline-hero p > span {
  display: flex; flex-direction: column; align-items: center;
  min-width: 0; white-space: normal;
}
#modal-root .mother-offline-modal .mother-offline-hero p small { font-size: 9px; line-height: 12px; }
#modal-root .mother-offline-modal .mother-offline-hero p b { font-size: 12px; line-height: 15px; font-variant-numeric: tabular-nums; }

#modal-root .mother-offline-modal .mother-offline-ledger {
  gap: 5px; padding: 10px 11px 12px !important;
}
#modal-root .mother-offline-modal .mother-offline-sources {
  min-height: 0; grid-template-columns: 1.08fr 1fr; gap: 7px; align-items: start;
}
#modal-root .mother-offline-modal .mother-offline-sources > * { min-height: 0; }
#modal-root .mother-offline-modal .mother-offline-sources h3 { margin: 0; font-size: 11px; line-height: 15px; }
#modal-root .mother-offline-modal .mother-offline-auto {
  display: grid; grid-template-columns: 50px minmax(0,1fr);
  grid-template-rows: auto auto auto auto auto; gap: 2px 4px; align-content: start;
}
#modal-root .mother-offline-modal .mother-offline-auto > div:not(.mother-board-art) { display: contents; }
#modal-root .mother-offline-modal .mother-offline-auto > .mother-board-art {
  grid-column: 1; grid-row: 1 / span 2; width: 50px; height: 52px; align-self: center;
}
#modal-root .mother-offline-modal .mother-offline-auto h3 { grid-column: 2; grid-row: 1; }
#modal-root .mother-offline-modal .mother-offline-auto div > span { grid-column: 2; grid-row: 2; font-size: 10px; line-height: 14px; }
#modal-root .mother-offline-modal .mother-offline-auto strong {
  grid-column: 1 / -1; grid-row: 3; justify-content: center;
  font-size: 24px; line-height: 28px; gap: 4px; margin: 0;
}
#modal-root .mother-offline-modal .mother-offline-auto strong > .resource-icon { width: 19px; height: 24px; }
#modal-root .mother-offline-modal .offline-current-rate {
  grid-column: 1 / -1; grid-row: 4; text-align: center; font-size: 9px; line-height: 13px; color: #86653c;
}
#modal-root .mother-offline-modal .mother-offline-auto div > .resource-list { grid-column: 1 / -1; grid-row: 5; }
#modal-root .mother-offline-modal .mother-offline-sources .resource-list:empty { display: none; }
#modal-root .mother-offline-modal .mother-offline-expeditions { padding: 0; }
#modal-root .mother-offline-modal .offline-journey-art { height: 32px; justify-content: center; gap: 4px; margin: 3px 0; }
#modal-root .mother-offline-modal .mother-offline-expeditions .offline-journey-art { float: none; width: auto; }
#modal-root .mother-offline-modal .offline-journey-art > img { width: 40px; height: 32px; object-fit: contain; }
#modal-root .mother-offline-modal .mother-offline-expeditions b { font-size: 10px; line-height: 15px; }
#modal-root .mother-offline-modal .mother-offline-supply { margin: 0 0 2px; }
#modal-root .mother-offline-modal .mother-offline-expeditions .resource-list { display: flex; flex-wrap: wrap; gap: 1px 5px; }
#modal-root .mother-offline-modal .mother-offline-sources .resource-value { font-size: 9px; line-height: 16px; gap: 2px; }
#modal-root .mother-offline-modal .mother-offline-sources .resource-value b { font-size: 12px; }
#modal-root .mother-offline-modal .mother-offline-sources .resource-icon { width: 14px; height: 17px; }
#modal-root .mother-offline-modal .mother-offline-transfer {
  grid-template-columns: 38px minmax(0,1fr) 18px 28px; gap: 4px;
  padding-block: 4px !important; min-height: 0;
}
#modal-root .mother-offline-modal .mother-offline-transfer > img { height: 42px; }
#modal-root .mother-offline-modal .mother-offline-transfer > .offline-transfer-chest { height: 30px; }
#modal-root .mother-offline-modal .mother-offline-transfer h3 { font-size: 10px; line-height: 14px; }
#modal-root .mother-offline-modal .mother-offline-transfer .resource-list { display: flex; flex-wrap: wrap; gap: 0 5px; }
#modal-root .mother-offline-modal .mother-offline-transfer .resource-value { font-size: 10px; line-height: 17px; gap: 2px; }
#modal-root .mother-offline-modal .mother-offline-transfer .resource-value b { font-size: 14px; }
#modal-root .mother-offline-modal .mother-offline-transfer .resource-icon { width: 16px; height: 19px; }
#modal-root .mother-offline-modal .mother-offline-inventory h3 { margin: 0 0 3px; font-size: 11px; line-height: 17px; }
#modal-root .mother-offline-modal .mother-offline-inventory > .resource-list {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px;
}
#modal-root .mother-offline-modal .mother-offline-inventory > .resource-list:has(> :nth-child(5)) { grid-template-columns: repeat(3,minmax(0,1fr)); }
#modal-root .mother-offline-modal .mother-offline-inventory .resource-value {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 2px 1px;
}
#modal-root .mother-offline-modal .mother-offline-inventory .resource-icon { width: 19px; height: 21px; max-height: 21px; flex-basis: auto; }
#modal-root .mother-offline-modal .mother-offline-inventory .resource-value > span { display: block; font-size: 9px; line-height: 12px; text-align: center; min-width: 0; }
#modal-root .mother-offline-modal .mother-offline-inventory .resource-value b {
  display: block; font-size: clamp(13px,3.7cqw,16px); line-height: 18px; white-space: normal; overflow-wrap: anywhere;
}
#modal-root .mother-offline-modal .mother-offline-ledger > .mother-offline-claim {
  --offline-claim-height: 48px;
  width: min(100%,224px); min-width: 0; justify-self: center;
  margin: 2px auto 0; font-size: 18px;
  height: var(--offline-claim-height); min-height: var(--offline-claim-height);
  padding: 3px calc(var(--offline-claim-height) * 218 / 660 + 4px) 3px calc(var(--offline-claim-height) * 650 / 660 + 4px) !important;
}
#modal-root .mother-offline-modal .mother-offline-action-dock { grid-template-columns: minmax(0,1fr); }
#modal-root .modal.mother-offline-modal .mother-offline-action-dock > button.button.illustrated-button.mother-offline-growth {
  --offline-action-height: 48px; --offline-action-font: 17px;
  --offline-action-left: calc(var(--offline-action-height) * 150 / 165 + 4px);
  --offline-action-right: calc(var(--offline-action-height) * 54 / 165 + 4px);
  width: min(100%,280px); justify-self: center;
  height: 56px; min-height: 56px; line-height: 1.25;
}

#modal-root .mother-offline-modal .mother-offline-upgrade { padding: 11px !important; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-split {
  display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 8px; align-items: start;
}
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-split:not(:has(> .mother-next-upgrade)) { grid-template-columns: minmax(0,1fr); }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-current-upgrade > .mother-board-art {
  position: static; float: left; width: 46px; height: 62px; margin: 0 5px 4px 0;
}
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-offline-upgrade-caption {
  min-height: 0; padding: 0; font-size: 9px; line-height: 14px;
}
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-current-upgrade > h2 {
  min-height: 0; padding: 0; margin: 2px 0 5px; font-size: 13px; line-height: 18px;
}
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-current-upgrade > h2 span { display: block; font-size: 12px; line-height: 17px; white-space: normal; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-columns { clear: both; grid-template-columns: minmax(0,1fr); gap: 4px; }
#modal-root .mother-offline-modal .mother-offline-upgrade h3 { margin: 0 0 2px; font-size: 10px; line-height: 14px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .resource-value { font-size: 9px; line-height: 17px; gap: 2px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .resource-value b { font-size: 13px; line-height: 18px; white-space: normal; overflow-wrap: anywhere; }
#modal-root .mother-offline-modal .mother-offline-upgrade .resource-icon { width: 13px; height: 16px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-cost > .resource-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-cost .resource-value { display: grid; grid-template-columns: 12px minmax(0,1fr); grid-template-rows: 13px auto; gap: 0 2px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-cost .resource-value > span { display: contents; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-cost .resource-value b { grid-column: 1 / -1; grid-row: 2; }
#modal-root .mother-offline-modal .mother-offline-upgrade :is(.sufficient,.deficit,.muted) { margin: 2px 0 0; font-size: 9px; line-height: 14px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-stats {
  border-left: 0; border-top: 1px solid #c9ab72; padding: 4px 0 0;
}
#modal-root .mother-offline-modal .mother-offline-upgrade .stat-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 3px; margin: 0 0 2px; font-size: 10px; line-height: 17px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .stat-row > span { flex-basis: auto; font-size: 10px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .stat-row b { font-size: 15px; line-height: 20px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .stat-row small { font-size: 9px; line-height: 13px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-payment { margin: 4px 0 0; padding: 4px 0 0; font-size: 9px; line-height: 14px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-payment > .resource-list { display: flex; flex-wrap: wrap; gap: 1px 5px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-next-upgrade { border-left: 1px solid #c9ab72; padding-left: 7px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-next-upgrade > summary { padding: 5px 4px; min-height: 44px; gap: 2px; font-size: 11px; line-height: 16px; text-align: center; }
#modal-root .mother-offline-modal .mother-offline-upgrade .offline-next-recipe { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto; gap: 3px; padding-top: 5px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .offline-next-recipe > :is(h3,.resource-list,.mother-next-shortfall,.offline-next-attributes) { grid-column: 1; grid-row: auto; }
#modal-root .mother-offline-modal .mother-offline-upgrade .offline-next-recipe > .resource-list { gap: 1px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-next-shortfall { margin: 2px 0 0; padding: 4px 0 0; font-size: 9px; line-height: 14px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .offline-next-attributes > summary { min-height: 44px; padding: 5px 1px; font-size: 10px; line-height: 15px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-inventory { margin-top: 6px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-inventory > summary { min-height: 44px; padding: 5px 7px; font-size: 11px; line-height: 16px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .offline-mastered-badge { margin: 2px 0 6px; font-size: 11px; }
#modal-root .mother-offline-modal .mother-offline-upgrade .offline-mastered-stats { clear: both; }

@container (min-width: 382px) {
  #modal-root .mother-offline-modal .mother-offline-ledger { gap: 3px; }
  /* The mother's action plaques stay concentrated beneath their ledgers,
     rather than turning into full-width rails on a larger portrait frame. */
  #modal-root .mother-offline-modal .mother-offline-ledger > .mother-offline-claim {
    --offline-claim-height: 64px; width: min(100%,260px); font-size: 22px;
  }
  #modal-root .modal.mother-offline-modal .mother-offline-action-dock > button.button.illustrated-button.mother-offline-growth {
    --offline-action-height: 64px; --offline-action-font: 19px;
    width: min(100%,300px); height: 64px; min-height: 64px;
  }
  #modal-root .mother-offline-modal .mother-offline-sources h3 { font-size: 13px; line-height: 18px; }
  #modal-root .mother-offline-modal .mother-offline-auto { grid-template-columns: 62px minmax(0,1fr); }
  /* Share the workshop illustration's height with its amount instead of
     stacking the amount underneath an otherwise mostly empty image row. */
  #modal-root .mother-offline-modal .mother-offline-auto > .mother-board-art {
    grid-row: 1 / span 3; width: 62px; height: 72px;
  }
  #modal-root .mother-offline-modal .mother-offline-auto strong {
    grid-column: 2; justify-content: start; font-size: clamp(20px,5cqw,24px);
    min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere;
  }
  #modal-root .mother-offline-modal .mother-offline-inventory .resource-value {
    display: grid; grid-template-columns: 20px minmax(0,1fr);
    gap: 0 3px; align-items: center; padding: 2px;
  }
  #modal-root .mother-offline-modal .mother-offline-transfer { padding-block: 2px !important; }
  #modal-root .mother-offline-modal .mother-offline-transfer > img { height: 36px; }
  #modal-root .mother-offline-modal .mother-offline-inventory h3 { line-height: 15px; margin-bottom: 2px; }
  #modal-root .mother-offline-modal .mother-offline-inventory h3 > img { width: 18px; height: 18px; object-fit: contain; }
  #modal-root .mother-offline-modal .mother-offline-inventory .resource-value > span { text-align: left; }
  #modal-root .mother-offline-modal .mother-offline-inventory .resource-value b { font-size: 14px; line-height: 16px; }
  #modal-root .mother-offline-modal .mother-offline-upgrade .mother-current-upgrade > .mother-board-art { width: 36px; height: 46px; }
  #modal-root .mother-offline-modal .mother-offline-upgrade .mother-current-upgrade > h2 { font-size: 13px; line-height: 18px; }
  #modal-root .mother-offline-modal .mother-offline-upgrade .mother-current-upgrade > h2 span { display: inline; margin-left: 3px; }
  #modal-root .mother-offline-modal .mother-offline-upgrade .mother-columns {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px;
  }
  #modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-stats {
    border-top: 0; border-left: 1px solid #c9ab72; padding: 0 0 0 5px;
  }
  #modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-cost > .resource-list {
    display: flex; flex-direction: column; gap: 1px;
  }
  #modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-cost .resource-value { display: flex; gap: 2px; }
  #modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-cost .resource-value > span { display: block; }
  #modal-root .mother-offline-modal .mother-offline-upgrade .mother-upgrade-cost .resource-value b { display: inline; }
}
@container (max-width: 350px) {
  #modal-root .mother-offline-modal .mother-offline-ledger { gap: 4px; padding: 9px 10px 10px !important; }
  #modal-root .mother-offline-modal .mother-offline-auto { grid-template-columns: 42px minmax(0,1fr); gap: 1px 3px; }
  #modal-root .mother-offline-modal .mother-offline-auto > .mother-board-art { width: 42px; height: 42px; }
  #modal-root .mother-offline-modal .mother-offline-auto strong { font-size: 22px; line-height: 26px; }
  #modal-root .mother-offline-modal .offline-current-rate { font-size: 9px; line-height: 12px; }
  #modal-root .mother-offline-modal .mother-offline-transfer { grid-template-columns: 32px minmax(0,1fr) 16px 24px; padding-block: 3px !important; }
  #modal-root .mother-offline-modal .mother-offline-transfer > img { height: 36px; }
  #modal-root .mother-offline-modal .mother-offline-inventory h3 { min-height: 0; line-height: 15px; margin-bottom: 2px; }
  #modal-root .mother-offline-modal .mother-offline-inventory h3 > img { width: 16px; height: 18px; }
  #modal-root .mother-offline-modal .mother-offline-inventory .resource-icon { width: 16px; height: 18px; max-height: 18px; }
  #modal-root .mother-offline-modal .mother-offline-inventory .resource-value b { font-size: 13px; line-height: 17px; }
}