/* Card Table — six games, one table. */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #0d1117;
  --felt: #14532d;
  --felt-2: #0b3b20;
  --panel: #161b26;
  --panel-2: #1e2534;
  --line: #2b3446;
  --text: #e8edf5;
  --dim: #93a0b8;
  --gold: #f2c14e;
  --red: #e5484d;
  --green: #46c07a;
  --blue: #4c8dff;
  --cw: 64px;              /* card width — everything scales off this */
  --ch: calc(var(--cw) * 1.4);
  --radius: 14px;
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

.hidden { display: none !important; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

/* ------------------------------------------------------------------ cards */

.card {
  width: var(--cw);
  /* Derived from this element's own --cw, not the root's: .mini and .tiny
     override --cw locally, and a shared --ch would keep the full-size height. */
  height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * 0.13);
  background: linear-gradient(160deg, #fff, #e9edf3);
  color: #1a1f2b;
  position: relative;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .12);
  font-weight: 700;
  line-height: 1;
  transition: transform .14s ease, box-shadow .14s ease;
}

.card .corner {
  position: absolute;
  top: 5%;
  left: 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: calc(var(--cw) * 0.28);
}
.card .corner.br {
  top: auto; left: auto; bottom: 5%; right: 7%;
  transform: rotate(180deg);
}
.card .pip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cw) * 0.5);
  opacity: .92;
}
.card.red { color: #d81e3a; }
.card.black { color: #1a1f2b; }

.card.back {
  background:
    repeating-linear-gradient(45deg, #2f4b8f 0 6px, #24407c 6px 12px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .18);
}
.card.back::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: calc(var(--cw) * 0.08);
  border: 2px solid rgba(255, 255, 255, .22);
}

.card.mini { --cw: 34px; }
.card.tiny { --cw: 24px; }

.card.playable { cursor: pointer; box-shadow: 0 0 0 2px var(--gold), 0 6px 14px rgba(0, 0, 0, .5); }
.card.playable:hover { transform: translateY(-14px); }
.card.dead { opacity: .42; filter: saturate(.5); }
.card.sel { transform: translateY(-16px); box-shadow: 0 0 0 3px var(--blue), 0 8px 18px rgba(0, 0, 0, .5); }
.card.win { box-shadow: 0 0 0 3px var(--green), 0 0 22px rgba(70, 192, 122, .55); }

@keyframes deal { from { transform: translateY(-40px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.card.fresh { animation: deal .28s ease-out; }

/* ------------------------------------------------------------------ menus */

.screen {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 16px 40px;
  background: radial-gradient(circle at 50% 0%, #1b2437 0%, var(--bg) 62%);
}

.wrap { max-width: 860px; margin: 0 auto; }

h1 {
  font-size: clamp(26px, 6vw, 42px);
  text-align: center;
  letter-spacing: -.5px;
  margin-bottom: 4px;
}
h1 .suits { color: var(--gold); }
.tagline { text-align: center; color: var(--dim); margin-bottom: 22px; font-size: 15px; }

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.game-card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  text-align: left;
  transition: transform .12s ease, border-color .12s ease;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.game-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.game-card.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.game-card .g-emoji { font-size: 30px; line-height: 1; }
.game-card .g-name { font-weight: 700; font-size: 17px; margin-bottom: 3px; }
.game-card .g-blurb { color: var(--dim); font-size: 13px; line-height: 1.35; }
.game-card .g-family {
  display: inline-block;
  margin-top: 7px;
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(242, 193, 78, .35);
  border-radius: 20px;
  padding: 2px 8px;
}

.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 15px;
  transition: transform .1s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { background: #26304a; border-color: #3b4763; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(160deg, #2f7d4f, #1d5c39); border-color: #3d9c65; }
.btn.primary:hover { background: linear-gradient(160deg, #37945d, #226b42); }
.btn.gold { background: linear-gradient(160deg, #c99a2e, #a87c1c); border-color: var(--gold); color: #1a1405; }
.btn.gold:hover { background: linear-gradient(160deg, #e0ac33, #bd8b20); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.small { padding: 8px 12px; font-size: 13px; border-radius: 10px; }

input[type=text] {
  background: #0f141d;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 16px;         /* 16px stops iOS zooming the page on focus */
  width: 100%;
  max-width: 320px;
  text-align: center;
}
input[type=text]:focus { outline: none; border-color: var(--gold); }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.panel h3 { font-size: 15px; margin-bottom: 10px; }
.panel .hint { color: var(--dim); font-size: 13px; line-height: 1.45; }

.seg { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.seg button {
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
}
.seg button.on { border-color: var(--gold); background: rgba(242, 193, 78, .16); color: var(--gold); }

.back-link { display: block; text-align: center; margin-top: 18px; color: var(--dim); text-decoration: none; font-size: 14px; }
.back-link:hover { color: var(--text); }

.rules-list { color: var(--dim); font-size: 13.5px; line-height: 1.6; padding-left: 18px; }
.rules-list li { margin-bottom: 3px; }

/* ------------------------------------------------------------------ table */

#table { position: fixed; inset: 0; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 42%, var(--felt) 0%, var(--felt-2) 45%, #071a10 100%); }

#topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(8, 12, 18, .62);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  flex: 0 0 auto;
}
#topbar .t-name { font-weight: 700; font-size: 15px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#topbar .t-tag { font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 20px; padding: 2px 8px; }
#topbar button { padding: 6px 10px; border-radius: 9px; font-size: 13px; background: rgba(255, 255, 255, .08); }
#topbar button:hover { background: rgba(255, 255, 255, .16); }

#opponents { display: flex; justify-content: center; gap: 10px; padding: 10px 8px 4px; flex-wrap: wrap; flex: 0 0 auto; }

.opp {
  background: rgba(8, 14, 20, .55);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 7px 10px;
  min-width: 96px;
  text-align: center;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.opp.turn { border-color: var(--gold); box-shadow: 0 0 14px rgba(242, 193, 78, .35); }
.opp.out { opacity: .5; }
.opp .o-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; justify-content: center; }
.opp .o-sub { font-size: 11px; color: var(--dim); margin-top: 2px; }
.opp .o-score { font-size: 11px; color: var(--gold); margin-top: 2px; font-weight: 600; }
.opp .o-cards { display: flex; justify-content: center; margin-top: 5px; height: calc(24px * 1.4); }
/* Overlap proportionally, so two tiny backs still read as two cards. */
.opp .o-cards .card { margin-left: calc(var(--cw) * -0.55); }
.opp .o-cards .card:first-child { margin-left: 0; }
.opp .o-bubble {
  font-size: 11px;
  color: #0e1a12;
  background: var(--gold);
  border-radius: 10px;
  padding: 2px 7px;
  margin-top: 4px;
  display: inline-block;
}

#center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 10px;
  min-height: 0;
  overflow: hidden;
}

.center-row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.stack-label { font-size: 11px; color: rgba(255, 255, 255, .6); text-align: center; margin-top: 4px; }

.pile-wrap { display: flex; flex-direction: column; align-items: center; }

.suit-flag {
  font-size: 30px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  border: 2px solid rgba(255, 255, 255, .2);
}
.suit-flag.red { color: #ff6b7a; }
.suit-flag.black { color: #cfd8e6; }

#msg {
  text-align: center;
  font-size: 14px;
  min-height: 20px;
  color: var(--gold);
  padding: 0 12px;
  font-weight: 600;
  flex: 0 0 auto;
}

#actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 6px 10px; flex: 0 0 auto; }
#actions .btn { padding: 10px 16px; }

#myrow { flex: 0 0 auto; padding: 4px 6px 10px; }
#mystatus { display: flex; justify-content: center; gap: 10px; font-size: 12px; color: rgba(255, 255, 255, .7); margin-bottom: 5px; }
#mystatus .me-name { color: var(--gold); font-weight: 700; }

#myhand {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: var(--ch);
  padding: 14px 8px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
#myhand .card { margin-left: -18px; }
#myhand .card:first-child { margin-left: 0; }
#myhand.roomy .card { margin-left: 6px; }
#myhand.roomy .card:first-child { margin-left: 0; }

/* Trick layout — cards land in the seat's direction */
.trick-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(3, auto);
  gap: 6px;
  align-items: center;
  justify-items: center;
}
.trick-grid .slot-0 { grid-area: 3 / 2; }   /* you, bottom */
.trick-grid .slot-1 { grid-area: 2 / 1; }
.trick-grid .slot-2 { grid-area: 1 / 2; }
.trick-grid .slot-3 { grid-area: 2 / 3; }
.trick-grid .mid { grid-area: 2 / 2; font-size: 12px; color: rgba(255,255,255,.65); text-align: center; }

.bj-seat { text-align: center; }
.bj-seat .b-name { font-size: 12px; color: rgba(255, 255, 255, .8); margin-bottom: 3px; }
.bj-seat .b-cards { display: flex; gap: 3px; justify-content: center; }
.bj-seat .b-total { font-size: 12px; margin-top: 3px; font-weight: 700; }
.bj-seat .b-total.bust { color: var(--red); }
.bj-seat .b-res { font-size: 11px; color: var(--gold); }

#log {
  position: fixed;
  right: 8px;
  bottom: 8px;
  width: min(300px, 74vw);
  max-height: 40vh;
  overflow-y: auto;
  background: rgba(6, 10, 14, .9);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim);
  z-index: 40;
}
#log div { margin-bottom: 3px; }
#log div:last-child { color: var(--text); }

/* --------------------------------------------------------------- overlays */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 12, .86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 60;
  overflow-y: auto;
}
.overlay .box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  max-height: 92vh;
  overflow-y: auto;
}
.overlay h2 { font-size: 24px; margin-bottom: 8px; }
.overlay .sub { color: var(--dim); font-size: 14px; margin-bottom: 16px; line-height: 1.5; }
.overlay .rules-list { text-align: left; }

.code-box {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 9px;
  color: var(--gold);
  background: #0f141d;
  border: 1px dashed rgba(242, 193, 78, .5);
  border-radius: 14px;
  padding: 14px 10px 14px 19px;
  margin: 10px 0;
}

.player-list { list-style: none; margin: 10px 0; }
.player-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 14px;
  text-align: left;
}
.player-list li .tag { margin-left: auto; font-size: 11px; color: var(--dim); }

.standings { list-style: none; text-align: left; margin: 12px 0; }
.standings li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  margin-bottom: 6px;
  font-size: 14px;
}
.standings li.first { background: rgba(242, 193, 78, .16); border: 1px solid rgba(242, 193, 78, .5); }
.standings li .pos { width: 22px; color: var(--dim); font-weight: 700; }
.standings li .val { margin-left: auto; color: var(--gold); font-weight: 700; }

.spinner {
  width: 26px; height: 26px;
  border: 3px solid rgba(255, 255, 255, .2);
  border-top-color: var(--gold);
  border-radius: 50%;
  margin: 12px auto;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.err { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* --------------------------------------------------------- device sizing */

html.device-phone { --cw: 50px; }
html.device-phone #myhand .card { margin-left: -24px; }
html.device-phone .opp { min-width: 78px; padding: 5px 7px; }
html.device-phone h1 { font-size: 26px; }
html.device-phone #log { width: 62vw; font-size: 11px; max-height: 26vh; }
html.device-tablet { --cw: 58px; }

@media (max-height: 620px) {
  :root { --cw: 48px; }
  #opponents { padding-top: 5px; }
  .opp .o-cards { height: 24px; }
}
@media (max-width: 420px) {
  .game-grid { grid-template-columns: 1fr; }
  .code-box { font-size: 27px; letter-spacing: 6px; }
}

/* ------------------------------------------------- poker / bridge / tutorial */

.chip {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .88);
}
.chip--gold { border-color: var(--gold); color: var(--gold); }
.chip--warn { border-color: var(--red); color: #ff9aa2; }

/* Dummy's hand sits under the trick, face up, grouped by suit. */
.dummy-box {
  background: rgba(0, 0, 0, .28);
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 12px;
  padding: 7px 10px;
  max-width: 96vw;
}
.dummy-fan { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.dummy-fan .card { margin: 1px 0; }

.auction-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(62px, 1fr));
  gap: 3px;
  max-width: 420px;
  width: 100%;
  max-height: 42vh;
  overflow-y: auto;
}
.auc-head {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 5px 2px;
  color: rgba(255, 255, 255, .7);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auc-head.me { color: var(--gold); }
.auc-cell {
  font-size: 13px;
  text-align: center;
  padding: 5px 2px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .25);
}
.auc-cell.bid { background: rgba(242, 193, 78, .2); color: var(--gold); font-weight: 700; }
.auc-cell.dim { opacity: .3; }

/* The hint highlight has to read as "this one" at a glance on a phone. */
.card.hinted { box-shadow: 0 0 0 3px var(--blue), 0 0 20px rgba(76, 141, 255, .6); transform: translateY(-12px); }
.btn.hinted { box-shadow: 0 0 0 2px var(--blue), 0 0 16px rgba(76, 141, 255, .5); }

.tut-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.tut-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.tut-dot.on { background: var(--gold); transform: scale(1.25); }
.tut-cards {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 4px 0 8px;
  min-height: var(--ch);
}
.tut-caption {
  font-size: 12px;
  color: var(--gold);
  text-align: center;
  margin-bottom: 10px;
  min-height: 14px;
}
a.btn { text-decoration: none; display: inline-block; }

html.device-phone .auction-grid { grid-template-columns: repeat(4, minmax(52px, 1fr)); }
html.device-phone .auc-cell { font-size: 11px; }
html.device-phone .dummy-fan .card { --cw: 26px; }

/* ==================================================== blackjack — 3D table */
/*
   The table is one perspective scene: a wooden body, a padded rail, a felt
   bed, and betting mats laid on it. Everything that is *on* the table (mats,
   printing, chips) keeps the table's tilt, so it reads as lying flat. Cards
   are counter-rotated back to upright inside the same 3D context — that is
   what stops them looking squashed once the bed is tilted away from you.
*/

#center.bj-center {
  justify-content: center;
  gap: 6px;
  padding: 2px 6px 0;
}

.bj-stage {
  /* One unit drives the whole table. Bounded by height as well as width so a
     laptop in landscape doesn't push the rail under the action buttons. */
  --bjcw: clamp(30px, min(6.4vh, 4.4vw), 62px);
  --tilt: 21deg;
  --mat: calc(var(--bjcw) * 1.75);
  perspective: calc(var(--bjcw) * 22);
  perspective-origin: 50% 26%;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: calc(var(--bjcw) * 0.25) 0 calc(var(--bjcw) * 0.8);
}

/* -- the body: a slab, extruded downward, then tilted with everything else */

.bj-body {
  transform: rotateX(var(--tilt));
  transform-style: preserve-3d;
  transform-origin: 50% 88%;
  width: min(96%, calc(var(--bjcw) * 15));
  border-radius: 14px 14px 46% 46% / 14px 14px 58% 58%;
  background: linear-gradient(168deg, #6b4423 0%, #4a2d15 38%, #331d0c 100%);
  padding: calc(var(--bjcw) * 0.3);
  /* The stack of hairline shadows *is* the table's thickness. Offsetting in
     the element's own (pre-transform) space means the slab tilts with it. */
  box-shadow:
    0 2px 0 #2e1a0a, 0 4px 0 #2b180a, 0 6px 0 #281609, 0 8px 0 #251508,
    0 10px 0 #221307, 0 12px 0 #1f1106, 0 14px 0 #1c0f05, 0 16px 0 #190d05,
    0 18px 0 #160c04, 0 20px 0 #130a03, 0 22px 0 #100803,
    0 26px 34px rgba(0, 0, 0, .55), 0 48px 70px rgba(0, 0, 0, .45);
}

/* -- the rail: padded leather you'd rest your arms on */

.bj-rail {
  border-radius: 11px 11px 45% 45% / 11px 11px 57% 57%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .28) 42%),
    linear-gradient(160deg, #7a4f26, #4b2c12);
  padding: calc(var(--bjcw) * 0.34);
  transform-style: preserve-3d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 6px rgba(0, 0, 0, .5);
}

/* -- the felt bed */

.bj-felt {
  position: relative;
  border-radius: 8px 8px 44% 44% / 8px 8px 56% 56%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, .1), transparent 58%),
    radial-gradient(ellipse at 50% 34%, #1d7a44 0%, #12592f 46%, #0a3c1f 100%);
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 255, 255, .07);
  padding: calc(var(--bjcw) * 0.62) calc(var(--bjcw) * 0.45) calc(var(--bjcw) * 0.3);
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--bjcw) * 0.12);
  /* Felt nap — a faint weave over the gradient. */
  background-blend-mode: soft-light, normal;
}

/* -- dealer end: shoe, hand, discard tray */

.bj-dealer-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--bjcw) * 0.5);
  width: 100%;
  transform-style: preserve-3d;
}

.bj-dealer { text-align: center; transform-style: preserve-3d; }
.bj-dealer-name {
  font-size: calc(var(--bjcw) * 0.3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 2px;
}
.bj-dealer-total {
  margin-top: calc(var(--bjcw) * 0.12);
  font-size: calc(var(--bjcw) * 0.32);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.bj-dealer-total.bust { color: #ff8a90; }

/* Shoe and tray sit flat on the felt, so they keep the table's tilt. */
.bj-shoe, .bj-tray {
  width: calc(var(--bjcw) * 1.25);
  height: calc(var(--bjcw) * 0.85);
  border-radius: 3px 3px 7px 7px;
  position: relative;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.bj-shoe { background: linear-gradient(165deg, #3d4d66, #1a2434); }
.bj-shoe::before {
  content: '';
  position: absolute;
  left: 14%; right: 14%; top: 16%; height: 34%;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #2f4b8f 0 3px, #24407c 3px 6px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.bj-tray { background: linear-gradient(165deg, #2a3346, #141a26); }
.bj-tray::before {
  content: '';
  position: absolute;
  inset: 18% 14% 22%;
  border-radius: 2px;
  background: linear-gradient(180deg, #e9edf3, #b9c2d0);
  opacity: .55;
}
.bj-kit { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bj-kit-label {
  font-size: calc(var(--bjcw) * 0.22);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

/* -- the printed arc on the felt */

.bj-print {
  width: 92%;
  aspect-ratio: 620 / 150;
  margin: calc(var(--bjcw) * -0.15) 0 calc(var(--bjcw) * -0.55);
  pointer-events: none;
}
.bj-print svg { width: 100%; height: 100%; overflow: visible; display: block; }
.bj-print .arc { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 2; }
.bj-print .arc.thin { stroke: rgba(242, 193, 78, .42); stroke-width: 1; }
.bj-print text {
  fill: rgba(255, 248, 224, .9);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3.2px;
}
.bj-print text.small {
  fill: rgba(255, 255, 255, .58);
  font-size: 9.5px;
  letter-spacing: 1.4px;
  font-weight: 400;
}

/* -- the betting spots */

.bj-spots {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--bjcw) * 0.32);
  width: 100%;
  transform-style: preserve-3d;
}

.bj-spot {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
  /* Seats further from centre sit a little lower — the curve of the table. */
  transform: translateY(calc(var(--arc, 0) * var(--bjcw) * 0.34));
}

/* The mat: a betting circle painted on the felt. It stays tilted, so the
   circle reads as the ellipse a real one would from this angle. */
.bj-mat {
  position: relative;
  width: var(--mat);
  height: var(--mat);
  border-radius: 50%;
  transform-style: preserve-3d;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .3),
    inset 0 0 0 5px rgba(255, 255, 255, .05),
    inset 0 0 0 6px rgba(255, 255, 255, .16),
    inset 0 0 18px rgba(0, 0, 0, .45);
  transition: box-shadow .2s ease;
}
.bj-spot.mine .bj-mat { box-shadow: inset 0 0 0 2px rgba(120, 210, 255, .55), inset 0 0 0 6px rgba(120, 210, 255, .2), inset 0 0 18px rgba(0, 0, 0, .45); }
.bj-spot.turn .bj-mat {
  box-shadow:
    inset 0 0 0 2px var(--gold),
    inset 0 0 0 5px rgba(242, 193, 78, .12),
    inset 0 0 0 6px rgba(242, 193, 78, .4),
    inset 0 0 22px rgba(0, 0, 0, .45),
    0 0 22px rgba(242, 193, 78, .45);
}
.bj-spot.out { opacity: .45; }

/* Cards stand upright out of the mat: undo the table tilt, then fan. */
.bj-hand {
  position: absolute;
  bottom: 52%;
  left: 50%;
  transform: translateX(-50%);
  transform-style: preserve-3d;
}
.bj-fan {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-style: preserve-3d;
}
.bj-card {
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--tilt) * -1)) rotate(var(--fan, 0deg));
  transform-origin: 50% 100%;
  margin-left: calc(var(--bjcw) * -0.46);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55));
}
.bj-card:first-child { margin-left: 0; }
.bj-card .card { --cw: var(--bjcw); position: relative; bottom: 0; }

@keyframes bj-deal {
  from { transform: rotateX(calc(var(--tilt) * -1)) rotate(var(--fan, 0deg)) translate(-60px, -70px) scale(.7); opacity: 0; }
  to   { transform: rotateX(calc(var(--tilt) * -1)) rotate(var(--fan, 0deg)); opacity: 1; }
}
.bj-card.dealt { animation: bj-deal .3s cubic-bezier(.2, .8, .3, 1) backwards; }

/* Totals ride on a little plaque in the middle of the mat. */
.bj-total {
  display: inline-block;
  font-size: calc(var(--bjcw) * 0.36);
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, .42);
  border-radius: 20px;
  padding: 1px calc(var(--bjcw) * 0.24);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  line-height: 1.35;
}
.bj-total.bust { color: #ff9199; background: rgba(90, 10, 16, .6); }
.bj-total.soft { color: #bff0d0; }

.bj-plaque {
  margin-top: calc(var(--bjcw) * 0.14);
  text-align: center;
  min-width: var(--mat);
}
.bj-who {
  font-size: calc(var(--bjcw) * 0.29);
  font-weight: 700;
  color: rgba(255, 255, 255, .9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(var(--mat) * 1.5);
}
.bj-spot.mine .bj-who { color: #8fd8ff; }
.bj-bank {
  font-size: calc(var(--bjcw) * 0.25);
  color: var(--gold);
  font-weight: 600;
}
.bj-res {
  font-size: calc(var(--bjcw) * 0.25);
  font-weight: 700;
  color: #0e1a12;
  background: var(--gold);
  border-radius: 8px;
  padding: 0 5px;
  display: inline-block;
  margin-top: 2px;
}
.bj-res.lose { background: rgba(229, 72, 77, .85); color: #fff; }
.bj-res.push { background: rgba(255, 255, 255, .8); }

/* The hand counter, printed on the felt like a table plaque. */
.bj-footer {
  margin-top: calc(var(--bjcw) * 0.2);
  font-size: calc(var(--bjcw) * 0.24);
  letter-spacing: .6px;
  color: rgba(255, 255, 255, .68);
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  padding: 2px calc(var(--bjcw) * 0.3);
  white-space: nowrap;
}

/* -------------------------------------------------------------- the chips */
/*
   A chip is one round element: a coloured face, a ring, and the eight edge
   spots showing round the rim. A stack is the same element repeated and
   pushed along the table's normal with translateZ, so the discs separate in
   real 3D and you see each rim — no faked drop shadows.
*/

.bj-chipstack {
  position: relative;
  width: var(--d);
  height: var(--d);
  transform-style: preserve-3d;
  flex: 0 0 auto;
}
.bj-chip {
  --cf: #c62828;
  --cd: #7f1d1d;
  --ct: #fff;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 36%, rgba(255, 255, 255, .55) 36% 38%, transparent 38.5%),
    radial-gradient(circle at 50% 50%, var(--cf) 0 57%, transparent 57.5%),
    repeating-conic-gradient(from 0deg, #f2f2f2 0 22.5deg, var(--cf) 22.5deg 45deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--cd);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bj-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(255, 255, 255, .3), transparent 55%);
}
.bj-chip .v {
  position: relative;
  z-index: 1;
  font-size: calc(var(--d) * 0.32);
  font-weight: 800;
  color: var(--ct);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
.bj-chip.hollow {
  background: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
}

/* The bet sits in the middle of the mat. */
.bj-bet {
  --d: calc(var(--bjcw) * 0.8);
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.bj-bet-amt {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  font-size: calc(var(--bjcw) * 0.26);
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* Bankroll rack under your own hand, plus chips as bet buttons. */
/* Your bankroll rack lives outside the table's 3D scene, so translateZ has
   nothing to project against — those chips lie out in a row instead. */
.bj-rack { display: inline-flex; align-items: center; --d: 22px; vertical-align: middle; }
.bj-chipstack.flat { display: flex; width: auto; height: var(--d); }
.bj-chipstack.flat .bj-chip {
  position: relative;
  inset: auto;
  width: var(--d);
  height: var(--d);
  flex: 0 0 auto;
  margin-left: calc(var(--d) * -0.42);
  transform: none !important;
}
.bj-chipstack.flat .bj-chip:first-child { margin-left: 0; }

.chip-btn {
  --d: 46px;
  position: relative;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  padding: 0;
  transition: transform .12s ease, filter .12s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55));
}
.chip-btn:hover { transform: translateY(-5px) scale(1.06); }
.chip-btn:active { transform: translateY(-1px) scale(1.02); }
.chip-btn.hinted { filter: drop-shadow(0 0 10px rgba(76, 141, 255, .9)); }
.chip-btn .bj-chip { position: absolute; inset: 0; }

html.device-phone .bj-stage { --bjcw: clamp(22px, 6.4vw, 34px); }
html.device-phone .chip-btn { --d: 40px; }

#actions.chip-row { gap: 14px; padding: 10px; perspective: 500px; }