/* Deal Table board — shared by the live table, the replay page and the recorded-game viewer.
   Extracted from site/public/table.html; schematic cards with original icons, no Hasbro artwork. */
:root{--ground:#e7eee3;--felt:#2f5a42;--felt2:#27503a;--card:#fffdf7;--ink:#1c2420;--muted:#5c6b62;--line:#b9c8b3;--accent:#e0a63b;--panel:#f6f8f3;--back:#7a2e2e;--lane:rgba(0,0,0,.16);--good:#9be3b5;--bad:#e07b6a;
 --brown:#7a4a2b;--lblue:#8fc6e8;--pink:#d95c9e;--orange:#ef8f2a;--red:#cf3a35;--yellow:#e8c43a;--green:#2e8b57;--dblue:#2b4a9c;--rail:#3a3a3a;--util:#9aa27a;--money:#4f8a5b;--action:#6d6a8f;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ground:#121b16;--felt:#24483a;--felt2:#1d3d30;--ink:#e8efe9;--muted:#9fb3a6;--line:#2f4a3b;--panel:#1a2620;}}
:root[data-theme="dark"]{--ground:#121b16;--felt:#24483a;--felt2:#1d3d30;--ink:#e8efe9;--muted:#9fb3a6;--line:#2f4a3b;--panel:#1a2620;}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif;padding-inline:16px;padding-block:12px;overflow-x:hidden}
img{max-width:100%}[hidden]{display:none!important}*{box-sizing:border-box}
.wrap{max-width:1280px;margin:0 auto}
nav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:6px 0 12px;font-size:.9rem}
nav b{font-family:"Fraunces",Georgia,serif;font-size:1.1rem;margin-right:auto}nav b a{text-decoration:none}
nav a{color:var(--ink);text-decoration:none;opacity:.85}nav a:hover{opacity:1;text-decoration:underline}
nav a.cross{opacity:.62}nav a.cross::after{content:"\2197";font-size:.78em;margin-left:2px;vertical-align:.12em}
h1{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:clamp(1.4rem,3vw,2rem);margin:0;line-height:1.1}
h2{font-family:"Fraunces",Georgia,serif;font-size:1.2rem;margin:0 0 8px}
button,select,input{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:7px 11px;font:inherit;font-size:.9rem}
button{cursor:pointer}button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:#1c1a12;font-weight:600}
button.ghost{background:transparent}
label.tg{display:inline-flex;gap:6px;align-items:center;font-size:.85rem;color:var(--muted)}
.table{background:radial-gradient(ellipse at center,var(--felt),var(--felt2));border-radius:28px;padding:14px;
  color:#f3f6ef;position:relative;display:flex;flex-direction:column;gap:10px}
.felt{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto auto;gap:10px}
.felt>*,.table>*{min-width:0}
.seat{background:rgba(0,0,0,.18);border-radius:14px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;min-width:0;height:100%}
.seat.active{outline:2px solid var(--accent)}
.seat.offline{opacity:.75}
.who{font-weight:600;font-size:.9rem;display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}
.who .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:5px;min-width:0}
.av{flex:none;vertical-align:-3px}
.av .avbg{fill:var(--av);opacity:.9}
.av .avfg{fill:rgba(18,26,21,.92)}
.who .nm small{font-weight:400;opacity:.75;font-size:.72rem;margin-left:6px}
.who .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bad);margin-right:6px;vertical-align:middle}
.who .dot.on{background:var(--good)}
.hmini{position:relative;height:20px;display:inline-flex;align-items:center;font-weight:500;font-size:.85rem}
.hmini i{position:absolute;top:0;width:14px;height:20px;border-radius:2px;background:repeating-linear-gradient(45deg,var(--back),var(--back) 2px,#5e2222 2px,#5e2222 4px);border:1px solid #3a1515}
.hmini b{font-family:"IBM Plex Mono",monospace;font-weight:500}
.wp{height:6px;border-radius:3px;background:rgba(0,0,0,.35);overflow:hidden;display:none}.wp i{display:block;height:100%;background:var(--good);width:0;transition:width .5s}
.showwp .wp{display:block}.wp-txt{display:none;font-family:"IBM Plex Mono",monospace;font-size:.9rem;min-width:3ch;text-align:right}.showwp .wp-txt{display:inline}
.wp-txt.waiting{font-size:.68rem;opacity:.75;font-family:inherit;letter-spacing:.01em;white-space:nowrap}
.wp.waiting{background:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 6px,rgba(255,255,255,.08) 6px 12px)}
.lane{background:var(--lane);border-radius:10px;padding:6px 8px 8px;position:relative}
.lane .lab{position:absolute;top:4px;left:8px;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.lane .in{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-start;padding-top:12px;min-height:96px;max-height:220px;overflow:auto}
.opp .lane.played .in{min-height:92px}
.me .lane.hand .in{min-height:84px}
.me .lanes,.opp .lanes{display:grid;grid-template-columns:1fr;gap:6px}
.center{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:flex-start;text-align:center;
  min-width:0;font-size:.8rem;padding:4px 2px}
.piles{display:flex;gap:10px;align-items:flex-start;flex:none}
.pile{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.7rem;opacity:.9;flex:none}
.pile .plab{display:block;line-height:1.1;white-space:nowrap}
.turnline{flex:none;line-height:1.25;max-width:100%}
.pilewrap{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;flex:none}
.pilewrap.bank{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:5px 6px 4px}
.cap{font-size:.6rem;letter-spacing:.03em;white-space:nowrap;opacity:.9}
.cap b{font-family:"IBM Plex Mono",monospace;font-weight:500}
.stack{display:flex;align-items:flex-end;position:relative;flex:none}
.stack .c{margin-left:-24px}.stack .c:first-child{margin-left:0}
.stack.full .c{box-shadow:0 0 0 2px var(--accent),0 1px 2px rgba(0,0,0,.3)}
.c{width:46px;height:64px;border-radius:5px;background:var(--card);border:1px solid rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.3);color:#1c2420;flex:none;position:relative;will-change:transform}
.c .band{height:13px;background:var(--action);flex:none}
.c .band.split{background:linear-gradient(90deg,var(--a) 50%,var(--b) 50%)}
.c .band.any{background:linear-gradient(90deg,var(--brown),var(--lblue),var(--pink),var(--orange),var(--red),var(--yellow),var(--green),var(--dblue))}
.c .band.asany{background:linear-gradient(180deg,var(--set) 0 calc(100% - 5px),transparent calc(100% - 5px)),linear-gradient(90deg,var(--brown),var(--lblue),var(--pink),var(--orange),var(--red),var(--yellow),var(--green),var(--dblue));box-shadow:inset 0 -5px 0 rgba(255,255,255,.18)}
.c .band.asplit{background:linear-gradient(180deg,var(--set) 0 calc(100% - 5px),transparent calc(100% - 5px)),linear-gradient(90deg,var(--a) 50%,var(--b) 50%)}
.c svg{width:22px;height:22px;margin:3px auto 0;flex:none;stroke:#1c2420;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.c .nm{font-size:.5rem;line-height:1.05;text-align:center;padding:1px 2px;font-weight:600;flex:1 1 auto;min-height:0;overflow:hidden}
/* flex:none keeps the value on the card when a two-line name ("Deal Breaker", "Just Say No") grows the label */
.c .v{font-family:"IBM Plex Mono",monospace;font-size:.6rem;padding:0 3px 2px;text-align:right;color:#3b4a40;flex:none}
.c.back{background:repeating-linear-gradient(45deg,var(--back),var(--back) 4px,#5e2222 4px,#5e2222 8px);border-color:#3a1515}
.c.playable{box-shadow:0 0 0 2px var(--accent),0 1px 2px rgba(0,0,0,.3);cursor:pointer}
.c.sel{box-shadow:0 0 0 3px #fff,0 4px 8px rgba(0,0,0,.4);transform:translateY(-6px)}
.c.dim{opacity:.4}
.c.enter{animation:pop .35s ease-out}.c.leave{opacity:0;transform:scale(.6);transition:all .3s}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:12px}
.note{font-family:"Fraunces",Georgia,serif;font-size:1.15rem;margin:6px 0 4px;min-height:1.6em}
.hist{color:var(--muted);font-size:.85rem;line-height:1.5}
.foot{color:var(--muted);font-size:.8rem;margin-top:14px;max-width:75ch}
@media (max-width:760px){.felt{grid-template-columns:minmax(0,1fr)}.felt>*{grid-area:auto !important}.lane .in{max-height:160px}}
@media (prefers-reduced-motion: reduce){.c.enter,.c.leave{transition:none;animation:none}}
/* drag and drop */
.c.drag{touch-action:none;cursor:grab}
.c.dragging{opacity:.35}
/* The drag ghost is always a cloned CARD. Scoped to .c so it cannot swallow button.ghost, which is
   the transparent-button style: an unscoped .ghost made every such button fixed and unclickable. */
.c.ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-60%) scale(1.08) rotate(-3deg);box-shadow:0 10px 24px rgba(0,0,0,.45)}
.c.undecided{outline:2px dashed rgba(255,255,255,.7);outline-offset:-2px}
.pilewrap.lone .cap{font-style:italic}
.dropspace{min-width:56px;min-height:64px;border:2px dashed transparent;border-radius:8px;flex:1;align-self:stretch;min-height:70px}
[data-zone].dz{outline:2px dashed var(--accent);outline-offset:3px;border-radius:10px;background:rgba(224,166,59,.12)}
.lane[data-zone].dz{outline-offset:-2px}
.seat[data-zone].dz{outline:2px dashed var(--accent);outline-offset:-2px}
.dropspace.dz{border-color:var(--accent);background:rgba(224,166,59,.15)}
[data-zone].dz.over{background:rgba(224,166,59,.32);outline-style:solid}
.chooser{position:fixed;z-index:60;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:8px 10px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:6px;max-width:min(94vw,520px)}
.chooserhead{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.72rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.chooser .x{font-size:.75rem;color:var(--muted);background:none;border:0;padding:2px 4px}
/* A choice between cards is made by looking at the cards; the list underneath is the keyboard path. */
.cardopts{display:flex;flex-wrap:wrap;gap:8px;max-height:46vh;overflow:auto;padding:2px}
.cardopt{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px;border:1px solid var(--line);
  border-radius:10px;background:var(--ground);cursor:pointer;max-width:132px;color:var(--ink)}
.cardopt:hover,.cardopt:focus-visible{border-color:var(--accent);background:var(--panel)}
.cardopt .face{line-height:0}
.cardopt .cap3{font-size:.68rem;color:var(--muted);line-height:1.2;text-align:center;overflow-wrap:anywhere}
.cardopt .warn{font-size:.62rem;color:var(--bad);line-height:1.2;text-align:center}
.cardopt.risky{border-color:var(--bad);border-style:dashed}
.cardopt.confirm{border-style:solid;border-color:var(--bad);background:rgba(207,58,53,.14)}
.cardopt.confirm .cap3{color:var(--bad);font-weight:700}
.listopt{display:block;width:100%;text-align:left;font-size:.85rem;margin-top:4px}
.pick .pickone{display:inline-flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.pick .pickone .cap3{font-size:.62rem;color:var(--muted)}
.pick .pickone.on .cap3{color:var(--accent)}
.hint{font-size:.85rem;color:var(--muted);margin:4px 0 6px}
details.fallback{margin-top:8px}details.fallback summary{cursor:pointer;color:var(--muted);font-size:.85rem}
.table.armed .me .lane.hand .c.drag{box-shadow:0 0 0 2px var(--accent),0 1px 2px rgba(0,0,0,.3)}

/* No Limit Deal chips (play chips, no cash value) */
.chipline{display:flex;gap:6px;align-items:center;font-size:.78rem;margin-top:2px}
.chipline.out{opacity:.6}
.chipstack{font-family:"IBM Plex Mono",monospace;font-weight:600;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:1px 8px}
/* A pile of play chips. Height and colour read the count; the number stays beside it. */
/* `.chips` is the play-chip stack. It is deliberately NOT called `.pile`: that is the draw/discard
   pile in the middle of the table, and sharing the name collapsed those boxes under the turn line. */
.chips{position:relative;display:inline-block;width:22px;height:26px;flex:none;vertical-align:bottom}
.chips.empty{opacity:.25}
.chips .chip{position:absolute;left:0;width:22px;height:7px;border-radius:50%/50%;border:1px solid rgba(0,0,0,.45);
  box-shadow:0 1px 0 rgba(0,0,0,.35);background:var(--chip,#eee)}
.chips .chip.w{--chip:#f4f1e8}
.chips .chip.r{--chip:#c5453f}
.chips .chip.g{--chip:#2f7d52}
.chips .chip.more{--chip:#8d97a1;bottom:36px;height:4px;opacity:.75}
.bills{position:relative;display:inline-block;width:16px;height:14px;margin-right:5px;vertical-align:-3px}
.bills i{position:absolute;width:15px;height:7px;border-radius:2px;background:linear-gradient(180deg,#6fae7e,#4f8a5b);
  border:1px solid rgba(0,0,0,.4);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.chips.pot{width:26px;height:38px}
.chips.pot .chip{width:26px;height:8px}
.pot{flex:none;width:100%}
.pot .potrow{display:flex;gap:10px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.pot .potpile{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:46px;max-width:100%}
.pot .potamt{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:.95rem;line-height:1.1}
/* one line, elided: the full list of contesting seats is on the title attribute */
.pot .potwho{font-size:.58rem;opacity:.85;max-width:14ch;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* chips in flight, from a seat to the pot and back again */
.chipfly{position:fixed;z-index:45;width:22px;height:7px;border-radius:50%/50%;border:1px solid rgba(0,0,0,.45);
  background:var(--chip,#f4f1e8);pointer-events:none;will-change:transform,opacity}
@media (prefers-reduced-motion: reduce){.chipfly{display:none}}
.chipline em{font-style:normal;font-family:"IBM Plex Mono",monospace;opacity:.85}
.ctag{text-transform:uppercase;letter-spacing:.06em;font-size:.6rem;opacity:.85;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:1px 6px}
.ctag.act{background:var(--accent);color:#1c1a12;border-color:var(--accent);font-weight:600;opacity:1}
.seat.frozentable{opacity:.62;filter:grayscale(.45)}
.seat.frozentable .lane{outline:1px dashed rgba(255,255,255,.25)}
.pot{margin-top:4px;font-size:.85rem}
.pot b{font-family:"IBM Plex Mono",monospace;font-size:1.05rem}
.pot .pots{font-size:.7rem;opacity:.85;font-family:"IBM Plex Mono",monospace}
.pot .potsub{font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;opacity:.7}