/* Palette. The surface tokens are translucent on purpose — see the glass notes
   in /site.css. --panel-2 is every inlay (zones, action buttons, KPI tiles),
   --line every hairline, --bg every recessed input; retheming them turns the
   whole tool to glass without touching the geometry below. The body paints the
   canvas colour itself, so --bg no longer has to be opaque. */
:root {
  --felt: #0b6b3a;
  --felt-dark: #084a28;
  --bg: var(--g-well);
  --panel: rgba(255,255,255,.04);
  --panel-2: var(--g-in-fill);
  --ink: #e8edf2;
  --muted: #93a1b0;
  --line: var(--g-in-line);
  --gold: #f0c419;
  --green: #36d07a;
  --red: #ff5d5d;
  --yellow: #ffd24d;
  --accent: #4aa8ff;
  --shadow: var(--g-drop);
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --green-fill: rgba(54,208,122,.16);
  --green-line: rgba(54,208,122,.45);
  --red-fill: rgba(255,93,93,.14);
  --red-line: rgba(255,93,93,.45);
  --gold-fill: rgba(240,196,25,.12);
  --violet-fill: rgba(139,92,246,.14);
  --violet-line: rgba(167,139,250,.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--g-bg);   /* the colour fields behind the glass are site.css's body::before */
  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; }

/* ---------- top bar ---------- */
/* the felt header as a tinted pane: green in the fill, the backdrop showing
   through, a gold hairline where the 3px slab used to be */
.topbar {
  text-align: center;
  padding: 22px 16px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
              linear-gradient(180deg, rgba(11,107,58,.62), rgba(8,74,40,.38));
  border-bottom: 1px solid rgba(240,196,25,.45);
  box-shadow: var(--g-hi), 0 1px 0 rgba(240,196,25,.25), var(--shadow);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}
.brand { display: flex; gap: .4rem; align-items: center; justify-content: center; }
.brand h1 { font-size: 1.7rem; letter-spacing: .3px; }
.brand h1 .muted { font-weight: 400; }
.brand .suit { font-size: 1.3rem; 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: .95rem; }

/* ---------- layout ---------- */
main {
  max-width: 1180px;
  margin: 18px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
}
/* glass — the material is in /site.css */
.panel {
  background: var(--g-sheen), var(--g-base);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-lg);
  padding: 16px 18px;
  box-shadow: var(--g-hi), var(--g-lo), var(--shadow);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}
.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; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.zone.neighbor { border-color: var(--violet-line); background: var(--violet-fill); }
.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; }

/* ---------- 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;
}

/* the deck sits on a little felt — cloth, not glass, like the play table */
.deck {
  display: grid; grid-template-columns: repeat(13, 1fr); gap: 5px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(15,138,77,.55), rgba(8,74,40,.7) 60%, rgba(5,45,25,.85));
  padding: 10px; border-radius: 10px; border: 1px solid rgba(134,239,172,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 30px rgba(0,0,0,.3);
}
.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 controls: a recessed track, the active option a lit pill */
.segmented { display: inline-flex; border: 1px solid var(--g-in-line); border-radius: 8px; overflow: hidden; background: var(--g-well); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.segmented button { background: transparent; color: var(--muted); border: none; padding: 5px 12px; }
.segmented button:hover:not(.active) { background: rgba(255,255,255,.06); color: var(--ink); }
.segmented button.active { background: linear-gradient(180deg, #7cc0ff, var(--accent)); color: #04121f; font-weight: 650; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }

/* ---------- bets ---------- */
.bets-row { display: flex; gap: 14px; align-items: center; margin: 6px 0 4px; flex-wrap: wrap; min-height: 20px; }
.bets-row .betsel { display: flex; align-items: center; gap: 5px; font-size: .85rem; color: var(--muted); }
.bets-row select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }

.quick-row { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.players-label { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.players-label input { width: 52px; 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; }
.quick-row button:disabled:hover { border-color: var(--line); color: var(--ink); }
.ghost { background: var(--g-in-fill); border: 1px solid var(--g-line); color: var(--ink); border-radius: 8px; padding: 6px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.ghost:hover { border-color: var(--gold); color: var(--gold); background: var(--g-in-fill-hover); }

/* ---------- 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; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.rec .big.fold { background: var(--red-fill); color: var(--red); border: 1px solid var(--red-line); }
.rec .big.bet { background: var(--green-fill); color: var(--green); border: 1px solid var(--green-line); }
.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: 64px; font-weight: 650; }
.actions-table .a-bar { width: 55%; }
.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); }
.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: var(--gold-fill); color: var(--yellow); border: 1px solid rgba(240,196,25,.55); }
.badge.same { background: var(--green-fill); color: var(--green); }
.badge.tie { background: rgba(255,255,255,.08); color: var(--muted); }
.deviation-box { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--gold-fill); border: 1px solid rgba(240,196,25,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.deviation-box .arrow { color: var(--gold); font-weight: 700; }
.showdown { font-size: 1.1rem; }
.placeholder { color: var(--muted); padding: 20px 0; text-align: center; }

/* ---------- 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; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.card-box h3 { font-size: .95rem; }
.card-box button { background: linear-gradient(180deg, #7cc0ff, var(--accent)); color: #04121f; border: 1px solid rgba(190,224,255,.6); border-radius: 8px; padding: 7px 14px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.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 { width: 92px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.metric { font-size: 1.5rem; font-weight: 750; margin-top: 10px; font-variant-numeric: tabular-nums; }
.metric small { font-size: .8rem; font-weight: 400; color: var(--muted); display: block; }
canvas { margin-top: 8px; max-width: 100%; background: rgba(0,0,0,.35); border-radius: 8px; border: 1px solid var(--line); }
#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 / .sub-tabs live in /site.css — shared with the darts 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.1fr 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 input[type="number"] { width: 52px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.t-settings input[type="range"] { accent-color: var(--gold); width: 140px; }
.t-focus.disabled { opacity: .45; }
.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; }
.badge.street { background: #11293f; color: var(--accent); border: 1px solid var(--accent); }
.t-zone { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.t-zone.tq-neighbors { border-color: var(--violet-line); background: var(--violet-fill); }
.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; }
.card.back { background: repeating-linear-gradient(135deg, #2c4a7c, #2c4a7c 3px, #223a63 3px, #223a63 6px); border-color: #3b568c; }
#trainer .slots .card { cursor: default; }
#trainer .slots .card:hover::after { content: none; }
.t-actions { display: grid; grid-template-columns: repeat(4, 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); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.t-act:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); background: var(--g-in-fill-hover); }
.t-act.fold:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.t-act:disabled { opacity: .4; cursor: default; }
.t-nav { margin-top: 12px; }
#t-deal { background: linear-gradient(180deg, #ffd955, var(--gold)); color: #241c02; border: 1px solid rgba(255,230,140,.7); border-radius: 10px; padding: 10px 22px; font-weight: 750; font-size: 1rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px rgba(240,196,25,.28); }
#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); }
.actions-table tr.picked td { background: rgba(74, 168, 255, .12); }
.actions-table tr.picked.best td { background: rgba(54, 208, 122, .14); }
kbd { background: var(--panel-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: .8em; }
.t-fb-actions { margin-top: 10px; }
.runout { margin-top: 10px; font-size: .88rem; }
.runout div { padding: 3px 0; border-top: 1px dashed var(--line); }
.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; }

/* ---------- footer ---------- */
footer { max-width: 1180px; margin: 8px auto 0; padding: 0 18px; }
footer details {
  background: var(--g-sheen), var(--g-base); border: 1px solid var(--g-line); border-radius: 12px; padding: 10px 16px;
  box-shadow: var(--g-hi), var(--g-lo), var(--shadow);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
}
footer summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.foot-grid { display: grid; grid-template-columns: 280px 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; }
}

/* ---------- phones ---------- */
@media (max-width: 560px) {
  /* header — reclaim vertical space */
  .topbar { padding: 16px 12px 12px; }
  .brand { gap: .3rem; }
  .brand h1 { font-size: 1.25rem; }
  .brand .suit { font-size: .95rem; }
  .tagline { font-size: .8rem; margin-top: 4px; }

  /* nav — the wrap/centre rules are in /site.css; only the second row's
     tighter gap to the first is stud-specific */
  .sub-tabs { margin-top: 8px; }

  /* reclaim a little width everywhere */
  main { padding: 0 10px; gap: 12px; }
  .panel { padding: 13px 12px; }
  .analysis { padding: 13px 12px; }

  /* lattice — full-width grid, roomier deck tap targets */
  .lat-bar, .lat-body, .lat-hinge { padding-left: 11px; padding-right: 11px; }
  .lat-deskcol { flex-basis: 100%; max-width: 100%; }
  .lat-deck { gap: 4px; }
  .lat-dc { padding: 6px 0; font-size: .82rem; }
  .lat-pop { max-width: 250px; }
  .lat-legend { font-size: .66rem; gap: 9px; }

  /* daily — bigger thumb buttons, comfortable cards */
  .d-act { padding: 16px 0; font-size: 1.05rem; }
  .d-card { }
  .d-cta { gap: 6px; }
  .d-btn { padding: 9px 13px; }

  /* field guide — single column already; tighten chrome */
  .rd-intro { padding: 14px 12px; }
  .rd-capnum { font-size: 1.8rem; }
  .rd-how { gap: 10px; font-size: .8rem; }

  /* solver — keep controls tappable */
  .deck { gap: 4px; }
  .t-act { padding: 16px 0; }
}

/* ---------- STUD//TERMINAL lattice ---------- */
/* The terminal sections (lattice, daily, field guide) are each one pane made
   of stacked segments: a bar, a body, a hinge. Each segment carries the glass
   itself — same fill, same blur — so the seams read as etched lines in one
   sheet rather than as three cards. The felt-green top rule stays: it's the
   terminal's own accent. */
.lat-bar, .lat-body, .lat-hinge, .d-bar, .d-body, .rd-bar, .rd-intro, .rd-card {
  background: var(--g-sheen), var(--g-base);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}
.lat-bar, .d-bar, .rd-bar { box-shadow: var(--g-hi); }
.lat-hinge, .d-body, .rd-card { box-shadow: var(--g-lo), var(--shadow); }
#lattice { max-width: 1180px; margin: 18px auto; padding: 0 16px; position: relative; }
.lat-bar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--g-line); border-top: 2px solid var(--felt); border-radius: 12px 12px 0 0; padding: 8px 14px; font-family: var(--mono); }
.lat-brand { font-weight: 650; letter-spacing: .5px; }
.lat-sep { color: var(--green); }
.lat-mod { color: #5f6b78; font-size: .72rem; }
.lat-status { margin-left: auto; color: var(--accent); font-size: .72rem; transition: color .2s; }
.lat-tag { color: #5f6b78; font-size: .66rem; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.lat-body { display: flex; gap: 14px; flex-wrap: wrap; border: 1px solid var(--g-line); border-top: none; padding: 14px; }
.lat-deskcol { flex: 1 1 360px; max-width: 480px; }
.lat-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .7rem; color: var(--muted); margin-top: 4px; align-items: center; }
.lat-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 3px; box-sizing: border-box; }
.lat-legdim { color: #5f6b78; }
.lat-side { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); }
.lat-card { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
.lat-row { display: flex; align-items: center; gap: 8px; }
.lat-k { font-size: .62rem; color: #5f6b78; letter-spacing: .5px; }
.lat-modeword { font-weight: 650; color: var(--muted); }
.lat-prov { margin-left: auto; font-size: .66rem; color: #5f6b78; }
.lat-edge { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.lat-edgeval { font-size: 1.5rem; font-weight: 650; color: var(--red); font-variant-numeric: tabular-nums; }
.lat-sub { font-size: .72rem; color: var(--muted); margin-top: 3px; }
.lat-gold { color: var(--gold); }
.lat-dim { color: #5f6b78; }
.lat-tape { font-size: .72rem; line-height: 1.7; color: var(--muted); min-height: 30px; }
.lat-tlabel { color: var(--ink); }
.lat-hinge { border: 1px solid var(--g-line); border-top: none; border-radius: 0 0 12px 12px; padding: 11px 14px; font-family: var(--mono); }
.lat-sliderrow { display: flex; align-items: center; gap: 10px; }
.lat-sliderrow input[type=range] { flex: 1; accent-color: var(--gold); cursor: pointer; }
.lat-kval { font-size: .8rem; min-width: 78px; text-align: right; }
.lat-honest { font-size: .72rem; color: var(--muted); margin: 8px 0 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.lat-honest em { color: var(--ink); font-style: normal; font-weight: 600; }
.lat-pop { position: absolute; display: none; z-index: 30; background: var(--g-sheen), rgba(15,19,27,.85); border: 1px solid var(--g-line-strong); border-radius: 9px; padding: 8px 10px; width: 200px; box-shadow: var(--g-hi), var(--shadow); -webkit-backdrop-filter: var(--g-blur-soft); backdrop-filter: var(--g-blur-soft); font-family: var(--mono); font-size: .72rem; pointer-events: none; }
.lat-pophead { color: var(--ink); font-weight: 650; margin-bottom: 5px; }
.lat-bara { display: flex; align-items: center; gap: 5px; margin: 2px 0; }
.lat-track { flex: 1; height: 8px; background: var(--bg); border-radius: 2px; overflow: hidden; }
.lat-track span { display: block; height: 8px; }
.lat-bv { width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.lat-best { color: var(--ink); }
.lat-flip { color: var(--gold); margin-top: 4px; }
.lat-prov2 { color: #5f6b78; font-size: .66rem; margin-top: 5px; }
.lat-deck { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; margin-top: 10px; max-width: 460px; }
.lat-dc { background: #f5f7fa; color: #0c0f13; border: 1px solid #c7ced6; border-radius: 4px; padding: 3px 0; font-family: var(--mono); font-size: .68rem; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.lat-dc span { font-size: .6rem; }
.lat-dc.red { color: #d11; }
.lat-dc.pinned { outline: 2px solid var(--gold); outline-offset: -1px; background: #fff; }
.lat-dc.dimmed { opacity: .32; cursor: default; }
.lat-dc:hover:not(.dimmed):not(.pinned) { outline: 2px solid var(--accent); outline-offset: -1px; }
@media (max-width: 520px) { .lat-deckcol { max-width: 100%; } .lat-deck { max-width: 100%; } }

/* ---------- THE DAILY CLOSE ---------- */
#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(--g-line); border-top: 2px solid var(--felt); border-radius: 12px 12px 0 0; 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(--g-line); border-top: none; border-radius: 0 0 12px 12px; padding: 16px; }
.d-dim { color: #5f6b78; }
.d-table { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.d-seen { border-left: 1px solid var(--line); padding-left: 14px; }
.d-tlbl { font-size: .62rem; color: #5f6b78; letter-spacing: .5px; margin-bottom: 5px; }
.d-seen .d-tlbl { color: #8a7bbf; }
.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: linear-gradient(180deg, #ffd955, var(--gold)); color: #241c02; border: 1px solid rgba(255,230,140,.7); border-radius: 10px; padding: 11px 22px; font: inherit; font-weight: 650; font-size: 1rem; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px rgba(240,196,25,.28); }
.d-deal:hover { filter: brightness(1.08); }
.d-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 12px; max-width: 440px; }
.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; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.d-act:hover { border-color: var(--gold); color: var(--gold); background: var(--g-in-fill-hover); }
.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: 34px; color: var(--muted); }
.d-lact { width: 36px; 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 rgba(240,196,25,.55); background: var(--gold-fill); color: var(--gold); }
.d-dev.missed { border: 1px solid var(--red-line); background: var(--red-fill); 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: linear-gradient(180deg, #ffd955, var(--gold)); color: #241c02; border: 1px solid rgba(255,230,140,.7); font-weight: 650; box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.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; }
@media (max-width: 520px) { .d-actions { max-width: 100%; } .d-seen { border-left: none; padding-left: 0; } }
.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; }

/* ---------- FIELD GUIDE (reads) ---------- */
#reads { max-width: 1000px; margin: 18px auto; padding: 0 16px; font-family: var(--mono); }
.rd-bar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--g-line); border-top: 2px solid var(--felt); border-radius: 12px 12px 0 0; padding: 8px 14px; }
.rd-bar .lat-tag { margin-left: auto; }
.rd-intro { border: 1px solid var(--g-line); border-top: none; border-radius: 0 0 12px 12px; padding: 16px 18px; }
.rd-intro > p { color: var(--muted); font-size: .92rem; margin: 0 0 14px; line-height: 1.55; }
.rd-intro strong { color: var(--ink); }
.rd-capwrap { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.rd-cap { display: flex; align-items: center; gap: 12px; background: var(--gold-fill); border: 1px solid rgba(240,196,25,.55); border-radius: 12px; padding: 12px 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.rd-capnum { font-size: 2.1rem; font-weight: 750; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1; }
.rd-caplbl { font-size: .76rem; color: var(--ink); line-height: 1.35; }
.rd-ladder { flex: 1 1 320px; min-width: 280px; display: flex; flex-direction: column; gap: 6px; }
.rd-lrow { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.rd-lname { width: 116px; color: var(--muted); }
.rd-ltrack { flex: 1; height: 12px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.rd-ltrack > span { display: block; height: 100%; }
.rd-lev { width: 56px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.rd-lnote { width: 92px; font-size: .68rem; }
.rd-how { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.rd-how b { color: var(--gold); margin-right: 4px; }
.rd-how em { color: var(--ink); font-style: normal; }
.rd-tiers { display: flex; gap: 16px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.rd-th { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.rd-th.high { background: var(--gold); } .rd-th.mid { background: var(--accent); } .rd-th.low { background: #5f6b78; }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 14px 0; }
.rd-card { border: 1px solid var(--g-line); border-radius: 12px; padding: 13px 15px; }
.rd-chead { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.rd-ex { display: flex; gap: 6px; }
.rd-mh { display: inline-flex; gap: 2px; }
.rd-mc { background: #f5f7fa; color: #0c0f13; border: 1px solid #c7ced6; border-radius: 4px; padding: 2px 4px; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
.rd-mc.red { color: #d11; }
.rd-mc i { font-style: normal; font-size: .64rem; }
.rd-cname { flex: 1; font-size: .92rem; color: var(--ink); font-weight: 650; }
.rd-csub { font-size: .7rem; font-weight: 400; margin-top: 2px; }
.rd-cev { text-align: right; display: flex; flex-direction: column; }
.rd-cev .lat-gold { font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-cev .lat-dim { font-size: .64rem; }
.rd-rule { font-size: .86rem; color: var(--muted); margin-bottom: 10px; }
.rd-rule strong { color: var(--ink); }
.rd-meter { display: flex; gap: 5px; }
.rd-cell { flex: 1; border-radius: 7px; padding: 7px 0; text-align: center; border: 1px solid var(--line); }
.rd-cell .rd-cn { display: block; font-size: .64rem; color: #5f6b78; }
.rd-cell .rd-ca { display: block; font-size: .82rem; font-weight: 700; }
.rd-cell.fold { background: var(--red-fill); } .rd-cell.fold .rd-ca { color: var(--red); }
.rd-cell.b1 { background: rgba(54,208,122,.08); } .rd-cell.b1 .rd-ca { color: #6bbf90; }
.rd-cell.b2 { background: rgba(54,208,122,.16); } .rd-cell.b2 .rd-ca { color: #36d07a; }
.rd-cell.b3 { background: rgba(54,208,122,.26); } .rd-cell.b3 .rd-ca { color: #54e08e; }
.rd-cell.flip { border-color: var(--gold); }
.rd-meterlbl { font-size: .7rem; margin-top: 5px; text-align: center; }
.rd-foot { font-size: .74rem; margin-top: 8px; line-height: 1.5; }
@media (max-width: 520px) { .rd-lname { width: 92px; } .rd-lnote { display: none; } }

/* ============================================================ PLAY (collusion sim) */
#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; }

/* minmax(0,·) so no child's min-content can blow the track past the viewport */
.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; }
/* 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 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: a row of panels, two cards each (see renderSeats). */
.pl-seats { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 8px; }
.pl-seat { 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); }
.pl-seat .pl-who { font-size: .54rem; color: rgba(191,231,207,.8); font-family: var(--mono); letter-spacing: .4px; white-space: nowrap; }
.pl-seat.active .pl-who { color: var(--gold); }
.pl-seat.solo { background: none; box-shadow: none; color: #bfe7cf; font-family: var(--mono); font-size: .68rem; padding: 8px 0; }
.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 row shrank 6px the moment the last card turned over */
.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; }

/* bankroll chip in the top bar */
.pl-bankchip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); color: var(--gold); }

/* casino chips (ported & adapted from the SHITS table) */
.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, never wrapping — a tray that wraps is a tray that grows. */
.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; }
.pl-chip .cur { font-style: normal; }

/* The betting circles: ANTE / 3RD / 4TH / 5TH. 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. Same rules as cards/suits/ and cards/uth/. */
.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-spot.pl-drop .pl-stack { animation: plDrop .25s ease; }

/* playing cards */
.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; }
@keyframes plFlip { from { transform: rotateY(90deg); opacity: .2; } to { transform: none; opacity: 1; } }

/* actions — four equal cells, always: Fold and the three bets 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; }
.pl-promptbody { width: 100%; }
/* The hand result: what you made and the net, then the stack. */
.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; }
.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.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; }

/* HUD */
.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-bankroll + .u { font-size: .78rem; color: var(--muted); }
.pl-bankroll + .u 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; }

/* controls: the seats slider across the top, the rest in cells under it */
.pl-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
.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 .row { display: flex; gap: 6px; align-items: center; }
#play input[type=range] { accent-color: var(--gold); }
.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; }

/* leaderboard */
.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; }

/* theory */
.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; }
@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; } }

/* mobile reflow: single column */
@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; }
}
/* Key hints are for a keyboard; on a touch screen they are a line of noise. */
@media (hover: none) { #play .pl-keys { display: none; } }

/* ============================================================ mobile pass
   (2026-08) One-thumb play: the Play tab's prompt/chips/actions ride sticky
   at the bottom of the phone screen, chrome slims down, and everything
   tappable clears 44px. Desktop is untouched — these are additive rules. */

/* touch feel, all form factors: no grey tap flash, no double-tap zoom wait,
   a quick press-down on the controls that get hammered mid-hand */
button, .lat-dc, .deck .card, .slots .card {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.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; }
}
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

@media (max-width: 640px) {
  /* --- chrome: the game starts one swipe sooner --- */
  .seo-intro { display: none; }        /* SEO copy — desktop & crawlers only */
  .topbar { padding: 10px 12px 8px; }
  .topbar .tagline { display: none; }
  .brand h1 { font-size: 1.15rem; }
  .brand .suit { font-size: .85rem; }

  /* iOS zooms any focused control under 16px — keep inputs at 16 */
  input[type="number"], input[type="text"], select { font-size: 16px; }

  /* --- PLAY: sticky dock --- */
  #play { padding: 0; }
  #play .panel.pl-tablewrap { border-radius: 0 0 14px 14px; }
  .pl-bar { border-radius: 0; }
  .pl-tag { display: none; }
  #play .panel.pl-tablewrap { padding: 10px; }
  .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 the row, so it never wraps at any phone width */
  .pl-rack { gap: 6px; padding: 5px 6px; }
  .pl-chiprow { gap: 6px; flex: 1 1 auto; min-width: 0; justify-content: center; }
  .pl-chiprow .pl-chip { flex: 0 1 44px; width: auto; height: auto; aspect-ratio: 1; min-width: 30px; font-size: .64rem; border-width: 2px; }
  .pl-chiprow .pl-chip::after { inset: 5px; border-width: 1.5px; }
  .pl-actions { gap: 6px; }
  .pl-act { min-height: 50px; }

  /* felt: tighter, cards still readable */
  .pl-felt { padding: 14px 8px 11px; }
  .pl-print { font-size: .5rem; letter-spacing: .7px; }
  .pl-seats { gap: 6px 8px; }
  .pl-seat { padding: 2px 5px 4px; }
  .pl-community { gap: 10px; }
  .pl-card { width: 40px; height: 56px; }
  .pl-card .r { 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 are one row even at 360px */
  .pl-mini { gap: 0; } .pl-mini .pl-card.sm + .pl-card.sm { margin-left: -5px; box-shadow: -1px 0 3px rgba(0,0,0,.3); }
  .pl-card.big { width: 46px; height: 64px; }
  .pl-card.big .r { font-size: 1.1rem; } .pl-card.big .s { 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; }

  /* --- TRAINER: the deal comes first, knobs after --- */
  .trainer-wrap { gap: 12px; }
  .trainer-wrap > .panel:first-child { order: 2; }   /* settings/scout */
  .trainer-wrap > .trainer-grid { order: 1; }
  .trainer-wrap > .panel:last-child { order: 3; }    /* leak ledger */
  .trainer-grid { gap: 12px; }
  .slots.big .card { width: 42px; height: 58px; }
  .slots.big .card .rank { font-size: 1.1rem; }
  .slots.big .card .pip { font-size: .92rem; }
  .t-zone { padding: 7px 9px; margin-bottom: 6px; }
  .t-actions { gap: 8px; margin: 8px 0 10px; }

  /* --- SOLVER: reachable deck, calm zones --- */
  .zones { gap: 7px; margin-bottom: 10px; }
  .zone { padding: 7px 9px; }
  .slots { min-height: 42px; }
  .slot-empty { width: 30px; height: 42px; }
  .card { width: 30px; height: 42px; }
  .deck { padding: 8px; }
  .deck .card { height: 38px; width: 100%; }
  .target-row { margin: 10px 0; }
  .segmented button { padding: 8px 12px; }
  .quick-row .ghost { padding: 10px 12px; }

  /* --- DAILY: full-width answer grid --- */
  .d-actions { gap: 8px; }
  .d-act { padding: 15px 0; }
}

/* ---- the Play dock: four rows, each a fixed height ----
   Same rule as cards/suits/ and cards/uth/: 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. Before this, the
   buttons moved down 47px on a phone between 3rd street and the showdown as the
   verdict appeared and the prompt grew — exactly where a thumb is mid-tap. */
.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) {
  #play .pl-prompt { min-height: 40px; }
  #play .pl-fb { min-height: 46px; }
  #play .pl-actions .pl-act { padding: 8px 4px; font-size: .84rem; }
  .pl-felt.is-lobby { min-height: 410px; }
  .pl-chiprow .pl-chip .cur { display: none; }
}