/* The card games as they are dealt (cards.js, blackjack.js, poker.js):
   linked only on the pages that show a card game. Every size is in em,
   so a table scales as one piece: full screen sets the felt's font size
   from the room it has (games.css's size container), and the whole
   table grows in its proportions. */

/* ---------- a playing card ---------- */
.card.pc, .card.pc.face, .card.pc.back { position: relative; display: inline-block; flex: none; width: 2.8em; height: 3.9em; border-radius: .3em; background: none; box-shadow: none; color: #16181d; font: 700 1em/1 var(--font-display); perspective: 40em; }
.pc .pc-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.pc.back .pc-in { transform: rotateY(180deg); }
.pc .pc-f, .pc .pc-b { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 .12em .35em rgba(0, 0, 0, .45); }
.pc .pc-f { background: linear-gradient(160deg, #fffdf8 0%, #f2ebdc 100%); border: 1px solid #d6ccb6; box-sizing: border-box; }
.pc.red .pc-f { color: #c0182b; }
.pc .pc-b { transform: rotateY(180deg); box-sizing: border-box; border: .17em solid #fbf7ee; background: var(--card-back); }
.pc .pc-k { position: absolute; display: flex; flex-direction: column; align-items: center; font-size: .62em; line-height: .95; letter-spacing: -.04em; }
.pc .pc-k i { font-style: normal; font-size: .95em; }
.pc .pc-k.tl { top: .3em; left: .32em; }
.pc .pc-k.br { bottom: .3em; right: .32em; transform: rotate(180deg); }
.pc .pc-pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5em; }
/* Court cards: the rank in a framed panel, as a face card's picture. */
.pc .pc-pip.court { inset: .55em .5em; font: 700 1.25em/1 Georgia, "Times New Roman", serif; border: .06em solid currentColor; border-radius: .12em; background: repeating-linear-gradient(135deg, rgba(212, 160, 60, .18) 0 .2em, transparent .2em .4em); }

/* ---------- chips ---------- */
.chip { --cc: #f4f1ea; --ce: #2457a6; display: block; width: 1.6em; height: 1.6em; border-radius: 50%; box-sizing: border-box;
  background: radial-gradient(circle, var(--cc) 0 44%, rgba(255, 255, 255, .85) 45% 50%, var(--cc) 51% 66%, transparent 67%), repeating-conic-gradient(var(--ce) 0 12deg, var(--cc) 12deg 45deg);
  box-shadow: 0 .13em 0 rgba(0, 0, 0, .45), inset 0 0 0 .06em rgba(0, 0, 0, .25); }
.chip.c1 { --cc: #f4f1ea; --ce: #2457a6; }
.chip.c5 { --cc: #c62e3a; --ce: #f6efe2; }
.chip.c25 { --cc: #1f8a4c; --ce: #f6efe2; }
.chip.c100 { --cc: #1d1d22; --ce: #e9e3d4; }
.chip.c500 { --cc: #6b3fa0; --ce: #f6efe2; }
.chip.c1000 { --cc: #e2b33c; --ce: #3b2a0c; }
.chip.c5000 { --cc: #e07a26; --ce: #2d1606; }
.chip.c25000 { --cc: #d65b9a; --ce: #f6efe2; }
.chip.c100000 { --cc: #2b8fd6; --ce: #f6efe2; }
.chip.c1000000 { --cc: #8a8f99; --ce: #f6efe2; }
.chipstack { display: inline-flex; flex-direction: column; align-items: center; gap: .2em; vertical-align: middle; }
/* A pile: the first chip at the bottom, each next one a little higher. */
.cs-pile { display: flex; flex-direction: column-reverse; align-items: center; }
.cs-pile .chip + .chip { margin-bottom: -1.34em; }
.cs-amt { font: 600 .72em/1.2 var(--font-ui); color: #fff; background: rgba(0, 0, 0, .62); padding: .1em .5em; border-radius: 1em; white-space: nowrap; }
.chipstack.won .cs-amt { background: #f2c14e; color: #1a1204; }

/* ---------- blackjack: a half-moon table ---------- */
.table-baize.bj-felt { display: flex; flex-direction: column; align-items: center; gap: .65em; padding: .8em 1.1em 1.1em; min-height: 0; font-size: 1rem; border-radius: 1.2em 1.2em 50% 50% / 1.2em 1.2em 7em 7em; text-align: center; }
.bj-top { position: relative; width: 100%; display: flex; justify-content: center; min-height: 2.6em; }
/* The dealer's chip rack: chips standing in their rows. */
.bj-rack { display: flex; gap: .18em; padding: .25em .35em; border-radius: .3em; background: linear-gradient(#24170b, #3d2a15); box-shadow: inset 0 .15em .3em rgba(0, 0, 0, .6); align-self: flex-start; }
.bj-col { display: flex; }
.bj-rack .chip { width: .3em; height: 1.35em; border-radius: .12em; background: linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 40%, rgba(255, 255, 255, .2) 60%, rgba(0, 0, 0, .25)), var(--cc); box-shadow: none; }
/* The shoe: the dealing box, its next card showing. */
.bj-shoe { position: absolute; right: .2em; top: 0; width: 3.1em; height: 2.4em; border-radius: .35em .35em .35em .9em; background: linear-gradient(160deg, #4a3520, #1f150b); box-shadow: 0 .2em .5em rgba(0, 0, 0, .5); transform: skewX(-10deg); }
.bj-shoe-card { position: absolute; left: .3em; right: .5em; bottom: .32em; height: 1em; border-radius: .15em; border: .1em solid #fbf7ee; background: var(--card-back); background-size: auto 85%, auto, auto, auto; }
.bj-dealer, .bj-spot { display: flex; flex-direction: column; align-items: center; gap: .35em; }
.bj-cards { display: flex; min-height: 3.9em; }
.bj-cards .pc + .pc { margin-left: -1.05em; }
.bj-dealer .bj-cards .pc + .pc { margin-left: -.7em; }
.bj-total { font: 600 .8em/1.3 var(--font-ui); color: #fff; background: rgba(0, 0, 0, .55); padding: .1em .65em; border-radius: 1em; white-space: nowrap; }
.bj-print { margin: 0; display: grid; gap: .1em; color: #f3d58a; font: 600 .72em/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.bj-print b { font: 700 1.25em/1.2 var(--font-display); letter-spacing: .04em; }
.bj-spots { display: flex; flex-wrap: wrap; justify-content: center; gap: .9em 1.4em; }
.bj-spot.on .pc-f { box-shadow: 0 0 0 .12em #fbbf24, 0 .12em .35em rgba(0, 0, 0, .45); }
.bj-circle { min-width: 4.4em; height: 4.4em; padding: 0 .55em; border-radius: 2.2em; border: .12em solid rgba(243, 213, 138, .55); display: flex; align-items: center; justify-content: center; gap: .1em; font-size: .9em; box-sizing: border-box; }
.bj-circle .cs-amt { font-size: .6em; }
.bj-spot.on .bj-circle { border-color: #fbbf24; }
.bj-call { font: 800 .85em/1.2 var(--font-ui); padding: .15em .7em; border-radius: 1em; text-transform: uppercase; letter-spacing: .05em; background: #e2e8f0; color: #0f172a; }
.bj-call.blackjack { background: #f2c14e; color: #1a1204; box-shadow: 0 0 1em rgba(242, 193, 78, .6); }
.bj-call.win { background: #34d399; color: #052e1c; }
.bj-call.lose, .bj-call.bust { background: #fca5a5; color: #3b0808; }
.bj-wait { margin: 1.5em 0; }
.bj-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6em 1.2em; }
.bj-cap { display: grid; justify-items: center; gap: .2em; }

/* ---------- poker: an oval table ---------- */
.table-baize.pk-felt { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; gap: .6em; padding: 1em 1.5em; min-height: 0; font-size: 1rem; text-align: center; }
.pk-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45em .8em; }
.pk-side .pk-bet { flex-basis: 100%; }
.pk-side.top .pk-bet { order: 3; }
.pk-side.bottom .pk-bet { order: -1; }
.pk-hole { display: flex; }
.pk-hole .pc + .pc { margin-left: -.55em; }
.pk-bet { display: flex; align-items: center; justify-content: center; gap: .6em; min-height: 2.4em; }
.pk-button { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #f8f6f0; color: #111; font: 800 .8em var(--font-ui); box-shadow: 0 .12em .3em rgba(0, 0, 0, .5), inset 0 0 0 .12em #d4cbb6; }
.pk-call { font: 800 .75em/1.2 var(--font-ui); padding: .15em .65em; border-radius: 1em; text-transform: uppercase; letter-spacing: .05em; }
.pk-call.allin { background: #fca5a5; color: #3b0808; }
.pk-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45em .7em; }
.pk-mid > .pk-pot, .pk-mid > .note { flex-basis: 100%; justify-content: center; }
.pk-board { display: flex; gap: .3em; }
.pk-slot { display: block; flex: none; width: 2.8em; height: 3.9em; border-radius: .28em; border: .08em dashed rgba(255, 255, 255, .25); box-sizing: border-box; }
.pk-deck { position: relative; width: 2.8em; height: 3.9em; flex: none; }
.pk-deck-card { position: absolute; inset: 0; border-radius: .28em; border: .17em solid #fbf7ee; background: var(--card-back); box-shadow: .1em .1em 0 #ddd6c6, .2em .2em 0 #fbf7ee, .3em .3em .35em rgba(0, 0, 0, .45); }
.pk-pot { display: flex; align-items: center; gap: .5em; min-height: 2em; }
.pk-pot-v { font: 700 1.15em var(--font-display); }
.pk-kuhn .pk-mid { min-height: 5em; }
.chipstack.gone { position: absolute; }
.pk-pot { position: relative; }
@media (max-width: 480px) {
  .table-baize.pk-felt, .table-baize.bj-felt { font-size: .82rem; padding: .7em .6em; }
  .pk-deck { display: none; }
}

/* ---------- full screen: the table as large as the room allows ---------- */
.panel.is-full .table-box > .table-baize.bj-felt, .panel.is-full .table-box > .table-baize.pk-felt { font-size: clamp(1rem, min(2.5cqw, 3.2cqh), 3rem); justify-content: space-evenly; }
.featured-table .table-baize.pk-felt { font-size: .9rem; }