/* BEAT THE HOUSE, THE COMPONENTS (2026-10-24). Max's design handoff, built
   on public/house/bth-tokens.css. Isolation rules from the handoff: every
   rule is under [data-bth-root], every class is bth-*, every custom
   property is --bth-*, nothing touches a bare element outside the root.

   ONE DEPARTURE, AS THE HANDOFF ALLOWS: the body face is the site's
   Lexend rather than Plus Jakarta Sans ("if the live site uses different
   families for the same roles, use the site's families"). Barlow
   Condensed and JetBrains Mono are the site's already. */
[data-bth-root] { --bth-font-body: Lexend, 'Segoe UI', system-ui, sans-serif; }
[data-bth-root] { position: relative; font-family: var(--bth-font-body); color: var(--bth-ink); background: transparent; -webkit-font-smoothing: antialiased; }
[data-bth-root] *, [data-bth-root] *::before, [data-bth-root] *::after { box-sizing: border-box; }
[data-bth-root] button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[data-bth-root] button:disabled { opacity: .4; cursor: default; }
[data-bth-root] :focus-visible { outline: 2px solid var(--bth-acc); outline-offset: 2px; }
[data-bth-root] [hidden] { display: none !important; }
[data-bth-root] .bth-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
[data-bth-root] .bth-kick, [data-bth-root] .bth-k, [data-bth-root] .bth-lbl { font-family: var(--bth-font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
[data-bth-root] .bth-kick, [data-bth-root] .bth-lbl, [data-bth-root] .bth-k.is-mute { color: var(--bth-mute); }
[data-bth-root] .bth-k { font-weight: 700; color: var(--bth-acc-text); }
[data-bth-root] .bth-k.is-bad, [data-bth-root] .is-bad { color: var(--bth-bad); }
[data-bth-root] .bth-h1 { margin: 0; font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 44px; line-height: .92; letter-spacing: -.005em; }
[data-bth-root] .bth-h1 span, [data-bth-root] .bth-sh-h span, [data-bth-root] .bth-inv-h span, [data-bth-root] .bth-tv-h span, [data-bth-root] .bth-rh span:not(.is-bad) { color: var(--bth-acc-text); }
[data-bth-root] .bth-body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bth-mute); text-wrap: pretty; }
[data-bth-root] .bth-word { font-family: var(--bth-font-display); font-weight: 900; font-size: 26px; letter-spacing: .01em; white-space: nowrap; }
[data-bth-root] .bth-word span { color: var(--bth-acc-text); }

/* ---------- buttons ---------- */
[data-bth-root] .bth-btn { display: grid; place-items: center; height: 52px; padding: 0 18px; border-radius: var(--bth-r-pill); font-family: var(--bth-font-display); font-style: italic; font-weight: 800; font-size: 19px; letter-spacing: .04em; text-decoration: none; line-height: 1; text-align: center; }
[data-bth-root] .bth-btn--primary { background: var(--bth-acc); color: var(--bth-acc-ink); font-weight: 900; font-size: 22px; box-shadow: 0 0 24px var(--bth-acc-glow); }
[data-bth-root] .bth-btn--outline { border: 1.5px solid var(--bth-line2); background: var(--bth-surf); color: var(--bth-ink); }
[data-bth-root] .bth-btn--accline { border: 1.5px solid var(--bth-acc); background: var(--bth-surf); color: var(--bth-acc-text); }
[data-bth-root] .bth-btn--danger { background: var(--bth-bad); color: #fff; box-shadow: 0 0 24px var(--bth-bad-soft); }
[data-bth-root] .bth-btn--big { height: 58px; font-size: 28px; font-weight: 900; box-shadow: 0 0 30px var(--bth-acc-glow); }
[data-bth-root] .bth-btn--lock { height: 56px; font-size: 28px; font-weight: 900; box-shadow: 0 0 30px var(--bth-acc-glow); }

/* ---------- lobby ---------- */
[data-bth-root] .bth-lobby { display: flex; flex-direction: column; gap: 13px; max-width: 560px; padding: 10px 0 24px; }
[data-bth-root] .bth-lobby-btns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 4px; }
[data-bth-root] .bth-practice { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px dashed var(--bth-line2); text-align: left; font-size: 13.5px; line-height: 1.45; color: var(--bth-mute); }
[data-bth-root] .bth-practice b { color: var(--bth-ink); }
[data-bth-root] .bth-practice-ic { font-size: 20px; }
[data-bth-root] .bth-practice-go { margin-left: auto; font-weight: 700; color: var(--bth-acc-text); white-space: nowrap; }
[data-bth-root] .bth-lobby-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--bth-mute); }
/* step 3: the lobby (designs 01 and D1) */
[data-bth-root] .bth-lobby.bth-lobby--grid { max-width: 560px; padding-bottom: 120px; }
[data-bth-root] .bth-lobby-l, [data-bth-root] .bth-lobby-r { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
[data-bth-root] .bth-quick { height: 62px; border-radius: 999px; background: var(--bth-acc); color: var(--bth-acc-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 30px var(--bth-acc-glow); }
[data-bth-root] .bth-quick span { font-family: var(--bth-font-display); font-style: italic; font-size: 26px; font-weight: 900; letter-spacing: .04em; line-height: 1; }
[data-bth-root] .bth-quick small { font-family: var(--bth-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; }
[data-bth-root] .bth-tables-hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
[data-bth-root] .bth-tables-h { font-family: var(--bth-font-display); font-style: italic; font-size: 20px; font-weight: 800; }
[data-bth-root] .bth-tables-h small { font-family: var(--bth-font-mono); font-style: normal; font-size: 11px; color: var(--bth-mute); font-weight: 400; }
[data-bth-root] .bth-filters { display: flex; gap: 6px; align-items: center; }
[data-bth-root] .bth-chips { display: none; gap: 6px; }
[data-bth-root] .bth-fchip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--bth-line2); font-family: var(--bth-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--bth-mute); }
[data-bth-root] .bth-fchip.is-on { background: var(--bth-acc); border-color: var(--bth-acc); color: var(--bth-acc-ink); }
[data-bth-root] .bth-fsel select { appearance: none; -webkit-appearance: none; padding: 5px 26px 5px 10px; border-radius: 999px; border: 1px solid var(--bth-line2); background: var(--bth-surf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238D9497'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--bth-mute); font-family: var(--bth-font-mono); font-size: 10.5px; letter-spacing: .1em; min-height: 30px; }
[data-bth-root] .bth-tables { display: flex; flex-direction: column; gap: 10px; }
[data-bth-root] .bth-tables-cols { display: none; }
[data-bth-root] .bth-tables-empty { padding: 16px; border-radius: 14px; border: 1px dashed var(--bth-line2); font-size: 13px; color: var(--bth-mute); text-align: center; }
[data-bth-root] .bth-tables-empty b { color: var(--bth-acc-text); }
[data-bth-root] .bth-trow { padding: 13px 14px; border-radius: 14px; background: var(--bth-surf); border: 1px solid var(--bth-line2); display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "n c" "b j"; gap: 10px; align-items: center; }
[data-bth-root] .bth-trow-n { grid-area: n; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[data-bth-root] .bth-trow-n b { font-family: var(--bth-font-display); font-style: italic; font-size: 21px; font-weight: 800; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-trow-n span { font-size: 11.5px; color: var(--bth-mute); }
[data-bth-root] .bth-trow-r { display: none; }
[data-bth-root] .bth-trow-c { grid-area: c; align-self: start; }
[data-bth-root] .bth-trow-b { grid-area: b; display: inline-flex; gap: 12px; align-items: center; font-family: var(--bth-font-mono); font-size: 11px; font-weight: 600; }
[data-bth-root] .bth-trow-b i { font-style: normal; color: var(--bth-mute); }
[data-bth-root] .bth-trow-d { grid-area: b; justify-self: end; margin-right: 4px; font-family: var(--bth-font-mono); font-size: 11px; color: var(--bth-acc-text); letter-spacing: .08em; }
[data-bth-root] .bth-trow .bth-join { grid-area: j; }
[data-bth-root] .bth-carrypill { display: inline-block; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--bth-acc); color: var(--bth-acc-text); font-family: var(--bth-font-mono); font-size: 10px; font-weight: 700; box-shadow: 0 0 14px var(--bth-acc-glow); white-space: nowrap; }
[data-bth-root] .bth-join { padding: 5px 14px; border-radius: 999px; border: 1.5px solid var(--bth-acc); color: var(--bth-acc-text); font-family: var(--bth-font-display); font-style: italic; font-size: 16px; font-weight: 800; white-space: nowrap; }
@media (max-width: 1023px) {
  [data-bth-root] .bth-lobby--grid .bth-lobby-btns { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 40px 20px calc(30px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bth-bg) 70%, transparent); }
  [data-bth-root] .bth-lobby--grid { display: flex; flex-direction: column; gap: 13px; }
  [data-bth-root] .bth-lobby--grid .bth-lobby-l { display: contents; }
  [data-bth-root] .bth-lobby--grid .bth-bank { order: 3; }
  [data-bth-root] .bth-lobby--grid .bth-stats { order: 4; }
  [data-bth-root] .bth-lobby--grid .bth-lobby-r { order: 2; }
}
@media (min-width: 1024px) {
  [data-bth-root] .bth-lobby.bth-lobby--grid { max-width: none; display: grid; grid-template-columns: 480px minmax(0,1fr); gap: 48px; padding: 24px 0 48px; }
  [data-bth-root] .bth-lobby--grid .bth-lobby-l { gap: 22px; }
  [data-bth-root] .bth-lobby--grid .bth-lobby-l .bth-lobby-top { order: -1; }
  [data-bth-root] .bth-quick { height: 76px; box-shadow: 0 0 40px var(--bth-acc-glow); }
  [data-bth-root] .bth-quick span { font-size: 32px; }
  [data-bth-root] .bth-quick small { font-size: 11px; }
  [data-bth-root] .bth-lobby--grid .bth-lobby-btns { grid-template-columns: 1fr 1fr; gap: 10px; }
  [data-bth-root] .bth-lobby--grid .bth-stats { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: auto; }
  [data-bth-root] .bth-lobby-r { gap: 14px; }
  [data-bth-root] .bth-tables-h { font-size: 32px; font-weight: 900; }
  [data-bth-root] .bth-tables-h small { font-size: 14px; }
  [data-bth-root] .bth-chips { display: flex; }
  /* THE LIST STAYS CARDS ON A DESK: the app's content column (1,044px)
     leaves the list about 516px, too narrow for the design's six-column row
     (built for a 1,440 canvas); the cards read cleanly at that width */
  [data-bth-root] .bth-trow { padding: 16px 18px; }
  [data-bth-root] .bth-trow-n b { font-size: 24px; }
  [data-bth-root] .bth-trow-n span { font-size: 13px; }
  [data-bth-root] .bth-trow-b, [data-bth-root] .bth-trow-d { font-size: 12.5px; }
  [data-bth-root] .bth-join { font-size: 18px; padding: 7px 16px; }
  [data-bth-root] .bth-lobby-r .bth-practice { margin-top: auto; }
}
/* step 2: the balance, the stat tiles, out of chips, the profile card */
[data-bth-root] .bth-lobby-top { display: flex; justify-content: flex-end; }
[data-bth-root] .bth-chipspill.is-bad { border-color: var(--bth-bad); background: var(--bth-bad-soft); color: var(--bth-bad); }
[data-bth-root] .bth-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
[data-bth-root] .bth-stat { padding: 14px; border-radius: 14px; background: var(--bth-surf); border: 1px solid var(--bth-line2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[data-bth-root] .bth-stat span { font-family: var(--bth-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--bth-mute); white-space: nowrap; }
[data-bth-root] .bth-stat b { font-family: var(--bth-font-mono); font-size: 24px; font-weight: 800; white-space: nowrap; }
[data-bth-root] .bth-stat b.is-acc { color: var(--bth-acc-text); }
[data-bth-root] .bth-stat small { margin-left: 6px; font-size: 10px; letter-spacing: .12em; color: var(--bth-mute); font-weight: 700; }
@media (min-width: 1024px) { [data-bth-root] .bth-stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
/* THE POKER BANK (Max, 2026-10-28): between the lobby buttons and the stats.
   The balance a seat buys in from, how far the tables have left you up or
   down, and the two moves. */
[data-bth-root] .bth-bank { padding: 14px 16px; border-radius: 16px; background: var(--bth-surf); border: 1px solid var(--bth-acc); box-shadow: 0 0 24px var(--bth-acc-glow); display: flex; flex-direction: column; gap: 8px; }
[data-bth-root] .bth-bank-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
[data-bth-root] .bth-bank-k { font-family: var(--bth-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--bth-mute); white-space: nowrap; }
[data-bth-root] .bth-bank-bal { font-family: var(--bth-font-mono); font-size: 26px; font-weight: 800; color: var(--bth-acc-text); white-space: nowrap; }
[data-bth-root] .bth-bank-net { font-family: var(--bth-font-mono); font-size: 12px; letter-spacing: .06em; color: var(--bth-mute); }
[data-bth-root] .bth-bank-net.is-up { color: var(--bth-acc-text); }
[data-bth-root] .bth-bank-net.is-down { color: var(--bth-bad, #ff6b5a); }
[data-bth-root] .bth-bank-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-bth-root] .bth-bank-btns .bth-btn:disabled { opacity: .45; cursor: default; }
[data-bth-root] .bth-bank-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
[data-bth-root] .bth-bank-amt { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
[data-bth-root] .bth-bank-amt span { font-family: var(--bth-font-mono); font-size: 12px; letter-spacing: .12em; color: var(--bth-mute); }
[data-bth-root] .bth-bank-amt input { flex: 1; min-width: 0; font-family: var(--bth-font-mono); font-size: 22px; font-weight: 800; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bth-line2); background: var(--bth-bg); color: inherit; }
[data-bth-root] .bth-broke { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 24px 6px 8px; max-width: 440px; margin: 0 auto; }
[data-bth-root] .bth-broke-ic { width: 116px; height: 116px; border-radius: 50%; border: 6px double var(--bth-line2); display: grid; place-items: center; font-size: 54px; line-height: 1; color: var(--bth-mute); }
[data-bth-root] .bth-h1.is-broke { font-size: 46px; }
[data-bth-root] .bth-ink-mono { font-family: var(--bth-font-mono); color: var(--bth-ink); }
[data-bth-root] .bth-topup { align-self: stretch; padding: 14px; border-radius: 14px; background: var(--bth-surf); border: 1px solid var(--bth-line2); display: flex; justify-content: space-between; align-items: center; }
[data-bth-root] .bth-topup b { font-family: var(--bth-font-mono); font-size: 28px; font-weight: 800; }
[data-bth-root] .bth-broke .bth-btn { align-self: stretch; }
[data-bth-root] .bth-broke-note { font-size: 11.5px; color: var(--bth-mute); }
[data-bth-root] .bth-sh-buy { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--bth-mute); }
[data-bth-root] .bth-sh-buy b { color: var(--bth-ink); }
[data-bth-root] .bth-warnbar.is-real { border-color: var(--bth-acc); background: var(--bth-acc-soft); }
[data-bth-root] .bth-warnbar.is-real span:first-child { color: var(--bth-acc-text); font-family: var(--bth-font-mono); font-weight: 800; }
[data-bth-root] .bth-warnbar.is-real b { color: var(--bth-acc-text); }
[data-bth-root].bth-pf { margin-top: 14px; padding: 14px; border-radius: 16px; border: 1px solid var(--bth-line2); background: var(--bth-bg); display: flex; flex-direction: column; gap: 10px; }
[data-bth-root] .bth-pf-hd { display: flex; justify-content: space-between; gap: 8px; }
[data-bth-root] .bth-stats.is-pf { grid-template-columns: repeat(4, minmax(0,1fr)); }
[data-bth-root] .bth-stats.is-pf .bth-stat { padding: 10px 12px; }
[data-bth-root] .bth-stats.is-pf .bth-stat b { font-size: 18px; }
@media (max-width: 480px) { [data-bth-root] .bth-stats.is-pf { grid-template-columns: repeat(2, minmax(0,1fr)); } }
[data-bth-root] .bth-msg { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bth-warn); background: var(--bth-warn-soft); font-size: 12.5px; }
@media (min-width: 1024px) {
  [data-bth-root] .bth-lobby { max-width: 620px; gap: 20px; padding-top: 24px; }
  [data-bth-root] .bth-h1 { font-size: 88px; line-height: .88; }
  [data-bth-root] .bth-body { font-size: 16px; line-height: 1.55; }
  [data-bth-root] .bth-kick { font-size: 12px; letter-spacing: .18em; }
  [data-bth-root] .bth-lobby .bth-btn { height: 56px; font-size: 21px; }
}

/* ---------- the shell (a table is full screen) ---------- */
[data-bth-root] .bth-shell { position: fixed; inset: 0; z-index: 90; background: var(--bth-bg); display: flex; flex-direction: column; overflow: hidden; }
[data-bth-root] .bth-head { height: 56px; flex: none; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-bth-root] .bth-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-bth-root] .bth-back { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--bth-surf); border: 1px solid var(--bth-line2); display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--bth-mute); }
[data-bth-root] .bth-head-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-bth-root] .bth-head .bth-lbl { font-size: 9.5px; white-space: nowrap; }
[data-bth-root] .bth-head-code, [data-bth-root] .bth-top-name { font-family: var(--bth-font-display); font-style: italic; font-size: 20px; font-weight: 800; white-space: nowrap; line-height: 1; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-head-code span, [data-bth-root] .bth-top-name span { color: var(--bth-acc-text); }
[data-bth-root] .bth-head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
[data-bth-root] .bth-stagelbl { font-family: var(--bth-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; color: var(--bth-acc-text); white-space: nowrap; }
[data-bth-root] .bth-steps { display: flex; gap: 3px; }
[data-bth-root] .bth-step { display: block; width: 12px; height: 4px; border-radius: 2px; background: var(--bth-line2); transition: all .3s; }
[data-bth-root] .bth-step.is-done { background: var(--bth-mute); }
[data-bth-root] .bth-step.is-on { width: 22px; background: var(--bth-acc); }
[data-bth-root] .bth-main { flex: 1; min-height: 0; display: flex; }
[data-bth-root] .bth-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
[data-bth-root] .bth-stagewrap { position: relative; width: 100%; overflow: visible; display: flex; justify-content: center; flex: none; }
[data-bth-root] .bth-stage { position: absolute; top: 0; left: 50%; margin-left: 0; transform-origin: top center; translate: -50% 0; }

/* ---------- the table ---------- */
[data-bth-root] .bth-rim { position: absolute; background: var(--bth-rim); border: 1px solid var(--bth-line2); box-shadow: 0 0 0 1px var(--bth-acc-soft), 0 0 50px var(--bth-acc-soft), 0 20px 40px rgba(0,0,0,.3); }
[data-bth-root] .bth-felt { width: 100%; height: 100%; background: var(--bth-felt-tex), var(--bth-felt); box-shadow: inset 0 0 0 1.5px var(--bth-acc-soft), inset 0 12px 40px rgba(0,0,0,.25); }
[data-bth-root] .bth-houseglow { position: absolute; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 45%, var(--bth-bad-soft), transparent 75%); opacity: 0; transition: opacity .35s; }
[data-bth-root] .bth-houseglow.is-on { opacity: 1; transition-delay: .3s; }
[data-bth-root] .bth-potrow { position: absolute; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 6px; z-index: 2; }
[data-bth-root] .bth-pill { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--bth-chip-bg); border: 1px solid var(--bth-line2); font-family: var(--bth-font-mono); font-size: 12px; font-weight: 700; color: var(--bth-ink); white-space: nowrap; transition: all .4s; }
[data-bth-root] .bth-pill-k { font-size: 8.5px; letter-spacing: .14em; opacity: .75; }
[data-bth-root] .bth-pill.is-carry { border-color: var(--bth-acc); color: var(--bth-acc-text); box-shadow: 0 0 18px var(--bth-acc-glow); }
[data-bth-root] .bth-pill.is-carry .bth-pill-k { opacity: 1; }
[data-bth-root] .bth-pill.is-carry.is-up { font-size: 14px; padding: 7px 13px; box-shadow: 0 0 34px var(--bth-acc-glow), 0 0 0 4px var(--bth-acc-soft); }
[data-bth-root] .bth-pill.is-win { background: var(--bth-acc); color: var(--bth-acc-ink); border-color: var(--bth-acc); }
[data-bth-root] .bth-pill.is-dim { opacity: .45; }

[data-bth-root] .bth-card { position: absolute; padding: 9px; border-radius: 14px; background: var(--bth-surf); border: 1px solid var(--bth-line2); box-shadow: 0 14px 30px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 6px; z-index: 1; }
[data-bth-root] .bth-card-hd { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-family: var(--bth-font-mono); font-size: 8.5px; letter-spacing: .12em; color: var(--bth-mute); white-space: nowrap; }
[data-bth-root] .bth-housestamp { position: absolute; left: 50%; top: -13px; padding: 4px 10px; border-radius: 6px; background: var(--bth-bad); color: #fff; font-family: var(--bth-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; box-shadow: 0 6px 18px var(--bth-bad-soft); opacity: 0; transform: translateX(-50%) rotate(-3deg) scale(2); z-index: 2; pointer-events: none; }
[data-bth-root] .bth-housestamp.is-on { animation: bth-stamp .35s var(--bth-ease-slam) .4s both; }
[data-bth-root] .bth-wait { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 4px 12px; text-align: center; }
[data-bth-root] .bth-dots { font-family: var(--bth-font-mono); font-size: 13px; letter-spacing: .2em; color: var(--bth-acc-text); }
[data-bth-root] .bth-wait-h { font-family: var(--bth-font-display); font-style: italic; font-size: 22px; font-weight: 800; line-height: 1; }
[data-bth-root] .bth-wait-s { font-size: 11.5px; line-height: 1.45; color: var(--bth-mute); text-wrap: pretty; }
[data-bth-root] .bth-sold { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; min-height: 40px; border-radius: 9px; background: var(--bth-surf2); border: 1.5px solid var(--bth-line); transition: all .3s .1s; }
[data-bth-root] .bth-sold-k { font-family: var(--bth-font-mono); font-size: 9px; letter-spacing: .14em; color: var(--bth-mute); }
[data-bth-root] .bth-sold-v { display: grid; justify-items: end; }
[data-bth-root] .bth-sold-dots, [data-bth-root] .bth-sold-price { grid-area: 1 / 1; font-family: var(--bth-font-mono); white-space: nowrap; }
[data-bth-root] .bth-sold-dots { font-size: 17px; font-weight: 700; letter-spacing: .04em; transition: opacity .12s; }
[data-bth-root] .bth-sold-price { font-size: 21px; font-weight: 800; color: var(--bth-acc-text); opacity: 0; }
[data-bth-root] .bth-sold.is-river { background: var(--bth-acc-soft); border-color: var(--bth-acc); box-shadow: 0 0 26px var(--bth-acc-glow); }
[data-bth-root] .bth-sold.is-river .bth-sold-dots { opacity: 0; }
[data-bth-root] .bth-sold.is-river .bth-sold-price { opacity: 1; }
[data-bth-root] .bth-tiles { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 5px; }
[data-bth-root] .bth-tile { height: 37px; min-width: 0; border-radius: 8px; }
[data-bth-root] .bth-tile.is-hero { grid-column: span 2; height: 50px; }
[data-bth-root] .bth-tile.is-span { grid-column: span 2; }
[data-bth-root] .bth-tile .bth-flip__front { padding: 5px 8px; display: flex; flex-direction: column; justify-content: center; gap: 2px; background: var(--bth-surf2); border: 1px solid var(--bth-line); }
[data-bth-root] .bth-tile.is-hero .bth-flip__front { align-items: center; text-align: center; background: var(--bth-acc-soft); border: 1.5px solid var(--bth-acc); box-shadow: 0 0 18px var(--bth-acc-soft); }
[data-bth-root] .bth-tile .bth-flip__back { display: grid; place-items: center; border: 1px solid var(--bth-line); }
[data-bth-root] .bth-tile .bth-flip__back span { font-family: var(--bth-font-display); font-style: italic; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--bth-mute); opacity: .8; }
[data-bth-root] .bth-tile-l { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-family: var(--bth-font-mono); font-size: 8px; letter-spacing: .12em; color: var(--bth-mute); white-space: nowrap; }
[data-bth-root] .bth-tile-l span:last-child { font-size: 11px; line-height: 1; letter-spacing: 0; }
[data-bth-root] .bth-tile.is-hero .bth-tile-l { display: none; }
[data-bth-root] .bth-tile-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.05; }
[data-bth-root] .bth-tile-v.is-word { font-family: var(--bth-font-display); font-style: italic; font-size: 15px; font-weight: 800; }
[data-bth-root] .bth-tile-v.is-num { font-family: var(--bth-font-mono); font-size: 13px; font-weight: 700; }
[data-bth-root] .bth-tile-v.is-hero { font-family: var(--bth-font-display); font-style: italic; font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--bth-acc-text); white-space: normal; }
[data-bth-root] .bth-linebox { display: flex; flex-direction: column; gap: 4px; }
[data-bth-root] .bth-summary { font-size: 10.5px; line-height: 1.45; color: var(--bth-mute); text-wrap: pretty; }
[data-bth-root] .bth-linelbl { font-family: var(--bth-font-mono); font-size: 8.5px; letter-spacing: .12em; color: var(--bth-mute); margin-top: 2px; }
[data-bth-root] .bth-line { position: relative; overflow: hidden; }
[data-bth-root] .bth-track { position: absolute; left: 0; right: 0; top: 40px; height: 2px; border-radius: 1px; background: var(--bth-line2); }
[data-bth-root] .bth-corr { position: absolute; top: 16px; height: 50px; background: var(--bth-good-soft); border-left: 1.5px dashed var(--bth-good); border-right: 1.5px dashed var(--bth-good); opacity: 0; transform: scaleX(0); transform-origin: center; }
[data-bth-root] .bth-corr span { position: absolute; left: 4px; bottom: 2px; font-family: var(--bth-font-mono); font-size: 8px; font-weight: 700; color: var(--bth-good); white-space: nowrap; }
[data-bth-root] .bth-corr.is-on { animation: bth-corridor .5s var(--bth-ease) .45s both; }
[data-bth-root] .bth-salemark { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; opacity: 0; z-index: 1; }
[data-bth-root] .bth-salemark span { font-family: var(--bth-font-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; color: var(--bth-acc-text); }
[data-bth-root] .bth-salemark i { width: 2px; height: 66px; border-radius: 1px; background: var(--bth-acc); box-shadow: 0 0 10px var(--bth-acc-glow); }
[data-bth-root] .bth-salemark.is-on { opacity: 1; transition: opacity .15s .3s; }
[data-bth-root] .bth-mark { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; transition: left .6s var(--bth-ease); }
[data-bth-root] .bth-mark.is-below { flex-direction: column-reverse; }
[data-bth-root] .bth-mark span { font-family: var(--bth-font-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; line-height: 11px; color: var(--bth-mc); white-space: nowrap; transition: color .3s .5s; }
[data-bth-root] .bth-mark i { display: block; border-radius: 50%; background: var(--bth-mc); border: 2px solid var(--bth-surf); transition: background .3s .5s; }
[data-bth-root] .bth-mark.is-me i { border-color: var(--bth-acc); }
[data-bth-root] .bth-axis { display: flex; justify-content: space-between; font-family: var(--bth-font-mono); font-size: 8.5px; color: var(--bth-mute); margin-top: -4px; }

/* ---------- seats ---------- */
[data-bth-root] .bth-seat, [data-bth-root] .bth-you { position: absolute; transition: opacity .4s; z-index: 1; }
[data-bth-root] .bth-seat-in { display: flex; flex-direction: column; align-items: center; gap: 3px; }
/* a dimmed seat (folded, sitting out, the House's hand) reads as out of it without going
   unreadable: it was opacity .45, and its name, stack and avatar letters fell under the
   contrast line in the light theme (2026-10-26). Now the colour goes and the avatar turns
   to a dashed outline, while the text keeps the theme's own muted ink */
[data-bth-root] .bth-seat.is-dim, [data-bth-root] .bth-you.is-dim { filter: saturate(.15); }
[data-bth-root] :is(.bth-seat, .bth-you).is-dim .bth-av { background: transparent; color: var(--bth-mute); border-style: dashed; border-color: var(--bth-line2); box-shadow: none; }
[data-bth-root] :is(.bth-seat, .bth-you).is-dim .bth-seat-in { color: var(--bth-mute); }
[data-bth-root] .bth-avwrap { position: relative; }
[data-bth-root] .bth-av { border-radius: 50%; background: var(--bth-surf2); color: var(--bth-ink); display: grid; place-items: center; font-family: var(--bth-font-mono); font-size: 12px; font-weight: 700; border: 2px solid var(--bth-line2); }
[data-bth-root] .bth-av.is-bot { font-family: inherit; font-size: 22px; }
[data-bth-root] .bth-av.is-you { background: var(--bth-surf); color: var(--bth-acc-text); font-size: 14px; border-color: var(--bth-acc); box-shadow: 0 0 14px var(--bth-acc-soft); transition: box-shadow .5s 1.2s; }
[data-bth-root] .bth-you.is-glow .bth-av.is-you { box-shadow: 0 0 0 4px var(--bth-acc-soft), 0 0 40px var(--bth-acc-glow); }
[data-bth-root] .bth-ringsvg { position: absolute; transform: rotate(-90deg); pointer-events: none; }
[data-bth-root] .bth-dealer { position: absolute; right: -7px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%; background: #F2F4EE; color: #0E1112; font-size: 10px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); z-index: 2; }
[data-bth-root] .bth-blind { position: absolute; left: -10px; bottom: -3px; padding: 2px 4px; border-radius: 999px; background: var(--bth-surf); border: 1px solid var(--bth-line2); font-family: var(--bth-font-mono); font-size: 8px; font-weight: 700; color: var(--bth-ink); z-index: 2; }
[data-bth-root] .bth-hole { position: absolute; transform: rotate(6deg); opacity: 0; transition: opacity .2s; perspective: 400px; border-radius: 4px; }
[data-bth-root] .bth-hole.has { opacity: 1; }
[data-bth-root] .bth-hole .bth-flip__front { background: #F2F4EE; color: #0E1112; font-family: var(--bth-font-mono); font-size: 10px; font-weight: 700; display: grid; place-items: center; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
[data-bth-root] .bth-hole .bth-flip__back { border: 1px solid var(--bth-line2); box-shadow: 0 3px 8px rgba(0,0,0,.25); display: grid; place-items: center; font-size: 11px; }
[data-bth-root] .bth-hole.is-you { border-radius: 5px; }
[data-bth-root] .bth-hole.is-you .bth-flip__front { font-size: 11px; box-shadow: 0 0 0 1.5px var(--bth-acc), 0 4px 10px rgba(0,0,0,.3); }
[data-bth-root] .bth-hole.is-you .bth-flip__back { border-color: var(--bth-acc); }
[data-bth-root] .bth-nmrow { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
[data-bth-root] .bth-nm { font-size: 11px; font-weight: 700; white-space: nowrap; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-you .bth-nm { font-size: 13px; font-weight: 800; }
[data-bth-root] .bth-ovr { font-family: var(--bth-font-mono); font-size: 8.5px; font-weight: 700; padding: 1px 4px; border-radius: 4px; background: var(--bth-surf2); color: var(--bth-mute); border: 1px solid var(--bth-line); }
[data-bth-root] .bth-ovr.is-you { background: var(--bth-acc); color: var(--bth-acc-ink); border-color: var(--bth-acc); }
[data-bth-root] .bth-stack { font-family: var(--bth-font-mono); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
[data-bth-root] .bth-you .bth-stack { font-size: 11.5px; }
[data-bth-root] .bth-stack span { color: var(--bth-acc-text); }
[data-bth-root] .bth-status { font-family: var(--bth-font-mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; padding: 3px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; margin-top: 1px; min-height: 11px; }
[data-bth-root] .bth-you .bth-status { font-size: 9.5px; padding: 3px 8px; }
[data-bth-root] .bth-status.is-empty { visibility: hidden; }
[data-bth-root] .t-neutral { background: var(--bth-surf2); color: var(--bth-mute); }
[data-bth-root] .t-raise { background: var(--bth-acc-soft); color: var(--bth-acc-text); }
[data-bth-root] .t-fold { background: transparent; color: var(--bth-mute); border-style: dashed !important; border-color: var(--bth-line2) !important; }
[data-bth-root] .t-good { background: var(--bth-good-soft); color: var(--bth-good); }
[data-bth-root] .t-bad { background: var(--bth-bad-soft); color: var(--bth-bad); }
[data-bth-root] .t-acting { background: var(--bth-acc); color: var(--bth-acc-ink); }
[data-bth-root] .t-mid { background: var(--bth-surf2); color: var(--bth-ink); }
[data-bth-root] .bth-emptyav { border-radius: 50%; border: 1.5px dashed var(--bth-line2); display: grid; place-items: center; color: var(--bth-mute); font-size: 18px; background: var(--bth-chip-bg); }
[data-bth-root] .bth-emptytx { font-size: 11px; color: var(--bth-mute); font-style: italic; white-space: nowrap; }
[data-bth-root] .bth-seat[data-seat]:not([data-seat=""]) { cursor: default; }
[data-bth-root] .bth-react { position: absolute; left: 50%; top: -6px; font-size: 22px; line-height: 1; transform: translate(-50%, 0) scale(.4); opacity: 0; pointer-events: none; z-index: 3; }
[data-bth-root] .bth-react.is-on { animation: bth-react 2.6s var(--bth-ease) both; }
@keyframes bth-react { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 12% { opacity: 1; transform: translate(-50%, -22px) scale(1.15); } 25% { transform: translate(-50%, -26px) scale(1); } 80% { opacity: 1; transform: translate(-50%, -30px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(.9); } }

[data-bth-root] .bth-winglow { position: absolute; left: 70px; top: 410px; width: 250px; height: 160px; background: radial-gradient(closest-side, var(--bth-acc-glow), transparent); pointer-events: none; opacity: 0; transition: opacity .35s; }
[data-bth-root] .bth-winglow.is-on { opacity: 1; transition-delay: 1.2s; }
[data-bth-root] .bth-winrow { position: absolute; left: 0; right: 0; top: 410px; display: flex; justify-content: center; gap: 6px; opacity: 0; transition: opacity .35s; z-index: 2; pointer-events: none; }
[data-bth-root] .bth-winrow.is-on { opacity: 1; transition-delay: .5s; }
[data-bth-root] .bth-badge { padding: 5px 10px; border-radius: 999px; background: var(--bth-surf); border: 1px solid var(--bth-acc); color: var(--bth-acc-text); font-family: var(--bth-font-mono); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
[data-bth-root] .bth-badge.is-fill { background: var(--bth-acc); color: var(--bth-acc-ink); letter-spacing: .1em; box-shadow: 0 0 20px var(--bth-acc-glow); }
[data-bth-root] .bth-chip { position: absolute; z-index: 3; pointer-events: none; }

/* ---------- the tray (mobile) ---------- */
[data-bth-root] .bth-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 92; margin: 0 auto; max-width: 520px; padding: 14px 16px calc(30px + env(safe-area-inset-bottom)); background: var(--bth-surf); border-top: 1px solid var(--bth-line2); border-radius: 24px 24px 0 0; box-shadow: 0 -14px 34px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 12px; }
[data-bth-root] .bth-tray.is-sheet { gap: 10px; padding-top: 16px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
[data-bth-root] .bth-tray.is-win { border-top-color: var(--bth-acc); box-shadow: 0 -10px 40px var(--bth-acc-soft); }
[data-bth-root] .bth-tray.is-house { border-top-color: var(--bth-bad); box-shadow: 0 -10px 40px var(--bth-bad-soft); }
[data-bth-root] .bth-trayhd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
[data-bth-root] .bth-trayhd-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-bth-root] .bth-ring34, [data-bth-root] .bth-ring54, [data-bth-root] .bth-ring60 { position: relative; flex: none; }
[data-bth-root] .bth-ring34 { width: 34px; height: 34px; }
[data-bth-root] .bth-ring54 { width: 54px; height: 54px; }
[data-bth-root] .bth-ring60 { width: 60px; height: 60px; }
[data-bth-root] .bth-ring34 svg, [data-bth-root] .bth-ring54 svg, [data-bth-root] .bth-ring60 svg { transform: rotate(-90deg); display: block; }
[data-bth-root] .bth-ring34 span, [data-bth-root] .bth-ring54 span, [data-bth-root] .bth-ring60 span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--bth-font-mono); font-weight: 700; }
[data-bth-root] .bth-ring34 span { font-size: 10.5px; }
[data-bth-root] .bth-ring54 span { font-size: 17px; font-weight: 800; }
[data-bth-root] .bth-ring60 span { font-size: 18px; font-weight: 800; }
[data-bth-root] .is-dim > svg .bth-ring__value { stroke: var(--bth-mute); }
[data-bth-root] .bth-tt-w { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-bth-root] .bth-tt { font-family: var(--bth-font-display); font-style: italic; font-size: 21px; font-weight: 800; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-ts { font-size: 11.5px; color: var(--bth-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: var(--bth-font-mono); font-size: 10px; letter-spacing: .1em; color: var(--bth-mute); white-space: nowrap; }
[data-bth-root] .bth-meta b { color: var(--bth-acc-text); }
[data-bth-root] .bth-btns { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
[data-bth-root] .bth-btns2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; align-items: center; }
[data-bth-root] .bth-tbtn { height: 54px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--bth-font-display); font-style: italic; font-size: 20px; font-weight: 800; letter-spacing: .04em; line-height: 1; }
[data-bth-root] .bth-tbtn small { font-family: var(--bth-font-mono); font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; opacity: .8; }
[data-bth-root] .bth-tbtn.is-span { grid-column: span 2; }
[data-bth-root] .bth-tbtn.is-outline { border: 1.5px solid var(--bth-line2); }
[data-bth-root] .bth-tbtn.is-mid { background: var(--bth-surf2); border: 1.5px solid var(--bth-line2); }
[data-bth-root] .bth-tbtn.is-primary { background: var(--bth-acc); color: var(--bth-acc-ink); box-shadow: 0 0 24px var(--bth-acc-glow); }
[data-bth-root] .bth-tbtn.is-danger { background: var(--bth-bad); color: #fff; box-shadow: 0 0 24px var(--bth-bad-soft); }
[data-bth-root] .bth-tbtn.is-wide { height: 50px; font-size: 19px; width: 100%; }
[data-bth-root] .bth-tbtn.is-sm { height: auto; padding: 9px 16px; font-size: 17px; }
[data-bth-root] .bth-tbtn.is-on { border-color: var(--bth-acc); color: var(--bth-acc-text); background: var(--bth-acc-soft); }
[data-bth-root] .bth-raise, [data-bth-root] .bth-bar-raise { display: flex; flex-direction: column; gap: 11px; padding: 13px; border-radius: 14px; background: var(--bth-bg); border: 1px solid var(--bth-line2); }
[data-bth-root] .bth-raise-h, [data-bth-root] .bth-allin-h { display: flex; justify-content: space-between; align-items: baseline; }
[data-bth-root] .bth-raise-h span, [data-bth-root] .bth-allin-h span { font-family: var(--bth-font-mono); font-size: 10px; letter-spacing: .16em; color: var(--bth-mute); }
[data-bth-root] .bth-raise-h b, [data-bth-root] .bth-allin-h b { font-family: var(--bth-font-mono); font-size: 28px; font-weight: 800; }
[data-bth-root] .bth-raise-h b i { font-style: normal; color: var(--bth-acc-text); }
[data-bth-root] .bth-slider { position: relative; height: 24px; }
[data-bth-root] .bth-slider::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 5px; border-radius: 3px; background: var(--bth-line2); }
[data-bth-root] .bth-slider-fill { position: absolute; left: 0; top: 10px; height: 5px; width: var(--p); border-radius: 3px; background: var(--bth-acc); box-shadow: 0 0 10px var(--bth-acc-glow); pointer-events: none; }
[data-bth-root] .bth-slider-thumb { position: absolute; left: var(--p); top: 1px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #F2F4EE; border: 3px solid var(--bth-acc); box-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none; }
[data-bth-root] .bth-slider input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
[data-bth-root] .bth-slider input:focus-visible ~ .bth-slider-thumb { outline: 2px solid var(--bth-acc); outline-offset: 2px; }
[data-bth-root] .bth-raise-lim { display: flex; justify-content: space-between; font-family: var(--bth-font-mono); font-size: 9.5px; color: var(--bth-mute); }
[data-bth-root] .bth-presets { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
[data-bth-root] .bth-preset { height: 38px; border-radius: 10px; display: grid; place-items: center; font-family: var(--bth-font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; border: 1px solid var(--bth-line2); background: var(--bth-surf2); color: var(--bth-ink); }
[data-bth-root] .bth-preset.is-allin { color: var(--bth-bad); }
[data-bth-root] .bth-preset.is-sel { border: 1.5px solid var(--bth-acc); background: var(--bth-acc-soft); color: var(--bth-acc-text); }
[data-bth-root] .bth-allin { display: flex; flex-direction: column; gap: 6px; padding: 13px; border-radius: 14px; background: var(--bth-bad-soft); border: 1px solid var(--bth-bad); }
[data-bth-root] .bth-allin-h span { color: var(--bth-bad); font-weight: 700; }
[data-bth-root] .bth-allin-h b i { font-style: normal; color: var(--bth-bad); }
[data-bth-root] .bth-allin p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--bth-ink); text-wrap: pretty; }
[data-bth-root] .bth-pre { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
[data-bth-root] .bth-pretg { height: 50px; border-radius: 14px; border: 1.5px solid var(--bth-line2); display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 13px; font-weight: 700; text-align: left; }
[data-bth-root] .bth-pretg i { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid var(--bth-line2); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; }
[data-bth-root] .bth-pretg.is-on { border-color: var(--bth-acc); background: var(--bth-acc-soft); }
[data-bth-root] .bth-pretg.is-on i { background: var(--bth-acc); border-color: var(--bth-acc); color: var(--bth-acc-ink); }
[data-bth-root] .bth-note { font-size: 11.5px; color: var(--bth-mute); }
[data-bth-root] .bth-foldnote { padding: 13px; border-radius: 14px; background: var(--bth-bg); border: 1px dashed var(--bth-line2); font-size: 12.5px; line-height: 1.45; color: var(--bth-mute); text-wrap: pretty; }
[data-bth-root] .bth-warnbar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--bth-warn); background: var(--bth-warn-soft); font-size: 12.5px; }
[data-bth-root] .bth-warnbar span:first-child { font-size: 16px; }
[data-bth-root] .bth-warnbar b { color: var(--bth-warn); }
/* the light theme's --bth-warn on its own --bth-warn-soft is 4.2:1, under AA for
   12.5px text (axe, 2026-10-24); the label alone is darkened, the token is not */
[data-bth-root][data-bth-theme="light"] .bth-warnbar b { color: #93410B; }
[data-bth-root] .bth-warnbar.is-mute { border-color: var(--bth-line2); background: var(--bth-surf2); }
[data-bth-root] .bth-warnbar.is-mute b { color: var(--bth-ink); }
[data-bth-root] .bth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px; font-size: 13px; font-weight: 600; }
[data-bth-root] .bth-hostnote { font-size: 12.5px; color: var(--bth-mute); text-align: center; }
[data-bth-root] .bth-stepper { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--bth-line2); border-radius: 999px; padding: 2px; }
[data-bth-root] .bth-stepper button { width: 34px; height: 30px; border-radius: 999px; font-family: var(--bth-font-mono); font-size: 16px; font-weight: 700; }
[data-bth-root] .bth-stepper button:hover { background: var(--bth-surf2); }
[data-bth-root] .bth-stepper b { min-width: 22px; text-align: center; font-family: var(--bth-font-mono); font-size: 14px; }
[data-bth-root] .bth-toggle { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--bth-line2); flex: none; transition: background .2s; }
[data-bth-root] .bth-toggle i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bth-surf); transition: left .2s; }
[data-bth-root] .bth-toggle.is-on { background: var(--bth-acc); }
[data-bth-root] .bth-toggle.is-on i { left: 21px; background: var(--bth-acc-ink); }
[data-bth-root] .bth-so { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
[data-bth-root] .bth-so-h { font-family: var(--bth-font-display); font-style: italic; font-size: 28px; font-weight: 900; line-height: 1; }
[data-bth-root] .bth-so-t { font-family: var(--bth-font-mono); font-size: 26px; font-weight: 800; color: var(--bth-acc-text); }
[data-bth-root] .bth-so-s { font-size: 12.5px; color: var(--bth-mute); }

/* river / summary copy */
[data-bth-root] .bth-rk { display: flex; justify-content: space-between; font-family: var(--bth-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--bth-acc-text); }
[data-bth-root] .bth-rk.is-bad { color: var(--bth-bad); }
[data-bth-root] .bth-rk-r { font-weight: 400; color: var(--bth-mute); letter-spacing: .1em; }
[data-bth-root] .bth-rh { font-family: var(--bth-font-display); font-style: italic; font-size: 32px; font-weight: 900; line-height: 1; }
[data-bth-root] .bth-rs { font-size: 12.5px; color: var(--bth-mute); }
[data-bth-root] .bth-rs b { font-family: var(--bth-font-mono); font-weight: 700; color: var(--bth-acc-text); }
[data-bth-root] .bth-rs.is-mono { font-family: var(--bth-font-mono); font-size: 12px; font-weight: 600; }
[data-bth-root] .bth-reacts { display: flex; justify-content: space-between; gap: 6px; }
[data-bth-root] .bth-reactbtn { width: 46px; height: 46px; border-radius: 50%; background: var(--bth-surf2); border: 1px solid var(--bth-line2); display: grid; place-items: center; font-size: 21px; transition: transform .15s; }
[data-bth-root] .bth-reactbtn:active { transform: scale(.9); }
[data-bth-root] .bth-nextbar { height: 4px; border-radius: 2px; background: var(--bth-line2); overflow: hidden; }
[data-bth-root] .bth-nextbar i { display: block; height: 100%; width: 0; background: var(--bth-acc); box-shadow: 0 0 10px var(--bth-acc-glow); transition: width .25s linear; }
[data-bth-root] .bth-next { display: flex; justify-content: space-between; align-items: center; }
[data-bth-root] .bth-next-h { font-family: var(--bth-font-display); font-style: italic; font-size: 26px; font-weight: 900; }
[data-bth-root] .bth-next-h span { color: var(--bth-acc-text); }

/* ---------- sheets ---------- */
[data-bth-root] .bth-scrim { position: fixed; inset: 0; z-index: 94; background: var(--bth-scrim); }
[data-bth-root] .bth-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; margin: 0 auto; max-width: 520px; max-height: 100dvh; overflow: auto; background: var(--bth-surf); border-top: 1px solid var(--bth-line2); border-radius: 26px 26px 0 0; padding: 10px 18px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 11px; box-shadow: 0 -20px 50px rgba(0,0,0,.35); }
[data-bth-root] .bth-sheet.is-g1 { top: max(0px, calc(100dvh - 548px)); }
[data-bth-root] .bth-sheet.is-form { gap: 14px; padding-top: 20px; }
[data-bth-root] .bth-sheet.is-full { top: 0; max-width: none; border-radius: 0; border: 0; padding: 0; background: var(--bth-bg); box-shadow: none; }
[data-bth-root] .bth-x { position: absolute; right: 16px; top: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bth-line2); display: grid; place-items: center; font-size: 14px; color: var(--bth-mute); }
[data-bth-root] .bth-x.is-inline { position: static; }
[data-bth-root] .bth-sh-k { font-family: var(--bth-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--bth-acc-text); }
[data-bth-root] .bth-sh-h { font-family: var(--bth-font-display); font-style: italic; font-size: 34px; font-weight: 900; line-height: .95; padding-right: 40px; }
[data-bth-root] .bth-sh-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--bth-mute); }
[data-bth-root] .bth-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 600; }
[data-bth-root] .bth-field select { min-height: 44px; max-width: 64%; padding: 0 12px; border: 1px solid var(--bth-line2); border-radius: 12px; background: var(--bth-bg); color: var(--bth-ink); font: 500 13px var(--bth-font-body); }
[data-bth-root] .bth-codein { height: 72px; width: 100%; border-radius: 16px; border: 1.5px solid var(--bth-acc); background: var(--bth-bg); color: var(--bth-ink); text-align: center; font-family: var(--bth-font-mono); font-size: 40px; font-weight: 800; letter-spacing: .14em; box-shadow: 0 0 20px var(--bth-acc-soft); }
[data-bth-root] .bth-codein::placeholder { color: var(--bth-line2); }
[data-bth-root] .bth-grab { align-self: center; width: 38px; height: 4px; border-radius: 2px; background: var(--bth-line2); flex: none; }
[data-bth-root] .bth-gp-hd { display: flex; align-items: center; gap: 12px; }
[data-bth-root] .bth-gp-h { font-family: var(--bth-font-display); font-style: italic; font-size: 26px; font-weight: 900; line-height: 1; }
[data-bth-root] .bth-gp-s { font-size: 12px; color: var(--bth-mute); }
[data-bth-root] .bth-gp-field { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 16px; border-radius: 14px; background: var(--bth-bg); border: 1.5px solid var(--bth-acc); box-shadow: 0 0 20px var(--bth-acc-soft); flex: none; }
[data-bth-root] .bth-gp-field span { font-family: var(--bth-font-mono); font-size: 22px; color: var(--bth-mute); }
[data-bth-root] .bth-gp-field b { font-family: var(--bth-font-mono); font-size: 36px; font-weight: 800; }
[data-bth-root] .bth-caret { width: 2px; height: 30px; background: var(--bth-acc); animation: bth-caret 1s steps(1) infinite; }
@keyframes bth-caret { 50% { opacity: 0; } }
[data-bth-root] .bth-gp-adj { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; flex: none; }
[data-bth-root] .bth-gp-adj.is-row { grid-template-columns: repeat(6, minmax(0,1fr)); }
[data-bth-root] .bth-gp-adj button { height: 34px; border-radius: 10px; background: var(--bth-surf2); border: 1px solid var(--bth-line2); font-family: var(--bth-font-mono); font-size: 13px; font-weight: 700; }
[data-bth-root] .bth-gp-keys { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; flex: none; }
[data-bth-root] .bth-gp-keys button { height: 40px; border-radius: 12px; background: var(--bth-bg); border: 1px solid var(--bth-line); font-family: var(--bth-font-mono); font-size: 19px; font-weight: 700; }
[data-bth-root] .bth-gp-keys button:active, [data-bth-root] .bth-gp-adj button:active { background: var(--bth-acc-soft); }
[data-bth-root] .bth-gp-note { font-size: 11.5px; color: var(--bth-mute); text-align: center; }
[data-bth-root] .bth-sealed { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; border-radius: 14px; background: var(--bth-bg); border: 1px solid var(--bth-line2); flex: none; }
[data-bth-root] .bth-sealed span { font-family: var(--bth-font-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--bth-mute); }
[data-bth-root] .bth-sealed b { font-family: var(--bth-font-mono); font-size: 22px; font-weight: 800; }

/* the hand summary (mobile) */
[data-bth-root] .bth-sum { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bth-bg); }
[data-bth-root] .bth-sum-hd { height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 10px; flex: none; }
[data-bth-root] .bth-sum-code { margin-left: auto; font-weight: 400; letter-spacing: .1em; }
[data-bth-root] .bth-sum-in { padding: 4px 18px 150px; display: flex; flex-direction: column; gap: 12px; max-width: 520px; width: 100%; margin: 0 auto; }
[data-bth-root] .bth-sum-sold { display: flex; justify-content: space-between; align-items: flex-end; }
[data-bth-root] .bth-sum-sold > div { display: flex; flex-direction: column; gap: 2px; }
[data-bth-root] .bth-sum-sold .is-r { align-items: flex-end; }
[data-bth-root] .bth-sum-sold b { font-family: var(--bth-font-mono); font-size: 40px; font-weight: 800; line-height: 1; color: var(--bth-acc-text); }
[data-bth-root] .bth-sum-sold i { font-family: var(--bth-font-mono); font-style: normal; font-size: 14px; font-weight: 700; }
[data-bth-root] .bth-sum-town { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
[data-bth-root] .bth-sum-town b { font-family: var(--bth-font-display); font-style: italic; font-size: 28px; font-weight: 900; line-height: 1; }
[data-bth-root] .bth-sum-town span { font-size: 12.5px; color: var(--bth-mute); }
[data-bth-root] .bth-sum-tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
[data-bth-root] .bth-sum-tiles > div { height: 52px; padding: 6px 8px; border-radius: 9px; background: var(--bth-surf); border: 1px solid var(--bth-line); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
[data-bth-root] .bth-sum-tiles > div > div { display: flex; justify-content: space-between; font-family: var(--bth-font-mono); font-size: 7.5px; letter-spacing: .1em; color: var(--bth-mute); white-space: nowrap; }
[data-bth-root] .bth-sum-tiles b { font-family: var(--bth-font-mono); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-sum-room-h { font-family: var(--bth-font-display); font-style: italic; font-size: 20px; font-weight: 800; margin-top: 2px; }
[data-bth-root] .bth-sum-room { display: flex; flex-direction: column; gap: 5px; }
[data-bth-root] .bth-room { display: grid; grid-template-columns: 18px 32px minmax(0,1fr) auto 76px; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--bth-surf); border: 1px solid var(--bth-line); }
[data-bth-root] .bth-room.is-me { border: 1.5px solid var(--bth-acc); box-shadow: 0 0 18px var(--bth-acc-soft); }
[data-bth-root] .bth-room-r { font-family: var(--bth-font-mono); font-size: 10px; color: var(--bth-mute); }
[data-bth-root] .bth-room-av { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--bth-line2); background: var(--bth-surf2); display: grid; place-items: center; font-family: var(--bth-font-mono); font-size: 10px; font-weight: 700; }
[data-bth-root] .bth-room.is-me .bth-room-av { border: 2px solid var(--bth-acc); color: var(--bth-acc-text); }
[data-bth-root] .bth-room-n { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-bth-root] .bth-room-n b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-room-n small { font-family: var(--bth-font-mono); font-size: 10px; color: var(--bth-mute); }
[data-bth-root] .bth-room-e { font-family: var(--bth-font-mono); font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 7px; }
[data-bth-root] .bth-room-e.t-good { background: var(--bth-acc); color: var(--bth-acc-ink); }
[data-bth-root] .bth-room-c { display: flex; flex-direction: column; gap: 1px; align-items: flex-end; }
[data-bth-root] .bth-room-c b { font-family: var(--bth-font-mono); font-size: 12px; font-weight: 700; white-space: nowrap; }
[data-bth-root] .bth-room-c.is-up b { color: var(--bth-acc-text); }
[data-bth-root] .bth-room-c small { font-family: var(--bth-font-mono); font-size: 9.5px; color: var(--bth-mute); }
[data-bth-root] .bth-sum-foot { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 520px; padding: 12px 16px calc(28px + env(safe-area-inset-bottom)); background: var(--bth-surf); border-top: 1px solid var(--bth-line2); border-radius: 24px 24px 0 0; display: flex; flex-direction: column; gap: 10px; }

/* invite */
[data-bth-root] .bth-inv { padding: 10px 22px 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 440px; margin: 0 auto; min-height: 100dvh; }
[data-bth-root] .bth-inv-hd { align-self: stretch; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; }
[data-bth-root] .bth-inv-h { font-family: var(--bth-font-display); font-style: italic; font-size: 42px; font-weight: 900; line-height: .92; }
[data-bth-root] .bth-qr { width: 290px; height: 290px; padding: 18px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 6px var(--bth-acc-soft), 0 0 60px var(--bth-acc-glow); flex: none; }
[data-bth-root] .bth-qr svg { width: 100%; height: 100%; display: block; }
[data-bth-root] .bth-inv-code { display: flex; flex-direction: column; gap: 4px; align-items: center; }
[data-bth-root] .bth-inv-code b { font-family: var(--bth-font-mono); font-size: 52px; font-weight: 800; letter-spacing: .14em; line-height: 1.1; }
[data-bth-root] .bth-inv-btns { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
[data-bth-root] .bth-inv-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-bth-root] .bth-inv-2 .bth-btn { height: 50px; }
[data-bth-root] .bth-inv-2:has(#bthShare[hidden]) { grid-template-columns: 1fr; }
[data-bth-root] .bth-tvlink { font-size: 12.5px; font-weight: 600; color: var(--bth-acc-text); }

/* TV */
[data-bth-root] .bth-tv { position: fixed; inset: 0; z-index: 99; background: var(--bth-bg); overflow: hidden; }
[data-bth-root] .bth-tv-in { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; margin: -360px 0 0 -640px; padding: 60px 76px; display: grid; grid-template-columns: minmax(0,1fr) 440px; gap: 72px; background: radial-gradient(ellipse 60% 70% at 82% 45%, var(--bth-acc-soft), transparent 70%), var(--bth-bg); }
[data-bth-root] .bth-tv-l { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
[data-bth-root] .bth-tv-top { display: flex; flex-direction: column; gap: 10px; }
[data-bth-root] .bth-word.is-tv { font-size: 32px; }
[data-bth-root] .bth-k.is-tv { font-size: 13px; letter-spacing: .18em; font-weight: 400; }
[data-bth-root] .bth-tv-mid { display: flex; flex-direction: column; gap: 22px; }
[data-bth-root] .bth-tv-h { font-family: var(--bth-font-display); font-style: italic; font-size: 84px; font-weight: 900; line-height: .9; }
[data-bth-root] .bth-tv-code { display: flex; flex-direction: column; gap: 4px; }
[data-bth-root] .bth-tv-code b { font-family: var(--bth-font-mono); font-size: 92px; font-weight: 800; letter-spacing: .12em; line-height: 1; }
[data-bth-root] .bth-tv-url { font-family: var(--bth-font-mono); font-size: 17px; color: var(--bth-mute); }
[data-bth-root] .bth-tv-seats { display: flex; align-items: center; gap: 22px; }
[data-bth-root] .bth-tv-seats > div { display: flex; gap: 10px; }
[data-bth-root] .bth-tv-seat { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--bth-font-mono); font-size: 15px; font-weight: 700; background: var(--bth-surf2); border: 2px solid var(--bth-line2); }
[data-bth-root] .bth-tv-seat.is-me { border-color: var(--bth-acc); color: var(--bth-acc-text); }
[data-bth-root] .bth-tv-seat.is-open { background: transparent; border-style: dashed; color: var(--bth-mute); }
[data-bth-root] .bth-tv-r { display: flex; flex-direction: column; justify-content: center; gap: 18px; text-align: center; }
[data-bth-root] .bth-qr.is-tv { width: 440px; height: 440px; padding: 30px; border-radius: 34px; box-shadow: 0 0 0 8px var(--bth-acc-soft), 0 0 90px var(--bth-acc-glow); }
[data-bth-root] .bth-x.is-tvx { position: fixed; z-index: 100; right: 16px; top: 16px; }

/* reconnect + toast */
[data-bth-root] .bth-reconnect { position: fixed; left: 16px; right: 16px; top: 108px; z-index: 98; max-width: 480px; margin: 0 auto; padding: 14px; border-radius: 16px; background: var(--bth-surf); border: 1px solid var(--bth-warn); display: flex; gap: 12px; align-items: center; box-shadow: 0 0 0 100vmax var(--bth-scrim), 0 20px 40px rgba(0,0,0,.35); }
[data-bth-root] .bth-reconnect div { display: flex; flex-direction: column; gap: 2px; flex: 1; }
[data-bth-root] .bth-reconnect b { font-family: var(--bth-font-display); font-style: italic; font-size: 22px; font-weight: 900; line-height: 1; }
[data-bth-root] .bth-reconnect span { font-size: 12px; color: var(--bth-mute); }
[data-bth-root] .bth-reconnect i { font-family: var(--bth-font-mono); font-style: normal; font-size: 16px; font-weight: 800; color: var(--bth-warn); }
[data-bth-root] .bth-spin { flex: none; animation: bth-spin 1s linear infinite; }
[data-bth-root] .bth-spin-t { stroke: var(--bth-line2); }
[data-bth-root] .bth-spin-v { stroke: var(--bth-warn); }
@keyframes bth-spin { to { transform: rotate(360deg); } }
[data-bth-root] .bth-toast { position: fixed; left: 50%; top: 70px; z-index: 101; transform: translateX(-50%); max-width: min(92vw, 460px); padding: 10px 16px; border-radius: 999px; background: var(--bth-surf); border: 1px solid var(--bth-line2); box-shadow: 0 12px 30px rgba(0,0,0,.35); font-size: 13px; font-weight: 600; text-align: center; }
[data-bth-root] .bth-toast.is-on { animation: bth-toast .25s var(--bth-ease) both; }
@keyframes bth-toast { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- desktop (1024 and up) ---------- */
[data-bth-root] .bth-shell.is-desk .bth-top { height: 64px; flex: none; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--bth-line2); background: var(--bth-surf); }
[data-bth-root] .bth-top-l, [data-bth-root] .bth-top-r { display: flex; align-items: center; gap: 22px; min-width: 0; }
[data-bth-root] .bth-top-r { gap: 10px; }
[data-bth-root] .bth-vr { width: 1px; height: 26px; background: var(--bth-line2); flex: none; }
[data-bth-root] .bth-top-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-bth-root] .bth-dsteps { display: flex; gap: 6px; }
[data-bth-root] .bth-dstep { padding: 6px 12px; border-radius: 999px; font-family: var(--bth-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; border: 1px solid var(--bth-line2); color: var(--bth-mute); transition: all .3s; }
[data-bth-root] .bth-dstep.is-done { color: var(--bth-ink); }
[data-bth-root] .bth-dstep.is-on { background: var(--bth-acc); color: var(--bth-acc-ink); border-color: var(--bth-acc); }
[data-bth-root] .bth-chipspill { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bth-acc); background: var(--bth-acc-soft); font-family: var(--bth-font-mono); font-size: 13px; font-weight: 700; color: var(--bth-acc-text); white-space: nowrap; }
[data-bth-root] .bth-topbtn { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--bth-line2); font-size: 13px; font-weight: 700; white-space: nowrap; }
[data-bth-root] .bth-topbtn--bad { border-color: var(--bth-bad); color: var(--bth-bad); }
[data-bth-root] .bth-shell.is-desk .bth-main { display: grid; grid-template-columns: minmax(0,1fr) 360px; }
[data-bth-root] .bth-shell.is-desk .bth-stagewrap { flex: 1; min-height: 0; overflow: hidden; }
[data-bth-root] .bth-shell.is-desk .bth-card { padding: 12px; border-radius: 16px; gap: 8px; box-shadow: 0 20px 40px rgba(0,0,0,.3); }
[data-bth-root] .bth-shell.is-desk .bth-card-hd { font-size: 10px; letter-spacing: .14em; }
[data-bth-root] .bth-shell.is-desk .bth-housestamp { top: -15px; padding: 5px 14px; font-size: 12px; letter-spacing: .16em; }
[data-bth-root] .bth-shell.is-desk .bth-sold { padding: 10px 14px; min-height: 54px; border-radius: 11px; }
[data-bth-root] .bth-shell.is-desk .bth-sold-k { font-size: 11px; letter-spacing: .16em; }
[data-bth-root] .bth-shell.is-desk .bth-sold-dots { font-size: 24px; }
[data-bth-root] .bth-shell.is-desk .bth-sold-price { font-size: 32px; }
[data-bth-root] .bth-shell.is-desk .bth-tiles { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
[data-bth-root] .bth-shell.is-desk .bth-tile { height: 62px; border-radius: 10px; }
[data-bth-root] .bth-shell.is-desk .bth-tile.is-hero { grid-column: span 4; height: 56px; }
[data-bth-root] .bth-shell.is-desk .bth-tile .bth-flip__front { padding: 8px 10px; justify-content: space-between; }
[data-bth-root] .bth-shell.is-desk .bth-tile.is-hero .bth-flip__front { padding: 8px 12px; justify-content: center; }
[data-bth-root] .bth-shell.is-desk .bth-tile-l { font-size: 9px; }
[data-bth-root] .bth-shell.is-desk .bth-tile-l span:last-child { font-size: 13px; }
[data-bth-root] .bth-shell.is-desk .bth-tile-v.is-word { font-size: 21px; line-height: 1; }
[data-bth-root] .bth-shell.is-desk .bth-tile-v.is-num { font-size: 17px; }
[data-bth-root] .bth-shell.is-desk .bth-tile-v.is-hero { font-size: 24px; font-weight: 900; letter-spacing: .03em; line-height: 1; }
[data-bth-root] .bth-shell.is-desk .bth-tile .bth-flip__back span { font-size: 16px; }
[data-bth-root] .bth-shell.is-desk .bth-summary { display: flex; gap: 6px; flex-wrap: wrap; }
[data-bth-root] .bth-shell.is-desk .bth-summary span { padding: 4px 9px; border-radius: 999px; background: var(--bth-surf2); border: 1px solid var(--bth-line); font-size: 11.5px; font-weight: 600; color: var(--bth-ink); }
[data-bth-root] .bth-shell.is-desk .bth-linelbl { font-size: 10px; letter-spacing: .14em; margin-top: 4px; }
[data-bth-root] .bth-shell.is-desk .bth-track { top: 52px; }
[data-bth-root] .bth-shell.is-desk .bth-corr { top: 18px; height: 70px; }
[data-bth-root] .bth-shell.is-desk .bth-corr span { left: 6px; bottom: 4px; font-size: 9.5px; }
[data-bth-root] .bth-shell.is-desk .bth-salemark span { font-size: 9.5px; }
[data-bth-root] .bth-shell.is-desk .bth-salemark i { height: 86px; }
[data-bth-root] .bth-shell.is-desk .bth-mark { gap: 4px; }
[data-bth-root] .bth-shell.is-desk .bth-mark span { font-size: 10px; letter-spacing: .04em; line-height: 13px; }
[data-bth-root] .bth-shell.is-desk .bth-axis { font-size: 10px; }
[data-bth-root] .bth-shell.is-desk .bth-pill { gap: 7px; padding: 6px 13px; font-size: 14px; }
[data-bth-root] .bth-shell.is-desk .bth-pill-k { font-size: 9.5px; }
[data-bth-root] .bth-shell.is-desk .bth-pill.is-carry.is-up { font-size: 17px; padding: 8px 16px; box-shadow: 0 0 40px var(--bth-acc-glow), 0 0 0 5px var(--bth-acc-soft); }
[data-bth-root] .bth-shell.is-desk .bth-seat-in { gap: 4px; }
[data-bth-root] .bth-shell.is-desk .bth-av { font-size: 14px; }
[data-bth-root] .bth-shell.is-desk .bth-av.is-you { font-size: 17px; }
[data-bth-root] .bth-shell.is-desk .bth-dealer { width: 22px; height: 22px; right: -8px; font-size: 11px; }
[data-bth-root] .bth-shell.is-desk .bth-hole .bth-flip__front { font-size: 11.5px; border-radius: 5px; }
[data-bth-root] .bth-shell.is-desk .bth-hole.is-you .bth-flip__front { font-size: 13px; border-radius: 6px; }
[data-bth-root] .bth-shell.is-desk .bth-nm { font-size: 13px; max-width: 90px; }
[data-bth-root] .bth-shell.is-desk .bth-you .bth-nm { font-size: 15px; }
[data-bth-root] .bth-shell.is-desk .bth-ovr { font-size: 9.5px; padding: 1px 5px; }
[data-bth-root] .bth-shell.is-desk .bth-stack { font-size: 12px; }
[data-bth-root] .bth-shell.is-desk .bth-you .bth-stack { font-size: 13px; }
[data-bth-root] .bth-shell.is-desk .bth-status { font-size: 10px; padding: 3px 8px; }
[data-bth-root] .bth-shell.is-desk .bth-you .bth-status { font-size: 11px; padding: 4px 10px; }
[data-bth-root] .bth-shell.is-desk .bth-emptytx { font-size: 12px; }
[data-bth-root] .bth-shell.is-desk .bth-winglow { left: 390px; top: 420px; width: 300px; height: 200px; }
[data-bth-root] .bth-shell.is-desk .bth-winrow { left: 640px; right: auto; top: 500px; flex-direction: column; align-items: flex-start; }
[data-bth-root] .bth-shell.is-desk .bth-badge { padding: 6px 12px; font-size: 12px; }
[data-bth-root] .bth-bar { flex: none; margin: 0 24px 24px; padding: 20px 24px; min-height: 150px; border-radius: 22px; background: var(--bth-surf); border: 1px solid var(--bth-line2); display: flex; align-items: center; gap: 28px; }
[data-bth-root] .bth-bar-l { display: flex; align-items: center; gap: 14px; width: 270px; flex: none; }
[data-bth-root] .bth-bar-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[data-bth-root] .bth-bar-t .bth-k { font-size: 10.5px; }
[data-bth-root] .bth-bar-t b { font-family: var(--bth-font-display); font-style: italic; font-size: 30px; font-weight: 900; line-height: 1; }
[data-bth-root] .bth-bar-t small { font-size: 12.5px; color: var(--bth-mute); }
[data-bth-root] .bth-bar-raise { flex: 1; gap: 10px; padding: 14px 16px; min-width: 0; }
[data-bth-root] .bth-bar-raise .bth-raise-h b { font-size: 24px; }
[data-bth-root] .bth-bar-raise .bth-preset { height: 32px; border-radius: 9px; }
[data-bth-root] .bth-bar-raise.is-empty { align-items: center; justify-content: center; color: var(--bth-mute); font-size: 13px; }
[data-bth-root] .bth-bar-btns { display: flex; gap: 10px; flex: none; }
[data-bth-root] .bth-dbtn { height: 110px; width: 120px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--bth-font-display); font-style: italic; font-size: 22px; font-weight: 900; letter-spacing: .03em; line-height: 1; text-align: center; }
[data-bth-root] .bth-dbtn small { font-family: var(--bth-font-mono); font-style: normal; font-size: 10px; font-weight: 700; opacity: .7; }
[data-bth-root] .bth-dbtn.is-outline { border: 1.5px solid var(--bth-line2); }
[data-bth-root] .bth-dbtn.is-mid { background: var(--bth-surf2); border: 1.5px solid var(--bth-line2); }
[data-bth-root] .bth-dbtn.is-primary { width: 160px; font-size: 24px; background: var(--bth-acc); color: var(--bth-acc-ink); box-shadow: 0 0 30px var(--bth-acc-glow); }
[data-bth-root] .bth-bar .bth-tbtn.is-wide { width: 230px; height: 50px; }
[data-bth-root] .bth-bar-guess { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
[data-bth-root] .bth-dfield { display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 20px; border-radius: 14px; background: var(--bth-bg); border: 1.5px solid var(--bth-acc); box-shadow: 0 0 22px var(--bth-acc-soft); }
[data-bth-root] .bth-dfield span { font-family: var(--bth-font-mono); font-size: 26px; color: var(--bth-mute); }
[data-bth-root] .bth-dfield input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--bth-ink); font-family: var(--bth-font-mono); font-size: 40px; font-weight: 800; caret-color: var(--bth-acc); }
[data-bth-root] .bth-dfield i { font-family: var(--bth-font-mono); font-style: normal; font-size: 10.5px; color: var(--bth-mute); letter-spacing: .1em; white-space: nowrap; }
[data-bth-root] .bth-dlock { height: 110px; width: 220px; flex: none; border-radius: 22px; background: var(--bth-acc); color: var(--bth-acc-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 0 34px var(--bth-acc-glow); }
[data-bth-root] .bth-dlock span { font-family: var(--bth-font-display); font-style: italic; font-size: 32px; font-weight: 900; letter-spacing: .04em; line-height: 1; }
[data-bth-root] .bth-dlock small { font-family: var(--bth-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; }
[data-bth-root] .bth-sealed.is-bar { flex: 1; height: 66px; }
[data-bth-root] .bth-sealed.is-bar b { font-size: 32px; }
[data-bth-root] .bth-bar-stats { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; min-width: 0; }
[data-bth-root] .bth-bar-stats > div { padding: 12px 14px; border-radius: 12px; background: var(--bth-bg); border: 1px solid var(--bth-line2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[data-bth-root] .bth-bar-stats span { font-family: var(--bth-font-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--bth-mute); }
[data-bth-root] .bth-bar-stats b { font-family: var(--bth-font-mono); font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-bar-stats b.is-acc { color: var(--bth-acc-text); }
[data-bth-root] .bth-bar-stats b.is-bad { color: var(--bth-bad); }
[data-bth-root] .bth-bar-next { display: flex; flex-direction: column; gap: 8px; width: 240px; flex: none; }
[data-bth-root] .bth-bar-next .bth-next-h { font-size: 24px; }
[data-bth-root] .bth-bar-next .bth-tbtn.is-wide { width: 100%; height: 42px; font-size: 17px; }
[data-bth-root] .bth-bar-wr { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
[data-bth-root] .bth-pre.is-bar { flex: 1; grid-template-columns: 1fr 1fr; align-items: center; }
[data-bth-root] .bth-pre.is-bar .bth-note { grid-column: span 2; }
[data-bth-root] .bth-flex { flex: 1; display: flex; justify-content: flex-end; }
[data-bth-root] .bth-side { border-left: 1px solid var(--bth-line2); background: var(--bth-surf); padding: 20px; display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: hidden; }
[data-bth-root] .bth-sd { display: flex; flex-direction: column; gap: 10px; }
[data-bth-root] .bth-sd.is-log { flex: 1; min-height: 0; overflow: hidden; gap: 9px; }
[data-bth-root] .bth-sd-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
[data-bth-root] .bth-sd-h b { font-family: var(--bth-font-display); font-style: italic; font-size: 22px; font-weight: 900; }
[data-bth-root] .bth-sd-h span { font-family: var(--bth-font-mono); font-size: 10px; letter-spacing: .12em; color: var(--bth-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-sd-h span.is-plain { font-family: var(--bth-font-body); font-size: 12px; letter-spacing: 0; }
[data-bth-root] .bth-sd-rule { height: 1px; background: var(--bth-line2); flex: none; }
[data-bth-root] .bth-stand { display: grid; grid-template-columns: 24px minmax(0,1fr) 56px 90px; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bth-bg); border: 1px solid var(--bth-line); }
[data-bth-root] .bth-stand.is-me { background: var(--bth-acc-soft); border-color: var(--bth-acc); }
[data-bth-root] .bth-stand span { font-family: var(--bth-font-mono); font-size: 10.5px; color: var(--bth-mute); }
[data-bth-root] .bth-stand b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-stand i { font-family: var(--bth-font-mono); font-style: normal; font-size: 12.5px; font-weight: 700; text-align: right; }
[data-bth-root] .bth-log { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 10px; align-items: baseline; }
[data-bth-root] .bth-log span { font-family: var(--bth-font-mono); font-size: 10.5px; color: var(--bth-mute); }
[data-bth-root] .bth-log b { font-size: 13px; line-height: 1.4; font-weight: 500; }
[data-bth-root] .bth-log b.is-acc { color: var(--bth-acc-text); font-weight: 700; }
[data-bth-root] .bth-log b.is-bad { color: var(--bth-bad); font-weight: 700; }
[data-bth-root] .bth-side .bth-reactbtn { width: 48px; height: 48px; font-size: 22px; }
[data-bth-root] .bth-keys { font-family: var(--bth-font-mono); font-size: 10px; letter-spacing: .1em; color: var(--bth-mute); }
[data-bth-root] .bth-shell.is-desk ~ .bth-sheet { max-width: 520px; }

/* ---- NOTIFY ME (Phase 2 step 4): the bell, the lobby row, the waiting
   room's note, the prompt (design 13d), the settings and the held seat ---- */
[data-bth-root] .bth-lobby-top { gap: 8px; align-items: center; }
[data-bth-root] .bth-bell { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bth-line2); background: var(--bth-surf); display: grid; place-items: center; font-size: 16px; }
[data-bth-root] .bth-bell:hover { border-color: var(--bth-acc); }
[data-bth-root] .bth-bell i { position: absolute; right: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--bth-acc); box-shadow: 0 0 8px var(--bth-acc-glow); }
[data-bth-root] .bth-bell i[hidden] { display: none; }
[data-bth-root] .bth-notify { margin-top: 10px; }
[data-bth-root] .bth-notify-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--bth-line2); background: transparent; color: var(--bth-ink); font-size: 13px; font-weight: 600; text-align: left; }
[data-bth-root] .bth-notify-btn:hover { border-color: var(--bth-acc); }
[data-bth-root] .bth-notify-btn small { font-family: var(--bth-font-mono); font-size: 10px; letter-spacing: .12em; color: var(--bth-mute); }
[data-bth-root] .bth-notify-on { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--bth-acc); background: var(--bth-acc-soft); font-size: 12.5px; }
[data-bth-root] .bth-notify-on span:nth-child(2) { flex: 1; }
[data-bth-root] .bth-notify-on b { color: var(--bth-acc-text); }
[data-bth-root] .bth-notify-on button, [data-bth-root] .bth-watchnote button { font-family: var(--bth-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--bth-acc-text); text-decoration: underline; text-underline-offset: 3px; }
[data-bth-root] .bth-watchnote { margin-top: -4px; padding: 0 2px; font-size: 12px; color: var(--bth-mute); }
[data-bth-root] .bth-ask-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--bth-acc-soft); border: 1.5px solid var(--bth-acc); display: grid; place-items: center; font-size: 26px; box-shadow: 0 0 24px var(--bth-acc-glow); margin-top: 8px; }
[data-bth-root] .bth-ask-chips { display: flex; gap: 6px; flex-wrap: wrap; }
[data-bth-root] .bth-ask-chips span { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--bth-line2); font-size: 12px; font-weight: 600; }
[data-bth-root] .bth-ask-no { align-self: center; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--bth-mute); }
[data-bth-root] .bth-set { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-top: 1px solid var(--bth-line); border-bottom: 1px solid var(--bth-line); }
[data-bth-root] .bth-set .bth-row { min-height: 40px; }
[data-bth-root] .bth-quiet { display: inline-flex; align-items: center; gap: 6px; }
[data-bth-root] .bth-quiet i { font-style: normal; font-size: 12px; color: var(--bth-mute); }
[data-bth-root] .bth-sh-k.is-mute { color: var(--bth-mute); margin-top: 4px; }
[data-bth-root] .bth-optins { display: flex; flex-direction: column; gap: 6px; }
[data-bth-root] .bth-optin { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; border: 1px solid var(--bth-line2); font-size: 12.5px; }
[data-bth-root] .bth-optin span { flex: 1; }
[data-bth-root] .bth-optin i { font-style: normal; font-family: var(--bth-font-mono); font-size: 10px; letter-spacing: .1em; color: var(--bth-acc-text); }
[data-bth-root] .bth-optin .bth-x { width: 28px; height: 28px; font-size: 12px; }
[data-bth-root] .bth-optin.is-empty { color: var(--bth-mute); border-style: dashed; padding: 10px 12px; }
[data-bth-root] .bth-optadd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-bth-root] .bth-optall { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
[data-bth-root] .bth-optall input { accent-color: var(--bth-acc); width: 16px; height: 16px; }
[data-bth-root] .bth-holdcard { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--bth-line2); background: var(--bth-surf2); }
[data-bth-root] .bth-holdcard b { font-size: 15px; }
[data-bth-root] .bth-holdcard span { font-size: 12.5px; color: var(--bth-mute); }
[data-bth-root] .bth-holddots { font-family: var(--bth-font-mono); letter-spacing: .2em; color: var(--bth-acc-text) !important; }

/* ---- ADD TO HOME SCREEN (Phase 2 step 5, design 13e): a popover above
   Safari's toolbar with an arrow at Share; on an iPad, Share is at the top ---- */
[data-bth-root] .bth-sheet.is-a2hs { left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); max-width: 420px; border: 1px solid var(--bth-line2); border-radius: 22px; padding: 18px; gap: 12px; overflow: visible; box-shadow: 0 24px 50px rgba(0,0,0,.4); }
[data-bth-root] .bth-sheet.is-a2hs::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; background: var(--bth-surf); border-right: 1px solid var(--bth-line2); border-bottom: 1px solid var(--bth-line2); transform: rotate(45deg); }
[data-bth-root] .bth-sheet.is-a2hs.is-a2top { top: calc(14px + env(safe-area-inset-top)); bottom: auto; margin-right: 12px; }
[data-bth-root] .bth-sheet.is-a2hs.is-a2top::after { top: -8px; bottom: auto; left: auto; right: 40px; transform: rotate(225deg); }
[data-bth-root] .bth-sheet.is-a2hs .bth-sh-h { font-size: 30px; padding-right: 0; }
[data-bth-root] .bth-a2hs-steps { display: flex; flex-direction: column; gap: 8px; }
[data-bth-root] .bth-a2hs-steps div { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
[data-bth-root] .bth-a2hs-steps i { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--bth-surf2); border: 1px solid var(--bth-acc); display: grid; place-items: center; font-style: normal; font-family: var(--bth-font-mono); font-size: 11px; font-weight: 800; color: var(--bth-acc-text); }
[data-bth-root] .bth-a2hs-btns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 2px; }
[data-bth-root] .bth-a2hs-btns .bth-btn { height: 50px; font-size: 21px; }
/* a link-style control is still a 32px target (screen sweep, 2026-10-25) */
[data-bth-root] .bth-notify-on button, [data-bth-root] .bth-watchnote button { min-height: 32px; padding: 0 6px; }

/* the bot-table picker (2026-10-25): state chips, then the region */
[data-bth-root] .bth-mkt { display: flex; flex-wrap: wrap; gap: 6px; }
[data-bth-root] .bth-mkt .bth-fchip { min-height: 36px; padding: 0 16px; font-size: 12px; }
[data-bth-root] .bth-field[hidden] { display: none; }

/* the sound switches (2026-10-25): every sound, and the song */
[data-bth-root] .bth-sndbtn { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--bth-line2); background: var(--bth-surf); display: inline-grid; place-items: center; font-size: 14px; line-height: 1; }
[data-bth-root] .bth-sndbtn:hover { border-color: var(--bth-acc); }
[data-bth-root] .bth-sndbtn.is-off { opacity: .45; }
[data-bth-root] .bth-sndbtn[data-snd="music"].is-off { text-decoration: line-through; }
[data-bth-root] .bth-snds, [data-bth-root] .bth-lobby-top { display: flex; gap: 6px; align-items: center; }
[data-bth-root] .bth-snds { margin-left: auto; margin-right: 10px; }

/* the gambling disclosure (2026-10-25) */
[data-bth-root] .bth-disclose { display: flex; gap: 8px; align-items: flex-start; margin: 12px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--bth-mute); }
[data-bth-root] .bth-disclose button { min-height: 32px; padding: 0 4px; font-weight: 700; color: var(--bth-acc-text); text-decoration: underline; text-underline-offset: 3px; }
[data-bth-root] .bth-broke .bth-disclose { justify-content: center; text-align: left; max-width: 340px; }
[data-bth-root] .bth-disc-p { color: var(--bth-ink); }
[data-bth-root] .bth-disc-p:last-of-type { color: var(--bth-mute); }

/* ==== THE TABLE, MORE COLOURFUL (Max, 2026-10-25: "the interface for poker
   can be a little more colorful ... add some VC logos to the table and have
   the property be more like cards") ==== */
/* a green casino felt, still the house's lime on its rings */
[data-bth-root][data-bth-theme="dark"] {
  --bth-felt: radial-gradient(ellipse 75% 60% at 50% 45%, #15543F 0%, #0D3B2D 58%, #08261C 100%);
  --bth-felt-tex: repeating-radial-gradient(ellipse at 50% 45%, transparent 0 34px, rgba(212,245,60,.06) 34px 35px);
  --bth-rim: #0B1310;
}
[data-bth-root][data-bth-theme="light"] {
  --bth-felt: radial-gradient(ellipse 75% 60% at 50% 45%, #D5F0E0 0%, #BFE5CD 60%, #A8D9BB 100%);
  --bth-felt-tex: repeating-radial-gradient(ellipse at 50% 45%, transparent 0 34px, rgba(30,90,60,.08) 34px 35px);
}
/* a faint VC monogram woven into the felt */
[data-bth-root] .bth-felt { position: relative; overflow: hidden; }
[data-bth-root] .bth-felt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .07; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial Black,Arial' font-weight='900' font-style='italic' font-size='20' fill='%23D4F53C'%3EVC%3C/text%3E%3C/svg%3E") repeat; }
[data-bth-root][data-bth-theme="light"] .bth-felt::after { opacity: .09; filter: hue-rotate(60deg) brightness(.45); }
/* the two emblems on the felt */
[data-bth-root] .bth-feltmark { position: absolute; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--bth-acc); box-shadow: 0 0 0 4px rgba(212,245,60,.08), 0 0 22px var(--bth-acc-soft); background: radial-gradient(circle, rgba(212,245,60,.14), rgba(0,0,0,.15)); pointer-events: none; opacity: .75; }
[data-bth-root] .bth-feltmark span { font-family: var(--bth-font-display); font-style: italic; font-weight: 900; color: var(--bth-acc-text); font-size: 15px; letter-spacing: .02em; }
[data-bth-root] .bth-shell.is-desk .bth-feltmark span { font-size: 28px; }
[data-bth-root][data-bth-theme="light"] .bth-feltmark { background: rgba(255,255,255,.5); }

/* the five property cards: three, then two */
[data-bth-root] .bth-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; grid-template-columns: none; }
[data-bth-root] .bth-tile.bth-pcard { flex: 0 0 calc((100% - 12px) / 3); height: 84px; border-radius: 9px; }
[data-bth-root] .bth-shell.is-desk .bth-tiles { gap: 8px; flex-wrap: nowrap; }
[data-bth-root] .bth-shell.is-desk .bth-tile.bth-pcard { flex: 1 1 0; height: 118px; border-radius: 12px; }
/* a playing card's face: cream, dark ink, a colour stripe for what it is */
[data-bth-root] .bth-pcard .bth-flip__front { --pc: var(--bth-acc); background: linear-gradient(180deg, var(--pc) 0 5px, #FBF8EF 5px); color: #17201B; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 6px 14px rgba(0,0,0,.28); padding: 9px 7px 6px; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; }
[data-bth-root] .bth-pcard.is-lime  .bth-flip__front { --pc: #B9E02A; }
[data-bth-root] .bth-pcard.is-sky   .bth-flip__front { --pc: #4FB3F6; }
[data-bth-root] .bth-pcard.is-coral .bth-flip__front { --pc: #FF7A59; }
[data-bth-root] .bth-pcard.is-aqua  .bth-flip__front { --pc: #2CC7B0; }
[data-bth-root] .bth-pcard.is-amber .bth-flip__front { --pc: #F5B53D; }
[data-bth-root] .bth-pcard .bth-tile-l { color: #5B665F; font-size: 7.5px; }
[data-bth-root] .bth-pcard .bth-tile-l span:first-child { overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-pcard .bth-pc-ic { font-size: 12px; line-height: 1; }
[data-bth-root] .bth-pcard .bth-tile-v { color: #121914; text-align: left; }
[data-bth-root] .bth-pcard .bth-tile-v.is-word { font-size: 14px; }
[data-bth-root] .bth-pcard .bth-tile-v.is-num { font-size: 13px; }
[data-bth-root] .bth-pcard .bth-pc-sub { font-size: 8.5px; line-height: 1.2; color: #5B665F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 10px; }
[data-bth-root] .bth-shell.is-desk .bth-pcard .bth-flip__front { padding: 12px 10px 9px; }
[data-bth-root] .bth-shell.is-desk .bth-pcard .bth-tile-l { font-size: 9px; }
[data-bth-root] .bth-shell.is-desk .bth-pcard .bth-pc-ic { font-size: 16px; }
[data-bth-root] .bth-shell.is-desk .bth-pcard .bth-tile-v.is-word { font-size: 20px; line-height: 1.02; }
[data-bth-root] .bth-shell.is-desk .bth-pcard .bth-tile-v.is-num { font-size: 17px; }
[data-bth-root] .bth-shell.is-desk .bth-pcard .bth-pc-sub { font-size: 10.5px; }
/* its back: the house's VC on a green card back */
[data-bth-root] .bth-pcard .bth-flip__back { display: grid; place-items: center; border: 2px solid #FBF8EF; box-shadow: 0 6px 14px rgba(0,0,0,.28);
  background: repeating-linear-gradient(45deg, rgba(212,245,60,.16) 0 4px, transparent 4px 9px), radial-gradient(circle at 50% 50%, #1B6A50, #0B3326); }
[data-bth-root] .bth-vcmark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #D4F53C; background: #0B3326; font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 13px; color: #D4F53C; letter-spacing: .02em; }
[data-bth-root] .bth-shell.is-desk .bth-vcmark { width: 48px; height: 48px; font-size: 18px; }
/* the deal and the flop land a little bigger, like a card thrown down */
[data-bth-root] .bth-pcard.is-up .bth-flip__inner { animation: bth-pc-land .42s var(--bth-flip-delay, 0s) both; }
@keyframes bth-pc-land { 0% { scale: 1.08; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { [data-bth-root] .bth-pcard.is-up .bth-flip__inner { animation: none; } }
/* a card's value may take two lines; fitCard() sizes it */
[data-bth-root] .bth-pcard .bth-tile-v { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.05; max-height: 2.1em; overflow-wrap: normal; }
/* the icon is the card's corner pip, so the label has the whole top line */
[data-bth-root] .bth-pcard .bth-flip__front { position: absolute; }
[data-bth-root] .bth-pcard .bth-tile-l { letter-spacing: .06em; }
[data-bth-root] .bth-pcard .bth-pc-ic { position: absolute; right: 5px; bottom: 3px; font-size: 20px; opacity: .28; pointer-events: none; }
[data-bth-root] .bth-shell.is-desk .bth-pcard .bth-pc-ic { font-size: 30px; right: 7px; bottom: 5px; }
[data-bth-root] .bth-pcard .bth-pc-sub { position: relative; z-index: 1; }
/* a second line may wrap once, so "RI · Single family" is read whole */
[data-bth-root] .bth-pcard .bth-pc-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }

/* ==== HOW A HAND GOES: the lobby's little table (2026-10-25). One 12s loop;
   every size is in cqw, the demo's own width, so it scales with the column. ==== */
[data-bth-root] .bth-demo { position: relative; container-type: inline-size; width: 100%; max-width: 460px; aspect-ratio: 100 / 54; margin: 4px 0 2px; --dm: 12s; }
[data-bth-root] .bth-dm-felt { position: absolute; left: 4cqw; right: 4cqw; top: 3cqw; height: 39cqw; border-radius: 50%; background: var(--bth-felt-tex), var(--bth-felt); border: 1.6cqw solid var(--bth-rim); box-shadow: 0 0 0 1px var(--bth-acc-soft), 0 0 30px var(--bth-acc-soft); display: grid; place-items: center; }
[data-bth-root] .bth-dm-logo { margin-top: 20cqw; font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 3.6cqw; color: var(--bth-acc-text); opacity: .35; }
[data-bth-root] .bth-dm-cards { position: absolute; left: 50%; top: 12.5cqw; translate: -50% 0; display: flex; gap: 1.2cqw; }
[data-bth-root] .bth-dm-card { width: 8.6cqw; height: 12cqw; perspective: 300px; }
[data-bth-root] .bth-dm-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); }
[data-bth-root] .bth-dm-f, [data-bth-root] .bth-dm-b { position: absolute; inset: 0; border-radius: 1cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
[data-bth-root] .bth-dm-f { background: linear-gradient(180deg, var(--pc, #B9E02A) 0 0.9cqw, #FBF8EF 0.9cqw); color: #17201B; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .2cqw; box-shadow: 0 1cqw 2cqw rgba(0,0,0,.3); }
[data-bth-root] .bth-dm-f i { font-style: normal; font-size: 2.6cqw; line-height: 1; }
[data-bth-root] .bth-dm-f b { font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 2.3cqw; line-height: 1; white-space: nowrap; }
[data-bth-root] .bth-dm-f span { font-family: var(--bth-font-mono); font-size: 1.35cqw; letter-spacing: .05em; color: #5B665F; }
[data-bth-root] .bth-dm-b { transform: rotateY(180deg); display: grid; place-items: center; border: .45cqw solid #FBF8EF; background: repeating-linear-gradient(45deg, rgba(212,245,60,.18) 0 .8cqw, transparent .8cqw 1.8cqw), #0F4433; font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 2.6cqw; color: #D4F53C; }
[data-bth-root] .bth-dm-card.c2 { --pc: #4FB3F6; } [data-bth-root] .bth-dm-card.c3 { --pc: #FF7A59; }
[data-bth-root] .bth-dm-card.c4 { --pc: #2CC7B0; } [data-bth-root] .bth-dm-card.c5 { --pc: #F5B53D; }
[data-bth-root] .bth-dm-card.c1 .bth-dm-in { animation: dm-c1 var(--dm) infinite; }
[data-bth-root] .bth-dm-card.c2 .bth-dm-in { animation: dm-c2 var(--dm) infinite; }
[data-bth-root] .bth-dm-card.c3 .bth-dm-in { animation: dm-c3 var(--dm) infinite; }
[data-bth-root] .bth-dm-card.c4 .bth-dm-in { animation: dm-c4 var(--dm) infinite; }
[data-bth-root] .bth-dm-card.c5 .bth-dm-in { animation: dm-c5 var(--dm) infinite; }
@keyframes dm-c1 { 0%, 3% { transform: rotateY(180deg); } 7%, 94% { transform: rotateY(0); } 98%, 100% { transform: rotateY(180deg); } }
@keyframes dm-c2 { 0%, 5% { transform: rotateY(180deg); } 9%, 94% { transform: rotateY(0); } 98%, 100% { transform: rotateY(180deg); } }
@keyframes dm-c3 { 0%, 7% { transform: rotateY(180deg); } 11%, 94% { transform: rotateY(0); } 98%, 100% { transform: rotateY(180deg); } }
@keyframes dm-c4 { 0%, 29% { transform: rotateY(180deg); } 33%, 94% { transform: rotateY(0); } 98%, 100% { transform: rotateY(180deg); } }
@keyframes dm-c5 { 0%, 31% { transform: rotateY(180deg); } 35%, 94% { transform: rotateY(0); } 98%, 100% { transform: rotateY(180deg); } }
/* three seats: left, top, right (you) */
[data-bth-root] .bth-dm-seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .6cqw; width: 12cqw; }
[data-bth-root] .bth-dm-seat.sa { left: 0; top: 14cqw; }
[data-bth-root] .bth-dm-seat.sb { left: 50%; top: -1cqw; translate: -50% 0; }
[data-bth-root] .bth-dm-seat.sc { right: 0; top: 14cqw; }
[data-bth-root] .bth-dm-av { width: 8cqw; height: 8cqw; border-radius: 50%; display: grid; place-items: center; background: var(--bth-surf2); border: .4cqw solid var(--bth-line2); font-family: var(--bth-font-mono); font-weight: 800; font-size: 2.2cqw; color: var(--bth-ink); }
[data-bth-root] .bth-dm-seat.sc .bth-dm-av { border-color: var(--bth-acc); color: var(--bth-acc-text); animation: dm-winner var(--dm) infinite; }
@keyframes dm-winner { 0%, 76% { box-shadow: none; } 80%, 95% { box-shadow: 0 0 0 .6cqw var(--bth-acc-soft), 0 0 4cqw var(--bth-acc-glow); } 100% { box-shadow: none; } }
/* the sealed prices */
[data-bth-root] .bth-dm-g { padding: .5cqw 1.2cqw; border-radius: 99px; background: var(--bth-surf); border: .3cqw solid var(--bth-line2); font-family: var(--bth-font-mono); font-weight: 700; font-size: 1.9cqw; color: var(--bth-ink); white-space: nowrap; opacity: 0; }
[data-bth-root] .bth-dm-seat.sa .bth-dm-g { animation: dm-ga var(--dm) infinite; }
[data-bth-root] .bth-dm-seat.sb .bth-dm-g { animation: dm-gb var(--dm) infinite; }
[data-bth-root] .bth-dm-seat.sc .bth-dm-g { animation: dm-gc var(--dm) infinite; }
@keyframes dm-ga { 0%, 43% { opacity: 0; scale: .6; } 46%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes dm-gb { 0%, 46% { opacity: 0; scale: .6; } 49%, 76% { opacity: 1; scale: 1; } 80%, 95% { opacity: .45; scale: 1; text-decoration: line-through; } 100% { opacity: 0; } }
@keyframes dm-gc { 0%, 49% { opacity: 0; scale: .6; } 52%, 76% { opacity: 1; scale: 1; } 80%, 95% { opacity: 1; scale: 1.12; background: var(--bth-acc); color: var(--bth-acc-ink); border-color: var(--bth-acc); } 100% { opacity: 0; } }
/* the chips go in, and the pot goes to the winner */
[data-bth-root] .bth-dm-chip { position: absolute; left: 50%; top: 4cqw; width: 3cqw; height: 3cqw; margin-left: -1.5cqw; border-radius: 50%; background: radial-gradient(circle, #FBF8EF 0 28%, #FF7A59 30% 62%, #FBF8EF 64% 70%, #FF7A59 72%); box-shadow: 0 .4cqw .8cqw rgba(0,0,0,.4); opacity: 0; }
[data-bth-root] .bth-dm-seat.sb .bth-dm-chip { top: auto; bottom: 4cqw; background: radial-gradient(circle, #FBF8EF 0 28%, #4FB3F6 30% 62%, #FBF8EF 64% 70%, #4FB3F6 72%); }
[data-bth-root] .bth-dm-seat.sc .bth-dm-chip { background: radial-gradient(circle, #FBF8EF 0 28%, #B9E02A 30% 62%, #FBF8EF 64% 70%, #B9E02A 72%); }
[data-bth-root] .bth-dm-seat.sa .bth-dm-chip { animation: dm-chipa var(--dm) infinite; }
[data-bth-root] .bth-dm-seat.sb .bth-dm-chip { animation: dm-chipb var(--dm) infinite; }
[data-bth-root] .bth-dm-seat.sc .bth-dm-chip { animation: dm-chipc var(--dm) infinite; }
@keyframes dm-chipa { 0%, 13% { opacity: 0; translate: 0 0; } 15% { opacity: 1; translate: 0 0; } 23% { opacity: 1; translate: 44cqw 18cqw; } 25%, 100% { opacity: 0; translate: 44cqw 18cqw; } }
@keyframes dm-chipb { 0%, 15% { opacity: 0; translate: 0 0; } 17% { opacity: 1; translate: 0 0; } 25% { opacity: 1; translate: 0 31cqw; } 27%, 100% { opacity: 0; translate: 0 31cqw; } }
@keyframes dm-chipc { 0%, 17% { opacity: 0; translate: 0 0; } 19% { opacity: 1; translate: 0 0; } 27% { opacity: 1; translate: -44cqw 18cqw; } 29%, 100% { opacity: 0; translate: -44cqw 18cqw; } }
[data-bth-root] .bth-dm-pot { position: absolute; left: 50%; top: 34cqw; width: 6cqw; height: 4cqw; margin-left: -3cqw; display: grid; place-items: center; border-radius: 99px; background: var(--bth-surf); border: .3cqw solid var(--bth-acc); font-size: 2.2cqw; color: var(--bth-acc-text); opacity: 0; animation: dm-pot var(--dm) infinite; }
@keyframes dm-pot { 0%, 22% { opacity: 0; translate: 0 0; scale: .7; } 25%, 82% { opacity: 1; translate: 0 0; scale: 1; } 89% { opacity: 1; translate: 40cqw -15cqw; scale: .8; } 92%, 100% { opacity: 0; translate: 40cqw -15cqw; } }
/* the River: the sale lands */
[data-bth-root] .bth-dm-sold { position: absolute; left: 50%; top: 27cqw; translate: -50% 0; padding: .7cqw 2cqw; border-radius: 1.2cqw; background: var(--bth-acc); color: var(--bth-acc-ink); font-family: var(--bth-font-mono); font-weight: 800; font-size: 2.5cqw; white-space: nowrap; box-shadow: 0 0 4cqw var(--bth-acc-glow); opacity: 0; animation: dm-sold var(--dm) infinite; z-index: 1; }
@keyframes dm-sold { 0%, 59% { opacity: 0; scale: 2.2; } 63% { opacity: 1; scale: 1; } 95% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
[data-bth-root] .bth-dm-win { position: absolute; right: 2cqw; top: 9cqw; font-family: var(--bth-font-mono); font-weight: 800; font-size: 2.6cqw; color: var(--bth-acc-text); opacity: 0; animation: dm-winup var(--dm) infinite; }
@keyframes dm-winup { 0%, 85% { opacity: 0; translate: 0 2cqw; } 88%, 95% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -1cqw; } }
/* the step, said under the table */
[data-bth-root] .bth-dm-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 8cqw; display: grid; place-items: center; }
[data-bth-root] .bth-dm-cap span { grid-area: 1 / 1; font-family: var(--bth-font-mono); font-size: 2.6cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--bth-ink); opacity: 0; white-space: nowrap; }
[data-bth-root] .bth-dm-cap b { display: inline-grid; place-items: center; width: 3.6cqw; height: 3.6cqw; margin-right: .8cqw; border-radius: 50%; background: var(--bth-acc); color: var(--bth-acc-ink); font-size: 2.2cqw; }
[data-bth-root] .bth-dm-cap .k0 { animation: dm-k0 var(--dm) infinite; } [data-bth-root] .bth-dm-cap .k1 { animation: dm-k1 var(--dm) infinite; }
[data-bth-root] .bth-dm-cap .k2 { animation: dm-k2 var(--dm) infinite; } [data-bth-root] .bth-dm-cap .k3 { animation: dm-k3 var(--dm) infinite; }
[data-bth-root] .bth-dm-cap .k4 { animation: dm-k4 var(--dm) infinite; } [data-bth-root] .bth-dm-cap .k5 { animation: dm-k5 var(--dm) infinite; }
@keyframes dm-k0 { 0%, 12% { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes dm-k1 { 0%, 12% { opacity: 0; } 13%, 27% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes dm-k2 { 0%, 27% { opacity: 0; } 28%, 41% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes dm-k3 { 0%, 41% { opacity: 0; } 42%, 57% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes dm-k4 { 0%, 57% { opacity: 0; } 58%, 73% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes dm-k5 { 0%, 73% { opacity: 0; } 74%, 99% { opacity: 1; } 100% { opacity: 0; } }
/* with reduced motion: the hand's end, and the steps as a list */
@media (prefers-reduced-motion: reduce) {
  [data-bth-root] .bth-demo, [data-bth-root] .bth-demo * { animation: none !important; }
  [data-bth-root] .bth-dm-in { transform: rotateY(0); }
  [data-bth-root] .bth-dm-g, [data-bth-root] .bth-dm-sold, [data-bth-root] .bth-dm-pot { opacity: 1; }
  [data-bth-root] .bth-demo { aspect-ratio: auto; height: auto; padding-bottom: 0; }
  [data-bth-root] .bth-dm-cap { position: static; height: auto; margin-top: 56cqw; display: flex; flex-wrap: wrap; gap: 1cqw 2.4cqw; justify-content: center; }
  [data-bth-root] .bth-dm-cap span { grid-area: auto; opacity: 1; font-size: 2.3cqw; }
}

/* ==== your practice is your stack (2026-10-25) ==== */
[data-bth-root] .bth-chipsnote { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--bth-acc); background: var(--bth-acc-soft); font-size: 12.5px; line-height: 1.5; color: var(--bth-ink); }
[data-bth-root] .bth-chipsnote b { color: var(--bth-acc-text); }
[data-bth-root] .bth-chipsnote-ic { font-family: var(--bth-font-mono); font-weight: 800; font-size: 18px; color: var(--bth-acc-text); line-height: 1.2; }
/* the demo felt carries the VC weave instead of a centre mark (it sat on the pot) */
[data-bth-root] .bth-dm-logo { display: none; }
[data-bth-root] .bth-dm-felt { overflow: hidden; position: absolute; }
[data-bth-root] .bth-dm-felt::after { content: ""; position: absolute; inset: 0; opacity: .08; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ctext x='20' y='26' text-anchor='middle' font-family='Arial Black,Arial' font-weight='900' font-style='italic' font-size='13' fill='%23D4F53C'%3EVC%3C/text%3E%3C/svg%3E") repeat; }
[data-bth-root] .bth-pcard .bth-flip__front > * { flex-shrink: 0; }
/* your own row: its muted labels read on the lime wash (axe, 2026-10-25) */
[data-bth-root] .bth-stand.is-me span { color: var(--bth-ink); }

/* the lobby's demo and chips note: above Quick Join on a phone, in the right column on a desk (2026-10-25) */
@media (min-width: 1024px) { [data-bth-root] .is-m { display: none !important; } }
@media (max-width: 1023px) { [data-bth-root] .is-d { display: none !important; } }
[data-bth-root] .bth-lobby-how { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
[data-bth-root] .bth-lobby-how .bth-demo { max-width: none; }

/* ==== the demo, as a hand of poker (2026-10-25): flop, turn, river, then the
   price and the showdown. These keyframes replace the five-step ones above. ==== */
@keyframes dm-c4 { 0%, 27% { transform: rotateY(180deg); } 31%, 94% { transform: rotateY(0); } 98%, 100% { transform: rotateY(180deg); } }
@keyframes dm-c5 { 0%, 38% { transform: rotateY(180deg); } 42%, 94% { transform: rotateY(0); } 98%, 100% { transform: rotateY(180deg); } }
@keyframes dm-ga { 0%, 49% { opacity: 0; scale: .6; } 52%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes dm-gb { 0%, 52% { opacity: 0; scale: .6; } 55%, 77% { opacity: 1; scale: 1; } 80%, 95% { opacity: .45; scale: 1; text-decoration: line-through; } 100% { opacity: 0; } }
@keyframes dm-gc { 0%, 55% { opacity: 0; scale: .6; } 58%, 77% { opacity: 1; scale: 1; } 80%, 95% { opacity: 1; scale: 1.12; background: var(--bth-acc); color: var(--bth-acc-ink); border-color: var(--bth-acc); } 100% { opacity: 0; } }
@keyframes dm-sold { 0%, 61% { opacity: 0; scale: 2.2; } 65% { opacity: 1; scale: 1; } 95% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes dm-winner { 0%, 77% { box-shadow: none; } 80%, 95% { box-shadow: 0 0 0 .6cqw var(--bth-acc-soft), 0 0 4cqw var(--bth-acc-glow); } 100% { box-shadow: none; } }
@keyframes dm-pot { 0%, 22% { opacity: 0; translate: 0 0; scale: .7; } 25%, 83% { opacity: 1; translate: 0 0; scale: 1; } 89% { opacity: 1; translate: 40cqw -15cqw; scale: .8; } 92%, 100% { opacity: 0; translate: 40cqw -15cqw; } }
@keyframes dm-k0 { 0%, 12% { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes dm-k1 { 0%, 12% { opacity: 0; } 13%, 26% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes dm-k2 { 0%, 26% { opacity: 0; } 27%, 37% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes dm-k3 { 0%, 37% { opacity: 0; } 38%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes dm-k4 { 0%, 48% { opacity: 0; } 49%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes dm-k5 { 0%, 60% { opacity: 0; } 61%, 76% { opacity: 1; } 77%, 100% { opacity: 0; } }
@keyframes dm-k6 { 0%, 76% { opacity: 0; } 77%, 99% { opacity: 1; } 100% { opacity: 0; } }
[data-bth-root] .bth-dm-cap .k6 { animation: dm-k6 var(--dm) infinite; }
@media (prefers-reduced-motion: reduce) { [data-bth-root] .bth-dm-cap .k6 { animation: none !important; } }

/* ==== THE DASHBOARD'S BACKGROUND (Max, 2026-10-25: "make sure that the same
   background thats on the dashboard is there too"). The lobby is the page
   itself, so body.on-house takes the dashboard's drifting glow and grain
   (index.html); here it adds the dashboard's dot grid. The table is a
   full-screen layer, so it carries its own copy of the glow and the grain.
   Dark theme only, as on the dashboard. ==== */
[data-bth-root][data-bth-theme="dark"] .bth-lobby { position: relative; isolation: isolate; }
/* the grid's 24px side bleed made the page 6px wider than the screen wherever the lobby fills
   its column (exactly 1024: DOC-WIDE 1030>1024, 2026-10-26). The root clips it sideways; the
   sheets, the TV screen and the coach are fixed, so the clip never reaches them */
[data-bth-root] { overflow-x: clip; }
[data-bth-root][data-bth-theme="dark"] .bth-lobby::before { content: ""; position: absolute; inset: -40px -24px; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(214,255,61,.10) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 35%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 60% 55% at 50% 35%, #000 20%, transparent 80%); }
[data-bth-root][data-bth-theme="dark"] .bth-shell { background: #07090A; }
[data-bth-root][data-bth-theme="dark"] .bth-shell::before { content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(214,255,61,.028) 47%, rgba(127,227,196,.03) 53%, transparent 62%),
    radial-gradient(30% 26% at 32% 34%, rgba(150,200,40,.075), transparent 70%),
    radial-gradient(28% 32% at 70% 66%, rgba(40,160,140,.055), transparent 70%);
  animation: bth-amb 120s ease-in-out infinite alternate; }
[data-bth-root][data-bth-theme="dark"] .bth-shell::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes bth-amb { 0% { transform: translate(-9%,4%) rotate(-4deg) scale(1); } 50% { transform: translate(3%,-3%) rotate(1deg) scale(1.06); } 100% { transform: translate(9%,-5%) rotate(5deg) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { [data-bth-root] .bth-shell::before { animation: none; } }
/* "TOWN · NH" fits a phone card (it ran 1.3px over at .06em) */
[data-bth-root] .bth-pcard .bth-tile-l { letter-spacing: .02em; }

/* BETTING VS ACCURACY (2026-10-25): the admins' read of the hand log, ui.mjs reportSheet */
[data-bth-root] .bth-rep-verdict { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--bth-ink); }
[data-bth-root] .bth-rep-wrap { overflow-x: auto; margin: 0 -2px; }
[data-bth-root] .bth-rep { width: 100%; border-collapse: collapse; font-size: 12.5px; }
[data-bth-root] .bth-rep th, [data-bth-root] .bth-rep td { padding: 8px 5px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--bth-line2); }
[data-bth-root] .bth-rep thead th { font-family: var(--bth-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bth-mute); }
[data-bth-root] .bth-rep th[scope="row"], [data-bth-root] .bth-rep thead th:first-child { text-align: left; }
[data-bth-root] .bth-rep td { font-family: var(--bth-font-mono); }
[data-bth-root] .bth-rep-err { position: relative; min-width: 78px; }
[data-bth-root] .bth-rep-err i { position: absolute; left: 6px; top: 50%; height: 6px; margin-top: -3px; max-width: calc(100% - 52px); border-radius: 3px; background: var(--bth-line2); }
[data-bth-root] .bth-rep-err b { position: relative; font-weight: 700; }
[data-bth-root] .bth-rep-err.is-best i { background: var(--bth-good); }
[data-bth-root] .bth-rep-err.is-best b, [data-bth-root] .bth-rep .is-up { color: var(--bth-good); }
[data-bth-root] .bth-rep .is-down { color: var(--bth-bad); }

/* THE BANK (2026-10-25): chips to and from bonus XP, ui.mjs bankSheet */
[data-bth-root] button.bth-chipspill { cursor: pointer; font-family: var(--bth-font-mono); }
[data-bth-root] button.bth-chipspill:hover { border-color: var(--bth-acc); box-shadow: 0 0 14px var(--bth-acc-glow); }
[data-bth-root] .bth-linkbtn { display: inline-flex; align-items: center; min-height: 24px; vertical-align: middle; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--bth-acc-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
[data-bth-root] .bth-bank-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
[data-bth-root] .bth-bank-bal div { padding: 12px 14px; border: 1px solid var(--bth-line2); border-radius: 12px; background: var(--bth-surf); }
[data-bth-root] .bth-bank-bal span { display: block; font-family: var(--bth-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; color: var(--bth-mute); }
[data-bth-root] .bth-bank-bal b { display: block; margin-top: 4px; font-family: var(--bth-font-mono); font-size: 20px; font-weight: 700; color: var(--bth-ink); }
[data-bth-root] .bth-field input { min-height: 44px; width: 52%; padding: 0 12px; border: 1px solid var(--bth-line2); border-radius: 12px; background: var(--bth-bg); color: var(--bth-ink); font: 700 16px var(--bth-font-mono); text-align: right; }
[data-bth-root] .bth-field input:focus { outline: none; border-color: var(--bth-acc); }
[data-bth-root] .bth-chips.bth-bank-pre { display: flex; flex-wrap: wrap; }

/* THE AREA AT THE TABLE (2026-10-25): shown to all, changed by the host (ui.mjs areaSheet) */
[data-bth-root] .bth-areachip { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 2px 9px; min-height: 24px; border-radius: 999px; border: 1px solid var(--bth-line2); background: none; color: inherit; font: inherit; font-size: .92em; white-space: nowrap; vertical-align: middle; max-width: 15ch; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] button.bth-areachip { cursor: pointer; border-color: var(--bth-acc); color: var(--bth-acc-text); }
[data-bth-root] button.bth-areachip:hover { box-shadow: 0 0 12px var(--bth-acc-glow); }
[data-bth-root] .bth-areabtn { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bth-acc); background: var(--bth-acc-soft); color: var(--bth-acc-text); font: 700 12px var(--bth-font-mono); cursor: pointer; white-space: nowrap; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }

/* the host's settings in the desk bar's waiting room, two by two (2026-10-25) */
[data-bth-root] .bth-row.bth-hostset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
[data-bth-root] .bth-hostset .bth-pair { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; white-space: nowrap; }
[data-bth-root] .bth-hostset .bth-areabtn { max-width: none; min-height: 30px; padding: 0 9px; font-size: 11px; }
[data-bth-root] .bth-hostset .bth-pair:first-child { gap: 6px; }
/* a phone: the pin alone, on the hand's line (its aria-label keeps the area) */
[data-bth-root] .bth-areachip.is-pin { font-size: 9.5px; letter-spacing: .04em; padding: 0 8px; min-height: 24px; margin-left: 6px; max-width: 12ch; vertical-align: middle; }
/* the phone code line held the code and the blinds 1px short of its box at 20px (ellipsis on "◉ 25/50") */
[data-bth-root] .bth-head-code { font-size: 19px; }

/* THE HOME IN THE KEYPAD (2026-10-25: "when the user is guessing on the phone you cannot see what the property is") */
[data-bth-root] .bth-sheet.is-g1 { top: auto; }   /* as tall as it is (the facts added a row), never taller than the screen */
[data-bth-root] .bth-gp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; flex: none; }
[data-bth-root] .bth-gp-fact { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 7px 10px; border-radius: 10px; background: var(--bth-bg); border: 1px solid var(--bth-line); }
[data-bth-root] .bth-gp-fact.is-wide { grid-column: 1 / -1; }
[data-bth-root] .bth-gp-fact i { font-style: normal; font-size: 13px; flex: none; }
[data-bth-root] .bth-gp-fact b { font-size: 14px; font-weight: 800; color: var(--bth-ink); white-space: nowrap; flex: none; }
[data-bth-root] .bth-gp-fact span { font-size: 11.5px; color: var(--bth-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
[data-bth-root] .bth-gp-adj button { height: 40px; }
/* a short phone (640px tall): the six steps in one row, a tighter sheet, so the lock button stays on screen */
@media (max-height: 720px) {
  [data-bth-root] .bth-sheet.is-g1 { gap: 7px; padding-top: 6px; }
  [data-bth-root] .bth-sheet.is-g1 .bth-gp-adj { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  [data-bth-root] .bth-sheet.is-g1 .bth-gp-adj button { font-size: 11px; padding: 0; }
  [data-bth-root] .bth-sheet.is-g1 .bth-gp-field { height: 50px; }
  [data-bth-root] .bth-sheet.is-g1 .bth-gp-h { font-size: 21px; }
  [data-bth-root] .bth-sheet.is-g1 .bth-ring54 { transform: scale(.82); margin: -5px; }
  [data-bth-root] .bth-gp-fact { padding: 5px 9px; }
}

/* THE PHONE PASS (2026-10-25: "its difficult on the phone make sure the interface is easy to use").
   The header's small round buttons keep their look and get a 44px hit area; the card's second
   lines and the pot's labels were 8.5px before the stage's own scale-down */
[data-bth-root] .bth-back, [data-bth-root] .bth-sndbtn, [data-bth-root] .bth-areachip.is-pin { position: relative; }
[data-bth-root] .bth-back::after, [data-bth-root] .bth-sndbtn::after { content: ""; position: absolute; inset: -6px; }
[data-bth-root] .bth-areachip.is-pin::after { content: ""; position: absolute; inset: -12px -6px; }
[data-bth-root] .bth-pcard .bth-pc-sub { font-size: 9.5px; }
[data-bth-root] .bth-pill-k { font-size: 9.5px; }
@media (max-width: 370px) { [data-bth-root] .bth-head-code { font-size: 17px; } }

/* WATCH A LIVE GAME (2026-10-25): the row's buttons, JOIN and WATCH side by side */
[data-bth-root] .bth-trow-a { grid-area: j; display: inline-flex; gap: 6px; justify-self: end; }
[data-bth-root] .bth-trow .bth-trow-a .bth-join { grid-area: auto; min-height: 36px; }
[data-bth-root] .bth-join.is-watch { border-color: var(--bth-line2); color: var(--bth-ink); }
[data-bth-root] .bth-rep-verdict.is-small { font-size: 13.5px; font-weight: 600; }
[data-bth-root] .bth-rep-verdict.is-bad { color: var(--bth-bad); }
/* a scrolling sheet squeezed its flex children: a table wrapper (overflow-x) shrank to a line once the 📊 sheet ran taller than the screen */
[data-bth-root] .bth-rep-wrap { flex: none; }
[data-bth-root] .bth-watchn { color: var(--bth-acc-text); white-space: nowrap; letter-spacing: .04em; }

/* ==== HOW IT WORKS (2026-10-26, howto.mjs): the explainer. One little table
   that stays, eleven scenes that set which of its parts show (the stage's on-*
   classes); every move is a transition on an element that persists. Sizes are
   cqw, the stage's own width, so it is the same picture at 390 and on a desk. ==== */
[data-bth-root] .bth-how { position: fixed; inset: 0; z-index: 99; overflow-y: auto; background: var(--bth-bg); color: var(--bth-ink); }
[data-bth-root] .bth-how-col { width: 100%; max-width: 680px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
[data-bth-root] .bth-how-top { display: flex; align-items: center; gap: 10px; min-height: 40px; }
[data-bth-root] .bth-how-n { font-family: var(--bth-font-mono); font-size: 11px; color: var(--bth-mute); margin-right: auto; }
[data-bth-root] .bth-how-skip { min-height: 36px; padding: 0 14px; border-radius: var(--bth-r-pill); border: 1px solid var(--bth-line2); font-family: var(--bth-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
[data-bth-root] .bth-how-skip:hover { border-color: var(--bth-acc); }
[data-bth-root] .bth-how-stage { position: relative; width: 100%; container-type: inline-size; aspect-ratio: 100 / 62; flex: none; overflow: hidden; border-radius: 18px; background: var(--bth-surf); border: 1px solid var(--bth-line); }
[data-bth-root] .bth-how-bar { display: flex; gap: 4px; }
[data-bth-root] .bth-how-seg { flex: 1; height: 24px; position: relative; min-width: 0; }
[data-bth-root] .bth-how-seg::before, [data-bth-root] .bth-how-seg i { content: ""; position: absolute; left: 0; top: 10px; height: 4px; border-radius: 2px; }
[data-bth-root] .bth-how-seg::before { right: 0; background: var(--bth-line2); }
[data-bth-root] .bth-how-seg i { width: 0; background: var(--bth-acc); }
[data-bth-root] .bth-how-cap { display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
[data-bth-root] .bth-how-h { margin: 0; font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 27px; line-height: 1; }
[data-bth-root] .bth-how-p { margin: 0; font-size: 14px; line-height: 1.5; text-wrap: pretty; }
[data-bth-root] .bth-how-ctl { display: flex; justify-content: center; align-items: center; gap: 16px; }
[data-bth-root] .bth-how-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--bth-line2); display: grid; place-items: center; font-size: 22px; font-weight: 700; }
[data-bth-root] .bth-how-btn.is-play { width: 58px; height: 58px; font-size: 18px; background: var(--bth-acc); color: var(--bth-acc-ink); border-color: var(--bth-acc); box-shadow: 0 0 22px var(--bth-acc-glow); }
[data-bth-root] .bth-how-end { display: flex; flex-direction: column; gap: 10px; }
[data-bth-root] .bth-how-end2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
[data-bth-root] .bth-how-end2 .bth-btn { font-size: 16px; padding: 0 10px; }
@media (min-width: 1024px) { [data-bth-root] .bth-how-col { padding-top: 28px; } [data-bth-root] .bth-how-h { font-size: 34px; } [data-bth-root] .bth-how-p { font-size: 15px; } }

/* the table */
[data-bth-root] .bth-how-stage > * { position: absolute; transition: opacity .45s var(--bth-ease), transform .55s var(--bth-ease); }
[data-bth-root] .hw-felt { left: 5cqw; right: 5cqw; top: 7cqw; height: 44cqw; border-radius: 50%; background: var(--bth-felt-tex), var(--bth-felt); border: 1.8cqw solid var(--bth-rim); box-shadow: 0 0 30px var(--bth-acc-soft); display: grid; place-items: center; }
[data-bth-root] .hw-logo { margin-top: 26cqw; font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 4cqw; color: var(--bth-acc-text); opacity: .35; }
[data-bth-root] .bth-how-stage:is(.on-chips, .on-bank, .on-ring) .hw-felt { opacity: .3; }
[data-bth-root] .hw-title { left: 50%; top: 17cqw; transform: translateX(-50%) scale(.9); opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 1.5cqw; white-space: nowrap; }
[data-bth-root] .hw-title b { font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 10cqw; line-height: .9; }
[data-bth-root] .hw-title b span { color: var(--bth-acc-text); }
[data-bth-root] .hw-kick { font-family: var(--bth-font-mono); font-size: 2.4cqw; letter-spacing: .2em; color: var(--bth-mute); }
[data-bth-root] .on-title .hw-title { opacity: 1; transform: translateX(-50%) scale(1); }
/* the five cards */
[data-bth-root] .hw-cards { left: 50%; top: 13cqw; transform: translateX(-50%); display: flex; gap: 1.2cqw; opacity: 0; }
[data-bth-root] .bth-how-stage:is(.on-up1, .on-cards) .hw-cards { opacity: 1; }
[data-bth-root] .on-line .hw-cards { transform: translateX(-50%) translateY(-4cqw) scale(.8); }
[data-bth-root] .hw-card { width: 12cqw; height: 16.5cqw; perspective: 400px; }
[data-bth-root] .hw-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .6s var(--bth-ease); }
[data-bth-root] .hw-f, [data-bth-root] .hw-b { position: absolute; inset: 0; border-radius: 1.2cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
[data-bth-root] .hw-f { background: linear-gradient(180deg, var(--pc, #B9E02A) 0 1cqw, #FBF8EF 1cqw); color: #17201B; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .3cqw; box-shadow: 0 1cqw 2cqw rgba(0,0,0,.3); }
[data-bth-root] .hw-f i { font-style: normal; font-size: 3cqw; line-height: 1; }
[data-bth-root] .hw-f b { font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 3.3cqw; line-height: 1; white-space: nowrap; }
[data-bth-root] .hw-f span { font-family: var(--bth-font-mono); font-size: 1.7cqw; letter-spacing: .05em; color: #4B554F; }
[data-bth-root] .hw-f em { font-style: normal; font-size: 1.55cqw; color: #4B554F; white-space: nowrap; }
[data-bth-root] .hw-b { transform: rotateY(180deg); display: grid; place-items: center; border: .5cqw solid #FBF8EF; background: repeating-linear-gradient(45deg, rgba(212,245,60,.18) 0 .9cqw, transparent .9cqw 2cqw), #0F4433; font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 3.2cqw; color: #D4F53C; }
[data-bth-root] .hw-card.c2 { --pc: #4FB3F6; } [data-bth-root] .hw-card.c3 { --pc: #FF7A59; } [data-bth-root] .hw-card.c4 { --pc: #2CC7B0; } [data-bth-root] .hw-card.c5 { --pc: #F5B53D; }
[data-bth-root] .hw-card.c2 .hw-in { transition-delay: .3s; } [data-bth-root] .hw-card.c3 .hw-in { transition-delay: .6s; } [data-bth-root] .hw-card.c5 .hw-in { transition-delay: 1.4s; }
[data-bth-root] .on-up1 .c1 .hw-in, [data-bth-root] .on-up2 .c2 .hw-in, [data-bth-root] .on-up3 .c3 .hw-in, [data-bth-root] .on-up4 .c4 .hw-in, [data-bth-root] .on-up5 .c5 .hw-in, [data-bth-root] .on-cards .hw-in { transform: rotateY(0); }
[data-bth-root] .on-cards .hw-in { transition-delay: 0s; }
/* three seats: left, top, and you on the right */
[data-bth-root] .hw-seat { width: 17cqw; display: flex; flex-direction: column; align-items: center; gap: .8cqw; opacity: 0; }
[data-bth-root] .hw-seat.sa { left: .5cqw; top: 21cqw; } [data-bth-root] .hw-seat.sc { right: .5cqw; top: 21cqw; }
[data-bth-root] .hw-seat.sb { left: 50%; top: .8cqw; transform: translateX(-50%); flex-direction: row; width: auto; gap: 1.2cqw; }
[data-bth-root] .on-seats .hw-seat { opacity: 1; }
[data-bth-root] .hw-av { width: 7.5cqw; height: 7.5cqw; border-radius: 50%; display: grid; place-items: center; background: var(--bth-surf2); border: .45cqw solid var(--bth-line2); font-family: var(--bth-font-mono); font-weight: 700; font-size: 2.2cqw; transition: box-shadow .5s, border-color .5s, opacity .5s; }
[data-bth-root] .sc .hw-av { border-color: var(--bth-acc); color: var(--bth-acc-text); }
[data-bth-root] .hw-g { position: relative; width: 12cqw; height: 5cqw; border-radius: var(--bth-r-pill); background: var(--bth-bg); border: .3cqw solid var(--bth-line2); opacity: 0; transform: rotateX(90deg); transition: opacity .35s, transform .45s var(--bth-ease); font-family: var(--bth-font-mono); font-weight: 700; font-size: 2.4cqw; }
[data-bth-root] .hw-g > span { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .3s; }
[data-bth-root] .bth-how-stage:is(.on-sealed, .on-flip) .hw-g { opacity: 1; transform: none; }
[data-bth-root] .on-sealed .hw-seal { opacity: 1; }
[data-bth-root] .on-sealed .sb .hw-g { transition-delay: .5s; } [data-bth-root] .on-sealed .sc .hw-g { transition-delay: 1s; }
[data-bth-root] .on-flip .hw-g1 { opacity: 1; }
[data-bth-root] .on-moved .sc .hw-g1 { opacity: 0; transition-delay: 2.4s; }
[data-bth-root] .on-moved .sc .hw-g2 { opacity: 1; transition-delay: 2.4s; color: var(--bth-acc-text); }
[data-bth-root] .on-moved .sc .hw-g { border-color: var(--bth-acc); transition: border-color .3s 2.4s, opacity .35s, transform .45s; }
[data-bth-root] .hw-bet { width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--bth-acc); border: .5cqw dashed rgba(0,0,0,.35); opacity: 0; transition: opacity .3s, transform .6s var(--bth-ease); }
[data-bth-root] .on-blinds :is(.sa, .sb) .hw-bet { opacity: 1; }
[data-bth-root] .on-win .sc .hw-av { box-shadow: 0 0 0 1cqw var(--bth-acc-soft), 0 0 4cqw var(--bth-acc-glow); }
/* the pot */
[data-bth-root] .hw-pot { left: 50%; top: 33cqw; transform: translateX(-50%); display: flex; align-items: center; gap: .6cqw; opacity: 0; font-family: var(--bth-font-mono); font-weight: 700; font-size: 2.8cqw; }
[data-bth-root] .hw-pot i { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: var(--bth-acc); border: .5cqw dashed rgba(0,0,0,.35); margin-right: -1.8cqw; }
[data-bth-root] .hw-pot span { margin-left: 2.4cqw; padding: .4cqw 1.6cqw; border-radius: var(--bth-r-pill); background: var(--bth-bg); }
[data-bth-root] .hw-pot-b { display: none; }
[data-bth-root] .bth-how-stage:is(.on-blinds, .on-pot) .hw-pot { opacity: 1; }
[data-bth-root] .on-pot .hw-pot-a { display: none; } [data-bth-root] .on-pot .hw-pot-b { display: inline; }
[data-bth-root] .hw-acts { left: 50%; top: 53.5cqw; transform: translateX(-50%); display: flex; gap: 1.2cqw; opacity: 0; }
[data-bth-root] .hw-acts span { padding: .8cqw 2cqw; border-radius: var(--bth-r-pill); border: .3cqw solid var(--bth-line2); background: var(--bth-bg); font-family: var(--bth-font-mono); font-weight: 700; font-size: 2.2cqw; letter-spacing: .08em; }
[data-bth-root] .on-acts .hw-acts { opacity: 1; transition-delay: 1.2s; }
[data-bth-root] .on-acts .hw-acts span { animation: hw-act 4s 1.6s both; }
[data-bth-root] .on-acts .hw-acts span:nth-child(2) { animation-delay: 2.4s; } [data-bth-root] .on-acts .hw-acts span:nth-child(3) { animation-delay: 3.2s; } [data-bth-root] .on-acts .hw-acts span:nth-child(4) { animation-delay: 4s; }
@keyframes hw-act { 0%, 100% { border-color: var(--bth-line2); } 8%, 20% { border-color: var(--bth-acc); color: var(--bth-acc-text); } }
/* the showdown: the sale, the line and the corridor */
[data-bth-root] .hw-sold { left: 50%; top: 52cqw; transform: translateX(-50%) scale(.7); opacity: 0; display: flex; align-items: baseline; gap: 1.6cqw; padding: .8cqw 3cqw; border-radius: var(--bth-r-pill); background: var(--bth-acc); color: var(--bth-acc-ink); white-space: nowrap; }
[data-bth-root] .hw-sold span { font-family: var(--bth-font-mono); font-weight: 700; font-size: 2.2cqw; letter-spacing: .14em; }
[data-bth-root] .hw-sold b { font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 5cqw; }
[data-bth-root] .on-sold .hw-sold { opacity: 1; transform: translateX(-50%) scale(1); transition-timing-function: var(--bth-ease-slam); }
[data-bth-root] .hw-line { left: 21cqw; right: 21cqw; top: 32cqw; height: 15cqw; opacity: 0; }
[data-bth-root] .on-line .hw-line { opacity: 1; transition-delay: .5s; }
[data-bth-root] .hw-track { position: absolute; left: 0; right: 0; top: 7.3cqw; height: .5cqw; border-radius: .25cqw; background: var(--bth-line2); }
[data-bth-root] .hw-corr { position: absolute; top: 4.6cqw; height: 6cqw; border-radius: 1cqw; background: var(--bth-acc-soft); border: .25cqw dashed var(--bth-acc); }
[data-bth-root] .hw-corr span { position: absolute; right: 0; bottom: 100%; font-family: var(--bth-font-mono); font-size: 1.7cqw; font-weight: 700; color: var(--bth-acc-text); }
[data-bth-root] .hw-salemk { position: absolute; top: 3.8cqw; width: .55cqw; height: 7.4cqw; margin-left: -.27cqw; background: var(--bth-ink); border-radius: .3cqw; }
[data-bth-root] .hw-mk { position: absolute; top: 7.55cqw; width: 0; height: 0; }
[data-bth-root] .hw-mk i { position: absolute; left: -1.2cqw; top: -1.2cqw; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--bth-ink); border: .4cqw solid var(--bth-surf); }
[data-bth-root] .hw-mk.mc i { background: var(--bth-acc); } [data-bth-root] .hw-mk.is-out i { background: var(--bth-bad); }
[data-bth-root] .hw-mk span { position: absolute; left: 0; transform: translateX(-50%); top: 2.4cqw; font-family: var(--bth-font-mono); font-weight: 700; font-size: 1.75cqw; white-space: nowrap; }
[data-bth-root] .hw-mk.mb span { top: auto; bottom: 2.4cqw; } [data-bth-root] .hw-mk.mc span { top: auto; bottom: 2.4cqw; color: var(--bth-acc-text); }
[data-bth-root] .hw-mk.is-out span { color: var(--bth-bad); }
[data-bth-root] .hw-win { right: 1cqw; top: 39cqw; width: 19cqw; display: flex; flex-direction: column; align-items: center; gap: .4cqw; opacity: 0; transform: scale(.6); }
[data-bth-root] .hw-win b { font-family: var(--bth-font-mono); font-size: 3.4cqw; color: var(--bth-acc-text); }
[data-bth-root] .hw-win span { font-family: var(--bth-font-mono); font-size: 1.6cqw; font-weight: 700; text-align: center; }
[data-bth-root] .on-win .hw-win { opacity: 1; transform: none; transition-delay: .5s; transition-timing-function: var(--bth-ease-slam); }
/* the clock */
[data-bth-root] .hw-ring { left: 50%; top: 11cqw; width: 30cqw; height: 30cqw; transform: translateX(-50%) scale(.8); opacity: 0; display: grid; place-items: center; align-content: center; }
[data-bth-root] .hw-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
[data-bth-root] .hw-ring circle { fill: none; stroke-width: 6; }
[data-bth-root] .hw-ring-t { stroke: var(--bth-line2); }
[data-bth-root] .hw-ring-v { stroke: var(--bth-acc); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
[data-bth-root] .hw-ring b { font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 10cqw; line-height: .9; }
[data-bth-root] .hw-ring span { font-family: var(--bth-font-mono); font-size: 1.8cqw; letter-spacing: .14em; color: var(--bth-mute); }
[data-bth-root] .on-ring .hw-ring { opacity: 1; transform: translateX(-50%) scale(1); }
/* chips and the bank */
[data-bth-root] .hw-chips { left: 50%; top: 11cqw; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 6cqw; opacity: 0; }
[data-bth-root] .on-chips .hw-chips { opacity: 1; }
[data-bth-root] .hw-stack { display: flex; flex-direction: column-reverse; gap: .4cqw; }
[data-bth-root] .hw-stack i { width: 13cqw; height: 3.2cqw; border-radius: 50%; background: var(--bth-acc); border: .5cqw dashed rgba(0,0,0,.3); opacity: 0; transform: translateY(-6cqw); transition: opacity .3s, transform .45s var(--bth-ease-slam); }
[data-bth-root] .on-chips .hw-stack i { opacity: 1; transform: none; }
[data-bth-root] .hw-stack i:nth-child(2) { transition-delay: .25s; } [data-bth-root] .hw-stack i:nth-child(3) { transition-delay: .5s; } [data-bth-root] .hw-stack i:nth-child(4) { transition-delay: 1.4s; } [data-bth-root] .hw-stack i:nth-child(5) { transition-delay: 2.3s; } [data-bth-root] .hw-stack i:nth-child(6) { transition-delay: 3.2s; }
[data-bth-root] .hw-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6cqw; }
[data-bth-root] .hw-chips li { font-size: 2.8cqw; white-space: nowrap; opacity: 0; transform: translateX(-3cqw); transition: opacity .4s, transform .4s; }
[data-bth-root] .hw-chips li b { font-family: var(--bth-font-mono); color: var(--bth-acc-text); margin-right: 1cqw; }
[data-bth-root] .on-chips .hw-chips li { opacity: 1; transform: none; }
[data-bth-root] .hw-chips li:nth-child(2) { transition-delay: 1.2s; } [data-bth-root] .hw-chips li:nth-child(3) { transition-delay: 2.1s; } [data-bth-root] .hw-chips li:nth-child(4) { transition-delay: 3s; }
[data-bth-root] .hw-bank { left: 50%; top: 13cqw; transform: translateX(-50%); display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 3cqw; opacity: 0; }
[data-bth-root] .on-bank .hw-bank { opacity: 1; }
[data-bth-root] .hw-bk { width: 23cqw; padding: 2cqw; border-radius: 2cqw; background: var(--bth-bg); border: .3cqw solid var(--bth-line2); display: flex; flex-direction: column; align-items: center; gap: .8cqw; }
[data-bth-root] .hw-bk span { font-family: var(--bth-font-mono); font-size: 1.9cqw; letter-spacing: .14em; color: var(--bth-mute); }
[data-bth-root] .hw-bk b { font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 7cqw; line-height: 1; }
[data-bth-root] .hw-bk.is-ch b { color: var(--bth-acc-text); }
[data-bth-root] .hw-bk-arr { display: flex; flex-direction: column; gap: 1cqw; font-size: 4.4cqw; font-weight: 900; color: var(--bth-acc-text); line-height: 1; }
[data-bth-root] .hw-bk-arr i { font-style: normal; display: block; }
[data-bth-root] .on-bank .hw-bk-arr i:first-child { animation: hw-arr 1.6s .6s infinite; } [data-bth-root] .on-bank .hw-bk-arr i:last-child { animation: hw-arr2 1.6s 1.4s infinite; }
@keyframes hw-arr { 0%, 100% { transform: none; } 50% { transform: translateX(1.2cqw); } }
@keyframes hw-arr2 { 0%, 100% { transform: none; } 50% { transform: translateX(-1.2cqw); } }
[data-bth-root] .hw-bank p { grid-column: 1 / -1; margin: 0; text-align: center; font-family: var(--bth-font-mono); font-size: 2cqw; color: var(--bth-mute); }
[data-bth-root] .bth-how.is-paused .bth-how-stage * { animation-play-state: paused !important; }
/* reduced motion: every scene is a still, and nothing advances on its own (howto.mjs) */
@media (prefers-reduced-motion: reduce) {
  [data-bth-root] .bth-how-stage *, [data-bth-root] .bth-how-stage > * { transition: none !important; animation: none !important; }
}
[data-bth-root] .bth-howlink { margin-top: 2px; font-size: 13px; gap: 6px; }
[data-bth-root] .bth-howlink small { font-family: var(--bth-font-mono); font-size: 10px; color: var(--bth-mute); text-decoration: none; }

/* ==== THE PRACTICE HAND'S COACH (2026-10-26, tutorial.mjs): a ring on the real
   control and a card beside it. Nothing here takes a tap but the card, so the
   table's own buttons work under it. ==== */
[data-bth-root] .bth-coach { position: fixed; inset: 0; z-index: 98; pointer-events: none; }
[data-bth-root] .bth-coach-ring { position: fixed; border: 2px solid var(--bth-acc); border-radius: 14px; box-shadow: 0 0 0 4px var(--bth-acc-soft), 0 0 24px var(--bth-acc-glow); transition: left .25s var(--bth-ease), top .25s var(--bth-ease), width .25s var(--bth-ease), height .25s var(--bth-ease); }
[data-bth-root] .bth-coach.is-dim .bth-coach-ring { box-shadow: 0 0 0 4px var(--bth-acc-soft), 0 0 24px var(--bth-acc-glow), 0 0 0 200vmax rgba(0, 0, 0, .42); }
[data-bth-root] .bth-coach-card { position: fixed; pointer-events: auto; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--bth-surf); border: 1px solid var(--bth-acc); box-shadow: 0 18px 44px rgba(0, 0, 0, .4); }
[data-bth-root] .bth-coach-h { font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 23px; line-height: 1; }
[data-bth-root] .bth-coach-p { margin: 0; font-size: 13px; line-height: 1.45; text-wrap: pretty; }
[data-bth-root] .bth-coach-btns { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
[data-bth-root] .bth-coach-btns .bth-btn { height: 44px; font-size: 17px; padding: 0 20px; }
[data-bth-root] .bth-coach-end { min-height: 32px; margin-left: auto; font-size: 12px; color: var(--bth-mute); text-decoration: underline; text-underline-offset: 2px; }
[data-bth-root] .bth-coach-hint { font-family: var(--bth-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bth-acc-text); }
@media (prefers-reduced-motion: reduce) { [data-bth-root] .bth-coach-ring { transition: none; } }
/* over a phone's keypad the card is the headline and one short line, so it fits the table above the sheet */
[data-bth-root] .bth-coach-card.is-compact { padding: 9px 12px; gap: 3px; border-radius: 14px; }
[data-bth-root] .bth-coach-card.is-compact .bth-coach-h { font-size: 19px; }
[data-bth-root] .bth-coach-card.is-compact .bth-coach-p { font-size: 12px; line-height: 1.35; }
[data-bth-root] .bth-coach-card.is-compact .bth-coach-hint { display: none; }
[data-bth-root] .bth-coach-card.is-compact .bth-coach-btns { margin-top: 0; }

/* THE PHONE'S PRICE BOX IS A REAL FIELD (2026-10-26, Max: "it will not let me enter in a value"):
   it looked typable and was not; a tap now opens the number keyboard, and the pad still types into it */
[data-bth-root] .bth-gp-in { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--bth-ink); font-family: var(--bth-font-mono); font-size: 36px; font-weight: 800; caret-color: var(--bth-acc); padding: 0; }
[data-bth-root] .bth-gp-in::placeholder { font-family: var(--bth-font-body); font-size: 14px; font-weight: 500; color: var(--bth-mute); }
[data-bth-root] .bth-gp-field:focus-within { box-shadow: 0 0 0 3px var(--bth-acc-soft), 0 0 20px var(--bth-acc-soft); }

/* BOT DIFFICULTY (2026-10-26): the host's pick, a select the size of the area button beside it */
[data-bth-root] .bth-lvsel { min-height: 32px; padding: 0 28px 0 12px; border-radius: 999px; border: 1px solid var(--bth-line2); background: var(--bth-surf2); color: var(--bth-ink); font-family: var(--bth-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
[data-bth-root] .bth-field .bth-lvsel { min-height: 44px; font-size: 14px; }

/* ==== TV MODE (2026-10-26, ui.mjs openDisplay): the host's computer on the room's TV. The
   desk board, read from across a room: bigger type throughout, a wider side panel for the
   standings and the play-by-play, and a bar that says whose turn it is beside the code to
   scan. Laid out for 1920x1080; the board scales up to 2x to fill it. ==== */
[data-bth-root] .bth-shell.is-display .bth-top { height: 84px; }
[data-bth-root] .bth-shell.is-display .bth-top .bth-lbl { font-size: 14px; }
[data-bth-root] .bth-shell.is-display .bth-top-name { font-size: 22px; }
[data-bth-root] .bth-shell.is-display .bth-dstep { font-size: 15px; padding: 8px 16px; }
[data-bth-root] .bth-shell.is-display .bth-topbtn { min-height: 44px; font-size: 15px; }
[data-bth-root] .bth-shell.is-display .bth-main { grid-template-columns: minmax(0,1fr) 460px; }
[data-bth-root] .bth-shell.is-display .bth-side { padding: 26px; gap: 20px; }
[data-bth-root] .bth-shell.is-display .bth-side .bth-k { font-size: 14px; }
[data-bth-root] .bth-shell.is-display .bth-stand { grid-template-columns: 34px minmax(0,1fr) 92px 120px; padding: 12px 14px; }
[data-bth-root] .bth-shell.is-display .bth-stand span { font-size: 15px; }
[data-bth-root] .bth-shell.is-display .bth-stand b { font-size: 22px; }
[data-bth-root] .bth-shell.is-display .bth-stand i { font-size: 20px; }
[data-bth-root] .bth-shell.is-display .bth-log { grid-template-columns: 56px minmax(0,1fr); }
[data-bth-root] .bth-shell.is-display .bth-log span { font-size: 14px; }
[data-bth-root] .bth-shell.is-display .bth-log b { font-size: 18px; }
/* the screen makes no move, so no reactions or key hints on it */
[data-bth-root] .bth-shell.is-display .bth-side .bth-sd:has(.bth-keys) { display: none; }
/* the bar: whose turn on the left, the code to scan on the right */
[data-bth-root] .bth-shell.is-display .bth-bar { min-height: 0; padding: 18px 28px; justify-content: space-between; }
[data-bth-root] .bth-shell.is-display .bth-scr-l .bth-bar-l { width: auto; gap: 20px; }
[data-bth-root] .bth-shell.is-display .bth-scr-l .bth-ring60 { transform: scale(1.35); margin: 0 10px; }
[data-bth-root] .bth-shell.is-display .bth-bar-t .bth-k { font-size: 16px; letter-spacing: .14em; }
[data-bth-root] .bth-shell.is-display .bth-bar-t b { font-size: 54px; }
[data-bth-root] .bth-shell.is-display .bth-bar-t small { font-size: 19px; color: var(--bth-ink); opacity: .82; }
[data-bth-root] .bth-scr-r { display: flex; align-items: center; gap: 22px; flex: none; }
[data-bth-root] .bth-qr.bth-scr-qr { width: 150px; height: 150px; padding: 10px; border-radius: 16px; box-shadow: 0 0 0 4px var(--bth-acc-soft); }
[data-bth-root] .bth-scr-code { display: flex; flex-direction: column; gap: 4px; }
[data-bth-root] .bth-scr-code .bth-k { font-size: 13px; }
[data-bth-root] .bth-scr-url { font-family: var(--bth-font-mono); font-size: 20px; font-weight: 700; }
[data-bth-root] .bth-scr-c { font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 56px; line-height: .95; letter-spacing: .06em; color: var(--bth-acc-text); }
/* a phone at a table that is on TV says so */
[data-bth-root] .bth-tvtag { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; margin-left: 6px; border-radius: 999px; background: var(--bth-acc-soft); color: var(--bth-acc-text); font-family: var(--bth-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }

/* ==== THE PHONE AS A CONTROLLER (2026-10-26, ui.mjs paintCtl): with the table on the TV a
   seated phone hides its small board for what is happening to you, the pot, your stack and
   the cards turned so far; the tray under it is the ordinary one ==== */
[data-bth-root] .bth-shell.is-ctl .bth-stagewrap { display: none; }
[data-bth-root] .bth-ctl { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 330px; }
[data-bth-root] .bth-ctl[hidden] { display: none; }
[data-bth-root] .bth-ctl-tv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--bth-acc-soft); font-size: 13px; font-weight: 700; color: var(--bth-acc-text); }
[data-bth-root] .bth-ctl-now { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 18px; background: var(--bth-surf); border: 1px solid var(--bth-line2); }
[data-bth-root] .bth-ctl-now.is-acc { border-color: var(--bth-acc); box-shadow: 0 0 22px var(--bth-acc-soft); }
[data-bth-root] .bth-ctl-now b { font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 34px; line-height: 1; }
[data-bth-root] .bth-ctl-now small { font-size: 14px; color: var(--bth-mute); }
[data-bth-root] .bth-ctl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
[data-bth-root] .bth-ctl-st { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--bth-bg); border: 1px solid var(--bth-line); min-width: 0; }
[data-bth-root] .bth-ctl-st span { font-family: var(--bth-font-mono); font-size: 10px; letter-spacing: .12em; color: var(--bth-mute); }
[data-bth-root] .bth-ctl-st b { font-family: var(--bth-font-mono); font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-ctlback { position: fixed; z-index: 93; right: 12px; top: calc(64px + env(safe-area-inset-top)); min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--bth-acc); color: var(--bth-acc-ink); font-family: var(--bth-font-mono); font-size: 12px; font-weight: 800; box-shadow: 0 6px 18px rgba(0,0,0,.3); }

/* ==== THE NIGHT ON THE BIG SCREEN (2026-10-26, ui.mjs tvRecap): the standings for the room,
   laid out at 1280x720 and scaled to the TV like the join screen ==== */
[data-bth-root] .bth-tvrecap { position: fixed; inset: 0; z-index: 100; background: var(--bth-bg); overflow: hidden; }
[data-bth-root] .bth-tvrecap[hidden] { display: none; }
[data-bth-root] .bth-tvrecap-in { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; margin: -360px 0 0 -640px; padding: 48px 72px; display: flex; flex-direction: column; gap: 18px; transform-origin: 50% 50%; background: radial-gradient(ellipse 60% 60% at 80% 20%, var(--bth-acc-soft), transparent 70%), var(--bth-bg); }
[data-bth-root] .bth-tvrecap-hd { display: flex; justify-content: space-between; }
[data-bth-root] .bth-tvrecap-hd .bth-k { font-size: 16px; }
[data-bth-root] .bth-tvrecap-h { margin: 0; font-family: var(--bth-font-display); font-style: italic; font-weight: 900; font-size: 72px; line-height: .95; }
[data-bth-root] .bth-tvrecap-h span { color: var(--bth-acc-text); }
[data-bth-root] .bth-tvrecap-best { margin: 0; font-size: 24px; }
[data-bth-root] .bth-tvrecap-rows { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow: hidden; }
[data-bth-root] .bth-tvrecap-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 110px 90px 170px 70px 180px; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 14px; background: var(--bth-surf); border: 1px solid var(--bth-line); font-family: var(--bth-font-mono); font-size: 22px; }
[data-bth-root] .bth-tvrecap-row b { font-family: var(--bth-font-body); font-size: 26px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-tvrecap-row.is-hd { background: none; border: 0; padding: 0 18px; font-size: 14px; letter-spacing: .12em; color: var(--bth-mute); }
[data-bth-root] .bth-tvrecap-row:nth-child(2) { border-color: var(--bth-acc); background: var(--bth-acc-soft); }
[data-bth-root] .bth-tvrecap-row .is-up { color: var(--bth-acc-text); font-weight: 800; }
[data-bth-root] .bth-tvrecap-row .is-down { color: var(--bth-bad); }
[data-bth-root] .bth-tvrecap-btns { display: flex; justify-content: flex-end; gap: 14px; }
[data-bth-root] .bth-tvrecap-btns .bth-btn { min-width: 260px; }

/* ==== THE PRIVATE CARDS (2026-10-26): yours beside your seat, a mark on the others, yours in
   the keypad's facts and everyone's in the results ==== */
[data-bth-root] .bth-mine { position: absolute; z-index: 4; max-width: 190px; display: flex; flex-direction: column; gap: 4px; }
[data-bth-root] .bth-mine[hidden] { display: none; }
[data-bth-root] .bth-mine-k { font-family: var(--bth-font-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--bth-acc-text); }
[data-bth-root] .bth-mine-c { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-radius: 8px; background: #FBF8EF; color: #17201B; border-left: 4px solid var(--bth-acc); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
[data-bth-root] .bth-mine-c span { font-family: var(--bth-font-mono); font-size: 9px; letter-spacing: .06em; color: #4B554F; text-transform: uppercase; }
[data-bth-root] .bth-mine-c b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bth-root] .bth-shell.is-desk .bth-mine-k { font-size: 11px; }
[data-bth-root] .bth-shell.is-desk .bth-mine-c b { font-size: 16px; }
[data-bth-root] .bth-shell.is-desk .bth-mine-c span { font-size: 10px; }
[data-bth-root] .bth-hcmark { margin-left: 4px; font-size: 11px; color: var(--bth-mute); white-space: nowrap; }
[data-bth-root] .bth-gp-fact.is-mine { background: var(--bth-acc-soft); border-color: var(--bth-acc); }
[data-bth-root] .bth-room-hc { display: block; white-space: normal; color: var(--bth-mute); }
[data-bth-root] .hw-mine { right: 1cqw; top: 39cqw; width: 19cqw; display: flex; flex-direction: column; gap: .6cqw; opacity: 0; transform: translateY(2cqw); }
[data-bth-root] .hw-mine > span { font-family: var(--bth-font-mono); font-size: 1.6cqw; font-weight: 700; color: var(--bth-acc-text); }
[data-bth-root] .hw-mine div { padding: .6cqw 1cqw; border-radius: .8cqw; background: #FBF8EF; color: #17201B; border-left: .6cqw solid var(--bth-acc); display: flex; flex-direction: column; }
[data-bth-root] .hw-mine i { font-style: normal; font-family: var(--bth-font-mono); font-size: 1.4cqw; color: #4B554F; }
[data-bth-root] .hw-mine b { font-size: 2.2cqw; font-weight: 800; }
[data-bth-root] .on-mine .hw-mine { opacity: 1; transform: none; transition-delay: .4s; }