/* Mother: portrait, identity/status, then each robot's three real attributes.
   Existing registered rig image is the only img inside each portrait button.
   The three symbols use the already approved PNGs, never stretched artwork. */
.stage[data-screen="robots"] .robot-portrait {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 6px; row-gap: 6px;
  min-width: 0; min-height: 0;
  padding: 10px;
}
.stage[data-screen="robots"] .robot-portrait > img {
  grid-column: 1 / -1; grid-row: 1;
  width: 100%; height: 100%; min-height: 0;
  object-fit: contain;
}
.stage[data-screen="robots"] .robot-portrait > strong {
  grid-column: 1; grid-row: 2; justify-self: start;
  min-width: 0; margin: 0; font-size: 17px; line-height: 1.35;
  text-align: left; overflow-wrap: anywhere;
  position: relative; z-index: 4; background: rgba(255,243,211,.96);
}
.stage[data-screen="robots"] .robot-portrait > .robot-state {
  grid-column: 2; grid-row: 2; justify-self: start;
  min-width: 0; margin: 0; padding: 4px 7px;
  font-size: 13px; line-height: 1.3; white-space: nowrap;
  position: relative; z-index: 4;
}
.robot-card-stats {
  grid-column: 1 / -1; grid-row: 3;
  display: grid; gap: 5px; min-width: 0; width: 100%;
  padding-top: 5px; border-top: 1px dashed rgba(16,61,76,.5);
  /* Information is foreground UI; the maintenance arm stays above artwork
     but below these labels, including when parked across the card footer. */
  position: relative; z-index: 4; background: rgba(255,243,211,.96);
}
.robot-card-stat {
  display: grid; grid-template-columns: 22px auto minmax(0,1fr);
  align-items: center; gap: 6px; min-width: 0;
  font-size: 15px; line-height: 1.35; text-align: left;
}
.robot-card-stat-icon { display: block; width: 22px; height: 22px; background: center / contain no-repeat; }
.robot-card-stat-icon[data-symbol="speed"] { background-image: url("../assets/symbols/s030-speed-attribute-v1.png"); }
.robot-card-stat-icon[data-symbol="luck"] { background-image: url("../assets/symbols/s031-luck-attribute-v1.png"); }
.robot-card-stat-icon[data-symbol="carry"] { background-image: url("../assets/symbols/s032-load-attribute-v1.png"); }
.robot-card-stat-label { font-weight: 800; }
.robot-card-stat b {
  min-width: 0; margin: 0; padding: 2px 6px;
  background: rgba(16,61,76,.12); text-align: right;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
@media (orientation: landscape) and (min-width: 640px) and (max-height: 760px),
       (orientation: landscape) and (min-width: 640px) and (max-width: 1000px) {
  .stage[data-screen="robots"] .robot-showcase { top: 18%; bottom: 30%; }
  .stage[data-screen="robots"] .robot-portrait { padding: 4px; column-gap: 3px; row-gap: 3px; }
  .stage[data-screen="robots"] .robot-portrait > strong { font-size: 13px; }
  .stage[data-screen="robots"] .robot-portrait > .robot-state { font-size: 12px; padding: 3px 4px; }
  .robot-card-stats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding-top: 3px; }
  .robot-card-stat { grid-template-columns: 14px minmax(0,1fr); gap: 2px 3px; font-size: 12px; line-height: 1.25; }
  .robot-card-stat-icon { width: 14px; height: 14px; }
  .robot-card-stat b { grid-column: 1 / -1; padding: 1px 3px; text-align: center; }
}

/* Short landscape: allocate a real portrait region instead of letting the
   three-column attribute footer consume its height. Keep the registered img
   anchor for the rig/maintenance renderer; only redundant symbols are hidden.
   Extreme imported numbers remain readable in the scrollable stat region. */
@media (orientation: landscape) and (min-width: 640px) and (max-width: 1000px) and (max-height: 560px) {
  .stage[data-screen="robots"] .robot-portrait {
    grid-template-columns: minmax(0, 1fr) 60px;
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 3px;
  }
  .stage[data-screen="robots"] .robot-portrait > img {
    grid-column: 1; grid-row: 1;
    min-width: 0;
  }
  .stage[data-screen="robots"] .robot-portrait > strong { grid-column: 1; grid-row: 2; }
  .stage[data-screen="robots"] .robot-portrait > .robot-state { grid-column: 2; grid-row: 2; }
  .stage[data-screen="robots"] .robot-card-stats {
    grid-column: 2; grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    align-self: stretch; align-content: safe center;
    gap: 3px; min-height: 0; overflow: auto;
    padding-top: 0; border-top: 0;
    scrollbar-width: thin;
  }
  .stage[data-screen="robots"] .robot-card-stat {
    grid-template-columns: 24px max-content;
    gap: 3px;
  }
  .stage[data-screen="robots"] .robot-card-stat-icon { display: none; }
  .stage[data-screen="robots"] .robot-card-stat b {
    grid-column: 2; min-width: 33px; padding: 1px 2px; text-align: right;
    white-space: nowrap; overflow-wrap: normal;
  }
}