#characters.shop-screen {
  width: min(100%, 1180px);
  max-width: 1180px;
}

#characterCatalog.character-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 9px;
}

#characterCatalog .character-card {
  min-width: 0;
  padding: 9px;
}

#characterCatalog .character-portrait {
  height: 82px;
  aspect-ratio: auto;
  border-radius: 7px;
}

#characterCatalog .character-portrait img {
  width: 82px !important;
  height: 82px !important;
  max-width: 100%;
  object-fit: contain !important;
  justify-self: center;
}

#characterCatalog .character-portrait .alien-art {
  font-size: 54px;
}

#characterCatalog .character-card h3 {
  margin: 5px 0 2px;
  font-size: 16px;
}

#characterCatalog .character-card p {
  min-height: 0;
  line-height: 1.4;
}

#characterCatalog .stat-bars {
  gap: 5px;
  margin: 8px 0;
}

#characterCatalog .stat-bar-row {
  grid-template-columns: 48px minmax(0, 1fr) 22px;
  gap: 5px;
  font-size: 8px;
}

#characterCatalog .stat-bar {
  height: 5px;
}

#characterCatalog .character-cost {
  margin: 5px 0;
}

#characterCatalog .character-card .primary,
#characterCatalog .character-card .secondary {
  min-height: 31px;
}

@media (max-width: 560px) {
  #characterCatalog.character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  #characterCatalog.character-grid {
    grid-template-columns: 1fr;
  }
}

#characterCatalog .character-card.under-construction { opacity: .68; border-style: dashed; border-color: #705c39; }
#characterCatalog .character-status.construction { border-color: #705c39; color: #ffd184; background: #342b1d; }
#characterCatalog .character-card.under-construction .character-portrait { filter: saturate(.7); }