/* Approved panel/button PNG bytes are retained. The current inventory entity
   owns the hero; a transient combine result owns only its labelled preview. */
.stage[data-screen="backpack"] .backpack-detail-panel {
  position: absolute;
  left: 2.7%; top: 13.5%; bottom: auto;
  width: 51%; max-width: 51%; height: 70%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 8px 12px;
  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;
}
.backpack-detail-panel > h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.backpack-detail-body {
  min-width: 0; min-height: 0;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: grid; align-content: start; gap: 12px;
  padding: 2px 4px 5px;
}
.backpack-focus {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.backpack-focus-art { min-width: 0; display: grid; place-items: center; }
.backpack-focus-icon { display: block; width: min(100%, 196px); height: auto; aspect-ratio: 1; object-fit: contain; }
.backpack-focus-copy { min-width: 0; display: grid; gap: 8px; overflow-wrap: anywhere; }
.backpack-focus-copy > h3 { margin: 0; font-size: 23px; line-height: 1.25; }
.backpack-rarity { font-size: 13px; font-weight: 900; color: #155665; }
.backpack-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.backpack-facts dt { font-size: 12px; }
.backpack-facts dd { margin: 2px 0 0; font-size: 22px; font-weight: 900; line-height: 1.2; }
.backpack-facts dd small { font-size: 12px; }
.backpack-focus-status, .backpack-focus-kept { font-size: 12px; line-height: 1.4; font-weight: 800; }
.backpack-focus-kept { display: flex; align-items: center; gap: 3px; }
.backpack-focus-empty { min-height: 120px; display: grid; align-content: center; gap: 8px; }
.backpack-focus-empty > strong { font-size: 18px; }
.backpack-focus-empty > p, .backpack-focus-empty > small { margin: 0; font-size: 13px; line-height: 1.5; }
.backpack-growth-preview { border-top: 1px solid rgba(16, 61, 76, .3); padding-top: 8px; }
.backpack-growth-preview > h3 { margin: 0; font-size: 14px; line-height: 1.3; }
.backpack-growth-preview > h3 > small { margin-left: 8px; font-size: 12px; font-weight: 500; }
.backpack-growth-preview .growth-component { max-width: 340px; margin: 0 auto; }
.backpack-growth-preview .growth-heading { font-size: 12px !important; margin: 4px 0 0 !important; }
.backpack-growth-preview .growth-track { margin: 0 auto 18px; }
.backpack-growth-preview .growth-label { font-size: 12px !important; }

/* Disabled is a state, not a transparent hole in the scene. Keep its source
   material and independent label legible; text states the actual blocker. */
.stage[data-screen="backpack"] .action-button:disabled {
  opacity: 1;
  filter: grayscale(.85) saturate(.35);
  color: #103d4c;
  text-shadow: 0 1px 0 #fff3d3;
}
.stage[data-screen="backpack"] .action-button:disabled > .action-symbol { opacity: .7; }
.stage[data-screen="backpack"] .action-button:disabled > span {
  background: #fff3d3;
  border-radius: 3px;
  padding: 2px 4px;
}
@media (orientation: landscape) and (min-width: 1281px) and (min-height: 761px) and (max-height: 850px) {
  .backpack-focus-icon { width: min(100%, 160px); }
  .backpack-growth-preview .growth-component { max-width: 300px; }
}
@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"] .backpack-detail-panel {
    left: 3%; top: 17%; width: 46%; max-width: 46%; height: 59%;
    border-width: 17.25px 12px;
    padding: 4px 8px; gap: 5px;
  }
  .backpack-detail-panel > h2 { font-size: 14px; line-height: 1.25; }
  .backpack-detail-body { padding: 1px 2px 4px; gap: 8px; }
  .backpack-focus { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 8px; }
  .backpack-focus-icon { width: min(100%, 112px); }
  .backpack-focus-copy { gap: 4px; }
  .backpack-focus-copy > h3 { font-size: 16px; }
  .backpack-rarity, .backpack-facts dt, .backpack-facts dd small,
  .backpack-focus-status, .backpack-focus-kept { font-size: 11px; line-height: 1.3; }
  .backpack-facts { gap: 4px 12px; }
  .backpack-facts dd { margin-top: 0; font-size: 16px; }
  .backpack-growth-preview { padding-top: 5px; }
  .backpack-growth-preview > h3, .backpack-growth-preview > h3 > small { font-size: 11px; }
  .backpack-growth-preview .growth-component { max-width: 220px; }
  .backpack-growth-preview .growth-heading, .backpack-growth-preview .growth-label { font-size: 11px !important; }
  .backpack-focus-empty { min-height: 80px; }
  .backpack-focus-empty > strong { font-size: 15px; }
  .backpack-focus-empty > p, .backpack-focus-empty > small { font-size: 12px; }
}