/*
 * Card Platform v0.1.9 (Task 9R): the game table screen = Cambio's table. Every rule between the two "ported from
 * Cambio" markers is Cambio's own CSS (AGHub73/cambio staging 1c3edf6: css/table-v7.css and css/table-ds.css, the
 * Classic+ style), with only the selectors renamed: Cambio's :root.table-v7.ds-table + #ui-layer ids become
 * "#tp-root .cpt" + classes (map in docs/cambio-table-port.md). Positions are written inline by js/games/table/
 * table-ds.js (Cambio's solver). The "CP" block at the end is the base the Cambio rules sit on (from Cambio's
 * style.css #ui-layer rules) plus the game-specific pieces Cambio has no component for: pot, board, chip counts, bet
 * tokens, bet meter sheet, results sheet.
 */
/* ---------------- ported from Cambio (begin) ---------------- */
/* ---- ported from Cambio css/table-v7.css ---- */
#tp-root .cpt {
  --v7-room: #13203B; --v7-felt: #3E9A66; --v7-rail: #6A4428; --v7-back: #6B1A26; --v7-back-edge: #F3E9D2;
  --v7-btn: #D1A94F; --v7-btn-ink: #1A1406; --v7-btn-edge: #F0D58C; --v7-glow: #F5C451; --v7-cambio: #B23A48;
  --v7-ui-bg: rgba(10, 16, 32, .82); --v7-ui-line: rgba(255, 255, 255, .18);
}
#tp-root .cpt .cpt-room { background:
  repeating-linear-gradient(45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 16px),
  repeating-linear-gradient(-45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 16px), var(--v7-room); }
#tp-root .cpt .cpt-room::after { display: none; }
#tp-root .cpt .cpt-felt { position: absolute; transform: none !important; border-radius: 999px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
#tp-root .cpt .cpt-rim { inset: 0; border-radius: 999px; transform: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .45);
  background: linear-gradient(180deg, #8C5E3A 0%, var(--v7-rail) 45%, #45291A 100%); }
#tp-root .cpt .cpt-rim::after { display: none; }
#tp-root .cpt .cpt-baize { inset: 7px; border-radius: 999px; transform: none !important;
  background: radial-gradient(120% 110% at 50% 40%, #46A872 0%, var(--v7-felt) 55%, #2F7E52 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 6px 14px rgba(0, 0, 0, .25); }
#tp-root .cpt .cpt-baize::before { display: none; }
#tp-root .cpt .cpt-baize::after { content: none; top: 82%; font: 700 13px/1 var(--font-display, serif); letter-spacing: .3em; color: #fff; opacity: .1; padding: 0; }
#tp-root .cpt .card.back { border: max(1px, calc(var(--h) * .055)) solid var(--v7-back-edge);
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2050%2070%27%3E%3Ctext%20x=%2725%27%20y=%2745%27%20text-anchor=%27middle%27%20font-family=%27Georgia,serif%27%20font-size=%2730%27%20font-weight=%27700%27%20fill=%27%23F3E9D2%27%20fill-opacity=%27.72%27%3EC%3C/text%3E%3C/svg%3E") center / 80% auto no-repeat,
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 5px), var(--v7-back); }
#tp-root .cpt .cpt-seats { left: 0 !important; right: 0 !important; top: 0; bottom: 0; }
#tp-root .cpt .cpt-seats .seat { position: absolute; transform: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 4px; margin: 0 !important; width: max-content; }
#tp-root .cpt .cpt-seats .seat .seat-id { display: flex !important; flex-direction: column; align-items: center; gap: 2px; position: relative; flex-direction: column !important; }
#tp-root .cpt .cpt-seats .seat .avatar { width: var(--v7-ava) !important; height: var(--v7-ava) !important; font-size: calc(var(--v7-ava) * .58) !important; grid-area: auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 2px 5px rgba(0, 0, 0, .5); }
#tp-root .cpt .cpt-seats .seat .name { width: auto !important; max-width: var(--v7-name-max); min-width: 0; height: 16px !important; padding: 0 5px !important; grid-area: auto;
  font: 600 10.5px/16px var(--font-ui) !important; color: #fff !important; background: rgba(0, 0, 0, .5) !important; border: 0 !important; border-radius: 6px; box-shadow: none !important; }
#tp-root .cpt .cpt-seats .seat.active .avatar { animation: none; box-shadow: 0 0 0 2px var(--v7-glow), 0 0 12px 2px rgba(245, 196, 81, .7); }
#tp-root .cpt .cpt-seats .seat.targetable .avatar { box-shadow: 0 0 0 2px var(--v7-glow), 0 0 10px rgba(245, 196, 81, .6); }
#tp-root .cpt .cpt-seats .seat .hand { margin: 0 !important; }
#tp-root .cpt .cpt-seats .seat .hand.small.pad { --ch: var(--v7-ch-opp); }
#tp-root .cpt .cpt-seats .seat .card.small { box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
#tp-root .cpt .cpt-me { transform: none !important; bottom: auto !important; align-items: center !important; gap: 8px; }
#tp-root .cpt .cpt-mytag { width: auto !important; display: flex; flex-direction: column; align-items: center; gap: 2px; }
#tp-root .cpt .cpt-mytag .avatar { width: var(--v7-ava-me) !important; height: var(--v7-ava-me) !important; font-size: calc(var(--v7-ava-me) * .58) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 2px 5px rgba(0, 0, 0, .5); }
#tp-root .cpt .cpt-mytag .name { width: auto !important; max-width: 64px; height: 16px !important; padding: 0 5px !important;
  font: 600 10.5px/16px var(--font-ui) !important; color: #fff !important; background: rgba(0, 0, 0, .5) !important; border: 0 !important; border-radius: 6px; box-shadow: none !important; }
#tp-root .cpt .cpt-me.active .cpt-mytag .avatar { animation: none; box-shadow: 0 0 0 2px var(--v7-glow), 0 0 12px 2px rgba(245, 196, 81, .7); }
#tp-root .cpt .cpt-myhand .card.large { --h: min(var(--v7-ch-own), calc(var(--hand-card-h, 999px))); }
#tp-root .cpt .cpt-center { transform: none !important; gap: max(26px, calc(70px - var(--v7-ch-pile, 44px) * 5 / 7)); align-items: flex-start; }
#tp-root .cpt .cpt-center .card.medium { --h: max(45px, var(--v7-ch-pile, 45px)); }
#tp-root .cpt .cpt-center .pile-label { position: absolute; left: 50%; top: calc(100% + 4px); bottom: auto; transform: translateX(-50%); white-space: nowrap;
  font: 600 9.5px/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .38); padding: 2px 5px; border-radius: 6px; max-width: none; overflow: visible; }
#tp-root .cpt .cpt-col { position: absolute; right: auto !important; bottom: auto !important; transform: none !important; width: 62px !important;
  display: flex; flex-direction: column; justify-content: space-between; gap: 0; margin: 0; padding: 0; }
#tp-root .cpt .cpt-col > .act { flex: none; }
#tp-root .cpt .act { width: 62px !important; height: 44px !important; min-width: 0 !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; color: #fff; border-radius: 0;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#tp-root .cpt .act.hidden { display: none !important; }
#tp-root .cpt .act .face { display: flex; align-items: center; justify-content: center; box-sizing: border-box; pointer-events: none;
  background: var(--v7-btn); color: var(--v7-btn-ink); border: 1px solid var(--v7-btn-edge); border-radius: 9px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 3px 8px rgba(0, 0, 0, .35); }
#tp-root .cpt .act.txt .face { width: 58px; height: 32px; font: 650 13px/1 var(--font-ui); letter-spacing: 0; }
#tp-root .cpt .act.ico .face { width: 30px; height: 30px; }
#tp-root .cpt .act svg { width: 19px; height: 19px; fill: currentColor; }
#tp-root .cpt .act svg .hollow { fill: none; stroke: currentColor; stroke-width: 1.6; }
#tp-root .cpt .act .lbl { font: 600 8.5px/1 var(--font-ui); color: #fff; opacity: .9; pointer-events: none; }
#tp-root .cpt .act.cambio .face { background: var(--v7-cambio); color: #fff; border-color: #D97A85; }
#tp-root .cpt .act.danger .face { background: var(--v7-cambio); color: #fff; border-color: #D97A85; }
#tp-root .cpt .act:disabled { cursor: default; }
#tp-root .cpt .act:disabled .face { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .42); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
#tp-root .cpt .act:disabled .lbl { opacity: .45; }
#tp-root .cpt .act.legal .face { box-shadow: 0 0 0 1.5px var(--v7-glow), 0 0 10px rgba(245, 196, 81, .45); animation: v7-glow 1.8s ease-in-out infinite; }
#tp-root .cpt .act.armed .face, #tp-root .cpt .act[aria-pressed="true"] .face { box-shadow: 0 0 0 2px #fff; animation: none; }
#tp-root .cpt .act.cambio::after { left: 16px; top: 2px; height: 30px; max-width: 30px; border-radius: 9px; }
@keyframes v7-glow { 0%, 100% { box-shadow: 0 0 0 1.5px var(--v7-glow), 0 0 6px rgba(245, 196, 81, .3); } 50% { box-shadow: 0 0 0 1.5px var(--v7-glow), 0 0 14px rgba(245, 196, 81, .65); } }
@media (prefers-reduced-motion: reduce) { #tp-root .cpt .act.legal .face { animation: none; } }
#tp-root .cpt .cpt-clock { top: auto !important; right: auto !important; transform: translateX(-50%); align-items: center !important; gap: 2px; pointer-events: none; }
#tp-root .cpt .cpt-clock > * { pointer-events: none; }
#tp-root .cpt .cpt-clock .meet-chip { pointer-events: auto; }
#tp-root .cpt .cpt-clock #version-tag, #tp-root .cpt .cpt-clock #age-badge { display: none !important; }
#tp-root .cpt .cpt-clock .timer.clock-off { display: none !important; }
#tp-root .cpt .cpt-clock .timer { font: 600 12px/1 var(--font-num, var(--font-ui)) !important; color: #fff !important; background: rgba(0, 0, 0, .38) !important;
  padding: 3px 6px !important; border-radius: 6px !important; border: 0 !important; box-shadow: none !important; }
#tp-root .cpt .cpt-menu-btn { position: absolute; right: auto !important; width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important; display: grid; place-items: center; border-radius: 0; }
#tp-root .cpt .cpt-menu-btn .face { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--v7-ui-line); background: var(--v7-ui-bg); color: #fff; pointer-events: none; }
#tp-root .cpt .cpt-menu-btn svg { width: 18px; height: 18px; fill: currentColor; }
#tp-root .cpt .cpt-menu-btn[aria-expanded="true"] .face { background: var(--v7-btn); color: var(--v7-btn-ink); border-color: var(--v7-btn-edge); }
#tp-root .cpt .cpt-menu { position: fixed; z-index: 60; overflow-y: auto; overscroll-behavior: contain; padding: 5px; box-sizing: border-box;
  background: #1B2A4A; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); color: #fff; }
#tp-root .cpt .cpt-menu.hidden { display: none !important; }
#tp-root .cpt .cpt-menu .menu-info { font: 600 12px/1.3 var(--font-ui); padding: 6px 10px 8px; margin: 0 0 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; }
#tp-root .cpt .cpt-menu > button { display: block; width: 100%; min-height: 40px; text-align: left; padding: 0 10px; border: 0; background: none; border-radius: 8px;
  color: #fff; font: 600 14px/1.2 var(--font-ui); cursor: pointer; }
#tp-root .cpt .cpt-menu > button:hover, #tp-root .cpt .cpt-menu > button:focus-visible { background: rgba(255, 255, 255, .08); }
#tp-root .cpt .cpt-menu > button.danger { color: #FFB4BC; }
#tp-root .cpt .cpt-menu .menu-speed { padding: 4px 6px 6px 10px; }
#tp-root .cpt .cpt-menu .menu-sub { display: block; font: 600 11px/1 var(--font-ui); color: rgba(255, 255, 255, .7); margin-bottom: 4px; }
#tp-root .cpt .cpt-menu .seg { display: flex; gap: 3px; }
#tp-root .cpt .cpt-menu .seg button { flex: 1; min-height: 34px; padding: 0 4px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px; background: none; color: #fff;
  font: 600 12px/1 var(--font-ui); cursor: pointer; }
#tp-root .cpt .cpt-menu .seg button[aria-checked="true"] { background: var(--v7-btn); color: var(--v7-btn-ink); border-color: var(--v7-btn-edge); }
#tp-root .cpt .cpt-menu .menu-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 3px; font: 500 10px/1 var(--font-ui); color: rgba(255, 255, 255, .6); }
#tp-root .cpt > .cpt-status { position: absolute; top: auto !important; transform: translateX(-50%) !important; height: 24px; display: block; white-space: nowrap;
  padding: 0 10px !important; line-height: 24px !important; font: 500 13.5px/24px var(--font-ui); background: rgba(8, 12, 24, .82) !important; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 8px !important; box-shadow: none; width: max-content; box-sizing: border-box; }
#tp-root .cpt > .cpt-status { font-size: 13.5px !important; }
#tp-root .cpt > .cpt-status[style*="font-size: 13px"] { font-size: 13px !important; }
#tp-root .cpt > .cpt-status[style*="font-size: 12px"] { font-size: 12px !important; }
#tp-root .cpt > .cpt-status.v7-cut { overflow: hidden; }
#tp-root .cpt > .cpt-status.score-back { display: inline-flex !important; align-items: center; gap: 6px; height: auto !important; min-height: 32px; line-height: 1.2 !important; overflow: visible; text-overflow: clip; }
#tp-root .cpt > .cpt-status.score-back a.score-back { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px; background: #121416; color: #fff; text-decoration: none; font-weight: 700; }
#tp-root .cpt > .cpt-status.v7-cut.score-back { overflow: visible; }
#tp-root .cpt > .cpt-status.v7-cut .st-text { display: none; }
#tp-root .cpt > .cpt-status.v7-cut:not(:has(.st-text)) { overflow: hidden; text-overflow: ellipsis; }
#tp-root .cpt > .cpt-status.mine { box-shadow: 0 0 0 1.5px var(--v7-glow); }
#tp-root .cpt > .cpt-status b { color: #fff; }
#tp-root .cpt > .cpt-status:empty { display: none; }
#tp-root .cpt .cpt-seats .seat .hand.small .card.small.face { --h: max(var(--v7-ch-opp), 28px); z-index: 6;
  margin: calc((var(--v7-ch-opp) - max(var(--v7-ch-opp), 28px)) / 2) calc((var(--v7-ch-opp) - max(var(--v7-ch-opp), 28px)) * 5 / 14); }
#tp-root .cpt .cpt-myhand .card.large .court b { font-size: max(14px, calc(var(--h) * .28)); }
#tp-root .cpt[data-screen="table"] .toast { top: 84px; }
#tp-root .cpt[data-screen="table"] .toast + .toast { top: 120px; }
#tp-root .cpt .seat-id { position: relative; }
#tp-root .cpt .act-label { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); pointer-events: none; z-index: 5;
  background: var(--c-surface, #f4f1ea); color: var(--c-ink, #1d2321); font: 700 11.5px/1 var(--font-ui); padding: 4px 8px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4); animation: pop .18s var(--ease); }
#tp-root .cpt .cpt-mytag { position: relative; }
#tp-root .cpt .cpt-mytag .act-label { left: 0; bottom: auto; top: -24px; transform: none; }
#tp-root .cpt .cpt-seats .seat .hand.small .card.small:not(.face) { --h: var(--v7-ch-opp); }
#tp-root .cpt .cpt-seats .seat .hand.small { column-gap: 2px !important; row-gap: 2px !important; gap: 2px !important; padding: 0 !important; }
#tp-root .cpt .cpt-seats .seat .hand.small.pad:has(.card.selectable) { column-gap: var(--cg) !important; row-gap: var(--rg) !important;
  padding: calc(var(--rg) / 2) calc(var(--cg) / 2) !important; transform: translateY(-3px); }
#tp-root .cpt.v7-nospread .cpt-seats .seat .hand.small.pad:has(.card.selectable) { column-gap: 2px !important; row-gap: 2px !important; padding: 0 !important; transform: none; }
#tp-root .cpt.v7-nospread .cpt-seats .seat .hand.small.pad .card::before { content: none; }
/* ---- ported from Cambio css/table-ds.css ---- */
#tp-root .cpt {
  
  --ds-font-display: 'Fraunces', Georgia, serif;
  --ds-font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ds-fw-ui: 650; --ds-fw-strong: 800;
  --ds-fs-btn: 13px; --ds-fs-lbl: 9px; --ds-fs-name: 10.5px; --ds-fs-status: 12.5px; --ds-fs-pile: 9px; --ds-track-caps: .12em;
  
  --ds-r-card: 12%; --ds-r-btn: 11px; --ds-r-plate: 6px; --ds-r-pill: 999px; --ds-r-pilebox: 16px;
  
  --ds-room-1: #0f2a22; --ds-room-2: #06130f;
  --ds-felt-hi: #3fae7c; --ds-felt-mid: #1f7d52; --ds-felt-lo: #0d4a30;
  --ds-felt-sheen: rgba(255, 255, 255, .10);
  --ds-rail-1: #8a5530; --ds-rail-2: #5c3519; --ds-rail-3: #2f1a0b; --ds-rail-inlay: #e0b56a;
  --ds-rail-w: 12px;
  
  --ds-ink: #fffaf0; --ds-ink-dim: rgba(255, 250, 240, .62);
  --ds-accent: #f4c95d;           
  --ds-accent-2: #7cf0c0;         
  --ds-danger: #e0485a;           
  --ds-plate-bg: linear-gradient(#fffdf6, #efe4cc); --ds-plate-ink: #2a1a0c; --ds-plate-edge: #c79a52;
  --ds-btn-bg: linear-gradient(#ffe39a, #e8b94e); --ds-btn-ink: #2a1a06; --ds-btn-edge: #fff0bf;
  --ds-btn2-bg: rgba(255, 255, 255, .08); --ds-btn2-ink: #fffaf0; --ds-btn2-edge: rgba(255, 255, 255, .22);
  --ds-btn-off-bg: rgba(255, 255, 255, .05); --ds-btn-off-ink: rgba(255, 255, 255, .38);
  --ds-cambio-bg: linear-gradient(#ff6b78, #c22a3d); --ds-cambio-edge: #ffb3bb;
  --ds-back-1: #9b2335; --ds-back-2: #5a0f1d; --ds-back-line: rgba(255, 236, 200, .55); --ds-back-mono: rgba(255, 244, 222, .9);
  --ds-face-bg: #fffdf8; --ds-face-red: #c8102e; --ds-face-black: #15171c;
  --ds-status-bg: rgba(8, 20, 15, .78); --ds-status-edge: rgba(244, 201, 93, .55);
  --ds-wordmark: rgba(255, 255, 255, .22);
  
  --ds-sh-card: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 3px rgba(0, 0, 0, .35), 0 6px 12px rgba(0, 0, 0, .25);
  --ds-sh-own: 0 2px 0 rgba(255, 255, 255, .3) inset, 0 4px 6px rgba(0, 0, 0, .35), 0 12px 22px rgba(0, 0, 0, .35);
  --ds-sh-felt: 0 18px 40px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .4);
  --ds-sh-btn: 0 2px 0 rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .35);
  --ds-glow-turn: 0 0 0 2.5px var(--ds-accent), 0 0 18px 4px rgba(244, 201, 93, .55);
  
  --ds-ease-out: cubic-bezier(.2, .8, .2, 1);        
  --ds-ease-spring: cubic-bezier(.34, 1.56, .64, 1); 
  --ds-ease-in: cubic-bezier(.5, 0, .75, 0);
  --ds-dur-tap: 90ms; --ds-dur-flip: 260ms; --ds-dur-deal: 320ms; --ds-deal-stagger: 55ms;
  --ds-voice: linear-gradient(#3b82f6, #1d4ed8); --ds-voice-edge: #93c5fd;  
  --ds-dur-slide: 220ms; --ds-dur-glow: 1600ms; --ds-dur-cambio: 900ms; --ds-dur-react: 1400ms; --ds-dur-drawer: 200ms;
}
#tp-root .cpt .cpt-room { background: radial-gradient(ellipse 70% 60% at 50% 45%, var(--ds-room-1), var(--ds-room-2) 75%); }
#tp-root .cpt .cpt-room::after { content: ''; display: block; position: absolute; inset: 0; background: url(../assets/table/ds/felt-grain.svg); opacity: .5; }
#tp-root .cpt .cpt-felt { filter: none; box-shadow: var(--ds-sh-felt); border-radius: 999px; }
#tp-root .cpt .cpt-rim { inset: 0; border-radius: 999px; box-shadow: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 25%, transparent 75%, rgba(0, 0, 0, .45)),
    linear-gradient(90deg, var(--ds-rail-2), var(--ds-rail-1) 25%, var(--ds-rail-2) 50%, var(--ds-rail-1) 75%, var(--ds-rail-2)) !important; }
#tp-root .cpt .cpt-rim::after { content: ''; display: block; position: absolute; inset: 3px; border-radius: 999px; border: 1.5px solid var(--ds-rail-inlay); opacity: .8; background: none; }
#tp-root .cpt .cpt-baize { inset: var(--ds-rail-w); border-radius: 999px; overflow: hidden;
  background: url(../assets/table/ds/felt-grain.svg), radial-gradient(ellipse 65% 60% at 50% 42%, var(--ds-felt-hi), var(--ds-felt-mid) 55%, var(--ds-felt-lo)) !important;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35), inset 0 10px 26px rgba(0, 0, 0, .55), inset 0 -2px 0 rgba(255, 255, 255, .08) !important; }
#tp-root .cpt .cpt-baize::after { display: none; }
#tp-root .cpt .card.back { border: 0 !important; border-radius: 12% / 8.6%; box-shadow: var(--ds-sh-card); background: url(../assets/table/ds/back-classic-plus.svg) center / 100% 100% no-repeat !important; }
#tp-root .cpt .cpt-seats .seat { display: block !important; position: absolute !important; transform: none !important; margin: 0 !important; padding: 0 !important; }
#tp-root .cpt .cpt-seats .seat .seat-id { display: block !important; position: absolute !important; margin: 0 !important; }
#tp-root .cpt .cpt-seats .seat .avatar { position: absolute !important; margin: 0 !important; font-size: calc(var(--ds-ch) * .4) !important; box-shadow: 0 0 0 2px var(--ds-plate-edge), 0 3px 8px rgba(0, 0, 0, .6); }
#tp-root .cpt .cpt-seats .seat.active .avatar { box-shadow: var(--ds-glow-turn); }
#tp-root .cpt .cpt-seats .seat.targetable .avatar { box-shadow: 0 0 0 2px var(--ds-accent), 0 0 10px var(--ds-accent); }
#tp-root .cpt .cpt-seats .seat .name, #tp-root .cpt .cpt-mytag .name { position: absolute !important; display: block !important; max-width: none !important; box-sizing: border-box; padding: 0 3px !important; margin: 0 !important;
  border-radius: var(--ds-r-plate) !important; background: var(--ds-plate-bg) !important; color: var(--ds-plate-ink) !important; border: 1px solid var(--ds-plate-edge) !important;
  font: 700 var(--ds-fs-name)/14px var(--ds-font-ui) !important; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 4px rgba(0, 0, 0, .5) !important; z-index: 2; }
#tp-root .cpt .cpt-seats .seat .name .nm, #tp-root .cpt .cpt-mytag .name .nm { overflow: hidden; text-overflow: ellipsis; }
#tp-root .cpt .cpt-seats .seat .hand.small { position: absolute !important; display: grid !important; margin: 0 !important; padding: 0 !important; transform: none !important;
  grid-template-columns: repeat(var(--ds-cols, 2), var(--ds-cw, calc(var(--ds-ch) * 5 / 7))) !important; grid-auto-rows: var(--ds-ch) !important; gap: 4px !important; column-gap: 4px !important; row-gap: 4px !important; }
#tp-root .cpt .cpt-seats .seat .hand.small .card.small, #tp-root .cpt .cpt-seats .seat .hand.small .card.small:not(.face) { --h: var(--ds-ch) !important; margin: 0 !important; }
#tp-root .cpt .cpt-seats .seat:not(.ds-fan) .hand.small .card.small:not(.face) { width: var(--ds-cw, auto) !important; aspect-ratio: auto !important; }
#tp-root .cpt .cpt-seats .seat .hand.small .card.small.face { --h: max(var(--ds-ch), 28px) !important; z-index: 6;
  margin: calc((var(--ds-ch) - max(var(--ds-ch), 28px)) / 2) calc((var(--ds-ch) - max(var(--ds-ch), 28px)) * 5 / 14) !important; }
#tp-root .cpt .cpt-seats .seat .hand.small.pad .card::before { content: '' !important; position: absolute; inset: -2px !important; }
#tp-root .cpt .cpt-seats .seat.ds-fan .hand.small { display: block !important; }
#tp-root .cpt .cpt-seats .seat.ds-fan .hand.small .card { position: absolute !important; top: 0; }
#tp-root .cpt .cpt-seats .seat.ds-fan .hand.small .card:not(:first-child) { box-shadow: -2px 0 3px rgba(0, 0, 0, .35); }
#tp-root .cpt .cpt-seats .seat .ds-count { position: absolute; right: -6px; top: -6px; z-index: 20; min-width: 16px; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, .78); color: var(--ds-ink);
  font: 800 9px/14px var(--ds-font-ui); text-align: center; padding: 0 3px; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
#tp-root .cpt .cpt-seats .seat.ds-loupe .hand.small .card::before { content: none !important; }
#tp-root .cpt .cpt-seats .seat.ds-loupe .hand.small:has(.card.selectable) { outline: 2px solid var(--ds-accent); outline-offset: 3px; border-radius: 4px; cursor: zoom-in; }
#tp-root .cpt .cpt-me { display: block !important; position: absolute !important; transform: none !important; margin: 0 !important; padding: 0 !important; }
#tp-root .cpt .cpt-mytag { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; display: block !important; pointer-events: none; margin: 0 !important; }
#tp-root .cpt .cpt-mytag > * { pointer-events: auto; }
#tp-root .cpt .cpt-mytag .avatar { position: absolute !important; margin: 0 !important; font-size: calc(var(--ds-ava-me) * .55) !important; box-shadow: 0 0 0 2px var(--ds-plate-edge), 0 3px 8px rgba(0, 0, 0, .6); }
#tp-root .cpt .cpt-me.active .cpt-mytag .avatar { box-shadow: var(--ds-glow-turn); }
#tp-root .cpt .cpt-mytag .act-label { left: var(--ds-act-x, 0px); top: var(--ds-act-y, -24px); bottom: auto; transform: none; pointer-events: none !important; z-index: 6; max-width: 92px; box-sizing: border-box; }
#tp-root .cpt .cpt-myhand { position: absolute !important; display: grid !important; margin: 0 !important; padding: 0 !important; transform: none !important;
  grid-template-columns: repeat(var(--ds-cols, 4), var(--ds-own-cw, calc(var(--ds-own-ch) * 5 / 7))) !important; grid-auto-rows: var(--ds-own-ch) !important; gap: 6px !important; justify-content: start; }
#tp-root .cpt .cpt-myhand .card.large { --h: var(--ds-own-ch) !important; margin: 0 !important; width: var(--ds-own-cw, auto) !important; aspect-ratio: auto !important; box-shadow: var(--ds-sh-own); }
#tp-root .cpt .cpt-center { position: absolute !important; display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: var(--ds-pile-gap, 14px) !important;
  margin: 0 !important; padding: 0 !important; transform: none !important; width: auto !important; height: auto !important; }
#tp-root .cpt .cpt-center > .pile { width: var(--ds-pile-cw) !important; margin: 0 !important; flex: none; }
#tp-root .cpt .cpt-center .card.medium { --h: var(--v7-ch-pile) !important; }
#tp-root .cpt .cpt-center .pile-label { top: calc(100% + 2px); font: 800 var(--ds-fs-pile)/10px var(--ds-font-ui); letter-spacing: .08em; color: var(--ds-ink); background: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); padding: 1px 2px; }
#tp-root .cpt .cpt-pilebox { border-color: var(--ds-wordmark); border-radius: var(--ds-r-pilebox); background: rgba(0, 0, 0, .1); }
#tp-root .cpt .cpt-col { width: 64px !important; justify-content: space-between !important; }
#tp-root .cpt .cpt-col .act { width: 64px !important; height: var(--ds-tap) !important; min-height: var(--ds-tap) !important; }
#tp-root .cpt .cpt-col .act.txt .face { width: 58px; height: min(36px, calc(var(--ds-tap) - 6px)); border-radius: var(--ds-r-btn); font: var(--ds-fw-ui) var(--ds-fs-btn)/1 var(--ds-font-ui); }
#tp-root .cpt .cpt-col .act.ico .face { width: 36px; height: 30px; border-radius: var(--ds-r-btn); }
#tp-root .cpt.ds-tap-s .cpt-col .act.ico .face { width: 26px; height: 26px; }
#tp-root .cpt .cpt-col .act .face { background: var(--ds-btn2-bg); color: var(--ds-btn2-ink); border-color: var(--ds-btn2-edge); box-shadow: var(--ds-sh-btn); }
#tp-root .cpt .cpt-col .act.primary .face { background: var(--ds-btn-bg); color: var(--ds-btn-ink); border-color: var(--ds-btn-edge); font-weight: 800; }
#tp-root .cpt .cpt-col .act:disabled .face { background: var(--ds-btn-off-bg); color: var(--ds-btn-off-ink); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
#tp-root .cpt .cpt-col .act.cambio .face, #tp-root .cpt .cpt-col .act.danger .face { background: var(--ds-cambio-bg); border-color: var(--ds-cambio-edge); color: #fff; }
#tp-root .cpt .cpt-col .act.cambio:disabled .face { opacity: .45; }
#tp-root .cpt .cpt-col .act .lbl { font: 700 var(--ds-fs-lbl)/1 var(--ds-font-ui); letter-spacing: .04em; text-transform: uppercase; }
#tp-root .cpt .cpt-menu-btn .face { width: 40px; height: 40px; border-radius: 14px; background: rgba(0, 0, 0, .45); }
#tp-root .cpt .cpt-clock .timer { min-width: 52px; height: 22px; box-sizing: border-box; text-align: center; font: 800 12px/22px var(--ds-font-ui) !important; padding: 0 6px !important;
  background: rgba(0, 0, 0, .55) !important; border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 8px !important; }
#tp-root .cpt > .cpt-status { border-radius: 999px !important; background: var(--ds-status-bg) !important; border: 1px solid var(--ds-status-edge) !important; font-family: var(--ds-font-ui); }
@keyframes ds-hold { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
:root .cpt-voice, :root .cpt-voice-lbl, :root .cpt-react-lbl, :root .cpt-react-marks { display: none; }
#tp-root .cpt .cpt-voice { display: block; position: absolute; z-index: 30; width: 44px; height: 44px; padding: 0; margin: 0; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
#tp-root .cpt .cpt-voice .face { display: grid; place-items: center; width: 40px; height: 40px; margin: 2px; border-radius: 14px; box-sizing: border-box;
  background: var(--ds-voice); border: 1px solid var(--ds-voice-edge); color: #fff; pointer-events: none; }
#tp-root .cpt .cpt-voice svg { width: 20px; height: 20px; fill: currentColor; }
#tp-root .cpt .cpt-voice.ds-off .face, #tp-root .cpt .cpt-voice[data-state="wait"] .face { opacity: .5; }
#tp-root .cpt .cpt-voice:focus-visible .face { outline: 2px solid var(--ds-voice-edge); outline-offset: 1px; }
#tp-root .cpt .cpt-voice-lbl, #tp-root .cpt .cpt-react-lbl { display: block; position: absolute; z-index: 30; pointer-events: none; text-align: center; white-space: nowrap; overflow: hidden;
  font: 800 var(--ds-fs-pile)/12px var(--ds-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-ink-dim); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
#tp-root .cpt .cpt-react-lbl { text-align: left; }
#tp-root .cpt .cpt-react-marks { display: block; position: absolute; inset: 0; pointer-events: none; }
#tp-root .cpt .cpt-react-marks .ds-react-spot { position: absolute; box-sizing: border-box; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .42); pointer-events: none; }
#tp-root .cpt .cpt-drawer { position: fixed; box-sizing: border-box; border-bottom: 1px solid var(--panel-line); border-radius: 14px; padding: 6px 8px 8px; display: flex; flex-direction: column; overflow: hidden; }
#tp-root .cpt .cpt-drawer.hidden { display: none; }
#tp-root .cpt .cpt-drawer .drawer-head { margin-bottom: 2px; gap: 6px; font-size: 10.5px; line-height: 1.2; }
#tp-root .cpt .cpt-drawer .x { flex: none; width: 34px; height: 34px; min-width: 34px; font-size: 14px; }
#tp-root .cpt .cpt-emoji-list { display: flex; flex-direction: column; gap: 4px; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; padding: 0;
  max-height: calc(var(--ds-drawer-rows, 4) * 42px + 26px); min-height: 0; }
#tp-root .cpt .cpt-emoji-list .emoji-pack { padding: 0; border-right: 0; gap: 2px; }
#tp-root .cpt .cpt-emoji-list .pack-head { min-height: 20px; font-size: 10px; }
#tp-root .cpt .cpt-emoji-list .pack-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
#tp-root .cpt .cpt-emoji-list .emoji { min-width: 0; height: 40px; padding: 0; justify-content: center; border-radius: 10px; }
#tp-root .cpt .cpt-emoji-list .emoji span { font-size: 22px; line-height: 1; }
#tp-root .cpt .cpt-emoji-list .emoji small, #tp-root .cpt .cpt-emoji-list .emoji .refill-link { display: none; }
#tp-root .cpt .cpt-emoji-list .emoji .uses { top: 1px; right: 2px; font-size: 7.5px; }
/* ---------------- ported from Cambio (end) ---------------- */

/* ---- CP: base (Cambio style.css #ui-layer / #table-layer equivalents) ---- */
#tp-root:has(> .cpt) { padding: 0; background: #06130f; }
#tp-root .cpt { --cpt-sa-t: env(safe-area-inset-top, 0px); --cpt-sa-r: env(safe-area-inset-right, 0px); --cpt-sa-b: env(safe-area-inset-bottom, 0px); --cpt-sa-l: env(safe-area-inset-left, 0px);
  position: absolute; top: var(--cpt-sa-t); right: var(--cpt-sa-r); bottom: var(--cpt-sa-b); left: var(--cpt-sa-l); overflow: visible; color: var(--ds-ink); font-family: var(--ds-font-ui); -webkit-user-select: none; user-select: none; }
#tp-root .cpt > * { position: absolute; }
#tp-root .cpt > .cpt-room { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#tp-root .cpt .cpt-felt { z-index: 1; pointer-events: none; }
#tp-root .cpt .cpt-rim, #tp-root .cpt .cpt-baize { position: absolute; }
#tp-root .cpt .cpt-pilebox { z-index: 1; box-sizing: border-box; border: 1px solid var(--ds-wordmark); pointer-events: none; }
#tp-root .cpt .cpt-react-marks { z-index: 2; }
#tp-root .cpt .cpt-seats { inset: 0; z-index: 3; pointer-events: none; }
#tp-root .cpt .cpt-seats .seat, #tp-root .cpt .cpt-seats .seat .seat-id { pointer-events: auto; }
#tp-root .cpt .avatar { display: grid; place-items: center; border-radius: 50%; color: var(--ds-plate-ink); background: var(--ds-plate-bg); font-weight: 800; box-sizing: border-box; }
#tp-root .cpt .cpt-center { z-index: 4; }
#tp-root .cpt .cpt-tokens { inset: 0; z-index: 4; pointer-events: none; }
#tp-root .cpt .cpt-me { z-index: 5; }
#tp-root .cpt .cpt-col { z-index: 6; }
#tp-root .cpt .cpt-menu-btn, #tp-root .cpt .cpt-chat, #tp-root .cpt .cpt-voice { z-index: 7; }
#tp-root .cpt .cpt-clock { z-index: 7; transform: none !important; display: flex; align-items: center; justify-content: center; }
#tp-root .cpt .cpt-clock .timer { width: 100%; }
#tp-root .cpt .cpt-clock .timer:empty { visibility: hidden; }
#tp-root .cpt .cpt-clock .timer.warn { color: #fff !important; background: rgba(224, 72, 90, .85) !important; }
#tp-root .cpt > .cpt-status { z-index: 8; pointer-events: none; overflow: hidden; text-overflow: ellipsis; }
#tp-root .cpt > .cpt-status[role="alert"] { box-shadow: 0 0 0 2px var(--ds-accent); }
#tp-root .cpt > .cpt-pill { z-index: 8; transform: translate(-50%, -30px); height: 24px; line-height: 24px; padding: 0 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--ds-status-bg); border: 1px solid var(--ds-status-edge); font: 600 12px/24px var(--ds-font-ui); box-sizing: border-box; }
#tp-root .cpt .cpt-menu { position: absolute !important; z-index: 60; }
#tp-root .cpt .cpt-menu > button, #tp-root .cpt .cpt-menu .ss-strip button { min-height: 44px; min-width: 44px; }
#tp-root .cpt .cpt-menu .menu-info { white-space: normal; }
#tp-root .cpt .cpt-menu .ss-strip { margin: 0; padding: 0; background: none; color: inherit; white-space: normal; text-align: left; font: inherit; border-radius: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#tp-root .cpt .cpt-menu .ss-strip.away .ss-strip-t { color: var(--ds-accent); }
#tp-root .cpt .cpt-menu .ss-strip .ss-away-btn { margin-left: auto; border-radius: 999px; background: var(--ds-btn-bg); color: var(--ds-btn-ink); border: 1px solid var(--ds-btn-edge); font-weight: 800; padding: 0 14px; }
/* Cambio's chat button (#btn-emoji) and menu button (#menu-btn): 44 x 44 taps round a 40 px face */
#tp-root .cpt .act.cpt-chat { width: 44px !important; height: 44px !important; min-height: 44px !important; }
#tp-root .cpt .act.cpt-chat .face { width: 40px; height: 40px; border-radius: 14px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .18); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
#tp-root .cpt .act.cpt-chat svg { width: 22px; height: 22px; fill: #fff; }
#tp-root .cpt .act.cpt-chat svg .eye { fill: #0f2a22; }
#tp-root .cpt .act.cpt-chat svg .smile { fill: none; stroke: #0f2a22; stroke-width: 1.6; stroke-linecap: round; }
#tp-root .cpt .cpt-menu-btn { min-width: 0; min-height: 0; color: #fff; }
#tp-root .cpt .cpt-menu-btn .face { display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
#tp-root .cpt .cpt-menu-btn svg { width: 20px; height: 20px; fill: currentColor; }
#tp-root .cpt .cpt-voice .face svg { fill: #fff; }
/* the column's faces carry a word and, where the move has one, its amount on a second line */
#tp-root .cpt .cpt-col .act.txt .face { flex-direction: column; gap: 1px; line-height: 1.05; padding: 0 2px; text-align: center; }
#tp-root .cpt .cpt-col .act.txt .face small { font: 800 10px/1 var(--ds-font-ui); font-variant-numeric: tabular-nums; opacity: .9; }
#tp-root .cpt .cpt-col .act { min-width: 0 !important; }
#tp-root .cpt .cpt-col .act[aria-expanded="true"] .face { box-shadow: 0 0 0 2px #fff; }
/* chip counts: Cambio's count badge (.ds-count) on the avatar; you: beside your plate */
#tp-root .cpt .cpt-stack { position: absolute; z-index: 21; right: -10px; top: 0; min-width: 18px; height: 15px; padding: 0 4px; border-radius: 8px; box-sizing: border-box; pointer-events: auto;
  background: rgba(0, 0, 0, .8); color: #f4d27a; font: 800 9.5px/15px var(--ds-font-ui); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px rgba(244, 201, 93, .55); white-space: nowrap; }
#tp-root .cpt .cpt-seats .seat.ds-out-l .cpt-stack { right: auto; left: -6px; }
#tp-root .cpt .cpt-mytag .cpt-stack.mine { right: auto; left: calc(var(--ds-act-x, 0px) + 40px); top: auto; bottom: 0; }
#tp-root .cpt .cpt-dealer { position: absolute; z-index: 21; left: -6px; bottom: 12px; width: 15px; height: 15px; border-radius: 50%; background: #fffaf0; color: #2a1a0c; border: 1px solid #2a1a0c;
  font: 800 9px/13px var(--ds-font-ui); text-align: center; box-sizing: border-box; pointer-events: none; }
#tp-root .cpt .cpt-mytag .cpt-dealer.me { left: auto; right: auto; bottom: auto; top: 0; }
#tp-root .cpt .seat .act-label { left: 50%; bottom: calc(100% + 1px); top: auto; transform: translateX(-50%); padding: 2px 6px; font-size: 10px; border-radius: 6px; z-index: 22; }
#tp-root .cpt .cpt-seats .seat[data-ds-slot^="T"] .act-label { bottom: auto; top: calc(100% + 1px); }
#tp-root .cpt .seat.packed .avatar, #tp-root .cpt .seat.packed .hand, #tp-root .cpt .cpt-me.packed .avatar { opacity: .5; filter: grayscale(.5); }
#tp-root .cpt .seat.away .avatar { opacity: .55; filter: grayscale(.6); }
#tp-root .cpt .away-badge { display: inline-block; margin-left: 3px; padding: 0 4px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 8px; line-height: 12px; }
#tp-root .cpt .seat.winner .avatar, #tp-root .cpt .cpt-me.winner .avatar { box-shadow: 0 0 0 2.5px var(--ds-accent-2), 0 0 16px 4px rgba(124, 240, 192, .55); }
/* jokers, the winning five, cards out of it */
#tp-root .cpt .card.joker { box-shadow: 0 0 0 2px #C9A44C, 0 0 10px 2px rgba(201, 164, 76, .75) !important; }
#tp-root .cpt .card.best { box-shadow: 0 0 0 2px var(--ds-accent), 0 0 10px 2px rgba(244, 201, 93, .7) !important; }
#tp-root .cpt .card.dim { opacity: .45; }
#tp-root .cpt .card.selectable { cursor: pointer; }
#tp-root .cpt .tp-as { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); z-index: 2; white-space: nowrap; font: 800 9px/12px var(--ds-font-ui); font-style: normal;
  background: #C9A44C; color: #1E2A2C; border-radius: 999px; padding: 0 4px; }
#tp-root .cpt .cpt-myhand { z-index: 1; }
#tp-root .cpt .cpt-myhand.blind .card { opacity: .9; }
#tp-root .cpt .cpt-myhand .tp-blind-note { position: absolute; left: 0; right: 0; bottom: -2px; margin: 0 auto; width: max-content; z-index: 3; padding: 1px 6px; border-radius: 999px;
  background: rgba(0, 0, 0, .7); color: #fff; font: 700 9.5px/14px var(--ds-font-ui); pointer-events: none; }
/* the centre box: pot, stake, joker (Teen Patti) or the board + pot (Hold'em / Omaha), Cambio's pile spots and labels */
#tp-root .cpt .cpt-center { justify-content: center; }
#tp-root .cpt .cpt-center > .pile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: var(--v7-ch-pile); }
#tp-root .cpt .cpt-center .pile .tp-chips { flex-direction: column; gap: 2px; color: var(--ds-ink); }
#tp-root .cpt .cpt-center .pile .tp-chips b { font: 800 13px/1 var(--ds-font-ui); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
#tp-root .cpt .cpt-center .pile .tp-chips.pot .tp-pile i { width: 22px; height: 7px; }
#tp-root .cpt .cpt-center .pile .card.medium, #tp-root .cpt .cpt-center .pile .card.small { --h: var(--v7-ch-pile) !important; }
#tp-root .cpt .cpt-center .pile-label { display: block; }
#tp-root .cpt .cpt-center .pile .tp-pot-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#tp-root .cpt .cpt-center[data-kind="board"] { gap: 4px !important; flex-wrap: nowrap; }
#tp-root .cpt .cpt-center[data-kind="board"] .pk-board { display: flex; gap: 3px; position: relative; height: var(--cpt-board-ch, 40px); }
#tp-root .cpt .cpt-center[data-kind="board"] .pk-board .card { --h: var(--cpt-board-ch, 40px) !important; }
#tp-root .cpt .cpt-center[data-kind="board"] .pk-slot { display: block; height: var(--cpt-board-ch, 40px); aspect-ratio: 5 / 7; box-sizing: border-box; border-radius: 12% / 8.6%; border: 1.5px dashed rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .12); }
#tp-root .cpt .cpt-center[data-kind="board"] .pile-label { top: calc(100% + 3px); }
#tp-root .cpt .cpt-center[data-kind="board"] .pk-pot { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 3px); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#tp-root .cpt .cpt-center .pk-pot .pile-label { position: static; transform: none; }
#tp-root .cpt .cpt-center .pk-pot .tp-chips { flex-direction: row; }
#tp-root .cpt .cpt-center .pk-pot .tp-chips b { font: 800 11px/1 var(--ds-font-ui); }
#tp-root .cpt .cpt-center .tp-joker .card { --h: var(--v7-ch-pile) !important; }
/* bet tokens: the chips each player has in front of them this round, between their cards and the centre */
#tp-root .cpt .tp-bet { position: absolute; display: inline-flex; align-items: center; padding: 1px 6px 1px 3px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: var(--ds-ink); font-size: 10.5px; pointer-events: none; white-space: nowrap; }
#tp-root .cpt .tp-fly { position: absolute; z-index: 30; }
/* reactions in each player's spot (Cambio reactSpot, 28 px) */
#tp-root .cpt > .tp-pop { z-index: 40; transform: translate(-50%, -50%); font-size: 26px; line-height: 1; pointer-events: none; animation: cpt-pop 2.6s ease-out forwards; }
@keyframes cpt-pop { 0% { transform: translate(-50%, -40%) scale(.4); opacity: 0; } 12% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -70%) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #tp-root .cpt > .tp-pop { animation: none; } }
/* the emoji drawer is Cambio's (position from the solver) */
#tp-root .cpt .cpt-drawer { z-index: 80; background: var(--c-surface, #fffaf0); color: var(--c-ink, #1d2321); }
#tp-root .cpt .cpt-drawer .emoji { border: 0; background: none; min-height: 40px; width: 100%; }
#tp-root .cpt .cpt-drawer .emoji.locked span { filter: grayscale(1); opacity: .38; }
/* the bet meter sheet (CP: Cambio has no bet control): a panel left of the column, like the ☰ menu */
#tp-root .cpt .cpt-meter-sheet { z-index: 55; padding: 6px 8px; box-sizing: border-box; border-radius: 12px; background: #1B2A4A; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); color: #fff; }
#tp-root .cpt .cpt-meter-sheet.hidden { display: none !important; }
#tp-root .cpt .cpt-meter-sheet .tp-meter { width: auto; min-width: 280px; }
#tp-root .cpt .cpt-meter-sheet .tp-q { min-height: 44px; min-width: 44px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .22); font: 700 12px/1 var(--ds-font-ui); }
#tp-root .cpt .cpt-meter-sheet .tp-chipval { color: #f4d27a; }
/* the results sheet (Cambio #modal-box.results look) */
#tp-root .cpt .cpt-results { inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0, 0, 0, .35); padding: 8px; box-sizing: border-box; }
#tp-root .cpt .cpt-results-box { position: relative; max-width: min(560px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: 10px 14px 12px; border-radius: 16px;
  background: var(--c-surface, #fffaf0); color: var(--c-ink, #1d2321); box-shadow: 0 12px 30px rgba(0, 0, 0, .55); font-family: var(--font-ui); }
#tp-root .cpt .cpt-results-box h2 { margin: 0 34px 2px 0; font: 600 18px/1.2 var(--font-display); }
#tp-root .cpt .cpt-results-box .small { margin: 0 0 4px; font-size: 12px; color: var(--c-text-2, #555); }
#tp-root .cpt .cpt-results-box .x { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; min-width: 44px; border: 0; background: none; font-size: 16px; }
#tp-root .cpt .cpt-results-box table.results { width: 100%; border-collapse: collapse; font-size: 13px; }
#tp-root .cpt .cpt-results-box table.results td { padding: 3px 4px; border-bottom: 1px solid var(--c-border, #ddd); white-space: nowrap; }
#tp-root .cpt .cpt-results-box table.results td.mini { display: flex; gap: 3px; }
#tp-root .cpt .cpt-results-box table.results .card.tiny { --h: 34px; margin: 0; border-radius: 4px; }
#tp-root .cpt .cpt-results-box tr.win td { font-weight: 700; }
#tp-root .cpt .cpt-results-box .tp-won { color: #1f7d52; }
#tp-root .cpt .cpt-results-box .row.end { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
#tp-root .cpt .cpt-results-box .row.end button { height: 44px; min-height: 44px; padding: 0 16px; }
@media (max-height: 360px) { #tp-root .cpt .cpt-results-box table.results .card.tiny { --h: 24px; } #tp-root .cpt .cpt-results-box { padding: 6px 10px 8px; } #tp-root .cpt .cpt-results-box h2 { font-size: 15px; } }
/* the online-table state line (waiting / timeout / server error) as a Cambio table pill above the status */
#tp-root .cpt .ot-state { position: absolute; z-index: 8; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--ds-status-bg); border: 1px solid var(--ds-status-edge); font: 600 12px/18px var(--ds-font-ui); white-space: nowrap; }
#tp-root .cpt .ot-state.err { border-color: var(--ds-danger); }
/* overlays (leave confirm, session vote) over the table */
#tp-root .cpt > .tp-confirm { inset: 0; z-index: 80; color: var(--c-ink, #1d2321); }
#tp-root .cpt .cpt-center[data-kind="board"] { flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 2px !important; padding: 0 !important; box-sizing: border-box; }
#tp-root .cpt .cpt-center[data-kind="board"] .pk-pot { position: static; transform: none; }
#tp-root .cpt .cpt-center .pk-pots { font: 700 10px/1.2 var(--ds-font-ui); color: #fff; text-align: center; white-space: nowrap; }
#tp-root .cpt .tp-jpick { pointer-events: auto; display: inline; }
#tp-root .cpt .cpt-jp { pointer-events: auto; display: inline-flex !important; align-items: center; vertical-align: middle; height: 18px; min-height: 0 !important; min-width: 0 !important; width: auto !important; margin: -2px 0 0 4px; padding: 1px 8px; min-height: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .25); color: inherit; font: 700 11px/16px var(--ds-font-ui); }
#tp-root .cpt .cpt-jp.on { background: var(--ds-gold, #e8c66a); color: #1b1b1b; border-color: transparent; }

/* v0.1.11: a chip badge next to the action column moves to the avatar's left corner (8 px clear of the column) */
#tp-root .cpt .cpt-seats .seat .cpt-stack.cpt-stack-l { right: auto; left: -6px; }
/* v0.1.14 Pass & Play: Cambio's cover (#handoff) over our table layer (#tp-root, z 900), under the rotate prompt
   (z 10000); while covered the table layer is not shown at all (and is drawn with no card faces) */
#handoff { z-index: 950; }
html.pp-covered #tp-root { visibility: hidden; }
#modal-box .pp-standings { margin: 8px 0; padding-left: 1.4em; }

html.pp-scores-on #modal { z-index: 945; } /* the Scores sheet over the Pass & Play table */
#modal-box.pp table.results:not(.totals) td:nth-child(2) { white-space: nowrap; } /* v0.1.15: avatar + name on one line */
/* v0.1.16: a wider running-total column at 844x390 (names, "N wins" and the total each on one line); the 8 px gap stays */
#modal-box.pp .pp-results { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; }
#modal-box.pp table.results.totals td { white-space: nowrap; }
/* v0.1.16 "Pause for me" in the old clock spot (bottom left, above the chat button): Cambio's action button, 44 px tall */
#tp-root .cpt .cpt-clock { pointer-events: none; overflow: visible; }
#tp-root .cpt .cpt-clock > .cpt-pause { pointer-events: auto; position: absolute; left: 0; bottom: 0; width: auto !important; min-width: 96px !important;
  height: 44px !important; min-height: 44px !important; padding: 0 12px !important; white-space: nowrap; font-size: 13px; }
#tp-root .cpt .cpt-clock > .cpt-pause .face { font-weight: 700; }
#tp-root .cpt .cpt-clock > .cpt-pause.on { background: var(--ds-gold, #e0b54a) !important; color: #1b1406 !important; }