/* Card Coach - dark felt, MDT style. One accent (green); gold for the money. */
:root{
  --bg:#0a0f0c; --bg2:#101813; --card:#141d17; --card2:#1b2720; --line:rgba(255,255,255,.08);
  --ink:#eef4ef; --ink2:#a8b8ad; --mute:#74867a;
  --acc:#2fbf71; --acc-ink:#04170c; --gold:#f0cd7e; --red:#ef5350; --blue:#5aa9ff; --amber:#f2a93b;
  --lo:#2fbf71; --mid:#8a968d; --hi:#ef5350;
  --disp:'Bebas Neue','Arial Narrow',Impact,sans-serif; --r:18px;
  --dock-h:250px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; background:var(--bg); color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
body{ min-height:100vh; padding-bottom:calc(var(--dock-h) + 14px + env(safe-area-inset-bottom)); }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; touch-action:manipulation; }
button:disabled{ opacity:.4; cursor:default; }
b{ font-weight:800; }
.bjc{ max-width:720px; margin:0 auto; padding:10px 12px 0; display:flex; flex-direction:column; gap:10px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px; }
#buildTag{ position:fixed; top:calc(2px + max(var(--mdts-h, 0px), env(safe-area-inset-top))); right:6px; font:10px monospace; color:var(--mute); opacity:.5; pointer-events:none; z-index:9999; }

/* the count */
.tiles{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.tl{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:9px 4px 7px; text-align:center; min-width:0; }
.tl b{ display:block; font-family:var(--disp); font-weight:400; font-size:27px; letter-spacing:.5px; line-height:1; white-space:nowrap; }
.tl span{ display:block; margin-top:3px; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl.pos b{ color:var(--acc); } .tl.neg b{ color:var(--red); }
.tl.bet.high{ border-color:color-mix(in srgb, var(--gold) 55%, transparent); background:color-mix(in srgb, var(--gold) 9%, var(--card)); } .tl.bet.high b{ color:var(--gold); }
.tl.bet.low b{ color:var(--mute); }
.shoebar{ display:flex; align-items:center; gap:10px; margin-top:-2px; padding:0 2px; font-size:12px; color:var(--mute); }
.shoebar .bar{ flex:1; height:5px; border-radius:3px; background:var(--card2); overflow:hidden; } .shoebar .bar i{ display:block; height:100%; background:var(--acc); border-radius:3px; }
.shoebar button{ color:var(--ink2); text-decoration:underline; text-underline-offset:2px; font-size:12px; white-space:nowrap; }
.warn{ background:color-mix(in srgb, var(--amber) 14%, var(--card)); border:1px solid color-mix(in srgb, var(--amber) 45%, transparent); color:var(--amber); border-radius:12px; padding:9px 12px; font-size:13px; font-weight:600; }

/* the table */
.row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:6px 10px; border-radius:13px; border:1.5px solid transparent; min-height:48px; }
.row + .row{ margin-top:4px; }
.row.on{ border-color:var(--acc); background:color-mix(in srgb, var(--acc) 9%, transparent); }
.row .who{ width:58px; flex:none; }
.row .who b{ display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink2); }
.row .who small{ display:block; font-size:11px; color:var(--mute); margin-top:1px; }
.cards{ display:flex; flex-wrap:wrap; gap:5px; flex:1; min-width:0; align-items:center; }
.cards .none{ color:var(--mute); font-size:13px; }
.cc{ min-width:32px; height:40px; padding:0 5px; border-radius:7px; background:#f3eee0; color:#18201b; display:inline-grid; place-items:center; font-family:var(--disp); font-size:26px; line-height:1; box-shadow:0 2px 0 rgba(0,0,0,.35); }
.cc.sm{ min-width:26px; height:34px; font-size:20px; border-radius:6px; }
.cc.r{ color:#c0262d; }
.moren{ font-size:12px; font-weight:800; color:var(--mute); padding:0 3px; }
.hand-total{ margin-left:auto; text-align:right; flex:none; }
.hand-total b{ display:block; font-family:var(--disp); font-weight:400; font-size:24px; letter-spacing:.5px; line-height:1; }
.hand-total span{ font-size:11px; color:var(--mute); font-weight:600; }
.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 6px 68px; }
.tabs button{ padding:5px 10px; border-radius:99px; background:var(--card2); border:1px solid var(--line); font-size:12.5px; font-weight:700; color:var(--ink2); }
.tabs button.on{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); }

/* the advice */
.advice{ text-align:center; padding:12px 12px 13px; }
.advice .lbl{ font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--mute); }
.advice .big{ font-family:var(--disp); font-size:56px; line-height:1; letter-spacing:1.5px; margin:3px 0 2px; }
.advice .big.stand{ color:var(--red); } .advice .big.hit{ color:var(--acc); } .advice .big.double{ color:var(--blue); } .advice .big.split{ color:var(--gold); } .advice .big.surrender{ color:#c58bff; }
.advice .ctx{ color:var(--ink2); font-size:14px; font-weight:600; }
.advice .note{ margin-top:8px; font-size:13px; color:var(--ink2); line-height:1.45; }
.advice .note b{ color:var(--ink); }
.advice .dev{ display:inline-block; margin-top:9px; padding:6px 11px; border-radius:10px; font-size:12.5px; font-weight:700; line-height:1.35; }
.advice .dev.count{ background:color-mix(in srgb, var(--gold) 16%, transparent); color:var(--gold); border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.advice .dev.same{ background:var(--card2); color:var(--ink2); border:1px solid var(--line); }
.advice .dev.close{ background:color-mix(in srgb, var(--amber) 12%, transparent); color:var(--amber); border:1px solid color-mix(in srgb, var(--amber) 40%, transparent); }
.evs{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:11px; }
.ev{ padding:5px 9px; border-radius:10px; background:var(--card2); border:1px solid var(--line); font-size:12px; color:var(--ink2); }
.ev b{ color:var(--ink); } .ev em{ font-style:normal; font-weight:800; margin-left:5px; font-variant-numeric:tabular-nums; }
.ev.best{ border-color:var(--acc); } .ev.best em{ color:var(--acc); }
.ev em.neg{ color:var(--ink2); }
.ins{ margin-top:10px; padding:8px 11px; border-radius:10px; background:var(--card2); border:1px solid var(--line); font-size:13px; color:var(--ink2); line-height:1.4; text-align:left; }
.ins b{ color:var(--ink); } .ins.yes{ border-color:color-mix(in srgb, var(--gold) 55%, transparent); } .ins.yes b.v{ color:var(--gold); }
.res{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:10px; }
.res span{ padding:7px 12px; border-radius:11px; background:var(--card2); border:1px solid var(--line); font-size:13px; font-weight:700; }
.res .win,.res .blackjack{ color:var(--acc); border-color:color-mix(in srgb, var(--acc) 50%, transparent); } .res .lose{ color:var(--red); border-color:color-mix(in srgb, var(--red) 40%, transparent); } .res .push{ color:var(--ink2); }
.intro ol{ margin:10px auto 0; padding-left:20px; text-align:left; max-width:420px; color:var(--ink2); font-size:13.5px; line-height:1.55; }
.intro ol b{ color:var(--ink); }

/* cards left in the shoe */
.sec{ margin:0 0 9px; font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--mute); display:flex; justify-content:space-between; align-items:baseline; }
.sec span{ font-weight:600; letter-spacing:0; text-transform:none; }
.left{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.lf{ background:var(--card2); border-radius:11px; padding:7px 6px 6px; }
.lf .t{ display:flex; justify-content:space-between; align-items:baseline; }
.lf .t b{ font-family:var(--disp); font-weight:400; font-size:19px; } .lf .t em{ font-style:normal; font-size:10px; font-weight:800; }
.lf .n{ font-size:12px; color:var(--ink2); font-variant-numeric:tabular-nums; }
.lf .bar{ height:4px; border-radius:2px; background:rgba(255,255,255,.07); margin-top:4px; overflow:hidden; } .lf .bar i{ display:block; height:100%; border-radius:2px; }
.lf.lo i,.lf.lo em{ background:var(--lo); color:var(--lo); } .lf.mid i{ background:var(--mid); } .lf.mid em{ color:var(--mid); } .lf.hi i,.lf.hi em{ background:var(--hi); color:var(--hi); }
.lf em{ background:none !important; }
.dens{ display:flex; gap:14px; flex-wrap:wrap; margin-top:9px; font-size:12.5px; color:var(--ink2); } .dens b{ color:var(--ink); }
.hilo{ margin:8px 0 0; font-size:12px; color:var(--mute); line-height:1.45; }

/* the pad */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:25; padding:8px 12px calc(9px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--bg2) 95%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--line); box-shadow:0 -14px 30px rgba(0,0,0,.3); }
.dock > div{ max-width:720px; margin:0 auto; }
.seg{ display:flex; gap:4px; background:var(--bg); border:1px solid var(--line); border-radius:13px; padding:4px; }
.seg button{ flex:1; min-height:36px; border-radius:10px; font-size:14px; font-weight:800; color:var(--ink2); letter-spacing:.2px; }
.seg button.on{ background:var(--acc); color:var(--acc-ink); box-shadow:0 3px 10px color-mix(in srgb, var(--acc) 30%, transparent); }
.ranks{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-top:7px; }
.rk{ height:52px; border-radius:14px; background:var(--card2); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; user-select:none; -webkit-user-select:none; transition:transform .07s; position:relative; overflow:hidden; }
.rk:active{ transform:scale(.93); }
.rk b{ font-family:var(--disp); font-weight:400; font-size:29px; line-height:1; letter-spacing:.5px; }
.rk small{ font-size:10.5px; font-weight:700; color:var(--mute); font-variant-numeric:tabular-nums; }
.rk::after{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--mid); opacity:.7; }
.rk.lo::after{ background:var(--lo); opacity:1; } .rk.hi::after{ background:var(--hi); opacity:1; }
.rk.lo b{ color:#c4f3d9; } .rk.hi b{ color:#ffd2d1; }
.acts{ display:flex; gap:7px; margin-top:7px; }
.acts button{ flex:1; height:40px; border-radius:12px; background:var(--card2); border:1px solid var(--line); font-size:13.5px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:6px; color:var(--ink2); }
.acts button svg{ width:18px; height:18px; }
.acts button.go{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); flex:1.4; }
.acts button.gold{ background:color-mix(in srgb, var(--gold) 16%, var(--card2)); color:var(--gold); border-color:color-mix(in srgb, var(--gold) 45%, transparent); }
.acts button.more{ flex:.55; }

/* sheets */
.scrim{ position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center; padding-top:calc(var(--mdts-h, 0px) + 8px); }
.sheet{ width:100%; max-width:720px; max-height:calc(100vh - var(--mdts-h, 0px) - 12px); overflow:auto; background:var(--bg2); border:1px solid var(--line); border-radius:22px 22px 0 0; padding:16px 14px calc(18px + env(safe-area-inset-bottom)); transform:translateY(24px); opacity:0; transition:all .22s; }
.sheet.in{ transform:none; opacity:1; }
.sh-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sh-head h2{ margin:0; font-family:var(--disp); font-weight:400; font-size:30px; letter-spacing:1px; }
.iconbtn{ width:38px; height:38px; border-radius:11px; background:var(--card2); border:1px solid var(--line); display:grid; place-items:center; } .iconbtn svg{ width:18px; height:18px; }
.sh-list{ display:flex; flex-direction:column; gap:8px; }
.btn{ min-height:48px; border-radius:13px; padding:0 16px; background:var(--card2); border:1px solid var(--line); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn.primary{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); } .btn.danger{ color:var(--red); border-color:color-mix(in srgb, var(--red) 45%, transparent); }
.sh-btns{ display:flex; gap:8px; margin-top:14px; } .sh-btns .btn{ flex:1; }
.muted{ color:var(--ink2); font-size:14px; line-height:1.5; }
.legend{ display:flex; flex-wrap:wrap; gap:6px 12px; margin:2px 0 10px; font-size:12px; color:var(--ink2); }
.legend i{ display:inline-block; width:18px; height:14px; border-radius:4px; vertical-align:-2px; margin-right:5px; }
table.ch{ border-collapse:separate; border-spacing:2px; width:100%; table-layout:fixed; margin-bottom:12px; }
.ch th{ font-size:10.5px; color:var(--mute); font-weight:800; padding:2px 0; } .ch th.rl{ text-align:left; color:var(--ink2); font-size:11.5px; width:40px; }
.ch td{ height:25px; text-align:center; font-size:11px; font-weight:800; border-radius:5px; color:#0a0f0c; }
.ch td.H{ background:#79d6a1; } .ch td.S{ background:#ef8a87; } .ch td.D{ background:#82bdff; } .ch td.P{ background:#f0cd7e; } .ch td.R{ background:#c9a0ff; }
.ch td.me{ outline:2.5px solid #fff; outline-offset:-1px; }
.ch h4{ margin:0; }
.chnote{ font-size:12px; color:var(--mute); line-height:1.5; margin:0 0 6px; }
#toast{ position:fixed; left:50%; bottom:calc(var(--dock-h) + 16px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); opacity:0; z-index:200; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:99px; font-weight:700; font-size:14px; pointer-events:none; transition:all .25s; max-width:90vw; text-align:center; }
#toast.on{ opacity:1; transform:translate(-50%, 0); }
@media (max-height:700px){
  .rk{ height:46px; } .rk b{ font-size:25px; } .rk small{ font-size:10px; }
  .acts button{ height:36px; font-size:13px; } .seg button{ min-height:32px; font-size:13px; }
  .advice .big{ font-size:46px; } .advice{ padding:9px 10px 10px; } .advice .dev{ margin-top:6px; padding:5px 9px; }
  .bjc{ gap:8px; padding-top:8px; } .tl{ padding:6px 4px 5px; } .tl b{ font-size:23px; } .evs{ margin-top:8px; }
}
@media (max-width:360px){ .tl b{ font-size:23px; } .rk b{ font-size:26px; } .cc{ min-width:30px; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ============================================================
   v2.0 - Card Coach: the game switch and the poker dashboard (a laptop screen)
   ============================================================ */
.modebar{ display:flex; justify-content:center; }
.seg.modes{ max-width:340px; width:100%; }
body[data-mode="poker"]{ padding-bottom:24px; }
body[data-mode="poker"] #toast{ bottom:24px; }
.up{ color:var(--acc); } .down{ color:var(--red); }

/* playing cards */
.pc{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:36px; height:50px; border-radius:6px; background:#fbf8ef; color:#16201a; box-shadow:0 2px 0 rgba(0,0,0,.35); font-family:var(--disp); line-height:.92; vertical-align:middle; user-select:none; }
.pc b{ font-weight:400; font-size:23px; letter-spacing:.3px; } .pc i{ font-style:normal; font-size:17px; margin-top:-1px; }
.pc.s1,.pc.s2{ color:#c8262e; }
.pc.empty{ background:transparent; border:1.5px dashed rgba(255,255,255,.18); box-shadow:none; }
.pc.lg{ width:48px; height:68px; border-radius:8px; } .pc.lg b{ font-size:30px; } .pc.lg i{ font-size:22px; }
.pc.xs{ width:22px; height:31px; border-radius:4px; box-shadow:none; } .pc.xs b{ font-size:14px; } .pc.xs i{ font-size:11px; margin-top:-2px; }

/* the grid: the top strip and the seats, then three columns (cards and actions | advice | players and history) */
.pk{ max-width:1560px; margin:0 auto; padding:10px 14px 0; display:flex; flex-direction:column; gap:12px; }
.pk-cols{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; }
.pk-colL,.pk-colM,.pk-colR{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.pk-colM{ position:sticky; top:62px; }
@media (max-width:1100px){ .pk-cols{ grid-template-columns:minmax(0,1fr); } .pk-colM{ order:-1; position:static; } .pk-adv{ max-height:none !important; } }
.pk-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; }
.pk-h{ margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--mute); display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.pk-h span{ font-weight:600; letter-spacing:0; text-transform:none; color:var(--mute); text-align:right; }
.pk-note{ margin:8px 0 0; font-size:12px; color:var(--mute); line-height:1.5; }
.pk-lead{ margin:8px 0 0; font-size:14px; color:var(--ink2); line-height:1.5; }
.pk-btn{ min-height:40px; padding:0 16px; border-radius:11px; background:var(--card2); border:1px solid var(--line); font-weight:800; font-size:14px; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.pk-btn:hover:not(:disabled){ border-color:color-mix(in srgb, var(--acc) 55%, var(--line)); }
.pk-btn.primary{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); } .pk-btn.xl{ min-height:50px; font-size:16px; padding:0 22px; }
kbd{ font:600 10px/1 ui-monospace,monospace; padding:3px 5px; border-radius:5px; background:rgba(255,255,255,.1); color:inherit; opacity:.75; }
.pk-btn.primary kbd{ background:rgba(0,0,0,.18); }

/* top strip */
.pk-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; }
.pk-modes{ flex:none; } .pk-modes .seg.modes{ width:196px; } .pk-modes .seg.modes button{ min-height:34px; font-size:13.5px; }
.pk-tiles{ display:flex; gap:6px; flex:1; flex-wrap:wrap; min-width:0; }
.pk-t{ background:var(--bg2); border:1px solid var(--line); border-radius:11px; padding:5px 9px 4px; min-width:60px; text-align:left; }
.pk-t span{ display:block; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--mute); }
.pk-t b{ display:block; font-family:var(--disp); font-weight:400; font-size:22px; line-height:1.05; letter-spacing:.4px; white-space:nowrap; }
.pk-t.big b{ color:var(--gold); font-size:25px; } .pk-t.hot b{ color:var(--amber); }
.pk-t.link{ cursor:pointer; } .pk-t.link:hover{ border-color:var(--acc); }
.pk-topbtns{ display:flex; gap:6px; flex:none; }
@media (max-width:760px){ .pk-top{ flex-direction:column; align-items:stretch; gap:10px; } .pk-modes .seg.modes{ width:100%; } .pk-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); flex:none; } .pk-t{ min-width:0; padding:5px 9px 4px; } .pk-t b{ font-size:19px; } .pk-t.big b{ font-size:21px; } .pk-topbtns{ justify-content:flex-end; } }

/* seats */
.pk-seats{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; }
@media (max-width:1100px){ .pk-seats{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); } }
.pk-seat{ background:var(--card); border:1.5px solid var(--line); border-radius:var(--r); padding:9px 12px 10px; display:flex; flex-direction:column; gap:6px; min-width:0; position:relative; }
.pk-seat.off{ opacity:.45; }
.pk-seat.hero{ border-color:color-mix(in srgb, var(--gold) 45%, var(--line)); }
.pk-seat.act{ border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent), 0 10px 28px rgba(0,0,0,.35); }
.pk-seat.fold{ opacity:.5; } .pk-seat.allin{ border-color:var(--red); }
.pk-seat-h{ display:flex; align-items:center; gap:8px; min-width:0; }
.pk-name{ font-size:15px; flex:1; } .pk-namein{ flex:1; min-width:0; background:transparent; border:0; border-bottom:1px dashed var(--line); color:var(--ink); font:700 15px Inter,sans-serif; padding:2px 0; }
.pk-namein:focus,.pk-stackin:focus{ outline:none; border-color:var(--acc); }
.pk-pos{ font-size:10px; font-weight:800; letter-spacing:.8px; padding:3px 7px; border-radius:7px; background:var(--card2); color:var(--ink2); border:1px solid var(--line); white-space:nowrap; }
.pk-dealer{ width:22px; height:22px; border-radius:50%; background:#f3eee0; color:#16201a; font:800 12px/22px Inter; text-align:center; flex:none; } .pk-dealer.next{ opacity:.35; }
.pk-tick{ position:relative; width:38px; height:22px; flex:none; cursor:pointer; }
.pk-tick input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; width:100%; height:100%; }
.pk-tick i{ position:absolute; inset:0; border-radius:99px; background:var(--card2); border:1px solid var(--line); transition:.15s; }
.pk-tick i::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--mute); transition:.15s; }
.pk-tick input:checked + i{ background:var(--acc); border-color:var(--acc); } .pk-tick input:checked + i::after{ left:18px; background:#fff; }
.pk-tick input:disabled + i{ opacity:.6; }
.pk-seat-m{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; min-height:46px; }
.pk-stackbox small,.pk-betbox small{ display:block; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--mute); }
.pk-stack{ font-family:var(--disp); font-weight:400; font-size:26px; letter-spacing:.4px; line-height:1.05; }
.pk-stackin{ width:100%; max-width:118px; background:transparent; border:0; border-bottom:1px dashed var(--line); color:var(--ink); font:400 28px var(--disp); letter-spacing:.4px; padding:0; }
.pk-betbox{ text-align:right; } .pk-betbox b{ font-family:var(--disp); font-weight:400; font-size:22px; color:var(--gold); letter-spacing:.4px; }
.pk-hole{ display:flex; gap:4px; }
.pk-seat-s{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pk-status{ font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; border-radius:7px; background:var(--card2); color:var(--ink2); }
.pk-status.toact{ background:var(--acc); color:var(--acc-ink); } .pk-status.folded{ color:var(--mute); } .pk-status.allin{ background:color-mix(in srgb, var(--red) 22%, transparent); color:var(--red); }
.pk-pl{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; margin-left:auto; color:var(--mute); } .pk-pl.up{ color:var(--acc); } .pk-pl.down{ color:var(--red); }
.pk-mini{ font-size:11px; font-weight:700; color:var(--ink2); padding:3px 8px; border-radius:7px; border:1px solid var(--line); }
.pk-mini:hover{ color:var(--ink); border-color:var(--acc); }
.pk-seat-r{ display:flex; flex-direction:column; gap:5px; border-top:1px solid var(--line); padding-top:8px; }
.pk-chips{ display:flex; flex-wrap:wrap; gap:4px 10px; font-size:11px; color:var(--mute); } .pk-chips b{ color:var(--ink); font-weight:700; }
.pk-style{ font-size:12px; font-weight:700; color:var(--gold); } .pk-style.dim{ color:var(--mute); font-weight:500; }
.pk-range{ position:relative; height:18px; border-radius:6px; background:var(--card2); overflow:hidden; }
.pk-range i{ position:absolute; left:0; top:0; bottom:0; background:color-mix(in srgb, var(--acc) 30%, transparent); }
.pk-range span{ position:relative; font-size:10.5px; font-weight:700; line-height:18px; padding:0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }

/* board */
.pk-slots{ display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; }
.pk-slot{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:3px; border-radius:9px; border:1.5px solid transparent; } .pk-slot .pc{ width:42px; height:60px; } .pk-slot .pc b{ font-size:26px; } .pk-slot .pc i{ font-size:19px; }
.pk-slot small{ font-size:10px; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.6px; }
.pk-slot.next{ border-color:var(--acc); background:color-mix(in srgb, var(--acc) 10%, transparent); }
.pk-bd{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.pk-yours{ padding-right:16px; border-right:1px solid var(--line); } .pk-yours small{ display:block; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--mute); margin-bottom:4px; }
.pk-yc{ display:flex; gap:6px; }
.pk-h .warn-t{ color:var(--amber); font-weight:700; }

/* picker */
.pk-pickrow{ display:grid; grid-template-columns:repeat(13, minmax(0, 1fr)); gap:4px; } .pk-pickrow + .pk-pickrow{ margin-top:4px; }
.pk-pick{ height:33px; border-radius:7px; background:#f1ecdd; color:#16201a; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--disp); line-height:.95; transition:transform .06s; }
.pk-pick{ flex-direction:row; gap:1px; } .pk-pick b{ font-weight:400; font-size:16px; } .pk-pick i{ font-style:normal; font-size:13px; }
.pk-pick.s1,.pk-pick.s2{ color:#c8262e; }
.pk-pick:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.4); }
.pk-pick:disabled{ opacity:.18; cursor:default; }
.pk-pend{ color:var(--acc); font-size:14px; }

/* actions */
.pk-actrow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pk-actrow .pk-btn{ flex:1; min-height:48px; font-size:15px; }
.pk-btn.fold{ color:var(--red); } .pk-btn.call{ color:var(--acc); } .pk-btn.raise{ color:var(--gold); }
.pk-btn.rec{ box-shadow:0 0 0 2px currentColor; }
.pk-raise{ display:flex; gap:8px; align-items:center; margin-top:8px; }
.pk-raise label{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--ink2); white-space:nowrap; }
.pk-raise input{ flex:1; min-width:0; height:44px; border-radius:11px; background:var(--bg); border:1px solid var(--line); color:var(--ink); font:400 24px var(--disp); letter-spacing:.5px; padding:0 12px; }
.pk-raise input:focus{ outline:none; border-color:var(--acc); }
.pk-raise .pk-btn{ min-height:44px; flex:none; }
.pk-presets{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.pk-preset{ flex:1; min-width:64px; padding:6px 6px 5px; border-radius:10px; background:var(--card2); border:1px solid var(--line); font-size:12px; font-weight:800; display:flex; flex-direction:column; align-items:center; gap:1px; }
.pk-preset small{ font-size:10.5px; font-weight:600; color:var(--mute); } .pk-preset:hover:not(:disabled){ border-color:var(--acc); }
.pk-actrow .pk-btn.apply{ flex:1.3; }
/* the quick mode: a bet or raise is a size in x, acted at once */
.pk-seg{ display:flex; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:3px; align-self:center; }
.pk-seg button{ min-height:32px; padding:0 13px; border-radius:8px; font-size:12.5px; font-weight:800; color:var(--ink2); }
.pk-seg button.on{ background:var(--acc); color:var(--acc-ink); }
.pk-topbtns{ align-items:center; }
.pk-qrow{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.pk-qlabel{ font-size:12px; font-weight:800; color:var(--ink2); } .pk-qlabel small{ font-weight:600; color:var(--mute); }
.pk-quick .pk-presets{ margin-top:0; } .pk-quick .pk-preset{ min-height:50px; font-size:14px; justify-content:center; }
.pk-preset.std{ border-color:color-mix(in srgb, var(--gold) 55%, var(--line)); }
.pk-preset.rec{ box-shadow:0 0 0 2px var(--acc); }
.pk-preset small kbd{ font-size:9px; padding:2px 4px; }
.pk-act.mine{ border-color:color-mix(in srgb, var(--acc) 70%, var(--line)); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 16%, transparent); }
.pk-inline{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--ink2); }
.pk-inline select{ background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:7px 9px; font:600 13px Inter; }
.pk-pot{ margin:8px 0; } .pk-pot b{ font-size:14px; }
.pk-winners{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.pk-win{ padding:9px 16px; border-radius:10px; background:var(--card2); border:1.5px solid var(--line); font-weight:800; font-size:14px; }
.pk-win.on{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); }
.pk-result{ font-size:14px; color:var(--ink2); line-height:1.5; margin-bottom:10px; } .pk-result b{ color:var(--ink); }

/* advice */
.pk-adv{ display:flex; flex-direction:column; min-height:0; max-height:calc(100vh - 78px); overflow:auto; }
.pk-big{ font-family:var(--disp); font-size:60px; line-height:1; letter-spacing:1.5px; margin:2px 0 4px; }
.pk-big.fold{ color:var(--red); } .pk-big.call{ color:var(--acc); } .pk-big.raise{ color:var(--gold); } .pk-big.dim{ color:var(--ink2); font-size:34px; }
.pk-sub{ font-size:13px; font-weight:700; color:var(--ink2); margin-bottom:6px; }
.pk-handline{ font-size:14px; color:var(--ink2); margin:4px 0 10px; } .pk-handline b{ color:var(--ink); }
.pk-eqrow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.pk-eqnum b{ display:block; font-family:var(--disp); font-weight:400; font-size:38px; line-height:1; letter-spacing:.5px; } .pk-eqnum span{ font-size:11px; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.5px; }
.pk-eqnum.small b{ font-size:26px; color:var(--ink2); } .pk-eqnum.good b{ color:var(--acc); } .pk-eqnum.bad b{ color:var(--red); }
.pk-eqbar{ flex:1; min-width:120px; height:12px; border-radius:6px; background:var(--card2); overflow:hidden; display:flex; }
.pk-eqbar .w{ background:var(--acc); } .pk-eqbar .t{ background:#8b9a90; } .pk-eqbar .l{ background:var(--red); opacity:.75; }
.pk-evs{ border:1px solid var(--line); border-radius:12px; padding:6px 10px; margin-bottom:10px; background:var(--bg2); }
.pk-evh,.pk-ev{ display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(60px, 1fr) 62px 62px; gap:8px; align-items:center; font-size:12.5px; padding:4px 0; }
.pk-evh{ font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--mute); }
.pk-ev + .pk-ev{ border-top:1px solid var(--line); }
.pk-ev .n{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pk-ev .b{ height:8px; border-radius:4px; background:rgba(255,255,255,.06); overflow:hidden; } .pk-ev .b i{ display:block; height:100%; background:var(--acc); border-radius:4px; }
.pk-ev.neg .b i{ background:var(--red); opacity:.7; } .pk-ev b{ text-align:right; font-variant-numeric:tabular-nums; } .pk-ev small{ color:var(--mute); font-size:11px; }
.pk-ev.best{ background:color-mix(in srgb, var(--acc) 10%, transparent); border-radius:8px; margin:0 -6px; padding:4px 6px; }
.pk-ev.best .n::before{ content:'\2192 '; color:var(--acc); }
.pk-tagrow{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.pk-tag{ font-size:11px; font-weight:700; padding:4px 9px; border-radius:8px; background:var(--card2); color:var(--ink2); border:1px solid var(--line); }
.pk-tag.wet{ color:var(--amber); border-color:color-mix(in srgb, var(--amber) 40%, transparent); } .pk-tag.dry{ color:var(--blue); } .pk-tag.good{ color:var(--acc); border-color:color-mix(in srgb, var(--acc) 40%, transparent); }
.pk-reasons{ margin:0; padding-left:18px; font-size:13px; line-height:1.55; color:var(--ink2); } .pk-reasons li{ margin-bottom:5px; } .pk-reasons b{ color:var(--ink); } .pk-reasons.dim{ color:var(--mute); }

/* stats and history */
.pk-tablewrap{ overflow-x:auto; }
.pk-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.pk-table th,.pk-table td{ padding:7px 4px; text-align:right; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pk-table tr:first-child th{ border-top:0; font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--mute); }
.pk-table th:first-child,.pk-table td.sty{ text-align:left; } .pk-table td.sty{ color:var(--gold); font-weight:600; max-width:84px; overflow:hidden; text-overflow:ellipsis; }
.pk-table tr.me th:first-child{ color:var(--gold); } .pk-table td.up{ color:var(--acc); font-weight:800; } .pk-table td.down{ color:var(--red); font-weight:800; }
.pk-spark{ display:block; margin-left:auto; width:52px; height:16px; } .pk-spark line{ stroke:rgba(255,255,255,.18); stroke-width:1; } .pk-spark polyline{ fill:none; stroke:var(--acc); stroke-width:1.6; stroke-linejoin:round; }
.pk-hist{ max-height:340px; overflow:auto; }
.pk-hrow{ display:grid; grid-template-columns:34px auto 1fr auto 64px; gap:8px; align-items:center; padding:6px 0; border-top:1px solid var(--line); font-size:12px; }
.pk-hrow:first-of-type{ border-top:0; }
.pk-hrow .no{ color:var(--mute); font-weight:700; } .pk-hrow .cds,.pk-hrow .bd{ display:flex; gap:2px; } .pk-hrow .pt{ color:var(--gold); font-weight:700; } .pk-hrow b{ text-align:right; font-variant-numeric:tabular-nums; }
.pk-hrow .oth{ grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:2px 10px; font-size:11px; color:var(--mute); } .pk-hrow .oth .up{ color:var(--acc); } .pk-hrow .oth .down{ color:var(--red); }
.pk-topup input{ width:100%; height:50px; border-radius:12px; background:var(--bg); border:1px solid var(--line); color:var(--ink); font:400 28px var(--disp); padding:0 14px; }