/* Dealer Box · Blackjack. Builds on style.css (colors, 3D cards, chips, characters .ch, .btn, .plate, .console).
   A classic half-moon table seen from the player side: dealer behind the straight edge, five seats around the arc.
   Phones first: the table switches shape under 560px of width (container query). */
.top a.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.top a.brand .tc { width: 26px; height: 26px; }
.bj { max-width: 1040px; margin: 0 auto; padding-block: 10px 48px; display: grid; gap: 14px; min-width: 0; }
:root { --f-print: "Playfair Display", Georgia, "Times New Roman", serif; --gold-print: rgba(240, 220, 160, .26); }

/* ================================================================ lobby */
.bj-lobby { gap: 18px; padding-top: 6px; }
.bj-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; padding-top: 14px; }
.bj-hero h2 { font-size: clamp(40px, 8.4vw, 76px); font-weight: 900; line-height: .9; text-transform: uppercase; margin-top: 12px; }
.bj-hero h2 em { font-style: normal; color: var(--brass); display: block; }
.bj-hero .lead { color: var(--muted); font-size: 17px; max-width: 46ch; margin-top: 14px; }
.bj-hero .eyebrow .tc { font-size: 18px; }
/* the little table in the hero */
.bj-mini { container-type: inline-size; width: min(100%, 460px); justify-self: center; filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)); }
.bj-mini .r { padding: 2.4% 4% 4%; border-radius: 14px 14px 50% 50% / 14px 14px 100% 100%; background: radial-gradient(ellipse at 50% 20%, #5a3826, var(--rail) 70%, #140c08); box-shadow: inset 0 3px 2px rgba(255,230,200,.16), 0 0 0 1px #000; }
.bj-mini .f { position: relative; aspect-ratio: 2.1; border-radius: 6px 6px 50% 50% / 6px 6px 100% 100%; overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(255,214,150,.2), transparent 70%), radial-gradient(ellipse at 50% 30%, var(--felt-hi), var(--felt) 50%, var(--felt-dark)); box-shadow: inset 0 0 0 4px #7b4a26, inset 0 0 0 6px #3b2214, inset 0 0 40px rgba(0,0,0,.5); }
.bj-mini .pr { position: absolute; inset: 0; width: 100%; height: 100%; }
.bj-mini .pr text { fill: var(--gold-print); font-family: var(--f-print); font-weight: 800; letter-spacing: .14em; }
.bj-mini .cs { position: absolute; left: 50%; top: 29%; transform: translate(-50%, -50%); display: flex; }
.bj-mini .cs .card { --w: clamp(30px, 11.5cqi, 52px); }
.bj-mini .cs .card + .card { margin-left: calc(var(--w) * -.42); margin-top: -8%; }
.bj-mini .bjt { position: absolute; left: 50%; top: 81%; transform: translateX(-50%); font: 900 clamp(11px, 3.4cqi, 16px) var(--f-display); letter-spacing: .14em; text-transform: uppercase; padding: 2px 12px; border-radius: 99px; background: linear-gradient(180deg, #ffe7a3, #e0b866 60%, #b8892f); color: #2a1b04; box-shadow: 0 0 18px rgba(240,208,143,.6); animation: bj-glow 2.4s ease-in-out infinite; }
.bj-mini .ring { position: absolute; left: 80%; top: 16%; width: 15cqi; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--gold-print); display: grid; place-items: center; --cw: 4.6cqi; }
@keyframes bj-glow { 50% { box-shadow: 0 0 28px rgba(240,208,143,.95); } }

.bj-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bj-mode { cursor: pointer; color: inherit; font: inherit; align-content: start; gap: 8px; }
.bj-mode.main { border-color: #a9853e; background: radial-gradient(ellipse at 80% 0%, rgba(240,208,143,.22), transparent 60%), linear-gradient(180deg, #33290f, #1c180d); }
.bj-mode.main h4 { color: var(--brass-hi); }
.bj-mode .ic svg { width: 22px; height: 22px; stroke: var(--brass); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bj-mode .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-2); }
.bj-mode p b { color: var(--brass-hi); }
.bj-joincard { display: grid; cursor: default; }
.bj-joincard .row { display: flex; gap: 8px; }
.bj-joincard input { flex: 1; min-width: 0; }
.bj-lgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 14px; align-items: start; }
.bj-lgrid .bj-you { grid-column: 1; grid-row: 1; }
.bj-lgrid .bj-rules { grid-column: 1; grid-row: 2; }
.bj-lgrid .bj-modepick { grid-column: 2; grid-row: 1 / span 2; }
.bj-you .row { display: flex; gap: 10px; align-items: center; }
.bj-you .input { flex: 1; min-width: 0; }
.bj-me { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid var(--brass); background: radial-gradient(circle at 50% 35%, #2d6e52, #123327); }
.bj-me svg { width: 100%; height: 100%; display: block; }
.bj-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bj-opt { position: relative; overflow: hidden; min-height: 112px; padding-right: 92px; }
.bj-opt .pic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; }
.bj-opt .pic .card { --w: 34px; }
.bj-opt .pic .card + .card { margin-left: -16px; margin-top: 10px; }
.bj-opt.crazy .pic .wh { width: 38px; height: 38px; border-radius: 50%; margin-right: -12px; border: 2px solid var(--brass); background: conic-gradient(#6b3fa0 0 25%, #1d1d21 0 50%, #b02a24 0 75%, #1f7a46 0); animation: bj-turn 6s linear infinite; }
.bj-opt.crazy.on { border-color: #b88ae0; background: radial-gradient(ellipse at 100% 0, rgba(140,90,214,.28), transparent 60%), #241a30; box-shadow: inset 0 0 0 1px #b88ae0; }
@keyframes bj-turn { to { rotate: 360deg; } }
.bj-rgrid { display: grid; gap: 12px; padding-top: 4px; }
.bj-rrow { display: grid; gap: 6px; }
.bj-rules > summary { white-space: nowrap; }
.bj-rules summary .hint { margin-left: auto; font-family: var(--f-body); font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bj-warn { background: var(--warn-bg); border: 1px solid #7a6025; border-radius: 10px; padding: 8px 12px; font-size: 14px; color: #ffe2a1; }
.bj-crazy { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.bj-cz { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); font-size: 13px; color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s; }
.bj-cz b { display: block; font: 800 17px var(--f-display); color: var(--ink); }
.bj-cz input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--brass); flex: none; order: 3; margin-left: auto; }
.bj-cz .ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-2); }
.bj-cz .ic svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bj-cz:has(input:checked) { border-color: #a9853e; background: #2b2414; }
.bj-cz:has(input:checked) .ic svg { stroke: var(--brass-hi); }
@media (max-width: 760px) {
  .bj-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bj-mini { width: min(100%, 360px); }
  .bj-start { grid-template-columns: minmax(0, 1fr); }
  .bj-lgrid { grid-template-columns: minmax(0, 1fr); }
  .bj-lgrid > * { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width: 460px) { .bj-duo { grid-template-columns: minmax(0, 1fr); } .bj-opt { min-height: 92px; } }

/* ================================================================ the table */
.bj-table { container-type: inline-size; min-width: 0; overflow-x: clip; --chw: 92px; --bw: 48px; --bw-s: 38px; --dw: 52px; }
.bj-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 4px; }
.bj-badge { display: inline-flex; align-items: center; gap: 6px; font: 800 12px var(--f-display); letter-spacing: .06em; text-transform: uppercase; padding: 3px 11px; border-radius: 99px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.16); color: #e8f2ec; }
.bj-badge small { font-weight: 600; opacity: .7; letter-spacing: .02em; }
.bj-badge.gold { background: linear-gradient(180deg, #4a3812, #2b2108); border-color: #a9853e; color: var(--brass-hi); }
.bj-badge.wild { background: linear-gradient(180deg, #4a3812, #2b2108); border-color: var(--brass); color: var(--brass-hi); box-shadow: 0 0 14px rgba(240,208,143,.35); }
.bj-badge.wild .mini { min-width: 17px; height: 22px; display: grid; place-items: center; border-radius: 3px; background: #fdfcf7; color: #16181a; font: 900 13px var(--f-display); box-shadow: 0 0 0 1.5px var(--brass), 0 0 10px rgba(240,208,143,.9); animation: bj-wild 1.8s ease-in-out infinite; }
.bj-badge.spin { background: linear-gradient(180deg, #3b1f4f, #24122f); border-color: #8a5bb5; color: #f0dcff; }
.bj-badge.spin .wh { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--brass); background: conic-gradient(#6b3fa0 0 25%, #1d1d21 0 50%, #b02a24 0 75%, #1f7a46 0); animation: bj-turn 3s linear infinite; }
.bj-badge.vote { background: linear-gradient(180deg, #1f3a5c, #12233a); border-color: var(--info); color: #dbe8ff; animation: pop2 .3s ease-out; }

.bj-stage { position: relative; padding: calc(var(--chw) * .5) 0 calc(var(--chw) * .66); perspective: 1500px; perspective-origin: 50% 0; }
/* Padded leather rail (stitched), only around the arc: the dealer side is a straight wooden edge */
.bj-rail {
  position: relative; width: 100%; margin-inline: auto; transform: rotateX(9deg); transform-origin: 50% 0;
  padding: 7px 2.7% 2.7%; border-radius: 14px 14px 50% 50% / 14px 14px 100% 100%;
  background:
    radial-gradient(ellipse 55% 26% at 50% 100%, rgba(255, 232, 200, .14), transparent 70%),
    radial-gradient(ellipse 50% 100% at 50% 0, transparent 0 88%, rgba(255, 225, 190, .14) 93%, rgba(0, 0, 0, .3) 99%),
    radial-gradient(ellipse at 50% 30%, var(--rail-hi), var(--rail) 70%, #140c08 100%);
  box-shadow: 0 40px 70px rgba(0,0,0,.7), 0 12px 22px rgba(0,0,0,.45), 0 0 0 1px #000, inset 0 3px 2px rgba(255, 230, 200, .16), inset 0 -12px 20px rgba(0, 0, 0, .6);
}
.bj-rail::before { content: ""; position: absolute; inset: 7px 1.1% 1.1%; border-radius: 10px 10px 50% 50% / 10px 10px 100% 100%; border: 1.5px dashed rgba(255, 228, 196, .24); border-top: 0; pointer-events: none; }
/* Polished wood racetrack */
.bj-wood {
  padding: 1.15%; border-radius: 9px 9px 50% 50% / 9px 9px 100% 100%;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0, transparent 0 95%, rgba(255, 220, 170, .32) 97.5%, transparent 99.6%),
    repeating-linear-gradient(97deg, rgba(0, 0, 0, .09) 0 2px, transparent 2px 6px, rgba(255, 220, 180, .05) 6px 7px, transparent 7px 11px),
    linear-gradient(135deg, var(--wood-hi), var(--wood) 40%, #4a2a15 70%, var(--wood-hi));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 2px 3px rgba(255, 220, 180, .28), 0 0 0 2px rgba(0,0,0,.35);
}
/* Felt: half an ellipse. Everything on it is placed in % of this box (blackjack.js: at()). */
.bj-felt {
  position: relative; aspect-ratio: 2.05; border-radius: 4px 4px 50% 50% / 4px 4px 100% 100%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 90% at 50% 18%, var(--felt-hi) 0%, var(--felt) 50%, var(--felt-dark) 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 6px 14px rgba(0,0,0,.45);
}
.bj-felt::before { /* cloth weave, warm lamp over the dealer, vignette */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 64% at 50% 26%, rgba(255, 214, 150, .19), rgba(255, 214, 150, .05) 55%, transparent 76%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 70px 14px rgba(0, 0, 0, .45);
}
.bj-felt > * { position: absolute; }
.bj-print { inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.bj-pr { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bj-pr.pn { display: none; }
.bj-pr text { fill: var(--gold-print); font-family: var(--f-print); }
.bj-pr .m { font-weight: 800; letter-spacing: .16em; fill: rgba(240, 220, 160, .3); }
.bj-pr .r { font-style: italic; font-weight: 500; letter-spacing: .04em; }
.bj-pr .b { font-family: var(--f-display); font-weight: 800; letter-spacing: .3em; fill: rgba(240, 220, 160, .36); }
.bj-pr .band { fill: none; stroke: rgba(240, 220, 160, .055); }
.bj-pr .bl { fill: none; stroke: rgba(240, 220, 160, .26); stroke-width: 2; }

/* ---- dealer side: character behind the rack, shoe on the dealer's left, discards on the right */
.bj-dealer.dealer-seat { position: absolute; left: 50%; top: 0; width: calc(var(--chw) * 1.1); height: calc(var(--chw) * 1.1); transform: translate(-50%, -76%); z-index: 6; }
.bj-dealer .cup { display: none; }
.bj-rack { left: 50%; top: 0; transform: translate(-50%, -18%); z-index: 5; }
.bj-rack .rack .slot { width: 13px; height: 24px; }
.bj-dhand { left: 50%; top: 10.5%; transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; z-index: 4; }
.bj-shoe { right: 5.5%; top: 3.2%; z-index: 4; display: flex; align-items: center; rotate: -10deg; }
.bj-shoe .box { position: relative; width: 74px; height: 30px; border-radius: 5px 9px 9px 5px; background: linear-gradient(180deg, #43484e, #1a1d20 60%, #0e1012); border: 1px solid #000; box-shadow: 0 7px 12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2); overflow: hidden; }
.bj-shoe .box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 45%); pointer-events: none; }
.bj-shoe .deck { position: absolute; right: 4px; top: 4px; bottom: 4px; width: calc(var(--p) * .88); border-radius: 2px; background: repeating-linear-gradient(90deg, #f3ede0 0 1.4px, #b5392f 1.4px 2.3px); box-shadow: inset 0 0 4px rgba(0,0,0,.4); }
.bj-shoe .cut { position: absolute; top: 2px; bottom: 2px; right: calc(4px + 22%); width: 3px; border-radius: 1px; background: #ffd84a; box-shadow: 0 0 5px rgba(255, 216, 74, .8); }
.bj-shoe .cut.out { right: auto; left: 3px; background: #ff5b4a; box-shadow: 0 0 8px #ff5b4a; animation: bj-blink 1s steps(2) infinite; }
.bj-shoe .mouth { --w: 20px; order: -1; margin-right: -9px; rotate: 90deg; z-index: 1; }
.bj-discard { left: 5.5%; top: 3.5%; z-index: 4; rotate: 9deg; }
.bj-discard .pile { position: relative; display: block; width: 50px; height: 36px; border-radius: 6px; background: linear-gradient(180deg, rgba(200, 230, 255, .14), rgba(200, 230, 255, .05)); border: 1px solid rgba(210, 235, 255, .3); box-shadow: inset 0 0 10px rgba(200, 230, 255, .12), 0 5px 9px rgba(0,0,0,.45); }
.bj-discard .back { --w: 24px; position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: 90deg; opacity: calc(var(--d) * 8); box-shadow: calc(var(--d) * 7px) 0 0 #cfc7b4, calc(var(--d) * 7px + 1px) 0 2px rgba(0,0,0,.5); }
.bj-limits { left: 17%; top: 3%; z-index: 4; display: grid; justify-items: center; padding: 3px 8px 4px; border-radius: 6px; line-height: 1.05; background: linear-gradient(180deg, #1c2421, #0b100e); border: 1px solid #a9853e; box-shadow: 0 4px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1); rotate: 6deg; }
.bj-limits small { font: 700 8px var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.bj-limits b { font: 900 14px var(--f-display); color: var(--brass-hi); }
@keyframes bj-blink { 50% { opacity: .3; } }

/* ---- cards on the felt: overlapped, climbing a little, like a dealer lays them */
.bj-cards { display: flex; align-items: flex-end; --sp: .5; }
.bj-cards > * { --w: var(--bw); }
.bj-cards.dealer > * { --w: var(--dw); }
.bj-cards > .back { height: calc(var(--w) * 1.4); rotate: var(--tilt, 0deg); }
.bj-cards > * + * { margin-left: calc(var(--w) * (var(--sp) - 1)); }
.bj-cards > :nth-child(2) { margin-bottom: calc(var(--w) * .08); }
.bj-cards > :nth-child(3) { margin-bottom: calc(var(--w) * .16); }
.bj-cards > :nth-child(4) { margin-bottom: calc(var(--w) * .24); }
.bj-cards > :nth-child(5) { margin-bottom: calc(var(--w) * .32); }
.bj-cards > :nth-child(n+6) { margin-bottom: calc(var(--w) * .4); }
.bj-cards.dealer > * { margin-bottom: 0 !important; }
.card.flip { animation-delay: 0s; }
/* Comodín: the wild rank glows gold */
.card.wild { box-shadow: 0 1px 0 #ddd7c7, 0 2px 0 #c2bba9, 0 0 0 2px var(--brass), 0 0 16px 3px rgba(240,208,143,.8); animation: bj-wild 1.8s ease-in-out infinite; }
.card.wild::before { content: "★"; position: absolute; right: 6%; top: 4%; font-size: calc(var(--w) * .26); color: #c99a2e; backface-visibility: hidden; }
@keyframes bj-wild { 50% { box-shadow: 0 1px 0 #ddd7c7, 0 2px 0 #c2bba9, 0 0 0 2px #ffe7a3, 0 0 26px 6px rgba(255,214,120,.95); } }

.bj-hands { transform: translate(-50%, -54%); display: flex; gap: 8px; align-items: flex-end; z-index: 3; }
.bj-hands.on { z-index: 5; }
.bj-hand { display: grid; justify-items: center; gap: 3px; position: relative; }
.bj-hand.on .bj-cards { filter: drop-shadow(0 0 7px rgba(255, 220, 140, .85)); }
.bj-hand.on::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 7px; height: 7px; translate: -50% 0; border-radius: 50%; background: var(--brass-hi); box-shadow: 0 0 8px var(--brass); animation: bj-blink 1.2s ease-in-out infinite; }
.bj-hands.n2, .bj-hands.n3, .bj-hands.n4 { --bw: calc(var(--bw-s, 36px)); gap: 5px; }

/* ---- totals: elegant pills */
.bj-tot {
  font: 800 14px/1 var(--f-display); letter-spacing: .03em; padding: 4px 10px 3px; border-radius: 99px; color: #f6efe1; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, rgba(28, 34, 31, .94), rgba(6, 9, 8, .94)); border: 1px solid rgba(240, 208, 143, .32);
  box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
.bj-tot small { font-size: .78em; opacity: .55; margin: 0 1px; font-weight: 700; }
.bj-tot.t21 { color: #ffe7a3; border-color: var(--brass); box-shadow: 0 0 12px rgba(240,208,143,.5); }
.bj-tot.bj { background: linear-gradient(180deg, #ffeab0, #e0b866 60%, #b8892f); color: #2a1b04; border-color: #fff1c4; box-shadow: 0 0 16px rgba(240,208,143,.75), inset 0 1px 0 rgba(255,255,255,.6); letter-spacing: .12em; }
.bj-tot.bust { background: linear-gradient(180deg, #7d2721, #43120f); color: #ffd5cf; border-color: #ff7b6b; }
.bj-tot.wild { color: #f6e3ff; border-color: #b88ae0; box-shadow: 0 0 12px rgba(184,138,224,.5); }
.bj-tot.wild::before { content: "★"; color: var(--brass-hi); margin-right: 3px; font-size: .85em; }
.bj-tot.big { font-size: 22px; padding: 5px 14px 4px; }
.bj-hb { font: 700 11px var(--f-display); color: rgba(255,255,255,.78); background: rgba(0,0,0,.35); border-radius: 99px; padding: 0 6px; }
.bj-res { font: 900 11px/1.5 var(--f-display); letter-spacing: .1em; text-transform: uppercase; border-radius: 4px; padding: 0 7px; white-space: nowrap; animation: bj-ribbon .4s cubic-bezier(.3,1.5,.5,1) both; box-shadow: 0 3px 8px rgba(0,0,0,.45); }
.bj-res.win, .bj-res.even { background: linear-gradient(180deg, #7ee8a8, var(--good)); color: #0e2a1a; }
.bj-res.bj { background: linear-gradient(180deg, #ffeab0, var(--brass)); color: var(--brass-ink); }
.bj-res.push { background: #cfd6d2; color: #1b201e; }
.bj-res.lose, .bj-res.bust { background: #5a2520; color: #ffd5cf; }
.bj-res.boom, .bj-res.sur { background: var(--warn); color: #2a1d02; }
.bj-hand.r-lose .bj-cards, .bj-hand.r-bust .bj-cards { filter: saturate(.6) brightness(.82); }
@keyframes bj-ribbon { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }

/* ---- betting circles and the insurance chip */
.bj-spot {
  width: calc(var(--chw) * .74); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; place-items: center;
  border: 2px solid rgba(240, 220, 160, .34); box-shadow: inset 0 0 0 4px rgba(0,0,0,.06), inset 0 0 0 5.5px rgba(240, 220, 160, .14), 0 0 0 1px rgba(0,0,0,.15);
  background: radial-gradient(circle, rgba(0,0,0,.08), transparent 70%); transition: border-color .2s, box-shadow .2s;
}
.bj-spot i { font: 900 calc(var(--chw) * .26) var(--f-print); font-style: normal; color: rgba(240, 220, 160, .2); }
.bj-spot .stacks { --cw: calc(var(--chw) * .27); margin-top: -12%; gap: 0; }
.bj-spot b { position: absolute; bottom: -10px; font: 800 12px var(--f-display); background: rgba(0,0,0,.66); border-radius: 99px; padding: 0 7px; border: 1px solid rgba(240,208,143,.3); }
.bj-spot.me { border-color: rgba(124, 183, 255, .55); }
.bj-spot.empty { opacity: .55; }
.bj-ok { position: absolute; top: -9px; font: 800 10px var(--f-display); text-transform: uppercase; letter-spacing: .08em; background: var(--good); color: #0e2a1a; border-radius: 99px; padding: 0 6px; animation: pop2 .25s ease-out; }
.bj-insb { transform: translate(-50%, -50%); display: flex; align-items: flex-end; gap: 3px; z-index: 2; --cw: calc(var(--chw) * .2); }
.bj-insb b { font: 800 10px var(--f-display); background: #2b4a7a; color: #dbe8ff; border-radius: 99px; padding: 0 5px; }

/* ---- seated characters (style.css .ch), name plates, empty chairs */
.bj-sit { width: var(--chw); height: var(--chw); transform: translate(-50%, -50%); z-index: 6; }
.bj-sit .ch .body { transition: translate .25s, filter .25s; }
.bj-sit.turn .ch .glow { opacity: 1; }
.bj-sit.turn .ch .body { translate: 0 -7%; }
.bj-sit.off .ch { filter: grayscale(1) brightness(.75); }
.bj-sit.empty .ch { opacity: .9; }
.ch-face { position: absolute; inset: 18%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #2d6e52, #123327); border: 2px solid rgba(255,255,255,.25); }
.ch-face svg { width: 100%; height: 100%; }
.bj-plate.plate { position: absolute; left: 50%; top: calc(100% - 14px); translate: -50% 0; width: max-content; max-width: 130px; padding: 2px 10px 2px 3px; gap: 5px; border-radius: 99px; z-index: 8; font: inherit; color: inherit; text-align: left; }
button.bj-plate { cursor: pointer; }
.bj-sit.br .bj-plate { left: auto; right: 0; translate: none; }
.bj-sit.bl .bj-plate { left: 0; translate: none; }
.bj-plate .who-p .nm { font-size: 12px; }
.bj-plate .who-p .stk { font-size: 16px; }
.bj-sit.me .bj-plate { border-color: var(--info); box-shadow: 0 6px 14px rgba(0,0,0,.5), 0 0 0 2px rgba(124,183,255,.2); }
.bj-sit.turn .bj-plate { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(224,184,102,.28), 0 0 22px rgba(224,184,102,.35); }
.bj-plate.sit { padding: 5px 12px; border-color: var(--brass); color: var(--brass-hi); background: rgba(43,36,20,.92); font: 800 12px var(--f-display); text-transform: uppercase; letter-spacing: .08em; align-items: center; animation: bj-call 1.6s ease-in-out infinite; }
.bj-plate.sit .sn { margin-left: 2px; }
@keyframes bj-call { 50% { box-shadow: 0 0 0 4px rgba(224,184,102,.25), 0 6px 14px rgba(0,0,0,.5); } }
/* Rachas: a slow golden aura and a gold chip on the plate */
.bj-sit .aura { position: absolute; inset: -26%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 214, 90, .35) 30%, rgba(255, 214, 90, .62) 60%, rgba(255, 190, 50, .28) 80%, transparent); animation: bj-aura 1.8s ease-in-out infinite; }
.bj-sit .aura::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(255, 226, 138, .8), transparent 22%, transparent 50%, rgba(255, 226, 138, .8) 62%, transparent 75%); -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 72%, #000 80%, transparent 94%); mask: radial-gradient(closest-side, transparent 64%, #000 72%, #000 80%, transparent 94%); animation: bj-turn 3.2s linear infinite; }
.bj-sit.hot .bj-plate { border-color: #f2c94c; box-shadow: 0 0 0 2px rgba(242,201,76,.35), 0 0 18px rgba(242,201,76,.55); }
.bj-gold { position: absolute; top: -10px; right: -8px; font: 900 10px var(--f-display); background: linear-gradient(180deg, #ffe28a, #e3a722); color: #3b2405; border-radius: 99px; padding: 0 5px; box-shadow: 0 0 10px rgba(255,214,90,.8); }
@keyframes bj-aura { 50% { scale: 1.08; opacity: .75; } }
/* Votación: paddles */
.bj-paddle { position: absolute; left: 50%; bottom: 62%; z-index: 9; translate: -50% 0; transform-origin: 50% 100%; transform: rotate(24deg) scale(.72); opacity: .7; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s; display: grid; justify-items: center; }
.bj-paddle b { width: calc(var(--chw) * .42); min-width: 30px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #f6efe1; color: #2a2a2a; border: 2px solid #1c120c; font: 900 calc(var(--chw) * .13 + 3px) var(--f-display); text-transform: uppercase; box-shadow: 0 4px 8px rgba(0,0,0,.5); }
.bj-paddle::after { content: ""; width: 4px; height: calc(var(--chw) * .24); background: linear-gradient(90deg, #6b3f22, #9a6235); border-radius: 0 0 2px 2px; margin-top: -2px; }
.bj-paddle.up { transform: none; opacity: 1; animation: bj-raise .45s cubic-bezier(.3,1.6,.5,1) both; }
.bj-paddle.up b { background: #e8f2ff; border-color: #2b4a7a; color: #2b4a7a; }
.bj-paddle.hit b { background: linear-gradient(180deg, #7ee8a8, #3fae6b); color: #0e2a1a; border-color: #0e2a1a; }
.bj-paddle.stand b { background: linear-gradient(180deg, #ff9b8e, #d2483b); color: #2a0b07; border-color: #2a0b07; }
@keyframes bj-raise { from { transform: translateY(14px) rotate(20deg) scale(.7); } }

/* ---- one-shot moves (data-fx; --fxd carries them across redraws). Arms: style.css .fx-bet / .fx-win / .fx-sweep */
.bj-dealer.fx-dealing .arm-r { animation: ch-deal .19s ease-out var(--fxd, 0s) infinite alternate both; }
.bj-dealer.fx-dealing .arm-l { animation: ch-deal .19s ease-out calc(var(--fxd, 0s) + .1s) infinite alternate both; }
.bj-dealer.fx-pay .arm-l, .bj-dealer.fx-pay .arm-r { animation: bj-reach .7s ease-in-out var(--fxd, 0s) both; }
@keyframes bj-reach { 45% { translate: 0 -10px; } }
.bj-hand.fx-bust, .bj-dhand.fx-bust { animation: bj-shake .6s cubic-bezier(.36,.07,.19,.97) var(--fxd, 0s) both; }
.fx-bust .bj-tot { animation: bj-redflash .6s ease-out var(--fxd, 0s) both; }
@keyframes bj-shake { 10%, 90% { translate: -2px 0; } 20%, 80% { translate: 4px 0; } 30%, 50%, 70% { translate: -7px 0; } 40%, 60% { translate: 7px 0; } }
@keyframes bj-redflash { 30% { box-shadow: 0 0 0 4px rgba(255,123,107,.5), 0 0 20px rgba(255,80,60,.8); scale: 1.15; } }
.bj-sit.fx-slump .ch .body { animation: ch-shake .5s linear var(--fxd, 0s), ch-breathe 3.4s ease-in-out var(--bd, 0s) infinite; filter: brightness(.85); }

/* ---- Doble o nada: spotlight */
.bj-spotlight { inset: -1% -1% -2%; border-radius: inherit; z-index: 9; pointer-events: none; background: radial-gradient(circle at var(--sx) var(--sy), rgba(255, 236, 190, .1) 0 10%, rgba(0,0,0,.62) 23%); animation: bj-dim .5s ease-out both; }
.bj-spotlight.out { animation: bj-dim-out 4.2s ease-out var(--fxd, 0s) both; }
@keyframes bj-dim { from { opacity: 0; } }
@keyframes bj-dim-out { from { opacity: 1; } 80% { opacity: 1; } to { opacity: 0; } }
.bj-donstage { left: 50%; top: 25%; transform: translate(-50%, -50%); z-index: 10; display: grid; justify-items: center; gap: 6px; padding: 14px 22px 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 230, 170, .26), rgba(255, 230, 170, .08) 60%, transparent); animation: pop2 .35s ease-out; }
.bj-donstage.out { animation: bj-dim-out 4.2s ease-out var(--fxd, 0s) both; }
.bj-donstage .t { font: 900 clamp(14px, 3cqi, 26px) var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-hi); text-shadow: 0 0 14px rgba(240,208,143,.8), 0 2px 0 #000; }
.bj-donstage .cs { display: flex; gap: 10px; align-items: center; }
.bj-donstage .card, .bj-donstage .back { --w: calc(var(--dw) * .95); }
.bj-donstage .back { height: calc(var(--w) * 1.4); }
.bj-donstage .q { animation: bj-q 1.1s ease-in-out infinite; }
.bj-donstage .amt { white-space: nowrap; font: 900 18px var(--f-display); background: rgba(0,0,0,.6); border: 1px solid var(--brass); border-radius: 99px; padding: 2px 12px; color: var(--brass-hi); }
.bj-donstage .amt small { font: 600 12px var(--f-body); color: var(--ink); }
.bj-donstage .bj-act { min-height: 0; padding: 8px 12px; font-size: 15px; gap: 6px; border-radius: 12px; }
.bj-donstage .bj-act .ai { width: 22px; height: 22px; font-size: 14px; }
.bj-donstage .lnk { font: 700 12px var(--f-body); color: var(--ink); background: none; border: 0; text-decoration: underline; padding: 0 0 0 6px; text-transform: none; letter-spacing: 0; }
.bj-donstage .arw { font-style: normal; font-size: 18px; color: var(--brass-hi); text-shadow: 0 0 10px rgba(240,208,143,.8); animation: bj-arw 1.1s ease-in-out infinite alternate; }
.bj-donstage .arw.dn { animation-delay: -.55s; }
@keyframes bj-arw { from { translate: 0 -3px; opacity: .55; } to { translate: 0 3px; opacity: 1; } }
.bj-donstage.won .t { color: #9fffc6; text-shadow: 0 0 14px rgba(95,213,144,.9), 0 2px 0 #000; }
.bj-donstage.lost .t { color: #ffb3a8; text-shadow: 0 0 14px rgba(255,80,60,.7), 0 2px 0 #000; }
@keyframes bj-q { 50% { translate: 0 -5px; box-shadow: 0 0 0 2px var(--brass), 0 0 18px rgba(240,208,143,.8); } }
.bj-table.don .bj-dealer .ch .glow { opacity: .8; }

/* ---- Ruleta del crupier: the wheel */
.bj-wheelfx { left: 50%; top: 46%; width: min(40%, 210px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 11; animation: bj-wheel-life 4.6s ease-out var(--fxd, 0s) both; pointer-events: none; }
.bj-wheelfx .whl { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 16px 30px rgba(0,0,0,.6), 0 0 0 4px #2a1a12, 0 0 0 6px #a9853e; animation: bj-wheel-spin 2.9s cubic-bezier(.12,.7,.18,1) var(--fxd, 0s) both; }
.bj-wheelfx svg { width: 100%; height: 100%; display: block; }
.bj-wheelfx text { fill: #f6efe1; font-family: var(--f-display); font-weight: 800; letter-spacing: .04em; }
.bj-wheelfx .ptr { position: absolute; left: 50%; top: -9px; translate: -50% 0; width: 0; height: 0; border: 9px solid transparent; border-top: 16px solid var(--brass-hi); filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.bj-wheelfx .lbl { position: absolute; left: 50%; top: 104%; translate: -50% 0; white-space: nowrap; font: 900 clamp(13px, 2.6cqi, 22px) var(--f-display); letter-spacing: .08em; text-transform: uppercase; padding: 4px 14px; border-radius: 99px; background: linear-gradient(180deg, #4b2866, #2a1438); border: 1px solid #b88ae0; color: #f6e3ff; box-shadow: 0 0 22px rgba(184,138,224,.6); animation: bj-lbl 4.6s ease-out var(--fxd, 0s) both; }
@keyframes bj-wheel-spin { from { rotate: 0deg; } to { rotate: var(--to); } }
@keyframes bj-wheel-life { from { opacity: 0; scale: .6; } 8% { opacity: 1; scale: 1; } 86% { opacity: 1; scale: 1; } to { opacity: 0; scale: .9; } }
@keyframes bj-lbl { 0%, 62% { opacity: 0; scale: .5; } 70% { opacity: 1; scale: 1.1; } 76%, 100% { opacity: 1; scale: 1; } }

/* ---- celebrations over the page */
.bj-burst { position: fixed; width: 0; height: 0; z-index: 72; pointer-events: none; }
.bj-burst i { position: absolute; left: -36px; top: -36px; width: 72px; height: 72px; border-radius: 50%; border: 3px solid #9fe6bd; box-shadow: 0 0 18px rgba(95,213,144,.7); animation: bj-ring .7s ease-out both; }
.bj-burst.gold i { border-color: #ffe7a3; box-shadow: 0 0 22px rgba(240,208,143,.9); }
.bj-burst b { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #d6ffe6; box-shadow: 0 0 8px #9fe6bd; rotate: var(--a); animation: bj-spark .8s ease-out both; }
.bj-burst.gold b { background: #fff3c8; box-shadow: 0 0 8px #f0d08f; }
@keyframes bj-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }
@keyframes bj-spark { from { transform: translateY(-10px) scale(1); opacity: 1; } to { transform: translateY(-70px) scale(.3); opacity: 0; } }
.bj-confetti { position: fixed; width: 0; height: 0; z-index: 72; pointer-events: none; }
.bj-confetti i { position: absolute; left: -3px; top: -5px; width: 7px; height: 11px; border-radius: 1px; box-shadow: 0 0 6px rgba(255,220,130,.5); }

/* Over the page: flying chips and projectiles */
.bj-fly { position: fixed; width: 28px; height: 28px; z-index: 70; pointer-events: none; filter: drop-shadow(0 6px 4px rgba(0,0,0,.45)); }
.bj-fly .tc { width: 100%; height: 100%; }
.bj-proj { font-size: 26px; line-height: 28px; display: block; text-align: center; }
.bj-wheel { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--brass); background: conic-gradient(#c8302a 0 25%, #1d1d21 0 50%, #1f8a4c 0 75%, #6b3fa0 0); animation: wheel 1.6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes wheel { from { transform: rotate(0); } to { transform: rotate(1440deg); } }
.plate.hit { animation: hit .5s ease-out; }
.plate.hit-tomate { background: radial-gradient(circle at 40% 40%, rgba(214,48,30,.75), transparent 60%), linear-gradient(180deg, #1d2a25, #111a17); }
.plate.hit-flor { background: radial-gradient(circle at 40% 40%, rgba(255,160,200,.6), transparent 60%), linear-gradient(180deg, #1d2a25, #111a17); }
.plate.hit-ficha { box-shadow: 0 0 0 3px var(--brass), 0 0 20px rgba(224,184,102,.6); }
@keyframes hit { 20% { transform: translateX(-5px) rotate(-3deg); } 50% { transform: translateX(5px) rotate(3deg); } 80% { transform: translateX(-2px); } }

/* ================================================================ phone table (container under 560px) */
@container (max-width: 560px) {
  .bj-stage { --chw: 58px; --bw: 31px; --bw-s: 23px; --dw: 35px; }
  .bj-strip { gap: 4px; }
  .bj-badge { font-size: 10px; padding: 2px 8px; gap: 4px; }
  .bj-badge.wild .mini { min-width: 14px; height: 18px; font-size: 11px; }
  .bj-badge small { display: none; }
  .bj-stage { padding: calc(var(--chw) * .62) 0 calc(var(--chw) * .9); }
  .bj-rail { padding: 5px 3% 3%; transform: rotateX(6deg); }
  .bj-rail::before { inset: 5px 1.2% 1.2%; }
  .bj-felt { aspect-ratio: 1; }
  .bj-pr.pw { display: none; }
  .bj-pr.pn { display: block; }
  .bj-pr .bl { stroke-width: 3.4; }
  .bj-dealer.dealer-seat { transform: translate(-50%, -80%); }
  .bj-rack { transform: translate(-50%, -30%); }
  .bj-rack .rack { padding: 3px 4px; gap: 2px; border-radius: 5px; }
  .bj-rack .rack .slot { width: 8px; height: 15px; }
  .bj-rack .rack .slot:nth-child(n+8) { display: none; }
  .bj-dhand { top: 9.5%; gap: 3px; }
  .bj-shoe { right: 3.5%; top: 2.4%; }
  .bj-shoe .box { width: 44px; height: 20px; }
  .bj-shoe .mouth { --w: 13px; margin-right: -6px; }
  .bj-discard { left: 3.5%; top: 2.6%; }
  .bj-discard .pile { width: 32px; height: 24px; border-radius: 4px; }
  .bj-discard .back { --w: 16px; }
  .bj-limits { left: 4%; top: 14%; padding: 1px 5px 2px; rotate: -4deg; }
  .bj-limits small { font-size: 6px; }
  .bj-limits b { font-size: 10px; }
  .bj-hands { gap: 3px; }
  .bj-cards .card .pip { font-size: calc(var(--w) * .58); }
  .bj-tot { font-size: 11px; padding: 3px 6px 2px; }
  .bj-tot.big { font-size: 20px; padding: 4px 12px 3px; }
  .bj-hb { font-size: 9px; padding: 0 4px; }
  .bj-res { font-size: 8.5px; padding: 0 4px; letter-spacing: .04em; }
  .bj-hand.on::after { width: 5px; height: 5px; bottom: -6px; }
  .bj-spot b { font-size: 10px; padding: 0 5px; bottom: -8px; }
  .bj-spot i { font-size: 13px; }
  .bj-ok { font-size: 8px; top: -8px; }
  .bj-insb b { font-size: 8px; padding: 0 3px; }
  .bj-plate.plate { top: calc(100% - 9px); max-width: 84px; padding: 1px 7px 1px 2px; gap: 3px; }
  .bj-plate .sn { min-width: 14px; height: 14px; font-size: 9px; line-height: 11px; padding: 0 2px; }
  .bj-plate .who-p .nm { font-size: 9.5px; }
  .bj-plate .who-p .stk { font-size: 12px; }
  .bj-plate.sit { padding: 3px 7px; font-size: 9.5px; letter-spacing: .04em; }
  .bj-gold { font-size: 8px; top: -8px; right: -6px; }
  .bj-paddle::after { width: 3px; }
  .bj-donstage { top: 22%; padding: 8px 12px; }
  .bj-donstage .amt { font-size: 14px; }
  .bj-donstage .bj-act { padding: 7px 6px; font-size: 12px; flex-direction: column; gap: 2px; border-radius: 10px; }
  .bj-donstage .bj-act .ai { width: 18px; height: 18px; font-size: 12px; }
  .bj-donstage .cs { gap: 5px; }
  .bj-wheelfx { width: 46%; top: 44%; }
}

/* ================================================================ console under the table */
.bj-console { gap: 12px; }
.bj-q { font: 700 18px/1.3 var(--f-display); }
.bj-vs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bj-vs .card { --w: 30px; }
.bj-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.bj-act {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 10px 14px;
  font: 800 19px var(--f-display); letter-spacing: .04em; text-transform: uppercase; border-radius: 14px; border-width: 1.5px;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.3); transition: transform .08s, filter .15s, box-shadow .15s;
}
.bj-act:hover:not(:disabled) { filter: brightness(1.12); }
.bj-act:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.3); }
.bj-act .ai { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 900 17px/1 var(--f-display); font-style: normal; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.bj-act kbd { position: absolute; top: 5px; right: 6px; margin: 0; opacity: .7; }
.bj-act.a-hit, .bj-act.a-vhit, .bj-act.a-alto { background: linear-gradient(180deg, #25784e, #134a2f); border-color: #5fd590; color: #e6ffef; }
.bj-act.a-stand, .bj-act.a-vstand, .bj-act.a-bajo { background: linear-gradient(180deg, #8a2e26, #511813); border-color: #ff7b6b; color: #ffe6e1; }
.bj-act.a-double, .bj-act.a-ins { background: linear-gradient(180deg, var(--brass-hi), var(--brass) 60%, #b8892f); border-color: #fff1c4; color: var(--brass-ink); }
.bj-act.a-double .ai, .bj-act.a-ins .ai { background: rgba(255,255,255,.35); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.25); }
.bj-act.a-split { background: linear-gradient(180deg, #2c5a96, #1a3760); border-color: var(--info); color: #e3efff; }
.bj-act.a-surrender, .bj-act.a-no, .bj-act.a-paso { background: linear-gradient(180deg, var(--panel-3), var(--panel-2)); border-color: var(--line-2); color: var(--ink); }
.bj-act:disabled { filter: grayscale(.85); opacity: .32; box-shadow: none; }
.bj-act .pad { display: block; width: 14px; height: 14px; border-radius: 50%; background: #f6efe1; position: relative; top: -3px; }
.bj-act .pad::after { content: ""; position: absolute; left: 6px; top: 13px; width: 2px; height: 8px; background: #c79a5b; }
.btn.hint-on { outline: 3px solid var(--info); outline-offset: 2px; }
.bj-hint { color: var(--info); font-weight: 700; font-size: 14px; }
.bj-betrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bj-betline { font: 900 34px var(--f-display); color: var(--brass-hi); text-shadow: 0 0 18px rgba(240,208,143,.35); }
.bj-chipbtns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 10px 12px; border-radius: 14px; background: radial-gradient(ellipse at 50% 0, rgba(255,214,150,.12), transparent 70%), linear-gradient(180deg, var(--felt), var(--felt-dark)); box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 6px 14px rgba(0,0,0,.4), 0 0 0 3px #4a2e1f; }
.bj-chipbtns button { width: 54px; height: 54px; padding: 0; border: 0; background: none; border-radius: 50%; transition: transform .12s; filter: drop-shadow(0 4px 3px rgba(0,0,0,.5)); }
.bj-chipbtns button:hover:not(:disabled) { transform: translateY(-4px) rotate(-8deg); }
.bj-chipbtns button:active:not(:disabled) { transform: translateY(1px); }
.bj-chipbtns button:disabled { opacity: .28; cursor: not-allowed; filter: grayscale(.6); }
.bj-chipbtns .tc { width: 100%; height: 100%; }
.bj-don { display: grid; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--brass); background: radial-gradient(ellipse at 50% 0, rgba(240,208,143,.2), transparent 70%), #2b2414; box-shadow: 0 0 24px rgba(240,208,143,.2); }
.bj-don .card, .bj-console .result .card { --w: 30px; }
.bj-don .bj-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bj-foot { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
.bj-react { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bj-react .seg button { display: inline-flex; align-items: center; gap: 4px; }
.bj-react .tc { width: 18px; height: 18px; }
.bj-console > .result { width: 100%; justify-self: stretch; }
.bj-under > .row { grid-column: 1 / -1; }
.bj-betrow, .bj-chipbtns + .row { justify-content: center; }
/* while the cards are still in the air the panel keeps their place with a quiet placeholder */
.bj-console .bj-vs { position: relative; }
.bj-console .bj-vs > *, .bj-console > .result > *, .bj-console > .result::before { transition: opacity .25s; }
.bj-console .bj-hint { transition: opacity .25s; }
.bj-console .bj-vs.pending > *, .bj-console > .result.pending > *, .bj-console > .result.pending::before, .bj-console .bj-hint.pending { opacity: 0; }
.bj-console .bj-vs.pending::after, .bj-console > .result.pending::after { position: absolute; left: 0; top: 50%; translate: 0 -50%; color: var(--muted); font: 600 15px var(--f-body); animation: bj-wait 1s ease-in-out infinite alternate; }
.bj-console .bj-vs.pending::after { content: "Repartiendo…"; }
.bj-console > .result { position: relative; transition: background-color .3s, border-color .3s; }
.bj-console > .result.pending { background: var(--panel-2); border-color: var(--line-2); }
.bj-console > .result.pending::after { content: "Contando…"; left: 16px; }
@keyframes bj-wait { from { opacity: .45; } to { opacity: 1; } }
@media (max-width: 480px) { .bj-don .bj-act.a-paso { grid-column: 1 / -1; } }
.bj-under { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: start; }
@media (max-width: 480px) {
  .bj-chipbtns { gap: 6px; padding: 8px; }
  .bj-chipbtns button { width: 50px; height: 50px; }
  .bj-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bj-don .bj-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bj-act { min-height: 56px; font-size: 18px; gap: 8px; padding: 8px 10px; }
  .bj-console { padding: 14px; }
}
@media (pointer: coarse) { .bj-console kbd { display: none; } }
@media (max-width: 480px) { .bj-act.a-vhit .ai, .bj-act.a-vstand .ai { display: none; } .bj-act.a-vhit, .bj-act.a-vstand { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) {
  .bj-wheelfx, .bj-spotlight.out, .bj-donstage.out { display: none; }
  .card.wild, .bj-sit .aura, .bj-sit .aura::before, .bj-mini .bjt { animation: none; }
}