/* Preserve the complete registered square artwork, with one compact footer
   instead of two footer rows consuming the short landscape portrait. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 760px),
       (orientation: landscape) and (min-width: 640px) and (max-width: 1280px) {
  .stage[data-screen="robots"] .robot-showcase { bottom: 32%; }
  .stage[data-screen="robots"] .robot-portrait {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 4px;
    row-gap: 3px;
    padding: 4px;
    min-height: 0;
  }
  .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;
    margin: 0; min-width: 0;
    font-size: 13px; line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .stage[data-screen="robots"] .robot-portrait .robot-state {
    grid-column: 2; grid-row: 2;
    justify-self: start;
    margin: 0; padding: 3px 7px;
    min-width: 0;
    font-size: 12px; line-height: 1.25;
    white-space: nowrap;
  }
}