/* The how-to-play pages: drawn cards, and the bet and edge tables. */
.cards-row { display: flex; gap: 22px; margin-top: 20px; }
.cards-row figure { margin: 0; display: grid; justify-items: center; gap: 8px; }
.cards-row figcaption { font: 650 14px/1 var(--sans); color: var(--brass-lt); }
.c { width: 44px; height: 62px; border-radius: 6px; background: #fbf7ef; color: #1b1814; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 700 19px/1 var(--sans); letter-spacing: -.03em; box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .3); border: 1px solid rgba(0, 0, 0, .12); }
.c i { font-style: normal; font-size: 19px; margin-top: 3px; font-family: "Apple Symbols", "Segoe UI Symbol", var(--sans); }
.c.r { color: #b3262e; }
@media (min-width: 700px) { .c { width: 50px; height: 70px; font-size: 21px; } .c i { font-size: 21px; } }

table.counts { border-collapse: collapse; width: 100%; font: 400 15px/1.3 var(--sans); font-variant-numeric: tabular-nums; margin-top: 8px; }
table.counts th, table.counts td { padding: 11px 8px; border-top: 1px solid var(--hair); text-align: right; vertical-align: top; }
table.counts thead th { font: 600 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); border-top: 0; vertical-align: bottom; }
table.counts tbody th, table.counts thead th:first-child { text-align: left; color: var(--cream); padding-left: 0; }
table.counts tbody th { font-weight: 650; }
table.counts td { color: var(--soft); white-space: nowrap; }
table.counts.bets tbody th span { display: block; margin-top: 3px; font-weight: 400; font-size: 14px; color: var(--muted); }
table.counts.bets td:nth-child(2) { color: var(--cream); font-weight: 650; }
table.plain.bustcol { max-width: 22rem; margin-top: 22px; font-variant-numeric: tabular-nums; }
table.plain.bustcol tbody th { width: auto; }
table.plain.bustcol td, table.plain.bustcol thead th:last-child { text-align: right; padding-right: 0; }
table.plain.bustcol td { color: var(--cream); }
@media (max-width: 520px) {
  table.counts { font-size: 14px; }
  table.counts th, table.counts td { padding: 10px 4px; }
  table.counts thead th { font-size: 10.5px; letter-spacing: .06em; }
  table.counts.bets tbody th span { font-size: 13px; }
}
