/* styles.css — the flush game's page.
   Seeded from cards/uth/styles.css: the solver panel, the trainer, the daily
   and the Play table are the same furniture on every card page, so a fix to
   one of those belongs in its siblings too. What is this page's own is at the
   end, under "suits". */
:root {
  --felt: #0b6b3a;
  --felt-dark: #084a28;
  --bg: #0e1116;
  --panel: #171c24;
  --panel-2: #1f2630;
  --ink: #e8edf2;
  --muted: #93a1b0;
  --line: #2a323d;
  --gold: #f0c419;
  --green: #36d07a;
  --red: #ff5d5d;
  --yellow: #ffd24d;
  --accent: #4aa8ff;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #16202b, var(--bg)) fixed;
  color: var(--ink);
  line-height: 1.45;
  padding-bottom: 40px;
}
h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 650; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
button { font: inherit; cursor: pointer; }
code { font-family: var(--mono); font-size: .9em; }

/* ---------- top bar ---------- */
.topbar {
  text-align: center;
  padding: 22px 16px 14px;
  background: linear-gradient(180deg, var(--felt), var(--felt-dark));
  border-bottom: 3px solid var(--gold);
  box-shadow: var(--shadow);
}
.brand { display: flex; gap: .4rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.brand h1 { font-size: 1.6rem; letter-spacing: .3px; }
.brand h1 .muted { font-weight: 400; }
.brand .suit { font-size: 1.25rem; opacity: .92; }
.suit.h, .suit.d, .card.h .rank, .card.d .rank, .card.h .pip, .card.d .pip { color: #ff5b5b; }
.suit.s, .suit.c { color: #0c0f13; }
.tagline { margin: 6px 0 0; color: #d8efe0; font-size: .92rem; }

/* ---------- layout ---------- */
main {
  max-width: 1180px;
  margin: 18px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 16px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.panel > h2 { font-size: 1.05rem; color: var(--gold); }
.analysis { max-width: 1180px; margin: 16px auto; padding: 16px 18px; }
.analysis > h2 { font-size: 1.05rem; color: var(--gold); }

/* ---------- zones / slots ---------- */
.zones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.zone { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.zone-head { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.zone-head small { color: #6f7d8c; }
.clear { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; padding: 1px 8px; font-size: .75rem; }
.clear:hover { color: var(--ink); border-color: var(--muted); }
.slots { display: flex; gap: 6px; flex-wrap: wrap; min-height: 46px; align-items: center; }
.slot-empty { width: 34px; height: 46px; border: 1px dashed #3a4450; border-radius: 6px; }
.slot-empty.flop { border-color: #3a5a48; }

/* ---------- card chips & deck ---------- */
.card {
  width: 34px; height: 46px; border-radius: 6px; background: #f5f7fa; color: #0c0f13;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid #c7ced6; font-weight: 700; user-select: none; position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.card .rank { font-size: .95rem; line-height: 1; }
.card .pip { font-size: .8rem; line-height: 1; }
.slots .card { cursor: pointer; }
.slots .card:hover::after {
  content: "✕"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,80,80,.85); color: #fff; border-radius: 6px; font-size: 1rem;
}
.card.back { background: repeating-linear-gradient(135deg, #2c4a7c, #2c4a7c 3px, #223a63 3px, #223a63 6px); border-color: #3b568c; }

.deck {
  display: grid; grid-template-columns: repeat(13, 1fr); gap: 5px;
  background: var(--felt-dark); padding: 10px; border-radius: 10px; border: 1px solid #0a3b22;
}
.deck .card { width: 100%; height: 38px; }
.deck .card.used { opacity: .26; pointer-events: none; filter: grayscale(.5); }
.deck .card:not(.used):hover { outline: 2px solid var(--gold); transform: translateY(-2px); transition: transform .08s; }

/* ---------- target segmented ---------- */
.target-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented button { background: var(--panel-2); color: var(--muted); border: none; padding: 5px 12px; }
.segmented button.active { background: var(--accent); color: #04121f; font-weight: 650; }

.quick-row { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.quick-row label { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.quick-row select { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.quick-row button:disabled { opacity: .45; cursor: default; }
.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 6px 12px; }
.ghost:hover { border-color: var(--gold); color: var(--gold); }
.ghost:disabled:hover { border-color: var(--line); color: var(--ink); }

/* ---------- decision ---------- */
.rec { font-size: 1.05rem; margin: 4px 0 12px; }
.rec .big { font-size: 1.5rem; font-weight: 750; padding: 2px 12px; border-radius: 8px; }
.rec .big.fold { background: #3a2630; color: var(--red); }
.rec .big.bet { background: #143524; color: var(--green); }
.rec .big.check { background: #2a2f3a; color: var(--accent); }
.actions-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.actions-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.actions-table .a-name { width: 84px; font-weight: 650; }
.actions-table .a-bar { width: 50%; }
.bar { height: 16px; border-radius: 4px; background: var(--panel-2); position: relative; overflow: hidden; }
.bar > span { position: absolute; top: 0; bottom: 0; }
.bar > .pos { background: linear-gradient(90deg,#1d7a4a,var(--green)); left: 50%; }
.bar > .neg { background: linear-gradient(90deg,var(--red),#7a2a2a); right: 50%; }
.bar .mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #5b6675; }
.actions-table .a-ev { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.actions-table tr.best td { background: rgba(54,208,122,.08); }
.actions-table tr.picked td { background: rgba(74, 168, 255, .12); }
.actions-table tr.picked.best td { background: rgba(54, 208, 122, .14); }
.ev-pos { color: var(--green); } .ev-neg { color: var(--red); } .ev-zero { color: var(--yellow); }

.line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--line); font-size: .92rem; }
.line .lbl { color: var(--muted); }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 650; }
.badge.dev { background: #4a3a12; color: var(--yellow); border: 1px solid var(--gold); }
.badge.same { background: #1c2a22; color: var(--green); }
.badge.tie { background: #2a2f3a; color: var(--muted); }
.badge.street { background: #11293f; color: var(--accent); border: 1px solid var(--accent); }
.badge.mc { background: #2a223a; color: #c9a7ff; border: 1px solid #6b4a9a; }
.deviation-box { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #2c2410; border: 1px solid var(--gold); }
.deviation-box .arrow { color: var(--gold); font-weight: 700; }
.placeholder { color: var(--muted); padding: 20px 0; text-align: center; }

/* ---------- vs-dealer probability bar ---------- */
.prob-wrap { margin: 10px 0; }
.prob-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); font-size: .72rem; font-weight: 700; }
.prob-bar > span { display: flex; align-items: center; justify-content: center; color: #06140d; white-space: nowrap; min-width: 0; overflow: hidden; }
.prob-bar .win { background: var(--green); }
.prob-bar .tie { background: #6b7686; color: #fff; }
.prob-bar .lose { background: var(--red); color: #2a0d0d; }
.prob-legend { display: flex; gap: 14px; font-size: .74rem; color: var(--muted); margin-top: 5px; }

.showdown { font-size: 1.05rem; }
.showdown .big { font-weight: 750; padding: 2px 10px; border-radius: 8px; }

/* ---------- analysis ---------- */
.analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.card-box { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.card-box h3 { font-size: .95rem; }
.card-box button { background: var(--accent); color: #04121f; border: none; border-radius: 8px; padding: 7px 14px; font-weight: 600; }
.card-box button:hover { filter: brightness(1.08); }
.card-box button:disabled { opacity: .5; cursor: default; }
.inline-controls { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 6px 0; }
.inline-controls label { display: flex; flex-direction: column; font-size: .78rem; color: var(--muted); gap: 2px; }
.inline-controls input, .inline-controls select { width: 110px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.metric { font-size: 1.4rem; font-weight: 750; margin-top: 10px; font-variant-numeric: tabular-nums; }
.metric small { font-size: .78rem; font-weight: 400; color: var(--muted); display: block; }
#sim-out table, .paytable { width: 100%; border-collapse: collapse; font-size: .85rem; }
#sim-out td, .paytable td { padding: 3px 6px; border-bottom: 1px solid var(--line); }
#sim-out td:last-child, .paytable td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- mode tabs ---------- */
/* .mode-tabs lives in /site.css — shared with the darts and stud apps */
.hidden { display: none !important; }

/* ---------- trainer ---------- */
.trainer-wrap { max-width: 1180px; margin: 18px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }
.trainer-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; }
.t-settings { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.t-settings label { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.t-settings select, .t-settings input[type="number"] { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.t-statline { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.t-statline .chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: .85rem; }
.t-streethead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.t-zone { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.t-lbl { font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
.slots.big .card { width: 48px; height: 64px; }
.slots.big .card .rank { font-size: 1.25rem; }
.slots.big .card .pip { font-size: 1.05rem; }
#trainer .slots .card { cursor: default; }
#trainer .slots .card:hover::after { content: none; }
.t-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0 12px; }
.t-act { padding: 14px 0; font-size: 1.05rem; font-weight: 750; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); }
.t-act:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.t-act.fold:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.t-act:disabled { opacity: .4; cursor: default; }
.t-nav { margin: 0 0 12px; }
#t-deal { background: var(--gold); color: #241c02; border: none; border-radius: 10px; padding: 10px 22px; font-weight: 750; font-size: 1rem; }
#t-deal:hover:not(:disabled) { filter: brightness(1.08); }
#t-deal:disabled { opacity: .55; cursor: default; }
.verdict { font-size: 1.15rem; font-weight: 750; margin-top: 4px; }
.verdict.perfect { color: var(--green); }
.verdict.inaccuracy { color: var(--yellow); }
.verdict.mistake { color: #ffa94d; }
.verdict.blunder { color: var(--red); }
kbd { background: var(--panel-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: .8em; }
.leaks-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.leaks-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: .78rem; padding: 3px 6px; }
.leaks-table td { padding: 4px 6px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }

/* ---------- table zone (the cards other players show you) ---------- */
.zone-table { border-style: dashed; }
.seats { display: flex; gap: 10px; flex-wrap: wrap; min-height: 46px; align-items: center; }
.seat { display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,.18); border-radius: 8px; padding: 3px 7px 3px 4px; }
.seat-no { font-size: .66rem; color: var(--muted); font-family: var(--mono); }
.seat .slots { min-height: 0; gap: 3px; }
.card.sm, .slot-empty.sm { width: 26px; height: 35px; }
.card.sm .rank { font-size: .78rem; }
.card.sm .pip { font-size: .64rem; }
.deck .card.in-table { outline: 1px solid #6b4a9a; opacity: .42; }

/* ---------- collusion ---------- */
.collusion-panel { max-width: 1180px; margin: 16px auto; }
.collusion-panel > h2 { font-size: 1.05rem; color: var(--gold); }
.col-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 6px; }
.col-summary .metric { margin-top: 0; font-size: 1.25rem; }
.col-table td:first-child { color: var(--muted); }
.col-table tr.good td { background: rgba(54,208,122,.07); }
.col-table tr.good td:first-child { color: var(--ink); }
.col-table tr.bad td { background: rgba(255,93,93,.08); }
.card-box.wide { grid-column: 1 / -1; }

/* The outs map: every card that can beat you, with the ones the table is
   holding struck out. One picture instead of a paragraph of probabilities. */
.outs-map { font-family: var(--mono); margin: 10px 0; overflow-x: auto; }
.om-row { display: flex; gap: 3px; align-items: center; margin-bottom: 3px; }
.om-suit { width: 14px; color: var(--muted); font-size: .8rem; }
.om-row.h .om-suit, .om-row.d .om-suit { color: #ff5b5b; }
.om { flex: 1 1 0; min-width: 19px; text-align: center; font-size: .68rem; line-height: 18px; border-radius: 3px; border: 1px solid transparent; }
.om-blank { background: var(--panel-2); color: #4a5563; }
.om-seen { background: #11293f; color: var(--accent); border-color: #24455f; }
.om-live { background: #4a1f1f; color: #ff8f8f; border-color: var(--red); font-weight: 700; }
.om-killed { background: #1c2a22; color: var(--green); border-color: #2f6f4a; text-decoration: line-through; }
.om-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .7rem; color: var(--muted); margin-top: 6px; }
.om-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; border: 1px solid transparent; }

/* ---------- the out list (expandable audit of the count) ---------- */
.outs-detail { margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.outs-detail > summary {
  cursor: pointer; padding: 7px 11px; font-size: .84rem; color: var(--muted);
  list-style: none; border-radius: 10px; user-select: none;
}
.outs-detail > summary::-webkit-details-marker { display: none; }
.outs-detail > summary::before { content: "▸ "; color: var(--accent); }
.outs-detail[open] > summary::before { content: "▾ "; }
.outs-detail > summary:hover { color: var(--ink); }
.outs-detail > summary strong { color: var(--ink); }
.outs-detail.empty { padding: 7px 11px; }
.od-body { padding: 0 11px 9px; }
.od-hint { margin: 0 0 7px; }
.od-table { width: 100%; border-collapse: collapse; }
.od-table td { padding: 4px 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.od-name { color: var(--muted); font-size: .8rem; white-space: nowrap; width: 1%; }
.od-note { display: block; font-size: .68rem; color: #6f7d8c; }
.od-n { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; width: 1%; padding-right: 10px !important; white-space: nowrap; }
.od-cards { display: flex; flex-wrap: wrap; gap: 3px; }
.od-card {
  font-family: var(--mono); font-size: .74rem; line-height: 1; padding: 3px 4px;
  border-radius: 4px; background: #f5f7fa; color: #0c0f13; font-weight: 700; white-space: nowrap;
}
.od-card.h, .od-card.d { color: #c00; }
.od-card.dead { background: #2a323d; color: #6f7d8c; text-decoration: line-through; }

/* ---------- the chart row that decided a spot ---------- */
.rule-box { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--panel-2); border-left: 3px solid var(--accent); }
.rule-box.ok { border-left-color: var(--green); }
.rule-box.miss { border-left-color: var(--red); }
.rule-k { font-size: .62rem; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
.rule-chart { font-weight: 650; margin: 2px 0; }
.rule-why { margin: 0; }

/* ---------- trainer: drill picker, chart mastery ---------- */
.d-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.d-head h2 { margin: 0; }
.drill-seg button { padding: 6px 14px; font-size: .88rem; }
.drill-seg .adv { font-size: .62rem; opacity: .7; text-transform: uppercase; letter-spacing: .4px; }
.drill-blurb { margin: 8px 0 10px; max-width: 78ch; }
.t-check { cursor: pointer; }
.t-check input { accent-color: var(--accent); }
.t-table .t-seats { display: flex; gap: 8px; flex-wrap: wrap; }
.t-seat { display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,.2); border-radius: 8px; padding: 3px 7px 3px 4px; }
.t-seatno { font-size: .64rem; color: var(--muted); font-family: var(--mono); }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.chart-block h3 { font-size: .88rem; color: var(--accent); margin-bottom: 4px; }
.rule-chart-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rule-chart-table td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rule-chart-table tr.weak td { background: rgba(255,93,93,.08); }
.rule-chart-table .rc-act { color: var(--muted); white-space: nowrap; width: 62px; font-size: .76rem; }
.rule-chart-table .rc-bar { width: 56px; }
.rule-chart-table .rc-n { width: 78px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb { display: block; height: 7px; border-radius: 4px; background: #3a2630; overflow: hidden; }
.rb i { display: block; height: 7px; background: linear-gradient(90deg,#1d7a4a,var(--green)); }
.rb-none { color: #4a5563; }
.chart-note { margin: 10px 0 0; }

/* ---------- footer ---------- */
footer { max-width: 1180px; margin: 8px auto 0; padding: 0 18px; }
footer details { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; }
footer summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 12px; }
.foot-grid p { color: var(--muted); font-size: .9rem; }
.foot-grid strong { color: var(--ink); }

@media (max-width: 860px) {
  main { grid-template-columns: 1fr; }
  .trainer-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .deck .card { height: 34px; }
}

/* ---------- DAILY SHOWDOWN ---------- */
#daily { max-width: 900px; margin: 18px auto; padding: 0 16px; font-family: var(--mono); }
.d-bar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-top: 2px solid var(--felt); border-radius: 12px 12px 0 0; background: var(--panel); padding: 8px 14px; }
.d-brand { font-weight: 650; letter-spacing: .5px; }
.d-sep { color: var(--green); }
.d-mod { color: #5f6b78; font-size: .72rem; }
.d-status { margin-left: auto; color: var(--accent); font-size: .72rem; }
.d-body { border: 1px solid var(--line); border-top: none; border-radius: 0 0 12px 12px; background: var(--panel); padding: 16px; }
.d-dim { color: #5f6b78; }
.d-table { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; align-items: flex-start; }
.d-dealer { border-left: 1px solid var(--line); padding-left: 14px; }
.d-tlbl { font-size: .62rem; color: #5f6b78; letter-spacing: .5px; margin-bottom: 5px; }
.d-dealer .d-tlbl { color: #c79; }
.d-cards { display: flex; gap: 5px; }
.d-card { background: #f5f7fa; border: 1px solid #c7ced6; border-radius: 5px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; color: #0c0f13; line-height: 1; font-weight: 700; }
.d-card b { font-size: .95rem; } .d-card i { font-size: .82rem; font-style: normal; }
.d-card.red { color: #d11; }
.d-card.back { background: repeating-linear-gradient(135deg, #2c4a7c, #2c4a7c 3px, #223a63 3px, #223a63 6px); border-color: #3b568c; }
.d-prompt { font-size: .92rem; color: var(--ink); margin: 6px 0 12px; }
.d-prompt strong { color: var(--gold); }
.d-deal { background: var(--gold); color: #241c02; border: none; border-radius: 10px; padding: 11px 22px; font: inherit; font-weight: 650; font-size: 1rem; cursor: pointer; }
.d-deal:hover { filter: brightness(1.08); }
.d-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 0 12px; max-width: 360px; }
.d-act { padding: 13px 0; font: inherit; font-size: 1rem; font-weight: 650; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; }
.d-act:hover { border-color: var(--gold); color: var(--gold); }
.d-act.fold:hover { border-color: var(--red); color: var(--red); }
.d-blotter { font-size: .8rem; color: #5f6b78; line-height: 1.8; min-height: 18px; }
.d-bstreet { color: var(--muted); }
.d-report { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 12px; }
.d-rhead { font-size: .62rem; color: #5f6b78; letter-spacing: .5px; margin-bottom: 8px; }
.d-line { display: flex; align-items: center; gap: 10px; font-size: .9rem; padding: 3px 0; }
.d-lstreet { width: 56px; color: var(--muted); }
.d-lact { width: 52px; color: var(--ink); }
.d-verdict { flex: 1; font-weight: 650; }
.d-verdict.perfect { color: var(--green); } .d-verdict.inaccuracy { color: var(--yellow); } .d-verdict.mistake { color: #ffa94d; } .d-verdict.blunder { color: var(--red); }
.d-evlost { font-variant-numeric: tabular-nums; }
.d-evlost.neg { color: var(--red); } .d-evlost.pos { color: var(--green); }
.d-cap { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.d-k { font-size: .62rem; color: #5f6b78; letter-spacing: .5px; }
.d-capval { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.d-dev { margin-top: 9px; font-size: .86rem; padding: 8px 10px; border-radius: 8px; }
.d-dev.caught { border: 1px solid var(--gold); background: #2c2410; color: var(--gold); }
.d-dev.missed { border: 1px solid var(--red); background: #2a1a1a; color: var(--red); }
.d-dev.neutral { border: 1px solid var(--line); color: var(--muted); }
.d-share { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 12px; }
.d-sqrow { display: flex; align-items: center; gap: 6px; font-size: .9rem; margin-top: 6px; flex-wrap: wrap; }
.d-sq { width: 18px; height: 18px; border-radius: 3px; display: inline-block; }
.d-capmini { color: var(--ink); margin-left: 6px; }
.d-cta { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.d-btn { font: inherit; font-size: .82rem; background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 7px 13px; cursor: pointer; }
.d-btn:hover { border-color: var(--gold); }
.d-btn.gold { background: var(--gold); color: #241c02; border: none; font-weight: 650; }
.d-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.d-chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: .8rem; }
.d-next { font-size: .78rem; color: #5f6b78; }
.d-lb { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 12px; }
.d-lbrow { display: flex; gap: 8px; margin: 6px 0 8px; }
.d-lbrow input { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: .82rem; flex: 0 1 170px; }
.d-lblist { font-size: .82rem; }
.d-lbmeta { color: #5f6b78; font-size: .75rem; margin-bottom: 6px; }
.d-lbentry { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.d-rank { width: 20px; color: #5f6b78; text-align: right; }
.d-lbname { flex: 1; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-lbcap { font-variant-numeric: tabular-nums; color: var(--green); }
.d-lbdev { width: 18px; }
@media (max-width: 520px) { .d-actions { max-width: 100%; } .d-dealer { border-left: none; padding-left: 0; } }

/* ============================================================ PLAY (the table)
   Ported from stud/styles.css by way of cards/uth/ — the Play tabs are
   deliberately the same furniture, so keep them in sync when one moves. The
   UTH additions this table also uses (the
   dealer box, the ante/trips staging toggle, dead-card marks) are at the end. */
#play { max-width: 1180px; margin: 16px auto 0; padding: 0 4px; }
#play .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
#play .kbd { display: inline-block; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font-size: .72rem; color: var(--muted); background: var(--panel-2); font-family: var(--mono); }
#play h2 { font-size: 1.02rem; color: var(--gold); }
.pl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--mono);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(20,80,45,.6), rgba(12,36,23,.5));
  border: 1px solid var(--g-line); border-top: 2px solid var(--felt);
  border-radius: 12px; padding: 9px 15px; box-shadow: var(--g-hi), var(--shadow);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.pl-brand { font-weight: 800; letter-spacing: .5px; }
.pl-sep { color: var(--green); }
.pl-tag { color: #cfe9d8; font-size: .82rem; }
.pl-ethics { margin-left: auto; font-size: .7rem; color: var(--gold); border: 1px solid rgba(240,196,25,.4); background: var(--gold-fill); border-radius: 999px; padding: 3px 10px; }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.pl-rail-col { display: flex; flex-direction: column; gap: 14px; }
.pl-tablewrap { padding: 12px; }
.pl-felt { position: relative; border-radius: 24px; padding: 15px 13px 13px;
  background: radial-gradient(120% 80% at 50% 8%, #0f8a4d 0%, var(--felt) 42%, var(--felt-dark) 100%);
  border: 2px solid #0a3f24; box-shadow: inset 0 0 60px rgba(0,0,0,.45), var(--shadow); }
.pl-felt::after { content: ""; position: absolute; inset: 9px; border-radius: 18px; border: 2px solid rgba(240,196,25,.2); pointer-events: none; }
.pl-seats { position: relative; height: 142px; margin: 30px 0 2px; }
.pl-seat { position: absolute; transform: translate(-50%,-50%); text-align: center; width: 92px; }
.pl-seat .pl-who { font-size: .62rem; color: #bfe7cf; font-family: var(--mono); letter-spacing: .4px; margin-bottom: 3px; white-space: nowrap; }
.pl-seat.active .pl-who { color: var(--gold); }
.pl-mini { display: flex; gap: 3px; justify-content: center; }
.pl-community { display: flex; align-items: flex-end; justify-content: center; gap: 16px; margin: 4px 0; }
.pl-cslot { text-align: center; }
.pl-ctag { font-family: var(--mono); font-size: .6rem; letter-spacing: .5px; color: #bfe7cf; margin-bottom: 5px; }
.pl-cslot.live .pl-ctag { color: var(--gold); }
.pl-hero { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 6px; }
.pl-hero .pl-who { font-family: var(--mono); font-size: .7rem; color: var(--gold); letter-spacing: .5px; }
.pl-hh { display: flex; gap: 8px; }
.pl-bankchip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); color: var(--gold); }
.pl-chip { --base:#e5e7eb; --ring:rgba(15,23,42,.85); --ins:rgba(255,255,255,.92); --lab:#111827;
  width: 46px; height: 46px; border-radius: 999px; border: 3px solid rgba(15,23,42,.92); padding: 0;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: .74rem;
  cursor: pointer; user-select: none; position: relative; transition: transform .07s ease;
  background: radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--base) 92%, #000 8%) 38%, color-mix(in srgb, var(--base) 72%, #000 28%) 100%); }
.pl-chip::before { content:""; position:absolute; inset:2px; border-radius:999px; pointer-events:none;
  background: repeating-conic-gradient(from 0deg, var(--ins) 0deg 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 61% 100%); mask: radial-gradient(circle, transparent 0 60%, #000 61% 100%); opacity:.95; }
.pl-chip::after { content:""; position:absolute; inset:7px; border-radius:999px; pointer-events:none; border:2px dashed var(--ring); opacity:.95; }
.pl-chip span { position:relative; z-index:1; color: var(--lab); text-shadow:0 1px 0 rgba(0,0,0,.25); }
.pl-chip .cur { font-style: normal; }
.pl-chip:disabled { opacity:.4; cursor:not-allowed; filter:grayscale(.35); }
.pl-chip:not(:disabled):hover { transform: translateY(-2px); }
.pl-chip.selected { outline: 2px solid var(--gold); transform: translateY(-2px) scale(1.04); }
.pl-chip.mini { width: 18px; height: 18px; border-width: 2px; }
.pl-chip[data-denom="5"] { --base:#dc2626; --ring:rgba(255,255,255,.92); --ins:rgba(255,255,255,.92); --lab:#fff; }
.pl-chip[data-denom="25"] { --base:#16a34a; --ring:rgba(255,255,255,.92); --ins:rgba(255,255,255,.92); --lab:#fff; }
.pl-chip[data-denom="100"] { --base:#111827; --ring:rgba(248,250,252,.95); --ins:rgba(248,250,252,.95); --lab:#f8fafc; }
.pl-chip[data-denom="500"] { --base:#7c3aed; --ring:rgba(248,250,252,.95); --ins:rgba(248,250,252,.95); --lab:#f8fafc; }
.pl-chip[data-denom="1000"] { --base:#eab308; --ring:rgba(15,23,42,.85); --ins:rgba(15,23,42,.85); --lab:#1a1303; }
/* The chip tray: one row, segment then chips, never wrapping — a tray that
   wraps is a tray that grows, and on a phone it grew over the betting circles. */
.pl-rack { display:flex; flex-wrap:nowrap; gap:10px; justify-content:center; align-items:center; padding:7px 10px; border-radius:14px; background:rgba(0,0,0,.22); border:1px solid rgba(240,196,25,.18); }
.pl-chiprow { display:flex; gap:8px; align-items:center; }
/* The betting circles. Real layouts print a ring for every bet, so these are
   rings: the label printed above, the chips stacked inside, the amount under it
   (the result, once the hand is settled). They SHRINK rather than wrap — wrapping
   puts PLAY on a second row where the sticky dock covers it. */
.pl-spots { --ring: 62px; --chip: 32px; --step: 5px;
  display:flex; justify-content:center; gap:16px; margin-top:12px; flex-wrap:nowrap; }
.pl-spot { flex:0 1 var(--ring); min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; }
.pl-spotlbl { font-family:var(--mono); font-size:.58rem; letter-spacing:.8px; color:rgba(223,238,230,.75); white-space:nowrap; }
.pl-spotpile { width:var(--ring); max-width:100%; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px dashed rgba(240,196,25,.32); background:radial-gradient(circle, rgba(0,0,0,.08), rgba(0,0,0,.24));
  transition:border-color .15s, box-shadow .15s; }
.pl-spotamt { font-family:var(--mono); font-size:.7rem; font-weight:800; color:#ffe27a; min-height:1.2em; line-height:1.2; white-space:nowrap; }
.pl-spot.clickable { cursor:pointer; }
.pl-spot.clickable:hover .pl-spotpile { border-color:var(--gold); }
.pl-spot.active .pl-spotlbl, .pl-spot.built .pl-spotlbl, .pl-spot.target .pl-spotlbl { color:var(--gold); }
/* the circle the tray is filling */
.pl-spot.target .pl-spotpile { border-style:solid; border-color:rgba(240,196,25,.7); }
/* PLAY, while the decision is open */
.pl-spot.active .pl-spotpile { border-style:solid; border-color:var(--gold); box-shadow:0 0 16px rgba(240,196,25,.4); }
/* the showdown, spot by spot */
.pl-spot.won .pl-spotpile { border-style:solid; border-color:var(--green); box-shadow:0 0 14px rgba(54,208,122,.35); }
.pl-spot.won .pl-spotamt { color:var(--green); }
.pl-spot.lost .pl-spotpile { border-style:solid; border-color:rgba(255,93,93,.7); }
.pl-spot.lost .pl-stack { opacity:.35; filter:grayscale(.5); }
.pl-spot.lost .pl-spotamt { color:var(--red); }
.pl-spot.push .pl-spotpile { border-style:solid; border-color:rgba(255,210,77,.55); }
.pl-spot.push .pl-spotamt { color:var(--yellow); }
.pl-stack { position:relative; width:var(--chip); height:calc(var(--chip) + (var(--n, 1) - 1) * var(--step)); }
.pl-chip.stacked { position:absolute; left:0; bottom:calc(var(--i, 0) * var(--step)); width:var(--chip); height:var(--chip); border-width:2px; font-size:.56rem; }
.pl-chip.stacked::after { inset:5px; border-width:1.5px; }
.pl-spot.pl-drop .pl-stack { animation: plDrop .25s ease; }

/* ---- the lobby: what the felt shows between runs ----------------------------
   An overlay, not a block in the flow: the felt is position:relative and this
   covers it, so the table stays where it is while you pick a stake. Without the
   position the whole thing lands under the betting spots and pushes the dock off
   screen. `overflow:auto` because on a phone eight stakes plus the buy-in row is
   taller than the felt.

   stud/play.js carries the same rules, but injects them from JS. Keep the two
   looking alike — the Play tabs are siblings — and if you change one, change the
   other. */
.pl-lobby { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 18px; text-align: center;
  background: rgba(6,28,18,.92); border-radius: 24px; overflow: auto; }
.pl-lobby-banner { font-family: var(--mono); font-size: .86rem; padding: 8px 14px; border-radius: 10px; max-width: 92%; }
.pl-lobby-banner.win { background: rgba(54,208,122,.14); border: 1px solid #1f6e45; color: #cdeede; }
.pl-lobby-banner.loss { background: rgba(255,93,93,.14); border: 1px solid #7a2a2a; color: #ffd6d6; }
.pl-lobby-nw { display: flex; flex-direction: column; align-items: center; }
.pl-lobby-lbl { font-family: var(--mono); font-size: .66rem; letter-spacing: .5px; color: #bfe7cf; }
.pl-lobby-v { font-family: var(--mono); font-weight: 800; font-size: 2.4rem; color: #ffe27a; line-height: 1.1; margin: 2px 0; }

/* A stake button stacks its label over its per-hand cost. Left inline they read
   as one run-together number ("$5$10/hand"), which is how this was spotted. */
.pl-tiers { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; max-width: 560px; }
.pl-tier { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 78px;
  padding: 8px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--ink); cursor: pointer; font-family: var(--mono);
  transition: transform .08s, border-color .12s, box-shadow .12s; }
.pl-tier:not(:disabled):not(.locked):hover { transform: translateY(-2px); border-color: var(--gold); }
.pl-tier.sel { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.pl-tier:disabled, .pl-tier.locked { opacity: .45; cursor: not-allowed; }
.pl-tier.comp { border-color: var(--gold); background: #241c05; min-width: 240px; }
.pl-tier.go { background: var(--gold); color: #231a02; border-color: var(--gold); font-weight: 800; justify-content: center; }
.pl-tier.go:disabled { background: var(--panel-2); color: var(--muted); }
.pl-tier-main { font-weight: 800; font-size: .95rem; }
.pl-tier-sub { font-size: .64rem; color: var(--muted); }

.pl-buyin-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; justify-content: center; max-width: 540px; }
.pl-buyin-row label { font-family: var(--mono); font-size: .72rem; color: #bfe7cf; display: flex; align-items: center; gap: 6px; }
.pl-buyin-row input { width: 120px; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; font: inherit; font-family: var(--mono); font-weight: 700; }
.pl-q { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); border-radius: 8px;
  padding: 7px 11px; font-family: var(--mono); font-size: .72rem; cursor: pointer; }
.pl-q:hover { border-color: var(--gold); color: var(--gold); }
.pl-buyin-hint { width: 100%; font-size: .64rem; color: var(--muted); font-family: var(--mono); }

/* ---- owner (house) controls ---- */
.pl-adm-strip { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center; max-width: 560px; }
.pl-admin { border-color: #5a4a0e; }
.pl-adm-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.pl-adm-row label { font-family: var(--mono); font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: 6px; flex: 1; min-width: 150px; }
.pl-adm-row input { flex: 1; min-width: 80px; width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; font-family: var(--mono); font-weight: 700; }
.pl-adm-btn { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px;
  padding: 6px 10px; font-family: var(--mono); font-size: .72rem; font-weight: 700; cursor: pointer; }
.pl-adm-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.pl-adm-btn:disabled { opacity: .4; cursor: not-allowed; }
.pl-adm-btn.go { background: var(--gold); color: #231a02; border-color: var(--gold); }
.pl-adm-btn.go:disabled { background: var(--panel-2); color: var(--muted); }
/* fixed-height so a changing figure never nudges the buttons above it */
.pl-adm-note { font-family: var(--mono); font-size: .64rem; color: var(--muted); margin-top: 8px; min-height: 3.9em; line-height: 1.3; }
.pl-card { width: 44px; height: 62px; border-radius: 7px; background: linear-gradient(160deg,#fff,#e9eef4); color: #0c0f13;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #c2cbd5;
  font-weight: 800; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.pl-card .r { font-size: 1.02rem; line-height: 1; }
.pl-card .s { font-size: .88rem; line-height: 1.05; }
.pl-card.red { color: #d51f30; }
.pl-card.sm { width: 28px; height: 40px; }
.pl-card.sm .r { font-size: .74rem; }
.pl-card.sm .s { font-size: .62rem; }
.pl-card.big { width: 56px; height: 78px; }
.pl-card.big .r { font-size: 1.28rem; }
.pl-card.big .s { font-size: 1.08rem; }
.pl-card.back { background: repeating-linear-gradient(45deg,#1c3a8a,#1c3a8a 5px,#244aa8 5px,#244aa8 10px); border-color: #2a52c0; }
.pl-card.glow { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(240,196,25,.6); }
.pl-card.flip { animation: plFlip .45s ease both; }
/* Four equal cells, always: Fold and the three raises during a hand, Clear and a
   three-cell Deal between them. A button only ever trades places with the one
   in its own cell, so the row reads the same hand after hand. */
.pl-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 560px; margin: 0 auto; }
.pl-act { border: none; border-radius: 10px; padding: 9px 8px; font-weight: 800; font-family: var(--mono); letter-spacing: .4px;
  min-width: 0; min-height: 48px; transition: transform .08s, filter .12s; }
.pl-act.wide { grid-column: span 3; }
.pl-act.full { grid-column: 1 / -1; }
.pl-act.clear { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-weight: 700; }
@media (hover: hover) { .pl-act.clear:not(:disabled):hover { border-color: var(--gold); color: var(--gold); filter: none; } }
.pl-act:active { transform: translateY(1px); }
.pl-act.raise { background: linear-gradient(180deg,#2fae6a,#1d7a4a); color: #04210f; box-shadow: 0 3px 0 #145334; }
.pl-act.fold { background: linear-gradient(180deg,#ff6b6b,#c83a3a); color: #2a0707; box-shadow: 0 3px 0 #7a2222; }
.pl-act.go { background: linear-gradient(180deg,#ffe27a,var(--gold)); color: #231a02; box-shadow: 0 3px 0 #9a7d0c; }
.pl-act:hover { filter: brightness(1.07); }
.pl-prompt { text-align: center; font-family: var(--mono); font-size: .8rem; line-height: 1.4; color: #cfe9d8; }
/* Every prompt is written into this one child. .pl-prompt is a flex box, and a
   flex container makes each fragment of a sentence its own item — so the slot
   needs exactly one item and normal inline flow inside it. */
.pl-promptbody { width: 100%; }

/* ---- the hand result ----
   Two lines: what beat what with the net, then the stack. Each bet's own result
   is on its circle on the felt. */
.pl-result { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.pl-res-head { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.pl-res-what { font-weight: 700; color: #e8f3ec; }
.pl-res-net { font-family: var(--mono); font-weight: 800; font-size: 1.08rem; white-space: nowrap; }
/* Always rendered, so two hands in a row read at the same height. */
.pl-res-foot { font-size: .7rem; color: var(--muted); min-height: 1.3em; line-height: 1.3; }
.pl-fb { border-radius: 10px; padding: 7px 12px; font-size: .8rem; line-height: 1.35; display: none; text-align: center; }
.pl-fb.show { display: block; }
.pl-fb.good { background: rgba(54,208,122,.12); border: 1px solid #1f6e45; }
.pl-fb.warn { background: rgba(255,210,77,.1); border: 1px solid #7a6a1e; }
.pl-fb.bad { background: rgba(255,93,93,.12); border: 1px solid #7a2a2a; }
.pl-hudhead { display: flex; align-items: center; justify-content: space-between; }
.pl-hudbtns { display: flex; gap: 6px; align-items: center; }
.pl-buyin { background: rgba(240,196,25,.1); border: 1px solid var(--gold); color: var(--gold); border-radius: 6px; padding: 1px 9px; font-size: .75rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.pl-buyin:hover { background: rgba(240,196,25,.2); }
.pl-bankroll { display: flex; align-items: baseline; gap: 10px; }
.pl-bankroll .v { font-family: var(--mono); font-size: 2rem; font-weight: 800; }
.pl-bankroll .u { color: var(--muted); font-size: .82rem; }
#pl-bank-sub { font-size: .78rem; color: var(--muted); }
#pl-bank-sub b { color: var(--ink); }
.pl-money { color: var(--gold); }
.pl-spark { width: 100%; height: 52px; margin-top: 6px; display: block; }
/* Three across: eight stats in three short rows rather than four tall ones. */
.pl-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.pl-kpi { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; min-width: 0; }
.pl-kpi .k { font-size: .6rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-kpi .val { font-family: var(--mono); font-size: .98rem; font-weight: 750; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-kpi.wide { grid-column: span 2; }
.pl-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
/* The pay-table pickers are rendered into one host. `display: contents` hands
   its children straight to the .pl-controls grid above, so each picker is a cell. */
#pl-paytables { display: contents; }
.pl-ctl { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: var(--ink); min-width: 0; }
.pl-ctl.pl-seatctl { grid-column: 1 / -1; }
.pl-ctl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pl-ctl-head b { font-size: 1.05rem; color: var(--gold); }
.pl-ctl.pl-seatctl input[type=range] { width: 100%; margin: 2px 0 0; }
.pl-ctl select { width: 100%; }
.pl-pays { font-size: .68rem; color: var(--muted); line-height: 1.35; }
#play input[type=range] { accent-color: var(--gold); }
/* The pay-table pickers were the platform default — white boxes on a dark panel.
   Heads Up adds two more of them, so three system selects sat in the middle of
   the edge readout. */
#play select { background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 9px; font: inherit; font-family: var(--mono); font-size: .74rem; cursor: pointer; }
#play select:hover { border-color: var(--gold); }
#play select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pl-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pl-seg button { background: var(--panel-2); color: var(--muted); border: none; padding: 5px 10px; font-size: .76rem; font-family: var(--mono); }
.pl-seg button.on { background: var(--accent); color: #04121f; font-weight: 700; }
.pl-act .pl-betsub { display:block; font-size:.62rem; font-weight:600; opacity:.85; }
.pl-act .small { font-size:.62rem; font-weight:600; }
.pl-act:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }
.pl-act:disabled:hover { filter:none; }
.pl-gauge { margin-top: 12px; }
.pl-gtrack { position: relative; height: 12px; border-radius: 999px; overflow: visible;
  background: linear-gradient(90deg,#7a2a2a,#c83a3a 35%,#caa61e 60%,#1d7a4a 100%); }
.pl-gtrack .zero { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #cfe9d8; opacity: .7; }
.pl-gmark { position: absolute; top: -7px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 9px solid var(--ink); transform: translateX(-50%); transition: left .35s cubic-bezier(.2,.8,.2,1); }
.pl-glabels { display: flex; justify-content: space-between; font-size: .64rem; color: var(--muted); margin-top: 6px; font-family: var(--mono); }
.pl-kelly { margin-top: 8px; font-size: .78rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.pl-deadtray { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; min-height: 30px; }
.pl-lbtabs { display: flex; gap: 6px; font-family: var(--mono); font-size: .73rem; margin-bottom: 8px; }
.pl-lbtabs button { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 4px 10px; }
.pl-lbtabs button.on { color: var(--gold); border-color: var(--gold); }
.pl-lbmeta { font-size: .72rem; color: var(--muted); margin-bottom: 6px; font-family: var(--mono); }
.pl-lbrow { display: grid; grid-template-columns: 24px 1fr auto auto auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; font-size: .82rem; }
.pl-lbrow + .pl-lbrow { margin-top: 2px; }
.pl-lbrow .rk { font-family: var(--mono); color: var(--dim, #5f6b78); text-align: right; }
.pl-lbrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-lbrow .eff { font-family: var(--mono); font-weight: 700; }
.pl-lbrow.you { background: rgba(74,168,255,.12); border: 1px solid rgba(74,168,255,.4); }
#play .tier { font-size: .6rem; padding: 1px 6px; border-radius: 999px; }
#play .tier.gm { background: #3a2456; color: #cdb4ff; }
#play .tier.dia { background: #13384a; color: #7fd3ff; }
#play .tier.gold { background: #3a3010; color: var(--gold); }
#play .tier.sil { background: #2a2f3a; color: #cdd6e0; }
.pl-lbpost { display: flex; gap: 6px; margin-top: 10px; }
.pl-lbpost input { flex: 1; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font: inherit; }
.pl-theory { margin-top: 14px; }
.pl-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
#play .pill { font-family: var(--mono); font-size: .72rem; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; background: var(--panel-2); }
.pl-curve { width: 100%; height: 130px; display: block; margin-top: 6px; }
.pl-winfloat { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); font-family:var(--mono); font-weight:900; font-size:1.7rem; pointer-events:none; opacity:0; z-index:5; }
.pl-winfloat.show { animation: plFloat 1.1s ease forwards; }
.pl-winfloat.win { color:var(--green); text-shadow:0 2px 14px rgba(54,208,122,.6); }
.pl-winfloat.loss { color:var(--red); }
.pl-winfloat.push { color:var(--yellow); }
.pl-felt.pl-flash-win { animation: plFlashWin .65s ease; }
.pl-felt.pl-flash-loss { animation: plFlashLoss .5s ease; }
/* stud/styles.css defines these; this page never did, so the win float, the
   felt flash and the chip drop were all silently doing nothing. */
@keyframes plFlip { from { transform: rotateY(90deg); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes plFloat { 0% { opacity:0; transform:translate(-50%,-30%) scale(.7); } 22% { opacity:1; transform:translate(-50%,-58%) scale(1.12); } 75% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-95%) scale(1); } }
@keyframes plFlashWin { 30% { box-shadow: inset 0 0 70px rgba(54,208,122,.55), var(--shadow); } }
@keyframes plFlashLoss { 30% { box-shadow: inset 0 0 70px rgba(255,93,93,.42), var(--shadow); } }
@keyframes plDrop { 0% { transform:translateY(-16px); opacity:.4; } 100% { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .pl-card.flip, .pl-felt.pl-flash-win, .pl-felt.pl-flash-loss, .pl-winfloat.show, .pl-spot.pl-drop .pl-stack {animation: none !important;}
  .pl-winfloat.show {opacity:1;}
}
@media (max-width: 860px) {
  .pl-grid {grid-template-columns: minmax(0, 1fr);}
  .pl-seat {position: static !important; transform: none !important; width: auto; flex: 0 0 auto;}
}
.t-act:active, .d-act:active, .pl-act:active, .pl-chip:active,
.d-deal:active, #t-deal:active, .ghost:active, .d-btn:active {
  transform: scale(.96);
}
@media (prefers-reduced-motion: reduce) {
  .t-act:active, .d-act:active, .pl-act:active, .pl-chip:active,
  .d-deal:active, #t-deal:active, .ghost:active, .d-btn:active {transform: none;}
}
/* Key hints are for a keyboard; on a touch screen they are a line of noise. */
@media (hover: none) { #play .pl-keys {display: none;} }
@media (max-width: 640px) {
  #play {padding: 0;}
  #play .panel.pl-tablewrap {border-radius: 0 0 14px 14px; padding: 10px;}
  .pl-bar {border-radius: 0;}
  .pl-tag {display: none;}
  .pl-dock {position: sticky;
    bottom: 0;
    z-index: 30;
    gap: 6px;
    margin: 10px -10px -11px;           /* bleed over the panel's own padding */
    padding: 7px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--g-sheen), rgba(16, 22, 18, .78);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border-top: 1px solid rgba(240, 196, 25, .22);
    border-radius: 14px 14px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 -10px 30px rgba(0, 0, 0, .45);}
  .pl-prompt {font-size: .76rem;}
  .pl-res-net {font-size: 1rem;}
  .pl-res-foot {font-size: .66rem;}
  .pl-fb {font-size: .74rem; padding: 6px 10px;}
  /* The tray's chips size to what the row has left after the segment, so the
     row never wraps at any phone width. */
  .pl-rack {gap: 6px; padding: 5px 6px;}
  .pl-chiprow {gap: 4px; flex: 1 1 auto; min-width: 0; justify-content: center;}
  .pl-chiprow .pl-chip {flex: 0 1 38px; width: auto; height: auto; aspect-ratio: 1; min-width: 28px; font-size: .62rem; border-width: 2px;}
  .pl-chiprow .pl-chip::after {inset: 5px; border-width: 1.5px;}
  .pl-chiprow .pl-chip .cur {display: none;}
  #play .pl-stageseg button {padding: 8px 6px; font-size: .58rem; letter-spacing: .2px;}
  .pl-actions {gap: 6px;}
  .pl-act {min-height: 50px;}
  .pl-felt {padding: 14px 8px 11px;}
  .pl-card {width: 40px; height: 56px;}
  .pl-card .r {font-size: .92rem;}
  .pl-spots {--ring: 50px; --chip: 28px; --step: 4px; gap: 12px; margin-top: 8px;}
  .pl-grid {margin-top: 10px; gap: 10px;}
  .pl-bankroll .v {font-size: 1.6rem;}
}

/* ---------- felt furniture from the UTH table (dealer box, staging, dead cards) ---------- */
/* The dealer sits opposite you. Stud has no dealer hand to show — here the
   showdown turns two cards over and whether they QUALIFY decides the ante, so
   the box gets its own row above the board rather than being tucked in a seat. */
.pl-dealerbox { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pl-dealerbox .pl-who { font-family: var(--mono); font-size: .7rem; color: #ffb3b3; letter-spacing: .5px; }

/* Which circle the chip rack is filling. Ante and Trips are staged separately
   because the blind silently matches the ante — tapping a chip has to be
   unambiguous about which of the two it is going into. */
.pl-stageseg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-right: 6px; }
.pl-stageseg button { background: var(--panel-2); color: var(--muted); border: none; padding: 6px 11px; font: inherit; font-size: .74rem; font-family: var(--mono); cursor: pointer; }
.pl-stageseg button.on { background: var(--accent); color: #04121f; font-weight: 700; }
.pl-stageseg button:disabled { opacity: .45; cursor: default; }

/* Checking is neither a raise nor a fold, so it gets its own weight. */
.pl-act.check { background: #22303f; border-color: #33506b; color: #cfe4ff; }
.pl-act.check:hover:not(:disabled) { border-color: var(--accent); color: #fff; }

/* A shown card that is one of your outs — the dealer cannot have it. */
/* position:relative matters — .pl-card is not positioned, so without it the
   ::after anchors to the nearest positioned ancestor and covers the whole panel
   (invisible, but it swallows every click behind it). pointer-events:none is
   belt and braces. */
.pl-card.killed { position: relative; outline: 2px solid var(--green); }
.pl-card.killed::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, transparent 46%, var(--green) 46%, var(--green) 54%, transparent 54%); opacity: .75; }

/* Five seats in a row rather than stud's seven-seat oval — see renderSeats(). */
#play .pl-seats { height: auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
#play .pl-seat { position: static; transform: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
#play .pl-seat.solo { color: #bfe7cf; font-family: var(--mono); font-size: .68rem; padding: 10px 0; }


/* ============================================================ suits
   What this page has that the other card pages don't: seven-card hands, the
   four-way dealer outcome, the unseen-per-suit count, and the Chart tab. */

/* ---- seven-card hands ---- */
/* The cards that make the flush that plays. An outline rather than a colour,
   so a red or black suit reads the same either way. */
.card.flushcard { box-shadow: 0 0 0 2px var(--gold), 0 1px 2px rgba(0,0,0,.3); }
.card.xs { width: 20px; height: 28px; border-radius: 4px; }
.card.xs .rank { font-size: .64rem; }
.card.xs .pip { font-size: .54rem; }
.seat .slots .card.sm, .seat .slots .slot-empty.sm { width: 24px; height: 33px; }
.seats { gap: 8px; }
.slots.big .card.flushcard { box-shadow: 0 0 0 2px var(--gold), 0 2px 6px rgba(0,0,0,.35); }

/* ---- the dealer's four outcomes ---- */
.prob-bar .nq { background: #4a7fb0; color: #04121f; }
.prob-legend { flex-wrap: wrap; }
.prob-legend .lg { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.prob-legend .lg.win { background: var(--green); } .prob-legend .lg.nq { background: #4a7fb0; }
.prob-legend .lg.tie { background: #6b7686; } .prob-legend .lg.lose { background: var(--red); }

/* ---- unseen cards per suit, and M ---- */
.suitcount { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; margin: 8px 0; font-family: var(--mono); }
.sc-cell, .sc-m { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.sc-cell b, .sc-m b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.sc-cell.max { border-color: var(--gold); }
.sc-cell.max b { color: var(--gold); }
.sc-suit { font-size: .9rem; line-height: 1; color: var(--ink); }
.sc-suit.h, .sc-suit.d { color: #ff5b5b; }
.sc-k { font-size: .56rem; color: var(--muted); letter-spacing: .3px; }
.sc-m { flex-direction: row; gap: 6px; align-items: baseline; margin-left: auto; align-self: center; }

/* ---- trainer: four action buttons, never reflowing ---- */
.t-actions4 { grid-template-columns: repeat(4, 1fr); }
.t-act.picked { outline: 2px solid var(--accent); }
.t-act.best { border-color: var(--green); color: var(--green); }
.t-seat .card { margin-right: 1px; }
.t-feedback { min-height: 60px; }
@media (max-width: 520px) { .t-actions4 { grid-template-columns: repeat(2, 1fr); } }

/* ---- daily ---- */
.d-actions4 { grid-template-columns: repeat(4, 1fr); max-width: 520px; }
.d-act:disabled { opacity: .35; cursor: default; }
.d-act:disabled:hover { border-color: var(--line); color: var(--ink); }
.d-seats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.d-hand { margin-bottom: 4px; }
.d-hand-report { border-bottom: 1px dashed var(--line); padding: 4px 0 6px; }
.d-reveal { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: .76rem; }
.d-reveal .d-dim { margin: 0 3px 0 6px; }
.d-reveal b { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .d-actions4 { grid-template-columns: repeat(2, 1fr); } }

/* ---- the Play table, with seven-card hands ---- */
#play .pl-hh { gap: 5px; flex-wrap: nowrap; }
#play .pl-hero { margin-top: 0; }
#play .pl-dealerbox .pl-card { width: 36px; height: 50px; }
#play .pl-dealerbox .pl-card .r { font-size: .86rem; }
#play .pl-dealerbox .pl-card .s { font-size: .74rem; }
/* The rules, printed on the cloth. Quiet on purpose: they are read once. */
.pl-print { text-align: center; font-family: var(--mono); font-size: .56rem; line-height: 1.35; letter-spacing: 1.1px;
  text-transform: uppercase; color: rgba(240,196,25,.58); margin: 7px 0; }
.pl-print.top { color: rgba(223,238,230,.72); margin: 0 0 7px; }
.pl-print b { font-weight: 800; letter-spacing: .4px; }
/* The seats are fanned hands, the way seven cards sit in a hand: each card
   overlaps the next and shows its corner. Thirty-five face-up tiles in a row
   read as one strip; five fanned hands read as five players, and fit one row on
   a laptop and two on a phone where the tiles took three. */
#play .pl-seats { gap: 8px 14px; margin: 0 0 6px; }
#play .pl-seat { gap: 2px; padding: 3px 7px 6px; border-radius: 9px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
#play .pl-seat .pl-who { font-size: .54rem; margin-bottom: 0; color: rgba(191,231,207,.8); }
#play .pl-seat.active .pl-who { color: var(--gold); }
#play .pl-seat.solo { background: none; box-shadow: none; }
#play .pl-mini { gap: 0; }
.pl-card.xs { flex: none; width: 21px; height: 30px; border-radius: 4px; justify-content: flex-start; align-items: flex-start;
  padding: 2px 0 0 2px; box-shadow: -1px 0 2px rgba(0,0,0,.28); }
.pl-card.xs + .pl-card.xs { margin-left: -8px; }
.pl-card.xs .r { font-size: .62rem; line-height: 1; }
.pl-card.xs .s { font-size: .54rem; line-height: 1.1; }
.pl-glabels { position: relative; }
#pl-gmid { position: absolute; transform: translateX(-50%); }
.pl-gmark.fav { border-top-color: var(--green); }
#play .pill.on { border-color: var(--gold); }
#play .pl-deadtray .suitcount { width: 100%; }
/* The lobby is an overlay on the felt, so the felt has to be tall enough to show
   it — with no seats showing the table alone is shorter than the stake picker. */
.pl-felt.is-lobby { min-height: 390px; }
#play .pl-dock.is-lobby .pl-fb, #play .pl-dock.is-lobby .pl-rack, #play .pl-dock.is-lobby .pl-actions { display: none; }
@media (max-width: 640px) {
  #play .pl-hh { gap: 3px; }
  #play .pl-hero .pl-card.big { width: 40px; height: 56px; }
  #play .pl-hero .pl-card.big .r { font-size: .98rem; }
  #play .pl-hero .pl-card.big .s { font-size: .82rem; }
  #play .pl-dealerbox .pl-card { width: 30px; height: 42px; }
  #play .pl-seats { gap: 6px 8px; }
  #play .pl-seat { padding: 2px 5px 4px; }
  .pl-card.xs { width: 20px; height: 28px; }
  .pl-card.xs + .pl-card.xs { margin-left: -9px; }
  .pl-card.xs .r { font-size: .56rem; }
  .pl-card.xs .s { font-size: .5rem; }
  .pl-print { font-size: .5rem; letter-spacing: .7px; margin: 6px 0; }
  .pl-print.top { margin: 0 0 6px; }
  /* Eight stakes in two rows of four, and Sit on a row of its own. */
  .pl-felt.is-lobby { min-height: 410px; }
  .pl-lobby { gap: 10px; padding: 12px; }
  .pl-lobby-v { font-size: 2rem; }
  .pl-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .pl-tier { min-width: 0; padding: 7px 4px; }
  .pl-tier-main { font-size: .86rem; }
  .pl-tier-sub { font-size: .58rem; white-space: nowrap; }
  .pl-tier.comp { min-width: 0; width: 100%; }
  .pl-buyin-row input { width: 96px; }
  #pl-sit { flex-basis: 100%; min-height: 46px; }
}

/* ---- the Chart tab ---- */
.chart-wrap { max-width: 1180px; margin: 18px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }
.chart-wrap .panel > h2 { font-size: 1.05rem; color: var(--gold); }
.ch-rules td { vertical-align: middle; }
.ch-act { font-weight: 700; white-space: nowrap; }
.ch-act.raise { color: var(--green); } .ch-act.fold { color: var(--red); }
.ch-fold { color: var(--red); }
.ch-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.ch-kpi { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.ch-kpi .v { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ch-kpi .k { font-size: .72rem; color: var(--muted); }
.ch-scroll { overflow-x: auto; }
.ch-return td, .ch-return th, .ch-seats td, .ch-seats th { white-space: nowrap; }

/* The ten-high grid: one hue, deeper as the exact player raises more of a
   flush (a magnitude, so a sequential scale); an outline where the chart
   raises. The share is printed in every cell, so nothing rests on colour. */
.ten-wrap { overflow-x: auto; }
.ten-grid { border-collapse: separate; border-spacing: 2px; font-family: var(--mono); }
.ten-grid th { font-size: .72rem; color: var(--muted); text-align: right; padding-right: 6px; white-space: nowrap; font-weight: 600; }
.ten-cell { width: 40px; height: 38px; text-align: center; border-radius: 5px; border: 1px solid var(--line);
  background: rgba(57, 135, 229, calc(0.08 + 0.8 * var(--share))); }
.ten-cell.raise { border: 2px solid var(--green); }
.ten-cell .tc-r { display: block; font-weight: 700; font-size: .8rem; }
.ten-cell .tc-s { display: block; font-size: .64rem; color: #dce6f0; }
.ten-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .72rem; color: var(--muted); margin: 6px 0; }
.ten-legend .tl { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.ten-legend .tl.raise { border: 2px solid var(--green); }
.ten-legend .tl.fill { background: linear-gradient(90deg, rgba(57,135,229,.12), rgba(57,135,229,.88)); }

/* The edge curve. Recessive grid, 2px lines, 8px markers, a tooltip per x. */
.cv-legend { display: flex; gap: 16px; font-size: .78rem; color: var(--muted); margin: 4px 0 6px; }
.cv-legend i, .cv-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
/* Capped, because a viewBox scales its text with it: past ~760px wide the labels
   are bigger than the page's own and the end labels run off the right. */
.cv-wrap { position: relative; max-width: 760px; }
svg.cv { width: 100%; height: auto; display: block; }
svg.cv .cv-grid { stroke: #2a323d; stroke-width: 1; }
svg.cv .cv-zero { stroke: #5b6675; stroke-width: 1; stroke-dasharray: 3 3; }
svg.cv .cv-tick { fill: #93a1b0; font-size: 10px; font-family: var(--mono); }
svg.cv .cv-lbl { fill: #c8d2dc; font-size: 11px; font-family: var(--mono); }
svg.cv .cv-dot { stroke: var(--panel); stroke-width: 2; }
svg.cv .cv-hit { fill: transparent; cursor: crosshair; }
svg.cv .cv-cross { stroke: #93a1b0; stroke-width: 1; opacity: .6; pointer-events: none; }
.cv-tip { position: absolute; top: 4px; transform: translateX(-50%); background: var(--panel-2); border: 1px solid #3a4450;
  border-radius: 8px; padding: 6px 9px; font-size: .74rem; font-family: var(--mono); pointer-events: none; opacity: 0;
  transition: opacity .12s; white-space: nowrap; box-shadow: var(--shadow); }
.cv-tip.show { opacity: 1; }

/* ---- the dock: four rows, each a fixed height ----
   UTH's dock holds its buttons still by growing UPWARD, which works while it is
   pinned to the bottom of a phone screen and not when the page is short enough
   that it sits in the flow — then the verdict and the hand result push "Deal
   next" down under the thumb that just tapped "Raise". A hand here is two taps,
   so that moment comes every hand. Reserve the space instead: the verdict is
   always laid out (hidden, not removed) and the prompt is always as tall as the
   hand result it will hold.

   The first version reserved for the worst case of everything at once — a result
   with a column per bet over a three-line verdict over a two-row tray — and came
   to 381px of an 844px phone, sitting on the betting circles. Now the per-bet
   results are on the circles, the tray is one row and the copy is held to two
   lines, so each slot is the size of what it actually holds. */
.pl-dock { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
#play .pl-prompt { min-height: 42px; display: flex; align-items: center; justify-content: center; }
#play .pl-fb { display: flex; align-items: center; justify-content: center; visibility: hidden; min-height: 50px; }
#play .pl-fb.show { visibility: visible; }
/* ...and the result itself is a fixed shape: neither line wraps, so the
   prompt's height is the same hand after hand whatever the cards said. */
#play .pl-res-head { flex-wrap: nowrap; max-width: 100%; }
#play .pl-res-what, #play .pl-res-foot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
  #play .pl-prompt { min-height: 40px; }
  #play .pl-fb { min-height: 46px; }
  #play .pl-actions .pl-act { padding: 8px 4px; font-size: .84rem; }
}

/* Seven big cards in one row on a phone: a hand that wraps reads as two hands. */
@media (max-width: 520px) {
  .slots.big { gap: 4px; flex-wrap: nowrap; }
  .slots.big .card { width: 40px; height: 54px; }
  .slots.big .card .rank { font-size: 1.05rem; }
  .slots.big .card .pip { font-size: .9rem; }
}