/* Layout fixes on top of the recovered client CSS: some art was never archived and its stand-ins have other sizes. */

/* Ship art keeps its proportions inside the card / modal instead of spilling out. */
.card__image img, .ship__image img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Refuel / Buy new ship / Rewards of sold ships: same size icons, label under the icon. */
.main__title__right { align-items: flex-start; gap: 14px; }
.main__title__right button { width: 96px; padding: 0; flex-direction: column; justify-content: flex-start; }
.main__title__right button > img { width: auto; height: 80px; max-width: 96px; object-fit: contain; }
.main__title__right button > p { order: 2; position: static; margin-top: 6px; font-size: 14px; line-height: 1.15; }

/* "buy (100,000 $cship)" is longer than the original "buy (500 $cship)": keep it on one line. */
.buy-ship__button__text { white-space: nowrap; font-size: clamp(20px, 3.2vw, 40px); }
.ship__button__fee { white-space: nowrap; }

/* Unopened boxes: the original art is 138px; 200px blew it up. Same size for every box type. */
.box img { width: 150px; height: 150px; object-fit: contain; }

/* Reward history (trophy button): rows had a fixed 30px height, so "QUICK TRAINING" and the total wrapped over
   the next row. One line per row, wider ACTIVITY column, columns share the full width. */
.claim-reward__board__header, .claim-reward__board__content, .claim-reward__board__footer {
  width: 100%; height: auto; min-height: 30px; align-items: center;
}
.claim-reward__board__header div, .claim-reward__board__content div, .claim-reward__board__footer div {
  width: auto; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.claim-reward__board__header div:first-child, .claim-reward__board__content div:first-child,
.claim-reward__board__footer div:first-child { flex-grow: 1.7; }
.claim-reward__board__footer div { overflow: visible; font-size: 0.8em; }