/* ===== Blackjack: 2–5 players ===== */
.g-blackjack .bj-table { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.g-blackjack .bj-cards { display: flex; justify-content: center; align-items: center; }

/* ---------- opponents ---------- */
.g-blackjack .bj-opps { display: grid; gap: 8px; }
.g-blackjack .bj-opps.cols-1 { grid-template-columns: 1fr; }
.g-blackjack .bj-opps.cols-2 { grid-template-columns: 1fr 1fr; }
.g-blackjack .bj-opps.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-blackjack .bj-seat {
  --cw: 40px; display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 8px 8px 9px; border-radius: var(--r);
  background: var(--panel-2); transition: box-shadow .3s, opacity .3s;
}
.g-blackjack .bj-seat.turn { box-shadow: inset 0 0 0 2px var(--red), 0 0 24px -10px rgba(var(--red-rgb), .9); }
.g-blackjack .bj-seat.won { box-shadow: inset 0 0 0 2px var(--gold), 0 0 24px -10px rgba(255, 196, 0, .7); }
.g-blackjack .bj-seat.out { opacity: .45; }
.g-blackjack .bj-seat-head { display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0; }
.g-blackjack .bj-seat-head .nm { display: grid; gap: 3px; min-width: 0; }
.g-blackjack .bj-seat-head b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-blackjack .bj-seat .bj-cards { min-height: calc(var(--cw) * 1.42); }
.g-blackjack .bj-seat .pc3 { --cw: var(--seat-cw, 40px); }
.g-blackjack .bj-seat .pc3 + .pc3 { margin-left: calc(var(--seat-cw, 40px) * -.55); }
.g-blackjack .bj-seat-foot { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 24px; flex-wrap: wrap; }
.g-blackjack .bj-seat-foot .pill { height: 22px; padding: 0 8px; font-size: 11px; }
.g-blackjack .bj-seat-foot .bj-val { min-width: 32px; height: 24px; font-size: 13px; }
.g-blackjack .bj-seat-foot .bj-note { display: none; }
.g-blackjack .bj-opps.cols-1 .bj-seat { --seat-cw: 62px; }
.g-blackjack .bj-opps.cols-1 .bj-seat .pc3 + .pc3 { margin-left: -22px; }
.g-blackjack .bj-opps.cols-2 .bj-seat { --seat-cw: 46px; }
.g-blackjack .bj-opps.cols-3 .bj-seat { --seat-cw: 38px; padding: 7px 5px 8px; }
.g-blackjack .bj-opps.cols-3 .bj-seat .pc3 + .pc3 { margin-left: calc(var(--seat-cw) * -.62); }
.g-blackjack .bj-opps.cols-3 .bj-seat-head .av { display: none; }
.g-blackjack .bj-opps.cols-3 .bj-seat-head { justify-content: center; text-align: center; }
.g-blackjack .bj-opps.cols-3 .bj-seat-head .nm { justify-items: center; }

/* score pips: one per round needed to win */
.g-blackjack .bj-pips { display: inline-flex; gap: 3px; }
.g-blackjack .bj-pips i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.g-blackjack .bj-pips i.on { background: var(--gold); box-shadow: 0 0 6px rgba(255, 196, 0, .6); }
.g-blackjack .prow .bj-pips i { width: 9px; height: 9px; }

/* ---------- centre ---------- */
.g-blackjack .bj-mid { display: grid; justify-items: center; gap: 4px; padding: 4px 0; }
.g-blackjack .bj-round { font-size: 11.5px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.g-blackjack .bj-turn { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); font-weight: 600; }
.g-blackjack .bj-turn b { color: var(--ink); }
.g-blackjack .bj-result { font-size: 17px; font-weight: 800; animation: bannerIn .3s var(--ease-out); }
.g-blackjack .bj-result.win { color: var(--green); }
.g-blackjack .bj-result.lose { color: #ff5c7a; }
.g-blackjack .bj-strikes { font-size: 12px; font-weight: 700; color: #ff5c7a; }

/* ---------- my hand ---------- */
.g-blackjack .bj-me { display: grid; justify-items: center; gap: 8px; }
.g-blackjack .bj-me .bj-cards { min-height: calc(78px * 1.42); }
.g-blackjack .bj-me .pc3 + .pc3 { margin-left: -24px; }
.g-blackjack .bj-me.out { display: none; }
.g-blackjack .bj-score { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.g-blackjack .bj-val { min-width: 44px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--panel-3); display: inline-grid; place-items: center; font-weight: 800; font-size: 16px; }
.g-blackjack .bj-val.bust { background: rgba(var(--red-rgb), .18); color: #ff5c7a; }
.g-blackjack .bj-val.bj { background: rgba(61, 220, 132, .16); color: var(--green); }
.g-blackjack .bj-note { font-size: 12px; font-weight: 700; color: var(--muted); }
.g-blackjack .bj-note.bust { color: #ff5c7a; }
.g-blackjack .bj-note.bj { color: var(--green); }
.g-blackjack .g-actions { margin-top: 0; min-height: 48px; }

/* ---------- one phone screen ---------- */
body.in-game .g-blackjack .bj-table { flex: 1 1 auto; justify-content: space-between; gap: 6px; }
body.in-game .g-blackjack .bj-me { flex: 1 1 0; min-height: 0; align-content: center; gap: 6px; }
body.in-game .g-blackjack .bj-me .bj-cards { min-height: 0; }
@media (max-height: 760px) {
  body.in-game .g-blackjack .bj-me .pc3.lg { --cw: 64px; }
  body.in-game .g-blackjack .bj-me .pc3 + .pc3 { margin-left: -22px; }
  body.in-game .g-blackjack .n4 .bj-me .pc3.lg, body.in-game .g-blackjack .n5 .bj-me .pc3.lg { --cw: 56px; }
  body.in-game .g-blackjack .bj-opps.cols-1 .bj-seat { --seat-cw: 54px; }
  body.in-game .g-blackjack .bj-opps.cols-2 .bj-seat { --seat-cw: 44px; padding: 6px 6px 7px; gap: 4px; }
  body.in-game .g-blackjack .bj-opps.cols-3 .bj-seat { --seat-cw: 42px; gap: 4px; }
}

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .g-blackjack .bj-table { max-width: 1100px; width: 100%; margin: 0 auto; gap: 14px; }
  .g-blackjack .bj-opps.cols-2 { grid-template-columns: repeat(var(--dcols, 2), minmax(0, 1fr)); }
  .g-blackjack .n5 .bj-opps { --dcols: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g-blackjack .bj-opps.cols-1 { max-width: 420px; width: 100%; margin: 0 auto; }
  .g-blackjack .bj-seat, body.in-game .g-blackjack .bj-opps .bj-seat { --seat-cw: 74px; padding: 14px 12px; gap: 10px; }
  .g-blackjack .bj-seat .pc3 + .pc3 { margin-left: -30px; }
  .g-blackjack .bj-seat-foot .bj-val { min-width: 40px; height: 28px; font-size: 15px; }
  .g-blackjack .bj-opps.cols-3 .bj-seat, body.in-game .g-blackjack .bj-opps.cols-3 .bj-seat { --seat-cw: 74px; }
  .g-blackjack .bj-opps.cols-3 .bj-seat .pc3 + .pc3 { margin-left: -30px; }
  .g-blackjack .bj-opps.cols-1 .bj-seat, body.in-game .g-blackjack .bj-opps.cols-1 .bj-seat { --seat-cw: 84px; }
  .g-blackjack .bj-opps.cols-3 .bj-seat-head .av { display: grid; }
  .g-blackjack .bj-seat-head b { font-size: 14px; }
  .g-blackjack .bj-me .pc3.lg, body.in-game .g-blackjack .bj-me .pc3.lg,
  body.in-game .g-blackjack .n4 .bj-me .pc3.lg, body.in-game .g-blackjack .n5 .bj-me .pc3.lg { --cw: 104px; }
  .g-blackjack .bj-me .pc3 + .pc3, body.in-game .g-blackjack .bj-me .pc3 + .pc3 { margin-left: -34px; }
  .g-blackjack .bj-turn { font-size: 16px; }
  .g-blackjack .bj-table > .prow { max-width: 420px; width: 100%; margin: 0 auto; }
  .g-blackjack .bj-result { font-size: 22px; }
}