/* Shared table styles for the Appently table demos. Everything uses the tb- prefix and sits inside the kit's
   dark .dk-stage. Cards come from cards.css (pc-). See README.md for markup examples. */

/* Elements hidden with the hidden attribute stay hidden even when a tb- class sets display. */
[class*="tb-"][hidden] { display: none !important; }

/* ---------- tokens ---------- */
.dk-stage {
  --tb-ink: rgba(240, 210, 140, .86);      /* printed felt lettering */
  --tb-ink-dim: rgba(240, 210, 140, .5);
  --tb-chalk: rgba(255, 255, 255, .62);    /* white felt print */
  --tb-win: #35e39a; --tb-lose: #ff5a6e; --tb-push: #cfd5e2;
  --tb-wood-1: #7a4c26; --tb-wood-2: #4a2c14; --tb-wood-3: #2a180a;
  --tb-leather-1: #17110e; --tb-leather-2: #3d312b; --tb-leather-3: #0e0b09;
}

/* ---------- table shapes: wrapper draws the padded rail and wood edge, .tb-felt sits inside ---------- */
.tb-table { --rail: 30px; position: relative; isolation: isolate; }
.tb-table > .tb-felt { position: relative; height: 100%; }

/* Half moon (blackjack): straight dealer edge on top, padded rail around the curve. */
.tb-table.half { padding: 0 var(--rail) var(--rail); border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background:
    radial-gradient(farthest-side at 50% 0, transparent calc(100% - var(--rail) - 1px),
      #8a6236 calc(100% - var(--rail)), #3f2913 calc(100% - var(--rail) + 3px),
      var(--tb-leather-1) calc(100% - var(--rail) + 4px), var(--tb-leather-2) calc(100% - var(--rail) * .52),
      var(--tb-leather-1) calc(100% - 8px), var(--tb-leather-3) calc(100% - 7px),
      var(--tb-wood-1) calc(100% - 6px), var(--tb-wood-2) calc(100% - 3px), var(--tb-wood-3) 100%);
  box-shadow: 0 30px 50px -24px rgba(0,0,0,.85); }
.tb-table.half > .tb-felt { border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.tb-table.half::before { content: ''; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 6px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent); }

/* Rounded rectangle and stadium (roulette, craps, baccarat, poker). The rail is a border made of gradients. */
.tb-table.rect, .tb-table.oval { padding: var(--rail); border-radius: calc(var(--rail) + 22px);
  background:
    linear-gradient(var(--tb-leather-1), var(--tb-leather-1)) padding-box,
    linear-gradient(180deg, var(--tb-wood-1), var(--tb-wood-3)) border-box;
  border: 5px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 10px 18px -6px rgba(255,255,255,.12), inset 0 -14px 22px -8px rgba(0,0,0,.8), 0 30px 50px -24px rgba(0,0,0,.85); }
.tb-table.rect > .tb-felt { border-radius: 22px; box-shadow: 0 0 0 3px #6e4a27, 0 0 0 4px #24160a, inset 0 0 0 1px rgba(0,0,0,.35), inset 0 18px 40px -20px rgba(0,0,0,.55), inset 0 -30px 60px -30px rgba(0,0,0,.6); }
.tb-table.oval { border-radius: 999px; }
.tb-table.oval > .tb-felt { border-radius: 999px; box-shadow: 0 0 0 3px #6e4a27, 0 0 0 4px #24160a, inset 0 0 50px rgba(0,0,0,.5); }

/* ---------- felt ---------- */
.tb-felt { --f1: #1f7b4f; --f2: #135a38; --f3: #0a3623; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.08), transparent 70%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    radial-gradient(130% 110% at 50% 12%, var(--f1) 0%, var(--f2) 56%, var(--f3) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 18px 40px -20px rgba(0,0,0,.55), inset 0 -40px 70px -30px rgba(0,0,0,.6); }
.tb-felt.blue { --f1: #24689f; --f2: #174b79; --f3: #0b2b4a; }
.tb-felt.red { --f1: #8e2a33; --f2: #6a1c24; --f3: #3d0e14; }
.tb-felt.blue { --tb-ink: rgba(232, 214, 160, .86); }

/* printed felt lettering (SVG made by TABLE.arc, or your own <text> with these classes) */
.tb-arc { position: absolute; display: block; overflow: visible; pointer-events: none; }
.tb-print { font-family: Inter, system-ui, sans-serif; font-weight: 800; font-size: 26px; letter-spacing: .2em; text-transform: uppercase; fill: var(--tb-ink); }
.tb-print.sub { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 13px; letter-spacing: .24em; fill: var(--tb-chalk); }
.tb-print.small { font-weight: 700; font-size: 15px; letter-spacing: .26em; fill: var(--tb-ink-dim); }
.tb-print-line { fill: none; stroke: var(--tb-ink-dim); stroke-width: 2; }
.tb-printed { font-family: Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--tb-ink); }

/* ---------- areas and labels ---------- */
.tb-dealer, .tb-player { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tb-who { font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.62); white-space: nowrap; }
.tb-turn { color: var(--you); }
.tb-cards { position: relative; display: flex; align-items: flex-start; min-height: calc(var(--cw, 72px) * 1.4); }
.tb-cards.fan .pc + .pc { margin-left: calc(var(--cw, 72px) * -.62); }
.tb-cards.cascade .pc + .pc { margin-left: calc(var(--cw, 72px) * -.74); margin-top: calc(var(--cw, 72px) * -.16); }

/* hand total pill: <span class="tb-total soft">7 / 17</span> */
.tb-total { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 38px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: rgba(6,10,8,.72); border: 1px solid rgba(255,255,255,.16); color: #f4f5f7; font: 700 13.5px/1 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); white-space: nowrap; transition: background .25s, border-color .25s, color .25s; }
.tb-total.soft { color: #fff; }
.tb-total.soft i { font-style: normal; color: rgba(255,255,255,.45); font-weight: 600; }
.tb-total.bust { background: var(--tb-lose); border-color: var(--tb-lose); color: #fff; }
.tb-total.bj { background: var(--you); border-color: var(--you); color: var(--you-ink); }
.tb-total.win { background: var(--tb-win); border-color: var(--tb-win); color: #06281a; }
.tb-total.push { background: #e6e9ef; border-color: #e6e9ef; color: #1a1d24; }
.tb-total.lose { background: rgba(6,10,8,.72); border-color: rgba(255,90,110,.6); color: #ffb3bd; }
.tb-total.pop { animation: tbpop .42s cubic-bezier(.2,.9,.3,1.4); }
@keyframes tbpop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- bet spots: <div class="tb-spot"><span class="tb-spot-l">Bet</span></div> ---------- */
.tb-spot { --spot: 86px; position: relative; width: var(--spot); height: var(--spot); border-radius: 50%; flex: none; display: grid; place-items: center; cursor: pointer; outline: none;
  border: 2.5px solid var(--tb-ink-dim); background: radial-gradient(circle, rgba(0,0,0,.12), rgba(0,0,0,.02) 70%);
  box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6.5px rgba(240,210,140,.22); transition: border-color .2s, box-shadow .25s, transform .2s, opacity .3s; }
.tb-spot.box { border-radius: 14px; width: var(--spot-w, 118px); height: var(--spot-h, 76px); }
.tb-spot-l { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 800 11px/1.15 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--tb-ink-dim); pointer-events: none; transition: opacity .2s; }
.tb-spot.has-bet .tb-spot-l { opacity: 0; }
.tb-spot:hover:not(.locked), .tb-spot:focus-visible { border-color: var(--tb-ink); box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6.5px rgba(240,210,140,.35), 0 0 0 4px rgba(240,210,140,.12); }
.tb-spot.locked { cursor: default; }
.tb-spot.active { border-color: var(--you); animation: tbactive 1.5s ease-in-out infinite; }
@keyframes tbactive { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,178,30,.85), 0 0 18px 2px rgba(255,178,30,.35); } 50% { box-shadow: 0 0 0 3px rgba(255,178,30,.85), 0 0 30px 8px rgba(255,178,30,.5); } }
.tb-spot.win { border-color: var(--tb-win); box-shadow: 0 0 0 3px rgba(53,227,154,.8), 0 0 30px 6px rgba(53,227,154,.35); }
.tb-spot.lose { border-color: rgba(255,90,110,.75); opacity: .75; }
.tb-spot.push { border-color: #e6e9ef; box-shadow: 0 0 0 3px rgba(230,233,239,.6); }
.tb-spot.off { opacity: .35; pointer-events: none; }
.tb-spot-minus { position: absolute; z-index: 4; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: #14161c; color: #fff; font: 800 15px/1 Inter, sans-serif; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .15s, transform .15s; }
.tb-spot:hover .tb-spot-minus, .tb-spot:focus-within .tb-spot-minus { opacity: 1; }
.tb-spot-minus:hover { background: var(--tb-lose); border-color: var(--tb-lose); }
@media (hover: none) { .tb-spot-minus { opacity: 1; } }
.tb-shake { animation: tbshake .38s; }
@keyframes tbshake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* ---------- chips ---------- */
.tb-chip { --chip: 44px; display: inline-block; width: var(--chip); height: var(--chip); border-radius: 50%; flex: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.tb-chip svg, .tb-rchip svg { display: block; width: 100%; height: 100%; }
.tb-fly { position: fixed; z-index: 9999; pointer-events: none; will-change: transform; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }

/* stacked pile (CHIPS.stack) */
.tb-stack { --chip: 44px; --ct: 4px; position: relative; display: inline-flex; flex-direction: column; align-items: center; pointer-events: none; }
.tb-pile { position: relative; display: block; width: var(--chip); height: calc(var(--chip) * .82 + var(--ct) * var(--n)); animation: tbland .28s cubic-bezier(.2,.9,.3,1.3); }
.tb-pile::before { content: ''; position: absolute; left: -8%; right: -8%; bottom: -10%; height: calc(var(--chip) * .5); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }
@keyframes tbland { from { transform: translateY(-6px); opacity: .4; } }
.tb-pc { position: absolute; left: 0; bottom: calc(var(--i) * var(--ct)); width: var(--chip); height: calc(var(--chip) * .82 + var(--ct)); border-radius: 50% / calc(var(--chip) * .41);
  background:
    linear-gradient(90deg, rgba(0,0,0,.4), transparent 22%, transparent 78%, rgba(0,0,0,.4)),
    linear-gradient(90deg, var(--cd) 0 9%, var(--cs) 9% 17%, var(--cb) 17% 33%, var(--cs) 33% 41%, var(--cb) 41% 59%, var(--cs) 59% 67%, var(--cb) 67% 83%, var(--cs) 83% 91%, var(--cd) 91%);
  box-shadow: 0 1px 0 rgba(0,0,0,.55); }
.tb-pc-face { position: absolute; left: 0; top: 0; width: var(--chip); height: calc(var(--chip) * .82); border-radius: 50%; overflow: hidden; }
.tb-pc-face svg { display: block; width: var(--chip); height: var(--chip); transform: scaleY(.82); transform-origin: 0 0; }
.tb-stack-amt { margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(5,8,7,.78); border: 1px solid rgba(255,255,255,.14); font: 700 11.5px/1.35 'IBM Plex Mono', monospace; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-stack.empty .tb-stack-amt { display: none; }
.tb-spot > .tb-stack { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 4px)); }
.tb-spot > .tb-stack .tb-stack-amt { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); }

/* player chip rack (CHIPS.rack) */
.tb-rack { display: flex; align-items: center; gap: 10px; }
.tb-rchip { --chip: 52px; appearance: none; position: relative; width: var(--chip); height: var(--chip); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; flex: none;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.5)) drop-shadow(0 6px 8px rgba(0,0,0,.35)); transition: transform .16s cubic-bezier(.2,.9,.3,1.3), filter .16s, opacity .2s; }
.tb-rchip:hover:not(:disabled) { transform: translateY(-3px); }
.tb-rchip.on { transform: translateY(-7px); filter: drop-shadow(0 0 0 transparent) drop-shadow(0 11px 8px rgba(0,0,0,.5)); }
.tb-rchip.on::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--you); box-shadow: 0 0 14px rgba(255,178,30,.55); }
.tb-rchip:disabled { opacity: .3; cursor: not-allowed; }
.tb-rchip:focus-visible { outline: 2px solid var(--you); outline-offset: 4px; }

/* dealer chip tray (CHIPS.tray) */
.tb-tray { display: flex; gap: 3px; padding: 5px 6px 6px; border-radius: 0 0 10px 10px; background: linear-gradient(#08090b, #15171c); box-shadow: inset 0 3px 8px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.08), 0 0 0 2px #2b2e36, 0 0 0 3px #0b0c0f; }
.tb-tray-col { position: relative; width: 22px; height: 46px; border-radius: 5px; background: rgba(0,0,0,.6); overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.9); }
.tb-tray-col i { position: absolute; left: 1px; right: 1px; bottom: 0; height: var(--fill, 80%); border-radius: 4px 4px 3px 3px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%, rgba(0,0,0,.45)),
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.42) 3px 4px),
    linear-gradient(90deg, var(--cb) 0 20%, var(--cs) 20% 32%, var(--cb) 32% 68%, var(--cs) 68% 80%, var(--cb) 80%);
  transition: height .5s cubic-bezier(.3,.7,.3,1); }
.tb-tray.bump { animation: tbbump .3s; }
@keyframes tbbump { 50% { transform: translateY(2px); } }

/* ---------- shoe and discard ---------- */
.tb-shoe { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tb-shoe-body { position: relative; width: 76px; height: 64px; }
.tb-shoe-body > .tb-shoe-cards { position: absolute; left: 12px; right: 10px; top: 2px; height: 40px; border-radius: 4px; transform: skewX(-12deg);
  background: repeating-linear-gradient(90deg, #f3f0e8 0 1px, #c9c4b8 1px 2px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.tb-shoe-body > .tb-shoe-top { position: absolute; left: 16px; top: -2px; --cw: 42px; transform: rotate(-12deg); }
.tb-shoe-body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38px; border-radius: 7px 7px 10px 10px;
  background: linear-gradient(170deg, rgba(60,66,80,.95), rgba(14,16,21,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.6), 0 10px 18px -6px rgba(0,0,0,.7); }
.tb-shoe-body::before { content: ''; position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 26px; height: 4px; border-radius: 2px; background: #07080a; }
.tb-shoe-n, .tb-discard-n { font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }
.tb-discard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tb-discard-tray { position: relative; width: 58px; height: 70px; border-radius: 8px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 6px 12px rgba(0,0,0,.4); }
.tb-discard-pile { position: absolute; left: 7px; right: 7px; bottom: 7px; height: var(--h, 0px); border-radius: 4px; max-height: 56px; transition: height .4s;
  background: repeating-linear-gradient(180deg, #232b3d 0 2px, #151a26 2px 3px); box-shadow: 0 -1px 0 rgba(255,178,30,.35); }

/* ---------- payout card and paytable ---------- */
.tb-paycard { border-radius: 12px; background: var(--s-panel); border: 1px solid var(--s-line); padding: 11px 14px; }
.tb-paycard h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--s-dim); margin-bottom: 6px; }
.tb-paycard h4 span { font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: 0; text-transform: none; color: var(--you); }
.tb-pay { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 7px; font-size: 13px; transition: background .25s, color .25s; }
.tb-pay + .tb-pay { box-shadow: 0 -1px 0 var(--s-line); }
.tb-pay span { color: var(--s-dim); }
.tb-pay b { font: 600 13px 'IBM Plex Mono', monospace; color: var(--s-text); white-space: nowrap; }
.tb-pay.on { background: rgba(255,178,30,.14); box-shadow: inset 3px 0 0 var(--you); }
.tb-pay.on span, .tb-pay.on b { color: var(--you); }
.tb-pay.hit { animation: tbhit 1.2s ease-out; }
@keyframes tbhit { 0% { background: rgba(53,227,154,.4); } 100% { background: transparent; } }
.tb-paytable { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tb-paytable th { font: 700 10.5px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--s-dim); text-align: right; padding: 6px 8px; }
.tb-paytable th:first-child, .tb-paytable td:first-child { text-align: left; }
.tb-paytable td { padding: 5px 8px; text-align: right; font-family: 'IBM Plex Mono', monospace; color: var(--s-text); border-top: 1px solid var(--s-line); }
.tb-paytable td:first-child { font-family: Inter, sans-serif; font-weight: 600; color: var(--s-dim); }
.tb-paytable .col-on { background: rgba(255,178,30,.12); color: var(--you); }
.tb-paytable tr.on td { background: rgba(53,227,154,.16); color: var(--tb-win); }
.tb-paytable tr.on td.col-on { background: var(--tb-win); color: #06281a; font-weight: 700; }

/* ---------- operator drawer (TABLE.drawer) ---------- */
.tb-scrim { position: absolute; inset: 0; z-index: 30; background: rgba(4,5,8,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }
.tb-scrim.open { opacity: 1; pointer-events: auto; }
.tb-drawer { position: absolute; z-index: 31; top: 0; right: 0; bottom: 0; width: min(390px, 94%); display: flex; flex-direction: column; overflow: auto; padding: 16px 20px 22px;
  background: linear-gradient(180deg, #121419, #0d0f13); border-left: 1px solid var(--s-line); box-shadow: -30px 0 60px -20px rgba(0,0,0,.7);
  transform: translateX(104%); visibility: hidden; transition: transform .32s cubic-bezier(.3,.7,.25,1), visibility 0s .32s; }
.tb-drawer.open { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.3,.7,.25,1); }
.tb-drawer-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tb-op-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px dashed rgba(255,255,255,.35); border-radius: 7px; font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--s-text); }
.tb-op-badge::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--you); }
.tb-drawer-x { appearance: none; border: 1px solid var(--s-line); background: var(--s-panel); color: var(--s-text); border-radius: 8px; padding: 6px 11px; font: 600 12px Inter, sans-serif; cursor: pointer; }
.tb-drawer-x:hover { border-color: #3d4352; }
.tb-drawer h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.tb-drawer-note { font-size: 12.5px; color: var(--s-dim); margin-top: 3px; line-height: 1.45; }
.tb-drawer-b { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.tb-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 11px 0; border-bottom: 1px solid var(--s-line); }
.tb-opt > span { font-size: 13px; font-weight: 600; }
.tb-opt > small { grid-column: 1 / -1; font-size: 11.5px; color: var(--s-dim); line-height: 1.4; }
.tb-opt .s-seg button { padding: 5px 9px; font-size: 12px; }
.tb-opt .s-seg button:disabled { opacity: .35; cursor: default; }
.tb-edge { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--s-panel); border: 1px solid var(--s-line); }
.tb-edge-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tb-edge-row small { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--s-dim); }
.tb-edge-row b { font: 800 26px/1.1 Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tb-edge-row b.s { font-size: 16px; font-weight: 700; color: var(--s-dim); }
.tb-edge p { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--s-dim); }
.tb-edge.flash b { animation: tbflash .8s ease-out; }
@keyframes tbflash { 0% { color: var(--you); } 100% { color: inherit; } }

/* ---------- result banner (TABLE.result) ---------- */
.tb-result { position: absolute; z-index: 12; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 240px; text-align: center; padding: 12px 26px 14px; border-radius: 16px;
  background: rgba(8,10,12,.9); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 60px -16px rgba(0,0,0,.85); backdrop-filter: blur(6px); pointer-events: none;
  animation: tbres .5s cubic-bezier(.2,.9,.3,1.25); }
.tb-result small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--s-dim); }
.tb-result b { display: block; font-size: 26px; font-weight: 900; letter-spacing: -.02em; margin: 1px 0; color: var(--s-text); }
.tb-result span { display: block; font-size: 17px; font-weight: 700; }
.tb-result.win { border-color: rgba(53,227,154,.55); } .tb-result.win b, .tb-result.win span { color: var(--tb-win); }
.tb-result.bj { border-color: var(--you); background: linear-gradient(180deg, rgba(40,30,8,.94), rgba(10,9,6,.94)); } .tb-result.bj b, .tb-result.bj span { color: var(--you); }
.tb-result.lose span { color: var(--tb-lose); }
.tb-result.push b { color: #e6e9ef; }
.tb-result.out { animation: tbresout .26s ease-in forwards; }
@keyframes tbres { from { opacity: 0; transform: translate(-50%, -50%) scale(.82); } }
@keyframes tbresout { to { opacity: 0; transform: translate(-50%, -50%) scale(.94); } }

/* ---------- balance chip (TABLE.balance) ---------- */
.tb-balance { display: flex; align-items: center; gap: 11px; padding: 9px 12px 9px 10px; border-radius: 14px; background: var(--s-panel); border: 1px solid var(--s-line); min-width: 0; }
.tb-balance-chip { width: 34px; height: 34px; flex: none; border-radius: 50%; background: radial-gradient(circle, #f6f2ea 0 38%, transparent 39%), repeating-conic-gradient(from -15deg, #1d1e24 0 30deg, #f6f2ea 30deg 60deg); box-shadow: 0 0 0 2px #1d1e24, 0 3px 0 rgba(0,0,0,.5); position: relative; }
.tb-balance-chip::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--you); }
.tb-balance-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tb-balance-t small { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--s-dim); }
.tb-balance-v { font: 800 22px/1.15 Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-balance.up .tb-balance-v { animation: tbup 1s ease-out; } .tb-balance.down .tb-balance-v { animation: tbdown 1s ease-out; }
@keyframes tbup { 0% { color: var(--tb-win); } 100% { color: inherit; } }
@keyframes tbdown { 0% { color: var(--tb-lose); } 100% { color: inherit; } }
.tb-balance-reset { appearance: none; border: 0; background: none; padding: 4px 0; color: var(--s-dim); font: 600 11.5px Inter, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.tb-balance-reset:hover { color: var(--s-text); }
.tb-balance.compact { padding: 6px 10px 6px 8px; gap: 9px; }
.tb-balance.compact .tb-balance-chip { width: 26px; height: 26px; }
.tb-balance.compact .tb-balance-chip::after { inset: 9px; }
.tb-balance.compact .tb-balance-v { font-size: 17px; }

/* ---------- actions ---------- */
.tb-actbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tb-act { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 104px; height: 48px; padding: 0 18px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--you); color: var(--you-ink); font: 800 15px Inter, sans-serif; letter-spacing: -.01em; box-shadow: 0 4px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .1s, filter .15s, opacity .2s; }
.tb-act:hover:not(:disabled) { filter: brightness(1.07); }
.tb-act:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.tb-act:disabled { opacity: .38; cursor: default; }
.tb-act.ghost { background: #232733; color: var(--s-text); box-shadow: 0 4px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.08); }
.tb-act.go { background: var(--tb-win); color: #05261a; }
.tb-act.hint { box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 0 2px var(--s-bg), 0 0 0 4px #7fd6ff; }
.tb-act kbd { font: 600 10px 'IBM Plex Mono', monospace; padding: 2px 5px; border-radius: 4px; background: rgba(0,0,0,.18); color: inherit; opacity: .7; }
.tb-act.ghost kbd { background: rgba(255,255,255,.08); }
.tb-mini { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--s-line); background: var(--s-panel); color: var(--s-text); font: 600 12.5px Inter, sans-serif; cursor: pointer; white-space: nowrap; transition: border-color .15s, opacity .2s; }
.tb-mini:hover:not(:disabled) { border-color: #3d4352; }
.tb-mini:disabled { opacity: .38; cursor: default; }
.tb-mini.on { border-color: var(--you); color: var(--you); }

/* ---------- provably fair panel (TABLE.fairBox) ---------- */
.tb-fair { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; border-radius: 12px; background: var(--s-panel); border: 1px solid var(--s-line); }
.tb-fair-h { display: flex; justify-content: space-between; align-items: center; }
.tb-fair-n { font-size: 11px; color: var(--you); }
.tb-fair-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tb-fair-f small { font-size: 10.5px; color: var(--s-dim); }
.tb-fair-f code { font: 500 10.5px/1.4 'IBM Plex Mono', monospace; color: var(--s-text); word-break: break-all; }
.tb-fair-f code.fresh { animation: tbfresh 1.2s ease-out; }
@keyframes tbfresh { 0% { color: var(--you); } 100% { color: var(--s-text); } }
.tb-fair-cs input { width: 100%; background: var(--s-bg); border: 1px solid var(--s-line); border-radius: 7px; color: var(--s-text); font: 500 11.5px 'IBM Plex Mono', monospace; padding: 6px 9px; outline: none; }
.tb-fair-cs input:focus { border-color: var(--you); }
.tb-fair-cs input:disabled { opacity: .6; }
.tb-fair-v { display: flex; align-items: center; gap: 10px; }
.tb-fair-out { font-size: 11.5px; color: var(--s-dim); line-height: 1.35; }
.tb-fair-out.ok { color: var(--tb-win); } .tb-fair-out.bad { color: var(--tb-lose); }

/* ---------- history ---------- */
.tb-hist { display: flex; flex-direction: column; }
.tb-hist-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--s-line); font-size: 12px; animation: dkfeed .4s cubic-bezier(.2,.9,.3,1); }
.tb-hist-row:first-child { border-top: 0; }
.tb-hist-row > small { font: 600 10.5px 'IBM Plex Mono', monospace; color: var(--s-faint); }
.tb-hist-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s-dim); }
.tb-hist-row > b { font: 700 12px 'IBM Plex Mono', monospace; white-space: nowrap; }
.tb-hist-row > b.up { color: var(--tb-win); } .tb-hist-row > b.down { color: var(--tb-lose); } .tb-hist-row > b.even { color: var(--s-dim); }
.tb-hist-empty { font-size: 12px; color: var(--s-faint); padding: 8px 0; }

/* ---------- dice (DICE) ---------- */
.tb-die { --ds: 54px; position: relative; width: var(--ds); height: var(--ds); perspective: 600px; flex: none; }
.tb-die-move, .tb-die-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.tb-die-face { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 13%; border-radius: 14%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tb-die-face.front { transform: translateZ(calc(var(--ds) / 2)); }
.tb-die-face.back { transform: rotateY(180deg) translateZ(calc(var(--ds) / 2)); }
.tb-die-face.top { transform: rotateX(90deg) translateZ(calc(var(--ds) / 2)); }
.tb-die-face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--ds) / 2)); }
.tb-die-face.right { transform: rotateY(90deg) translateZ(calc(var(--ds) / 2)); }
.tb-die-face.left { transform: rotateY(-90deg) translateZ(calc(var(--ds) / 2)); }
.tb-die-face i { border-radius: 50%; margin: 13%; }
.tb-die-face s { text-decoration: none; }
.tb-die.red .tb-die-face { background: radial-gradient(120% 120% at 30% 25%, #ef3a4c, #b3132a 60%, #7e0a1b); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 calc(var(--ds) * .18) rgba(60,0,8,.65); }
.tb-die.red .tb-die-face i { background: radial-gradient(circle at 40% 35%, #ffffff, #e7e3dc 70%); box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(80,0,10,.4); }
.tb-die.white .tb-die-face { background: radial-gradient(120% 120% at 30% 25%, #ffffff, #ecebe6 60%, #cfccc3); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 0 calc(var(--ds) * .16) rgba(0,0,0,.2); }
.tb-die.white .tb-die-face i { background: radial-gradient(circle at 40% 35%, #34363d, #0f1013 70%); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.tb-die.white .tb-die-face.v1 i { background: radial-gradient(circle at 40% 35%, #e6384a, #9f1022 70%); }
.tb-die.white .tb-die-face.v1 i, .tb-die.red .tb-die-face.v1 i { margin: 0; }
.tb-die-shadow { position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -14%; height: 34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); opacity: .55; }
.tb-die-land .tb-die-move { animation: tbdieland .28s ease-out; }
@keyframes tbdieland { 40% { transform: scale(.94); } }

@media (max-width: 640px) {
  .tb-table { --rail: 18px; }
  .tb-spot { --spot: 64px; }
  .tb-rchip { --chip: 44px; }
  .tb-rack { gap: 7px; }
  .tb-act { min-width: 0; height: 46px; padding: 0 12px; font-size: 14px; }
  .tb-act kbd { display: none; }
  .tb-print { font-size: 22px; }
  .tb-drawer { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-spot.active, .tb-pile, .tb-total.pop, .tb-result { animation: none; }
}