/* =========================================================
   Jekpoti — Texas Hold'em poker
   The table (four computer players along the top, the community cards, the player at the bottom),
   cards, the action bar with its clock, the history and the guide / hand-rankings panels.
   Shared parts come from game-ui.css (.mhead, .logo, .msg, .paytable).
   Sized so that the table and the action bar fit on one screen, on a laptop and on a phone.
   ========================================================= */
body[data-theme="poker"] {
  background: radial-gradient(ellipse 80% 60% at 50% 30%, #1d6b4f 0%, #0d3b2e 55%, #061a16 100%);
}
/* fixed heights: a longer or shorter message never moves the table (a long result scrolls inside the box) */
#pkMsg {
  height: 58px;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  margin: 0 auto 8px;
  line-height: 1.3;
}
@media (max-height: 820px) {
  #pkHead .cr-tag {
    display: none;
  }
} /* short screens: the tagline makes room for the table */

/* ---------- status line: round · pot · current bet · to call · blinds · your hand ---------- */
.pk-status {
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  gap: 8px;
  max-width: 900px;
  height: 30px;
  margin: 0 auto 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pk-status::-webkit-scrollbar {
  display: none;
}
.pk-status span {
  flex: 0 0 auto;
  white-space: nowrap;
  background: rgba(6,3,14,.72);
  border: 1px solid var(--line);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #e2fff2;
}
.pk-status b {
  color: var(--gold);
}
.pk-status .hot {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255,209,102,.35);
}

/* ---------- the table: four bots along the top, the cards in the middle, the player at the bottom ---------- */
.pk-table {
  --pkw: 36px;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
  grid-template-areas:
    "s1 s2 s3 s4"
    "c  c  c  c"
    ".  s0 s0 .";
  border-radius: 30px;
  background: radial-gradient(ellipse at 50% 40%, #1f8a5e, #0e5139 72%);
  border: 8px solid #5a3417;
  box-shadow: inset 0 0 50px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.55);
}
.pk-seat.s0 {
  grid-area: s0;
}
.pk-seat.s1 {
  grid-area: s1;
}
.pk-seat.s2 {
  grid-area: s2;
}
.pk-seat.s3 {
  grid-area: s3;
}
.pk-seat.s4 {
  grid-area: s4;
}
.pk-seat {
  min-width: 0;
  transition: opacity .3s;
}
.pk-seat.folded {
  opacity: .45;
}
.pk-hole {
  display: flex;
  gap: 3px;
  min-height: calc(var(--pkw) * 1.4);
}
.pk-ava {
  font-size: 20px;
  line-height: 1;
}
.pk-who b {
  font-size: 13px;
  line-height: 1.15;
}
.pk-stack {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
}
.pk-tags {
  display: flex;
  gap: 3px;
}
.pk-dealer,
.pk-blind,
.pk-afk {
  display: grid;
  place-items: center;
  height: 19px;
  min-width: 19px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
}
.pk-dealer {
  background: #fff;
  color: #222;
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.pk-blind {
  background: rgba(255,255,255,.14);
  color: #e2fff2;
}
.pk-afk {
  background: #5c1a2a;
  color: #ffb3bd;
  padding: 0 6px;
}
.pk-move {
  min-height: 16px;
  font-size: 12px;
  font-weight: 900;
  color: #e2fff2;
  text-shadow: 0 1px 3px #000;
}
.pk-bet {
  min-height: 20px;
}
.pk-chip {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  background: radial-gradient(circle, #ff9f1c 0 55%, #c96a00);
  border: 2px dashed #fff;
  color: #fff;
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  font-size: 11.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
.pk-chip.won {
  background: radial-gradient(circle, #2fbf5a 0 55%, #146b2c);
  animation: in .3s ease;
}

/* a computer player: name on its own line (never squeezed), then cards · badges · stack, then the last move · bet */
.pk-seat:not(.s0) {
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr);
  align-items: center;
  gap: 3px 6px;
  grid-template-areas:
    "ava  name name"
    "hole tags stack"
    "move move bet";
  padding: 6px 8px;
  border-radius: 14px;
  background: rgba(6,3,14,.55);
  border: 2px solid transparent;
  transition: opacity .3s, border-color .2s, box-shadow .2s;
}
.pk-seat:not(.s0) .pk-plate,
.pk-seat:not(.s0) .pk-who {
  display: contents;
}
.pk-seat:not(.s0) .pk-ava {
  grid-area: ava;
}
.pk-seat:not(.s0) .pk-who b {
  grid-area: name;
}
.pk-seat:not(.s0) .pk-hole {
  grid-area: hole;
}
.pk-seat:not(.s0) .pk-tags {
  grid-area: tags;
  flex-direction: column;
}
.pk-seat:not(.s0) .pk-stack {
  grid-area: stack;
}
.pk-seat:not(.s0) .pk-move {
  grid-area: move;
}
.pk-seat:not(.s0) .pk-bet {
  grid-area: bet;
  justify-self: end;
}
.pk-seat.turn:not(.s0) {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(255,209,102,.45);
}
.pk-seat.turn:not(.s0) .pk-move {
  color: var(--gold);
}
.pk-seat.won:not(.s0) {
  border-color: #7df59a;
  box-shadow: 0 0 16px rgba(125,245,154,.5);
}
.pk-seat.empty:not(.s0) {
  opacity: .7;
}

/* the player: cards above the name plate, the last move and bet below */
.pk-seat.s0 {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 4px 8px;
  grid-template-areas: "hole hole" "plate plate" "hand hand" "move bet";
}
.pk-seat.s0 .pk-hole {
  grid-area: hole;
  --pkw: 48px;
}
.pk-seat.s0 .pk-plate {
  grid-area: plate;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: rgba(6,3,14,.85);
  border: 2px solid rgba(255,255,255,.14);
  transition: border-color .2s, box-shadow .2s;
}
.pk-seat.s0 .pk-who {
  display: flex;
  flex-direction: column;
}
.pk-seat.s0 .pk-move {
  grid-area: move;
}
.pk-seat.s0 .pk-bet {
  grid-area: bet;
}
.pk-seat.s0.turn .pk-plate {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(255,209,102,.35), 0 0 18px rgba(255,209,102,.5);
}
.pk-seat.s0.won .pk-plate {
  border-color: #7df59a;
  box-shadow: 0 0 18px rgba(125,245,154,.55);
}
.pk-seat.s0.allin .pk-plate::after {
  content: 'ALL-IN';
  font-size: 10px;
  font-weight: 900;
  color: #ff9aa6;
}
.pk-seat.s0.empty .pk-plate {
  opacity: .6;
  border-style: dashed;
}
.pk-handname {
  grid-area: hand;
  min-height: 26px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 800;
  color: #e2fff2;
  background: rgba(6,3,14,.6);
  border: 1px solid rgba(255,209,102,.45);
  white-space: nowrap;
}
.pk-handname:empty {
  visibility: hidden;
}
.pk-handname b {
  color: var(--gold);
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  font-weight: 400;
  letter-spacing: .3px;
}
.pk-handname.strong {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(255,209,102,.45);
}

/* the middle: round name and pot on one line, the community cards below */
.pk-center {
  grid-area: c;
  display: grid;
  grid-template-areas: "street pot" "board board";
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 6px 14px;
  padding: 4px 0;
}
.pk-street {
  grid-area: street;
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(255,230,150,.85);
}
.pk-board {
  grid-area: board;
  display: flex;
  gap: 5px;
  --pkw: clamp(40px, 4.8vw, 50px);
}
.pk-pot {
  grid-area: pot;
  padding: 3px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.4);
  font-weight: 900;
  color: #e2fff2;
}
.pk-pot:empty {
  visibility: hidden;
}
.pk-pot b {
  color: var(--gold);
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  font-weight: 400;
}

/* ---------- cards ---------- */
.pk-card {
  position: relative;
  flex: 0 0 auto;
  width: var(--pkw, 48px);
  height: calc(var(--pkw, 48px) * 1.4);
  border-radius: calc(var(--pkw, 48px) * .12);
  background: linear-gradient(160deg, #fff, #f1ece2);
  border: 1px solid #cfc6b4;
  color: #151515;
  box-shadow: 0 3px 8px rgba(0,0,0,.45);
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  transition: opacity .3s, transform .3s, box-shadow .3s;
}
.pk-card.red {
  color: #c8102e;
}
.pk-card b {
  position: absolute;
  left: 8%;
  top: 4%;
  font-weight: 400;
  font-size: calc(var(--pkw, 48px) * .3);
  line-height: 1;
}
.pk-card i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 18%;
  font-style: normal;
  font-size: calc(var(--pkw, 48px) * .55);
}
.pk-card.back {
  background: repeating-linear-gradient(45deg, #7b2ff7 0 6px, #5a1fc0 6px 12px);
  border: 3px solid #fff;
}
.pk-card.back::after {
  content: '🤡';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--pkw, 48px) * .4);
}
.pk-card.slot {
  background: rgba(0,0,0,.18);
  border: 2px dashed rgba(255,255,255,.25);
  box-shadow: none;
}
.pk-card.win {
  transform: translateY(-4px);
  box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255,209,102,.8);
}
.pk-card.dim {
  opacity: .45;
}
.pk-card.mine {
  box-shadow: 0 0 0 2px rgba(255,209,102,.9), 0 3px 8px rgba(0,0,0,.45);
} /* during the hand: the cards of your current hand */
.pk-card.deal {
  animation: pkdeal .35s cubic-bezier(.2,.8,.3,1) both;
}
.pk-card.flip {
  animation: pkflip .4s ease both;
}
.pk-card.small {
  --pkw: 30px;
}
@keyframes pkdeal {
  from {
    transform: translateY(-40px) rotate(-10deg) scale(.85);
    opacity: 0;
  }
}
@keyframes pkflip {
  from {
    transform: rotateY(90deg);
  }
}

/* ---------- the action bar: always in view while the page scrolls ---------- */
.pk-bar {
  position: sticky;
  bottom: 8px;
  z-index: 25;
  max-width: 900px;
  margin: 10px auto 0;
  padding: 10px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg,rgba(24,14,46,.96),rgba(4,2,10,.97));
  border: 1px solid rgba(255,215,94,.4);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
/* the clock on top of the bar: your time to move, who is thinking, or the time to the next hand */
.pk-bartop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pk-timer {
  position: relative;
  flex: 1;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 900;
}
.pk-timer i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  background: rgba(255,255,255,.12);
  transition: width .25s linear;
}
.pk-timer.mine i {
  background: linear-gradient(90deg,rgba(47,191,90,.6),rgba(255,209,102,.6));
}
.pk-timer.urgent i {
  background: rgba(255,90,95,.7);
}
.pk-timer span {
  position: relative;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pk-stand {
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 800;
  font-size: 12.5px;
}
.pk-stand:hover {
  color: var(--text);
  border-color: var(--muted);
}
.pk-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 96px;
}
.pk-stackinfo {
  margin: 0;
  color: #e8ddff;
  font-weight: 700;
}
.pk-stackinfo b {
  color: var(--gold);
}
.pk-stackinfo small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 700;
}
.pk-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
}
.pk-raisebox {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pk-raisebox.off {
  opacity: .4;
}
.pk-raisebox input[type=range] {
  flex: 1 1 180px;
  accent-color: var(--gold);
}
.pk-raisebox input[type=number] {
  width: 96px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #444;
  background: #000;
  color: #fff;
  font: 400 17px 'Bungee',sans-serif;
  text-align: center;
}
.pk-preset {
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--panel2);
  border: 1px solid var(--line);
  font-weight: 800;
  font-size: 13px;
}
.pk-preset:disabled,
.pk-raisebox input:disabled {
  cursor: not-allowed;
}
.pk-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.pk-btn {
  padding: 12px 6px;
  border-radius: 14px;
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  font-size: clamp(14px,2.2vw,18px);
  line-height: 1.15;
  color: #fff;
  transition: transform .08s;
  touch-action: manipulation;
}
.pk-btn small {
  display: block;
  font-family: 'Nunito','Noto Sans Georgian',sans-serif;
  font-weight: 900;
  font-size: 12px;
  opacity: .9;
}
.pk-btn.fold {
  background: linear-gradient(180deg,#ff8a95,#c9303f);
  box-shadow: 0 5px 0 #7a1020;
}
.pk-btn.call,
.pk-btn.sit {
  background: linear-gradient(180deg,#7df59a,#2fbf5a);
  color: #06240f;
  box-shadow: 0 5px 0 #146b2c;
}
.pk-btn.sit {
  min-width: 200px;
  padding: 13px 24px;
}
.pk-btn.raise {
  background: linear-gradient(180deg,#ffe08a,#ffb703);
  color: #2b1500;
  box-shadow: 0 5px 0 #a35c00;
}
.pk-btn.allin {
  background: linear-gradient(180deg,#c39bff,#7b2ff7);
  box-shadow: 0 5px 0 #3d1380;
}
.pk-btn:active:not(:disabled) {
  transform: translateY(3px);
}
.pk-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------- choosing a table ---------- */
.pk-tables {
  max-width: 900px;
  margin: 0 auto;
}
.pk-tables-title {
  margin: 4px 0 4px;
  text-align: center;
  font-size: 20px;
  color: var(--gold);
}
.pk-tables-note {
  margin: 0 auto 14px;
  max-width: 640px;
  text-align: center;
  color: var(--muted);
  line-height: 1.5;
}
.pk-tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.pk-tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, #1f8a5e, #0e5139);
  border: 3px solid #5a3417;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.pk-tcard.free {
  background: linear-gradient(160deg, #7b2ff7, #2a1856);
}
.pk-tcard.current {
  border-color: var(--gold);
}
.pk-tcard h4 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}
.pk-tcard p {
  margin: 0;
  color: #e9e0ff;
  line-height: 1.4;
}
.pk-tcard p b {
  color: var(--gold);
}
.pk-tmeta {
  font-size: 13px;
}
.pk-tcur {
  position: absolute;
  top: -11px;
  right: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: #2b1500;
  font-size: 11.5px;
  font-weight: 900;
}
.pk-tamount {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  color: #e9e0ff;
}
.pk-tamount-ctl {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pk-tamount input[type=range] {
  flex: 1;
  min-width: 0;
  accent-color: var(--gold);
}
.pk-tamount input[type=number] {
  width: 90px;
  padding: 5px 6px;
  border-radius: 8px;
  border: 1px solid #444;
  background: #000;
  color: #fff;
  font: 400 15px 'Bungee',sans-serif;
  text-align: center;
}
.pk-tcard .pk-btn.sit {
  margin-top: auto;
  min-width: 0;
  width: 100%;
}
.pk-backtotable {
  display: block;
  margin: 14px auto 0;
}

/* ---------- history of the last hands ---------- */
.pk-hist {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  max-width: 900px;
  margin: 12px auto 0;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.pk-hist span {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(6,3,14,.75);
  border: 1px solid var(--line);
  color: #e2d9ff;
}
.pk-hist .win {
  color: var(--green);
}
.pk-hist .loss {
  color: #ff9aa6;
}
.pk-stats {
  text-align: center;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #d8f5e1;
}

/* ---------- how to play ---------- */
.pk-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.pk-guide-box {
  background: var(--bg2);
  border-radius: 12px;
  padding: 10px 14px;
  line-height: 1.55;
  font-size: 14px;
  color: #e9e0ff;
}
.pk-guide-box h4 {
  margin: 2px 0 6px;
}
.pk-guide-box p {
  margin: 0 0 6px;
}
.pk-guide-box ul {
  margin: 0;
  padding-left: 18px;
}
.pk-guide-box li {
  margin-bottom: 4px;
}
.pk-guide-box b {
  color: #fff;
}
.pk-keys {
  color: var(--muted);
  font-size: 12.5px;
}

/* ---------- hand rankings ---------- */
.pk-ranks {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}
.pk-rank {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--bg2);
}
.pk-rank-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,215,94,.15);
  color: var(--gold);
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  font-size: 13px;
}
.pk-rank-txt b {
  display: block;
  color: #fff;
}
.pk-rank-txt small {
  color: var(--muted);
  font-size: 13px;
}
.pk-rank-cards {
  display: flex;
  gap: 3px;
}
.pk-ranknote {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #e9e0ff;
}

/* ---------- phones: the bots in two rows, the action bar pinned to the bottom ---------- */
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  body[data-theme="poker"] {
    padding-bottom: calc(215px + env(safe-area-inset-bottom));
  }
  #pkHead .cr-tag {
    display: none;
  }
  #pkMsg {
    height: 50px;
    font-size: 13px;
  }
  .pk-table {
    --pkw: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 6px;
    border-width: 6px;
    border-radius: 22px;
    grid-template-areas:
      "s1 s2"
      "s4 s3"
      "c  c"
      "s0 s0";
  }
  /* the name gets the whole first line (the avatar goes on a phone), so it wraps only between words */
  .pk-seat:not(.s0) {
    padding: 5px 6px;
    gap: 2px 5px;
    grid-template-areas: "name name name" "hole tags stack" "move move bet";
  }
  .pk-seat:not(.s0) .pk-ava {
    display: none;
  }
  .pk-who b {
    font-size: 12px;
  }
  .pk-stack {
    font-size: 11.5px;
  }
  .pk-move {
    font-size: 11px;
    min-height: 14px;
  }
  .pk-chip {
    font-size: 10.5px;
    padding: 1px 7px;
  }
  .pk-seat.s0 .pk-hole {
    --pkw: 44px;
  }
  .pk-board {
    --pkw: clamp(38px, 12vw, 50px);
  }
  .pk-status {
    margin-bottom: 6px;
    height: 26px;
    justify-content: flex-start;
  }
  .pk-status span {
    font-size: 11.5px;
    padding: 3px 8px;
  }
  .pk-status .opt {
    display: none;
  } /* blinds and the hand name: the message bar and the seats show them too */
  .pk-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    margin: 0;
    border-radius: 18px 18px 0 0;
    border-width: 1px 0 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg,#1d1139,#06030e);
  }
  .pk-bartop {
    margin-bottom: 6px;
  }
  .pk-actions {
    gap: 6px;
  }
  .pk-buttons {
    gap: 6px;
  }
  .pk-btn {
    padding: 11px 2px;
    font-size: 13px;
  }
  .pk-btn small {
    font-size: 10.5px;
  }
  .pk-btn.sit {
    flex: 1;
    min-width: 0;
  }
  .pk-start,
  .pk-actions {
    min-height: 92px;
  }
  .pk-handname {
    font-size: 12.5px;
    min-height: 24px;
  }
  .pk-tables-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .pk-tcard {
    padding: 12px 10px;
  }
  .pk-tcard.free {
    grid-column: 1 / -1;
  }
  .pk-tcard h4 {
    font-size: 15px;
  }
  .pk-tcard p {
    font-size: 12.5px;
  }
  .pk-raisebox {
    gap: 6px;
    flex-wrap: nowrap;
  }
  .pk-raisebox input[type=range] {
    flex: 1 1 60px;
    min-width: 0;
  }
  .pk-raisebox input[type=number] {
    width: 64px;
    font-size: 14px;
    padding: 5px 4px;
  }
  .pk-preset {
    padding: 5px 6px;
    font-size: 11.5px;
    white-space: nowrap;
  }
  .pk-rank {
    grid-template-columns: 28px minmax(0,1fr);
  }
  .pk-rank-cards {
    grid-column: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pk-card.deal,
  .pk-card.flip {
    animation: none;
  }
}