/* Twenty-one table. Every class starts with bq-bj-. */

.bq-bj-wrap {
  container-type: inline-size;
  width: min(1040px, 100%);
}

.bq-bj {
  --bj-felt: #0f5a49;
  --bj-felt-2: #052a22;
  --bj-brass: linear-gradient(135deg, #f8dc8c 0%, #b07a2c 30%, #ffe8a6 50%, #8c5a1c 76%, #e2b75e 100%);
  --bj-w: clamp(58px, 10.4cqi, 104px);
  --bj-overlap: -0.6;
  position: relative;
  width: 100%;
  padding: clamp(14px, 2.6cqi, 26px) clamp(14px, 3cqi, 34px) clamp(34px, 6cqi, 64px);
  border: clamp(7px, 1.3cqi, 12px) solid transparent;
  border-radius: 30px 30px 50% 50% / 30px 30px 30% 30%;
  background:
    radial-gradient(60% 50% at 50% 8%, rgba(255, 210, 140, 0.26), transparent 72%) padding-box,
    radial-gradient(120% 100% at 50% 30%, transparent 50%, rgba(0, 0, 0, 0.5)) padding-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") padding-box,
    radial-gradient(110% 100% at 50% 25%, var(--bj-felt), var(--bj-felt-2)) padding-box,
    var(--bj-brass) border-box;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 80px rgba(0, 0, 0, 0.45);
  color: var(--bq-ink);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.bq-bj-cap {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236, 247, 243, 0.55);
  white-space: nowrap;
}

/* ---- top row: discards | dealer | shoe */
.bq-bj-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--bq-s4);
  min-height: calc(var(--bj-w) * 1.4 + 56px);
}

.bq-bj-zone {
  display: grid;
  justify-items: center;
  gap: var(--bq-s2);
}

.bq-bj-zone--dealer { min-width: calc(var(--bj-w) * 2); }
.bq-bj-zone--dealer .bq-bj-cards { order: 1; }
.bq-bj-zone--dealer .bq-bj-total { order: 2; }
.bq-bj-cap--name { order: 0; color: rgba(255, 214, 140, 0.7); }

.bq-bj-tray,
.bq-bj-shoe {
  display: grid;
  justify-items: center;
  gap: var(--bq-s2);
}

.bq-bj-tray { justify-self: start; }
.bq-bj-shoe { justify-self: end; }

.bq-bj-tray__stack {
  position: relative;
  width: calc(var(--bj-w) * 0.62);
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  border: 1.5px dashed rgba(255, 214, 140, 0.25);
}

.bq-bj-tray__stack i {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 207, 90, 0.25) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #8a2533, #4f1019);
  border: 3px solid #f3ead6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.bq-bj-tray__stack i:nth-child(2) { transform: translate(2px, -3px) rotate(3deg); }
.bq-bj-tray__stack i:nth-child(3) { transform: translate(-2px, -6px) rotate(-2deg); }
.bq-bj-tray__stack i:nth-child(4) { transform: translate(1px, -9px) rotate(4deg); }
.bq-bj-tray__stack i:nth-child(5) { transform: translate(-1px, -12px) rotate(-3deg); }

.bq-bj-shoe__body {
  position: relative;
  width: calc(var(--bj-w) * 1.05);
  height: calc(var(--bj-w) * 0.82);
  border-radius: 10px 10px 16px 6px;
  background: linear-gradient(160deg, #4a2c19, #24130a 70%);
  border: 1px solid rgba(255, 214, 140, 0.35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.5);
  transform: skewX(-8deg);
  overflow: hidden;
}

.bq-bj-shoe__card {
  position: absolute;
  left: 14%;
  top: 14%;
  width: 66%;
  height: 120%;
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 207, 90, 0.25) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #8a2533, #4f1019);
  border: 3px solid #f3ead6;
}

.bq-bj-shoe__card:nth-child(2) { left: 20%; top: 18%; }
.bq-bj-shoe__card:nth-child(3) { left: 26%; top: 22%; }

.bq-bj-shoe__meter {
  width: calc(var(--bj-w) * 1.05);
  height: 5px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.bq-bj-shoe__meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--bq-coral), var(--bq-gold));
  transform-origin: left center;
  transition: transform var(--bq-med) var(--bq-ease-out);
}

/* ---- printed felt */
.bq-bj-printwrap {
  display: flex;
  justify-content: center;
  margin: calc(var(--bq-s2) * -1) 0 var(--bq-s2);
  pointer-events: none;
}

.bq-bj-print {
  width: min(560px, 92%);
  height: auto;
  overflow: visible;
}

.bq-bj-print__big {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  fill: rgba(255, 214, 140, 0.78);
}

.bq-bj-print__small {
  font-family: var(--bq-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  fill: rgba(236, 247, 243, 0.45);
}

.bq-bj-print__line {
  stroke: rgba(255, 214, 140, 0.25);
  stroke-width: 1.5;
}

/* ---- player hands */
.bq-bj-hands {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(16px, 5cqi, 64px);
  min-height: calc(var(--bj-w) * 1.4 + 150px);
}

.bq-bj-hand {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: var(--bq-s2);
  position: relative;
  transition: transform var(--bq-med) var(--bq-ease-out), opacity var(--bq-med) var(--bq-ease-out);
}

.bq-bj-hand.is-active { transform: translateY(-6px); }
.bq-bj-hand.is-bad { opacity: 0.78; }

.bq-bj-cards {
  display: flex;
  min-height: calc(var(--bj-w) * 1.4);
  padding-right: 4px;
}

.bq-bj-cards > .bq-bj-card + .bq-bj-card { margin-left: calc(var(--bj-w) * var(--bj-overlap)); }

.bq-bj-total {
  min-width: 46px;
  padding: 3px 12px;
  border-radius: 99px;
  background: rgba(3, 14, 12, 0.72);
  border: 1px solid rgba(255, 214, 140, 0.4);
  color: var(--bq-gold);
  font-family: var(--bq-font-display);
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.bq-bj-total.is-21 { color: var(--bq-mint); border-color: rgba(95, 227, 181, 0.6); }
.bq-bj-total.is-bust { color: var(--bq-coral); border-color: rgba(255, 123, 92, 0.6); }

.bq-bj-badge {
  position: absolute;
  left: 50%;
  top: calc(var(--bj-w) * 0.45);
  z-index: 3;
  padding: 6px 14px;
  border-radius: 99px;
  font-family: var(--bq-font-display);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  animation: bq-bj-pop 260ms var(--bq-ease-out);
}

.bq-bj-badge--good { background: linear-gradient(180deg, #ffe08a, #f2b63e); color: var(--bq-on-gold); box-shadow: 0 0 26px rgba(255, 207, 90, 0.55), 0 8px 22px rgba(0, 0, 0, 0.45); }
.bq-bj-badge--flat { background: #d8eef8; color: #0b2632; }
.bq-bj-badge--bad { background: rgba(30, 10, 10, 0.86); color: var(--bq-coral-2); border: 1px solid rgba(255, 123, 92, 0.45); }

@keyframes bq-bj-pop {
  from { opacity: 0; transform: translateX(-50%) scale(0.9); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.bq-bj-hand.is-good .bq-bj-card__face { box-shadow: 0 0 0 2px rgba(255, 207, 90, 0.85), 0 0 24px rgba(255, 207, 90, 0.4), 0 8px 18px rgba(0, 0, 0, 0.4); }

/* betting spot + chips */
.bq-bj-spot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: clamp(84px, 13cqi, 112px);
  height: clamp(84px, 13cqi, 112px);
  margin-top: var(--bq-s2);
  border-radius: 50%;
  border: 2px solid rgba(255, 214, 140, 0.5);
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.12), inset 0 0 0 7px rgba(255, 214, 140, 0.2), 0 0 0 0 rgba(255, 207, 90, 0);
  transition: box-shadow var(--bq-med) var(--bq-ease-out);
}

.bq-bj-hand.is-active .bq-bj-spot { box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.12), inset 0 0 0 7px rgba(255, 214, 140, 0.3), 0 0 26px rgba(255, 207, 90, 0.45); border-color: var(--bq-gold); }

.bq-bj-chips {
  position: relative;
  width: 44px;
  height: 58px;
}

.bq-bj-chip {
  --tone: #2fbf8f;
  --tone-2: #1f9c72;
  position: absolute;
  left: 0;
  bottom: calc(14px + var(--n) * 5px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--tone-2) 0 36%, transparent 37%),
    radial-gradient(circle, transparent 0 44%, rgba(255, 255, 255, 0.85) 45% 48%, transparent 49%),
    repeating-conic-gradient(rgba(255, 255, 255, 0.92) 0 11deg, transparent 11deg 45deg),
    var(--tone);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tone) 55%, black), 0 6px 10px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.bq-bj-chip--mint { --tone: #2fbf8f; --tone-2: #23a27a; }
.bq-bj-chip--sky { --tone: #3c9fe0; --tone-2: #2c85c2; }
.bq-bj-chip--coral { --tone: #f2674a; --tone-2: #d4533a; }
.bq-bj-chip--plum { --tone: #8e63e0; --tone-2: #7650c4; }
.bq-bj-chip--gold { --tone: #e8b23a; --tone-2: #c9952a; }
.bq-bj-chip--rose { --tone: #e2557f; --tone-2: #c24268; }
.bq-bj-chip--ink { --tone: #2a3a44; --tone-2: #1b272e; }

.bq-bj-chips__label {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 99px;
  background: rgba(3, 14, 12, 0.82);
  border: 1px solid rgba(255, 214, 140, 0.35);
  color: var(--bq-ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bq-bj-chips--double { animation: bq-bj-slide 260ms var(--bq-ease-out); }

@keyframes bq-bj-slide {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}

/* ---- cards */
.bq-bj-card {
  position: relative;
  flex: none;
  width: var(--bj-w);
  aspect-ratio: 5 / 7;
  perspective: 900px;
}

.bq-bj-card.is-sideways { rotate: 90deg; margin-left: calc(var(--bj-w) * -0.3) !important; translate: 0 calc(var(--bj-w) * 0.12); }

.bq-bj-card__in {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 380ms var(--bq-ease-out);
}

.bq-bj-card[data-up="0"] .bq-bj-card__in { transform: rotateY(180deg); }

.bq-bj-card__face,
.bq-bj-card__back {
  position: absolute;
  inset: 0;
  border-radius: 9% / 6.4%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 18px rgba(0, 0, 0, 0.42), 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: box-shadow var(--bq-med) var(--bq-ease-out);
}

.bq-bj-card__face { background: linear-gradient(160deg, #fffdf7 0%, #f6efe0 60%, #ede2cb 100%); }

.bq-bj-card__face::after {
  content: "";
  position: absolute;
  inset: 3.5%;
  border-radius: 7% / 5%;
  border: 1px solid rgba(185, 138, 51, 0.35);
  pointer-events: none;
}

.bq-bj-art { width: 100%; height: 100%; }

.bq-bj-card__back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 207, 90, 0.85) 0 6%, transparent 6.5%),
    radial-gradient(circle at 50% 50%, transparent 0 12%, rgba(255, 207, 90, 0.5) 12.5% 14%, transparent 14.5%),
    repeating-linear-gradient(45deg, rgba(255, 207, 90, 0.24) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-45deg, rgba(255, 207, 90, 0.16) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, #8a2533, #4a0f18);
  border: 4px solid #f3ead6;
  outline: 1px solid rgba(185, 138, 51, 0.6);
  outline-offset: -9px;
}

/* ---- shuffle moment */
.bq-bj-shuffle {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--bq-s4);
  border-radius: inherit;
  background: radial-gradient(closest-side, rgba(2, 18, 14, 0.82), rgba(2, 18, 14, 0.35));
  animation: bq-bj-fade 220ms var(--bq-ease-out);
}

@keyframes bq-bj-fade { from { opacity: 0; } to { opacity: 1; } }

.bq-bj-shuffle__riffle {
  position: relative;
  width: 160px;
  height: 100px;
}

.bq-bj-shuffle__c {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 58px;
  height: 80px;
  margin-left: -29px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 207, 90, 0.25) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #8a2533, #4f1019);
  border: 3px solid #f3ead6;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  animation: bq-bj-riffle-l 700ms var(--bq-ease-io) calc(var(--i) * 90ms) infinite alternate;
}

.bq-bj-shuffle__c--r { animation-name: bq-bj-riffle-r; }

@keyframes bq-bj-riffle-l {
  from { transform: translateX(-46px) rotate(-12deg); }
  to { transform: translateX(-4px) translateY(-6px) rotate(-2deg); }
}

@keyframes bq-bj-riffle-r {
  from { transform: translateX(46px) rotate(12deg); }
  to { transform: translateX(4px) translateY(-4px) rotate(2deg); }
}

.bq-bj-shuffle__txt {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bq-gold);
}

/* ---- phones */
@container (max-width: 620px) {
  .bq-bj {
    --bj-w: clamp(50px, 16cqi, 74px);
    --bj-overlap: -0.62;
    border-radius: 24px 24px 50% 50% / 24px 24px 12% 12%;
  }
  .bq-bj-top { grid-template-columns: 1fr auto 1fr; gap: var(--bq-s2); }
  .bq-bj-tray__stack { width: calc(var(--bj-w) * 0.5); }
  .bq-bj-shoe__body,
  .bq-bj-shoe__meter { width: calc(var(--bj-w) * 0.8); }
  .bq-bj-shoe__body { height: calc(var(--bj-w) * 0.66); }
  .bq-bj-tray .bq-bj-cap,
  .bq-bj-shoe .bq-bj-cap { display: none; }
  .bq-bj-zone--dealer { min-width: 0; }
  .bq-bj-print__big { font-size: 32px; letter-spacing: 2px; }
  .bq-bj-print__small { font-size: 18px; letter-spacing: 1px; }
  .bq-bj-hands { gap: 14px; min-height: calc(var(--bj-w) * 1.4 + 130px); }
  .bq-bj-badge { font-size: 12px; padding: 5px 10px; }
  .bq-bj-hands > .bq-bj-hand + .bq-bj-hand .bq-bj-badge__more,
  .bq-bj-hands > .bq-bj-hand:has(+ .bq-bj-hand) .bq-bj-badge__more { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bq-bj-card__in { transition-duration: 1ms; }
  .bq-bj-shuffle__c { animation: none; }
  .bq-bj-badge,
  .bq-bj-chips--double { animation: none; }
}