/* Mobile-only compact cards. Desktop uses the stacked layout in main.css. */
@media (max-width: 980px) {
  .roster .unit-card--detailed {
    grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr);
    gap: 2px 3px;
    align-items: center;
  }
  .roster .unit-card--detailed .unit-card__identity-row,
  .roster .unit-card--detailed .unit-card__status-row,
  .roster .unit-card--detailed .unit-card__status-body { display: contents; }
  .roster .unit-card--detailed .unit-card__identity-row > strong {
    grid-column: 1 / 3; grid-row: 1; min-width: 0; white-space: nowrap;
  }
  .roster .unit-card--detailed .hp { grid-column: 3; grid-row: 1; margin: 0; width: 100%; }
  .roster .unit-card--detailed .unit-card__portrait { grid-column: 1; grid-row: 2 / 4; }
  .roster .unit-card--detailed .unit-card__identity-row > span { grid-column: 2; grid-row: 2; }
  .roster .unit-card--detailed .unit-card__identity-row > em { grid-column: 3; grid-row: 2; }
  .roster .unit-card--detailed .unit-card__identity-row > small { grid-column: 2 / 4; grid-row: 3; }
  .roster .unit-card--detailed:has(.unit-card__effects-button) .unit-card__identity-row > small {
    grid-column: 2;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .roster .unit-card--detailed .unit-card__effects-button {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
  }
  .roster .unit-card--detailed .chips { grid-column: 1 / 3; grid-row: 4; min-width: 0; }
  .roster .unit-card--detailed .unit-card__stats { grid-column: 3; grid-row: 4; min-width: 0; }
.roster .unit-card--detailed { display: grid; }
.roster .unit-card--detailed .unit-card__portrait { width: 18px; height: 18px; }
.roster .unit-card--detailed .unit-card__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roster .unit-card--detailed .chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
}