/* Portrait is a full landscape overview, not a second ergonomic touch layout.
   Keep typography, artwork and native DOM hit regions in one source stage. */
:root[data-backpack-preview] { font-size: 16px; }
html[data-backpack-preview] .app-shell {
  position: fixed;
  left: var(--backpack-preview-left);
  top: var(--backpack-preview-top);
  width: var(--backpack-preview-width);
  height: calc(var(--backpack-preview-height) + 54px);
  max-width: none;
  overflow: visible;
}
html[data-backpack-preview] .stage[data-screen="backpack"] {
  width: 1428px;
  height: 803.6770334928229px;
  aspect-ratio: 1672 / 941;
  min-width: 0;
  transform-origin: top left;
  transform: scale(var(--backpack-preview-scale));
}
html[data-backpack-preview] .status-rail {
  position: absolute;
  top: calc(var(--backpack-preview-height) + 6px);
  left: 0; width: 100%; height: 48px; margin: 0;
}
/* These two original rules used viewport units even inside the source stage. */
html[data-backpack-preview] .stage[data-screen="backpack"] .nav-hit { font-size: 15.68px; }
html[data-backpack-preview] .stage[data-screen="backpack"] .action-button { font-size: 16px; }
.stage[data-screen="backpack"] :is(.backpack-detail-body, .inventory-grid):focus-visible {
  outline: 2px solid var(--yellow); outline-offset: -2px;
}

/* Empty guidance has its own row; it must not print over neutral slot labels. */
@media (orientation: landscape) and (min-width: 1281px) and (min-height: 761px), (orientation: portrait) {
  .stage[data-screen="backpack"] .inventory-panel:has(> .inventory-empty) {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }
  .stage[data-screen="backpack"] .inventory-panel > .inventory-empty {
    grid-column: 1 / -1; grid-row: 3;
    align-self: stretch; margin: 0; font-size: 14px;
  }
  .stage[data-screen="backpack"] .inventory-panel > .inventory-empty small { font-size: 12px; }
  .stage[data-screen="backpack"] .inventory-panel:has(> .inventory-empty) > .inventory-grid { grid-row: 4; }
  .stage[data-screen="backpack"] .inventory-panel:has(> .inventory-empty) > .selection-card { grid-row: 5; }
}
@media (orientation: landscape) and (min-width: 640px) and (max-height: 760px),
       (orientation: landscape) and (min-width: 640px) and (max-width: 1280px) {
  .stage[data-screen="backpack"] .inventory-panel > .inventory-empty {
    grid-column: 1; grid-row: 2; min-width: 0; min-height: 0;
    align-self: stretch; align-content: start; margin: 0; padding: 4px;
    font-size: 12px; overflow: auto; overscroll-behavior: contain;
  }
  .stage[data-screen="backpack"] .inventory-panel > .inventory-empty small { font-size: 11px; }
  /* This condition exists only when the domain reports zero total items. */
  .stage[data-screen="backpack"] .inventory-panel:has(> .inventory-empty) > .inventory-grid { visibility: hidden; }
}

/* r132: the compact list owns the full right panel. The same selected-item
   hints remain in the left detail scroller, not a second narrow right column.
   1402x1122 panel corners retain one source scale (.025). */
.backpack-selection { display: none; }
@media (orientation: landscape) and (min-width: 640px) and (max-width: 900px) and (max-height: 560px) {
  .stage[data-screen="backpack"] .screen-runtime > .inventory-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 44px minmax(0, 1fr);
    gap: 4px 6px;
    border-width: 5.75px 4px;
    padding: 2px 6px;
  }
  .stage[data-screen="backpack"] .inventory-panel > h2 {
    font-size: 12px; padding: 0; line-height: 1.3;
  }
  .stage[data-screen="backpack"] .inventory-panel > .inventory-grid {
    grid-column: 1 / -1; grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(56px, max-content);
    min-width: 0; padding: 2px;
    overflow-x: hidden; overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .stage[data-screen="backpack"] .inventory-panel > .selection-card { display: none; }
  .stage[data-screen="backpack"] .inventory-panel > .inventory-empty { grid-column: 1 / -1; }
  .stage[data-screen="backpack"] .inventory-cell {
    min-height: 56px; padding: 5px;
    grid-template-columns: 24px minmax(0, 1fr); gap: 2px 4px;
  }
  .stage[data-screen="backpack"] .inventory-item-icon { width: 24px; height: 24px; }
  .stage[data-screen="backpack"] .inventory-cell strong { font-size: 12px; line-height: 1.25; }
  .stage[data-screen="backpack"] .inventory-cell small { font-size: 11px; }
  .backpack-selection { display: block; min-width: 0; }
  .backpack-selection > .selection-card {
    display: grid; grid-column: auto; grid-row: auto;
    max-height: none; overflow: visible; padding: 6px; gap: 4px;
  }
}