/* Casino Hold'em's own look on the game template (static/game.css styles the shell and the .gm-cell primitive), in the
   Inlay language: no table outline, the dealer over the board's five slots, one gold arc, your two cards with Fold
   beside them, and the bets as cells (Ante, Call) with a real chip once bet. The pay table sits in the panel, read-only;
   the row that paid lights up. The hand's name sits beside the plate. */

.he-stage { --cw: 80px; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px 12px; }
.he-dl { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.he-who { display: flex; align-items: center; gap: 10px; height: 24px; font: 600 15px/1 var(--f-ui); color: var(--ink-2); white-space: nowrap; }
.he-who b { font: 600 15px/1 var(--f-ui); color: var(--ink); }
.he-who em { --k: 5px; --fill: var(--well); --lnc: rgb(216 165 72 / .35); padding: 5px 9px; font: 500 13px/1 var(--f-ui); font-style: normal; color: var(--ink-2); }
.he-who em:empty { display: none; }
.he-who em.he-q { --lnc: var(--gold-line); color: var(--gold); }
.he-who em.he-nq { --lnc: var(--back); color: var(--back); }
.he-cards { display: flex; min-height: calc(var(--cw) * 1.4); }
.he-board { display: flex; gap: 8px; min-height: calc(var(--cw) * 1.4); }
.he-board .he-card { margin-left: 0; }
.he-slot { width: var(--cw); height: calc(var(--cw) * 1.4); flex: none; border-radius: 7px; background: var(--well); box-shadow: inset 0 0 0 1px rgb(216 165 72 / .16); }
.he-arc { width: min(78%, 480px); height: 26px; margin: -4px 0; overflow: visible; }
.he-arc path { fill: none; stroke: var(--gold-line); stroke-width: 1.25; opacity: .55; vector-effect: non-scaling-stroke; }
.he-pl { position: relative; display: flex; align-items: center; }
.he-pl .he-fold { position: absolute; right: 100%; top: 50%; margin: -19px 14px 0 0; }
.he-pc { cursor: default; }
.he-stage.he-live .he-pc { cursor: pointer; }

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

/* hairlines: Fold, the dealer's tag */
.he-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); }
.he-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)); }
.he-fold { --fill: var(--stage); --lnc: rgb(216 165 72 / .55); height: 38px; padding: 0 14px; color: var(--gold); font: 600 14px/1 var(--f-ui); cursor: pointer; visibility: hidden; }
.he-fold:hover { --lnc: var(--gold-line); --fill: var(--cell); }
.he-fold:active { transform: scale(.95); }
.he-stage.he-live .he-fold { visibility: visible; }

/* the bets: the AA Bonus (chips, optional), Ante (a tap deals), Call (a tap calls; it pulses gold while the decision is yours) */
.he-spots { display: flex; justify-content: center; gap: 8px; width: 100%; margin-top: 2px; }
.he-spot { flex: 0 1 160px; min-width: 0; height: 72px; cursor: default; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.he-spot > i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 10px; }
.he-lab { font: 600 15px/1 var(--f-ui); color: var(--ink); white-space: nowrap; }
.he-pay { font: 700 16px/1 var(--f-num); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.he-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; }
.he-spot.pick .he-amt, .he-spot.is-win .he-amt, .he-spot.is-loss .he-amt, .he-spot.is-back .he-amt { visibility: visible; }
.he-spot.is-loss .he-amt { opacity: .45; }
/* a settled bet: mint, coral or silver over the gold of a placed chip */
.he-spot.is-win { --lnc: var(--win); } .he-spot.is-loss { --lnc: var(--loss); } .he-spot.is-back { --lnc: var(--back); }
.he-spot.live { cursor: pointer; }
.he-spot.live:hover { --fill: var(--cell-hi); --lnc: var(--gold-line); }
.he-spot.live:active { --fill: var(--cell-dn); --lnc: var(--gold-line); transform: scale(.95); }
.he-spot.he-go, .he-spot.he-go:hover { --lnc: var(--gold-line); }
.he-spot.he-go::before { animation: he-pulse 1.2s ease-in-out infinite; }
@keyframes he-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .8; } }
.he-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); }
.he-chip.c50 { --chip: #d63a4e; } .he-chip.c100 { --chip: #2f6fd6; } .he-chip.c500 { --chip: #13935a; } .he-chip.c1000 { --chip: #1c2633; } .he-chip.c10000 { --chip: #f2b94a; }

/* the pay table in the panel: the hand, what the Ante pays, what the AA Bonus pays; the hand that paid lights its own cell */
.he-pt { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.he-pt > div { display: grid; grid-template-columns: minmax(0, 1fr) 40px 58px; gap: 4px; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px;
  font: 500 13px var(--f-ui); color: var(--ink-2); }
.he-pt span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-pt b { text-align: right; font: 700 16px var(--f-num); color: var(--ink); font-variant-numeric: tabular-nums; }
.he-pt .he-ph { height: 22px; color: var(--ink-3); }
.he-pt .he-ph em { font-style: normal; text-align: right; white-space: nowrap; }
.he-pt > div.he-on { background: var(--well); color: var(--ink); }
.he-pt b.he-hit { color: var(--win); }
.he-pt b.he-lose { font: 500 13px var(--f-ui); color: var(--ink-3); }
.he-pay.he-plus { color: var(--win); }  /* what the AA Bonus won, in place of its pay */

/* the hand's name, beside the plate */
.he-name { 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; transform-origin: left center; }
.he-name:empty { display: none; }

@media (max-width: 899px) {
  .gm[data-game="holdem"] .gm-play { min-height: 0; }
  .he-stage { --cw: 50px; gap: 10px; padding: 14px 8px 12px; }
  .he-board { gap: 6px; }
  .he-pl .he-fold { margin-right: 10px; }
  .he-spot { height: 68px; }
  .he-name:not(:empty) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.15; }
}
@media (prefers-reduced-motion: reduce) { .he-card.in { animation: none; } .he-spot.he-go::before { animation: none; } }