/* Poker night: felt table, card-stock panels, chip-edge player badges. */
:root {
  --felt: #1e5c3f;
  --felt-deep: #143f2b;
  --card: #fbf8f1;
  --card-edge: #e9e2d2;
  --ink: #23262b;
  --quiet: #6b6f66;
  --suit-red: #be3144;
  --win: #1e7b45;
  --chip: #24549c;
  --chip-deep: #1a3f77;
  --gold: #b3892a;
  /* per-section accent bars (zone labels, not status — kept low-key) */
  --sec-play: #24549c;    /* ♠ seats */
  --sec-buyin: #c07d22;   /* ♦ money in — amber */
  --sec-payout: #c76b79;  /* ♥ money out — rose, softer than money-red */
  --sec-chips: #1e7b45;   /* ♣ end count */
  --sec-settle: #b3892a;  /* ♠♥♦♣ the answer — gold */
  /* row tints — tokens so they track the scheme instead of freezing light hexes */
  --tint-win: rgba(30, 123, 69, .1);
  --tint-lose: rgba(190, 49, 68, .1);
  --tint-gold: rgba(179, 137, 42, .1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --felt: #0f2b1e;
    --felt-deep: #0a1f15;
    --card: #1e2823;
    --card-edge: #31403a;
    --ink: #e8e6dd;
    --quiet: #99a094;
    --suit-red: #e0596b;
    --win: #52b878;
    --chip: #5b8dd6;
    --chip-deep: #24549c;
    --gold: #d4ac4e;
    --sec-play: #5b8dd6;
    --sec-buyin: #dda24a;
    --sec-payout: #d98f9b;
    --sec-chips: #52b878;
    --sec-settle: #d4ac4e;
    --tint-win: rgba(82, 184, 120, .13);
    --tint-lose: rgba(224, 89, 107, .13);
    --tint-gold: rgba(212, 172, 78, .13);
  }
}

* { box-sizing: border-box; }
body {
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
  margin: 0 auto; max-width: 640px;
  /* respect the iPhone notch / home indicator (needs viewport-fit=cover) */
  padding:
    max(14px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    calc(4px + env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  -webkit-text-size-adjust: 100%;         /* no font inflation on rotate */
  -webkit-tap-highlight-color: rgba(36, 84, 156, .18);
  color: var(--ink);
  background-color: var(--felt-deep);
  /* fanned aces + chips by the title, faint suit pattern across the felt */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='130'%3E%3Cg transform='rotate(-9 60 55)'%3E%3Crect x='26' y='12' width='56' height='80' rx='7' fill='%23fbf8f1' stroke='%23c9b98a'/%3E%3Ctext x='34' y='38' font-size='20' font-family='Georgia' fill='%23be3144'%3EA%3C/text%3E%3Ctext x='34' y='62' font-size='22' fill='%23be3144'%3E%E2%99%A5%3C/text%3E%3C/g%3E%3Cg transform='rotate(11 100 55)'%3E%3Crect x='72' y='16' width='56' height='80' rx='7' fill='%23fbf8f1' stroke='%23c9b98a'/%3E%3Ctext x='80' y='42' font-size='20' font-family='Georgia' fill='%23232323'%3EA%3C/text%3E%3Ctext x='80' y='66' font-size='22' fill='%23232323'%3E%E2%99%A0%3C/text%3E%3C/g%3E%3Ccircle cx='124' cy='104' r='15' fill='%23be3144' stroke='%23fff' stroke-width='3' stroke-dasharray='6 5'/%3E%3Ccircle cx='146' cy='112' r='15' fill='%2324549c' stroke='%23fff' stroke-width='3' stroke-dasharray='6 5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='18' y='40' font-size='26' fill='%23ffffff' opacity='.045'%3E%E2%99%A0%3C/text%3E%3Ctext x='96' y='66' font-size='22' fill='%23ffb3c0' opacity='.05'%3E%E2%99%A5%3C/text%3E%3Ctext x='40' y='112' font-size='24' fill='%23ffb3c0' opacity='.05'%3E%E2%99%A6%3C/text%3E%3Ctext x='104' y='138' font-size='26' fill='%23ffffff' opacity='.045'%3E%E2%99%A3%3C/text%3E%3C/svg%3E"),
    radial-gradient(ellipse 120% 80% at 50% -10%, var(--felt) 0%, var(--felt-deep) 100%);
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: top 4px right 4px, 0 0, center top;
  background-size: 118px auto, auto, 100% 100vh;
}

/* .pcard.node is a plain <div>, so without it here the Bank / Unaccounted row
   rendered its name AND its amount in body sans while every player card (a
   <summary>) rendered in Palatino — two typefaces in one column, and a 1.7px
   right-edge mismatch from the differing caret advance. */
h1, h2, h3, th, summary, .tag, .pcard.node {
  font-family: Palatino, "Palatino Linotype", Georgia, serif;
}
h1 {
  color: #f6f2e6; font-size: 1.5rem; margin: 6px 0 16px; padding-right: 108px;
  letter-spacing: .06em; font-variant: small-caps;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
h1 + .muted { color: #cfe3d3; margin-top: -10px; }
h1 + .muted .mini { background: rgba(255,255,255,.16); color: #fff; }
h2 { font-size: 1.12rem; margin: 0 0 10px; letter-spacing: .04em; font-variant: small-caps; }
h3 { font-size: 1rem; margin: 16px 0 6px; letter-spacing: .04em; font-variant: small-caps; }
.suit { margin-right: .35em; }
.suit.r { color: var(--suit-red); }

.card {
  background: var(--card);
  border-radius: 14px; padding: 15px;
  margin-bottom: 14px;
  /* one soft edge (was border + heavy shadow) + a 4px section bar on the left,
     transparent unless a .sec-* class sets --sec-bar */
  box-shadow: inset 4px 0 0 var(--sec-bar, transparent), 0 1px 5px rgba(0, 20, 10, .18);
}
.card.sec-play   { --sec-bar: var(--sec-play); }
.card.sec-buyin  { --sec-bar: var(--sec-buyin); }
.card.sec-payout { --sec-bar: var(--sec-payout); }
.card.sec-chips  { --sec-bar: var(--sec-chips); }
.card.sec-settle { --sec-bar: var(--sec-settle); }
.foursuit { color: var(--gold); margin-right: .35em; letter-spacing: .04em; font-size: .92em; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
  text-align: left; color: var(--quiet); font-weight: 600;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
th, td { padding: 8px 6px; border-bottom: 1px solid var(--card-edge); }
tr:last-child td { border-bottom: 0; }

.pos { color: var(--win); font-weight: 700; }
.neg { color: var(--suit-red); font-weight: 700; }
.warn { background: rgba(190, 49, 68, .1); border-left: 4px solid var(--suit-red); border-radius: 8px; padding: 10px; }
.ok { background: rgba(30, 123, 69, .1); border-left: 4px solid var(--win); border-radius: 8px; padding: 10px; }
.muted { color: var(--quiet); font-size: .85rem; }

.tag {
  font-size: .72rem; padding: 3px 10px; border-radius: 99px;
  vertical-align: middle; letter-spacing: .06em; font-variant: small-caps;
}
.tag.open { background: var(--gold); color: #fff; }
.tag.done { background: var(--win); color: #fff; }

.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
  padding: 10px; border: 1px solid var(--card-edge); border-radius: 9px;
  min-width: 0; width: 100%; background: var(--card); color: var(--ink);
}
.row input, .row select { flex: 1; width: auto; }
input[type=number] { max-width: 130px; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--chip); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--chip); outline-offset: 1px;
}
.cashbox { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.cashbox label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cashbox input { width: auto; max-width: 120px; }
label.ratio { display: inline-flex; align-items: center; gap: 6px; margin: 4px 8px 4px 0; }
label.ratio select { width: auto; }
.pdetail small { color: var(--quiet); font-weight: 400; font-size: .78em; }
.amtd { color: var(--quiet); font-size: .9rem; white-space: nowrap; align-self: center; }

.btn {
  background: var(--chip); color: #fff; border: 0; border-radius: 10px;
  padding: 11px 18px; font-weight: 700; cursor: pointer; margin-top: 6px;
  box-shadow: 0 2px 0 var(--chip-deep);
}
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--chip-deep); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--card-edge); box-shadow: none; }
.mini {
  background: rgba(36, 84, 156, .12); color: var(--chip); border: 0;
  border-radius: 7px; padding: 6px 10px; cursor: pointer; font-size: .8rem; font-weight: 600;
}
.x { background: none; border: 0; color: var(--suit-red); cursor: pointer; font-size: 1rem; padding: 2px 6px; }
/* flash sits on the felt (not in a card): give it card-stock so --ink stays
   readable in light mode. Solid bg overrides the translucent .ok/.warn tint;
   their coloured left border + padding carry through. */
.flash { margin: 0 0 12px; font-weight: 600; background: var(--card); color: var(--ink); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,20,10,.3); }
.flash .mini { margin-left: 4px; }
.inline { display: inline; }
.check { display: inline-flex; align-items: center; gap: 6px; margin: 4px 10px 4px 0; white-space: nowrap; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px 10px; margin: 6px 0 10px;
}
.grid .check { margin: 0; padding: 5px 2px; white-space: normal; }

/* Playing ledger: one row per player — chip disc, name, running total. */
.roster { list-style: none; padding: 0; margin: 0; }
.roster li {
  display: grid; grid-template-columns: auto 1fr auto;
  column-gap: 9px; row-gap: 3px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--card-edge);
}
.roster li:last-child { border-bottom: 0; }
.disc {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  /* the chip look lives here, where the geometry really is a circle */
  background:
    radial-gradient(circle, var(--card) 42%, transparent 46%),
    repeating-conic-gradient(var(--chip) 0 30deg, var(--card) 30deg 60deg);
  border: 1px solid var(--card-edge);
}
.pname {
  min-width: 0; font-weight: 600;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
/* name ellipsizes; the cashed-out badge is a non-shrinking sibling so it's
   never clipped by the name's overflow (was truncating to "CAS…"). */
.pname .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pname .tag { flex: none; }
.ptotal { grid-column: 3; text-align: right; color: var(--gold); font-weight: 700; line-height: 1.15; }
.ptotal small { display: block; color: var(--quiet); font-weight: 400; font-size: .7rem; max-width: 150px; }
.seat-x { display: none; }
#seats:checked ~ .roster .seat-x { display: inline; grid-column: 1; grid-row: 2; justify-self: start; }

.summary { list-style: none; padding: 0; margin: 12px 0 0; }
.summary li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--card-edge); }
/* direct child only: a bare `.summary li span` also caught the .pos/.neg span
   that money() emits inside <b>, greying out every signed amount. */
.summary li > span { color: var(--quiet); }
.summary li b { font-weight: 700; white-space: nowrap; }
.summary li.flag > span, .summary li.flag b { color: var(--suit-red); }
/* the one number the host checks against the pile of cash */
.summary li.tot { border-top-width: 2px; }
.summary li.tot > span { color: var(--ink); font-weight: 700; }
.summary li.tot b { font-size: 1.1rem; }
.summary li.sub > span { font-size: .85rem; }
.boxnote { color: var(--quiet); font-size: .8rem; margin: 6px 0 0; }
/* per-player settlement cards — name + hero settle on one line, details in a
   native <details> expander. Replaces the sideways-scrolling 7-col table. */
.players { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pcard { border: 1px solid var(--card-edge); border-radius: 10px; background: var(--card); }
.pcard > summary {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 12px 14px; list-style: none; letter-spacing: normal;
}
.pcard > summary::-webkit-details-marker { display: none; }
.pcard .pname { font-size: 1.05rem; font-weight: 700; font-variant: small-caps; letter-spacing: .03em; }
.psettle { font-size: 1.3rem; font-weight: 700; white-space: nowrap; }
.psettle::after { content: "\25be"; font-size: .7rem; color: var(--quiet); margin-left: 8px; }
.pcard[open] > summary .psettle::after { content: "\25b4"; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 0 14px 10px; }
.pdetail { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--card-edge); }
.pdetail span { color: var(--quiet); font-size: .85rem; }
.pdetail b { font-weight: 700; white-space: nowrap; }
/* Receive / Pay group headings + total footers. The heading word and the +/-
   sign carry the meaning; colour is garnish, so this still reads in sunlight
   and for colour-blind players. Tokens only — the mockup's literal hexes go
   illegible in dark mode. */
.ghead { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; }
.ghead::before { content: ""; width: 4px; height: 1.05em; border-radius: 2px; background: var(--quiet); }
.ghead.g-receive::before { background: var(--win); }
.ghead.g-pay::before { background: var(--suit-red); }
.gcount { font-size: .75rem; font-weight: 700; color: var(--quiet); background: var(--card-edge); border-radius: 999px; padding: 1px 9px; letter-spacing: normal; }
.gtotal {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 8px 0 0; padding: 9px 14px; border-radius: 8px;
  font-variant: small-caps; letter-spacing: .05em; color: var(--quiet);
}
.gtotal b { font-size: 1.1rem; white-space: nowrap; letter-spacing: normal; }
.gtotal.g-receive { background: var(--tint-win); }
.gtotal.g-receive b { color: var(--win); }
.gtotal.g-pay { background: var(--tint-lose); }
.gtotal.g-pay b { color: var(--suit-red); }
/* Bank / Unaccounted sit in the groups so the totals above are honest, but they
   have no per-player breakdown to expand. */
.pcard.node { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; }
.pcard.node .pname { color: var(--quiet); }
/* keep the caret's box so Bank/Unaccounted amounts stay on the same right
   edge as every player amount — only the glyph goes. */
.pcard.node .psettle::after { visibility: hidden; }
.pcard .pname { display: block; }
.pcard.node.flag .pname, .pcard.node.flag .psettle { color: var(--suit-red); }
.pay { padding-left: 0; list-style: none; counter-reset: payline; }
.pay li { margin: 6px 0; padding: 8px 12px; background: var(--tint-gold); border-radius: 8px; }
.pay li::before { counter-increment: payline; content: counter(payline) "."; color: var(--quiet); font-weight: 700; margin-right: 8px; }
.pay b { color: var(--gold); }
/* Host-assigned lines read as deliberate, not as another auto row. The ✕ sits
   inline at the end so a thumb can drop a pin without leaving the list. */
.pay li.pinned { background: var(--tint-win); }
.pay .pintag { margin-left: 6px; }
.pay li form.inline { display: inline; margin-left: 4px; }
.pinform { margin: 8px 0 4px; }
.pinform .row { display: flex; gap: 8px; margin-bottom: 8px; }
.pinform select, .pinform input { flex: 1; min-width: 0; }

details { margin-top: 10px; }
summary { cursor: pointer; font-weight: 700; padding: 6px 0; letter-spacing: .03em; }
textarea { margin: 6px 0; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.rename { margin-top: 4px; }
.rename summary { font-weight: 400; font-size: .8rem; padding: 2px 0; color: var(--suit-red); }
.rename .row { margin: 6px 0; }

footer {
  text-align: center; color: #b9d2bf; font-size: .8rem;
  font-style: italic; padding: 10px 0 18px;
  font-family: Palatino, "Palatino Linotype", Georgia, serif;
}
footer::before { content: "♠ ♥ ♦ ♣"; display: block; font-style: normal; letter-spacing: .6em; margin-bottom: 4px; opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* phone tuning (primary use is iOS Safari) */
@media (max-width: 560px) {
  /* drop the busy tiled-suit + corner-card background layers; keep just the
     calm felt gradient so section colour lands on a quiet page */
  body {
    background-image: radial-gradient(ellipse 120% 80% at 50% -10%, var(--felt) 0%, var(--felt-deep) 100%);
    background-repeat: no-repeat; background-position: center top; background-size: 100% 100vh;
  }
  /* wide tables — esp. the 7-column settlement — scroll sideways in their own
     box instead of forcing the whole page to scroll horizontally */
  .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  /* dropdowns (player / paid-to / payout source) get their own full-width
     line instead of being squeezed next to radios and the submit button */
  .row select { flex-basis: 100%; }
  /* thumb-friendlier tap targets */
  .mini { padding: 9px 13px; font-size: .82rem; }
  .check { padding: 6px 0; }
  /* 16px kills iOS zoom-on-focus when pasting into the import / summary boxes */
  textarea { font-size: 16px; }
}

/* live agent chat */
#agentlog { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; margin-bottom: 10px; }
#agentlog:empty { margin-bottom: 0; }
.ab { padding: 8px 11px; border-radius: 12px; max-width: 85%; white-space: pre-wrap; line-height: 1.35; }
.ab.me { align-self: flex-end; background: var(--chip); color: #fff; border-bottom-right-radius: 4px; }
.ab.bot { align-self: flex-start; background: var(--card-edge); color: var(--ink); border-bottom-left-radius: 4px; }
.confirm { align-self: stretch; border: 2px solid var(--gold); border-radius: 12px; padding: 11px; display: flex; flex-direction: column; gap: 9px; }
.confirm.out { border-color: var(--suit-red); }
.confirm .clabel { font-weight: 700; font-size: 1.05em; }
.confirm .row { gap: 8px; }
#agentform { gap: 8px; }
#agentform input { flex: 1; }