: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; }
}

/* ---------- RANGE board (HOLD//TERMINAL) ---------- */
#range { max-width: 1180px; margin: 18px auto; padding: 0 16px; position: relative; }
.rng-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; font-family: var(--mono); }
.rng-brand { font-weight: 650; letter-spacing: .5px; }
.rng-sep { color: var(--green); }
.rng-mod { color: #5f6b78; font-size: .72rem; }
.rng-status { margin-left: auto; color: var(--accent); font-size: .72rem; }
.rng-tag { color: #5f6b78; font-size: .66rem; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.rng-body { display: flex; gap: 14px; flex-wrap: wrap; border: 1px solid var(--line); border-top: none; border-radius: 0 0 12px 12px; background: var(--panel); padding: 14px; }
.rng-gridcol { flex: 1 1 420px; max-width: 560px; }
.rng-svgwrap svg { width: 100%; height: auto; }
.rng-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .7rem; color: var(--muted); margin-top: 6px; align-items: center; }
.rng-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 3px; box-sizing: border-box; }
.rng-side { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); }
.rng-card { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
.rng-k { font-size: .62rem; color: #5f6b78; letter-spacing: .5px; }
.rng-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 4px; }
.rng-seg button { background: var(--panel-2); color: var(--muted); border: none; padding: 4px 10px; font-family: var(--mono); font-size: .72rem; }
.rng-seg button.active { background: var(--accent); color: #04121f; font-weight: 650; }
.rng-edge { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.rng-edgeval { font-size: 1.4rem; font-weight: 650; color: var(--red); font-variant-numeric: tabular-nums; }
.rng-sub { font-size: .72rem; color: var(--muted); margin-top: 3px; }
.rng-gold { color: var(--gold); }
.rng-dim { color: #5f6b78; }
.rng-tape { font-size: .72rem; line-height: 1.7; color: var(--muted); min-height: 30px; }
.rng-pop { position: absolute; display: none; z-index: 30; background: var(--panel-2); border: 1px solid #3a4450; border-radius: 9px; padding: 8px 10px; width: 210px; box-shadow: var(--shadow); font-family: var(--mono); font-size: .72rem; pointer-events: none; }
.rng-pophead { color: var(--ink); font-weight: 650; margin-bottom: 5px; }
.rng-bara { display: flex; align-items: center; gap: 5px; margin: 2px 0; }
.rng-track { flex: 1; height: 8px; background: var(--bg); border-radius: 2px; overflow: hidden; }
.rng-track span { display: block; height: 8px; }
.rng-bv { width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.rng-best { color: var(--ink); }
.rng-flip { color: var(--gold); margin-top: 4px; }
.rng-prov2 { color: #5f6b78; font-size: .66rem; margin-top: 5px; }

/* ---------- 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 — the two Play tabs are deliberately the same
   furniture, so keep them in sync when either moves. UTH-only additions (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 { display: flex; flex-direction: column; align-items: center; }   /* a flex column, not inline cards: a face-down card has no text baseline, so inline it picked up a descender gap and the board row shrank the moment the river turned */
.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: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 — Heads Up
   lays out five, and wrapping puts PLAY on a second row where the sticky dock
   covers it. Same rules as cards/suits/ and cards/stud/. */
.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); }
.pl-spot.target .pl-spotpile { border-style:solid; border-color:rgba(240,196,25,.7); }
.pl-spot.active .pl-spotpile { border-style:solid; border-color:var(--gold); box-shadow:0 0 16px rgba(240,196,25,.4); }
.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-chip .cur { font-style: normal; }
.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: Clear and a three-cell Deal between hands, and a
   street's two choices two cells each during one. A button only ever trades
   places with the one in its own cells, so the row reads the same every street. */
.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.half { grid-column: span 2; }
.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 and why anything
   pushed. 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-money { color: var(--gold); }
.pl-spark { width: 100%; height: 52px; margin-top: 6px; display: block; }
#pl-bank-sub { font-size: .78rem; color: var(--muted); }
#pl-bank-sub b { color: var(--ink); }
/* 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 rule set decides which pay-table pickers exist, so play.js renders them
   into one host. `display: contents` hands its children straight to .pl-controls
   above — otherwise all three selects are a single flex item stacked with no gap,
   and the bad-beat picker runs into the Trips Plus label under it. */
#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, .pl-ctl.wide { 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; }
.pl-ctl .row { display: flex; gap: 6px; align-items: center; }
#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);}
}
@media (max-width: 420px) {
  .pl-community {gap: 9px;}
  .pl-card.big {width: 48px; height: 68px;}
}
.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-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;}
  .pl-actions {gap: 6px;}
  .pl-act {min-height: 50px;}
  .pl-felt {padding: 14px 8px 11px;}
  .pl-community {gap: 8px;}
  .pl-card {width: 40px; height: 56px;}
  .pl-card .r {font-size: .92rem;}
  .pl-card.big {width: 46px; height: 64px;}
  .pl-card.big .r {font-size: 1.1rem;}
  .pl-card.big .s {font-size: .92rem;}
  .pl-card.sm {width: 24px; height: 34px;} .pl-card.sm .r {font-size: .7rem;} .pl-card.sm .s {font-size: .58rem;}
  /* a seat's two cards overlap a little, so five seats sit in one row */
  #play .pl-mini {gap: 0;} #play .pl-mini .pl-card.sm + .pl-card.sm {margin-left: -5px; box-shadow: -1px 0 3px rgba(0,0,0,.3);}
  .pl-spots {--ring: 50px; --chip: 28px; --step: 4px; gap: 10px; margin-top: 8px;}
  .pl-grid {margin-top: 10px; gap: 10px;}
  .pl-bankroll .v {font-size: 1.6rem;}
  /* The board is five cards and the dealer two: a touch smaller than the
     hero's, so the felt keeps to a phone screen. */
  #play .pl-community .pl-card {width: 36px; height: 50px;}
  #play .pl-dealerbox .pl-card {width: 34px; height: 48px;}
  #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;}
  /* the board's FLOP / TURN / RIVER tags: the cards say which is which, and the
     live one glows; on a phone the line is worth more as felt */
  #play .pl-ctag {display: none;}
}

/* ---------- UTH-only felt furniture ---------- */
/* 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; flex: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.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 of panels — see renderSeats(). */
#play .pl-seats { height: auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 8px; }
#play .pl-seat { position: static; transform: none; width: auto; display: flex; flex-direction: column; align-items: center; 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; color: #bfe7cf; font-family: var(--mono); font-size: .68rem; padding: 8px 0; }

/* 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; }
#pl-felt-pays { margin-bottom: 0; }

/* ---- the dock: four rows, each a fixed height ----
   Same rule as cards/suits/ and cards/stud/: the verdict is always laid out
   (hidden, not removed) and the prompt is always as tall as the hand result it
   will hold, so nothing above the buttons can push them. This dock used to
   grow upward instead, which holds the buttons still only while it is pinned
   to the bottom of a phone — on a laptop, raising pre-flop pushed "Deal next"
   112px down the page. */
.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; }
#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%; }
/* In the lobby the dock has nothing but the prompt; the felt holds the stake
   picker as an overlay, so it has to be tall enough to show it. */
#play .pl-dock.is-lobby .pl-fb, #play .pl-dock.is-lobby .pl-rack, #play .pl-dock.is-lobby .pl-actions { display: none; }
.pl-felt.is-lobby { min-height: 390px; }
@media (max-width: 640px) {
  /* A UTH result can owe two explanations (no-qualify, a pushed or bad-beat
     second bet), so on a phone its foot gets two lines and the slot is sized for them. */
  #play .pl-prompt { min-height: 52px; }
  #play .pl-res-foot { white-space: normal; min-height: 2.6em; font-size: .66rem; }
  #play .pl-fb { min-height: 46px; }
  #play .pl-actions .pl-act { padding: 8px 4px; font-size: .84rem; }
  #play .pl-stageseg button { padding: 8px 6px; font-size: .58rem; letter-spacing: .2px; }
  .pl-felt.is-lobby { min-height: 410px; }
  .pl-print { font-size: .5rem; letter-spacing: .7px; margin: 6px 0; }
  .pl-print.top { margin: 0 0 6px; }
  #play .pl-seats { gap: 6px 8px; }
  #play .pl-seat { padding: 2px 5px 4px; }
  /* Eight stakes in two rows of four, and Sit on a row of its own. */
  .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; }
}

/* ---------- rule-set picker (applies to every tab) ---------- */
.rulebar { max-width: 1180px; margin: 0 auto 4px; padding: 0 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rb-lbl { font-size: .72rem; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-family: var(--mono); }
.rulebook-seg button { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; padding: 5px 13px; }
.rulebook-seg .rb-sub { font-size: .62rem; opacity: .75; font-family: var(--mono); }
.rulebook-seg button.active .rb-sub { opacity: .85; }
.rb-note { font-size: .78rem; color: var(--muted); flex: 1 1 260px; min-width: 0; }
.rb-note b { color: var(--ink); }