.playing-card-compact {
  --playing-card-compact-height: 32px;
  --playing-card-compact-black: #172028;
  --playing-card-compact-red: #b4232d;
  display: block;
  color: var(--playing-card-compact-black);
}

.playing-card-compact-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap:
    max(2px, calc(var(--playing-card-compact-height) * 0.08))
    max(2px, calc(var(--playing-card-compact-height) * 0.1));
  margin: 0;
  padding: 0;
  list-style: none;
}

.playing-card-compact-card {
  display: inline-flex;
  box-sizing: border-box;
  height: var(--playing-card-compact-height);
  min-width: calc(var(--playing-card-compact-height) * 0.68);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  flex: 0 0 auto;
  border: 0;
  border-radius: 10%;
  background: #fff;
  color: currentColor;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(var(--playing-card-compact-height) * 0.4);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  padding-block: calc(var(--playing-card-compact-height) * 0.08);
  padding-inline: calc(var(--playing-card-compact-height) * 0.08);
  white-space: nowrap;
}

.playing-card-compact-card.is-red {
  color: var(--playing-card-compact-red);
}

.playing-card-compact-card.is-black {
  color: var(--playing-card-compact-black);
}

.playing-card-compact-card.is-highlighted {
  background: #fff2a8;
}

.playing-card-compact-rank,
.playing-card-compact-suit {
  display: block;
  line-height: inherit;
  transform: translateY(calc(var(--playing-card-compact-height) * 0.07));
}

.playing-card-compact-suit {
  font-size: 1.4em;
}