/* Video Poker's own look on the game template (static/game.css styles the shell and the .gm-cell primitive), in the
   Inlay language: the pay table as cells across the top (the hand's name on the left, its multiplier on the right, on
   one line, a gold line under them as thick as the hand is rare), the five ivory cards filling the stage under it, each
   with a gold HELD tag when kept and a Hold hairline under it. The row you hold lights gold; a paid hand lights mint. */

.vp-stage { --cw: min(124px, calc((100cqw - 72px) / 5)); container-type: inline-size; flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px; padding: 16px; }
.vp-pay { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 640px; }
.vp-pc { height: 40px; cursor: default; }
.vp-pc > i { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 6px; }
.vp-pc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 13px/1 var(--f-ui); color: var(--ink-2); white-space: nowrap; }
.vp-pc span.sh { display: none; }
.vp-pc b { flex: none; font: 700 16px/1 var(--f-num); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.vp-pc.vp-top b { color: var(--gold); }
.vp-pc u { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 9px; height: var(--u, 0); background: var(--gold); opacity: .85; }
.vp-pc.pick { --lnc: var(--gold-line); }
.vp-pc.pick span, .vp-pc.is-win span, .vp-pc.is-back span { color: var(--ink); }
.vp-pc.is-win b.plus { color: var(--win); }
.vp-pc.is-back b { color: var(--back); }
/* a narrow stage: two columns, the royal flush across both, still one line each */
@container (max-width: 539px) {
  .vp-pay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-pc:first-child { grid-column: 1 / -1; }
}
@container (max-width: 330px) {
  .vp-pc span.fl { display: none; } .vp-pc span.sh { display: block; }
  .vp-pc > i { padding: 0 9px 6px; }
  .vp-pc u { left: 9px; right: 9px; }
}

/* the hand */
.vp-hand { display: flex; gap: 10px; }
.vp-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; cursor: default;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vp-cw { position: relative; transition: transform .14s var(--e-out); }
.vp-stage.vp-live .vp-slot { cursor: pointer; }
.vp-stage.vp-live .vp-slot:hover .vp-cw { transform: translateY(-3px); }
.vp-slot.vp-on .vp-cw, .vp-stage.vp-live .vp-slot.vp-on:hover .vp-cw, .vp-slot.vp-lift .vp-cw { transform: translateY(-8px); }
.vp-slot.vp-on .vp-card { box-shadow: 0 0 0 2px var(--gold-line), 0 14px 22px rgb(0 0 0 / .45); }
.vp-slot.vp-dim .vp-card { filter: brightness(.42) saturate(.7); }

.vp-card { display: block; width: var(--cw); height: calc(var(--cw) * 1.4); position: relative; 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); }
.vp-card::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgb(216 165 72 / .6); border-radius: 4px; pointer-events: none; }
.vp-card .r { position: absolute; left: 8px; top: 6px; font-weight: 800; font-size: calc(var(--cw) * .28); line-height: 1; }
.vp-card .r2 { left: auto; top: auto; right: 8px; bottom: 6px; transform: rotate(180deg); }
.vp-card .s { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .46); font-family: var(--f-ui); }
.vp-card.red { color: #c4313f; }
.vp-card.down { background: var(--cell); }
.vp-card.down > * { display: none; }
.vp-card.down::after { border-color: var(--gold-line); }
.vp-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); }

/* hairlines: the HELD tag on a kept card, and Hold under each card */
.vp-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)); }
.vp-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)); }
.vp-ht { --k: 4px; --fill: var(--well); --lnc: var(--gold-line); position: absolute; left: 50%; top: 0; z-index: 2; height: 22px; padding: 0 8px; display: grid; place-items: center;
  font: 700 13px/1 var(--f-ui); letter-spacing: .06em; color: var(--gold); opacity: 0; pointer-events: none;
  transform: translate(-50%, -55%) scale(.8); transition: opacity .12s, transform .16s var(--e-settle); }
.vp-slot.vp-on .vp-ht { opacity: 1; transform: translate(-50%, -55%); }
.vp-held { --fill: var(--stage); --lnc: transparent; height: 30px; min-width: 64px; padding: 0 10px; display: grid; place-items: center;
  font: 600 13px/1 var(--f-ui); color: transparent; transition: color var(--t-hover); }
.vp-stage.vp-live .vp-held { --lnc: rgb(216 165 72 / .3); color: var(--ink-3); }
.vp-stage.vp-live .vp-slot:hover .vp-held { --lnc: var(--gold-line); color: var(--ink-2); }
.vp-slot.vp-on .vp-held, .vp-stage.vp-live .vp-slot.vp-on .vp-held { --fill: var(--well); --lnc: var(--gold-line); color: var(--gold); }
.vp-stage.vp-nudge .vp-held { animation: vp-nudge .9s var(--e-out) 1; }
@keyframes vp-nudge { 0%, 100% { transform: none; } 30% { transform: translateY(-4px); } 60% { transform: translateY(1px); } }

@media (max-width: 899px) {
  .gm[data-game="videopoker"] .gm-play { min-height: 0; }
  .vp-stage { --cw: min(100px, calc((100cqw - 40px) / 5)); gap: 18px; padding: 12px 8px 14px; }
  .vp-hand { gap: 6px; }
  .vp-held { min-width: 0; width: 100%; height: 36px; padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .vp-cw { transition: none; } .vp-stage.vp-nudge .vp-held { animation: none; } }