/* Blackjack with friends (Brief 13): the online table. Uses blackjack.css's cards, hands, bet spot
   and controls, and online.css's panels and turn clock. A casino table (Addendum 1): the dealer
   and the shoe at the top, the seats round a curved rail below, yours at the bottom centre, each
   a betting circle printed on the felt with no box round it (Addendum 2). The
   whole table fits the visible window with no page scrolling, phone to big monitor: the cards size
   themselves from the felt (container units) and online.js's fit() steps them down (--fit) if a
   long hand or a split would still overflow. Other players' cards never go under 36 px. */

/* The panels (create, join, the room) over the felt, as on Go Fish's table. */
.bjo .panel-card {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 20;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(420px, calc(100% - 32px));
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 26px 22px;
  text-align: center;
  border-radius: 20px;
  background: rgba(3, 22, 13, 0.96);
  border: 1px solid rgba(217, 180, 90, 0.45);
  box-shadow: var(--shadow);
  animation: bjo-card-in 0.3s var(--ease);
}
@keyframes bjo-card-in { from { opacity: 0; scale: 0.96; } }
.bjo .panel-card h2 { margin: 0; font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-2); }
.bjo.paused :is(.bjo-stage, .bjo-foot, .controls) { opacity: 0.25; pointer-events: none; }
.bjo .seg { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bjo .seg legend { width: 100%; margin-bottom: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.bjo .seg label { position: relative; }
.bjo .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bjo .seg span {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.bjo .seg input:checked + span { color: #2b1c04; border-color: transparent; background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.bjo .seg input:focus-visible + span { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.ol-ranked-only { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.mode-badge.online { color: #2b1c04; background: linear-gradient(180deg, var(--gold-2), var(--gold)); }

/* ---------- The page fills the window, and never scrolls ---------- */
body:has(> #bjo:not([hidden])) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
body:has(> #bjo:not([hidden])) > .topbar { flex: none; min-height: 52px; padding-block: 6px; }
.table.bjo {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  gap: 6px;
  padding: 6px clamp(6px, 1.4vw, 24px) calc(8px + env(safe-area-inset-bottom));
  /* Cards flying from the shoe turn as they go: never let one widen the page for a moment. */
  overflow: clip;
}
.bjo-felt { position: relative; flex: 1 1 0; width: 100%; min-height: 0; container: felt / size; }

/* ---------- The stage: the dealer, the middle of the felt and the spots, on one grid ---------- */
.bjo-stage {
  --fit: 1;
  /* Card widths, from the felt's size (phones first; the wide table below). */
  --seat-base: min(11.5cqw, 9.5cqh, 64px);
  --me-base: min(16cqw, 13cqh, 100px);
  --dealer-base: min(12cqw, 10cqh, 72px);
  --seat-w: max(36px, calc(var(--seat-base) * var(--fit)));
  --me-w: max(40px, calc(var(--me-base) * var(--fit)));
  --dealer-w: max(36px, calc(var(--dealer-base) * var(--fit)));
  --ring: 64px;
  --toast-fs: clamp(0.9rem, min(2.4cqw, 3.4cqh), 1.4rem);
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(auto, 1fr) minmax(auto, 1.25fr) minmax(auto, 1fr);
  grid-template-areas: "dl dl dl" "l2 mid r2" "l1 mid r1" "c c c";
  align-content: space-evenly;
  align-items: center;
  gap: clamp(4px, 1.2cqh, 14px) clamp(4px, 1.2cqw, 18px);
  padding: 4px 2px 2px;
  overflow: hidden;
}
.bjo-stage[data-size='lg'] { grid-template-areas: "l3 dl r3" "l2 mid r2" "l1 mid r1" "c c c"; }
.bjo-stage[data-size='sm'] { grid-template-areas: "dl dl dl" "l1 mid r1" "c c c"; }
/* A short felt (a phone on its side, Brief 18): the far players beside the dealer, in three rows. */
.bjo-stage[data-layout='flat'][data-size='md'] { grid-template-areas: "l2 dl r2" "l1 mid r1" "c c c"; }
.bjo-stage[data-layout='flat'][data-size='lg'] { grid-template-columns: repeat(5, minmax(auto, 1fr)); grid-template-areas: "l3 l2 dl r2 r3" "l1 mid mid mid r1" "c c c c c"; }
.bjo-stage[data-layout='flat'] .bjo-dname { display: none; } /* (the dealer's column stays narrow; the trays stay) */
.bjo-stage[data-layout='flat'] .bjo-dealer .zone-label { justify-content: center; gap: 8px; }
/* The curved rail the spots sit round, printed on the felt. */
.bjo-stage::before {
  content: '';
  position: absolute;
  left: 2%;
  right: 2%;
  top: 14%;
  bottom: 1%;
  border: 2px solid rgba(244, 220, 149, 0.13);
  border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 62% 62%;
  pointer-events: none;
}
.bjo-spots { display: contents; }
[data-pos='l3'] { grid-area: l3; }
[data-pos='l2'] { grid-area: l2; }
[data-pos='l1'] { grid-area: l1; }
[data-pos='c'] { grid-area: c; }
[data-pos='r1'] { grid-area: r1; }
[data-pos='r2'] { grid-area: r2; }
[data-pos='r3'] { grid-area: r3; }

/* The wide table (laptops, monitors, tablets and phones on their side; online.js's fit() sets
   data-layout): every seat's circle on one smooth arc under the dealer, evenly spaced, placed by
   placeArc() (left / top). The dealer at the top centre, the print and the toast in the band
   between, your betting circle on your own seat's circle. */
.bjo-stage[data-layout='arc'] {
  --seat-base: min(4.6cqw, 12cqh, 96px);
  --me-base: min(6.6cqw, 18cqh, 132px);
  --dealer-base: min(5.6cqw, 15cqh, 112px);
  --ring: max(56px, calc(clamp(76px, 13cqh, 120px) * var(--fit)));
  --circle: clamp(34px, calc(var(--seat-w) * 0.78), 76px);
  --tag-w: clamp(104px, 9.5cqw, 168px);
  display: block;
  padding: 0;
}
.bjo-stage[data-layout='arc']::before {
  left: 3px;
  right: 3px;
  top: var(--rail-top, 8%);
  bottom: 2px;
  border: 2px solid rgba(244, 220, 149, 0.12);
  border-radius: 50%;
  clip-path: inset(50% 0 0 0);
}
[data-layout='arc'] .bjo-spot, [data-layout='arc'] .bjo-open { position: absolute; min-width: var(--tag-w); }
[data-layout='arc'] .bjo-open { min-width: 0; }
[data-layout='arc'] .bjo-dealer {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  width: clamp(240px, 34cqw, 560px);
  margin-inline: auto;
}
[data-layout='arc'] .bjo-mid { display: contents; }
.bjo [data-layout='arc'] .felt-print { position: absolute; left: 50%; top: var(--print-y, 40%); translate: -50% 0; width: max-content; }
[data-layout='arc'] .felt-print.off { visibility: hidden; }
.bjo .bjo-stage[data-layout='arc'] .print-main { font-size: clamp(0.75rem, min(1.25cqw, 3.6cqh), 1.4rem); }
.bjo .bjo-stage[data-layout='arc'] .toast { top: var(--band-y, 40%); translate: -50% -50%; max-width: var(--band-w, 60%); }
/* Your betting circle sits on your own seat's circle while bets are open, the amount where your
   label goes. */
[data-layout='arc'] .bet-spot { position: absolute; z-index: 4; left: var(--me-x, 50%); top: var(--me-y, 70%); translate: -50% calc(var(--ring) / -2); gap: 3px; }
[data-layout='arc'][data-phase='betting'] .bjo-spot.me .bjo-tag { visibility: hidden; }
/* A split side by side above the circle, until it runs into a neighbour: then another player's
   hands cascade (.stack) and yours go two by two (.wrap). */
.bjo [data-layout='arc'] .hands.wrap { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; row-gap: 10px; } /* (the active hand rises 6px) */

/* ---------- The dealer and the shoe ---------- */
.bjo-dealer { grid-area: dl; gap: 4px; --card-w: var(--dealer-w); }
.bjo .dealer { min-height: auto; } /* (rows never squash a spot: fit() shrinks the cards instead) */
.bjo-dcards { position: relative; max-width: 100%; }
.bjo-dealer .cards { min-height: calc(var(--card-w) * 1.4); }
.bjo-dealer .cards .card + .card { margin-left: calc(var(--card-w) * -0.5); }
.bjo-dealer .cards:has(> .card:nth-child(5)) .card + .card { margin-left: calc(var(--card-w) * -0.6); }
.bjo-dcards > .score { position: absolute; z-index: 3; top: -6px; right: -8px; }
.bjo-dealer .zone-label { width: 100%; justify-content: space-between; max-width: 560px; }
.bjo-dname { font-size: 0.75rem; }
.bjo .tray {
  position: relative;
  inset: auto;
  flex: none;
  width: max(22px, calc(var(--card-w) * 0.5));
  height: max(31px, calc(var(--card-w) * 0.7));
  border-radius: 6px;
}
.bjo .shoe-card { inset: 3px 3px 9px; border-width: 2px; }
.bjo .shoe-meter { left: 3px; right: 3px; bottom: 3px; height: 3px; }
.bjo .discard span { inset: 4px; }

/* ---------- The middle of the felt: the print, the toast, your betting circle ---------- */
.bjo-mid {
  grid-area: mid;
  position: relative;
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* never wider than its column: the toast wraps */
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 4px;
  min-width: calc(var(--ring) + 24px); /* room for the betting circle, whatever the sides need */
}
.bjo-mid > .felt-print { grid-area: 1 / 1; }
.bjo .felt-print { margin: 0; gap: 2px; }
.bjo .felt-print::after { content: none; }
.bjo .print-main { font-size: clamp(0.75rem, min(2.6cqw, 3.6cqh), 1.4rem); }
.bjo .print-sub { font-size: 0.75rem; }
/* The toast floats at the top of the middle of the felt: it never covers anyone's cards or result,
   and never takes room (a toast can't push the table out of the window). */
.bjo .toast {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 6;
  translate: -50% 0;
  max-width: 100%;
  padding: 8px 16px;
  font-size: var(--toast-fs);
  line-height: 1.2;
}
.bjo .bet-spot { grid-row: 2; gap: 4px; }
/* While bets are open, a band above the circle for the toast (the last round's result). */
.bjo-stage[data-phase='betting'] .bjo-mid { grid-template-rows: minmax(calc(var(--toast-fs) * 2.4 + 20px), 1fr) auto; }
/* A short felt: the betting circle takes the print's place while bets are open. */
@container felt (max-height: 520px) {
  .bjo-stage[data-phase='betting'] .felt-print, .bjo .print-sub { display: none; }
}
.bjo .bet-ring { width: var(--ring); height: var(--ring); }
.bjo .bet-ring::after { font-size: calc(var(--ring) * 0.16); }
.bjo .bet-stack .chip { width: calc(var(--ring) * 0.52); height: calc(var(--ring) * 0.52); font-size: max(0.75rem, calc(var(--ring) * 0.12)); translate: 0 calc(var(--n) * -3px); }
.bjo .bet-amount { font-size: 0.9rem; min-height: 1.3em; }

/* ---------- A seat on the felt (Addendum 2): a betting circle, no box ---------- */
/* Its cards just above the circle, the bet's chips in it, the name and chips in a small label
   under it. On the narrow table seats take at least their cards' width (a column grows for a long
   hand; fit() shrinks the cards if the row gets too wide); names and money never widen them. */
.bjo-spot, .bjo-open { justify-self: stretch; min-width: auto; } /* (seats.css sets 0) */
.bjo-stage { --circle: max(24px, calc(var(--seat-w) * 0.66)); }
.bjo-spot {
  --card-w: var(--seat-w);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.bjo-circle {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--circle);
  height: var(--circle);
  border-radius: 50%;
  border: 2px solid rgba(244, 220, 149, 0.34);
  box-shadow: inset 0 0 0 4px rgba(244, 220, 149, 0.05);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.bjo-spot.me { --circle: var(--me-circle, max(28px, calc(var(--seat-w) * 0.78))); }
[data-layout='arc'] .bjo-spot.me { --circle: var(--ring); }
/* The chips of the bet, stacked in the circle (their amount is in the label). */
.bjo-pile { position: absolute; inset: 0; display: grid; place-items: center; }
.bjo .bjo-pile .chip {
  position: absolute;
  width: 62%;
  height: 62%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-size: 0;
  pointer-events: none;
  translate: 0 calc(var(--n) * -2px);
}
/* Yours shows on your own seat once the round is dealt (while bets are open, the betting circle). */
[data-phase='betting'] .bjo-spot.me .bjo-circle { visibility: hidden; }
/* Whose turn: the circle glows, and a clock round it empties as the time runs out. */
.bjo-spot.turn .bjo-circle {
  border-color: var(--gold-2);
  box-shadow: inset 0 0 0 4px rgba(244, 220, 149, 0.12), 0 0 0 3px rgba(244, 220, 149, 0.25), 0 0 22px rgba(244, 220, 149, 0.45);
}
.bjo-spot.clock .bjo-circle::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(var(--clock-color, var(--gold-2)) calc(var(--left, 1) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.bjo-spot.clock .avatar::after { content: none; } /* (the clock is round the circle) */
.bjo-spot.away { opacity: 0.55; }
/* An empty seat: just its circle. */
.bjo-open { display: grid; place-items: center; align-self: center; }
.bjo-open .bjo-circle { border-style: dashed; border-color: rgba(244, 220, 149, 0.22); box-shadow: none; }

/* The player at the rail: avatar (with the clock), name, bet and chips. */
.bjo-tag { display: flex; align-self: stretch; justify-content: center; align-items: center; gap: 5px; min-width: 0; contain: inline-size; }
.bjo-spot .avatar { flex: none; width: 26px; height: 26px; font-size: 0.8rem; }
.bjo-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.bjo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 0.8rem; }
.bjo-name .guest-tag { margin-left: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.bjo-money { display: flex; gap: 6px; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.bjo-bet { display: inline-flex; align-items: center; gap: 3px; color: var(--gold-2); font-weight: 700; }
.bjo-bet:empty { display: none; }
.bjo-bet::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #c0392b 0 45%, transparent 46%), repeating-conic-gradient(#c0392b 0 30deg, #fff 30deg 60deg);
}

/* The others' hands: their cards on the felt in front of them, readable (rank and suit large in
   the corner, as dealt at a real table), the total on the last card, the result across them. */
.bjo-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; min-height: calc(var(--card-w) * 1.4); }
.bjo-spot.me .bjo-mini { display: none; }
.bjo-hand { position: relative; display: flex; border-radius: 6px; }
.bjo-hand .cards { min-height: 0; }
.bjo-hand .cards .card + .card { margin-left: calc(var(--card-w) * -0.55); }
.bjo-hand .cards:has(> .card:nth-child(4)) .card + .card { margin-left: calc(var(--card-w) * -0.62); }
.bjo-hand .cards:has(> .card:nth-child(6)) .card + .card { margin-left: calc(var(--card-w) * -0.68); }
.bjo-hand .hand-meta { position: absolute; z-index: 3; top: -5px; right: -5px; }
.bjo-hand .score { min-width: 22px; height: 19px; padding: 0 5px; font-size: 0.75rem; }
.bjo-hand .result { position: absolute; z-index: 4; left: 50%; bottom: 8%; translate: -50% 0; padding: 2px 6px; font-size: 0.75rem; letter-spacing: 0.02em; }
.bjo-hand.active { box-shadow: 0 0 0 2px var(--gold-2), 0 0 14px rgba(244, 220, 149, 0.4); }
/* A split: on the wide table the hands sit side by side above the circle; on a phone (or where
   there's no room beside the neighbours: .stack) they cascade down the seat, each showing its
   cards' corners, total and result. */
[data-layout='arc'] .bjo-mini { flex-wrap: nowrap; gap: 4px clamp(6px, 0.9cqw, 14px); }
:is(.bjo-stage:not([data-layout='arc']) .bjo-mini, .bjo-mini.stack):has(> .bjo-hand + .bjo-hand) { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; }
:is(.bjo-stage:not([data-layout='arc']) .bjo-mini, .bjo-mini.stack) .bjo-hand + .bjo-hand { margin-top: calc(var(--card-w) * -0.74); }
.bjo-mini .bjo-hand.active { z-index: 5; }
:is(.bjo-stage:not([data-layout='arc']) .bjo-mini, .bjo-mini.stack):has(> .bjo-hand + .bjo-hand) .result { top: -4px; right: -6px; bottom: auto; left: auto; translate: none; }
:is(.bjo-stage:not([data-layout='arc']) .bjo-mini, .bjo-mini.stack):has(> .bjo-hand + .bjo-hand) .bjo-hand:has(> .result:not([hidden])) .hand-meta { display: none; }
/* Small cards (others', and yours when split three or four ways) show rank and suit large. */
:is(.bjo-mini, .bjo .hands[data-count='3'], .bjo .hands[data-count='4']) .card .corner { font-size: calc(var(--w) * 0.34); }
:is(.bjo-mini, .bjo .hands[data-count='3'], .bjo .hands[data-count='4']) .card .corner.tl { top: 4%; left: 6%; }
:is(.bjo-mini, .bjo .hands[data-count='3'], .bjo .hands[data-count='4']) .card .corner.br { display: none; }
:is(.bjo-mini, .bjo .hands[data-count='3'], .bjo .hands[data-count='4']) .card :is(.pip, .court) {
  inset: auto 7% 5% auto;
  display: block;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: calc(var(--w) * 0.44);
  line-height: 1;
}
:is(.bjo-mini, .bjo .hands[data-count='3'], .bjo .hands[data-count='4']) .card .court { font-size: 0; }
:is(.bjo-mini, .bjo .hands[data-count='3'], .bjo .hands[data-count='4']) .card .court i { font-size: calc(var(--w) * 0.44); margin: 0; }

/* A reaction: a bubble over the spot's cards for a moment. */
.bjo-say {
  position: absolute;
  left: 50%;
  top: 4px;
  z-index: 7;
  translate: -50% 0;
  max-width: calc(100% + 8px);
  margin: 0;
  padding: 4px 10px;
  border-radius: 12px;
  background: #fbfaf5;
  color: #1b1b1b;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  box-shadow: var(--shadow);
}

/* ---------- Your own seat, at the bottom centre ---------- */
.bjo-spot.me {
  justify-self: center;
  min-width: min-content; /* at least its hands, even across flexible columns */
  max-width: 100%;
}
[data-pos='c']:not(.me) { justify-self: center; min-width: min(100%, 130px); }
.bjo-spot.me .bjo-tag { gap: 8px; }
.bjo-spot.me .bjo-who { flex-direction: row; align-items: baseline; gap: 10px; }
.bjo-spot.me .bjo-bank { display: none; }
.bjo-me { --card-w: var(--me-w); flex: none; width: auto; min-width: 130px; gap: 0; }
.bjo .hands { flex-wrap: nowrap; gap: 4px clamp(6px, 2cqw, 28px); }
.bjo .hands[data-count='2'] { --card-w: calc(var(--me-w) * 0.9); }
.bjo .hands[data-count='3'], .bjo .hands[data-count='4'] { --card-w: max(36px, calc(var(--me-w) * 0.72)); }
.bjo-stage[data-phase='betting'] .bjo-me { --card-w: max(36px, calc(var(--me-w) * 0.78)); }
.bjo .hand { position: relative; padding: 4px 4px 2px; gap: 4px; border-radius: 12px; }
.bjo .hands:not(.multi) .hand-bet { display: none; }
.bjo .hand .score { height: 24px; font-size: 0.85rem; }
.bjo .hand .result { position: absolute; z-index: 4; left: 50%; top: calc(4px + var(--card-w) * 0.86); translate: -50% 0; }
.bjo .hand .cards:has(> .card:nth-child(5)) .card + .card { margin-left: calc(var(--card-w) * -0.66); }
/* A narrow felt (phones): a split of yours shows each hand's total (the bets are in your tag), and
   the others' tags are one line, name and bet (their chips show on a wider table; Away and Left
   always show). The circles are small, the others' cards resting on their top edge, and yours sits
   beside "You" in place of the avatar, so the seats take no more height than before. */
@container felt (max-width: 599px) or (max-height: 339px) {
  .bjo .hands.multi .hand-bet { display: none; }
  .bjo-dealer .zone-label { gap: 4px; letter-spacing: 0.1em; }
  .bjo-stage { --circle: 22px; }
  .bjo-spot { gap: 2px; }
  .bjo-mini { position: relative; z-index: 1; }
  .bjo-spot:not(.me) .bjo-mini + .bjo-circle { margin-top: -9px; }
  .bjo-hand .hand-meta { top: -4px; right: -1px; } /* (no box round the seat to hold these in) */
  .bjo-stage:not([data-layout='arc']) .bjo-mini:has(> .bjo-hand + .bjo-hand) .result { right: -1px; }
  .bjo-spot:not(.me) .avatar { display: none; } /* names need the room; the circle glows and its clock runs down on its turn */
  .bjo-spot:not(.me) .bjo-who { flex-direction: row; align-items: center; gap: 4px; }
  .bjo-spot:not(.me) .bjo-name { flex: 0 1 auto; }
  .bjo-spot:not(.me):not(.away) .bjo-bank { display: none; }
  .bjo-spot.away .bjo-bet { display: none; }
  .bjo-spot.me { display: grid; grid-template-columns: 1fr auto auto 1fr; grid-template-areas: "hands hands hands hands" ". circle tag ."; justify-items: center; align-items: center; gap: 2px 8px; }
  .bjo-spot.me > .bjo-me { grid-area: hands; }
  .bjo-spot.me > .bjo-circle { grid-area: circle; --circle: 28px; }
  .bjo-spot.me > .bjo-tag { grid-area: tag; contain: none; }
  .bjo-spot.me .avatar { display: none; }
}

/* ---------- A short felt (a phone on its side, Brief 18): three rows ---------- */
/* The far players either side of the dealer, the nearest either side of the middle, you along the
   bottom. Names sit beside the circles, your hands beside your label, and while bets are open your
   betting circle sits on your own seat (fit() places it), so the rows take as little height as
   they can. */
.bjo-stage[data-layout='flat'] { --ring: 56px; column-gap: 2px; }
.bjo-stage[data-layout='flat'] .bjo-mid, .bjo-stage[data-layout='flat'][data-phase='betting'] .bjo-mid { grid-template-rows: minmax(0, 1fr); min-height: 1.6rem; }
.bjo-stage[data-layout='flat'] .bjo-spot:not(.me) { min-width: max-content; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mini mini" "circle tag"; justify-content: stretch; align-items: center; gap: 2px 4px; }
.bjo-stage[data-layout='flat'] .bjo-spot:not(.me) > .bjo-mini { grid-area: mini; justify-self: center; }
/* Another player's split past two hands scrolls inside their seat (the active hand kept in view). */
.bjo-stage[data-layout='flat'] .bjo-mini:has(> .bjo-hand:nth-child(3)) { max-height: calc(var(--card-w) * 2.06 + 6px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-top: 6px; }
.bjo-stage[data-layout='flat'] .bjo-spot:not(.me) > .bjo-circle { grid-area: circle; margin-top: 0; }
.bjo-stage[data-layout='flat'] .bjo-spot:not(.me) > .bjo-tag { grid-area: tag; justify-content: flex-start; }
.bjo-stage[data-layout='flat'] .bjo-spot.me { grid-template-columns: auto auto; grid-template-areas: "circle hands" "tag hands"; justify-content: center; gap: 2px 10px; }
.bjo-stage[data-layout='flat'] .bjo-spot.me > .bjo-circle { --circle: var(--ring); }
.bjo-stage[data-layout='flat'] .bjo-spot.me > .bet-spot { grid-area: circle; position: relative; z-index: 4; place-self: center; }
.bjo-stage[data-layout='flat'] .bjo-spot.me > .bet-spot .bet-amount { position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; white-space: nowrap; }
.bjo-stage[data-layout='flat'][data-phase='betting'] .bjo-spot.me .bjo-tag { visibility: hidden; }

/* ---------- Under the felt: the status line and Invite / React / Leave, then the controls ---------- */
.bjo-foot { display: flex; align-items: center; justify-content: center; gap: 6px 10px; width: 100%; flex-wrap: wrap; }
.bjo-status { flex: 1 1 160px; min-height: 1.3em; margin: 0; color: var(--ink-2); font-weight: 600; font-size: 0.9rem; line-height: 1.3; text-align: center; font-variant-numeric: tabular-nums; }
.bjo-bar { display: flex; flex: none; gap: 6px; }
.bjo-bar .btn, .bjo-bar .react-btn { min-height: 38px; padding: 0 14px; font-size: 0.88rem; }
.bjo .controls { flex: none; padding-top: 0; gap: 8px; }
.bjo .group { gap: 8px; }
.bjo .actions { flex-wrap: nowrap; gap: 8px; }
.bjo .chip-rack { gap: clamp(8px, 2vw, 16px); }
/* The invite panel opens over the felt, from the bottom, and scrolls inside itself if it must. */
.bjo-invite {
  position: absolute;
  left: 50%;
  bottom: 4px;
  z-index: 25;
  translate: -50% 0;
  width: min(420px, calc(100% - 8px));
  max-height: calc(100% - 8px);
  overflow-y: auto;
  background: rgba(3, 22, 13, 0.97);
  border: 1px solid rgba(217, 180, 90, 0.45);
  box-shadow: var(--shadow);
}

/* A wide window: the chips and the bet buttons on one row, leaving the felt more height. */
@media (min-width: 900px) {
  .bjo .group[data-bjo='betting'] { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
}
@media (max-width: 640px) {
  .bjo .chip { width: 48px; height: 48px; }
  .bjo .group .row .btn { min-height: 44px; }
  .bjo .actions { max-width: 520px; }
  .bjo .actions .btn { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 6px; }
  .bjo-foot { flex-wrap: nowrap; }
  .bjo-status { flex: 1 1 0; min-width: 0; font-size: 0.8rem; text-align: left; }
  .bjo-bar { gap: 4px; }
  .bjo-bar .btn, .bjo-bar .react-btn { min-height: 34px; padding: 0 10px; font-size: 0.8rem; }
}
@media (max-width: 400px) {
  .bjo .print-sub { display: none; }
  .bjo-spot .avatar { width: 22px; height: 22px; font-size: 0.75rem; }
}

/* ---------- Phones on their side (Brief 18): the felt takes the height, the rest a column at the right ---------- */
/* The status line, Invite / React / Leave and the controls stack beside the felt, so the felt keeps
   the window's whole height; fit() seats a short felt in three rows (data-layout='flat'). */
@media (orientation: landscape) and (max-height: 500px) {
  .table.bjo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 156px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "felt foot" "felt ctl";
    gap: 6px 8px;
    padding-top: 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }
  .bjo-felt { grid-area: felt; height: 100%; }
  .bjo-foot { grid-area: foot; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
  .bjo-status { flex: none; font-size: 0.8rem; text-align: center; }
  .bjo-bar { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .bjo-bar .btn, .bjo-bar .react-btn { min-height: 34px; padding: 0 9px; font-size: 0.8rem; }
  .bjo .react-menu { bottom: auto; top: calc(100% + 6px); }
  .bjo .controls { grid-area: ctl; align-self: center; gap: 6px; }
  .bjo .group { gap: 6px; }
  .bjo .chip-rack { display: grid; grid-template-columns: repeat(2, 44px); justify-content: center; gap: 6px 14px; }
  .bjo .chip { width: 44px; height: 44px; font-size: 0.8rem; }
  .bjo .group[data-bjo='betting'] .row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
  .bjo .group[data-bjo='betting'] .row .btn { min-height: 38px; padding: 0 6px; font-size: 0.85rem; }
  .bjo .group[data-bjo='betting'] #bjo-bet { grid-column: 1 / -1; min-height: 42px; }
  .bjo .actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 6px; }
  .bjo .actions .btn { min-width: 0; min-height: 42px; padding: 0 6px; font-size: 0.9rem; }
  .bjo .buyin-btn { min-height: 40px; padding: 0 10px; }
}
/* The smallest phones on their side: a narrower column, so seven seats' long hands fit across. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
  body.game-page > .table.bjo { grid-template-columns: minmax(0, 1fr) 136px; column-gap: 6px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .bjo .group[data-bjo='betting'] .row .btn { padding: 0 4px; font-size: 0.8rem; }
  .bjo .actions .btn { font-size: 0.85rem; padding: 0 4px; }
}