/* Scoped short-landscape management layout. Original PNGs are not trimmed,
   painted over, or resampled. Nine-slice corners use a uniform source scale. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 760px),
       (orientation: landscape) and (min-width: 640px) and (max-width: 1280px) {
  .app-shell:has(.stage:is([data-screen="backpack"], [data-screen="robots"], [data-screen="commissions"], [data-screen="settings"])) {
    width: calc(100vw - 12px);
    max-width: none;
  }
  .stage:is([data-screen="backpack"], [data-screen="robots"], [data-screen="commissions"], [data-screen="settings"]) {
    height: calc(100vh - 66px);
    height: calc(100dvh - 66px);
    aspect-ratio: auto;
  }

  /* Source panel 1402x1122: x cuts160/1242, y cuts230/892.
     All corner dimensions map at .075 CSSpx/source px: no corner squash. */
  .stage:is([data-screen="backpack"], [data-screen="robots"], [data-screen="commissions"], [data-screen="settings"])
  :is(.inventory-panel, .growth-panel.runtime-card, .robot-panel, .commission-panel, .settings-panel) {
    box-sizing: border-box;
    background: none;
    border: solid transparent;
    border-width: 17.25px 12px;
    border-image-source: var(--ui-panel-readable);
    border-image-slice: 230 160 230 160 fill;
    border-image-width: 1;
    border-image-repeat: stretch;
    padding: 4px 8px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  /* The full 390x160 button canvas includes transparent margins. The
     before-layer preserves those pixels and scales corner tiles uniformly
     at .24 while the independent content box keeps useful text/hit areas. */
  .stage:is([data-screen="backpack"], [data-screen="robots"], [data-screen="commissions"], [data-screen="settings"]) .action-button {
    --management-button-source: var(--ui-button-primary);
    position: relative;
    isolation: isolate;
    background: none;
    border: 0;
    min-width: 0;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
  }
  .stage:is([data-screen="backpack"], [data-screen="robots"], [data-screen="commissions"], [data-screen="settings"]) .action-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border: solid transparent;
    border-width: 14.4px 22.8px;
    border-image-source: var(--management-button-source);
    border-image-slice: 60 95 60 95 fill;
    border-image-width: 1;
    border-image-repeat: stretch;
  }
  .stage:is([data-screen="backpack"], [data-screen="robots"], [data-screen="commissions"], [data-screen="settings"]) .action-button.success { --management-button-source: var(--ui-button-success); }
  .stage:is([data-screen="backpack"], [data-screen="robots"], [data-screen="commissions"], [data-screen="settings"]) .action-button.danger { --management-button-source: var(--ui-button-danger); }
  .stage:is([data-screen="backpack"], [data-screen="robots"], [data-screen="commissions"], [data-screen="settings"]) .action-button.info { --management-button-source: var(--ui-button-info); }
  .stage:is([data-screen="backpack"], [data-screen="robots"], [data-screen="commissions"], [data-screen="settings"]) .action-button > span { min-width: 0; overflow-wrap: anywhere; }

  .stage[data-screen="backpack"] .growth-panel.runtime-card {
    left: 3%; top: 17%; bottom: auto;
    width: 46%; max-width: 46%;
    height: 59%; max-height: 59%;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-content: start;
    column-gap: 12px;
  }
  .stage[data-screen="backpack"] .growth-panel > h2 { grid-column: 1 / -1; grid-row: 1; }
  .stage[data-screen="backpack"] .growth-panel > .growth-component { grid-column: 1; grid-row: 2; min-width: 0; }
  .stage[data-screen="backpack"] .growth-track { width: 100%; margin: 2px auto 18px; }
  .stage[data-screen="backpack"] .growth-label { white-space: normal; overflow-wrap: anywhere; }
  .stage[data-screen="backpack"] .growth-panel p { margin: 4px 0; }
  .stage[data-screen="backpack"] .growth-panel > p:last-child { grid-column: 2; grid-row: 2; align-self: center; }
  .stage[data-screen="backpack"] .inventory-panel {
    right: 3%; top: 17%;
    width: 46%; height: 59%; max-height: 59%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 5px 8px;
    overflow: visible;
  }
  .stage[data-screen="backpack"] .inventory-panel h2 { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; min-width: 0; max-width: 100%; margin: 0; padding: 3px; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
  .stage[data-screen="backpack"] :is(.inventory-capacity, .inventory-notice) { display: none; }
  .stage[data-screen="backpack"] .inventory-filters { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; flex-wrap: nowrap; gap: 3px; margin: 0; }
  .stage[data-screen="backpack"] .inventory-filter { padding: 5px; }
  .stage[data-screen="backpack"] .inventory-grid { grid-column: 1; grid-row: 2; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; align-content: start; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); grid-auto-rows: minmax(88px, max-content); gap: 5px; }
  .stage[data-screen="backpack"] .selection-card { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; margin: 0; padding: 4px; align-content: start; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .stage[data-screen="backpack"] .selection-card strong { font-size: 12px; line-height: 1.3; }
  .stage[data-screen="backpack"] .selection-card :is(span,small) { font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
  .stage[data-screen="backpack"] .inventory-cell { min-height: 88px; padding: 6px; }
  .stage[data-screen="backpack"] .inventory-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 4px;
    align-content: center;
  }
  .stage[data-screen="backpack"] .inventory-art { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .stage[data-screen="backpack"] .inventory-item-icon { width: 28px; height: 28px; }
  .stage[data-screen="backpack"] .inventory-item strong { grid-column: 2; grid-row: 1; align-self: end; }
  .stage[data-screen="backpack"] .inventory-item small { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  .stage[data-screen="backpack"] .inventory-item em { grid-column: 1 / -1; grid-row: 3; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; justify-self: start; max-width: 100%; margin: 0; }
  .stage[data-screen="backpack"] .inventory-cell strong { font-size: 12px; line-height: 1.3; }
  .stage[data-screen="backpack"] .inventory-cell :is(small, em) { font-size: 11px; }
  .stage[data-screen="backpack"] .action-dock {
    left: 3%; right: 3%; bottom: 13%; max-width: none;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .stage[data-screen="robots"] .robot-panel {
    right: 3%; top: 17%; width: 44%; height: 70%; max-height: 70%;
  }
  .stage[data-screen="robots"] .robot-attributes { display: flex; flex-wrap: wrap; gap: 3px 8px; }
  .stage[data-screen="robots"] .robot-attribute { white-space: nowrap; gap: 3px; }
  .stage[data-screen="robots"] .robot-attribute-icon { width: 18px; height: 18px; }
  .stage[data-screen="robots"] .robot-upgrade { flex-basis: 100%; }
  .stage[data-screen="robots"] .robot-row.robot-manage { padding: 5px 4px; }
  .stage[data-screen="robots"] .robot-showcase { top: 18%; bottom: 37%; }
  .stage[data-screen="robots"] .action-dock {
    left: 3%; right: auto; bottom: 15%; width: 48%; max-width: 48%;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px;
  }
  .stage[data-screen="robots"] .action-button { padding-inline: 8px; }

  .stage[data-screen="commissions"] .commission-panel {
    right: 3%; top: 17%; width: 52%; height: 70%; max-height: 70%;
  }
  .stage[data-screen="commissions"] .commission-panel h2 { margin-bottom: 3px; }
  .stage[data-screen="commissions"] .commission-day { margin: 2px 0 4px; }
  .stage[data-screen="commissions"] .commission-row { padding: 4px 0; gap: 6px; }
  .stage[data-screen="commissions"] .commission-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1px 8px; }
  .stage[data-screen="commissions"] .commission-copy > b { grid-column: 1; font-size: 13px; }
  .stage[data-screen="commissions"] .commission-copy > small { grid-column: 1; }
  .stage[data-screen="commissions"] .commission-stamps { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .stage[data-screen="commissions"] .commission-stamp { width: 17px; height: 17px; }
  .stage[data-screen="commissions"] .action-dock {
    left: 3%; right: auto; bottom: 15%; width: 40%; max-width: 40%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  }

  .stage[data-screen="settings"] .settings-panel {
    right: 3%; top: 17%; width: 46%; height: 70%; max-height: 70%;
  }
  .stage[data-screen="settings"] .settings-row { padding: 9px 0; }
  .stage[data-screen="settings"] .settings-row small { font-size: 12px; line-height: 1.4; }
  .stage[data-screen="settings"] .action-dock {
    left: 3%; right: auto; bottom: 15%; width: 46%; max-width: 46%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  }
  .stage[data-screen="settings"] .action-button[data-action="home"] { grid-column: 1 / -1; }
}

/* Desktop inventory: the selected-item description is a separate fixed grid
   row, not a child of the scrollable item list. Short-landscape rules retained. */
@media (orientation: landscape) and (min-width: 1281px) and (min-height: 761px), (orientation: portrait) {
  .stage[data-screen="backpack"] .inventory-panel {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 8px;
    overflow: visible;
    background: none;
    border: solid transparent;
    border-width: 29.9px 20.8px;
    border-image-source: var(--ui-panel-readable);
    border-image-slice: 230 160 230 160 fill;
    border-image-width: 1;
    border-image-repeat: stretch;
    padding: 8px 12px;
  }
  .stage[data-screen="backpack"] .inventory-panel > h2 {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    margin: 0;
    max-width: 100%;
    font-size: 18px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .stage[data-screen="backpack"] .inventory-capacity { display: none; }
  .stage[data-screen="backpack"] .inventory-filters {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    flex-wrap: nowrap;
    margin: 0;
  }
  .stage[data-screen="backpack"] .inventory-notice {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    font-size: 12px;
  }
  .stage[data-screen="backpack"] .inventory-grid {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    min-height: 0;
    align-content: start;
    grid-auto-rows: minmax(128px, max-content);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 2px;
  }
  .stage[data-screen="backpack"] .inventory-cell { min-height: 128px; }
  .stage[data-screen="backpack"] .inventory-cell strong { font-size: 13px; line-height: 1.3; }
  .stage[data-screen="backpack"] .inventory-cell :is(small, em) { font-size: 12px; line-height: 1.3; }
  .stage[data-screen="backpack"] .inventory-empty {
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: start;
    z-index: 1;
  }
  .stage[data-screen="backpack"] .selection-card {
    grid-column: 1 / -1;
    grid-row: 4;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 8px;
    align-content: start;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    font-size: 14px;
  }
  .stage[data-screen="backpack"] .selection-card :is(span, small) {
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
}