/* Baccarat's own look on the game template (static/game.css styles the shell and the .gm-cell primitive), in the Inlay
   language: the two hands over one gold arc on a flat stage, ivory cards (the squeezed one shows its pip columns under
   a back that peels), totals in hairline plates, the bets as cells (Player, Tie, Banker) with a real chip once bet, and
   the roads under them: the bead plate and the big road in one row (an ivory ring for Player, a gold disc for Banker, a
   gold slash for a tie). On phones one row of beads sits beside the plate instead of the history chips. */

.bc-stage { --cw: 92px; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 30px auto auto;
  align-items: center; justify-items: center; row-gap: 10px; padding: 18px 16px 14px; }
.bc-hands { display: flex; justify-content: center; gap: clamp(24px, 7vw, 88px); }
.bc-hand { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: calc(var(--cw) * 2.32); }
.bc-hd { display: flex; align-items: center; gap: 10px; height: 30px; }
.bc-hd span { font: 600 15px/1 var(--f-ui); color: var(--ink-2); transition: color .2s; }
.bc-nat { height: 16px; margin-top: -4px; font: 600 13px/16px var(--f-ui); color: var(--gold); }
.bc-cards { display: flex; position: relative; min-height: calc(var(--cw) * 1.4); }
.bc-hand.bc-win .bc-hd span { color: var(--gold); }
.bc-hand.bc-win .bc-tot, .bc-tot.bc-lock { --lnc: var(--gold-line); color: var(--gold); }
.bc-hand.bc-out .bc-card { filter: brightness(.42) saturate(.7); }
.bc-arc { width: min(80%, 560px); height: 30px; overflow: visible; }
.bc-arc path { fill: none; stroke: var(--gold-line); stroke-width: 1.25; opacity: .55; vector-effect: non-scaling-stroke; }

/* the cards */
.bc-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), box-shadow .2s var(--e-out), transform .12s var(--e-out); }
.bc-card:first-child { margin-left: 0; }
.bc-card::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgb(216 165 72 / .6); border-radius: 4px; pointer-events: none; }
.bc-card .r { position: absolute; left: 8px; top: 6px; font-weight: 800; font-size: calc(var(--cw) * .3); line-height: 1; }
.bc-card .r2 { left: auto; top: auto; right: 8px; bottom: 6px; transform: rotate(180deg); }
.bc-card .s { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .46); font-family: var(--f-ui); }
.bc-card.red { color: #c4313f; }
.bc-card.in { animation: bc-deal .26s var(--e-out) both; }
.gm.gm-fast .bc-card.in { animation-duration: .09s; }
@keyframes bc-deal { from { transform: translate(180px, -140px) rotate(12deg); opacity: 0; } }

/* the squeezed card: its pips (no corner index) under a back that peels from the side, then the end */
.bc-pips { position: absolute; inset: 0; }
.bc-pips i { position: absolute; font: 400 calc(var(--cw) * .24)/1 var(--f-ui); font-style: normal; transform: translate(-50%, -50%); }
.bc-pips i.dn { transform: translate(-50%, -50%) rotate(180deg); }
.bc-pips .bc-fig { left: 50%; top: 50%; width: 46%; height: 52%; display: grid; place-items: center; border: 1px solid rgb(216 165 72 / .7);
  font: 800 calc(var(--cw) * .36)/1 var(--f-num); }
.bc-card.bc-big { transform: scale(1.32); z-index: 3; box-shadow: 0 18px 30px rgb(0 0 0 / .55); }
.bc-sq { position: absolute; inset: -.5px; z-index: 2; border-radius: 7px; background: var(--cell); touch-action: none;
  box-shadow: inset 0 0 0 4px var(--cell), inset 0 0 0 5px var(--gold-line); }
.bc-sq::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); }
.bc-sq.bc-live { cursor: grab; }
.bc-grip { position: absolute; left: 3px; top: 30%; bottom: 30%; width: 5px; background: repeating-linear-gradient(180deg, var(--gold) 0 3px, transparent 3px 5px);
  animation: bc-grip 1.1s var(--e-out) infinite; }
@keyframes bc-grip { 0%, 100% { transform: none; } 50% { transform: translateX(3px); } }

/* hairline plates (the totals) */
.bc-ln { --k: 5px; --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)); }
.bc-ln::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill);
  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)); }
.bc-tot { min-width: 40px; height: 30px; padding: 0 9px; display: grid; place-items: center; color: var(--ink); font: 800 18px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.bc-tot:empty { visibility: hidden; }

/* the bets: six columns, the main three on top spanning two each, each pair bet under its own hand */
.bc-spots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: min(100%, 500px); }
.bc-spot { grid-column: span 2; min-width: 0; height: 72px; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.bc-spot[data-s="ppair"] { grid-column: 1 / 3; } .bc-spot[data-s="bpair"] { grid-column: 5 / 7; }
.bc-pay.bc-plus { color: var(--win); }  /* what a pair bet won, in place of its pay */
.bc-spot > i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 10px; }
.bc-lab { font: 600 15px/1 var(--f-ui); color: var(--ink); white-space: nowrap; }
.bc-pay { font: 700 16px/1 var(--f-num); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bc-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; }
.bc-spot.pick .bc-amt, .bc-spot.is-win .bc-amt, .bc-spot.is-loss .bc-amt, .bc-spot.is-back .bc-amt { visibility: visible; }
.bc-spot.is-loss .bc-amt { opacity: .45; }
/* a settled bet: mint, coral or silver over the gold of a placed chip */
.bc-spot.is-win { --lnc: var(--win); } .bc-spot.is-loss { --lnc: var(--loss); } .bc-spot.is-back { --lnc: var(--back); }
.bc-spot:not(.live) { cursor: default; }
.bc-spot.live:hover { --fill: var(--cell-hi); --lnc: var(--gold-line); }
.bc-spot.live:active { --fill: var(--cell-dn); --lnc: var(--gold-line); transform: scale(.95); }
.bc-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); }
.bc-chip.c50 { --chip: #d63a4e; } .bc-chip.c100 { --chip: #2f6fd6; } .bc-chip.c500 { --chip: #13935a; } .bc-chip.c1000 { --chip: #1c2633; } .bc-chip.c10000 { --chip: #f2b94a; }

/* the roads: the bead plate (six rows, filled down then right) and the big road in one row (a mark per run, its length inside) */
.bc-roads { display: flex; align-items: center; gap: 18px; width: min(100%, 580px); height: 86px; padding-top: 4px; }
.bc-bead { display: grid; grid-template-rows: repeat(6, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 2px; flex: none; }
.bc-strip { flex: 1; min-width: 0; display: flex; justify-content: flex-end; gap: 4px; overflow: hidden; }
.bc-s { display: block; width: var(--bd, 12px); height: var(--bd, 12px); flex: none; position: relative; border-radius: 2px; background: var(--well); }
.bc-s::before { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; }
.bc-sp::before { box-shadow: inset 0 0 0 1.5px var(--ivory); }
.bc-sb::before { background: var(--gold); }
.bc-st::before { inset: 1px; border-radius: 0; background: linear-gradient(135deg, transparent calc(50% - .8px), var(--gold) calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px)); }
.bc-r { width: 24px; height: 24px; flex: none; position: relative; border-radius: 50%; display: grid; place-items: center; font: 800 13px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.bc-r.bc-sp { box-shadow: inset 0 0 0 1.5px var(--ivory); color: var(--ivory); }
.bc-r.bc-sb { background: var(--gold); color: var(--on-gold); }
.bc-r.bc-tied::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent calc(50% - .8px), var(--sl, var(--gold)) calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px)); }
.bc-r.bc-sb.bc-tied { --sl: var(--on-gold); }
/* on phones the roads leave the stage; one row of beads sits beside the plate in place of the history chips */
.gm[data-game="baccarat"] .gm-recent { display: none; }
.bc-rail { flex: 1; min-width: 0; display: none; justify-content: flex-end; gap: 3px; overflow: hidden; --bd: 14px; }
.bc-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; }
.bc-say:empty { display: none; }

@media (max-width: 899px) {
  .gm[data-game="baccarat"] .gm-play { min-height: 0; }
  .bc-stage { --cw: 56px; grid-template-rows: auto 26px auto; padding: 14px 10px 12px; row-gap: 8px; }
  .bc-hand { gap: 8px; }
  .bc-roads { display: none; }
  .bc-rail { display: flex; }
  .bc-spot { height: 68px; }
  .bc-spot > i { padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .bc-card.in { animation: none; } .bc-grip { animation: none; } }