/* Felt board, copied from liars_poker/visuals/arena.py (felt skin) and arena_backend.py (COMMON_CSS, calculator part). */
.calc-frame { --k:1; --cc-hk:calc(var(--cc-h) * var(--k)); --cc-wk:calc(var(--cc-w) * var(--k)); --cc-fsk:calc(var(--cc-fs) * var(--k)); display:flex; flex-direction:column; min-height:0; gap:10px; }
.calc-head { display:flex; align-items:center; gap:12px; min-height:30px; }
.calc-read { flex:1; min-width:0; font-size:var(--calc-read-fs, 15px); color:var(--cc-hdr); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calc-read b { color:var(--cc-read-strong, inherit); }
.calc-sw { display:flex; border:1px solid var(--cc-sw-border); border-radius:8px; overflow:hidden; flex-shrink:0; }
.calc-sw .cs { background:transparent; border:0; color:var(--cc-hdr); font-family:inherit; font-size:12px; font-weight:700; padding:5px 11px; cursor:pointer; letter-spacing:.04em; }
.calc-sw .cs.on { background:var(--cc-sw-on-bg); color:var(--cc-sw-on-fg); }
.calc-body { flex:1; min-height:0; overflow:auto; padding:2px 2px 6px; }
.cc { position:relative; display:inline-flex; align-items:center; justify-content:center; height:var(--cc-hk); min-width:var(--cc-wk); padding:0 calc(8px * var(--k)); box-sizing:border-box;
  border:1px solid var(--cc-border); border-radius:var(--cc-radius); background:var(--cc-bg); color:var(--cc-fg); font-family:var(--cc-font); font-weight:var(--cc-weight, 700);
  font-size:var(--cc-fsk); letter-spacing:.03em; cursor:pointer; overflow:hidden; white-space:nowrap; transition:transform .08s, background .08s, box-shadow .08s; }
.cc.ok { box-shadow:var(--cc-shadow, none); }
.cc.ok:hover { background:var(--cc-hover-bg); transform:translateY(-1px); box-shadow:var(--cc-hover-shadow, 0 4px 10px rgba(0,0,0,.25)); }
.cc.dead { background:var(--cc-dead-bg); color:var(--cc-dead-fg); border-color:transparent; cursor:default; }
.cc.cur { background:var(--cc-cur-bg); color:var(--cc-cur-fg); box-shadow:inset 0 0 0 2px var(--cc-cur-ring); }
.cc .cc-o { position:absolute; top:1px; right:3px; font-family:var(--cc-odds-font, system-ui, sans-serif); font-size:9.5px; font-weight:700; color:var(--cc-odds-fg); letter-spacing:0; }
.cc .cc-b { position:absolute; left:0; bottom:0; height:3px; width:calc(var(--o) * 100%); background:var(--cc-bar); }
.cc .cc-m { position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; font-family:system-ui, sans-serif; font-size:8.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.cc.by-you .cc-m { background:var(--cc-you); color:#111; } .cc.by-bot .cc-m { background:var(--cc-bot); color:#fff; }
.cc-void { display:block; }
.cc-hdr { text-align:center; font-family:var(--cc-font); font-weight:700; font-size:calc(var(--cc-fsk) * .9); color:var(--cc-hdr); line-height:1; }
.cc-hdr i { display:block; font-style:normal; font-size:8px; letter-spacing:1px; color:var(--cc-you); height:10px; margin-top:2px; }
.cc-hdr em { display:block; font-style:normal; font-family:var(--cc-odds-font, system-ui, sans-serif); font-size:10px; font-weight:700; color:var(--cc-bot); margin-top:1px; letter-spacing:0; }
.cg-lab, .ct-lab, .cr-lab { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cc-hdr); padding-right:10px; white-space:nowrap; text-align:right; }
.ct-lab small { display:block; font-size:10px; font-weight:500; letter-spacing:.01em; text-transform:none; opacity:.7; margin-top:2px; }
/* grid */
.calc-grid { display:flex; flex-wrap:wrap; gap:calc(16px * var(--k)) calc(28px * var(--k)); align-items:flex-start; }
.cg-title { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cc-hdr); font-weight:700; margin-bottom:6px; }
.cg-title small { letter-spacing:.02em; text-transform:none; font-weight:500; opacity:.75; }
.cg { display:grid; gap:calc(4px * var(--k)); align-items:center; }
/* table */
.calc-table { display:grid; gap:5px 5px; align-items:center; max-width:var(--ct-max, 1200px); }
.ct-cell { display:flex; gap:3px; flex-wrap:wrap; align-items:center; min-width:0; container-type:inline-size; }
.ct-cell > .cc { flex:1 1 auto; min-width:0; }
.ct-cell.multi > .cc { flex:1 1 24px; min-width:24px; padding:0 2px; height:calc(var(--cc-hk) * .82); font-size:calc(var(--cc-fsk) * .78); }
.ct-cell.multi .cc-o { display:none; }
.ct-lead { display:none; font-family:var(--cc-font); font-weight:700; font-size:calc(var(--cc-fsk) * .7); color:var(--cc-hdr); padding-right:2px; }
@container (min-width: 190px) { .ct-lead { display:inline; } }
/* rows */
.calc-rows { display:grid; grid-template-columns:auto 1fr; gap:calc(6px * var(--k)) 4px; align-items:center; }
.cr-chips { display:flex; flex-wrap:wrap; gap:calc(4px * var(--k)); }
.cr-chips .cc.wide { padding:0 9px; }

/* ---------------- skins ---------------- */
.lp-root {
  --bg:radial-gradient(120% 90% at 40% 45%, #145238 0%, #0e3b2c 60%, #082419 100%);
  --ink:#f3efe3; --soft:#9fc1ae; --line:rgba(255,255,255,.12); --panel:rgba(0,0,0,.24); --you:#f5c542; --bot:#ff6f5b;
  --font-ui:'Inter',system-ui,sans-serif; --font-display:'Barlow Condensed',sans-serif; --display-weight:800; --radius:14px;
  --card-bg:#fbf8ef; --card-fg:#1d1d1d; --card-border:0; --card-shadow:0 4px 0 rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.3);
  --card-back:repeating-linear-gradient(45deg,#8a2c22 0 7px,#a8392c 7px 14px); --card-back-border:3px solid #fbf8ef;
  --btn-bg:rgba(255,255,255,.08); --btn-fg:var(--ink); --btn-border:1px solid var(--line); --btn-on-bg:var(--ink); --btn-on-fg:#12291f;
  --call-bg:#ff6f5b; --call-fg:#fff; --call-shadow:0 5px 0 #a5382b; --call-border:0; --call-off-bg:#3d5a4d; --call-off-fg:#7f9b8d;
  --modal-bg:#10271e; --good:#2fb57a;
  --cc-bg:rgba(255,255,255,.93); --cc-fg:#14261d; --cc-border:rgba(255,255,255,.2); --cc-radius:7px; --cc-font:'Barlow Condensed',sans-serif; --cc-weight:700;
  --cc-fs:18px; --cc-h:36px; --cc-w:52px; --cc-shadow:none; --cc-hover-bg:#fff; --cc-hover-shadow:0 4px 10px rgba(0,0,0,.25);
  --cc-dead-bg:rgba(0,0,0,.18); --cc-dead-fg:rgba(255,255,255,.26); --cc-cur-bg:#08251a; --cc-cur-fg:#fff; --cc-cur-ring:var(--ink);
  --cc-you:var(--you); --cc-bot:var(--bot); --cc-bar:linear-gradient(90deg,#2fb57a,#8ee06a); --cc-odds-fg:#3b7a5c; --cc-odds-font:'Inter',sans-serif;
  --cc-hdr:var(--soft); --cc-sw-border:var(--line); --cc-sw-on-bg:var(--ink); --cc-sw-on-fg:#12291f; --cc-read-strong:var(--ink);
}
/* ---------------- layout ---------------- */
.lp-root { height:100vh; box-sizing:border-box; display:grid; grid-template-rows:auto auto 1fr; overflow:hidden;
  background:var(--bg); color:var(--ink); font-family:var(--font-ui); }
button { font-family:inherit; cursor:pointer; color:inherit; }
.top { display:flex; align-items:center; gap:8px; padding:9px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-family:var(--font-display); font-weight:var(--display-weight); font-size:25px; letter-spacing:.02em; margin-right:4px; white-space:nowrap; }
.brand span { color:var(--bot); }
.brand { text-transform:uppercase; letter-spacing:.06em; } .brand span { color:var(--you); }
.opp { display:flex; flex-direction:column; line-height:1.15; padding:4px 12px; border-radius:10px; background:var(--btn-bg); border:var(--btn-border); text-align:left; }
.opp small { color:var(--soft); font-size:11px; } .opp b { font-size:14px; }
.spacer { flex:1; }
.score { display:flex; align-items:baseline; gap:8px; font-family:var(--font-display); font-weight:var(--display-weight); font-size:28px; }
.score .lbl { font-family:var(--font-ui); font-size:11px; letter-spacing:.12em; color:var(--soft); font-weight:600; }
.score .y { color:var(--you); } .score .b { color:var(--bot); }
.seg { display:flex; border:var(--btn-border); border-radius:10px; overflow:hidden; }
.seg button { background:var(--btn-bg); border:0; padding:7px 10px; font-size:13px; font-weight:600; color:var(--soft); }
.seg button.on { background:var(--btn-on-bg); color:var(--btn-on-fg); }
.tbtn { background:var(--btn-bg); border:var(--btn-border); border-radius:10px; padding:7px 10px; font-size:13px; font-weight:600; white-space:nowrap; }
.tbtn.on { border-color:var(--you); color:var(--you); }
.tbtn kbd { font-family:inherit; font-size:11px; opacity:.55; margin-left:4px; }
.tbtn b { font-weight:800; }

/* strip: claim · hands (centred) · actions */
.strip { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; margin:12px 16px 0; padding:12px 20px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--line); }
.claimbox { justify-self:start; min-width:0; }
.claimbox small { display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); font-weight:700; }
.claimbox .name { font-family:var(--font-display); font-weight:var(--display-weight); font-size:clamp(24px,2.6vw,36px); line-height:1.05; margin:2px 0 6px; }
.claimbox .name.by-you { color:var(--you); } .claimbox .name.by-bot { color:var(--bot); }
.claimbox .name.fresh { animation:claimIn .3s ease-out .25s backwards; }
@keyframes claimIn { from { opacity:0; transform:translateY(6px); } }
.promise { display:flex; gap:4px; margin-bottom:4px; }
.pc { width:22px; height:30px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:15px; background:var(--card-bg); color:var(--card-fg); }
.pc.mine { box-shadow:0 0 0 2px var(--you); }
.pc.unk { background:transparent; color:var(--soft); border:1.5px dashed var(--soft); box-sizing:border-box; }
.claimbox .odds { font-size:13px; color:var(--soft); } .claimbox .odds b { color:var(--ink); }
.hands { display:flex; gap:22px; align-items:flex-end; justify-self:center; }
.seat .who { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); font-weight:700; margin-bottom:6px; display:flex; gap:8px; align-items:center; white-space:nowrap; }
.seat.you .who { color:var(--you); } .seat.bot .who { color:var(--bot); }
.cards { display:flex; gap:7px; }
.card { width:clamp(42px,3.8vw,64px); aspect-ratio:5/7; border-radius:9px; background:var(--card-bg); color:var(--card-fg); border:var(--card-border); box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; position:relative; font-family:var(--font-display); font-weight:800; font-size:clamp(26px,2.6vw,44px); box-shadow:var(--card-shadow); }
/* a card: a thin inner frame and a lift, so it never reads as a claim button */
.card { box-shadow:inset 0 0 0 3px var(--card-bg), inset 0 0 0 4px rgba(29,29,29,.2), var(--card-shadow); }
.card.back { background:var(--card-back); border:var(--card-back-border); box-shadow:var(--card-shadow); }
.card.hit { outline:3px solid var(--you); outline-offset:1px; }
.vs { align-self:center; font-weight:800; color:var(--soft); font-size:12px; letter-spacing:.14em; padding-top:16px; }
.status { font-size:11px; letter-spacing:.04em; text-transform:none; font-weight:600; color:var(--soft); }
.status.turn { color:var(--you); }
.dots i { display:inline-block; width:6px; height:6px; margin:0 1px; border-radius:50%; background:var(--bot); animation:blink 1s infinite; }
.dots i:nth-child(2){animation-delay:.2s} .dots i:nth-child(3){animation-delay:.4s}
@keyframes blink { 0%,100%{opacity:.2} 50%{opacity:1} }
.acts { justify-self:end; display:flex; gap:10px; align-items:stretch; }
.minr { background:var(--btn-bg); border:var(--btn-border); border-radius:12px; padding:6px 14px; text-align:left; font-size:15px; font-weight:700; }
.minr small { display:block; font-size:10px; letter-spacing:.14em; color:var(--soft); font-weight:600; }
.minr:disabled { opacity:.35; cursor:default; }
.call { background:var(--call-bg); color:var(--call-fg); border:var(--call-border); border-radius:12px; padding:10px 28px; font-family:var(--font-display); font-size:30px; font-weight:800; letter-spacing:.06em; box-shadow:var(--call-shadow); }
.call small { font-family:var(--font-ui); font-size:12px; opacity:.6; margin-left:6px; letter-spacing:0; }
.call:disabled { background:var(--call-off-bg); color:var(--call-off-fg); box-shadow:none; cursor:default; }
.call:not(:disabled):hover { filter:brightness(1.07); }

/* main */
.main { display:grid; grid-template-columns:1fr minmax(240px, 21vw); min-height:0; }
.work { padding:14px 18px 16px; min-height:0; display:flex; flex-direction:column; }
.work .calc-frame { flex:1; }
.side { margin:12px 16px 16px 0; border-radius:var(--radius); background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.sec { padding:12px 14px; border-bottom:1px solid var(--line); }
.sec h3 { margin:0 0 8px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); font-weight:700; }
.rng-row { display:grid; grid-template-columns:16px 1fr 34px; gap:8px; align-items:center; font-size:13px; padding:1px 0; }
.rng-row b { font-family:var(--font-display); font-size:15px; }
.rng-row i { height:7px; border-radius:4px; background:linear-gradient(90deg,var(--bot) calc(var(--v) * 100%), var(--line) 0); }
.rng-row em { font-style:normal; text-align:right; color:var(--soft); font-variant-numeric:tabular-nums; }
.rng-top { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.rng-top span { font-size:12px; padding:2px 7px; border-radius:7px; border:1px solid var(--line); color:var(--soft); }
.rng-top span b { font-family:var(--font-display); color:var(--ink); font-size:14px; margin-right:4px; }
.hist { flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:5px; }
.h { display:grid; grid-template-columns:20px 1fr; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; background:var(--btn-bg); }
.h .n { font-size:11px; color:var(--soft); font-weight:700; }
.h .t { font-size:clamp(14px,1.1vw,18px); font-weight:700; }
.h .w { font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.h.you { border-left:4px solid var(--you); } .h.you .w { color:var(--you); }
.h.bot { border-left:4px solid var(--bot); } .h.bot .w { color:var(--bot); }
.h.fresh { animation:pop .3s ease-out; } .h.bot.fresh { animation:pop .3s ease-out .25s backwards; }
@keyframes pop { from { transform:translateX(20px); opacity:0 } to { transform:none; opacity:1 } }
.hist .none { color:var(--soft); font-size:14px; padding:4px; }
.hold { padding:0 14px 12px; font-size:12px; color:var(--soft); }
.lp-pending .cc, .lp-pending .call, .lp-pending .minr { pointer-events:none; }

/* result */
.result { display:flex; flex-direction:column; gap:12px; justify-content:center; align-items:center; text-align:center; border-radius:var(--radius); background:var(--panel); border:1px solid var(--line); padding:18px; flex:1; min-height:0; overflow:auto; }
.result .big { font-family:var(--font-display); font-size:58px; font-weight:800; line-height:1; }
.result .big.you { color:var(--you); } .result .big.bot { color:var(--bot); }
.result .why { font-size:18px; max-width:760px; }
.counts { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.cnt { width:56px; padding:6px 0; border-radius:10px; background:var(--btn-bg); border:1px solid var(--line); font-family:var(--font-display); }
.cnt b { display:block; font-size:26px; } .cnt small { display:block; font-size:11px; color:var(--soft); font-family:var(--font-ui); }
.cnt.need { outline:2px solid var(--you); }
.again { background:var(--you); color:#14110a; border:0; border-radius:12px; padding:11px 26px; font-size:19px; font-weight:800; }
.lp-review { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.lp-review-move { background:var(--btn-bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px; min-width:230px; text-align:left; }
.lp-review-head { font-size:13px; color:var(--soft); margin-bottom:6px; } .lp-review-head b { color:var(--ink); }
.lp-review-row { display:grid; grid-template-columns:1fr 70px 40px; gap:8px; align-items:center; font-size:13px; padding:2px 0; }
.lp-review-row i { height:6px; border-radius:3px; background:linear-gradient(90deg,var(--bot) calc(var(--p)*100%), var(--line) 0); }
.lp-review-row em { font-style:normal; text-align:right; color:var(--soft); }
.lp-review-row.chosen span { color:var(--bot); font-weight:800; }

/* loader */
.lp-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:50; }
.lp-modal-card { width:min(820px,92vw); max-height:84vh; display:flex; flex-direction:column; background:var(--modal-bg); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lp-modal-head { display:flex; align-items:center; } .lp-modal-title { font-family:var(--font-display); font-size:28px; font-weight:800; flex:1; }
.lp-x { background:none; border:0; font-size:30px; }
.lp-pathrow { display:flex; gap:8px; margin:10px 0; }
.lp-path, .lp-filter { flex:1; background:var(--btn-bg); border:var(--btn-border); color:var(--ink); border-radius:10px; padding:10px 12px; font-size:14px; }
.lp-rescan { background:transparent; border:1px solid var(--line); color:inherit; border-radius:10px; padding:0 14px; font-weight:700; }
.lp-preset[hidden], .lp-group[hidden] { display:none !important; }
.lp-go { background:var(--you); color:#14110a; border:0; border-radius:10px; padding:0 20px; font-weight:800; }
.lp-err { color:var(--bot); margin-bottom:8px; }
.lp-presets { overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.lp-group { margin:10px 0 2px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); font-weight:700; }
.lp-preset { display:flex; justify-content:space-between; gap:12px; text-align:left; background:var(--btn-bg); border:1px solid transparent; border-radius:8px; padding:8px 10px; }
.lp-preset:hover { border-color:var(--you); } .lp-preset.current { border-color:var(--bot); }
.lp-preset-game { font-weight:700; font-size:14px; white-space:nowrap; } .lp-preset-rel { color:var(--soft); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.welcome { display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--soft); }

/* other screen shapes */
@media (orientation: portrait), (max-width: 1150px) {
  .top .spacer { display:none; } .top .score { margin-left:auto; }
  .strip { grid-template-columns:1fr auto; gap:14px 18px; margin:10px 12px 0; }
  .hands { grid-column:1 / -1; grid-row:1; }
  .main { grid-template-columns:1fr 220px; }
}
@media (orientation: portrait) {
  .main { grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .work { padding:12px; }
  .side { margin:0 12px 12px; height:min(26vh, 300px); }
}
@media (min-width: 2200px) and (min-height: 1250px) { .lp-root { zoom:1.35; height:calc(100vh / 1.35); } }
@media (min-width: 3200px) and (min-height: 1800px) { .lp-root { zoom:1.8; height:calc(100vh / 1.8); } }