/* Poker: a dark card room with a green felt table. Shares style.css with the other games.
   Inside the table, sizes are in cqw/cqh of the table itself, so everything scales with it. */
body.poker {
  --bg: #08090d;
  --accent: #34d399;
  --accent-soft: rgba(52, 211, 153, .15);
  --glow-a: #34d399;
  --glow-b: #10b981;
  --gold: #facc15;
  --felt-a: #1f7a5c;
  --felt-b: #0b3a2c;
  --card-back: repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 7px), radial-gradient(circle, #dc2626, #7f1d1d);
  --s-h: #dc2626; --s-d: #dc2626; --s-s: #111827; --s-c: #111827;
}
body.poker.four-color { --s-d: #2563eb; --s-c: #15803d; }
body.poker .brand-mark.pk-mark rect:first-child { fill: var(--accent); }
body.poker .brand-mark.pk-mark path { fill: #fff; }
body.poker .hero h1 em { background: linear-gradient(100deg, #fecaca, #f87171 50%, #10b981); -webkit-background-clip: text; background-clip: text; }
body.poker .room-pill .code { background: rgba(52, 211, 153, .14); color: #9af0cd; }
body.poker .phase-chip::before { background: #10b981; box-shadow: 0 0 10px #10b981; }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.12em; }
.home-links { justify-content: center; }
.home-links button { flex: 1; }
.pos { color: #4ade80; } .neg { color: #f87171; }

/* ---------- lobby settings ---------- */
.settings-box h3 { margin: 18px 0 10px; }
.settings-box h3:first-of-type { margin-top: 6px; }
.num-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.num-grid input { padding: 8px 10px; }
.num-grid small { font-size: .7rem; line-height: 1.3; }
.num-ro { font-size: 1.05rem; color: var(--text); font-variant-numeric: tabular-nums; }
.field.changed > span, .check.changed b { color: #fca5a5; }
.pk-bools { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; }
.pk-bools .check { align-items: flex-start; margin: 0; }
.pk-bools .check span { display: flex; flex-direction: column; gap: 2px; }
.pk-bools small { font-size: .72rem; line-height: 1.35; }
.pk-set-sum { padding: 10px 14px; border-radius: 12px; background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .3); color: #a7f3d0; font-size: .9rem; }

/* ---------- the layout: the table and the dock | the side panel ---------- */
body.poker[data-phase="playing"] main, body.poker[data-phase="ended"] main { max-width: none; padding: 10px 14px 12px; }
.pk-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(290px, 23vw, 360px); gap: 14px; }
.pk-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pk-table-wrap { position: relative; container-type: size; height: min(62vw, 640px); display: grid; place-items: center; }
.pk-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.pk-side-card { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 12px 10px; }
.pk-tabs { margin-bottom: 10px; flex: none; }
.pk-side-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; padding-right: 2px; }
.pk-side-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pk-host { gap: 6px; flex: none; }
.pk-host button { flex: 1; }
@media (min-width: 1000px) and (min-height: 600px) {
  body.poker[data-phase="playing"], body.poker[data-phase="ended"] { height: 100dvh; overflow: hidden; }
  body.poker[data-phase="playing"] main, body.poker[data-phase="ended"] main { height: calc(100dvh - var(--topbar-h, 60px)); }
  body.poker #game:not(.hidden) { height: 100%; }
  .pk-layout { height: 100%; }
  .pk-stage { height: 100%; }
  .pk-table-wrap { flex: 1; height: auto; min-height: 0; }
  .pk-side { height: 100%; }
}
@media (max-width: 999px) {
  /* the voice panel goes up, out of the way of the action buttons */
  body.poker[data-phase="playing"] .voice-dock { bottom: auto; top: calc(var(--topbar-h, 60px) + 10px); }
  .pk-table-wrap { height: min(58vw, 560px); }
  .pk-layout { grid-template-columns: 1fr; }
  .pk-side-card { max-height: 520px; }
}

/* ---------- the table ---------- */
.pk-table { position: relative; width: min(96cqw, 205cqh); aspect-ratio: 2.15 / 1; container-type: size; }
.pk-rail { position: absolute; inset: 7% 5%; border-radius: 999px; padding: 1.3cqw;
  background: linear-gradient(180deg, #2a2d36, #121318 60%, #1b1d24); box-shadow: 0 2.5cqw 6cqw -1cqw rgba(0, 0, 0, .85), 0 0 0 .2cqw #3a3d48 inset, 0 .25cqw 0 rgba(255, 255, 255, .08) inset; }
.pk-felt { position: relative; width: 100%; height: 100%; border-radius: 999px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--felt-a) 100%, #fff 6%), var(--felt-a) 35%, var(--felt-b) 100%);
  box-shadow: 0 0 0 .35cqw rgba(250, 204, 21, .18) inset, 0 0 4cqw rgba(0, 0, 0, .55) inset; }
.pk-felt::before { content: ''; position: absolute; inset: 0; opacity: .18; mix-blend-mode: overlay;
  background-image: repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .3) 0 1px, transparent 1px 3px); }
.pk-felt::after { content: ''; position: absolute; inset: 9% 14%; border-radius: 999px; border: .18cqw solid rgba(255, 255, 255, .07); }
.pk-logo { position: absolute; left: 50%; top: 72%; transform: translate(-50%, -50%); font-family: var(--serif); font-style: italic; font-size: 3.4cqw; color: rgba(255, 255, 255, .07); letter-spacing: .05em; pointer-events: none; }
.pk-seats, .pk-fx { position: absolute; inset: 0; pointer-events: none; }
.pk-seats > * { pointer-events: auto; }

/* ---------- cards ---------- */
.pc { --cw: 5.4cqw; position: relative; flex: none; width: var(--cw); aspect-ratio: 5 / 7; border-radius: calc(var(--cw) * .1);
  background: linear-gradient(160deg, #fff, #eef2f7); color: var(--s-s); box-shadow: 0 calc(var(--cw) * .04) calc(var(--cw) * .1) rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .12);
  font-family: 'Geist', system-ui, sans-serif; user-select: none; transition: translate .25s ease, box-shadow .25s ease, filter .25s ease; }
.pc.s-h { color: var(--s-h); } .pc.s-d { color: var(--s-d); } .pc.s-s { color: var(--s-s); } .pc.s-c { color: var(--s-c); }
.pc-corner { position: absolute; left: 7%; top: 3%; display: flex; flex-direction: column; align-items: center; line-height: .92; }
.pc-corner b { font-size: calc(var(--cw) * .44); font-weight: 800; letter-spacing: -.06em; }
.pc-corner i { font-style: normal; font-size: calc(var(--cw) * .32); }
.pc-pip { position: absolute; right: 6%; bottom: 2%; font-size: calc(var(--cw) * .66); line-height: 1; }
.pc.back { border: calc(var(--cw) * .06) solid #f8fafc; background: var(--card-back); }
.pc.slot { background: rgba(0, 0, 0, .12); box-shadow: none; border: .15cqw dashed rgba(255, 255, 255, .14); }
.pc.xs { --cw: 26px; } .pc.xxs { --cw: 17px; border-radius: 3px; } .pc.sm { --cw: 46px; }
.pc.xxs .pc-pip { display: none; } .pc.xxs .pc-corner { left: 0; right: 0; top: 6%; }
.pc.hl { translate: 0 -9%; box-shadow: 0 0 0 calc(var(--cw) * .05) var(--gold), 0 calc(var(--cw) * .1) calc(var(--cw) * .3) rgba(250, 204, 21, .45); }
.pc.hl-me { box-shadow: 0 0 0 calc(var(--cw) * .04) rgba(250, 204, 21, .85), 0 calc(var(--cw) * .08) calc(var(--cw) * .25) rgba(250, 204, 21, .3); }
.pc.dim { filter: brightness(.5) saturate(.5); }
.pc.rabbit { opacity: .8; outline: calc(var(--cw) * .04) dashed rgba(255, 255, 255, .7); outline-offset: calc(var(--cw) * .04); filter: saturate(.7); }
.pc.decisive { box-shadow: 0 0 0 calc(var(--cw) * .06) #fb923c, 0 0 calc(var(--cw) * .5) #fb923c; animation: pkDecisive 1.6s ease-in-out 3; }
.pc.flip { animation: pkFlip .42s cubic-bezier(.2, .8, .3, 1) both; }
.pc.flip.slow { animation: pkSqueeze 1.5s cubic-bezier(.3, .1, .2, 1) both; }
.pc.deal { animation: pkDeal .45s cubic-bezier(.2, .8, .2, 1) both; }
.pc.back.squeeze { animation: pkPeel 1.1s ease-in-out infinite; box-shadow: 0 0 0 calc(var(--cw) * .05) rgba(250, 204, 21, .8), 0 0 calc(var(--cw) * .6) rgba(250, 204, 21, .5); }
.pc.back.squeeze::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 34%; height: 26%; border-radius: 0 0 calc(var(--cw) * .1) 0;
  background: linear-gradient(135deg, transparent 50%, #f8fafc 50%); animation: pkCorner 1.1s ease-in-out infinite; }
@keyframes pkFlip { from { transform: perspective(600px) rotateY(95deg) scale(.92); filter: brightness(.6); } to { transform: none; } }
@keyframes pkSqueeze { 0% { transform: perspective(600px) rotateY(90deg) scale(1.15); filter: brightness(.6); } 45% { transform: perspective(600px) rotateY(70deg) scale(1.15); } 80% { transform: perspective(600px) rotateY(-8deg) scale(1.12); } 100% { transform: none; } }
@keyframes pkDeal { from { transform: translate(calc(var(--dx, 0) * 1cqw), calc(var(--dy, 0) * 1cqh)) rotate(-25deg) scale(.5); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
@keyframes pkPeel { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-6%); } }
@keyframes pkCorner { 0%, 100% { width: 30%; height: 22%; } 50% { width: 46%; height: 34%; } }
@keyframes pkDecisive { 0%, 100% { transform: none; } 50% { transform: translateY(-10%) scale(1.04); } }

/* ---------- seats ---------- */
.pk-seat { position: absolute; left: var(--x); top: var(--y); width: 14cqw; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.pk-hole { display: flex; justify-content: center; height: calc(5.4cqw * 1.4); margin-bottom: -2.6cqw; z-index: 1; }
.pk-hole .pc3 { --cw: 5.4cqw; }
.pk-hole .pc3:first-child { rotate: -7deg; margin-right: -1.4cqw; } .pk-hole .pc3:nth-child(2) { rotate: 7deg; }
.pk-hole.mine { height: calc(7cqw * 1.4); margin-bottom: -2cqw; }
.pk-hole.mine .pc3 { --cw: 7cqw; } .pk-hole.mine .pc3:first-child { margin-right: -.8cqw; rotate: -5deg; } .pk-hole.mine .pc3:nth-child(2) { rotate: 5deg; }
.pk-seat.folded .pk-hole .pc3 { filter: brightness(.45) grayscale(.6); translate: 0 12%; }
.pk-ava { position: relative; width: 6.2cqw; height: 6.2cqw; z-index: 2; border-radius: 50%; }
.pk-ava .avatar { width: 100%; height: 100%; font-size: 2.2cqw; box-shadow: 0 0 0 .3cqw #0b0d12, 0 .5cqw 1.2cqw rgba(0, 0, 0, .6); }
.pk-ring { position: absolute; inset: -.55cqw; width: calc(100% + 1.1cqw); height: calc(100% + 1.1cqw); transform: rotate(-90deg); pointer-events: none; display: none; }
.pk-ring circle { fill: none; stroke: #10b981; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke .4s; }
@keyframes pkRing { from { stroke-dashoffset: var(--from, 0); } to { stroke-dashoffset: 100; } }
.pk-ring.low circle { stroke: #ef4444; }
.pk-seat.acting .pk-ring { display: block; }
.pk-plate { position: relative; z-index: 3; margin-top: -1.2cqw; min-width: 11.5cqw; max-width: 15cqw; padding: .45cqw 1cqw .5cqw; border-radius: 1.1cqw; text-align: center;
  background: linear-gradient(180deg, rgba(30, 33, 42, .97), rgba(12, 13, 18, .97)); border: .12cqw solid rgba(255, 255, 255, .1); box-shadow: 0 .6cqw 1.4cqw rgba(0, 0, 0, .55); }
.pk-plate b { display: block; font-size: max(10px, 1.25cqw); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-stack { display: block; font: 700 max(11px, 1.45cqw) 'Geist Mono', monospace; color: #fde68a; font-variant-numeric: tabular-nums; }
.pk-stack em { font: 600 max(9px, 1.05cqw) 'Geist', sans-serif; font-style: normal; color: var(--muted); }
.pk-pos { position: absolute; top: -.9cqw; right: -.6cqw; padding: .1cqw .55cqw; border-radius: 99px; font: 700 max(8px, .9cqw) 'Geist Mono', monospace; background: #334155; color: #e2e8f0; }
.pk-seat.acting .pk-plate { border-color: rgba(16, 185, 129, .8); box-shadow: 0 0 0 .2cqw rgba(16, 185, 129, .35), 0 0 2cqw rgba(16, 185, 129, .35); }
.pk-seat.me .pk-plate { border-color: rgba(250, 204, 21, .35); }
.pk-seat.folded .pk-ava, .pk-seat.folded .pk-plate { opacity: .45; }
.pk-seat.idle .pk-ava, .pk-seat.idle .pk-plate { opacity: .5; }
.pk-seat.winner .pk-plate { border-color: var(--gold); box-shadow: 0 0 0 .25cqw rgba(250, 204, 21, .35), 0 0 3cqw rgba(250, 204, 21, .45); }
.pk-act { position: absolute; top: 100%; margin-top: .4cqw; padding: .2cqw .9cqw; border-radius: 99px; font-size: max(9px, 1.1cqw); font-weight: 700; white-space: nowrap;
  background: #1e293b; color: #e2e8f0; z-index: 4; opacity: 0; transform: translateY(-30%) scale(.85); transition: opacity .25s ease, transform .3s cubic-bezier(.2, 1.4, .4, 1); pointer-events: none; }
.pk-act.on { opacity: 1; transform: none; }
.pk-seat.top .pk-act { top: auto; bottom: 100%; margin: 0 0 .4cqw; }
.pk-act.a-fold { background: #3f3f46; color: #a1a1aa; } .pk-act.a-check { background: #334155; }
.pk-act.a-call { background: #065f46; color: #a7f3d0; } .pk-act.a-bet, .pk-act.a-raise { background: #9a3412; color: #fed7aa; }
.pk-act.a-allin { background: #b91c1c; color: #fff; box-shadow: 0 0 1.4cqw rgba(239, 68, 68, .6); }
.pk-act.a-sb, .pk-act.a-bb { background: #1e293b; color: #94a3b8; }
.pk-eq { position: absolute; left: calc(50% + 6.4cqw); top: 1.2cqw; z-index: 5; min-width: 7cqw; padding: .2cqw .7cqw .45cqw; border-radius: .8cqw; text-align: center;
  background: rgba(10, 12, 18, .92); border: .12cqw solid rgba(255, 255, 255, .14); transition: opacity .3s; }
.pk-eq i { transition: background .6s; }
.pk-eq b { font: 800 max(11px, 1.5cqw) 'Geist Mono', monospace; }
.pk-eq i { display: block; height: .35cqw; margin-top: .15cqw; border-radius: 99px; background: linear-gradient(90deg, #10b981 var(--w), rgba(255, 255, 255, .12) var(--w)); }
.pk-eq small { display: block; font-size: max(8px, .9cqw); color: var(--muted); }
.pk-eq.ahead { border-color: rgba(16, 185, 129, .6); }
.pk-seat.east .pk-eq { left: auto; right: calc(50% + 6.4cqw); }
.pk-hname { position: absolute; top: 100%; margin-top: .5cqw; padding: .3cqw 1.1cqw; border-radius: .8cqw; white-space: nowrap; z-index: 4;
  font: 600 max(11px, 1.3cqw) / 1.2 'Geist', system-ui, sans-serif; letter-spacing: .005em; color: #e2e8f0;
  background: rgba(10, 12, 18, .92); border: .12cqw solid rgba(255, 255, 255, .14); box-shadow: 0 .4cqw 1.2cqw rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(-25%); transition: opacity .35s ease, transform .4s cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.pk-hname.on { opacity: 1; transform: none; }
.pk-hname.win { color: #fde68a; border-color: rgba(250, 204, 21, .6); box-shadow: 0 0 0 .15cqw rgba(250, 204, 21, .15), 0 .4cqw 1.6cqw rgba(250, 204, 21, .25); }
.pk-seat.top .pk-hname { top: auto; bottom: 100%; margin: 0 0 .4cqw; }
.pk-won { display: none; position: absolute; top: 1.4cqw; left: calc(50% + 6.4cqw); z-index: 6; font: 800 max(13px, 2cqw) 'Geist Mono', monospace; color: var(--gold); white-space: nowrap; text-shadow: 0 .2cqw .6cqw rgba(0, 0, 0, .8); animation: pkWon 2.6s ease both; }
.pk-seat.east .pk-won { left: auto; right: calc(50% + 6.4cqw); }
.pk-won.on { display: block; }
@keyframes pkWon { 0% { opacity: 0; transform: translateY(1.5cqw) scale(.7); } 15% { opacity: 1; transform: translateY(-1.5cqw) scale(1.15); } 30%, 100% { opacity: 1; transform: translateY(-1.5cqw) scale(1); } }
@keyframes pkPop { from { transform: translateX(var(--tx, 0)) scale(.6); opacity: 0; } to { opacity: 1; } }

/* bets, the dealer button, flying chips */
.pk-bet { position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: .5cqw; z-index: 3; pointer-events: none; }
.pk-bet b { padding: .15cqw .7cqw; border-radius: 99px; background: rgba(0, 0, 0, .55); font: 700 max(10px, 1.25cqw) 'Geist Mono', monospace; color: #fff; }
.chips { position: relative; display: inline-block; width: 2.3cqw; height: calc(1.3cqw + 6 * .32cqw); }
.chips i { position: absolute; left: 0; bottom: calc(var(--i) * .32cqw); width: 2.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--c);
  border: .22cqw dashed rgba(255, 255, 255, .85); box-shadow: 0 .12cqw 0 rgba(0, 0, 0, .45); box-sizing: border-box; }
.pk-dealer { position: absolute; translate: -50% -50%; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; display: grid; place-items: center; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #fff, #d4d4d8); color: #111; font: 800 max(9px, 1.2cqw) 'Geist', sans-serif; box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .6); transition: left .7s cubic-bezier(.3, .7, .2, 1), top .7s cubic-bezier(.3, .7, .2, 1); }
.pk-fly { position: absolute; translate: -50% -50%; z-index: 8; pointer-events: none; }
.pk-fly .chips { transform: scale(1.3); }
.pk-bet-chips { display: inline-flex; }

/* ---------- the centre: pot, board, what happened ---------- */
.pk-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -56%); width: 50cqw; display: flex; flex-direction: column; align-items: center; gap: 1cqw; z-index: 1; }
.pk-pot { display: flex; align-items: center; gap: .7cqw; padding: .3cqw 1.2cqw .3cqw .6cqw; border-radius: 99px; background: rgba(0, 0, 0, .4); min-height: 3cqw;
  font-size: max(10px, 1.2cqw); color: #d1fae5; flex-wrap: wrap; justify-content: center; }
.pk-pot b { font: 800 max(12px, 1.6cqw) 'Geist Mono', monospace; color: #fff; }
.pk-pot small { flex-basis: 100%; text-align: center; color: #a7f3d0; font-size: max(9px, 1cqw); }
.pk-pot.ghost { background: none; }
.pk-center > * { max-width: 100%; }
.pk-center > .pk-labels { min-height: 3cqw; align-items: center; }
.pk-board { display: flex; gap: .7cqw; }
.pk-board .pc, .pk-slot { --cw: 6.3cqw; }
.pk-slot { position: relative; width: var(--cw); aspect-ratio: 5 / 7; border-radius: calc(var(--cw) * .1); background: rgba(0, 0, 0, .12); border: .15cqw dashed rgba(255, 255, 255, .12); }
.pk-slot > .pc3 { position: absolute; inset: -.15cqw; width: auto; }
.pk-slot.waiting::after { content: ''; position: absolute; inset: -.15cqw; border-radius: calc(var(--cw) * .1); background: var(--card-back); border: calc(var(--cw) * .06) solid #f8fafc;
  box-shadow: 0 0 0 calc(var(--cw) * .05) rgba(250, 204, 21, .8), 0 0 calc(var(--cw) * .6) rgba(250, 204, 21, .5); animation: pkPeel 1.1s ease-in-out infinite; }
.pk-top { min-height: 3.4cqw; display: flex; align-items: center; justify-content: center; }
.pk-wait, .pk-street { padding: .5cqw 1.6cqw; border-radius: 99px; background: rgba(0, 0, 0, .35); color: #d1fae5; animation: pkFade .4s ease both; }
.pk-street { color: rgba(209, 250, 229, .75); font-size: .85em; }
@keyframes pkFade { from { opacity: 0; transform: translateY(15%); } to { opacity: 1; transform: none; } }
.pk-banner > * { animation: pkFade .45s ease both; }
.pk-banner > *:nth-child(2) { animation-delay: .12s; } .pk-banner > *:nth-child(3) { animation-delay: .24s; }

/* a card on the table: two faces and a real flip */
.pc3 { position: relative; flex: none; width: var(--cw); aspect-ratio: 5 / 7; perspective: 900px; border-radius: calc(var(--cw) * .1);
  transition: translate .35s cubic-bezier(.2, .8, .3, 1), filter .35s ease, box-shadow .35s ease; }
.pc3 .pc-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .6s cubic-bezier(.3, .75, .25, 1); }
.pc3.up .pc-in { transform: rotateY(0deg); }
.pc3.slow .pc-in { transition: transform 1.5s cubic-bezier(.65, 0, .25, 1); }
.pc3 .pc-face { --cw: inherit; position: absolute; inset: 0; width: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pc3 .pc-face.back { transform: rotateY(180deg); }
.pc3.hl { translate: 0 -9%; }
.pc3.hl .pc-front { box-shadow: 0 0 0 calc(var(--cw) * .05) var(--gold), 0 calc(var(--cw) * .1) calc(var(--cw) * .35) rgba(250, 204, 21, .5); }
.pc3.hl-me .pc-front { box-shadow: 0 0 0 calc(var(--cw) * .045) rgba(250, 204, 21, .9), 0 calc(var(--cw) * .08) calc(var(--cw) * .28) rgba(250, 204, 21, .3); }
.pc3.dim { filter: brightness(.5) saturate(.5); }
.pc3.rabbit { opacity: .82; }
.pc3.rabbit .pc-front { outline: calc(var(--cw) * .04) dashed rgba(255, 255, 255, .7); outline-offset: calc(var(--cw) * .04); }
.pc3.decisive .pc-front { box-shadow: 0 0 0 calc(var(--cw) * .06) #fb923c, 0 0 calc(var(--cw) * .6) #fb923c; }
.pc3.decisive { animation: pkDecisive 1.6s ease-in-out 2; }
.pk-banner { min-height: 5cqw; display: flex; flex-direction: column; align-items: center; gap: .5cqw; text-align: center; font-size: max(12px, 1.7cqw); }
.pk-banner.wait span { padding: .6cqw 1.6cqw; border-radius: 99px; background: rgba(0, 0, 0, .4); color: #d1fae5; }
.pk-res { padding: .35cqw 1.4cqw; border-radius: 99px; background: rgba(0, 0, 0, .55); font-weight: 700; color: #fff; text-shadow: 0 .15cqw .5cqw rgba(0, 0, 0, .7); animation: pkPop .35s ease both; }
.pk-res small { color: #a7f3d0 !important; }
.pk-res.side { font-weight: 500; font-size: .9em; color: #d1fae5; }
.pk-allin { font: 800 max(14px, 2.2cqw) 'Geist', sans-serif; letter-spacing: .04em; color: #fecaca; text-shadow: 0 0 1.6cqw rgba(239, 68, 68, .9); animation: pkPulse 1s ease-in-out infinite; }
@keyframes pkPulse { 50% { transform: scale(1.08); } }
.pk-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: .5cqw; }
.pk-label { padding: .25cqw 1cqw; border-radius: 99px; font-size: max(10px, 1.15cqw); font-weight: 700; background: #1e293b; color: #e2e8f0; animation: pkPop .4s .3s ease both; }
.pk-label.l-runnerRunner, .pk-label.l-river, .pk-label.l-suckout { background: linear-gradient(90deg, #f97316, #db2777); color: #fff; box-shadow: 0 0 2cqw rgba(249, 115, 22, .5); }
.pk-label.l-badBeat { background: #7f1d1d; color: #fecaca; }
.pk-label.l-cooler { background: #0e7490; color: #cffafe; }
.pk-label.l-monster { background: linear-gradient(90deg, #a855f7, #eab308); color: #fff; }
.pk-label.l-chop { background: #334155; }
.pk-rabbit { font-size: .9em; color: #e0e7ff; }
.pk-next { font-size: max(9px, 1cqw); }

/* ---------- the dock: my hand and my move ---------- */
.pk-dock { flex: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 8px 4px 0; min-height: 108px; }
.pk-dock-left { min-width: 0; }
.pk-dock-right { display: flex; justify-content: flex-end; min-width: 0; }
.pk-mine { display: flex; flex-direction: column; gap: 3px; }
.pk-hand-name { font-size: clamp(1.1rem, 2.2vw, 1.6rem); font-weight: 800; letter-spacing: -.01em; }
.pk-hand-name.cat-4, .pk-hand-name.cat-5 { color: #6ee7b7; } .pk-hand-name.cat-6, .pk-hand-name.cat-7, .pk-hand-name.cat-8 { color: var(--gold); }
.pk-draws { display: flex; flex-wrap: wrap; gap: 5px; }
.pk-draw, .pk-tier { padding: 2px 9px; border-radius: 99px; font-size: .76rem; font-weight: 600; background: rgba(14, 165, 233, .15); color: #7dd3fc; border: 1px solid rgba(14, 165, 233, .35); }
.pk-tier.t-premium { background: rgba(250, 204, 21, .16); color: #fde68a; border-color: rgba(250, 204, 21, .45); }
.pk-tier.t-strong { background: rgba(16, 185, 129, .15); color: #6ee7b7; border-color: rgba(16, 185, 129, .4); }
.pk-tier.t-playable { background: rgba(59, 130, 246, .15); color: #93c5fd; border-color: rgba(59, 130, 246, .4); }
.pk-tier.t-speculative { background: rgba(168, 85, 247, .14); color: #d8b4fe; border-color: rgba(168, 85, 247, .4); }
.pk-tier.t-weak { background: rgba(148, 163, 184, .12); color: #94a3b8; border-color: rgba(148, 163, 184, .3); }
.pk-actions { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pk-sizing { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pk-presets { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.pk-presets button { padding: 4px 11px; font-size: .8rem; font-weight: 700; border-radius: 99px; }
.pk-slider { display: flex; align-items: center; gap: 6px; }
.pk-slider input[type="range"] { width: clamp(140px, 18vw, 260px); accent-color: #f97316; }
.pk-slider input[type="number"] { width: 92px; padding: 6px 8px; font: 700 .9rem 'Geist Mono', monospace; }
.pk-buttons { display: flex; gap: 8px; }
.pk-b { position: relative; min-width: clamp(104px, 10vw, 150px); height: 58px; padding: 6px 16px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 0; color: #fff; font-size: 1rem; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(0, 0, 0, .8); transition: transform .08s, filter .15s; }
.pk-b:hover:not(:disabled) { filter: brightness(1.12); }
.pk-b:active { transform: translateY(1px) scale(.98); }
.pk-b b { font-weight: 800; letter-spacing: .01em; }
.pk-b span { font: 700 .92rem 'Geist Mono', monospace; opacity: .95; }
.pk-b small { position: absolute; top: 4px; right: 8px; font: 600 .62rem 'Geist Mono', monospace; opacity: .5; }
.pk-b.fold { background: linear-gradient(180deg, #ef4444, #991b1b); }
.pk-b.chk, .pk-b.call { background: linear-gradient(180deg, #10b981, #047857); }
.pk-b.raise { background: linear-gradient(180deg, #fb923c, #c2410c); }
.pk-clock { position: absolute; left: -54px; bottom: 8px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 800 1.05rem 'Geist Mono', monospace;
  background: rgba(16, 185, 129, .15); border: 2px solid #10b981; color: #a7f3d0; }
.pk-clock.low { background: rgba(239, 68, 68, .18); border-color: #ef4444; color: #fecaca; animation: pkPulse .5s ease-in-out infinite; }
.pk-pre { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pk-pre-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pk-pre-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font-weight: 600; font-size: .88rem; }
.pk-pre-btn i { width: 15px; height: 15px; border-radius: 4px; border: 2px solid var(--muted); flex: none; }
.pk-pre-btn.on { border-color: #10b981; background: rgba(16, 185, 129, .14); color: #a7f3d0; }
.pk-pre-btn.on i { border-color: #10b981; background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pk-extras { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- side panel ---------- */
.pk-side-body h4 { margin: 14px 0 6px; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pk-hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pk-hist { display: grid; grid-template-columns: 34px auto 1fr auto auto; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); }
.pk-hist:hover { border-color: var(--border-strong); }
.pk-hist-n { font: 600 .74rem 'Geist Mono', monospace; color: var(--muted); }
.pk-hist-cards, .pk-hist-board { display: flex; gap: 2px; }
.pk-hist-who { display: flex; flex-direction: column; min-width: 0; font-size: .78rem; text-align: right; }
.pk-hist-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-hist-net { font: 700 .8rem 'Geist Mono', monospace; min-width: 42px; text-align: right; }
.pk-live { padding: 8px 10px; border-radius: 12px; background: rgba(16, 185, 129, .07); border: 1px solid rgba(16, 185, 129, .25); margin-bottom: 8px; }
.pk-live h4 { margin-top: 0; }
.pk-log-street { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.pk-log-s { font-size: .74rem; font-weight: 700; color: #6ee7b7; margin-right: 4px; }
.pk-log { list-style: none; margin: 2px 0 0; padding: 0 0 0 4px; font-size: .82rem; line-height: 1.55; color: var(--muted); }
.pk-log b { color: var(--text); font-weight: 600; }
.pk-cheat p { margin-top: 0; }
.pk-ranks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pk-ranks li { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 7px 10px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); }
.pk-ranks li.now { border-color: rgba(250, 204, 21, .6); background: rgba(250, 204, 21, .08); box-shadow: 0 0 0 3px rgba(250, 204, 21, .12); }
.pk-ranks li.now b { color: var(--gold); }
.pk-rank-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pk-rank-cards { display: flex; gap: 3px; }
.pk-tips { margin: 0; padding-left: 18px; font-size: .84rem; line-height: 1.5; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.pk-session .pk-facts { display: flex; flex-direction: column; gap: 3px; font-size: .88rem; margin-bottom: 10px; }
.pk-standings, .pk-eq-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.pk-standings th, .pk-eq-table th { text-align: right; font-weight: 600; color: var(--muted); font-size: .74rem; padding: 4px 6px; }
.pk-standings td, .pk-eq-table td { text-align: right; padding: 5px 6px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.pk-standings td:first-child, .pk-eq-table td:first-child { text-align: left; font-weight: 600; }
.pk-standings tr.me td { color: var(--gold); }
.pk-session .check { margin: 6px 0; }

/* one hand */
.pk-hand-sheet .pk-board.sm { justify-content: center; margin-bottom: 12px; gap: 6px; }
.pk-hand-sheet .pk-labels { margin-bottom: 10px; }
.pk-hand-sheet .pk-label { font-size: .8rem; }
.pk-hand-players { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pk-hand-players li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.pk-hand-players li.won { border-color: rgba(250, 204, 21, .45); }
.pk-hand-players .pk-pos { position: static; }
.pk-hand-pots { margin-top: 10px; font-size: .88rem; display: flex; flex-direction: column; gap: 3px; }
.pk-cheat-sheet { width: min(560px, 100%); }
.pk-final li .avatar { width: 34px; height: 34px; }

/* ---------- stickers ---------- */
.pk-sticker-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; }
.pk-sticker-btn .st { width: 28px; height: 28px; }
.pk-sticker-pop { position: fixed; z-index: 30; width: 340px; padding: 10px; border-radius: 18px; background: rgba(20, 20, 28, .98); border: 1px solid var(--border-strong); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9); animation: pop .2s ease; }
.pk-sticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pk-sticker { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 12px; background: transparent; border: 1px solid transparent; font-size: .68rem; font-weight: 600; }
.pk-sticker:hover { background: var(--surface-2); border-color: var(--border); }
.pk-sticker .st { width: 48px; height: 48px; transition: transform .15s; }
.pk-sticker:hover .st { transform: scale(1.12) rotate(-4deg); }
.pk-sticker-say { position: absolute; bottom: calc(100% - 1cqw); left: 50%; translate: -50% 0; z-index: 9; display: flex; flex-direction: column; align-items: center; gap: .2cqw; pointer-events: none;
  animation: stIn .45s cubic-bezier(.2, 1.6, .4, 1) both; transition: opacity .35s, transform .35s; }
.pk-sticker-say .st { width: 7cqw; height: 7cqw; filter: drop-shadow(0 .5cqw 1cqw rgba(0, 0, 0, .6)); }
.pk-sticker-say span { padding: .15cqw .8cqw; border-radius: 99px; background: #fff; color: #111; font-size: max(10px, 1.1cqw); font-weight: 800; white-space: nowrap; box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .5); }
.pk-seat.top .pk-sticker-say { bottom: auto; top: calc(100% - 1cqw); }
.pk-sticker-say.out { opacity: 0; transform: translateY(-1cqw) scale(.85); }
@keyframes stIn { from { transform: scale(.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.st .st-a, .st .st-b { transform-box: fill-box; transform-origin: center; }
.st-nh .st-a { animation: stBob .9s ease-in-out infinite; transform-origin: 30% 100%; }
.st-gg .st-a { animation: stTwinkle 1.2s ease-in-out infinite; }
.st-ship .st-a { animation: stSlide 1s ease-in-out infinite; }
.st-fish .st-a { animation: stSwim 1.4s ease-in-out infinite; }
.st-tilt .st-a { animation: stSteam 1s ease-out infinite; }
.st-tilt { animation: stShake .25s linear infinite; }
.st-bluff .st-a { animation: stLook 2s ease-in-out infinite; }
.st-snap .st-a { animation: stFlash .6s steps(2) infinite; }
.st-cry .st-a { animation: stTears 1s ease-in infinite; }
.st-lucky .st-a { animation: stSpin 3s linear infinite; }
.st-think .st-a { animation: stFlip 2s ease-in-out infinite; }
.st-allin .st-a { animation: stPush .8s ease-in-out infinite; }
.st-allin .st-b { animation: stLines .8s ease-in-out infinite; }
.st-cooler .st-a { animation: stSpin 6s linear infinite; }
.pk-sticker-btn .st *, .pk-sticker .st *, .pk-sticker-btn .st, .pk-sticker .st { animation: none !important; }
.pk-sticker:hover .st .st-a { animation: stBob .9s ease-in-out infinite !important; }
@keyframes stBob { 50% { transform: rotate(-12deg) translateY(-6%); } }
@keyframes stTwinkle { 50% { opacity: .2; transform: scale(.6); } }
@keyframes stSlide { 50% { transform: translateY(-8%); } }
@keyframes stSwim { 0%, 100% { transform: translateX(-6%) rotate(-3deg); } 50% { transform: translateX(6%) rotate(3deg); } }
@keyframes stSteam { from { transform: translateY(10%) scale(.6); opacity: .9; } to { transform: translateY(-25%) scale(1.2); opacity: 0; } }
@keyframes stShake { 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }
@keyframes stLook { 0%, 100% { transform: translateX(-12%); } 50% { transform: translateX(12%); } }
@keyframes stFlash { 50% { opacity: .55; transform: scale(1.06); } }
@keyframes stTears { from { transform: translateY(0); opacity: 1; } to { transform: translateY(40%); opacity: 0; } }
@keyframes stSpin { to { transform: rotate(360deg); } }
@keyframes stFlip { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(180deg); } }
@keyframes stPush { 50% { transform: translateX(6%); } }
@keyframes stLines { 50% { transform: translateX(-12%); opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  .pc.flip, .pc.flip.slow, .pc.deal, .pc.back.squeeze, .pc.decisive, .pc3.decisive, .pk-allin, .st, .st *, .pk-slot.waiting::after { animation: none !important; }
  .pc3 .pc-in { transition: none !important; }
}
@media (max-width: 700px) {
  .pk-dock { flex-direction: column; align-items: stretch; }
  .pk-dock-right { justify-content: stretch; }
  .pk-actions, .pk-sizing { align-items: stretch; }
  .pk-buttons .pk-b { flex: 1; min-width: 0; }
  .pk-clock { position: static; align-self: center; }
}

/* playing for: site chips or USDT */
.pk-bank { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pk-bank-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 13px; border-radius: 13px; text-align: left; }
.pk-bank-opt small { font-size: .74rem; color: var(--muted); font-weight: 500; line-height: 1.35; }
.pk-bank-opt.on { border-color: #10b981; background: rgba(16, 185, 129, .12); }
.pk-bank-opt.on[data-bank="usdt"] { border-color: #26a17b; background: rgba(38, 161, 123, .16); }
.pk-bank-opt:disabled { cursor: default; opacity: 1; }
.pk-bank-opt:disabled:not(.on) { opacity: .5; }
.pk-usdt-row { margin-top: 10px; }
.pk-set-sum { margin-top: 12px; }
.pk-set-sum.usdt { background: rgba(38, 161, 123, .12); border-color: rgba(38, 161, 123, .45); color: #bbf7d0; }
.pk-consent { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(38, 161, 123, .1); border: 1px solid rgba(38, 161, 123, .35); font-size: .84rem; line-height: 1.45; }
.pk-lot-price.short { color: #f87171; }
.pk-usd { font: 700 .95rem 'Geist Mono', monospace; color: #6ee7b7; }
.pk-addr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pk-addr code { font: 600 .78rem 'Geist Mono', monospace; padding: 3px 7px; border-radius: 7px; background: rgba(0, 0, 0, .35); word-break: break-all; }
.pk-tx { flex: 1 1 220px; min-width: 0; font: 600 .78rem 'Geist Mono', monospace; padding: 6px 8px; }
.pk-usdt-form { gap: 8px; flex-wrap: wrap; }
.pk-usdt-form select { flex: 0 0 auto; }
.pk-usdt-form input { flex: 1 1 260px; min-width: 0; font-family: 'Geist Mono', monospace; font-size: .85rem; }
.pk-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.pk-ach { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); opacity: .55; }
.pk-ach.got { opacity: 1; border-color: rgba(250, 204, 21, .45); background: linear-gradient(160deg, rgba(250, 204, 21, .12), var(--surface-2)); }
.pk-ach .pk-lot-price { font-size: .8rem; }
.pk-home-wallet { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; margin-top: 8px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(250, 204, 21, .1), var(--surface-2)); border: 1px solid rgba(250, 204, 21, .3); }
.pk-home-wallet .pk-lot-price { font-size: 1.15rem; }

/* debts */
  background: #dc2626; color: #fff; font: 800 max(9px, 1.1cqw) 'Geist', sans-serif; box-shadow: 0 0 1cqw rgba(239, 68, 68, .7); }

/* settlements */
.pk-pl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-pl { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); flex-wrap: wrap; }
.pk-pl > div { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-pl > div > b { display: flex; align-items: baseline; gap: 8px; }
.pk-pl.owe { border-color: rgba(239, 68, 68, .3); } .pk-pl.owed { border-color: rgba(16, 185, 129, .35); }
.pk-pl.st-received, .pk-pl.st-forgiven { opacity: .6; }
.pk-transfers { margin: 0 0 6px; padding-left: 18px; line-height: 1.7; }

/* the fair deal check */
.pk-fair-sheet { max-width: 640px; }
.pk-fair-sum { margin: 0 0 8px; }
.pk-fair-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.pk-fair-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.pk-fair-table th, .pk-fair-table td { padding: 5px 6px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pk-fair-table th { font-weight: 600; color: var(--muted); font-size: .75rem; }
.pk-fair-table tr.bad td { background: rgba(224, 70, 78, .12); }
.pk-fair-board { display: flex; gap: 2px; flex-wrap: wrap; }
.pk-fair-line code, .pk-fair-sheet code { font-family: 'Geist Mono', monospace; font-size: .8em; }

/* the session's final standings */
.pk-final { list-style: none; padding: 0; margin: 0 0 12px; }
.pk-final li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pk-final li .board-rank { width: 28px; text-align: center; font-size: 1.2rem; }
.pk-final li.first b:first-of-type { color: #f5c542; }