/* =====================================================================
   Peanut Games arcade (Baccarat) — builds on css/styles.css design tokens.
   Mobile-first. Navy/blue/orange/gold, white cards, green felt.
   No :root redeclaration. prefers-reduced-motion handled globally.
   ===================================================================== */

.pg-page { background: var(--bg); }

/* ------------------------------ Header ------------------------------ */
.pg-header .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pg-header .title-block { display: flex; flex-direction: column; align-items: flex-start; }

/* Copied VERBATIM from css/mlbscores.css (base + :hover + :focus-visible) */
.back-link { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.85); text-decoration: none; font-size: .8rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 3px; }
.back-link:hover { color: #fff; text-decoration: underline; }
.back-link:focus-visible { outline: 2px solid var(--mets-orange); outline-offset: 2px; border-radius: 4px; }

.pg-title { font-size: clamp(1.2rem, 6vw, 1.6rem); }
.t-pg { color: var(--gold); }

/* base .btn has no focus ring — add one for keyboard users */
.btn:focus-visible { outline: 2px solid var(--mets-orange); outline-offset: 2px; }

.pg-main { padding-top: 12px; }

/* ------------------------------ Lobby ------------------------------- */
/* the [hidden] attribute must beat the display rules below (and styles.css) */
.pg-lobby[hidden], .pg-game[hidden] { display: none !important; }
.pg-lobby { display: grid; grid-template-columns: 1fr; gap: 14px; }

.pg-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 18px 16px;
  cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  width: 100%;
  transition: box-shadow .15s ease, transform .05s ease;
}
.pg-tile:hover { box-shadow: var(--shadow); }
.pg-tile:active { transform: scale(.997); }
.pg-tile:focus-visible { outline: 2px solid var(--mets-orange); outline-offset: 2px; }
.pg-tile.is-soon { opacity: .6; cursor: default; }
.pg-tile.is-soon:hover { box-shadow: var(--shadow-sm); }
.pg-tile.is-soon:active { transform: none; }

.pg-tile-emoji { font-size: 2.2rem; line-height: 1; }
.pg-tile-name { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.pg-tile-blurb { font-size: .85rem; color: var(--ink-soft); }
.pg-tile-badge {
  font-size: .72rem; padding: 4px 10px; border-radius: 999px;
  background: #eef2f7; color: var(--ink-soft); border: 1px solid var(--line);
  white-space: nowrap; font-weight: 700;
}

/* ------------------------------ Felt + hands ------------------------ */
.bac { display: grid; gap: 14px; }

.bac-felt {
  --pg-felt: #1a4d2e;
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(160deg, #246f43 0%, var(--pg-felt) 55%, #123620 100%);
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.3);
  box-shadow: inset 0 2px 22px rgba(0,0,0,.4), var(--shadow);
  padding: 30px 14px 16px;
  color: #f1f6f1;
}
.bac-felt::before {
  content: "B A C C A R A T";
  position: absolute; top: 9px; left: 0; right: 0;
  text-align: center; font-size: .64rem; font-weight: 800;
  letter-spacing: .42em; color: rgba(255,255,255,.42);
}

.bac-hands { display: grid; grid-template-columns: 1fr; gap: 14px; }

.bac-hand {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.bac-hand-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.bac-hand-title { font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bac-hand.player .bac-hand-title { color: #ffd9c2; }
.bac-hand.banker .bac-hand-title { color: #cfe0ff; }

/* circular total badge (invisible until cards are dealt) */
.bac-hand-total {
  min-width: 1.9em; height: 1.9em; padding: 0 .35em;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(255,255,255,.16);
  color: #fff; font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.bac-hand-total.is-empty { background: transparent; color: transparent; box-shadow: none; }

.bac-cards { display: flex; flex-wrap: wrap; gap: 8px; min-height: clamp(74px, 22vw, 104px); align-content: flex-start; }

/* result pill */
.bac-result { display: flex; justify-content: center; margin-top: 6px; min-height: 1.2em; }
.bac-result[hidden] { display: none; }
.bac-result .status-pill { font-size: .95rem; font-weight: 800; padding: 7px 18px; animation: pgPop .3s ease both; }
.bac-result.win .status-pill  { background: #e3f5ea; color: var(--good); border-color: #bfe6cd; }
.bac-result.lose .status-pill { background: #fdeaea; color: var(--bad);  border-color: #f3c4c4; }
.bac-result.tie .status-pill  { background: #fff4d6; color: #8a5a00;     border-color: #f2d287; }
@keyframes pgPop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

/* ------------------------------ Cards (CSS-drawn) ------------------- */
.pcard {
  position: relative;
  width: clamp(48px, 13vw, 72px);
  aspect-ratio: 5 / 7;
  background: linear-gradient(160deg, #ffffff, #f4f6f9);
  border: 1px solid #d7dee7;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(12,35,64,.22);
  flex: 0 0 auto;
  font-weight: 800;
  overflow: hidden;
}
.pcard.red   { color: #c0392b; }
.pcard.black { color: var(--ink); }

.pcard-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .9; }
.pcard-corner.tl { top: 4px; left: 5px; }
.pcard-corner.br { bottom: 4px; right: 5px; transform: rotate(180deg); }
.pcard-corner .pcard-rank { font-size: clamp(.72rem, 2.6vw, .95rem); font-weight: 900; }
.pcard-corner .pcard-suit { font-size: clamp(.6rem, 2.1vw, .82rem); }

.pcard-pip {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.6rem, 6.5vw, 2.4rem);
  opacity: .92;
}

/* face-down card (defined for future use) */
.pcard.back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.08), rgba(255,255,255,.08) 5px, transparent 5px, transparent 10px),
    linear-gradient(135deg, var(--yanks-navy), var(--mets-blue));
  border-color: rgba(255,255,255,.2);
  color: transparent;
}

/* deal-in flip (each card lands + turns face-up) */
.pcard.dealt { animation: pcardDeal .42s cubic-bezier(.2,.75,.3,1) both; transform-origin: center; }
@keyframes pcardDeal {
  0%   { opacity: 0; transform: translateY(-30px) rotateY(85deg) scale(.9); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ------------------------------ Info line --------------------------- */
.bac-info { font-size: .82rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 2px; min-height: 1.1em; }
.bac-info-private { color: var(--warn); font-weight: 700; }
.bac-info-note { color: var(--mets-blue); font-weight: 700; }

/* ------------------------------ Seats ------------------------------- */
.bac-seats { display: grid; grid-template-columns: 1fr; gap: 10px; }

.bac-seat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 12px;
  display: grid; gap: 10px; align-content: start;
}
.bac-seat.has-bet { border-color: var(--mets-orange); box-shadow: 0 0 0 1px var(--mets-orange), var(--shadow-sm); }
/* Your own seat at the live table — a steady highlight so it's easy to find. */
.bac-seat.is-you { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), var(--shadow-sm); }
.bac-seat.is-you.has-bet { box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px var(--mets-orange), var(--shadow-sm); }
.bac-seat.empty {
  align-content: center; justify-items: stretch; gap: 8px; min-height: 132px;
  border-style: dashed; background: #fbfcfe;
}
.bac-seat-emptylabel { text-align: center; font-size: .8rem; font-weight: 700; color: var(--ink-soft); }

.bac-seat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bac-seat-name { font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bac-seat-bal { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.bac-seat-bal::first-letter { color: var(--gold); } /* the ● chip glyph */

.bac-seat-bet { font-size: .8rem; color: var(--ink-soft); }
.bac-seat-bet.is-set { color: var(--mets-blue); font-weight: 800; }
.bac-seat-hint { font-size: .72rem; font-weight: 700; color: var(--mets-orange); }

/* Betting-window countdown banner on the felt */
.bac-countdown {
  min-height: 1.2em; text-align: center; font-weight: 800; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: #eaf7ee; margin-bottom: 8px;
}
.bac-countdown.idle { color: #bcd9c6; font-weight: 700; }
.bac-countdown.urgent { color: #ffd24d; }
.bac-countdown.closed { color: #ff6f33; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .bac-countdown.urgent { animation: bacPulse 1s ease-in-out infinite; }
}
@keyframes bacPulse { 50% { opacity: .55; } }

.bac-seat-note { font-size: .78rem; font-weight: 800; }
.bac-seat-note.win  { color: var(--good); }
.bac-seat-note.lose { color: var(--bad); }
.bac-seat-note.push { color: var(--ink-soft); }

.bac-seat-sides { display: flex; gap: 6px; }
.side-btn { min-height: 40px; flex: 1 1 0; justify-content: center; font-weight: 800; }
.side-btn.is-on { background: var(--mets-orange); color: #fff; border-color: var(--mets-orange); }
.side-btn.is-on:hover { background: #ff6f33; }

.bac-seat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn {
  min-height: 42px; min-width: 42px;
  border-radius: 999px; padding: 6px 10px;
  font-weight: 800; font-size: .82rem; font-variant-numeric: tabular-nums;
  border: 2.5px solid var(--line); background: #fff; color: var(--ink);
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.chip-btn:hover { background: #f7f9fc; }
.chip-btn:active { transform: translateY(1px); }
.chip-btn:focus-visible { outline: 2px solid var(--mets-orange); outline-offset: 2px; }
.chip-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
/* denomination color accents */
.chip-btn.c10  { border-color: #2e7d32; color: #1c6b25; }
.chip-btn.c25  { border-color: #2570e8; color: #1c54b3; }
.chip-btn.c50  { border-color: #e23636; color: #b62d2d; }
.chip-btn.c100 { border-color: var(--ink); color: var(--ink); }
.chip-btn.c500 { border-color: var(--gold); color: #8a5a00; background: #fffaf0; }

.pg-name-input {
  width: 100%; font: inherit; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; min-height: 44px; color: var(--ink);
}
.pg-name-input:focus { outline: 2px solid var(--mets-orange); outline-offset: 1px; border-color: var(--mets-orange); }

.bac-seat-manage { display: flex; gap: 6px; flex-wrap: wrap; }
.bac-seat-manage .btn { flex: 1 1 auto; justify-content: center; }

/* ------------------------------ Actions ----------------------------- */
.bac-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bac-actions #bac-deal { min-width: 140px; }

/* ------------------------------ Responsive -------------------------- */
@media (min-width: 620px) {
  .pg-lobby { grid-template-columns: repeat(2, 1fr); }
  .bac-hands { grid-template-columns: repeat(2, 1fr); }
  .bac-seats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* =====================================================================
   Blackjack (.bj-*) — same visual language as Baccarat (.bac-*).
   Reuses: .pcard (CSS-drawn cards), .status-pill, .chip-btn, .btn.
   Felt/hands mirror .bac-felt / .bac-hands; adds split layout + hole card.
   ===================================================================== */
.bj { display: grid; gap: 14px; }

/* ------------------------------ Felt -------------------------------- */
.bj-felt {
  --pg-felt: #1a4d2e;
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(160deg, #246f43 0%, var(--pg-felt) 55%, #123620 100%);
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.3);
  box-shadow: inset 0 2px 22px rgba(0,0,0,.4), var(--shadow);
  padding: 30px 14px 16px;
  color: #f1f6f1;
}
.bj-felt::before {
  content: "B L A C K J A C K";
  position: absolute; top: 9px; left: 0; right: 0;
  text-align: center; font-size: .64rem; font-weight: 800;
  letter-spacing: .42em; color: rgba(255,255,255,.42);
}

/* ------------------------------ Hands ------------------------------- */
.bj-hands { display: grid; grid-template-columns: 1fr; gap: 14px; }

.bj-hand {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.bj-hand-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.bj-hand-title { font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bj-hand.dealer .bj-hand-title { color: #cfe0ff; }
.bj-hand.player .bj-hand-title,
.bj-hand.split-left .bj-hand-title,
.bj-hand.split-right .bj-hand-title { color: #ffd9c2; }
/* per-hand bet label (right of the title) */
.bj-hand-bet { font-size: .74rem; font-weight: 800; color: #cfe0ff; font-variant-numeric: tabular-nums; }
.bj-hand-bet::first-letter { color: var(--gold); } /* the ● chip glyph */

/* the active split hand gets a steady highlight so it's easy to find */
.bj-hand.is-active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.bj-hand.is-done { opacity: .72; }

/* circular total badge (invisible until cards are dealt) */
.bj-hand-total {
  min-width: 1.9em; height: 1.9em; padding: 0 .35em;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(255,255,255,.16);
  color: #fff; font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.bj-hand-total.is-empty { background: transparent; color: transparent; box-shadow: none; }
.bj-hand-total.soft { background: rgba(120,180,255,.28); }
.bj-hand-total.bust { background: rgba(226,54,54,.32); box-shadow: inset 0 0 0 1px rgba(255,170,170,.5); }
.bj-hand-total.bj   { background: rgba(212,175,55,.32); box-shadow: inset 0 0 0 1px rgba(255,225,150,.6); color: #fff7e0; }

.bj-cards { display: flex; flex-wrap: wrap; gap: 8px; min-height: clamp(74px, 22vw, 104px); align-content: flex-start; }

/* dealer hole card stays face-down (.back face) until dealerTurn flips it */
.bj-cards .pcard.hole .pcard-corner,
.bj-cards .pcard.hole .pcard-pip { visibility: hidden; }

/* ------------------------------ Result ------------------------------ */
.bj-result { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; min-height: 1.2em; }
.bj-result[hidden] { display: none; }
.bj-result .status-pill { font-size: .95rem; font-weight: 800; padding: 7px 18px; animation: pgPop .3s ease both; }
.bj-result.win  .status-pill { background: #e3f5ea; color: var(--good); border-color: #bfe6cd; }
.bj-result.lose .status-pill { background: #fdeaea; color: var(--bad);  border-color: #f3c4c4; }
.bj-result.push .status-pill { background: #fff4d6; color: #8a5a00;     border-color: #f2d287; }

/* ------------------------------ Info line --------------------------- */
.bj-info { font-size: .82rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 2px; min-height: 1.1em; }
.bj-info-phase { color: var(--mets-blue); font-weight: 700; }
.bj-info-note { color: var(--warn); font-weight: 700; }

/* ------------------------------ Table panel ------------------------- */
.bj-table {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 12px;
  display: grid; gap: 12px; align-content: start;
}

.bj-balance-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bj-balance-label { font-size: .8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.bj-balance { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.bj-balance::first-letter { color: var(--gold); } /* the ● chip glyph */
.bj-topup { min-height: 42px; }

.bj-bet-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bj-bet { font-size: .85rem; color: var(--ink-soft); }
.bj-bet.is-set { color: var(--mets-blue); font-weight: 800; }
.bj-bet-amount { font-variant-numeric: tabular-nums; }
.bj-bet-amount::first-letter { color: var(--gold); }

.bj-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.bj-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bj-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
.bj-actions .bj-btn-deal { min-width: 140px; flex-basis: 100%; }
.bj-actions .btn[hidden] { display: none; }

/* ------------------------------ Responsive -------------------------- */
@media (min-width: 620px) {
  .bj-hands { grid-template-columns: repeat(2, 1fr); }
  /* split hands sit side-by-side; dealer spans the full row above them */
  .bj-hand.dealer { grid-column: 1 / -1; }
  .bj-actions .bj-btn-deal { flex-basis: 140px; }
}

/* per-hand result note (split hands) */
.bj-hand-note { margin-top: 6px; text-align: center; font-size: .8rem; font-weight: 800; }
.bj-hand-note.win { color: var(--good); }
.bj-hand-note.lose { color: var(--bad); }
.bj-hand-note.push { color: #8a5a00; }

/* ===================================================================
   Blackjack — Live Table (.bjl-*)
   Shared simultaneous-play table. Visual language = Baccarat live seats
   (.bac-*) + offline blackjack hands/totals (.bj-*). Reuses .pcard,
   .chip-btn, .side-btn, .pg-name-input. Append to peanutgames.css.
   =================================================================== */
.bjl { display: grid; gap: 14px; }

/* ---- Felt + dealer area --------------------------------------------- */
.bjl-felt {
  --pg-felt: #1a4d2e;
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(160deg, #246f43 0%, var(--pg-felt) 55%, #123620 100%);
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.3);
  box-shadow: inset 0 2px 22px rgba(0,0,0,.4), var(--shadow);
  padding: 30px 14px 16px;
  color: #f1f6f1;
}
.bjl-felt::before {
  content: "B L A C K J A C K";
  position: absolute; top: 9px; left: 0; right: 0;
  text-align: center; font-size: .64rem; font-weight: 800;
  letter-spacing: .42em; color: rgba(255,255,255,.42);
}

/* Betting-window / phase countdown banner on the felt */
.bjl-countdown {
  min-height: 1.2em; text-align: center; font-weight: 800; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: #eaf7ee; margin-bottom: 8px;
}
.bjl-countdown.idle    { color: #bcd9c6; font-weight: 700; }
.bjl-countdown.urgent  { color: #ffd24d; }
.bjl-countdown.closed  { color: #ff6f33; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .bjl-countdown.urgent { animation: bacPulse 1s ease-in-out infinite; }
}

/* Dealer hand sits at the top of the felt, full width */
.bjl-dealer {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 14px;
}
.bjl-dealer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.bjl-dealer-title { font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #cfe0ff; }
.bjl-dealer .bjl-cards { justify-content: center; }

/* circular total badge (invisible until first card lands) */
.bjl-total {
  min-width: 1.9em; height: 1.9em; padding: 0 .35em;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(255,255,255,.16);
  color: #fff; font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.bjl-total.is-empty { background: transparent; color: transparent; box-shadow: none; }
.bjl-total.soft { background: rgba(120,180,255,.28); }
.bjl-total.bust { background: rgba(226,54,54,.32);  box-shadow: inset 0 0 0 1px rgba(255,170,170,.5); }
.bjl-total.bj   { background: rgba(212,175,55,.32); box-shadow: inset 0 0 0 1px rgba(255,225,150,.6); color: #fff7e0; }

.bjl-cards { display: flex; flex-wrap: wrap; gap: 8px; min-height: clamp(74px, 22vw, 104px); align-content: flex-start; }
/* hidden dealer hole card (2nd card) until phase=result; rendered .pcard.back */
.bjl-cards .pcard.hole .pcard-corner,
.bjl-cards .pcard.hole .pcard-pip { visibility: hidden; }

/* ---- Seats grid ----------------------------------------------------- */
.bjl-seats { display: grid; grid-template-columns: 1fr; gap: 10px; }

.bjl-seat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 12px;
  display: grid; gap: 10px; align-content: start;
}
.bjl-seat.has-bet { border-color: var(--mets-orange); box-shadow: 0 0 0 1px var(--mets-orange), var(--shadow-sm); }
/* Your own seat at the live table — steady highlight so it's easy to find. */
.bjl-seat.is-you { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), var(--shadow-sm); }
.bjl-seat.is-you.has-bet { box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px var(--mets-orange), var(--shadow-sm); }
.bjl-seat.empty {
  align-content: center; justify-items: stretch; gap: 8px; min-height: 132px;
  border-style: dashed; background: #fbfcfe;
}
.bjl-seat-emptylabel { text-align: center; font-size: .8rem; font-weight: 700; color: var(--ink-soft); }

.bjl-seat-top  { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bjl-seat-name { font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bjl-seat-bal  { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.bjl-seat-bal::first-letter { color: var(--gold); } /* the ● chip glyph */

.bjl-seat-bet { font-size: .8rem; color: var(--ink-soft); }
.bjl-seat-bet.is-set { color: var(--mets-blue); font-weight: 800; }
.bjl-seat-hint { font-size: .72rem; font-weight: 700; color: var(--mets-orange); }

/* Betting-phase controls (reuse .chip-btn / .pg-name-input) */
.bjl-seat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bjl-seat-manage { display: flex; gap: 6px; flex-wrap: wrap; }
.bjl-seat-manage .btn { flex: 1 1 auto; justify-content: center; }

/* ---- Per-seat hands (playing phase) --------------------------------- */
/* One seat can hold up to 2 hands after a split — lay them side by side. */
.bjl-seat-hands { display: grid; grid-template-columns: 1fr; gap: 8px; }
.bjl-seat-hands.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bjl-hand {
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 8px 10px;
  display: grid; gap: 8px; align-content: start;
  transition: box-shadow .15s ease, opacity .2s ease;
}
/* the hand you can currently act on */
.bjl-hand.is-active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
/* a finished hand (stood / busted / 21 / blackjack) dims back */
.bjl-hand.is-done { opacity: .68; }
.bjl-hand.bust { border-color: #f3c4c4; background: #fdf2f2; }

.bjl-hand-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bjl-hand-bet { font-size: .74rem; font-weight: 800; color: var(--mets-blue); font-variant-numeric: tabular-nums; }
.bjl-hand-bet::first-letter { color: var(--gold); } /* the ● chip glyph */
/* on-felt seat hands use the dark total badge; in-seat (light) hands use a light one */
.bjl-hand .bjl-total {
  background: var(--line); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.bjl-hand .bjl-total.soft { background: rgba(37,112,232,.16); color: var(--mets-blue); }
.bjl-hand .bjl-total.bust { background: #fdeaea; color: var(--bad); box-shadow: inset 0 0 0 1px #f3c4c4; }
.bjl-hand .bjl-total.bj   { background: #fffaf0; color: #8a5a00; box-shadow: inset 0 0 0 1px var(--gold); }
.bjl-hand .bjl-cards { min-height: clamp(60px, 18vw, 90px); }

/* Per-hand action row (hit / stand / double / split) — your hands only */
.bjl-hand-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bjl-hand-actions .btn { flex: 1 1 0; min-width: 0; min-height: 40px; justify-content: center; font-weight: 800; }
.bjl-hand-actions .btn[hidden] { display: none; }
.bjl-hand-actions .bjl-btn-stand  { background: var(--mets-orange); color: #fff; border-color: var(--mets-orange); }
.bjl-hand-actions .bjl-btn-stand:hover { background: #ff6f33; }
/* read-only state: other seats' hands during play show no buttons */
.bjl-seat:not(.is-you) .bjl-hand-actions { display: none; }

/* ---- Result states -------------------------------------------------- */
.bjl-hand-note { margin-top: 2px; text-align: center; font-size: .78rem; font-weight: 800; min-height: 1.1em; }
.bjl-hand-note.win  { color: var(--good); }
.bjl-hand-note.lose { color: var(--bad); }
.bjl-hand-note.push { color: #8a5a00; }
.bjl-hand-note.bj   { color: #8a5a00; }

/* seat-level settle summary (sum of all this seat's hands) */
.bjl-seat-note { font-size: .82rem; font-weight: 800; text-align: center; }
.bjl-seat-note.win  { color: var(--good); }
.bjl-seat-note.lose { color: var(--bad); }
.bjl-seat-note.push { color: var(--ink-soft); }

/* dealer result pill */
.bjl-result { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; min-height: 1.2em; }
.bjl-result[hidden] { display: none; }
.bjl-result .status-pill { font-size: .95rem; font-weight: 800; padding: 7px 18px; animation: pgPop .3s ease both; }
.bjl-result.win  .status-pill { background: #e3f5ea; color: var(--good); border-color: #bfe6cd; }
.bjl-result.lose .status-pill { background: #fdeaea; color: var(--bad);  border-color: #f3c4c4; }
.bjl-result.push .status-pill { background: #fff4d6; color: #8a5a00;     border-color: #f2d287; }

/* ---- Info line + table actions -------------------------------------- */
.bjl-info { font-size: .82rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 2px; min-height: 1.1em; }
.bjl-info-phase   { color: var(--mets-blue); font-weight: 700; }
.bjl-info-private { color: var(--warn); font-weight: 700; }
.bjl-info-note    { color: var(--mets-blue); font-weight: 700; }

.bjl-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bjl-actions .bjl-btn-deal { min-width: 140px; }
.bjl-actions .btn[hidden] { display: none; }

/* ---- Responsive ----------------------------------------------------- */
@media (min-width: 620px) {
  .bjl-seats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
@media (max-width: 380px) {
  /* on the smallest screens a split seat stacks rather than squeezing two hands */
  .bjl-seat-hands.split { grid-template-columns: 1fr; }
  .bjl-hand-actions .btn { flex-basis: calc(50% - 3px); }
}