/* Homepage poker tables and leaderboard. Everything reads the design-system tokens; the card faces under the table
   are a printed material, so they get three local material colours that stay the same in both themes. */
.pk { --pk-paper: oklch(0.975 0.004 100); --pk-ink: oklch(0.21 0.01 260); --pk-red: oklch(0.55 0.19 22); }
.pk [hidden] { display: none !important; }
/* The page head: title left, your bankroll as the big read-out right (like Play's hours). */
.pk-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-top: 40px; }
.pk-pagehead h1 { margin: 0; }
#pk-bank, .pk-sub, .pk-bring { font-variant-numeric: tabular-nums; }
.pk-num { text-align: right; min-width: 0; }
.pk-sub { font-size: 12px; color: var(--muted-foreground); }
@media (max-width: 640px) { .pk-pagehead { margin-top: 24px; } }
.pk-lede { margin: 12px 0 14px; }
.pk-note { margin: -6px 0 12px; }

/* Overview: the three tables side by side as live thumbnails (phones too). Picking one enlarges it to the full
   column; the others become chips in the switcher above it. */
.pk-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.pk-chips .pk-chipn { opacity: .75; margin-left: 6px; }
.pk-tabs { display: none; }
.pk-tabs > button { gap: 6px; }
.pk-tabs .pk-tabsep { opacity: .6; }
.pk-tabs .pk-tabn.is-full { color: var(--warn); }
.pk-tabs .pk-tabn:not(.is-full) .pk-tabfull { visibility: hidden; } /* keeps its width: the tabs never re-wrap */
.pk-tabs [aria-checked="true"] .pk-tabn.is-full { color: inherit; }
.pk-grid { transition: opacity .13s ease; }
.pk-grid.is-swap { opacity: 0; }
@media (max-width: 640px) {
  .pk-switch .pk-back, .pk-switch .pk-chips { display: none !important; }
  .pk-tabs { display: flex; }
}
.pk-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.pk-grid > .zs-loading { grid-column: 1 / -1; }
.pk-grid.is-focus { grid-template-columns: minmax(0, 1fr); }
.pk-grid.is-focus > .pk-table:not(.is-open) { display: none; }
@media (max-width: 640px) { .pk-grid { gap: 6px; } }
.pk-table { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; position: relative; }
.pk-table .zs-card-head { margin-bottom: 0; flex-wrap: wrap; row-gap: 4px; }
.pk-table .zs-card-title { min-width: 0; }
.pk-table .zs-card-title:focus { outline: none; }
.pk-table .zs-card-title:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
/* The canvas spans the card edge to edge (inside its 1px ring), so phones get every pixel of width. */
.pk-stage { position: relative; min-width: 0; margin: 0 -11px; }
.pk-stage canvas { display: block; width: 100%; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.pk-last { margin: 0; height: 1.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pk-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pk-full, .pk-waiting { display: grid; gap: 8px; padding: 10px 12px; }
.pk-full p, .pk-waiting p { margin: 0; }
.pk-full .zs-status { white-space: normal; color: var(--foreground); }

/* Thumbnail */
.pk-cap, .pk-pick { display: none; }
.pk-table.is-thumb { padding: 1px; gap: 0; }
.pk-table.is-thumb > :not(.pk-stage):not(.pk-cap):not(.pk-pick) { display: none !important; }
.pk-table.is-thumb .pk-stage { margin: 0; }
.pk-table.is-thumb .pk-cap { display: grid; padding: 4px 8px 6px; font-size: 12px; line-height: 1.5; min-width: 0; }
.pk-capname { font-weight: 600; overflow-wrap: anywhere; }
.pk-capinfo { display: flex; flex-wrap: wrap; gap: 0 10px; color: var(--muted-foreground); }
.pk-table.is-thumb .pk-pick {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pk-table.is-thumb:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 35%, transparent); }
.pk-pick:focus { outline: none; }
.pk-pick:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.pk-table.is-free { box-shadow: inset 0 0 0 2px var(--ok); }
@media (max-width: 640px) {
  .pk-table.is-thumb .pk-cap { padding: 3px 6px 5px; }
  .pk-capinfo { flex-direction: column; }
}
::view-transition-group(pk-stage) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }


/* Seated: your cards, what you hold, the action bar, the history. */
/* display: contents makes the action bar a direct child of the table card, so while it is your turn it can stick to
   the bottom of the screen anywhere over the table (a sticky box can't leave its containing block). */
.pk-play { display: contents; }
/* Everything in the seated view has a fixed height, so nothing moves when cards come and go or the turn passes. */
.pk-me { display: flex; align-items: center; gap: 12px; }
.pk-cards { display: flex; gap: 6px; flex: none; height: 64px; }
.pk-c {
  width: 46px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--pk-paper); color: var(--pk-ink); font: 700 22px/1 var(--font-mono);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pk-ink) 28%, transparent), 2px 3px 0 color-mix(in oklab, var(--foreground) 14%, transparent);
}
.pk-c i { font-style: normal; font-weight: 400; font-size: 22px; }
.pk-c.is-red { color: var(--pk-red); }
.pk-c.is-folded { opacity: .45; }
.pk-c.is-empty { background: transparent; box-shadow: none; outline: 1px dashed var(--border); outline-offset: -1px; }
.pk-info { flex: 1; min-width: 0; }
.pk-hn { font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 21px; height: 42px; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pk-pot { margin: 0; height: 23px; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pk-stand { flex: none; align-self: flex-start; }

.pk-actions { position: relative; display: grid; gap: 8px; padding: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
/* While it is your turn the bar sticks to the bottom of the screen (phones scroll the table away under it). */
.pk-actions.is-turn {
  position: sticky; bottom: 0; z-index: 30; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: inset 0 0 0 1px var(--primary), 0 -8px 16px -10px color-mix(in oklab, var(--foreground) 35%, transparent);
}
.pk-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; height: 22px; }
.pk-say { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-keys { white-space: nowrap; }
@media (hover: none) { .pk-keys { display: none; } }
.pk-timer { height: 3px; background: var(--border); overflow: hidden; }
.pk-timer i { display: block; height: 100%; background: var(--primary); transform-origin: left center; transform: scaleX(0); }
.pk-timer.is-low i { background: var(--destructive); }
.pk-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pk-btns .zs-btn { width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pk-size { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pk-amt { flex: 1 1 100px; min-width: 90px; }
.pk-num { width: 88px; }
.pk-quick { display: flex; gap: 4px; flex-wrap: wrap; }
/* Out of chips: a panel over the controls, which keep their space. */
.pk-actions.is-out .pk-btns, .pk-actions.is-out .pk-size, .pk-actions.is-out .pk-timer { visibility: hidden; }
.pk-out { position: absolute; left: 10px; right: 10px; top: 40px; bottom: 10px; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: var(--card); }
.pk-out p { margin: 0; font-size: 12px; line-height: 1.5; }
.pk-logwrap summary { cursor: pointer; width: max-content; }
.pk-log { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow: auto; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.pk-log li { margin: 0; color: var(--muted-foreground); }
.pk-log .pk-start { color: var(--foreground); font-weight: 600; margin-top: 8px; }
.pk-log .pk-start:first-child { margin-top: 0; }
.pk-log .pk-win { color: var(--foreground); }

/* Leaderboard */
.pk-lb { margin-top: 12px; display: grid; gap: 10px; }
.pk-lb .zs-card-head { margin-bottom: 0; }
.pk-lb .zs-empty, .pk-lb .zs-error, .pk-lb .zs-loading { margin: 0; }
.pk-champs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; font-size: 12px; }
.pk-champs .zs-label { width: 100%; }
.pk-champ b { font-weight: 600; margin-right: 4px; }
.pk-lbt { table-layout: fixed; }
.pk-lbt th:nth-child(1) { width: 3.6em; }
.pk-lbt th:nth-child(3) { width: 7.2em; }
.pk-lbt th:nth-child(4) { width: 4.8em; }
.pk-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-lbt tr.is-you td { background: color-mix(in oklab, var(--primary) 12%, transparent); font-weight: 600; }
.pk-lbt .zs-badge { height: 18px; vertical-align: 1px; }
.pk-gap td { text-align: center; color: var(--muted-foreground); }
.pk-lbme { min-height: var(--control); display: flex; align-items: center; }
.pk-renamef { flex-wrap: wrap; }
.pk-renamef .zs-input { width: 13em; }
.pk-renamef .zs-error { flex-basis: 100%; }
.pk-fine { margin: 10px 0 0; }
@media (max-width: 640px) {
  .pk-lbt th:nth-child(3) { width: 6.4em; }
  .pk-lbt th:nth-child(4) { width: 4em; }
  .pk-lbt th, .pk-lbt td { padding-inline: 6px; }
}

/* ---------- Focus mode: at a table (or waiting for a seat) ----------
   The table sits in a fixed overlay above a blurred, dimmed page; the page is inert and pinned (body position: fixed,
   set from JS together with the scrollbar compensation). */
html.pk-locked { overflow: hidden; }
.pk-focus { position: fixed; inset: 0; z-index: 70; }
.pk-focus-scrim {
  position: absolute; inset: 0; opacity: 0; transition: opacity .22s ease;
  background: color-mix(in oklab, var(--background) 62%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(.8); backdrop-filter: blur(10px) saturate(.8);
}
.pk-focus-scroll {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable;
  display: flex; flex-direction: column; padding: 24px;
}
/* Centred when it fits (auto margins), scrolling from the top when it doesn't; as wide as the screen's height allows. */
.pk-focus-inner {
  margin: auto; width: min(900px, 100%, max(520px, calc((100dvh - 420px) * 1.6)));
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .22s ease, transform .22s ease;
}
.pk-focus.is-in .pk-focus-scrim, .pk-focus.is-in .pk-focus-inner { opacity: 1; transform: none; }
.pk-focus-bar {
  position: sticky; top: 0; z-index: 35; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  padding: 8px 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border);
}
.pk-focus-bank { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pk-focus-end { display: flex; gap: 6px; margin-left: auto; flex: none; }
.pk-focus .pk-actions { position: sticky; bottom: 0; z-index: 30; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.pk-focus .pk-stand, .pk-focus .pk-stopwait { display: none; } /* the bar's button does this while in focus mode */
.pk-confirm { position: absolute; right: 8px; top: calc(100% + 4px); width: max-content; max-width: min(320px, calc(100vw - 32px)); box-shadow: inset 0 0 0 1px var(--border), 0 8px 24px -8px rgba(0, 0, 0, .45); padding: 10px 12px; }
.pk-confirm p { margin: 0 0 8px; font-size: 12px; }
.pk-sheet-scrim { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .35); }
.pk-sheet {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: min(82dvh, 680px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border), 0 12px 40px -12px rgba(0, 0, 0, .5);
}
.pk-sheet-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: 8px 10px 0; background: var(--card); }
.pk-sheet .pk-lb { margin: 0; box-shadow: none; }
@media (max-width: 640px) {
  .pk-focus-bar { flex-wrap: wrap; }
  .pk-focus-bank { flex: 1 0 100%; } /* its own row: the buttons below never move */
  .pk-focus-scroll { padding: 12px 16px; }
  .pk-focus-inner { width: 100%; }
  .pk-sheet { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 82dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
/* The Ranger (ranger.js, zr-* elements) stays out of the way while you play; the nav it tags keeps its look. */
body.zs-focus :is([class^="zr-"], [class*=" zr-"]):not(.zr-nav) { visibility: hidden !important; pointer-events: none !important; }