/* V57: centre the status stack and keep guest faces below it. */

@media (min-width: 721px) and (min-height: 500px) {
  .game-shell.phase-playing .hud,
  .game-shell.phase-training .hud {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }

  .game-shell.phase-playing .top-actions,
  .game-shell.phase-training .top-actions {
    position: relative;
    z-index: 2;
  }

  .game-shell.phase-playing .shift-brief,
  .game-shell.phase-training .shift-brief {
    height: 35px;
    min-height: 35px;
    padding: 4px 32px 5px;
    grid-template-columns: 40px minmax(0, 1fr) 32px;
    grid-template-rows: 20px 3px;
    gap: 1px 6px;
  }

  .game-shell.phase-playing .hud-subline .shift-act,
  .game-shell.phase-training .hud-subline .shift-act {
    padding: 0;
    font-size: 8px;
  }

  .game-shell.phase-playing .hud-subline .shift-copy strong,
  .game-shell.phase-training .hud-subline .shift-copy strong {
    font-size: 10px;
  }

  .game-shell.phase-playing .hud-subline .shift-copy > span:not(.stage-reward),
  .game-shell.phase-training .hud-subline .shift-copy > span:not(.stage-reward) {
    font-size: 8px;
  }

  .game-shell.phase-playing .contract-chip,
  .game-shell.phase-training .contract-chip {
    bottom: 20px;
    opacity: .96;
    filter: brightness(1.06) saturate(.94) drop-shadow(0 3px 4px rgb(10 7 12 / 34%));
  }

  .purchase-dock .supply-tools {
    opacity: .78;
  }

  .purchase-dock .supply-tools:hover,
  .purchase-dock .supply-tools:focus-within {
    opacity: 1;
  }
}

/* Keep the centred instrument clear of the 154px action rail on narrow
   desktop/tablet canvases. Its source art keeps the original aspect ratio;
   only the type and inner safe area scale with it. */
@media (min-width: 721px) and (max-width: 833px) and (min-height: 500px) {
  .game-shell.phase-playing .hud,
  .game-shell.phase-training .hud {
    width: min(459px, calc(100% - 308px));
    height: auto;
    min-height: 0;
    aspect-ratio: 1960 / 222;
    padding: 3px 32px;
  }

  .game-shell.phase-playing .hud .pill,
  .game-shell.phase-training .hud .pill {
    height: auto;
    min-height: 0;
    padding: 3px 2px 2px;
    font-size: 13px;
  }

  .game-shell.phase-playing .hud .pill::before,
  .game-shell.phase-training .hud .pill::before {
    font-size: 8px;
  }

  .game-shell.phase-playing .hud .pill b,
  .game-shell.phase-training .hud .pill b {
    font-size: 13px;
  }
}

@media (min-width: 721px) and (min-height: 500px) and (max-aspect-ratio: 3 / 2) {
  .game-shell.phase-playing .shop .customer:not(.preview) .alien-wrap,
  .game-shell.phase-training .shop .customer:not(.preview) .alien-wrap {
    top: 62px;
    right: 0;
    bottom: -56px;
    left: 0;
    width: 100%;
    height: auto;
    align-items: flex-end;
    justify-content: center;
  }

  .game-shell.phase-playing .shop .customer:not(.preview) .alien-figure,
  .game-shell.phase-playing .shop .customer:not(.preview) .alien-art,
  .game-shell.phase-training .shop .customer:not(.preview) .alien-figure,
  .game-shell.phase-training .shop .customer:not(.preview) .alien-art {
    width: 334px;
    height: 334px;
    max-width: none;
    max-height: none;
  }

  .game-shell.phase-playing .merge-panel,
  .game-shell.phase-training .merge-panel {
    grid-template-columns: 164px minmax(0, 360px) 164px;
  }

  .merge-panel .purchase-dock,
  .merge-panel .mutation-dock,
  .merge-panel .mutation-bar {
    width: 164px;
  }

  .purchase-dock .buy-btn {
    width: 164px;
  }
}

@media (min-width: 721px) and (max-width: 780px) and (min-height: 500px) and (max-aspect-ratio: 3 / 2) {
  .game-shell.phase-playing .merge-panel,
  .game-shell.phase-training .merge-panel {
    grid-template-columns: 144px minmax(0, 320px) 144px;
  }

  .merge-panel .purchase-dock,
  .merge-panel .mutation-dock,
  .merge-panel .mutation-bar,
  .purchase-dock .buy-btn {
    width: 144px;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .game-shell.phase-playing .shift-brief,
  .game-shell.phase-training .shift-brief {
    height: 29px;
    min-height: 29px;
    padding: 3px 24px 4px;
    grid-template-rows: 17px 3px;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  .game-shell.phase-playing .shift-brief,
  .game-shell.phase-training .shift-brief {
    height: 29px;
    min-height: 29px;
    padding: 3px 24px 4px;
    grid-template-rows: 17px 3px;
  }
}