/* The casino: the hub (/casino), coinflip and jackpot tables and the stake
   picker every game shares. Battles keep css/pages/battles.css; only the
   sub-nav above them lives here. Same rules as the rest of the site: ink and
   hairlines, orange is the one action, and the objects (the coin, the pot, a
   pile of cards with price tags) lie on the playmat. The coin itself is
   css/casino-coin.css. */

/* Links here are objects and words, not underlined text. */
.casino-page a, .casino-bar a, .cs-word, .cs-back { text-decoration: none; }

/* ---- The sub-nav: words with an ink line under the open one ---------------- */
.casino-bar { margin: 0 0 22px; }
.casino-bar[hidden] { display: none; }
.cs-words {
  display: flex; gap: 24px;
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.cs-words::-webkit-scrollbar { display: none; }
.cs-word {
  position: relative; flex: none; display: inline-flex; align-items: center;
  min-height: 44px; padding: 10px 0 12px;
  color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: color 0.15s ease;
}
.cs-word::before { content: ""; position: absolute; inset: 0 -12px; }
.cs-word:hover, .cs-word.on { color: var(--ink); }
.cs-word.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
body.on-battle-table .casino-bar { display: none; }

/* ---- Page scaffolding -------------------------------------------------------- */
.casino-page.hidden { display: none; }
.cs-page { position: relative; min-width: 0; }
.cs-head { margin: 0 0 22px; }
.cs-head .page-title { margin: 0 0 8px; }
.cs-lede { margin: 0; max-width: 54ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.cs-fine { margin: 12px 0 0; max-width: 60ch; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cs-back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -8px 0 6px -4px; padding: 0 8px 0 4px;
  color: var(--ink-2); font-size: 14px; font-weight: 600;
}
.cs-back:hover { color: var(--ink); }
.cs-section { margin-top: 40px; }
.cs-h {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
}
.cs-h span { color: var(--muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-empty { margin: 0; padding: 22px 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.cs-empty::first-letter { text-transform: none; }

/* Hairline rows, the house list. */
.cs-rows { border-top: 1px solid var(--line); }
.cs-row {
  display: flex; align-items: center; gap: 14px;
  min-height: 72px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.cs-row-main { display: flex; flex: 1; align-items: center; gap: 14px; min-width: 0; color: inherit; }
.cs-row-link { color: inherit; }
.cs-row-link:hover .cs-row-line b { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--faint); }
.cs-row-line { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.cs-row-line b { color: var(--ink); font-weight: 650; }
.cs-row-line small, .cs-row-figs small { color: var(--muted); font-size: 12.5px; text-wrap: balance; }
.cs-row-stake { display: flex; align-items: center; gap: 14px; min-width: 0; margin-left: auto; }
.cs-row-figs { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-size: 14px; }
.cs-took { font-weight: 500; color: var(--ink-2); }
.cs-row .solid, .cs-row .ghost { flex: none; }
.cs-row .solid.sm, .cs-row .ghost.sm { min-height: 44px; }

/* Player: avatar with a name and handle. */
.cs-player { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.cs-player .bt-avatar { --size: 40px; }
.cs-player-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cs-player-copy b { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-player-copy small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-player.is-empty .cs-player-copy b { color: var(--muted); font-weight: 600; }

/* A pile of cards as overlapping thumbnails. */
.cs-stack { position: relative; display: inline-flex; align-items: center; flex: none; padding-right: 4px; }
.cs-stack > img {
  display: block; width: 34px; height: 47px; object-fit: cover; border-radius: 3px; background: var(--well);
  margin-left: -16px; transform: rotate(calc((var(--i) - 2) * 3deg));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.cs-stack > :first-child { margin-left: 0; }
.cs-stack.is-lg > img { width: 42px; height: 59px; margin-left: -20px; border-radius: 4px; }
.cs-stack.is-lg > .cs-slab { width: 46px; margin-left: -18px; }
.cs-stack.is-lg > :first-child { margin-left: 0; }
.cs-stack-more {
  align-self: center; margin-left: 6px; color: var(--muted); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums;
}

/* ---- A graded slab in a pot (casino-kit.js slabTileHTML) ------------------------
   The slab.css look at a glance and nothing more: a clear case with a bright rim,
   the paper label (coral RIP band, the grade big on a plate: gold for a 10,
   silver for a 9) and the card in its recessed well. Flat, no holo and no motion,
   so a pile of ten stays cheap. Sizes are cqw of the slab, so every size keeps the
   proportions. "mini" is the stack thumbnail: the band goes, the grade fills the label. */
.cs-slab {
  --slab-plate: #f3eee3; --slab-ink: #15171a; --slab-band: #ff6b4a;
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 5; container-type: inline-size;
  font-family: "Bricolage Grotesque", system-ui, sans-serif; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.cs-slab-case {
  position: absolute; inset: 0; display: block; border-radius: 6cqw; overflow: hidden;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / 0) 34%),
    linear-gradient(158deg, rgb(214 226 242 / .30), rgb(214 226 242 / .12) 55%, rgb(214 226 242 / .2));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5), inset -1px -1px 0 1px rgb(0 0 0 / .26), 0 2px 5px rgb(0 0 0 / .5);
}
.cs-slab-label {
  position: absolute; top: 5cqw; left: 6.5cqw; right: 6.5cqw; height: 25cqw;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
  border-radius: 2cqw; overflow: hidden; background: var(--slab-plate); color: var(--slab-ink);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1), 0 0 0 1px rgb(0 0 0 / .3);
}
.cs-slab-brand {
  display: grid; place-items: center; padding: 0 2cqw;
  background: linear-gradient(180deg, color-mix(in oklab, var(--slab-band) 88%, white), var(--slab-band) 60%, color-mix(in oklab, var(--slab-band) 84%, black));
  color: #1c0904; font-size: 15cqw; font-weight: 800; letter-spacing: -.06em; line-height: 1;
}
.cs-slab-num {
  display: grid; place-items: center; min-width: 29cqw; padding: 0 2cqw 0 1.5cqw;
  font-style: normal; font-size: 21cqw; font-weight: 800; letter-spacing: -.06em; line-height: 1;
}
.cs-slab[data-tier="gem"] .cs-slab-num { background: linear-gradient(160deg, #f3cf72, #e9b949 55%, #c79a35); }
.cs-slab[data-tier="black"] .cs-slab-label { --slab-plate: #0b0b0d; box-shadow: inset 0 0 0 1px rgb(233 185 73 / .55), 0 0 0 1px rgb(0 0 0 / .5); }
.cs-slab[data-tier="black"] .cs-slab-brand { background: linear-gradient(180deg, #f3cf72, #e9b949 60%, #c79a35); color: #1c1304; }
.cs-slab[data-tier="black"] .cs-slab-num { background: linear-gradient(160deg, #1d1c1f, #070708 70%); color: #f3cf72; }
.cs-slab[data-tier="mint"] .cs-slab-num { background: linear-gradient(160deg, #e6e8ec, #c9ccd2 55%, #a5a9b1); }
.cs-slab-well {
  position: absolute; top: 34cqw; left: 8.5cqw; right: 8.5cqw; display: block; padding: 2.4cqw;
  border-radius: 3cqw; background: linear-gradient(158deg, rgb(0 0 0 / .42), rgb(0 0 0 / .24));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .4), inset 1px 2px 3px rgb(0 0 0 / .4), 0 0 0 1px rgb(255 255 255 / .06);
}
.cs-slab-well img { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 1.6cqw; background: var(--well); }
.cs-slab-mini .cs-slab-label { top: 4cqw; left: 5cqw; right: 5cqw; height: 24cqw; }
.cs-slab-mini .cs-slab-brand { display: none; }
.cs-slab-mini .cs-slab-num { min-width: 0; padding: 0; font-size: 22cqw; }
.cs-slab-mini .cs-slab-well { top: 31cqw; left: 6cqw; right: 6cqw; padding: 2cqw; }
.cs-stack > .cs-slab {
  flex: none; width: 40px; margin-left: -14px; transform: rotate(calc((var(--i) - 2) * 3deg));
}
.cs-stack > .cs-slab:first-child { margin-left: 0; }
.cs-slab-btn { cursor: pointer; }
.cs-slab-btn .cs-slab { pointer-events: none; }
.cs-slab-btn:hover .cs-slab-case { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), inset -1px -1px 0 1px rgb(0 0 0 / .26), 0 4px 10px rgb(0 0 0 / .55); }

/* ---- The playmat -------------------------------------------------------------
   The casino tables are laid on the same charcoal neoprene as the pack opening
   (css/opening.css .op-mat): a stitched edge, one pendant pool of warm light.
   Cards and slabs are laid on it; the coin and the pot sit in the pool. */
.cs-mat {
  position: relative; isolation: isolate; overflow: clip; min-width: 0;
  border-radius: 18px;
  background: url("../../assets/textures/neoprene.png"), var(--mat);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 4px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.3);
}
.cs-mat::after {
  content: ""; position: absolute; inset: 5px; z-index: -1; border: 1px dashed rgba(220, 220, 214, 0.22); border-radius: 14px; pointer-events: none;
}
.cs-mat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 52% 62% at 50% 46%, rgba(255, 224, 178, 0.09), transparent 72%);
}

/* ---- The hub ----------------------------------------------------------------- */
.hub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hub-head .page-title { margin-bottom: 6px; }
.hub-primary { flex: none; min-height: 44px; padding-inline: 20px; }
.hub-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 56px; }
@media (min-width: 960px) { .hub-grid { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; } }
.hub-live > .cs-section:first-child { margin-top: 0; }

.hub-row .cs-row-main { flex-wrap: nowrap; gap: 18px; }
.hub-kind { flex: 0 0 70px; color: var(--ink-2); font-size: 13.5px; font-weight: 650; }
/* The name grows into the free space before it truncates; the stake keeps the right edge. */
.hub-row .cs-player { flex: 1 1 auto; min-width: 0; }
.hub-stake { display: flex; align-items: center; gap: 16px; min-width: 0; margin-left: auto; }
.hub-figs { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.hub-figs small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.hub-figs .price-tag { font-size: 20px; }
.hub-seats { display: inline-flex; align-items: center; flex: none; }
.hub-seats .bt-avatar { --size: 32px; margin-left: -10px; box-shadow: 0 0 0 2px var(--bg); }
.hub-seats .bt-avatar:first-child { margin-left: 0; }
.hub-seats b { margin: 0 4px 0 8px; color: var(--muted); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hub-go { min-height: 44px; min-width: 84px; justify-content: center; }
.hub-win { gap: 14px; }
.hub-win .cs-stack { margin-left: auto; }
@media (max-width: 640px) {
  .hub-row { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
  .hub-row .cs-row-main { flex-wrap: wrap; row-gap: 10px; flex-basis: 100%; }
  .hub-kind { flex-basis: auto; }
  .hub-row .cs-player { flex: 1 1 0; }
  .hub-stake { margin-left: 0; width: 100%; justify-content: space-between; }
  .hub-figs { align-items: flex-end; }
  .hub-go { width: 100%; }
  .hub-win { flex-wrap: wrap; }
  .hub-win .cs-row-main { flex-basis: 100%; }
  .hub-win .cs-stack { margin-left: 0; }
}

/* The four games, as plain rows with the real object of each. */
.hub-rail { margin-top: 40px; }
@media (min-width: 960px) { .hub-rail { margin-top: 0; padding-top: 4px; } }
.hub-games { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hub-game-row { display: grid; grid-template-columns: 98px minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.hub-game-art { display: grid; place-items: center; height: 76px; }
.hub-game-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hub-game-copy a { color: var(--ink); }
.hub-game-copy b { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.hub-game-copy a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--faint); }
.hub-game-copy span { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.hub-game-copy small { color: var(--muted); font-size: 12.5px; font-weight: 550; }
.hub-game-copy small:has(> :only-child:empty), .hub-game-copy small:empty { display: none; }

/* ---- The table arts (casino-kit.js coinArtHTML / potArtHTML / battlesArtHTML) ----
   One family for the three games: real objects on the table, lit from the upper
   left like the coin's own facets, each on the same pool of shadow. --s is the
   art's height; everything inside is a fraction of it, so one set of rules
   holds from a 60px tile to the battles stage. */
.cs-art {
  --s: 76px;
  position: relative; display: grid; place-items: center; flex: none;
  width: calc(var(--s) * 1.3); height: var(--s);
  pointer-events: none;
}
.cs-art > * { grid-area: 1 / 1; }
.cs-art-shadow {
  display: block; align-self: end; justify-self: center;
  width: 92%; height: 24%; margin-bottom: -7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.72) 0 55%, rgb(0 0 0 / 0) 100%);
  filter: blur(calc(var(--s) * 0.03));
  transform: translateX(3%);
}
/* the coin lies flat, so its shadow is its own disc, set off to the lower right (as .cf-shadow) */
.cs-art-coin .cs-art-shadow {
  align-self: center; width: var(--s); height: var(--s); margin: 0;
  transform: translate(4.5%, 7.5%) scale(0.98); opacity: 0.66;
}
/* the pot: three backs fanned on the table, the coin dropped on top */
.cs-art-pot .cs-pot-cards { position: relative; align-self: start; width: 100%; height: 70%; margin-top: 1%; }
.cs-art-pot .cs-pot-cards img {
  position: absolute; left: 50%; bottom: 0;
  width: 42%; aspect-ratio: 63 / 88; height: auto; object-fit: cover; border-radius: 6%;
  transform-origin: 50% 96%;
  transform: translateX(-50%) rotate(calc((var(--i) - 1) * 20deg));
  filter: drop-shadow(0 calc(var(--s) * 0.03) calc(var(--s) * 0.035) rgb(0 0 0 / 0.55));
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}
.cs-art-pot .cs-pot-cards img[style*="--i:1"] { z-index: 1; }
/* the coin sits on the cards, its own disc of shadow under it */
.cs-art-pot .cf-coin { position: relative; z-index: 2; align-self: end; margin-bottom: 0; }
.cs-art-pot .cf-coin::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.7) 0 70%, rgb(0 0 0 / 0) 100%);
  transform: translate(5%, 8%) scale(1.02); filter: blur(calc(var(--s) * 0.012));
}
/* pack battles: two boosters leaning into each other, the hit between them */
.cs-art-clash .cs-clash-pack {
  position: absolute; bottom: 5%; display: block; height: 84%;
  transform-origin: 50% 100%;
}
.cs-art-clash .cs-clash-pack img {
  display: block; height: 100%; width: auto; max-width: none;
  filter: drop-shadow(0 calc(var(--s) * 0.06) calc(var(--s) * 0.07) rgb(0 0 0 / 0.55)) drop-shadow(0 calc(var(--s) * 0.01) calc(var(--s) * 0.015) rgb(0 0 0 / 0.35));
  -webkit-user-drag: none; user-select: none;
}
.cs-art-clash .cs-clash-pack.is-front { left: 6%; z-index: 2; transform: rotate(14deg); }
.cs-art-clash .cs-clash-pack.is-back { right: 6%; z-index: 1; height: 80%; transform: rotate(-16deg); filter: brightness(0.86); }
.cs-art-clash .cs-clash-mark {
  position: absolute; z-index: 3; left: 50%; top: 5%;
  width: calc(var(--s) * 0.27); height: calc(var(--s) * 0.27);
  transform: translateX(-50%);
  color: var(--ink);
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.8)) drop-shadow(0 0 calc(var(--s) * 0.03) rgb(0 0 0 / 0.6));
}
.cs-art-clash .cs-clash-mark .bt-icon { width: 100%; height: 100%; stroke-width: 2.1; }
/* the hall's light sweep rides inside the front pack, so it does not turn with the stage's own tilt */
.cs-art-clash .cs-clash-pack .hl-glint { rotate: 0deg; }
.cs-art-clash.is-empty { border-radius: var(--r-sm); background: var(--surface); width: calc(var(--s) * 0.6); }

/* ---- Coinflip: list ---------------------------------------------------------- */
.cf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.cf-actions .solid, .cf-actions .ghost { display: inline-flex; align-items: center; gap: 8px; }
.cf-actions .bt-icon { width: 1.25em; height: 1.25em; }
@media (max-width: 520px) { .cf-actions > * { flex: 1 1 0; justify-content: center; } }
.cf-row .cs-row-main { flex-wrap: nowrap; }
@media (max-width: 560px) {
  .cf-row { flex-wrap: wrap; row-gap: 10px; }
  .cf-row .cs-row-main { flex-wrap: wrap; row-gap: 10px; flex-basis: 100%; }
  .cf-row .cs-row-stake { margin-left: 0; width: 100%; justify-content: space-between; }
  .cf-row > .solid, .cf-row > .ghost { width: 100%; }
  .cf-row.is-done .cs-row-stake { margin-left: auto; width: auto; }
  .cf-row.is-done { flex-wrap: nowrap; }
  .cf-row.is-done .cs-row-main { flex-wrap: nowrap; flex-basis: auto; }
}
.cs-how { margin-top: 44px; border-top: 1px solid var(--line); }
.cs-how summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.cs-how p { margin: 0 0 12px; max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ---- Coinflip: the table ------------------------------------------------------
   The playmat is the table. Each player's pile lies on it as cards (slabs among
   them) with a price tag under each; the coin sits between them in the pool of
   light. A decided flip dims the pile that lost. */
.cf-arena { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; padding: 22px 16px 24px; }
@media (min-width: 900px) {
  .cf-arena { grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); gap: 20px; padding: 30px 30px 34px; }
  .cf-center { position: sticky; top: 96px; }
}
.cf-side { position: relative; min-width: 0; transition: opacity 0.6s ease, transform 0.6s var(--ease-out); }
.cf-side-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.cf-face-tag { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.cf-side-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 14px; }
.cf-side-value .price-tag { font-size: 28px; --tilt: -2deg; }
.cf-side-value small { color: var(--ink-2); font-size: 13px; font-weight: 550; }
.cf-pile { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 136px)); justify-content: start; gap: 18px 14px; padding: 4px 2px 2px; }
/* The empty seat is a card-sized outline on the mat, where the challenger's cards will go. */
.cf-pile-empty {
  display: grid; place-items: center; width: min(100%, 150px); aspect-ratio: 63 / 88; padding: 10px;
  border: 1px dashed rgba(220, 220, 214, 0.3); border-radius: 4.5% / 3.2%; text-align: center; color: var(--ink-2); font-size: 13px; line-height: 1.45;
}
.cf-pile-empty p { margin: 0; }
.cs-card {
  position: relative; display: block; padding: 0; border: 0; background: none; text-align: center; color: inherit; cursor: pointer;
}
.cs-card img { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4.5% / 3.2%; box-shadow: 0 5px 9px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4); background: var(--well); }
.cf-pile > .cs-card:nth-child(3n + 1) { rotate: -1.4deg; }
.cf-pile > .cs-card:nth-child(3n + 2) { rotate: 0.8deg; }
.cf-pile > .cs-card:nth-child(3n) { rotate: -0.4deg; }
.cs-card-qty {
  position: absolute; top: 4px; right: 4px; max-width: calc(100% - 8px); padding: 1px 5px; white-space: nowrap; overflow: hidden; border-radius: 4px;
  background: var(--ink); color: var(--black); font-size: 11.5px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.cs-card-value { display: block; margin-top: 8px; }
.cs-card-value .price-tag { font-size: 16px; --tilt: -2deg; }
.cs-card:hover img { box-shadow: 0 8px 14px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--line-2); }
.cs-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.cf-center { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 8px 0; }
.cf-coin-wrap { display: grid; place-items: center; min-height: 190px; width: 100%; }
.cf-line { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.cf-line b { color: var(--ink); font-weight: 650; }
.cf-result { font-size: 19px; line-height: 1.35; font-weight: 650; color: var(--ink); min-height: 1.35em; }
.cf-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cf-btns .solid, .cf-btns .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }
.cf-btns[hidden] { display: none; }
@media (max-width: 899px) {
  .cf-btns { width: 100%; flex-direction: column; }
  .cf-btns .solid, .cf-btns .ghost { width: 100%; }
  /* the coin sits between the two piles on a phone: host above, challenger below */
  .cf-arena { gap: 10px; }
}
.cf-table.is-decided.host-won .cf-side.is-guest,
.cf-table.is-decided.guest-won .cf-side.is-host { opacity: 0.42; transform: scale(0.985); }
body.no-motion .cf-side { transition: none; }

/* ---- The stake picker --------------------------------------------------------- */
body.cs-locked { overflow: hidden; }
.cs-sheet-wrap { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.cs-scrim { position: absolute; inset: 0; background: rgba(10, 8, 6, 0.66); animation: cs-fade 0.2s ease both; }
.cs-sheet {
  position: relative; display: flex; flex-direction: column;
  width: min(760px, 100%); height: min(92vh, 92dvh); max-height: 900px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: color-mix(in oklab, var(--black) 94%, rgb(var(--ambient))); box-shadow: 0 -1px 0 var(--line-2), var(--shadow);
  animation: cs-rise 0.32s var(--ease-out) both; outline: none;
}
@media (min-width: 820px) {
  .cs-sheet-wrap { align-items: center; }
  .cs-sheet { height: min(80vh, 780px); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
}
@keyframes cs-fade { from { opacity: 0; } }
@keyframes cs-rise { from { transform: translateY(40px); opacity: 0; } }
body.no-motion .cs-sheet, body.no-motion .cs-scrim { animation: none; }
.cs-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 6px 20px; }
.cs-sheet-head h2 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -0.025em; }
.cs-sheet-head p { margin: 4px 0 0; max-width: 46ch; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.cs-x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -6px -8px 0 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); cursor: pointer; }
.cs-x:hover { background: var(--surface-2); color: var(--ink); }

.cs-meter { padding: 8px 20px 12px; }
.cs-meter-fig { display: flex; align-items: baseline; gap: 0 10px; min-width: 0; }
/* The figure is a field: ink numerals on the sheet, no box. The coin is a pseudo-element so it can never become part of the value. */
.cs-fig { display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%; color: var(--ink); }
.cs-fig::before { content: ""; flex: none; align-self: center; width: 20px; height: 20px; margin-right: 0.3em; background: url("../../assets/coins/house-coin-sm.webp") center / contain no-repeat; }
.cs-fig-field {
  display: inline-grid; min-width: 3ch; max-width: 100%; padding-bottom: 1px; border-bottom: 2px solid var(--line-2); cursor: text;
  color: var(--ink); font-size: 30px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease;
}
/* A hidden twin of the text sets the width, so the field grows with what is typed in every browser. */
.cs-fig-field::after { content: attr(data-v) "\00a0"; grid-area: 1 / 1; visibility: hidden; white-space: pre; pointer-events: none; }
.cs-fig-field:focus-within { border-bottom-color: var(--ink); }
.cs-fig-field:has(.cs-amount:disabled) { border-bottom-color: transparent; cursor: default; }
.cs-fig-words[hidden] { display: none; }
.cs-amount {
  grid-area: 1 / 1; width: 0; min-width: 100%; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: none; box-shadow: none;
  color: inherit; caret-color: var(--ink); font: inherit; letter-spacing: inherit; font-variant-numeric: inherit; line-height: inherit; text-align: left;
  -webkit-appearance: none; appearance: none;
}
.cs-amount::selection { background: var(--surface-3); color: var(--ink); }
.cs-fig-words { min-width: 0; color: var(--muted); font-size: 13.5px; font-weight: 550; white-space: nowrap; }
.cs-fillword { align-self: center; flex: none; min-width: 44px; min-height: 44px; margin: -10px 0; padding: 0 4px; }
.cs-amounts { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.cs-amounts::-webkit-scrollbar { display: none; }
/* More to scroll to: the row fades out at its right edge. */
.cs-amounts.is-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.cs-amounts button {
  flex: none; font: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cs-amounts button:disabled { opacity: 0.4; cursor: default; }
.cs-amt-tile, .cs-amounts [data-amt="match"] {
  flex: 1 1 52px; min-width: 48px; height: 40px; padding: 0 12px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background 0.12s ease;
}
.cs-amounts [data-amt="match"] { flex: 1 1 auto; }
/* In the window already: the match tile is a quiet reminder, not the call to action. */
.cs-amounts [data-amt="match"].is-quiet { height: 40px; background: var(--surface-3); color: var(--muted); }
.cs-amt-tile:active, .cs-amounts [data-amt="match"]:active { background: var(--surface-3); }
.cs-amt-word {
  min-width: 44px; min-height: 44px; padding: 0 6px; background: none; color: var(--ink-2); font-size: 13.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--faint);
}
.cs-amt-tile + .cs-amt-word { margin-left: 8px; }
.cs-amt-word:active { color: var(--ink); text-decoration-color: var(--ink); }
@media (hover: hover) {
  .cs-amt-tile:hover:not(:disabled), .cs-amounts [data-amt="match"]:hover:not(:disabled) { background: var(--surface-2); }
  .cs-amt-word:hover:not(:disabled) { color: var(--ink); text-decoration-color: var(--ink); }
}
.cs-amounts button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cs-meter-bar { position: relative; height: 8px; margin: 10px 0 8px; border-radius: 4px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.cs-win { position: absolute; top: -1px; bottom: -1px; border-radius: 4px; background: rgba(255, 255, 255, 0.28); box-shadow: 0 0 0 1px var(--line-2); }
.cs-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--wall-dark); transition: left 0.2s var(--ease-out), background 0.2s ease; }
.cs-meter[data-state="in"] .cs-dot { background: var(--ok); }
.cs-meter[data-state="high"] .cs-dot { background: var(--bad); }
.cs-meter-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); white-space: pre-line; }
.cs-meter[data-state] .cs-meter-note.is-bad { color: var(--bad); }
.cs-meter-bar + .cs-meter-note { margin-top: 0; }
.cs-meter[data-state="in"] .cs-meter-note { color: var(--ink-2); }
.cs-meter[data-state="high"] .cs-meter-note { color: var(--bad); }

.cs-tools { display: grid; gap: 10px; padding: 4px 20px 10px; border-bottom: 1px solid var(--line); }
.cs-search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); background: var(--well); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.cs-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-2); }
.cs-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; }
.cs-search input::placeholder { color: var(--faint); }
.cs-seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--well); }
.cs-seg button { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 40px; padding: 6px 4px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cs-seg button.on { background: var(--surface-3); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; }
.cs-tool-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cs-words button { position: relative; min-height: 44px; padding: 10px 0 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cs-tool-row .cs-words { display: flex; gap: 18px; margin: 0; padding: 0; border: 0; overflow: visible; }
.cs-tool-row .cs-words button.on { color: var(--ink); }
.cs-tool-row .cs-words button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: var(--ink); }
.cs-link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--faint); cursor: pointer; }
.cs-link:hover { text-decoration-color: var(--ink); }
.cs-link[hidden] { display: none; }

.cs-grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 20px; display: grid; gap: 14px 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; outline: none; }
@media (min-width: 560px) { .cs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 820px) { .cs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cs-grid > .cs-empty, .cs-more { grid-column: 1 / -1; }
.cs-more { min-height: 48px; border: 0; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cs-more:hover { background: var(--surface-3); }
.cs-pick { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-pick-art { position: relative; display: block; padding: 0; border: 0; border-radius: 5px; background: none; cursor: pointer; }
.cs-pick-art img { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 5px; background: var(--well); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); transition: transform 0.15s var(--ease-out), box-shadow 0.15s ease; }
.cs-pick-art:active img { transform: scale(0.97); }
.cs-pick.is-on .cs-pick-art img { box-shadow: 0 0 0 2px var(--ink), 0 8px 16px rgba(0, 0, 0, 0.55); }
.cs-pick-badge { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--ink); color: var(--black); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.cs-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cs-pick-meta { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-pick-meta b { color: var(--ink); font-weight: 650; }
.cs-pick-hint { min-height: 32px; font-size: 12px; color: var(--faint); }
.cs-step { display: flex; align-items: center; justify-content: space-between; height: 32px; border-radius: var(--r-sm); background: var(--well); box-shadow: inset 0 0 0 1px var(--line-2); }
.cs-step button { display: grid; flex: none; place-items: center; width: 40px; height: 32px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.cs-step button:disabled { color: var(--muted); opacity: 0.45; cursor: default; }
.cs-step output, .cs-step-n { flex: 1; min-width: 0; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The count is a real field: type it, or tap + and -. No box of its own, so it still reads as the number between the buttons. */
.cs-step-n { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-family: inherit; appearance: none; -webkit-appearance: none; }
.cs-step-n:focus { outline: none; background: rgb(255 255 255 / .06); box-shadow: inset 0 -2px 0 var(--ink); }
@media (max-width: 720px) { .cs-step, .cs-step button { height: 36px; } .cs-pick-hint { min-height: 36px; } .cs-step-n { font-size: 16px; } /* 16px: iOS zooms the page into anything smaller */ }

/* ---- Graded slabs in the picker (js/stake-picker.js) ------------------------------
   A slab tile is the real slab frame at grid size around the card picture: the grade
   numeral, the RIP brand and the guard edge come from css/slab.css. One tap toggles it;
   a slab is unique so there is no stepper. */
.cs-seg button[data-scope] { padding-inline: 4px; white-space: nowrap; }
.cs-seg button[hidden] { display: none; }
.cs-meter-hint { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--faint); }
.cs-slabnote { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cs-slabnote b { font-weight: 600; color: var(--ink-2); }
.cs-slabnote b[hidden] { display: none; }
.cs-slabtile-art {
  position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 5px; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s ease, transform 0.15s var(--ease-out), opacity 0.15s ease;
}
.cs-slabtile-art:active:not(:disabled) { transform: scale(0.97); }
.cs-slabtile-art:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cs-slabtile.is-on .cs-slabtile-art { box-shadow: 0 0 0 2px var(--ink), 0 8px 16px rgba(0, 0, 0, 0.5); }
.cs-slabtile.is-capped .cs-slabtile-art { opacity: 0.38; cursor: default; }
.cs-slabtile .slab-well { pointer-events: none; }
.cs-slabface { display: block; width: 100%; }
.cs-slabface img { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 1.2cqw; background: var(--well); }
.cs-slab-check { z-index: 8; width: 24px; padding: 0; top: auto; bottom: -6px; }
.cs-slab-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cs-slab-cert { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; letter-spacing: -0.01em; color: var(--faint); }
.cs-slab-rev { font-size: 11px; color: var(--muted); }
@media (max-width: 380px) { .cs-seg button[data-scope] { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .cs-slabtile-art { transition: none; } .cs-slabtile-art:active:not(:disabled) { transform: none; } }

.cs-sheet-foot { display: grid; gap: 8px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in oklab, var(--black) 96%, rgb(var(--ambient))); }
.cs-error { margin: 0; color: var(--bad); font-size: 13.5px; line-height: 1.4; }
.cs-error[hidden] { display: none; }
.cs-go {
  width: 100%; min-height: 50px; padding: 10px 18px; border: 0; border-radius: var(--r-sm);
  background: var(--rip); color: var(--on-rip); font: inherit; font-size: 16px; font-weight: 700; letter-spacing: -0.005em; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.cs-go:hover:not(:disabled) { background: var(--rip-hover); }
.cs-go:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.cs-go:disabled { opacity: 0.4; cursor: default; }

/* A phone shows the cards first: the sheet's chrome is as short as it can be. */
@media (max-width: 720px) {
  .cs-sheet { height: 94dvh; }
  .cs-sheet-head { padding: 12px 8px 0 16px; }
  .cs-sheet-head h2 { font-size: 19px; }
  .cs-sheet-head p { display: none; }
  .cs-x { margin: -2px 0 0 0; }
  .cs-meter { padding: 0 16px 8px; }
  .cs-fig-field { font-size: 24px; }
  .cs-fig::before { font-size: 15px; }
  .cs-amounts { margin-top: 8px; }
  .cs-amt-tile, .cs-amounts [data-amt="match"] { height: 44px; }
  .cs-amounts [data-amt="match"].is-quiet { height: 40px; }
  .cs-meter-note { margin-top: 6px; }
  .cs-meter-bar { margin: 6px 0 6px; }
  .cs-meter-note { font-size: 12.5px; }
  .cs-tools { gap: 6px; padding: 2px 16px 0; }
  .cs-search { min-height: 40px; }
  .cs-seg button { min-height: 36px; }
  .cs-tool-row .cs-words button, .cs-link { min-height: 40px; padding-block: 6px; }
  .cs-tool-row .cs-words button.on::after { bottom: 2px; }
  .cs-grid { padding: 12px 16px 16px; }
  .cs-sheet-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .cs-go { min-height: 48px; }
}

.cs-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cs-opt > span { flex: none; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.cs-opt .cs-seg { flex: 1; max-width: 280px; }

/* ---- Jackpot ------------------------------------------------------------------ */
.jp-seats { display: inline-flex; align-items: center; flex: none; }
.jp-seats .bt-avatar { --size: 34px; margin-left: -10px; box-shadow: 0 0 0 2px var(--bg); }
.jp-seats .bt-avatar:first-child { margin-left: 0; }
.jp-seats b { margin-left: 8px; color: var(--muted); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.jp-row .cs-row-main { flex-wrap: nowrap; }
.jp-row .cs-row-figs { margin-left: auto; }
.jp-row .sm { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; }
.jp-row .cs-player .bt-avatar { --size: 34px; }
@media (max-width: 560px) {
  .jp-row { flex-wrap: wrap; row-gap: 10px; }
  .jp-row .cs-row-main { flex-wrap: wrap; row-gap: 8px; flex-basis: 100%; }
  .jp-row .cs-row-line { flex: 1 1 0; }
  .jp-row:not(.is-done) .cs-row-figs { flex-direction: row; align-items: center; gap: 10px; margin-left: 0; width: 100%; justify-content: space-between; }
  .jp-row > .solid, .jp-row > .ghost { width: 100%; }
  .jp-row.is-done, .jp-row.is-done .cs-row-main { flex-wrap: nowrap; }
}

/* The pot table: the pot at the head of the mat in the light, then each entry's cards laid out for the seat that put them up. */
.jp-mat { padding: 26px 16px 28px; }
@media (min-width: 700px) { .jp-mat { padding: 32px 36px 36px; } }
.jp-head { display: grid; justify-items: center; gap: 4px; margin: 0 0 22px; text-align: center; }
.jp-pot { display: grid; place-items: center; }
.jp-total { margin: 0; line-height: 1; }
.jp-total .price-tag { font-size: clamp(34px, 9vw, 46px); --tilt: -2deg; }
.jp-sub { margin: 10px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 700px) {
  .jp-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pot total" "pot sub"; align-items: center; justify-items: start; gap: 0 26px; width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .jp-pot { grid-area: pot; }
  .jp-total { grid-area: total; align-self: end; }
  .jp-sub { grid-area: sub; align-self: start; }
}
.jp-entries { display: grid; gap: 10px 22px; margin: 0 0 20px; padding: 0; list-style: none; }
.jp-entry {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who figs" "stake stake" "bar bar";
  align-items: center; gap: 10px 12px; padding: 14px 14px 12px; border-radius: 10px;
  transition: background 0.14s ease, box-shadow 0.14s ease, opacity 0.3s ease;
}
.jp-entry > .cs-player { grid-area: who; }
.jp-entry-figs { grid-area: figs; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-variant-numeric: tabular-nums; }
.jp-entry-figs .price-tag { font-size: 20px; }
.jp-odds { color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.jp-entry-stake { grid-area: stake; min-height: 0; padding-top: 2px; }
.jp-entry-stake:empty { display: none; }
.jp-entry .cs-stack.is-lg > img { width: 52px; height: 73px; margin-left: -22px; }
.jp-entry .cs-stack.is-lg > .cs-slab { width: 56px; margin-left: -20px; }
.jp-entry .cs-stack.is-lg > :first-child { margin-left: 0; }
.jp-bar { grid-area: bar; display: block; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.jp-bar b { display: block; height: 100%; border-radius: 2px; background: var(--ink-2); opacity: 0.7; }
.jp-entry.is-open-seat { grid-template-areas: "who"; min-height: 66px; border: 1px dashed rgba(220, 220, 214, 0.28); opacity: 0.85; }
.jp-entry.is-lit { background: rgba(241, 235, 224, 0.1); box-shadow: inset 0 0 0 1.5px var(--ink); }
.jp-table.is-decided .jp-entry:not(.is-won) { opacity: 0.4; }
.jp-table.is-decided .jp-entry.is-won { background: rgba(241, 235, 224, 0.08); box-shadow: inset 0 0 0 1.5px var(--ink); }
.jp-table.is-decided .jp-entry.is-won .jp-bar b { background: var(--ink); opacity: 1; }
.jp-result { text-align: center; margin: 0 auto 14px; }
.jp-haul { margin: 0 0 18px; }
.jp-haul .cs-h { justify-content: center; }
.jp-haul .cf-pile { justify-content: center; }
.jp-actions { display: grid; gap: 12px; justify-items: center; }
.jp-actions .cf-btns { justify-content: center; }
@media (min-width: 900px) { .jp-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jp-table { max-width: 980px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .jp-entry { transition: none; } }

/* Slabs just won: a line and the tiles, under the table. */
.cf-haul { margin: 22px 0 0; }
.cf-haul .cs-h { margin-bottom: 10px; }
.cf-haul .cf-pile, .jp-haul .cf-pile { grid-template-columns: repeat(auto-fill, minmax(76px, 100px)); }
.cs-note { margin: -6px auto 14px; max-width: 34ch; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.cs-won-line { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.cs-slab-btn .cs-card-value { margin-top: 6px; }

/* ---- Sell all winnings (shared by every casino result) ------------------------ */
.cs-winnings { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cs-winnings:empty { display: none; }
.cs-winnings .cs-sell { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; }
.cs-winnings small { color: var(--muted); font-size: 12.5px; }
.cs-winnings .cs-sell-cards { min-height: 44px; margin-top: 2px; font-size: 13.5px; font-weight: 600; }
.cs-sold { margin: 0; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.tb-result .cs-winnings { align-items: flex-start; margin-top: 14px; text-align: left; }
@media (max-width: 720px) { .tb-result .cs-winnings { align-items: stretch; text-align: center; } }