/* Blackjack (#/blackjack) */
.bj-page .game-stage { padding: 20px; }
/* Let the 1fr grid track shrink below the bet field's intrinsic width on phones */
.bj-page .game-controls, .bj-page .game-stage { min-width: 0; }
.bj-page { --cw: clamp(50px, 8.2vw, 80px); } /* card width; height = 1.4x */

/* ------------------------------------------------------------------ controls */
.bj-page .bet-input .input:disabled { opacity: .6; cursor: not-allowed; }
.bj-actions { display: flex; flex-direction: column; gap: 8px; }
.bj-deal { width: 100%; }
.bj-deal[hidden] { display: none; }
.bj-deal[aria-busy="true"] { opacity: .8; cursor: progress; }
.bj-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bj-moves[hidden] { display: none; }
.bj-move {
  height: 46px; border: 0; border-radius: 11px; font-weight: 700; font-size: 15px; color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 6px 16px -10px rgba(0, 0, 0, .8);
  transition: filter .15s, transform .1s, opacity .15s;
}
.bj-move:not(:disabled):hover { filter: brightness(1.12); }
.bj-move:not(:disabled):active { transform: translateY(1px); }
.bj-move:disabled { opacity: .38; cursor: not-allowed; filter: saturate(.4); }
.bj-hit { background: linear-gradient(180deg, #2fbf83, #17905d); }
.bj-stand { background: linear-gradient(180deg, #f05252, #c22e2e); }
.bj-double { background: linear-gradient(180deg, #f3c55a, var(--gold)); color: #231703; }
.bj-split { background: linear-gradient(180deg, #6a83ff, #3f57d6); }
.bj-stats { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.bj-proof { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }

/* ------------------------------------------------------------------ table */
.bj-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bj-table {
  position: relative; width: 100%; max-width: 760px; min-height: 470px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px;
  padding: 22px 18px 34px; border: 10px solid #3a2116;
  border-radius: 26px 26px 48% 48% / 26px 26px 24% 24%;
  background:
    radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.2px) 0 0 / 5px 5px,
    radial-gradient(ellipse 90% 75% at 50% 32%, #1f8a59 0%, #14683f 48%, #0b452a 100%);
  box-shadow:
    0 0 0 2px #6e4527, 0 22px 50px -18px rgba(0, 0, 0, .8),
    inset 0 0 0 2px rgba(228, 174, 57, .32), inset 0 14px 60px rgba(0, 0, 0, .5);
  transition: box-shadow .4s;
}
.bj-table.is-win { box-shadow: 0 0 0 2px #6e4527, 0 0 60px -14px rgba(52, 211, 153, .55), inset 0 0 0 2px rgba(52, 211, 153, .5), inset 0 14px 60px rgba(0, 0, 0, .5); }
.bj-table.is-loss { box-shadow: 0 0 0 2px #6e4527, 0 0 60px -18px rgba(239, 59, 59, .5), inset 0 0 0 2px rgba(239, 59, 59, .4), inset 0 14px 60px rgba(0, 0, 0, .5); }

.bj-shoe {
  position: absolute; top: 14px; right: 16px; width: calc(var(--cw) * .82); height: calc(var(--cw) * 1.05);
  border-radius: 8px 8px 6px 6px; background: linear-gradient(180deg, #2a1a12, #140c08);
  box-shadow: inset 0 0 0 1px rgba(228, 174, 57, .35), 0 8px 18px rgba(0, 0, 0, .45); transform: rotate(8deg);
}
.bj-shoe span {
  position: absolute; left: 12%; right: 12%; top: -10%; height: 55%; border-radius: 5px;
  background: repeating-linear-gradient(45deg, #b3262b 0 4px, #8f1b20 4px 8px); border: 2px solid #f4ede4;
}

.bj-seat { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.bj-player { flex-direction: row; justify-content: center; gap: clamp(14px, 4vw, 40px); width: 100%; }
.bj-hand { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 14px; border: 1px solid transparent; transition: border-color .25s, background .25s, opacity .3s; }
.bj-hand.is-active { border-color: rgba(243, 197, 90, .7); background: rgba(0, 0, 0, .14); box-shadow: 0 0 26px -8px rgba(243, 197, 90, .55); }
.bj-player.is-split .bj-hand:not(.is-active) { opacity: .82; }
.bj-hand.is-out .bj-cards { filter: saturate(.55) brightness(.8); }
.bj-player.is-splitting .bj-hand { animation: bj-split .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.bj-player.is-splitting .bj-hand:first-child { --sx: 40%; }
.bj-player.is-splitting .bj-hand:last-child { --sx: -40%; }

.bj-hand-head { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.bj-hand-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .72); }
.bj-total {
  min-width: 34px; padding: 2px 9px; border-radius: 999px; text-align: center; font-weight: 800; font-size: 14px;
  background: rgba(0, 0, 0, .45); color: #fff; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.bj-total:empty { display: none; }
.bj-total.is-bust { background: rgba(239, 59, 59, .85); }
.bj-hand-foot { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 13px; }
.bj-stake .price { font-weight: 700; }
.bj-stake small { color: var(--gold); font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; }
.bj-badge { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.bj-badge:empty { display: none; }
.bj-badge.is-blackjack { background: linear-gradient(180deg, #f3c55a, var(--gold)); color: #231703; }
.bj-badge.is-win { background: var(--green); color: #052b1c; }
.bj-badge.is-push { background: rgba(255, 255, 255, .2); color: #fff; }
.bj-badge.is-lose, .bj-badge.is-bust { background: rgba(239, 59, 59, .9); color: #fff; }

/* cards */
.bj-cards { display: flex; justify-content: center; min-height: calc(var(--cw) * 1.4); padding: 0 4px; }
.bj-cards:empty::before {
  content: ''; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: 8px;
  border: 2px dashed rgba(255, 255, 255, .16);
}
.bj-card { position: relative; flex: none; width: var(--cw); height: calc(var(--cw) * 1.4); perspective: 800px; }
.bj-card + .bj-card { margin-left: calc(var(--cw) * -.52); }
.bj-player.is-split .bj-card + .bj-card { margin-left: calc(var(--cw) * -.6); }
.bj-card.is-dealt { animation: bj-deal .46s cubic-bezier(.2, .9, .3, 1.05) both; }
.bj-card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); }
.bj-card.is-down .bj-card-inner { transform: rotateY(180deg); }
.bj-face {
  position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .35);
}
.bj-front { background: linear-gradient(160deg, #ffffff, #efe9e1); color: #16181d; border: 1px solid #d8d0c4; }
.bj-card.is-red .bj-front { color: #d22d36; }
.bj-back {
  transform: rotateY(180deg); border: calc(var(--cw) * .06) solid #f4ede4;
  background:
    radial-gradient(circle at 50% 50%, rgba(243, 197, 90, .55) 0 12%, transparent 13%),
    repeating-linear-gradient(45deg, #b3262b 0 5px, #8f1b20 5px 10px);
}
.bj-corner {
  position: absolute; top: 5%; left: 8%; display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-family: var(--display); font-size: calc(var(--cw) * .25);
}
.bj-corner b { font-weight: 400; letter-spacing: -.04em; }
.bj-corner i { font-style: normal; font-size: .82em; margin-top: 1px; }
.bj-corner-b { top: auto; left: auto; bottom: 5%; right: 8%; transform: rotate(180deg); }
.bj-pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .56); line-height: 1; }

/* felt print */
.bj-felt-text { display: flex; flex-direction: column; align-items: center; width: min(100%, 520px); pointer-events: none; margin: -6px 0; }
.bj-arc { width: 100%; height: auto; overflow: visible; }
.bj-arc text { fill: rgba(243, 197, 90, .78); font-family: var(--display); font-size: 25px; letter-spacing: .14em; text-transform: uppercase; }
.bj-felt-text small { margin-top: -6px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }

/* result */
.bj-result { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.bj-result:empty { display: none; }
.bj-result-card {
  pointer-events: auto; cursor: pointer; min-width: 180px; text-align: center; padding: 14px 28px 16px; border-radius: 16px;
  background: rgba(14, 10, 11, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 2px solid var(--line2); box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
  animation: bj-card .5s cubic-bezier(.2, 1.45, .4, 1) both;
}
.bj-result-card small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.bj-result-card b { display: block; font-family: var(--display); font-weight: 400; font-size: 38px; line-height: 1.15; }
.bj-result-card > span { display: block; margin-top: 2px; font-size: 17px; font-weight: 700; }
.bj-result-card.is-win { border-color: var(--green); box-shadow: 0 0 60px -6px rgba(52, 211, 153, .45), 0 24px 50px rgba(0, 0, 0, .55); }
.bj-result-card.is-win b { color: var(--green); text-shadow: 0 0 24px rgba(52, 211, 153, .45); }
.bj-result-card.is-push b { color: var(--text); }
.bj-result-card.is-loss { border-color: rgba(239, 59, 59, .7); }
.bj-result-card.is-loss small { font-size: 13px; color: var(--accent-hi); }
.bj-result-card.is-loss > span { color: var(--muted); }

.bj-status { margin: 0; min-height: 21px; text-align: center; font-size: 14px; color: var(--muted); }
.bj-status.is-win { color: var(--green); font-weight: 600; }
.bj-status.is-loss { color: var(--accent-hi); font-weight: 600; }

/* how to play */
.bj-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.bj-how .panel { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.bj-how .panel > b {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(239, 59, 59, .14); color: var(--accent-hi); font-family: var(--display); font-weight: 400;
}
.bj-how h3 { font-size: 15px; margin-bottom: 2px; }
.bj-how p { margin: 0; font-size: 13px; }

/* ------------------------------------------------------------------ keyframes */
@keyframes bj-deal {
  from { transform: translate(var(--dx, 0), var(--dy, -120px)) rotate(-16deg) scale(.8); opacity: .2; }
  35% { opacity: 1; }
}
@keyframes bj-split { from { transform: translateX(var(--sx, 0)); } }
@keyframes bj-card { from { transform: scale(.6) translateY(10px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bj-card-inner { transition-duration: .01ms; }
  .bj-card.is-dealt, .bj-player.is-splitting .bj-hand, .bj-result-card { animation: none; }
}

/* ------------------------------------------------------------------ small screens */
@media (max-width: 900px) {
  .bj-actions { order: -1; } /* Deal / moves right under the table */
  .bj-how { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .bj-page { --cw: clamp(44px, 14vw, 58px); }
  .bj-page .game-stage { padding: 10px; }
  .bj-table { min-height: 400px; padding: 16px 8px 30px; border-width: 7px; border-radius: 20px 20px 44% 44% / 20px 20px 18% 18%; }
  .bj-player.is-split { gap: 6px; }
  .bj-player.is-split { --cw: clamp(38px, 11.5vw, 50px); }
  .bj-hand { padding: 6px 4px; }
  .bj-shoe { top: 10px; right: 10px; }
  .bj-arc text { font-size: 30px; }
  .bj-felt-text small { margin-top: -2px; font-size: 10px; letter-spacing: .1em; }
  .bj-result-card { min-width: 150px; padding: 12px 20px 14px; }
  .bj-result-card b { font-size: 30px; }
}