/* Playing cards, built by cards.js. A card is as wide as --card-w (or whatever its CSS says) and everything on it scales with that.
   .pc is the card's place on the page, .pc-body is the card itself (it is what flips), and inside it are the back and, once the card has been turned up, the front. */
.pc { flex: none; position: relative; width: var(--card-w, 120px); aspect-ratio: 5 / 7; container-type: inline-size; }
.pc-body { position: absolute; inset: 0; border-radius: 7px; border-radius: 6.2cqw; box-shadow: 0 .6cqw 1.4cqw rgba(6, 3, 28, .32), 0 4cqw 9cqw -2.5cqw rgba(6, 3, 28, .55); }
.pc-front, .pc-back { position: absolute; inset: 0; border-radius: inherit; }
.pc-front { background: linear-gradient(158deg, #fffdf7 0%, #fbf6ea 45%, #f3ebdb 100%); box-shadow: inset 0 0 0 max(.5px, .35cqw) rgba(40, 28, 90, .16); }
.pc-back { background: #251b7c var(--pc-back-art, linear-gradient(160deg, #4c38d4, #1a1257)) center / 100% 100% no-repeat; box-shadow: inset 0 0 0 max(.5px, .35cqw) rgba(40, 28, 90, .22); }
.pc.pc-down .pc-front, .pc:not(.pc-down) .pc-back { visibility: hidden; }
.pc-art { display: block; width: 100%; height: 100%; }
/* On a small card the corners grow and the picture gives them room, so the rank and suit still read at a glance. */
.pc-corner { transform-origin: 9px 12px; }
.pc-main { transform-origin: 125px 175px; }
@container (max-width: 96px) {
  .pc-corner { transform: scale(1.25); }
  .pc-main { transform: scale(.86); }
  .pc-frame { display: none; }
}
.pc-mini .pc-body { border-radius: 5px; border-radius: 9cqw; }
.pc-sheet { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The suit symbol for use in a line of text. Spades and clubs take the colour of the text around them. */
.suit-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; line-height: 1; }
.suit-icon svg { display: block; width: 100%; height: 100%; }
.suit-icon.suit-H, .suit-icon.suit-D { color: var(--red); }

/* A fanned hand (fanEl) and a draw pile (stackEl). */
.pc-fan { display: flex; justify-content: center; padding: calc(var(--card-w, 120px) * .12) calc(var(--card-w, 120px) * .5) 0; }
.pc-fan > .pc { margin: 0 calc(var(--card-w, 120px) * -.29); transform-origin: 50% 220%; transform: rotate(calc(var(--pc-fan-at, 0) * var(--pc-fan-turn, 7deg))); }
.pc-stack[data-height="1"] .pc-body { box-shadow: 0 .8cqw 0 #d9cfba, 0 1.6cqw 0 #f6efe0, 0 2.2cqw 2cqw rgba(6, 3, 28, .4), 0 6cqw 10cqw -2.5cqw rgba(6, 3, 28, .55); }
.pc-stack[data-height="2"] .pc-body { box-shadow: 0 .8cqw 0 #d9cfba, 0 1.6cqw 0 #f6efe0, 0 2.4cqw 0 #d9cfba, 0 3.2cqw 0 #f6efe0, 0 3.8cqw 2cqw rgba(6, 3, 28, .4), 0 8cqw 11cqw -2.5cqw rgba(6, 3, 28, .55); }
.pc-stack[data-height="3"] .pc-body { box-shadow: 0 .8cqw 0 #d9cfba, 0 1.6cqw 0 #f6efe0, 0 2.4cqw 0 #d9cfba, 0 3.2cqw 0 #f6efe0, 0 4cqw 0 #d9cfba, 0 4.8cqw 0 #f6efe0, 0 5.4cqw 2cqw rgba(6, 3, 28, .4), 0 10cqw 12cqw -2.5cqw rgba(6, 3, 28, .55); }