/* Poker against the house. Page prefix pk-. Shared felt, chips and cards come from /demos/_tables/. */
.pk-screen { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 16px; align-items: start; }
.pk-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pk-table { --rail: 26px; border-radius: 210px; }
.pk-table > .tb-felt { border-radius: 186px; }
.pk-felt { --cw: 66px; position: relative; display: grid; grid-template-rows: auto auto 1fr auto auto; justify-items: center; gap: 6px; min-height: 548px; padding: 0 70px 14px; }
.pk-felt[data-kind="stud7"] { --cw: 60px; }
.pk-felt[data-kind="draw"], .pk-felt[data-kind="stud5"] { --cw: 72px; }

.pk-top { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 26px; width: 100%; }
.pk-tray { margin-top: -1px; }
.pk-tray .tb-tray-col { width: 18px; height: 40px; }
.pk-deck { position: absolute; right: 9%; top: 12px; }
.pk-deck-body { position: relative; width: 44px; height: 60px; }
.pk-deck-body i { position: absolute; inset: 0; border-radius: 5px; background: #20283a; border: 1px solid rgba(255,178,30,.45); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.pk-deck-body i:nth-child(1) { transform: translate(-3px, 3px); opacity: .6; }
.pk-deck-body i:nth-child(2) { transform: translate(-1.5px, 1.5px); opacity: .8; }
.pk-deck-body i:nth-child(3)::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 22%; transform: translate(-50%, -50%) rotate(45deg); border: 1.5px solid rgba(255,178,30,.8); }
.pk-muck { position: absolute; left: 11%; top: 20px; width: 1px; height: 1px; }

.pk-side { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pk-label { display: flex; align-items: center; gap: 9px; min-height: 26px; flex-wrap: wrap; justify-content: center; }
.pk-five { display: inline-flex; gap: 1px; }
.pk-five:empty { display: none; }
.pk-cards { display: flex; gap: 7px; align-items: flex-end; min-height: calc(var(--cw) * 1.4 + 8px); padding-top: 8px; }
.pk-board { gap: 8px; }
.pk-mid { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.pk-print { width: min(640px, 100%); height: 74px; position: relative; }
.pk-print .tb-arc { inset: 0; width: 100%; height: 100%; }
.pk-felt[data-kind="draw"] .pk-print, .pk-felt[data-kind="stud5"] .pk-print, .pk-felt[data-kind="stud7"] .pk-print { height: 92px; }

/* card states */
.pc { transition: transform .28s cubic-bezier(.2,.9,.3,1.2), filter .3s; }
.pc.pk-down::after { content: 'Down'; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pc.pk-down .pc-front { box-shadow: inset 0 0 0 3px rgba(32,40,58,.18), 0 0 0 1px rgba(0,0,0,.22), 0 6px 14px -6px rgba(0,0,0,.55); background: #f1eee4; }
.pk-you .pk-cards .pc { cursor: default; }
.pk-felt[data-kind="draw"] .pk-you .pk-cards .pc { cursor: pointer; }
.pc.pk-held { transform: translateY(-12px); }
.pc.pk-held .pc-front { box-shadow: 0 0 0 2.5px var(--you), 0 12px 22px -8px rgba(0,0,0,.7); }
.pc.pk-held::before { content: 'Held'; position: absolute; z-index: 3; left: 50%; top: -19px; transform: translateX(-50%); padding: 1px 7px; border-radius: 5px; background: var(--you); color: var(--you-ink); font: 800 9.5px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.pc.pk-kept { transform: translateY(-6px); }
.pc.pk-lift { transform: translateY(-10px) scale(1.04); }
.pc.pk-in { transform: translateY(-7px); }
.pc.pk-in.you .pc-front { box-shadow: 0 0 0 2.5px var(--you), 0 12px 22px -8px rgba(0,0,0,.7); }
.pc.pk-in.house .pc-front { box-shadow: 0 0 0 2.5px #dfe6f2, 0 12px 22px -8px rgba(0,0,0,.7); }
.pc.pk-in-h::before { content: ''; position: absolute; z-index: 3; left: 50%; top: -9px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #dfe6f2; box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.pc.pk-in-h:not(.pk-in) { transform: none; }

/* bet spots */
.pk-spots { display: flex; gap: 18px; align-items: center; justify-content: center; padding-top: 6px; min-height: 96px; }
.pk-spot { --spot: 76px; }
.pk-spot .tb-spot-l { font-size: 10.5px; }
.pk-spot .tb-stack { --chip: 38px; --ct: 3.5px; }

/* actions */
.pk-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--s-panel); border: 1px solid var(--s-line); }
.pk-stake { display: flex; align-items: center; gap: 14px; }
.pk-stake .tb-rchip { --chip: 44px; }
.pk-stake .tb-rack { gap: 7px; }
.pk-stake-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 112px; }
.pk-stake-t small { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--s-dim); }
.pk-stake-t b { font-size: 20px; font-weight: 800; }
.pk-stake-t span { font-size: 11.5px; color: var(--s-dim); }
.pk-btns { margin-left: auto; }
.pk-hint { flex-basis: 100%; order: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--s-dim); padding-top: 8px; border-top: 1px solid var(--s-line); }
.pk-hint b { font: 800 11px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.pk-hint b.go { background: rgba(53,227,154,.16); color: var(--tb-win); }
.pk-hint b.no { background: rgba(255,90,110,.16); color: var(--tb-lose); }
.pk-hint .tb-mini { height: 28px; }
.pk-keep { display: inline-flex; }

/* side panel */
.pk-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pk-tabs { width: 100%; margin-bottom: 10px; }
.pk-tabs button { flex: 1; padding: 5px 6px; font-size: 12px; }
.pk-pay h4 { margin-bottom: 4px; }
.pk-rules { list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--s-dim); line-height: 1.45; }
.pk-rules li { padding-left: 12px; position: relative; }
.pk-rules li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 1px; background: var(--you); }
#ranks .tb-pay { padding: 4px 8px; font-size: 12.5px; }
.pk-hist-w { padding: 12px 14px; border-radius: 12px; background: var(--s-panel); border: 1px solid var(--s-line); }
.pk-hist-w .tb-hist { margin-top: 6px; }
.pk-games button:disabled { opacity: .35; cursor: default; }

@media (max-width: 1180px) {
  .pk-screen { grid-template-columns: minmax(0, 1fr); }
  .pk-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-panel > #bal { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .dk-screen.pk-screen { padding: 10px; }
  .pk-table { --rail: 14px; border-radius: 60px; }
  .pk-table > .tb-felt { border-radius: 48px; }
  .pk-felt, .pk-felt[data-kind] { --cw: 46px; padding: 0 10px 10px; min-height: 0; }
  .pk-felt[data-kind="stud7"] { --cw: 40px; }
  .pk-felt[data-kind="holdem"] .pk-board, .pk-felt[data-kind="omaha"] .pk-board { --cw: 50px; gap: 5px; }
  .pk-cards { gap: 4px; }
  .pk-deck { right: 4%; top: 8px; transform: scale(.75); transform-origin: top right; }
  .pk-tray { transform: scale(.8); transform-origin: top center; }
  .pk-print, .pk-felt[data-kind] .pk-print { height: 52px; }
  .pk-spot { --spot: 58px; }
  .pk-spot .tb-stack { --chip: 30px; --ct: 3px; }
  .pk-spots { gap: 10px; min-height: 80px; }
  .pk-actions { padding: 10px; gap: 10px; }
  .pk-stake { flex-wrap: wrap; gap: 8px; }
  .pk-stake .tb-rchip { --chip: 40px; }
  .pk-stake .tb-rack { gap: 5px; }
  .pk-btns { margin-left: 0; width: 100%; }
  .pk-btns .tb-act { flex: 1; }
  .pk-panel { grid-template-columns: minmax(0, 1fr); }
  .pk-games { order: -1; width: 100%; }
  .pk-games button { flex: 1; padding: 6px 4px; }
  .pc.pk-down::after { bottom: -13px; font-size: 8px; }
}
.pk-hint[hidden] { display: none; }
.pk-felt[data-kind="draw"] { --cw: 66px; }
.pk-felt[data-kind="draw"] .pk-you .pk-cards { padding-top: 26px; }
.pk-felt[data-kind="draw"] .pk-print, .pk-felt[data-kind="stud5"] .pk-print, .pk-felt[data-kind="stud7"] .pk-print { height: 80px; }
@media (max-width: 760px) { .pk-felt[data-kind="draw"] { --cw: 46px; } .pk-felt[data-kind="draw"] .pk-you .pk-cards { padding-top: 22px; } .pk-felt[data-kind] .pk-print { height: 52px; } }
@media (max-width: 760px) {
  .pk-felt[data-kind="stud5"] .pk-spot, .pk-felt[data-kind="stud7"] .pk-spot { --spot: 48px; }
  .pk-felt[data-kind="stud5"] .pk-spots, .pk-felt[data-kind="stud7"] .pk-spots { gap: 6px; padding-left: 14px; padding-right: 14px; }
  .pk-felt[data-kind="stud5"] .pk-spot .tb-stack, .pk-felt[data-kind="stud7"] .pk-spot .tb-stack { --chip: 26px; --ct: 2.5px; }
  .pk-spot .tb-spot-l { font-size: 9px; letter-spacing: .1em; }
}
#pays .tb-pay[data-k^="a"] { padding: 3px 8px; font-size: 12px; }
#pays .tb-pay[data-k^="a"] b { font-size: 12px; }
#pays .tb-pay[data-k="a9"] { margin-top: 6px; box-shadow: 0 -1px 0 var(--s-line), 0 -6px 0 -5px transparent; }
.pk-ante { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--s-line); }
.pk-ante small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--s-dim); margin-bottom: 3px; }
.pk-ante-g { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
#pays .pk-ante-g .tb-pay { margin: 0; padding: 3px 6px; font-size: 11.5px; box-shadow: none; }
#pays .pk-ante-g .tb-pay b { font-size: 11.5px; }
.pk-panel { gap: 10px; }
.pk-felt[data-kind="draw"] { gap: 2px; }
.pk-felt[data-kind="draw"] .pk-print { height: 58px; }
@media (max-width: 760px) { .pk-ante-g { column-gap: 8px; } }
#pays > .tb-pay { font-size: 12.5px; padding: 5px 8px; }
#pays > .tb-pay b { font-size: 12px; }
@media (min-width: 1181px) {
  .pk-screen { align-items: stretch; }
  .pk-panel { contain: size; overflow: hidden; }
  .pk-hist-w { flex: 1 1 auto; min-height: 0; overflow: auto; }
}
@media (min-width: 761px) {
  .pk-felt, .pk-felt[data-kind] { height: 592px; min-height: 0; gap: 4px; }
  .pk-felt[data-kind="holdem"] .pk-print, .pk-felt[data-kind="omaha"] .pk-print { height: 58px; }
  .pk-label { flex-wrap: nowrap; white-space: nowrap; }
  .pk-spots { min-height: 86px; padding-top: 2px; }
}