/* Blackjack. Every region has a fixed size; states only change content. */

.game-root { min-height: 44rem; }

.bj-table {
  --bj-w: clamp(2.9rem, 14cqw, 4.7rem);
  --card-w: var(--bj-w);
  --card-h: calc(var(--card-w) * 1.452);
  --radius: calc(var(--card-w) * 0.07);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ---------- head: shoe + count ---------- */

.bj-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  height: 2.6rem;
  color: #d8e0d8;
  font-size: 0.85rem;
}

.bj-shoe {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.bj-shoe-icon.playing-card {
  --card-w: 1.5rem;
  --card-h: 2.18rem;
  --radius: 0.2rem;
  flex: none;
  cursor: default;
}

.bj-shoe-info {
  display: grid;
  gap: 0.25rem;
  width: clamp(6.5rem, 30cqw, 11rem);
}

.bj-shoe-bar {
  position: relative;
  display: block;
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  overflow: visible;
}

.bj-shoe-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.5);
}

.bj-shoe-cut {
  position: absolute;
  top: -0.2rem;
  bottom: -0.2rem;
  width: 3px;
  margin-left: -1px;
  border-radius: 2px;
  background: #f0cf6a;
}

.bj-shoe-text { font-variant-numeric: tabular-nums; line-height: 1.2; }

.bj-counter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

.bj-count {
  display: inline-block;
  min-width: 4.6rem;
  color: #f0cf6a;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bj-count-switch { color: #d8e0d8; font-size: 0.85rem; }

/* ---------- zones ---------- */

.bj-zone { display: block; }

/* Felt between the dealer and you, on top of the table's own gap. */
.bj-zone + .bj-zone { margin-top: 0.9rem; }

.bj-zone-title {
  height: 1.4rem;
  margin: 0;
  font: normal 0.95rem/1.4rem var(--font-serif);
  color: #e8ebe6;
  text-align: center;
}

.bj-hands {
  --hand-w: 3.8; /* fan width in card widths; placeCards reads this */
  --card-h: calc(var(--card-w) * 1.452);
  --radius: calc(var(--card-w) * 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--bj-w) * 0.5);
  height: calc(var(--bj-w) * 1.452); /* the tallest layout; never changes */
}

/* One card row per betting seat, so a hand sits in the same column as its bet. */
.bj-hands[data-layout="seats"] {
  --card-w: min(var(--bj-w), 7.4cqw);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  gap: 0.25rem;
}

/* A split puts two hands on one seat: use the full width instead of the columns. */
.bj-hands[data-layout="flat"][data-count="2"] {
  --card-w: min(calc(var(--bj-w) * 0.86), 12cqw);
}

.bj-hands[data-layout="flat"][data-count="3"],
.bj-hands[data-layout="flat"][data-count="4"] {
  --card-w: calc(var(--bj-w) * 0.5);
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  align-content: start;
  align-items: start;
  gap: 0 calc(var(--bj-w) * 0.4);
}

/*
 * A phone cannot fit three wide fans. Keep the dealer card size and overlap
 * the fan instead, so the cards stay readable. The row height does not change.
 */
@container (max-width: 42rem) {
  .bj-hands[data-layout="seats"] {
    --card-w: var(--bj-w);
    --hand-w: 1.82;
  }

  .bj-hands[data-layout="flat"][data-count="2"] {
    --card-w: var(--bj-w);
    --hand-w: 2.5;
  }

  .bj-hands[data-layout="flat"][data-count="3"],
  .bj-hands[data-layout="flat"][data-count="4"] {
    --card-w: var(--bj-w);
    --hand-w: 1.38;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
  }
}

.bj-hand {
  position: relative;
  flex: none;
  width: calc(var(--card-w) * var(--hand-w, 3.8));
  height: var(--card-h);
}

.bj-hand .playing-card {
  position: absolute;
  top: 0;
  cursor: default;
  pointer-events: none;
  transition: left 0.22s ease;
}

.bj-hand.is-active::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -0.3rem;
  height: 3px;
  border-radius: 2px;
  background: #f0cf6a;
}

.bj-pill {
  position: absolute;
  left: 50%;
  bottom: 0.25rem;
  translate: -50% 0;
  z-index: 40;
  max-width: 100%;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: rgba(10, 18, 14, 0.86);
  color: #fffdf7;
  font: 600 0.8rem/1.45 var(--font-sans);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bj-pill.is-empty { display: none; }
.bj-pill.is-win { background: #c9a02e; color: #241b04; }
.bj-pill.is-lose { background: rgba(70, 20, 20, 0.92); }
.bj-pill.is-push { background: rgba(60, 64, 80, 0.95); }

.bj-hands[data-layout="flat"][data-count="3"] .bj-pill,
.bj-hands[data-layout="flat"][data-count="4"] .bj-pill {
  font-size: 0.68rem;
  padding: 0 0.35rem;
}

@container (max-width: 42rem) {
  .bj-hands[data-layout="flat"][data-count="3"] .bj-pill,
  .bj-hands[data-layout="flat"][data-count="4"] .bj-pill {
    font-size: 0.72rem;
    padding: 0 0.3rem;
  }
}

/* ---------- bet seats: three columns, always, so the row never changes height ---------- */

.bj-hands + .bj-spots { margin-top: 0.85rem; }

.bj-spots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  height: 6.4rem;
}

.bj-spot-col {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
  min-width: 0;
  margin: 0;
  padding: 0.3rem 0.15rem 0.35rem;
  border: 1px dashed rgba(255, 253, 247, 0.38);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.12);
  color: #d8e0d8;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.bj-spot-col.is-on {
  border-style: solid;
  border-color: rgba(255, 253, 247, 0.4);
  background: rgba(0, 0, 0, 0.22);
}

.bj-spot-col.is-selected,
.bj-spot-col.is-live {
  border-color: #f0cf6a;
  box-shadow: inset 0 0 0 1px #f0cf6a;
}

.bj-spot-col.is-locked { cursor: default; }

.bj-spot-col.is-locked.is-off { opacity: 0.4; }

.bj-spot-col:focus-visible {
  outline: 2px solid #f0cf6a;
  outline-offset: 2px;
}

.bj-spot-stack {
  display: grid;
  place-items: end center;
  width: 2.2rem;
  height: 3.05rem;
}

.bj-spot-stack .casino-chip-stack { --chip: 1.7rem; }

.bj-spot-name,
.bj-spot-amt {
  max-width: 100%;
  height: 1.15rem;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  line-height: 1.15rem;
  white-space: nowrap;
}

.bj-spot-name {
  font: 600 0.78rem/1.15rem var(--font-sans);
  color: #d8e0d8;
}

.bj-spot-amt {
  font: 600 0.95rem/1.15rem var(--font-serif);
  color: #f0cf6a;
}

.bj-spot-amt.is-hint {
  color: #d8e0d8;
  font-family: var(--font-sans);
  font-size: 0.78rem;
}

/* ---------- dock ---------- */

.casino-dock [hidden],
.casino-controls .btn[hidden] { display: none !important; }

.casino-chip-tray.is-tap .casino-chip-btn.is-selected {
  border-color: transparent;
  box-shadow: none;
}

.bj-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.75rem;
  color: #e8ebe6;
}

.bj-prompt-text { margin: 0; font-size: 0.9rem; }
.bj-prompt-text:empty { display: none; }

.bj-prompt-actions { display: flex; gap: 0.5rem; }

@media (max-width: 480px) {
  .bj-count { min-width: 3.6rem; }
}