/* ---- fixed card sizes: sm 128x128, md 150x216, lg 216 wide. Sprites stay at 2px per dot in every size. ---- */
.card {
  width: 150px;
  max-width: 100%;
  flex: none;
}
.card.md {
  height: 216px;
}
.card.sm {
  width: 128px;
  height: 128px;
}
.card.lg {
  width: 216px;
  height: auto;
  min-height: 272px;
}
.card.lg .art {
  height: 104px;
}
.card.lg .art img {
  margin-bottom: 6px;
}
.card.lg .nm {
  padding: 8px 8px 4px;
}
.card.lg .stats {
  padding: 8px 8px 4px;
  gap: 4px 10px;
  min-height: 44px;
}
.card.lg .sig {
  white-space: normal;
  line-height: 16px;
  max-height: 32px;
  padding: 2px 8px 4px;
}
.card.lg .xtra {
  font-family: var(--f-cond);
  font-size: 16px;
  line-height: 16px;
  color: var(--gold);
  padding: 0 8px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card.lg .lvlbar {
  margin: 4px 8px 8px;
}
.card.lg .tag {
  bottom: 8px;
  left: 6px;
}
.card.lg .al {
  bottom: 8px;
  right: 8px;
}
.card.support.lg .art img {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
}
.slot {
  width: 150px;
  height: 216px;
  min-height: 0;
}
.slots .slot.filled {
  height: 216px;
}
.vs .side .cards {
  justify-content: center;
}
/* four-digit stats never wrap: tighter stat cells on small cards */
.card .stats span {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.card .stats b {
  font-variant-numeric: tabular-nums;
}
.card.sm .stats {
  padding: 4px 3px 2px;
  gap: 2px 2px;
}
.card.sm .stats span {
  gap: 2px;
}
.card.sm .stats i {
  width: 8px;
  height: 8px;
}
.card.md .stats {
  gap: 2px 4px;
}