/* =====================================================================
   Покер — one oval table for 2–5 players, everything scoped under .g-poker.
   The felt is a size container: seats, cards and bands are derived from its
   own width/height (cqw/cqh), so the table fits one screen from ~375×560 up
   to a full desktop window without scrolling. Opponents sit on the top arc
   (positions come from JS as % of the felt, portrait and landscape sets),
   the board and pots fill the middle band, my seat is the bottom band.
   ===================================================================== */
.g-poker {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 0;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body.in-game .g-poker { height: 100%; }
body:not(.in-game) .g-poker { height: 600px; }

.g-poker .pk-felt {
  container: pkf / size;
  position: relative; flex: 1 1 auto; min-height: 0;
  /* sizes, resolved on descendants against this felt */
  --av: clamp(30px, min(10cqw, 8.2cqh), 52px);            /* opponent avatar          */
  --oc: clamp(15px, min(5.4cqw, 4.4cqh), 30px);           /* opponent card back       */
  --ocf: clamp(24px, min(9cqw, 7.2cqh), 46px);            /* opponent card face up    */
  --bc: clamp(34px, min(13.4cqw, 14.5cqh), 88px);         /* board card               */
  --hc: clamp(44px, min(19cqw, 15.5cqh), 100px);          /* my hole card             */
  --meh: calc(var(--hc) * 1.42 + 32px);                   /* my band height           */
}

/* ---------- the oval ---------- */
.g-poker .pk-oval {
  position: absolute; z-index: 0; left: 2%; right: 2%; top: 7%; bottom: calc(var(--meh) * .5);
  border-radius: 50%; background: #15281f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 0 7px #0f1c16, 0 0 0 8px rgba(255, 255, 255, .04);
}

/* ---------- opponent seats (the element is the avatar box, centred on its point) ---------- */
.g-poker .pk-seat {
  position: absolute; z-index: 3; width: var(--av); height: var(--av);
  left: calc(var(--xp) * 1%); top: calc(var(--yp) * 1%); translate: -50% -50%;
  transition: opacity .3s;
}
.g-poker .pk-ava { position: relative; z-index: 2; width: var(--av); height: var(--av); }
.g-poker .pk-ava .av { width: 100% !important; height: 100% !important; font-size: calc(var(--av) * .4) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 4px 10px rgba(0, 0, 0, .45); transition: box-shadow .25s, filter .3s; }
.g-poker .active > .pk-ava .av, .g-poker .pk-me.active .pk-ava .av { box-shadow: 0 0 0 3px var(--red), 0 4px 10px rgba(0, 0, 0, .45); }
.g-poker .won > .pk-ava .av, .g-poker .pk-me.won .pk-ava .av { box-shadow: 0 0 0 3px var(--green), 0 4px 10px rgba(0, 0, 0, .45); }
.g-poker .pk-seat.st-folded { opacity: .5; }
.g-poker .pk-seat.st-out { opacity: .45; }
.g-poker .pk-seat.st-out .av { filter: grayscale(1); }

.g-poker .pk-badges { position: absolute; z-index: 3; top: -5px; right: -9px; display: flex; gap: 2px; }
.g-poker .pk-d, .g-poker .pk-blind {
  display: inline-grid; place-items: center; height: 16px; border-radius: 8px; font-size: 9px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}
.g-poker .pk-d { width: 16px; background: #fff; color: #111; }
.g-poker .pk-blind { padding: 0 4px; background: #2c2c31; color: rgba(255, 255, 255, .85); }

.g-poker .pk-rib {
  display: inline-block; padding: 1px 6px; border-radius: 6px; white-space: nowrap;
  background: #2c2c31; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.35; box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}
.g-poker .pk-seat > .pk-rib { position: absolute; z-index: 5; left: 50%; bottom: -7px; translate: -50% 0; max-width: calc(var(--av) + 34px); overflow: hidden; text-overflow: ellipsis; }
.g-poker .pk-seat.shown > .pk-rib { bottom: auto; top: calc(var(--ocf) * -.62); }
.g-poker .pk-rib.fold { background: #3a3a40; color: rgba(255, 255, 255, .7); }
.g-poker .pk-rib.allin { background: var(--red); }
.g-poker .pk-rib.out { background: #111; color: rgba(255, 255, 255, .6); }
.g-poker .pk-rib.won { background: var(--green); color: #04210f; }
.g-poker .pk-rib.rebuy { background: #e8b23a; color: #2b1a02; }
.g-poker .pk-seat.st-left { opacity: .35; }
.g-poker .pk-seat.st-left .av, .g-poker .pk-seat.st-rebuy .av { filter: grayscale(1); }

.g-poker .pk-tag {
  position: absolute; z-index: 2; top: calc(100% + 7px); left: 50%; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 0; overflow: hidden;
  max-width: clamp(64px, 23cqw, 140px); padding: 2px 8px 3px; border-radius: 10px; background: rgba(0, 0, 0, .55);
}
.g-poker .pk-tag b { max-width: 100%; font-size: clamp(10.5px, 2.2cqw, 13px); font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, .9); }
.g-poker .pk-stk { display: inline-flex; align-items: center; gap: 4px; font-size: clamp(11px, 2.3cqw, 14px); font-weight: 800; line-height: 1.25;
  color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-poker .pk-tbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left center; background: var(--red);
  animation: pk-tbar var(--ms, 30000ms) linear forwards;
}
@keyframes pk-tbar { from { transform: scaleX(var(--f, 1)); } to { transform: scaleX(0); } }

/* hole cards: backs peek out from behind the avatar, face-up cards cover it at showdown */
.g-poker .pk-ocards { position: absolute; z-index: 1; left: 50%; bottom: 58%; translate: -50% 0; display: flex; }
.g-poker .pk-ocards .pc3 { --cw: var(--oc); }
.g-poker .pk-ocards .pc3:first-child { rotate: -10deg; }
.g-poker .pk-ocards .pc3 + .pc3 { margin-left: calc(var(--oc) * -.45); rotate: 10deg; }
.g-poker .pk-ocards .pc3-back::after { display: none; }
.g-poker .pk-ocards.face { z-index: 4; bottom: auto; top: 50%; translate: -50% -58%; }
.g-poker .pk-ocards.face .pc3 { --cw: var(--ocf); rotate: none; }
.g-poker .pk-ocards.face .pc3 + .pc3 { margin-left: calc(var(--ocf) * -.22); }
.g-poker .pk-ocards.face .pc3-face { box-shadow: 0 3px 10px rgba(0, 0, 0, .55); }

/* ---------- bets (pushed from each seat toward the centre) ---------- */
.g-poker .pk-bet { position: absolute; z-index: 2; left: calc(var(--xp) * 1%); top: calc(var(--yp) * 1%); translate: -50% -50%; }
.g-poker .pk-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 5px; border-radius: 999px;
  background: rgba(0, 0, 0, .5); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.g-poker .pk-chip.won { padding: 0 8px; color: var(--green); animation: pk-in .35s var(--ease-out) .6s both; }
.g-poker .pk-ci {
  display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--red); box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3.5px rgba(255, 255, 255, .85);
}
.g-poker .pk-fly { position: absolute; z-index: 20; width: 14px; height: 14px; pointer-events: none; will-change: transform, opacity; }

/* ---------- middle band: pots, board, info / result ---------- */
.g-poker .pk-mid {
  position: absolute; z-index: 1; left: 3%; right: 3%; top: 31%; bottom: calc(var(--meh) + 4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 0;
}
.g-poker .pk-felt[data-k="3"] .pk-mid, .g-poker .pk-felt[data-k="4"] .pk-mid { top: 35%; }
.g-poker .pk-pots { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 24px; max-width: 100%; }
.g-poker .pk-sides { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; }
.g-poker .pk-pill {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .4); font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .8); white-space: nowrap;
}
.g-poker .pk-pill.side { height: 20px; padding: 0 8px; background: rgba(0, 0, 0, .28); font-size: 11px; }
.g-poker .pk-pill.mine { box-shadow: inset 0 0 0 1.5px var(--green); }
.g-poker .pk-pill b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.g-poker .pk-board { display: flex; justify-content: center; gap: calc(var(--bc) * .09); }
.g-poker .pk-board .pc3 { --cw: var(--bc); }
.g-poker .pk-slot { flex: none; width: var(--bc); height: calc(var(--bc) * 1.42); border-radius: calc(var(--bc) * .11); background: rgba(255, 255, 255, .06); }
.g-poker .pk-msg { min-height: 24px; max-width: 100%; display: grid; place-items: center; }
.g-poker .pk-info { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .55); text-align: center; white-space: nowrap; }
.g-poker .pk-note { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.g-poker .pk-banner {
  max-width: 100%; padding: 5px 12px; border-radius: 12px; background: rgba(0, 0, 0, .45); color: #fff;
  font-size: 13px; font-weight: 700; text-align: center; animation: pk-in .35s var(--ease-out) both;
}
.g-poker .pk-banner.win { background: rgba(61, 220, 132, .16); color: var(--green); }
.g-poker .pk-banner.lose { background: rgba(var(--red-rgb), .16); color: #ff6b85; }

/* showdown: winning five lift, the rest dim */
.g-poker .pc3 { transition: transform .35s var(--ease-out), filter .35s; }
.g-poker.pk-sd .pk-board .pc3.win, .g-poker.pk-sd .pk-mycards .pc3.win { transform: translateY(-4px); }

/* ---------- my seat: bottom band ---------- */
.g-poker .pk-me { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: var(--meh); }
.g-poker .pk-me .pk-bet { left: 50%; top: 2px; translate: -50% 0; }
.g-poker .pk-mycards { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: flex; gap: 6px; transition: opacity .3s; }
.g-poker .pk-mycards .pc3 { --cw: var(--hc); }
.g-poker .pk-mycards .pc3:first-child { rotate: -3deg; }
.g-poker .pk-mycards .pc3 + .pc3 { rotate: 3deg; }
.g-poker .pk-me.st-folded .pk-mycards { opacity: .4; }
.g-poker .pk-gone { padding: 8px 14px; border-radius: 12px; background: rgba(0, 0, 0, .45); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.g-poker .pk-meinfo, .g-poker .pk-meside {
  position: absolute; bottom: 0; width: calc(50% - var(--hc) - 10px); display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.g-poker .pk-meinfo { left: 0; align-items: flex-start; }
.g-poker .pk-meside { right: 0; align-items: flex-end; text-align: right; }
.g-poker .pk-me .pk-ava { --av: clamp(30px, min(9cqw, 7.4cqh), 46px); }
.g-poker .pk-me .pk-badges { right: auto; left: calc(var(--av) - 4px); }
.g-poker .pk-me .pk-tag { position: relative; top: auto; left: auto; translate: none; align-items: flex-start; max-width: 100%; }
.g-poker .pk-hint { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .7); line-height: 1.25; }
.g-poker .pk-hint.won { color: var(--green); }
.g-poker .pk-said { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.g-poker .pk-strike { font-size: 11.5px; color: var(--lose); white-space: nowrap; }
.g-poker .pk-usd { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-poker .pk-rebuy { height: 24px; padding: 0 10px; border-radius: 999px; background: var(--panel-3); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.g-poker .pk-rebuy:active { transform: scale(.96); }
.g-poker .pk-rebuy[disabled] { opacity: .5; }
.g-poker .pk-topup { font-size: 11.5px; font-weight: 600; color: var(--green); text-align: right; line-height: 1.25; }

/* busted / left: the action bar becomes the rebuy-or-leave choice */
.g-poker .pk-bust { display: flex; flex-direction: column; gap: 8px; }
.g-poker .pk-bust-t { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; }
.g-poker .pk-bust-t b { font-weight: 800; }

/* ---------- landscape tables (desktop, tablets on their side) ---------- */
@container pkf (min-aspect-ratio: 6/5) {
  .g-poker .pk-seat, .g-poker .pk-bet { left: calc(var(--xl) * 1%); top: calc(var(--yl) * 1%); }
  .g-poker .pk-me .pk-bet { left: 50%; top: 2px; }
  .g-poker .pk-oval { left: 6%; right: 6%; top: 9%; }
  .g-poker .pk-mid, .g-poker .pk-felt[data-k="3"] .pk-mid, .g-poker .pk-felt[data-k="4"] .pk-mid { top: 31%; left: 24%; right: 24%; }
  .g-poker .pk-meinfo { left: calc(50% - var(--hc) - 220px); width: 200px; }
  .g-poker .pk-meside { right: calc(50% - var(--hc) - 220px); width: 200px; }
  .g-poker .pk-info, .g-poker .pk-pill { font-size: 13px; }
  .g-poker .pk-banner { font-size: 15px; padding: 7px 16px; }
}

/* ---------- action bar ---------- */
.g-poker .pk-actions { position: relative; flex: none; display: flex; flex-direction: column; gap: 8px; min-height: 46px; }
.g-poker .pk-wait { margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; }
.g-poker .pk-bar { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.g-poker .pk-bar.n2 { grid-template-columns: repeat(2, 1fr); }
.g-poker .pk-bar.n1 { grid-template-columns: 1fr; }
.g-poker .pk-bar .btn { min-width: 0; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 960px) { .g-poker .pk-bar, .g-poker .pk-wait, .g-poker .pk-raise { width: min(100%, 560px); margin: 0 auto; } }

/* the raise panel pops up as a sheet over the table instead of pushing the layout */
.g-poker .pk-raise {
  display: none; position: absolute; z-index: 30; left: 0; right: 0; bottom: calc(100% + 8px);
  flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r); background: var(--panel-2);
  box-shadow: 0 -16px 40px rgba(0, 0, 0, .65);
}
.g-poker .pk-raise.open { display: flex; animation: pk-in .25s var(--ease-out); }
.g-poker .pk-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.g-poker .pk-presets .btn { padding: 0 4px; min-width: 0; font-size: 12.5px; }
.g-poker .pk-presets .btn.on { background: #fff; color: #111; }
.g-poker .pk-slide { display: flex; align-items: center; gap: 10px; }
.g-poker .pk-nudge { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--panel-3); font-size: 18px; font-weight: 700; }
.g-poker .pk-nudge:active { transform: scale(.94); }
.g-poker .pk-range { flex: 1; min-width: 0; height: 30px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.g-poker .pk-range:focus { outline: none; }
.g-poker .pk-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--red) 0 var(--p), var(--panel-3) var(--p) 100%); }
.g-poker .pk-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--panel-3); }
.g-poker .pk-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--red); }
.g-poker .pk-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.g-poker .pk-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }

@keyframes pk-in { from { opacity: 0; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  .g-poker .pk-tbar, .g-poker .pk-raise.open, .g-poker .pk-banner, .g-poker .pk-chip.won { animation: none; }
}