/* Growth mother: body windows retain the complete visible button and its
   leaf or paw. The original PNG files remain unchanged. */
#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: 56px;
  --upgrade-left: calc(var(--upgrade-skin-height) * 268 / 545);
  --upgrade-right: calc(var(--upgrade-skin-height) * 360 / 545);
  height: 56px; min-height: 56px;
  padding: 6px var(--upgrade-right) 6px var(--upgrade-left) !important;
}

#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: 56px;
  --upgrade-left: calc(var(--upgrade-skin-height) * 644 / 400);
  --upgrade-right: calc(var(--upgrade-skin-height) * 185 / 400);
  height: 56px; min-height: 56px;
  padding: 6px var(--upgrade-right) 6px var(--upgrade-left) !important;
}
#modal-root .modal button.modal-confirm-stat-upgrade.illustrated-button[data-button-skin="workshop"] {
  --upgrade-skin-height: 52px; height: 52px; min-height: 52px; font-size: 15px;
  padding: 6px var(--upgrade-right) 6px var(--upgrade-left) !important;
}
#modal-root .modal button.illustrated-button[data-button-skin="animal"] {
  --upgrade-skin-height: 48px; height: 48px; min-height: 48px; font-size: 15px;
}
#app .game-shell[data-page="growth"] .mastered-growth-actions button.illustrated-button[data-button-skin="workshop"] {
  --upgrade-skin-height: 52px; height: 52px; min-height: 52px;
  padding: 6px var(--upgrade-right) 6px var(--upgrade-left) !important;
}

/* Current and next workshop cards share the mother's three columns. */
#app .game-shell[data-page="growth"] .mother-growth-board {
  padding: 12px !important; gap: 6px; align-items: start;
}
#app .game-shell[data-page="growth"] .mother-growth-board > .paper-frame-skin { --paper-frame-scale: .09; }
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) {
  grid-template-columns: 108px minmax(0,1fr) minmax(0,1.05fr);
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-art {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  min-height: 0; height: 140px; aspect-ratio: auto;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-art > img {
  inset: auto 0 5px; width: 100%; height: auto; object-fit: contain; object-position: center;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content > h2 {
  grid-column: 2 / -1; grid-row: 1; align-self: center;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px;
  margin: 0; font-size: 18px; line-height: 24px;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content > h2 span {
  display: inline; font-size: 16px; line-height: 24px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-current .mother-columns { display: contents; }
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content .mother-upgrade-cost {
  grid-column: 2; grid-row: 2; align-self: start;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content .mother-upgrade-stats {
  grid-column: 3; grid-row: 2; display: block;
  border-top: 0; border-left: 1px solid #c9ab72; padding: 0 0 0 5px;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content h3 {
  font-size: 11px; line-height: 16px; margin: 0 0 3px;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content .resource-list { gap: 2px 7px; }
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .resource-value { font-size: 10px; line-height: 22px; gap: 3px; }
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .resource-value b { font-size: 15px; line-height: 22px; }
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .resource-icon { width: 17px; height: 22px; }
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) :is(.sufficient,.deficit,.muted) { font-size: 10px; line-height: 16px; margin: 2px 0 0; }
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .stat-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 0 2px; align-items: baseline; margin: 0 0 3px;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .stat-row > span {
  grid-column: 1; grid-row: 1; gap: 2px; font-size: 10px; line-height: 14px;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .stat-row > span::before { width: 12px; height: 14px; flex-basis: 12px; }
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .stat-row > b { grid-column: 1 / -1; grid-row: 2; font-size: 18px; line-height: 23px; }
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .stat-row > small { grid-column: 2; grid-row: 1; font-size: 9px; line-height: 14px; }
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content > :is(.mother-payment,.mother-next-shortfall) {
  grid-column: 1 / -1; grid-row: 3; padding-top: 4px; margin: 0;
  font-size: 11px; line-height: 16px;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-payment > .resource-list { margin-top: 1px; }
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content > :is(.button,.text-button) {
  grid-column: 1 / -1; grid-row: 4; justify-self: center;
  width: min(100%,260px); margin: 0;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .text-button { min-height: 44px; font-size: 13px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > button.workshop-material-route.illustrated-button[data-button-skin="departure"] { border-image: none !important; }
#app .game-shell[data-page="growth"] .workshop-material-route .growth-route-short { display: none; }

/* At the wider portrait size the mother's action sits beside the balance,
   keeping the workshop illustration, recipe and action on the same sheet.
   Narrower cards keep their full-width action and all recipe information. */
@container (min-width: 382px) {
  #app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content > :is(.mother-payment,.mother-next-shortfall) {
    grid-column: 1 / span 2; grid-row: 3; align-self: center;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content > :is(.button,.text-button) {
    grid-column: 3; grid-row: 3; align-self: center;
    width: 100%; min-width: 0; margin: 0;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-current .mother-board-content > button.illustrated-button[data-button-skin="workshop"] {
    --upgrade-skin-height: 48px;
    height: 48px; min-height: 48px; font-size: 14px;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-current .button-label { font-size: 14px; line-height: 18px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > .text-button {
    min-height: 48px; padding: 5px !important;
    font-size: 12px; line-height: 17px; white-space: normal;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-next .mother-board-content > button.workshop-material-route.illustrated-button[data-button-skin="departure"] {
    --departure-height: 40px; height: 48px; min-height: 48px; font-size: 13px;
  }
  #app .game-shell[data-page="growth"] .workshop-material-route .button-label { font-size: 13px; line-height: 18px; white-space: nowrap; }
  #app .game-shell[data-page="growth"] .workshop-material-route .growth-route-full { display: none; }
  #app .game-shell[data-page="growth"] .workshop-material-route .growth-route-short { display: inline; }
}

/* Future animal recipes stay below the current action with a shorter title. */
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > h2 { font-size: 18px; line-height: 24px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > .mother-animal-next { padding: 8px; gap: 4px 9px; margin-top: 0; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next > .growth-next-heading { min-height: 28px; padding: 3px 14px; font-size: 12px; line-height: 18px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next h4 { margin-bottom: 2px; font-size: 11px; line-height: 16px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next .resource-list { gap: 2px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next .resource-value { gap: 3px; font-size: 11px; line-height: 21px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next .resource-value b { font-size: 15px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next .resource-icon { width: 18px; height: 22px; }
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next :is(.deficit,.sufficient,.muted) { font-size: 11px; line-height: 18px; }
@container (max-width: 350px) {
  #app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) { grid-template-columns: 84px minmax(0,1fr) minmax(0,1.05fr); }
  #app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-art { height: 134px; }
  #app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content > h2 { font-size: 16px; line-height: 22px; }
  #app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content > h2 span { font-size: 15px; line-height: 22px; }
  #app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .stat-row > b { font-size: 17px; }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > button.illustrated-button[data-button-skin="animal"] { font-size: 16px; }
}

/* Compact animal recipes reserve their first row for the real availability
   notice, keeping frozen trip levels and rest time ahead of the next payment. */
@container (width < 382px) {
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal:has(.animal-availability-panel) .mother-board-content > .animal-availability-panel {
    grid-row: 1;
    margin-bottom: 0;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal:has(.animal-availability-panel) .mother-board-art {
    grid-row: 2 / span 2;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal:has(.animal-availability-panel) .mother-board-content > h2 {
    grid-row: 2;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal:has(.animal-availability-panel) .mother-upgrade-cost {
    grid-row: 3;
  }
}

/* Completed recipes use the same source windows as the ordinary paper.
   Keep the attained stats and next destination together on narrow screens. */
#app .game-shell[data-page="growth"] .mastered-growth-board {
  position: relative; isolation: isolate;
  border: 0 !important; border-image: none !important;
  background: none; padding: 14px !important;
  gap: 6px 10px;
}
#app .game-shell[data-page="growth"] .mastered-growth-board > .paper-frame-skin { --paper-frame-scale: .09; }
#app .game-shell[data-page="growth"] .mastered-growth-board .mastered-growth-stats { padding-block: 6px; }
@container (max-width: 350px) {
  #app .game-shell[data-page="growth"] .mastered-growth-board {
    grid-template-columns: 93px minmax(0,1fr); gap: 5px 8px;
    padding: 13px !important;
  }
  #app .game-shell[data-page="growth"] .mastered-growth-art,
  #app .game-shell[data-page="growth"] .mastered-growth-art > :is(img,svg) { height: 110px; }
  #app .game-shell[data-page="growth"] .mastered-growth-heading h2 { line-height: 24px; }
  #app .game-shell[data-page="growth"] .mastered-growth-stats b { line-height: 26px; }
  #app .game-shell[data-page="growth"] .mastered-growth-stats b small { line-height: 16px; }
  #app .game-shell[data-page="growth"] .mastered-growth-actions > .button { min-height: 48px; }
  #app .game-shell[data-page="growth"] .mastered-growth-actions button.illustrated-button[data-button-skin="workshop"] {
    --upgrade-skin-height: 48px; height: 48px; min-height: 48px;
  }
}

/* Growth composition follows the source paper at every portrait width:
   illustration, recipe and effects share a row. A second landscape behind
   the transparent workshop would compete with the actual facility. */
#app .game-shell[data-page="growth"] .mother-growth-board {
  gap: 4px 6px;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-art {
  height: 120px; min-height: 0; border: 0; overflow: visible;
  background: radial-gradient(ellipse at 50% 78%,#829a5466,transparent 70%);
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .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(.is-current,.is-next) .mother-board-content > h2 {
  padding-bottom: 3px;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-content .resource-list {
  gap: 1px 6px;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-payment {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1px 7px;
}
#app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-payment > .resource-list {
  margin: 0;
}

#app .game-shell[data-page="growth"] .mother-growth-board.is-animal {
  grid-template-columns: 86px minmax(0,.95fr) minmax(0,1.05fr);
  gap: 4px 7px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > .animal-availability-panel {
  grid-column: 1 / -1; grid-row: 1; margin: 0;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-art {
  grid-column: 1; grid-row: 2 / span 2; height: 120px;
  min-height: 0; aspect-ratio: auto; align-self: center;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > h2 {
  grid-column: 2 / -1; grid-row: 2; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 1px 5px; margin: 0; padding-bottom: 3px;
  font-size: 17px; line-height: 23px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > h2 span {
  display: inline; font-size: 15px; line-height: 23px; white-space: nowrap;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-cost {
  grid-column: 2; grid-row: 3; align-self: start;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats {
  grid-column: 3; grid-row: 3; display: grid;
  grid-template-columns: minmax(0,1fr); gap: 3px; align-content: start;
  border-top: 0; border-left: 1px solid #c9ab72; padding: 0 0 0 5px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content h3 {
  font-size: 11px; line-height: 16px; margin: 0 0 3px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats > .stat-row {
  padding-left: 0; gap: 0; margin: 0;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats > .stat-row::before {
  content: none;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .stat-row > span {
  font-size: 11px; line-height: 16px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats .stat-row b {
  font-size: 18px; line-height: 24px; white-space: nowrap;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .stat-row small {
  font-size: 10px; line-height: 15px; white-space: nowrap;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .resource-list {
  gap: 1px 5px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-cost > .resource-list {
  flex-direction: column; align-items: start;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .resource-value {
  font-size: 11px; line-height: 20px; gap: 3px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .resource-value b {
  font-size: 15px; line-height: 20px;
}
#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: 17px; margin: 2px 0 0;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-cost > .sufficient {
  position: static;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > .mother-payment {
  grid-column: 1 / -1; grid-row: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1px 7px;
  font-size: 11px; line-height: 17px; padding-top: 4px;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-board-content > .button {
  grid-column: 1 / -1; grid-row: 5; justify-self: center;
  width: min(100%,300px); margin: 0;
}
#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: 1 / -1; grid-row: 7; gap: 3px 8px; margin: 0;
}
#app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-animal-next > .growth-next-heading {
  margin: 0; padding: 3px 12px; min-height: 28px;
  font-size: 12px; line-height: 18px;
}

@container (max-width: 350px) {
  #app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) {
    grid-template-columns: 94px minmax(0,1fr) minmax(0,1.05fr);
  }
  #app .game-shell[data-page="growth"] .mother-growth-board:is(.is-current,.is-next) .mother-board-art {
    height: 112px;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal {
    grid-template-columns: 80px minmax(0,.95fr) minmax(0,1.05fr);
    gap: 4px 6px;
  }
  #app .game-shell[data-page="growth"] .mother-growth-board.is-animal .mother-upgrade-stats .stat-row b {
    font-size: 17px; line-height: 23px;
  }
  #app .game-shell[data-page="growth"] .animal-selector { gap: 6px; }
  #app .game-shell[data-page="growth"] .animal-selector > .animal-select {
    flex: 0 0 calc((100% - 18px) / 4); min-width: 0;
  }
}

/* The confirmation uses the same clear cutout as the growth recipe. The
   next recipe and all live amounts remain in the scrollable paper body. */
#modal-root .upgrade-confirm-sheet .upgrade-confirm-identity .upgrade-confirm-portrait {
  height: 112px; border: 0; padding: 0; box-shadow: none;
  background: radial-gradient(ellipse at 50% 80%,#829a5466,transparent 70%);
}
#modal-root .upgrade-confirm-sheet[data-upgrade-kind="workshop"] .upgrade-confirm-identity .upgrade-confirm-portrait {
  background: radial-gradient(ellipse at 50% 80%,#829a5466,transparent 70%);
}
#modal-root .modal:has(.upgrade-confirm-sheet) > .modal-actions {
  display: grid; grid-template-columns: clamp(68px,22%,90px) minmax(0,1fr);
  align-items: stretch; gap: 8px;
}
#modal-root .modal:has(.upgrade-confirm-sheet) > .modal-actions:has(> button:only-child) {
  grid-template-columns: minmax(0,1fr);
}
#modal-root .modal:has(.upgrade-confirm-sheet) > .modal-actions > button {
  height: 48px; min-height: 48px; margin: 0; font-size: 14px;
}
#modal-root .modal:has(.upgrade-confirm-sheet) .modal-actions button.illustrated-button[data-button-skin] {
  --upgrade-skin-height: 48px;
  height: 48px; min-height: 48px; font-size: 14px;
}
@media (max-width: 380px) {
  #modal-root .upgrade-confirm-sheet .upgrade-confirm-identity .upgrade-confirm-portrait { height: 104px; }
}