/* Blackjack engine — felt table, CSS cards and chips. */

.qt-bj {
  container-type: inline-size;
  width: min(100%, 980px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2cqi, 16px);
  color: var(--qt-ink, #f6f1ff);
  -webkit-tap-highlight-color: transparent;
}

.qt-bj-felt {
  --qt-bj-cw: clamp(54px, 13.5cqi, 100px);
  --qt-bj-felt: color-mix(in srgb, var(--qt-accent, #3de08a) 26%, #05301f);
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: clamp(6px, 1.6cqi, 14px);
  min-height: clamp(400px, 64cqi, 560px);
  padding: clamp(14px, 3cqi, 28px) clamp(10px, 3cqi, 30px) clamp(16px, 3cqi, 26px);
  border-radius: clamp(22px, 6cqi, 56px) clamp(22px, 6cqi, 56px) clamp(140px, 30cqi, 300px) clamp(140px, 30cqi, 300px) / clamp(22px, 6cqi, 56px) clamp(22px, 6cqi, 56px) 90px 90px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .12), transparent 60%),
    repeating-radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    radial-gradient(140% 100% at 50% 20%, var(--qt-bj-felt), color-mix(in srgb, var(--qt-bj-felt) 55%, #010b07) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .06),
    inset 0 -30px 60px rgba(0, 0, 0, .35),
    0 0 0 clamp(5px, 1.2cqi, 10px) #2a170c,
    0 0 0 calc(clamp(5px, 1.2cqi, 10px) + 2px) color-mix(in srgb, var(--qt-gold, #ffcf4a) 60%, transparent),
    0 26px 60px rgba(0, 0, 0, .55),
    0 0 80px color-mix(in srgb, var(--qt-accent, #3de08a) 22%, transparent);
  overflow: hidden;
}

.qt-bj-felt::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 38%;
  width: 150%;
  aspect-ratio: 2.4;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--qt-gold, #ffcf4a) 38%, transparent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--qt-gold, #ffcf4a) 6%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}
.qt-bj-felt > * { position: relative; }
.qt-bj-felt > .qt-bj-shoe { position: absolute; }

/* ---------- shoe ---------- */
.qt-bj-shoe {
  position: absolute;
  top: clamp(10px, 2.4cqi, 22px);
  right: clamp(12px, 3.4cqi, 34px);
  width: calc(var(--qt-bj-cw) * .9);
  aspect-ratio: 5 / 6;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(160deg, #3a3f4d, #14161d 70%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
  transform: rotate(8deg);
}
.qt-bj-shoe-card {
  position: absolute;
  left: 14%;
  right: 14%;
  top: -16%;
  height: 52%;
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 4px, transparent 4px 8px),
    color-mix(in srgb, var(--qt-accent, #3de08a) 55%, #0b1a14);
  border: 2px solid #f7f2e6;
}

/* ---------- rows ---------- */
.qt-bj-row--dealer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
.qt-bj-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, 2.6cqi, 14px);
}
.qt-bj-who {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: rgba(246, 241, 255, .72);
}
.qt-bj-pill {
  min-width: 2.4em;
  padding: .22em .75em;
  border-radius: 999px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: background-color .2s ease-out, color .2s ease-out;
}
.qt-bj-pill.is-bust { background: #d92d48; border-color: #ff8899; }
.qt-bj-pill.is-bj { background: linear-gradient(180deg, #ffe58a, var(--qt-gold, #ffcf4a)); color: #2c1d00; }

.qt-bj-ins {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  font-size: 12px;
  color: rgba(246, 241, 255, .8);
}
.qt-bj-ins:empty { display: none; }
.qt-bj-ins-win { color: var(--qt-ember, #ffa63d); font-weight: 800; }

.qt-bj-arc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
  padding-block: 2px;
}
.qt-bj-arc-main {
  font-weight: 900;
  font-size: clamp(13px, 3.2cqi, 22px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--qt-gold, #ffcf4a) 85%, #fff);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 18px rgba(255, 207, 74, .25);
}
.qt-bj-arc-sub {
  font-size: clamp(10px, 2.1cqi, 13px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246, 241, 255, .62);
}

.qt-bj-hands {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(10px, 4cqi, 48px);
}
.qt-bj-hands.is-split { --qt-bj-cw: clamp(44px, 10.5cqi, 84px); }

.qt-bj-hand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 4px;
  border-radius: 18px;
  transition: background-color .2s ease-out, box-shadow .2s ease-out;
}
.qt-bj-hand.is-active {
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 2px var(--qt-accent, #3de08a), 0 0 26px color-mix(in srgb, var(--qt-accent, #3de08a) 45%, transparent);
}
.qt-bj-hand.is-lose .qt-bj-cards,
.qt-bj-hand.is-bust .qt-bj-cards { opacity: .62; transition: opacity .3s ease-out; }

/* ---------- cards ---------- */
.qt-bj-cards {
  display: flex;
  justify-content: center;
  min-height: calc(var(--qt-bj-cw) * 1.4);
}
.qt-bj-card {
  position: relative;
  width: var(--qt-bj-cw);
  aspect-ratio: 5 / 7;
  flex: 0 0 auto;
  perspective: 800px;
}
.qt-bj-card + .qt-bj-card {
  margin-left: calc(var(--qt-bj-cw) * max(-.74, min(-.4, -.26 - .065 * var(--qt-bj-n, 2))));
}
.qt-bj-card-in {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .32s cubic-bezier(.2, .7, .3, 1);
}
.qt-bj-card.is-down .qt-bj-card-in { transform: rotateY(180deg); }
.qt-bj-face {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--qt-bj-cw) * .09);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.qt-bj-front {
  background: linear-gradient(160deg, #fffdf8 0%, #f3ede0 100%);
  border: 1px solid rgba(0, 0, 0, .12);
}
.qt-bj-front.is-red { color: #d4243e; }
.qt-bj-front.is-black { color: #1b1e2a; }
.qt-bj-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 1px;
}
.qt-bj-corner--tl { top: 6%; left: 7%; }
.qt-bj-corner--br { bottom: 6%; right: 7%; transform: rotate(180deg); }
.qt-bj-rank {
  font-weight: 900;
  font-size: calc(var(--qt-bj-cw) * .21);
  letter-spacing: -.04em;
}
.qt-bj-pip { width: calc(var(--qt-bj-cw) * .14); height: calc(var(--qt-bj-cw) * .14); fill: currentColor; }
.qt-bj-big {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 44%;
  transform: translate(-50%, -50%);
  fill: currentColor;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .12));
}
.qt-bj-big--ace { width: 58%; height: 58%; }
.qt-bj-court {
  position: absolute;
  inset: 15% 25%;
  border-radius: calc(var(--qt-bj-cw) * .06);
  border: 1.5px solid currentColor;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .8), transparent 70%),
    color-mix(in srgb, var(--qt-accent, #3de08a) 18%, #fdf6e6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2%;
}
.qt-bj-court-l {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: calc(var(--qt-bj-cw) * .4);
  line-height: .9;
}
.qt-bj-court-s { width: 36%; height: 26%; fill: currentColor; }
.qt-bj-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .14) 0 5px, transparent 5px 10px),
    color-mix(in srgb, var(--qt-accent, #3de08a) 50%, #0a1f16);
  border: calc(var(--qt-bj-cw) * .05) solid #f7f2e6;
  display: grid;
  place-items: center;
}
.qt-bj-back-mark {
  width: 46%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .7);
  font-weight: 900;
  font-size: calc(var(--qt-bj-cw) * .26);
  color: #fff;
  background: rgba(0, 0, 0, .2);
}

/* ---------- banners ---------- */
.qt-bj-banner {
  position: absolute;
  left: 50%;
  top: calc(8px + var(--qt-bj-cw) * .7);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .35em .9em;
  border-radius: 12px;
  font-weight: 900;
  font-size: clamp(14px, 3.4cqi, 22px);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  animation: qt-bj-pop .28s cubic-bezier(.2, .9, .3, 1.3) both;
}
.qt-bj-banner[hidden] { display: none; }
.qt-bj-banner-v { font-size: .62em; font-variant-numeric: tabular-nums; opacity: .9; }
.qt-bj-banner.is-win { background: linear-gradient(180deg, #ffd9a0, var(--qt-ember, #ffa63d)); color: #2a1200; }
.qt-bj-banner.is-bj {
  background: linear-gradient(180deg, #fff1b0, var(--qt-gold, #ffcf4a) 60%, #e8a512);
  color: #2b1800;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 30px rgba(255, 207, 74, .6);
}
.qt-bj-banner.is-push { background: linear-gradient(180deg, #e9e6f5, #b9b4cf); color: #1d1a2c; }
.qt-bj-banner.is-bust { background: linear-gradient(180deg, #ff6f84, #d4243e); color: #fff; }
.qt-bj-banner.is-lose { background: rgba(14, 10, 22, .86); color: rgba(246, 241, 255, .85); border: 1px solid rgba(255, 255, 255, .16); }

@keyframes qt-bj-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- chip spot ---------- */
.qt-bj-spot {
  --qt-bj-chip: clamp(32px, 7.2cqi, 46px);
  width: calc(var(--qt-bj-chip) * 1.5);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .28);
  display: grid;
  place-items: center;
}
.qt-bj-chips { position: relative; width: var(--qt-bj-chip); height: var(--qt-bj-chip); }
.qt-bj-chips .qt-bj-chip {
  position: absolute;
  inset: 0;
  transform: translateY(calc(var(--qt-bj-i, 0) * -5px));
}
.qt-bj-chips .qt-bj-chip.is-stacked { animation: qt-bj-drop .24s ease-out both; }
@keyframes qt-bj-drop {
  from { opacity: 0; transform: translateY(calc(var(--qt-bj-i, 0) * -5px - 18px)); }
}
.qt-bj-chip {
  --qt-bj-c: #3d7bff;
  width: var(--qt-bj-chip, 36px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: repeating-conic-gradient(from 8deg, var(--qt-bj-c) 0 22deg, #f6f0e2 22deg 30deg);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 6px 10px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(0, 0, 0, .18);
}
.qt-bj-ins .qt-bj-chip { --qt-bj-chip: 28px; }
.qt-bj-chip-v {
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px dashed rgba(255, 255, 255, .7);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--qt-bj-c) 55%, #fff), var(--qt-bj-c) 70%);
  color: #fff;
  font-weight: 900;
  font-size: calc(var(--qt-bj-chip, 36px) * .3);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
.qt-bj-chip-v.is-long { font-size: calc(var(--qt-bj-chip, 36px) * .22); }
.qt-bj-chip--blue { --qt-bj-c: #3d7bff; }
.qt-bj-chip--red { --qt-bj-c: #e8344f; }
.qt-bj-chip--green { --qt-bj-c: #17a874; }
.qt-bj-chip--violet { --qt-bj-c: #8a5cff; }
.qt-bj-chip--orange { --qt-bj-c: #f28a1a; }
.qt-bj-chip--gold { --qt-bj-c: #d9a910; }
.qt-bj-chip--onyx { --qt-bj-c: #23262f; }
.qt-bj-chip--onyx .qt-bj-chip-v { color: var(--qt-gold, #ffcf4a); }

/* ---------- status + controls ---------- */
.qt-bj-status {
  margin: 0;
  align-self: center;
  max-width: 100%;
  padding: .5em 1.1em;
  border-radius: 999px;
  background: var(--qt-panel, rgba(16, 10, 30, .72));
  border: 1px solid var(--qt-line, rgba(255, 255, 255, .12));
  font-size: clamp(13px, 2.8cqi, 15px);
  text-align: center;
  backdrop-filter: blur(8px);
}

.qt-bj-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 58px;
}
.qt-bj-actions,
.qt-bj-insbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 1.8cqi, 12px);
  width: 100%;
}
.qt-bj-actions[hidden],
.qt-bj-insbar[hidden],
.qt-bj-btn[hidden] { display: none; }
.qt-bj-insbar-q {
  flex-basis: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}

.qt-bj-btn {
  --qt-bj-b: var(--qt-accent, #3de08a);
  --qt-bj-t: #06150e;
  appearance: none;
  border: 0;
  cursor: pointer;
  min-height: 52px;
  min-width: clamp(74px, 20cqi, 132px);
  padding: 0 clamp(12px, 3cqi, 26px);
  border-radius: 16px;
  font: inherit;
  font-weight: 900;
  font-size: clamp(15px, 3.4cqi, 18px);
  letter-spacing: .02em;
  color: var(--qt-bj-t);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 52%),
    var(--qt-bj-b);
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 6px 18px color-mix(in srgb, var(--qt-bj-b) 45%, transparent);
  transition: transform .14s ease-out, opacity .2s ease-out, box-shadow .2s ease-out, filter .2s ease-out;
}
.qt-bj-btn:hover:not(:disabled) { filter: brightness(1.08); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 26px color-mix(in srgb, var(--qt-bj-b) 65%, transparent); }
.qt-bj-btn:active:not(:disabled) { transform: translateY(2px) scale(.98); }
.qt-bj-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.qt-bj-btn:disabled { opacity: .38; cursor: default; box-shadow: none; }
.qt-bj-btn--stand { --qt-bj-b: var(--qt-pink, #ff4fa8); --qt-bj-t: #2a0016; }
.qt-bj-btn--double { --qt-bj-b: var(--qt-gold, #ffcf4a); --qt-bj-t: #2a1a00; }
.qt-bj-btn--split { --qt-bj-b: #9d7bff; --qt-bj-t: #12062d; }
.qt-bj-btn--no { --qt-bj-b: #c9c3dd; --qt-bj-t: #1b1730; }
.qt-bj-btn--yes { --qt-bj-b: var(--qt-gold, #ffcf4a); --qt-bj-t: #2a1a00; }
.qt-bj-btn--deal {
  --qt-bj-b: var(--qt-ember, #ffa63d);
  --qt-bj-t: #2a1200;
  min-width: min(100%, 260px);
  min-height: 58px;
  font-size: clamp(18px, 4cqi, 22px);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
}

@container (max-width: 520px) {
  .qt-bj-actions .qt-bj-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; }
  .qt-bj-arc-sub { max-width: 30ch; }
  .qt-bj-felt {
    --qt-bj-cw: clamp(58px, 19cqi, 92px);
    min-height: 420px;
    border-radius: 26px 26px 120px 120px / 26px 26px 60px 60px;
  }
  .qt-bj-felt::before { top: 30%; width: 190%; }
  .qt-bj-hands.is-split { --qt-bj-cw: clamp(44px, 13cqi, 72px); gap: 6px; }
  .qt-bj-shoe { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .qt-bj *,
  .qt-bj *::before,
  .qt-bj *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}