/* ===========================================================================
   TABLE STATS — shared by the baccarat and poker tables (Ronan, 2026-09-24
   21:21-21:25). Byte-identical in every game that uses it. Colours come from
   the game: --ts-gold, --ts-ivory, --ts-win, --ts-loss (set in its own CSS).
   On the felt (desktop only) it is compact and low-key, like the rules
   printed there; the Stats panel shows everything on every size.
   =========================================================================== */
.ts-felt{ display:flex; flex-direction:column; gap:8px; width:100%; min-width:0; font-size:10px; line-height:12px; color:var(--ts-ivory, #f3ecdb); }
.ts-felt:empty{ display:none; }
.ts-block{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ts-title{ font-family:Cinzel, serif; font-size:10.5px; line-height:13px; letter-spacing:1.8px; text-transform:uppercase; color:var(--ts-gold, #c9a75e);
  padding-bottom:1px; border-bottom:1px solid rgba(201,167,94,.22); margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-sub{ font-size:8.5px; line-height:10px; opacity:.65; margin-top:-1px; }
.ts-row{ display:flex; justify-content:space-between; gap:8px; white-space:nowrap; min-width:0; }
.ts-row > span:first-child{ opacity:.8; overflow:hidden; text-overflow:ellipsis; }
.ts-felt .mono, .ts-panel .mono{ font-family:"IBM Plex Mono", monospace; font-weight:700; }
.ts-pos{ color:var(--ts-win, #6fd17f); } .ts-neg{ color:var(--ts-loss, #ff8f8f); }
.ts-empty{ opacity:.6; font-style:italic; }

/* The history: newest first, ten to a row. */
.ts-strip{ display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:2px; }
.ts-strip .ts-empty{ grid-column:1 / -1; }
.ts-cell{ position:relative; display:flex; flex-direction:column; min-width:0; height:14px; border-radius:3px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(243,236,219,.28); }
.ts-cell .ts-mark{ flex:1 1 0; display:flex; align-items:center; justify-content:center; min-height:0; font-size:8px; line-height:7px; font-weight:800; }
.ts-mark{ display:inline-flex; align-items:center; justify-content:center; min-width:12px; height:12px; border-radius:3px; font-size:8px; line-height:8px; font-weight:800; color:#fff; background:#555; }
.ts-cell .ts-mark{ border-radius:0; min-width:0; height:auto; }
.ts-nat{ position:absolute; right:1px; top:1px; width:3px; height:3px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.4); }
/* Baccarat's conventional scoreboard colours, never the only signal (each mark is a letter). */
.ts-p{ background:#2f67b1; } .ts-b{ background:#b8323f; } .ts-t{ background:#2f8a42; }
.ts-w{ background:#2f8a42; } .ts-l{ background:#b8323f; } .ts-e{ background:#6d6557; } .ts-f{ background:#4a4238; }
.ts-keys{ display:flex; flex-wrap:wrap; gap:2px 8px; font-size:9px; line-height:12px; opacity:.8; }
.ts-key{ display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.ts-key .ts-mark{ min-width:11px; height:11px; }

.ts-standings, .ts-recap, .ts-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:1px; }
.ts-standings li{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; white-space:nowrap; }
.ts-standings .ts-name{ white-space:normal; min-width:0; }
.ts-standings li{ white-space:normal; align-items:start; }
.ts-standings li.ts-you .ts-name{ color:var(--ts-gold-bright, #e6cc8e); font-weight:700; }
.ts-style{ font-size:8.5px; opacity:.65; text-transform:uppercase; letter-spacing:.4px; }
.ts-run{ font-weight:600; color:var(--ts-gold-bright, #e6cc8e); }
.ts-recap li{ position:relative; padding-left:8px; }
.ts-recap li::before{ content:""; position:absolute; left:1px; top:5px; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
.ts-recap li.ts-empty::before{ display:none; }
.ts-list li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center; }
.ts-li-marks{ display:inline-flex; gap:1px; }
.ts-li-text{ white-space:normal; min-width:0; }
.ts-list li{ align-items:start; }

/* The Stats panel: the whole story, bigger type. */
.ts-panel{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; font-size:12.5px; line-height:17px; margin:6px 0 4px; }
.ts-panel .ts-title{ font-size:12px; line-height:16px; }
.ts-panel .ts-mark{ min-width:16px; height:16px; font-size:10px; }
.ts-panel .ts-style{ font-size:10px; }
.ts-panel .ts-recap li::before{ top:7px; }
.ts-panel-actions{ display:flex; gap:8px; margin-top:8px; }
.ts-panel-actions button{ flex:1 1 0; min-height:44px; }
@media (min-width:560px){ .ts-panel{ grid-template-columns:repeat(2, minmax(0,1fr)); } .ts-panel .ts-list-wrap{ grid-row:span 3; } }

/* Phones, upright and sideways: the felt keeps its room for the cards; the
   Stats button opens the panel (Ronan: "Stats button + panel"). */
@media (max-width:679px), (max-height:480px){
  .ts-felt{ display:none !important; }
}
/* The panel card: its contents scroll; Reset Stats and Close stay in view. */
.ts-panel-card{ display:flex; flex-direction:column; max-height:100%; overflow:hidden !important; }
.ts-panel-card > h2, .ts-panel-card > .ts-panel-actions, .ts-panel-card > .panel-close{ flex:none; }
.ts-panel-card > .ts-panel{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:2px; }