/* Baccarat. Classes use the bc- prefix. Felt, chips and cards come from /demos/_tables/ (tb-, pc-). */
.bc-stage { --bcP: #4d8dff; --bcB: #ff4d5e; --bcT: #2fd27a; --bcPi: #9cc0ff; --bcBi: #ff9aa4; --bcTi: #8ee9b6; }
.bc-screen { display: grid; grid-template-columns: minmax(0, 1fr) 372px; grid-template-areas: "main side" "low side"; gap: 12px 14px; align-items: start; }
.bc-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bc-side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bc-low { grid-area: low; min-width: 0; display: grid; grid-template-columns: 250px 280px minmax(0, 1fr); gap: 12px; align-items: stretch; }

/* ---------- the table ---------- */
.bc-table { --rail: 20px; height: 426px; }
.bc-felt { --cw: 68px; display: flex; flex-direction: column; align-items: center; padding: 0 18px 16px; }
.bc-top { position: relative; width: 100%; height: 0; }
.bc-tray { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2; }
.bc-discard { position: absolute; left: 18px; top: 12px; z-index: 2; }
.bc-shoe { position: absolute; right: 16px; top: 8px; z-index: 2; }
.bc-shoe .tb-shoe-body { transform: scale(.9); transform-origin: 50% 0; }
.bc-shoe.refill .tb-shoe-body { animation: bcrefill .8s cubic-bezier(.2,.8,.3,1.2); }
@keyframes bcrefill { 0% { transform: scale(.9) translateY(-26px); opacity: 0; } 100% { transform: scale(.9); opacity: 1; } }

.bc-hands { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr minmax(220px, 300px) 1fr; align-items: center; gap: 14px; width: 100%; margin-top: 60px; }
.bc-hand { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.bc-hand.p { justify-self: end; } .bc-hand.b { justify-self: start; }
.bc-hand-h { display: flex; align-items: center; gap: 9px; height: 26px; }
.bc-hand-h .tb-total[hidden] { display: none; }
.bc-who { font: 800 12px Inter, sans-serif; letter-spacing: .26em; text-transform: uppercase; }
.bc-hand.p .bc-who { color: var(--bcPi); }
.bc-hand.b .bc-who { color: var(--bcBi); }
.bc-hand.won .bc-who::after { content: 'wins'; margin-left: 8px; padding: 2px 7px; border-radius: 5px; font-size: 10px; letter-spacing: .14em; background: var(--tb-win); color: #06281a; }
.bc-hand.p.won .tb-total { background: var(--bcP); border-color: var(--bcP); color: #fff; }
.bc-hand.b.won .tb-total { background: var(--bcB); border-color: var(--bcB); color: #fff; }
.bc-hand.tied .tb-total { background: var(--bcT); border-color: var(--bcT); color: #052414; }
.bc-cards { display: flex; align-items: center; gap: 8px; height: calc(var(--cw) * 1.4); }
.bc-cards .pc-slot.side, .bc-rot { width: calc(var(--cw) * 1.4); height: var(--cw); }
.bc-cards .pc-slot.side { border-radius: calc(var(--cw) * .085); }
.bc-rot { position: relative; flex: none; display: grid; place-items: center; }
.bc-rot > .pc { position: absolute; left: 50%; top: 50%; margin: calc(var(--cw) * -.7) 0 0 calc(var(--cw) * -.5); transform: rotate(90deg); }
.bc-rot.in > .pc { transition: none; }
.bc-cards .pc.nat .pc-front { box-shadow: 0 0 0 2px var(--you), 0 10px 22px -8px rgba(0,0,0,.7); }

/* rule callout: which rule drew (or stood) */
.bc-rule { position: relative; z-index: 3; align-self: end; min-height: 96px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 5px; text-align: left; }
.bc-rule-idle { font: 600 11px/1.6 'IBM Plex Mono', monospace; letter-spacing: .04em; color: rgba(255,255,255,.4); text-align: center; padding-bottom: 30px; }
.bc-step { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 10px; background: rgba(4,10,7,.66); border: 1px solid rgba(255,255,255,.12); font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.86); animation: bcstep .45s cubic-bezier(.2,.9,.3,1.2); }
.bc-step b { font-weight: 800; color: #fff; }
.bc-step i { font-style: normal; flex: none; width: 58px; text-align: center; font: 800 9px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; padding: 4px 0; border-radius: 6px; color: #fff; margin-top: 1px; }
.bc-step i.p { background: var(--bcP); } .bc-step i.b { background: var(--bcB); } .bc-step i.n { background: var(--you); color: var(--you-ink); } .bc-step i.t { background: var(--bcT); color: #052414; }
.bc-step.old { opacity: .55; }
@keyframes bcstep { from { opacity: 0; transform: translateY(6px) scale(.96); } }

.bc-arc { position: absolute; left: 0; right: 0; bottom: 112px; height: 66px; pointer-events: none; z-index: 1; }
.bc-arc svg { left: 0; top: 0; width: 100%; height: 100%; }

/* betting areas */
.bc-bets { position: relative; z-index: 3; margin-top: auto; display: flex; justify-content: center; align-items: flex-end; gap: 12px; }
.bc-spot { --chip: 40px; }
.bc-spot.main { --spot-w: 164px; --spot-h: 92px; transform: translateY(-6px); }
.bc-spot.tie { --spot-w: 124px; --spot-h: 80px; }
.bc-spot.pair { --spot-w: 104px; --spot-h: 70px; transform: translateY(-20px); }
.bc-spot .tb-spot-l { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.bc-spot .tb-spot-l b { font: 800 15px Inter, sans-serif; letter-spacing: .2em; }
.bc-spot.pair .tb-spot-l b { font-size: 11.5px; }
.bc-spot .tb-spot-l i { font: 600 10.5px 'IBM Plex Mono', monospace; font-style: normal; letter-spacing: .06em; text-transform: none; opacity: .85; }
.bc-spot.p { border-color: rgba(120,165,255,.55); } .bc-spot.p .tb-spot-l { color: var(--bcPi); }
.bc-spot.b { border-color: rgba(255,120,135,.55); } .bc-spot.b .tb-spot-l { color: var(--bcBi); }
.bc-spot.tie { border-color: rgba(110,225,160,.55); } .bc-spot.tie .tb-spot-l { color: var(--bcTi); }
.bc-spot.has-bet .tb-spot-l { opacity: .16; }
.bc-spot.off { display: none; }
.bc-spot > .tb-stack .tb-stack-amt { top: calc(100% - 2px); }

/* squeeze */
.bc-squeeze { position: absolute; inset: 0; z-index: 14; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 45%, rgba(6,14,10,.78), rgba(3,6,5,.94)); backdrop-filter: blur(3px); animation: bcfade .3s ease-out; }
.bc-squeeze[hidden] { display: none; }
@keyframes bcfade { from { opacity: 0; } }
.bc-sq-h { text-align: center; }
.bc-sq-h b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.bc-sq-h span { font-size: 12.5px; color: rgba(255,255,255,.6); }
.bc-sq-cards { display: flex; gap: 26px; }
.bc-peel { --cw: 128px; position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); touch-action: none; cursor: grab; border-radius: calc(var(--cw) * .085); }
.bc-peel:active { cursor: grabbing; }
.bc-peel > .pc { position: absolute; inset: 0; }
.bc-peel-back { position: absolute; inset: 0; border-radius: calc(var(--cw) * .085); overflow: hidden; pointer-events: none;
  clip-path: inset(0 0 var(--peel, 0%) 0 round calc(var(--cw) * .085)); }
.bc-peel-back > .pc { position: absolute; inset: 0; }
.bc-peel-fold { position: absolute; left: 0; right: 0; height: 18px; bottom: calc(var(--peel, 0%) - 9px); pointer-events: none; opacity: var(--fo, 0);
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(255,255,255,.35) 45%, rgba(0,0,0,.25)); border-radius: 50%; filter: blur(1px); }
.bc-peel.open { cursor: default; }
.bc-peel.open .bc-peel-back, .bc-peel.open .bc-peel-fold { display: none; }
.bc-peel-n { position: absolute; left: 0; right: 0; top: calc(100% + 8px); text-align: center; font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.bc-sq-btn { margin-top: 16px; }

/* controls under the table */
.bc-ctrl { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; background: var(--s-panel); border: 1px solid var(--s-line); }
.bc-bal .tb-balance { padding: 0; border: 0; background: none; gap: 9px; }
.bc-bal .tb-balance-v { font-size: 19px; }
.bc-bal .tb-balance-reset { font-size: 11px; }
.bc-rack .tb-rchip { --chip: 44px; }
.bc-rack .tb-rack { gap: 8px; }
.bc-ctrl-btns { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.bc-deal { min-width: 132px; }

/* ---------- scoreboard (printed like a casino road card) ---------- */
.bc-board { display: flex; flex-direction: column; gap: 8px; padding: 11px 13px 12px; border-radius: 14px; background: var(--s-panel); border: 1px solid var(--s-line); }
.bc-board-h { display: flex; align-items: center; gap: 10px; }
.bc-board-n { flex: 1; font-size: 11px; color: var(--you); }
.bc-newshoe { height: 28px; padding: 0 10px; font-size: 11.5px; }
.bc-roads { background: #f6f3ec; border-radius: 10px; padding: 8px 8px 9px; color: #2b2a26; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.bc-road-l { font: 700 9px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8b867a; margin: 5px 0 2px; }
.bc-road-l:first-child { margin-top: 0; }
.bc-road-l.two { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.bc-road { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; border-radius: 4px; background: #fffdf8; box-shadow: inset 0 0 0 1px #ddd6c6; }
.bc-road svg { display: block; }
.bc-derived { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.bc-derived .wide { grid-column: 1 / -1; }
.bc-road .g { stroke: #e4ddcd; stroke-width: 1; }
.bc-road .new { animation: bcnew .6s cubic-bezier(.2,.9,.3,1.3); transform-box: fill-box; transform-origin: center; }
@keyframes bcnew { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.bc-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.bc-stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; padding: 5px 8px; border-radius: 9px; background: var(--s-panel2); border: 1px solid var(--s-line); }
.bc-stat small { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-dim); white-space: nowrap; }
.bc-stat small i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bc-stat b { display: block; font: 800 16px/1.15 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.bc-stat span { font: 600 10px 'IBM Plex Mono', monospace; color: var(--s-faint); text-align: right; }
.bc-ask { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bc-ask > div { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; background: var(--s-panel2); border: 1px solid var(--s-line); font-size: 11.5px; color: var(--s-dim); }
.bc-ask > div b { font-weight: 700; color: var(--s-text); }
.bc-ask svg { flex: none; }
.bc-ask .na { width: 14px; height: 14px; display: grid; place-items: center; color: var(--s-faint); }
.bc-ask .na::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.bc-ask > div b { margin-right: auto; }

/* ---------- lower row ---------- */
.bc-pay { padding: 10px 14px; }
.bc-pay .tb-pay { padding: 4px 8px; font-size: 12.5px; }
.bc-pay .tb-pay small { font: 600 10px 'IBM Plex Mono', monospace; color: var(--s-faint); margin-left: 6px; }
.bc-pay .tb-pay b { font-size: 12.5px; }
.bc-pay .tb-pay.hit { animation: tbhit 1.4s ease-out; }
.bc-pay .tb-pay.off { display: none; }
.bc-pay-note { margin-top: 6px; font-size: 11px; line-height: 1.4; color: var(--s-dim); }
.bc-pay-note b { color: var(--you); font-weight: 600; }

.bc-tab-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.bc-tab-h small { font-size: 10.5px; color: var(--s-faint); text-align: right; }
.bc-tab { display: grid; grid-template-columns: 30px repeat(11, 1fr); gap: 2px; font: 600 9.5px 'IBM Plex Mono', monospace; }
.bc-tab span { display: grid; place-items: center; height: 14px; border-radius: 3px; }
.bc-tab .hd { color: var(--s-faint); font-size: 9.5px; }
.bc-tab .rh { color: var(--s-dim); justify-content: start; padding-left: 2px; }
.bc-tab .d { background: rgba(255,77,94,.16); color: #ff9aa4; }
.bc-tab .s { background: rgba(255,255,255,.04); color: var(--s-faint); }
.bc-tab .row-on { box-shadow: inset 0 0 0 1px rgba(255,178,30,.35); }
.bc-tab .col-on { box-shadow: inset 0 0 0 1px rgba(255,178,30,.35); }
.bc-tab .hit { background: var(--you) !important; color: var(--you-ink) !important; box-shadow: 0 0 0 2px rgba(255,178,30,.35); animation: bchit .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes bchit { from { transform: scale(1.6); } }
.bc-tab-p { margin-top: 7px; font-size: 11px; line-height: 1.35; color: var(--s-dim); }
.bc-tab-p b { color: var(--s-text); font-weight: 600; }

.bc-fair .tb-fair { height: 100%; gap: 7px; padding: 11px 14px; }
.bc-recent { padding: 10px 13px; }
.bc-recent .tb-hist-row { padding: 5px 0; }
.bc-next { display: flex; flex-direction: column; gap: 3px; }
.bc-next small { font-size: 10.5px; color: var(--s-dim); }
.bc-next code { font: 500 10.5px/1.4 'IBM Plex Mono', monospace; color: var(--s-faint); word-break: break-all; }

.bc-recent .tb-hist-row > span .pc-tag { font-size: 11px; line-height: 16px; }
.bc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .bc-screen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side" "low"; }
  .bc-low { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .bc-table { height: auto; }
  .bc-felt { --cw: 37px; padding: 0 6px 12px; }
  .bc-hands { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 44px; }
  .bc-hand.p, .bc-hand.b { justify-self: center; }
  .bc-who { font-size: 10.5px; letter-spacing: .18em; }
  .bc-hand.won .bc-who::after { display: none; }
  .bc-cards { gap: 3px; }
  .bc-rule { grid-column: 1 / -1; grid-row: 2; min-height: 0; align-self: stretch; }
  .bc-rule-idle { padding-bottom: 0; }
  .bc-step { font-size: 11px; }
  .bc-discard, .bc-tray, .bc-arc { display: none; }
  .bc-shoe { right: 4px; top: 2px; }
  .bc-shoe .tb-shoe-body { transform: scale(.6); }
  .bc-shoe .tb-shoe-n { position: absolute; right: 52px; top: 10px; }
  .bc-bets { display: grid; width: 100%; grid-template-columns: 1fr 74px 1fr; gap: 8px; margin-top: 12px; }
  .bc-spot.main, .bc-spot.pair, .bc-spot.tie { transform: none; --spot-w: 100%; }
  .bc-spot.main, .bc-spot.tie { --spot-h: 82px; }
  .bc-spot.pair { --spot-h: 52px; grid-row: 2; }
  #spotPP { grid-column: 1; } #spotBP { grid-column: 3; }
  .bc-spot .tb-spot-l b { font-size: 12px; letter-spacing: .14em; }
  .bc-spot .tb-spot-l i { font-size: 9.5px; }
  .bc-felt > .tb-result { min-width: 0; width: 84%; padding: 10px 14px; }
  .bc-felt > .tb-result b { font-size: 20px; }
  .bc-ctrl { flex-wrap: wrap; }
  .bc-rack { order: 3; width: 100%; display: flex; justify-content: center; }
  .bc-ctrl-btns { order: 4; justify-content: center; }
  .bc-deal { order: 2; margin-left: auto; min-width: 110px; }
  .bc-low { grid-template-columns: 1fr; }
  .bc-peel { --cw: 104px; }
  .bc-sq-cards { gap: 14px; }
  .bc-stats { grid-template-columns: repeat(3, 1fr); }
}