:root{
  --bg:#171310; --bg2:#221B15; --panel:#2A2119; --ink:#F1E6D8; --ink-dim:#B8A98F;
  --accent:#C9722C; --accent-ink:#1B140D; --line:rgba(241,230,216,.14); --good:#7FB069; --bad:#C24B3F;
  --display:'Domine',Georgia,serif; --body:'Source Serif 4',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --billw:64px; --billw-desk:230px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body); line-height:1.5; min-height:100vh;
  padding-right:calc(var(--billw) + 10px);
}
a{color:inherit}
code,.mono{font-family:var(--mono)}
button{font-family:inherit; cursor:pointer}
h1,h2,h3{font-family:var(--display); font-weight:700; margin:0}

/* ---------- top chrome: brand + nav + connect (the buy control lives in the floating bill, not here) ---------- */
.cloche{
  position:sticky; top:0; z-index:25; display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-bottom:1px solid var(--line); background:var(--bg2);
}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:700; font-size:16px; flex:0 0 auto; min-width:0}
.brand img{width:26px; height:26px; border-radius:6px; display:block; object-fit:cover; flex:0 0 auto}
.chnav{display:none; flex:1 1 auto; gap:14px; font-size:13px; letter-spacing:.02em; min-width:0}
.chnav a{text-decoration:none; color:var(--ink-dim); white-space:nowrap}
.chnav a:hover{color:var(--accent)}
.connectbtn{
  flex:0 0 auto; margin-left:auto; background:var(--accent); color:var(--accent-ink); border:0; border-radius:7px;
  padding:8px 14px; font-weight:700; font-size:12px; letter-spacing:.02em; white-space:nowrap;
}
.connectbtn[data-on="1"]{background:var(--panel); color:var(--ink); border:1px solid var(--line)}

main{max-width:1180px; margin:0 auto; padding:20px 14px 32px}

/* ---------- the object: tonight's table, a six-row ledger ---------- */
.tableCard{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 16px 8px; margin-bottom:18px;
}
.tableHead{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.tableHead h1{font-size:22px}
.tableHead .sub{font-size:13px; color:var(--ink-dim); margin-top:2px}
.klaxon{font-size:12px; color:var(--ink-dim); font-family:var(--mono)}
.klaxon b{color:var(--accent)}
.ledger{width:100%; border-collapse:collapse; margin-top:10px; font-size:13px; table-layout:fixed}
.ledger thead th{
  text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ledger td{padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:middle; overflow:hidden; text-overflow:ellipsis}
.ledger tr.empty td{color:var(--ink-dim); font-style:italic}
.ledger tr.burnt td{background:rgba(194,75,63,.14)}
.ledger .who{font-family:var(--mono); font-size:12px; white-space:nowrap}
.ledger .stake{font-family:var(--mono); text-align:right; white-space:nowrap}
.seatTag{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:var(--bg2); color:var(--ink-dim); font-family:var(--mono); font-size:11px; font-weight:700;
}
.burntPill{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--bad); font-weight:700}
.potRow{display:flex; gap:14px; flex-wrap:wrap; padding:12px 8px 14px; font-size:12px; color:var(--ink-dim)}
.potRow b{color:var(--ink); font-family:var(--mono)}
.sitForm{display:flex; gap:8px; padding:0 8px 16px; flex-wrap:wrap; align-items:center}
.sitForm button{background:var(--accent); color:var(--accent-ink); border:0; border-radius:8px; padding:10px 16px; font-weight:700; font-size:13px}
.sitForm button:disabled{opacity:.5}

/* ---------- secondary column: recent moves ---------- */
.activity{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:18px}
.activity h2{font-size:14px; margin-bottom:8px}
.moveRow{display:flex; justify-content:space-between; gap:8px; font-size:12px; padding:6px 0; border-bottom:1px solid var(--line)}
.moveRow:last-child{border-bottom:0}
.moveRow .who{font-family:var(--mono); color:var(--ink-dim)}
.moveRow .kindTag{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}

.primer{background:var(--panel); border:1px dashed var(--line); border-radius:14px; padding:14px 16px; font-size:13px; color:var(--ink-dim)}
.primer b{color:var(--ink)}

/* ---------- rules sheet ---------- */
#sheet{position:fixed; inset:0; background:rgba(10,8,6,.55); z-index:60; display:flex; align-items:flex-end; justify-content:center}
#sheet[hidden]{display:none}
.menu-slip{background:var(--bg2); color:var(--ink); width:100%; max-width:640px; border-radius:16px 16px 0 0; padding:18px; max-height:80vh; overflow:auto}
.slipTop{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.slipTop span{font-family:var(--display); font-weight:700; font-size:17px}
.slipTop button{background:none; border:0; color:var(--ink); font-size:22px; line-height:1}
#sheetBody ol{padding-left:20px; font-size:14px; line-height:1.7}
#sheetBody p{font-size:13px; color:var(--ink-dim)}

/* ---------- footer ---------- */
.tabfoot{max-width:1180px; margin:0 auto; padding:20px 14px 34px; font-size:12px; color:var(--ink-dim)}
.frow{display:flex; gap:8px; align-items:center; margin-bottom:6px}
.flab{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em}
.frow code{word-break:break-all}
.flinks{display:flex; gap:12px; margin:8px 0; flex-wrap:wrap}
.flinks a{color:var(--ink-dim); text-decoration:underline}
.ftag{margin-top:8px; opacity:.8}

/* ---------- the buy control: full CA + copy, pinned on the right edge at every width, never at the top or ---------- */
/* bottom edge — a floating vertically-centred bill, narrow on a phone (vertical type), a wide card past 1000px. */
.billrail{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:40; width:var(--billw); max-height:70vh;
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 6px;
  background:var(--bg2); border:1px solid var(--line); border-right:0; border-radius:14px 0 0 14px;
  box-shadow:-8px 0 20px rgba(0,0,0,.35);
}
.tagLine{flex:0 0 auto; writing-mode:vertical-rl; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim)}
.billAddr{
  writing-mode:vertical-rl; max-height:280px; overflow:hidden; font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  color:var(--ink); user-select:all; -webkit-user-select:all;
}
.billAddr[data-live="0"]{color:var(--ink-dim); font-style:italic; font-size:12px}
.billCopy{
  writing-mode:vertical-rl; flex:0 0 auto; background:var(--accent); color:var(--accent-ink); border:0; border-radius:7px;
  padding:10px 6px; font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
}
.billCopy[data-done="1"]{background:var(--good); color:#122414}
.billLink{writing-mode:vertical-rl; flex:0 0 auto; font-size:11px; color:var(--ink-dim); text-decoration:underline; padding:0 2px}

@media (min-width:640px){
  .chnav{display:flex}
}

@media (min-width:1000px){
  :root{--billw:230px}
  body{padding-right:calc(var(--billw) + 18px)}
  main{padding:28px 24px 40px}
  .grid2{display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start}
  .tableCard{margin-bottom:0}
  .activity{margin-bottom:0}
  .tableHead h1{font-size:27px}
  .billrail{
    max-height:none; padding:22px 16px; align-items:stretch; gap:12px;
  }
  .tagLine{writing-mode:horizontal-tb; text-align:left}
  .billAddr{writing-mode:horizontal-tb; max-height:none; word-break:break-all; white-space:normal; font-size:13px; line-height:1.5; text-align:left}
  .billCopy,.billLink{writing-mode:horizontal-tb; width:100%; text-align:center}
}