/* Blackjack's own look on the game template (static/game.css styles the shell and the .gm-cell primitive), in the Inlay
   language: a flat stage, the dealer's hand over one gold arc, your hands under it, ivory cards with a gold inner line
   (a navy back with the gold diamond face down), totals in cut hairline plates, and the bets as cells on the table
   (Perfect Pairs, the hand, 21+3) with a real chip once bet. */

.bj-stage { --cw: 100px; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 46px minmax(0, 1fr) auto; align-items: center; justify-items: center; row-gap: 6px;
  padding: 22px 16px 16px; }
.bj-dl, .bj-hand { display: flex; align-items: center; gap: 14px; min-height: calc(var(--cw) * 1.4); }
.bj-cards { display: flex; }
.bj-arc { width: min(78%, 560px); height: 46px; overflow: visible; }
.bj-arc path { fill: none; stroke: var(--gold-line); stroke-width: 1.25; opacity: .55; vector-effect: non-scaling-stroke; }

/* the cards: ivory with a gold inner line; face down a navy back with the gold diamond */
.bj-card { width: var(--cw); height: calc(var(--cw) * 1.4); flex: none; position: relative; margin-left: calc(var(--cw) * -.34);
  border-radius: 7px; background: var(--ivory); color: #0c152b; font-family: var(--f-num);
  box-shadow: 0 8px 16px rgb(0 0 0 / .38), 0 1px 0 rgb(255 255 255 / .6) inset; transition: filter .3s var(--e-out); }
.bj-card:first-child { margin-left: 0; }
.bj-card::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgb(216 165 72 / .6); border-radius: 4px; pointer-events: none; }
.bj-card .r { position: absolute; left: 8px; top: 6px; font-weight: 800; font-size: calc(var(--cw) * .3); line-height: 1; }
.bj-card .r2 { left: auto; top: auto; right: 8px; bottom: 6px; transform: rotate(180deg); }
.bj-card .s { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .46); font-family: var(--f-ui); }
.bj-card.red { color: #c4313f; }
.bj-card.down { background: var(--cell); }
.bj-card.down > * { display: none; }
.bj-card.down::after { border-color: var(--gold-line); }
.bj-card.down::before { content: ""; position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; border: 1px solid var(--gold-line);
  transform: translate(-50%, -50%) rotate(45deg); }
.bj-card.in { animation: bj-deal .26s var(--e-out) both; }
.gm.gm-fast .bj-card.in { animation-duration: .09s; }
@keyframes bj-deal { from { transform: translate(180px, -140px) rotate(12deg); opacity: 0; } }

/* a hairline plate (the totals, Split): the board's .ln */
.bj-ln { --k: 6px; --fill: var(--cell); --lnc: var(--fill); position: relative; isolation: isolate; border: 0; background: var(--lnc);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  transition: background-color var(--t-hover) var(--e-out), transform var(--t-press) var(--e-out); }
.bj-ln::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill); transition: background-color var(--t-hover);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px)); }
.bj-tot { --k: 5px; min-width: 40px; height: 30px; padding: 0 9px; display: grid; place-items: center; flex: none; color: var(--ink);
  font: 800 18px/1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bj-tot:empty { visibility: hidden; }
.bj-tot.is-win { --lnc: var(--win); color: var(--win); } .bj-tot.is-loss { --lnc: var(--loss); color: var(--loss); }
.bj-tot.is-back { --lnc: var(--back); color: var(--back); }

/* your hands: one beside its total; split hands side by side, each over its total, the one in play lit */
.bj-hands { display: flex; justify-content: center; align-items: center; gap: 26px; max-width: 100%; min-height: calc(var(--cw) * 1.4); }
.bj-hand { position: relative; }
.bj-meta { display: flex; align-items: center; gap: 8px; }
.bj-word { font: 600 13px/1 var(--f-ui); color: var(--ink-2); white-space: nowrap; }
.bj-word:empty { display: none; }
.bj-word.is-win { color: var(--win); } .bj-word.is-loss { color: var(--loss); } .bj-word.is-back { color: var(--back); }
.bj-hstake { display: none; align-items: center; gap: 5px; font: 700 14px/1 var(--f-num); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bj-hands.split .bj-hand { flex-direction: column; gap: 10px; }
.bj-hands.split .bj-hstake { display: flex; }
.bj-hands.split.n3, .bj-hands.split.n4 { --cw: 64px; gap: 18px; }
.bj-hands.split.live .bj-hand:not(.on) .bj-card { filter: brightness(.55) saturate(.8); }
.bj-hand.on .bj-tot { --lnc: var(--gold-line); color: var(--gold); }
/* hairline buttons on the table: Split by the hand in play, Insure / No insurance by the dealer's ace */
.bj-split, .bj-offer button { --fill: var(--stage); --lnc: rgb(216 165 72 / .55); height: 38px; padding: 0 14px; color: var(--gold); font: 600 14px/1 var(--f-ui); white-space: nowrap; cursor: pointer; }
.bj-split:hover, .bj-offer button:hover { --lnc: var(--gold-line); --fill: var(--cell); }
.bj-split:active, .bj-offer button:active { transform: scale(.95); }
.bj-split[hidden] { display: none; }
.bj-offer { display: flex; gap: 8px; }
.bj-offer[hidden] { display: none; }

/* the bets on the table: label, pay, and a chip with the amount once bet */
.bj-spots { display: flex; justify-content: center; gap: 8px; width: 100%; margin-top: 4px; }
.bj-spot { flex: 0 1 160px; min-width: 0; height: 72px; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.bj-spot > i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 10px; }
.bj-lab { font: 600 15px/1 var(--f-ui); color: var(--ink); white-space: nowrap; }
.bj-pay { font: 700 16px/1 var(--f-num); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bj-pay.plus { color: var(--win); }
.bj-amt { display: flex; visibility: hidden; height: 20px; align-items: center; gap: 6px; font: 700 15px/1 var(--f-num); color: var(--ink);
  font-variant-numeric: tabular-nums; transition: opacity .4s; }
.bj-spot.pick .bj-amt, .bj-spot.is-win .bj-amt, .bj-spot.is-loss .bj-amt, .bj-spot.is-back .bj-amt { visibility: visible; }
.bj-spot.is-loss .bj-amt { opacity: .45; }
/* a settled bet: mint, coral or silver over the gold of a placed chip */
.bj-spot.is-win { --lnc: var(--win); } .bj-spot.is-loss { --lnc: var(--loss); } .bj-spot.is-back { --lnc: var(--back); }
.bj-spot:not(.live) { cursor: default; }
.bj-spot.live:hover { --fill: var(--cell-hi); --lnc: var(--gold-line); }
.bj-spot.live:active { --fill: var(--cell-dn); --lnc: var(--gold-line); transform: scale(.95); }
.bj-spot[data-s="main"].live { cursor: pointer; }
.bj-chip { --chip: #c9d2de; width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: radial-gradient(circle, var(--chip) 0 54%, rgb(255 255 255 / .9) 55% 58%, transparent 59%), repeating-conic-gradient(var(--chip) 0 22deg, #fff 22deg 30deg), var(--chip);
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / .18), inset 0 -2px 0 rgb(0 0 0 / .22), 0 2px 4px rgb(3 6 12 / .45); }
.bj-chip.c50 { --chip: #d63a4e; } .bj-chip.c100 { --chip: #2f6fd6; } .bj-chip.c500 { --chip: #13935a; } .bj-chip.c1000 { --chip: #1c2633; } .bj-chip.c10000 { --chip: #f2b94a; }

/* a line beside the plate (insurance, even money) */
.bj-say { flex: 0 1 auto; min-width: 0; font: 600 15px/1.1 var(--f-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-say:empty { display: none; }

@media (max-width: 899px) {
  .gm[data-game="blackjack"] .gm-play { min-height: 0; }
  .bj-stage { --cw: 58px; grid-template-rows: auto 40px auto auto; padding: 18px 8px 12px; row-gap: 8px; }
  .bj-dl, .bj-hand { gap: 10px; }
  .bj-hands { gap: 14px; }
  .bj-hands.split.n3, .bj-hands.split.n4 { --cw: 42px; gap: 10px; }
  .bj-hands.split .bj-tot { min-width: 34px; height: 26px; font-size: 16px; }
  .bj-dl { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .bj-offer button { height: 34px; padding: 0 10px; font-size: 13px; }
  .bj-spot { height: 68px; }
  .bj-spot > i { padding: 0 4px; }
  .bj-lab { font-size: 14px; }
  .bj-pay { font-size: 15px; }
  .bj-say { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .bj-card.in { animation: none; } }