/* ===== Blackjack 21 (.theme-blackjack): emerald felt table, gold rail, cards and chips ===== */
.game-shell.theme-blackjack {
    --accent: #f2cf6b; --accent-glow: rgba(242,207,107,.6);
    --gold: #e9c25a; --gold-soft: #ffe7a0; --gold-deep: #9a6d16; --ink: #2a1a00;
    --panel: linear-gradient(rgba(12,24,19,.95), rgba(3,9,7,.97)); --panel-solid: #050c09;
    --border: #b8902f; --border-hi: #d9b45a;
    --cta-a: #1f9a6c; --cta-b: #0a5a3e; --cta-shadow: #03281b; --cta-glow: rgba(60,220,150,.35);
    --round-a: #12392b; --round-b: #050f0b;
    --modal: linear-gradient(#0b3526, #03110c);
    --text: #f6ecd0;
    --felt-a: #17905f; --felt-b: #0c6040; --felt-c: #053823;
    --card-w: clamp(60px, min(8.4vw, 12.5vh), 112px);
    justify-content: flex-start; gap: 8px;
}
.theme-blackjack .bg-layer { background:
    radial-gradient(ellipse at 50% -5%, rgba(242,207,107,.22), transparent 45%),
    radial-gradient(ellipse at 15% 110%, rgba(20,110,70,.45), transparent 55%),
    radial-gradient(ellipse at 85% 110%, rgba(20,110,70,.45), transparent 55%),
    linear-gradient(#0c1813, #050b08 70%, #020403); }
.theme-blackjack .logo span { font-size: clamp(26px, 4.6vw, 44px); letter-spacing: 6px; }
.theme-blackjack .logo small { letter-spacing: 12px; color: #f2cf6b; text-shadow: 0 0 14px rgba(242,207,107,.6); }
.theme-blackjack .pill { background: linear-gradient(#21483a, #08160f); color: #ffe7a0; }
.theme-blackjack .pill:disabled, .theme-blackjack .round:disabled { opacity: .45; cursor: not-allowed; }
.theme-blackjack .intro { background: radial-gradient(ellipse at 50% 35%, rgba(18,120,80,.97), rgba(2,10,7,.98)); }
.theme-blackjack .line-info { color: var(--gold-soft); }
.bj-sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Table ---- */
.bj-table { position: relative; width: 100%; max-width: 1040px; flex: 1 1 auto; min-height: min(470px, 60vh); box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; padding: 16px 18px 26px;
    border-radius: 28px 28px 48% 48% / 28px 28px 26% 26%;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 5px),
        radial-gradient(ellipse at 50% 32%, var(--felt-a), var(--felt-b) 55%, var(--felt-c));
    box-shadow: 0 0 0 3px #e2b64f, 0 0 0 13px #2b1708, 0 0 0 15px #c99a3a, 0 20px 50px rgba(0,0,0,.75), inset 0 0 90px rgba(0,0,0,.55); margin: 14px 0 12px; }
.bj-table::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; opacity: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,236,170,.4) 50%, transparent 70%) 0 0 / 260% 100% no-repeat; }
.bj-table.fx-blackjack::before { animation: bjSheen 1.5s ease-out 2; }

.bj-zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; z-index: 2; }
.bj-label { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 12px; font-weight: 800; letter-spacing: 3px; color: var(--gold-soft); text-shadow: 0 1px 2px #000; }
.bj-total { min-width: 34px; padding: 3px 10px; border-radius: 14px; background: rgba(0,0,0,.62); border: 1px solid var(--gold); color: #fff; font-size: 15px; letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums; }
.bj-total.bust { background: #7a1010; border-color: #ff8a80; }
.bj-total.gold { background: linear-gradient(#ffe9a3, #c9962c); color: #1d1300; }
.bj-hand { display: flex; justify-content: center; align-items: flex-end; min-height: calc(var(--card-w) * 1.4); max-width: 100%; }
.bj-hand > .pc + .pc { margin-left: calc(var(--card-w) * -.42); }
.bj-slot { width: var(--card-w); aspect-ratio: 5 / 7; border-radius: 9px; border: 2px dashed rgba(242,207,107,.3); box-sizing: border-box; }

.bj-shoe { position: absolute; top: 14px; right: 22px; z-index: 1; width: calc(var(--card-w) * .85); aspect-ratio: 5 / 6; border-radius: 10px 10px 6px 6px;
    background: linear-gradient(#3a2410, #160c04); border: 2px solid #c99a3a; box-shadow: 0 6px 14px rgba(0,0,0,.5); transform: rotate(8deg); }
.bj-shoe i { position: absolute; left: 12%; right: 12%; top: 10%; bottom: 28%; border-radius: 5px; background: repeating-linear-gradient(#0d5a3e 0 3px, #e2c26c 3px 4px); }

.felt-print { width: min(540px, 90%); max-height: 12vh; height: auto; z-index: 1; margin: -6px 0; opacity: .9; pointer-events: none; }
.felt-print .arc-big { font: 700 24px Georgia, 'Times New Roman', serif; letter-spacing: 4px; fill: #f2cf6b; }
.felt-print .arc-small { font: 600 11px system-ui, sans-serif; letter-spacing: 2px; fill: rgba(246,236,208,.72); }

/* ---- Cards ---- */
.pc { position: relative; flex: none; width: var(--card-w); aspect-ratio: 5 / 7; perspective: 900px; }
.pc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,.7,.3,1); }
.pc.down .pc-inner { transform: rotateY(180deg); }
.pc-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 7% / 5%; box-shadow: 0 4px 10px rgba(0,0,0,.45); }
.pc-face svg { width: 100%; height: 100%; display: block; }
.pc-back { transform: rotateY(180deg); }
.bj-table.animate .pc.enter { animation: bjDeal .45s cubic-bezier(.2,.8,.25,1) both; }
.pc.from-dealer { --dx: 30vw; --dy: -2vh; }
.pc.from-player { --dx: 30vw; --dy: -34vh; }
.fx-win .player .pc-face, .fx-blackjack .player .pc-face { box-shadow: 0 0 0 2px rgba(255,226,140,.9), 0 0 22px rgba(255,214,110,.75); }
.fx-bust .player .bj-hand { animation: bjShake .45s linear 1; }
.fx-bust .player .pc-face { filter: grayscale(.45) brightness(.8); }
.fx-lose .dealer .pc-face { box-shadow: 0 0 0 2px rgba(255,140,128,.7), 0 0 16px rgba(255,90,80,.45); }
.fx-push .bj-bet-spot { animation: bjPulse .8s ease-in-out 2; }

/* ---- Result banner ---- */
.bj-result { position: absolute; left: 50%; top: 47%; translate: -50% -50%; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 2px;
    width: max-content; max-width: min(92%, 520px); padding: 10px 26px; box-sizing: border-box; border-radius: 18px; text-align: center; pointer-events: none;
    background: rgba(2,10,7,.97); border: 2px solid var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: bjPop .45s cubic-bezier(.3,1.5,.5,1) both; }
.bj-result strong { font: 900 clamp(22px, 4vw, 36px) Georgia, 'Times New Roman', serif; letter-spacing: 3px; color: #fff; }
.bj-result span { font-size: 14px; opacity: .92; }
.bj-result em { font-style: normal; font-weight: 900; font-size: 20px; color: #ffe27a; font-variant-numeric: tabular-nums; }
.bj-result.win { border-color: #6fe3a8; box-shadow: 0 0 30px rgba(80,230,160,.45); }
.bj-result.win strong { color: #c4ffe0; }
.bj-result.blackjack { border-color: #ffe9a3; background: radial-gradient(ellipse at 50% 0%, rgba(120,84,10,.98), rgba(10,8,2,.98)); animation: bjPop .5s cubic-bezier(.3,1.6,.5,1) both, bjGlow 1.2s ease-in-out .5s 3; }
.bj-result.blackjack strong { background: linear-gradient(#fff6c8, #ffd35a 45%, #b37a12 55%, #ffe58a); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(28px, 5vw, 46px); }
.bj-result.push { border-color: #9fc4ff; }
.bj-result.push strong { color: #d6e6ff; }
.bj-result.bust, .bj-result.lose { border-color: #ff8a80; }
.bj-result.bust strong, .bj-result.lose strong { color: #ffb4ab; }

/* ---- Chips & bet spot ---- */
.chip { --c1: #fff; --c2: #c62828; border-radius: 50%; box-sizing: border-box;
    background: radial-gradient(circle, var(--c2) 0 48%, var(--c1) 49% 54%, var(--c2) 55% 62%, transparent 63%),
                repeating-conic-gradient(var(--c1) 0 12deg, var(--c2) 12deg 45deg);
    border: 2px solid rgba(0,0,0,.35); box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.25); }
.chip.c-1 { --c1: #2a62c9; --c2: #ececec; }
.chip.c-5 { --c1: #fff; --c2: #c62828; }
.chip.c-25 { --c1: #fff; --c2: #18884a; }
.chip.c-100 { --c1: #e2b64f; --c2: #1b1b1b; }
.chip.c-500 { --c1: #f5d76e; --c2: #6a2c91; }
.bj-bet-spot { position: absolute; left: 4%; bottom: 0; width: 96px; height: 96px; border-radius: 50%; box-sizing: border-box; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6px;
    border: 2px solid rgba(242,207,107,.65); box-shadow: inset 0 0 0 6px rgba(0,0,0,.14), inset 0 0 0 7px rgba(242,207,107,.3); }
.bj-bet-spot small { position: relative; z-index: 12; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--gold-soft); background: rgba(0,0,0,.6); padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.bj-stack { position: absolute; left: 50%; bottom: 28px; width: 46px; height: 46px; translate: -50% 0; }
.bj-stack .chip { position: absolute; left: 0; bottom: calc(var(--k) * 4px); width: 46px; height: 46px; z-index: var(--k); }
.bj-stack .chip.drop { animation: chipDrop .35s cubic-bezier(.3,1.4,.5,1) both; }

/* ---- Controls ---- */
.bj-controls { max-width: 1120px; border-radius: 28px; padding: 8px 14px; }
.bj-chips { display: flex; align-items: center; gap: 6px; }
.chip-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; cursor: pointer; transition: transform .12s, opacity .15s;
    font: 900 13px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.chip-btn.c-1 { color: #102a5a; text-shadow: none; }
.chip-btn:not(:disabled):hover { transform: translateY(-3px); }
.chip-btn:not(:disabled):active { transform: translateY(1px) scale(.94); }
.chip-btn:disabled { opacity: .38; cursor: not-allowed; }
.chip-btn:focus-visible, .bj-btn:focus-visible { outline: 3px solid #fff3c0; outline-offset: 2px; }
.bj-actions { display: flex; align-items: center; gap: 8px; }
.bj-btn { min-width: 104px; min-height: 52px; padding: 0 20px; border-radius: 28px; border: 3px solid var(--gold); cursor: pointer;
    font: 900 18px/1 system-ui, sans-serif; letter-spacing: 3px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
    box-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 18px rgba(242,207,107,.22); transition: transform .1s, filter .15s, opacity .15s; }
.bj-btn.deal { background: linear-gradient(#ffe9a3, #d6a637 55%, #9a6d16); color: #1d1300; text-shadow: none; border-color: #fff1c2; }
.bj-btn.deal:not(:disabled) { animation: bjReady 1.8s ease-in-out infinite; }
.bj-btn.hit { background: linear-gradient(#24ad78, #0b5c3e); }
.bj-btn.stand { background: linear-gradient(#c8463a, #6e1810); border-color: #f0b8a0; }
.bj-btn:not(:disabled):hover { filter: brightness(1.1); }
.bj-btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.bj-btn:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.4); animation: none; }

/* ---- Animations ---- */
@keyframes bjDeal { from { transform: translate(var(--dx), var(--dy)) rotate(-28deg) scale(.6); opacity: 0; } 25% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes bjPop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes bjGlow { 50% { box-shadow: 0 0 46px rgba(255,214,110,.85), 0 10px 30px rgba(0,0,0,.6); } }
@keyframes bjSheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -20% 0; } }
@keyframes bjShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes bjPulse { 50% { box-shadow: inset 0 0 0 6px rgba(0,0,0,.14), 0 0 22px rgba(159,196,255,.8); } }
@keyframes bjReady { 50% { box-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 26px rgba(255,214,110,.6); } }
@keyframes chipDrop { from { transform: translateY(-60px) scale(1.15); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .bj-bet-spot { left: 2%; width: 84px; height: 84px; }
}
@media (max-width: 640px) {
    .game-shell.theme-blackjack { --card-w: clamp(54px, 17vw, 78px); }
    .bj-table { min-height: 0; padding: 12px 8px 16px; margin: 10px 0 8px; border-radius: 18px 18px 40% 40% / 18px 18px 12% 12%;
        box-shadow: 0 0 0 2px #e2b64f, 0 0 0 8px #2b1708, 0 0 0 9px #c99a3a, 0 12px 30px rgba(0,0,0,.7), inset 0 0 60px rgba(0,0,0,.5); }
    .bj-hand > .pc + .pc { margin-left: calc(var(--card-w) * -.5); }
    .bj-shoe { top: 8px; right: 10px; width: calc(var(--card-w) * .6); }
    .felt-print { width: 96%; }
    .felt-print .arc-small { font-size: 13px; }
    .theme-blackjack .logo span { font-size: 24px; letter-spacing: 4px; }
    .theme-blackjack .logo small { font-size: 13px; letter-spacing: 8px; }
    .bj-bet-spot { left: 5%; bottom: 8px; width: 58px; height: 58px; }
    .bj-bet-spot small { font-size: 9px; padding: 0 4px; }
    .bj-stack { bottom: 18px; width: 30px; height: 30px; }
    .bj-stack .chip { width: 30px; height: 30px; bottom: calc(var(--k) * 3px); }
    .bj-result { position: relative; left: auto; top: auto; translate: none; margin: 2px 0; padding: 8px 14px; }
    .bj-result span { font-size: 13px; }
    .pc.from-player { --dy: -40vh; }
    .theme-blackjack .controls.bj-controls { margin-top: 0; gap: 8px; }
    /* Actions first so DEAL / HIT / STAND stay within reach without scrolling. */
    .bj-actions { order: -2; flex: 0 0 100%; justify-content: center; }
    .bj-chips { order: -1; flex: 0 0 100%; justify-content: center; }
    .bj-btn { flex: 1 1 0; min-width: 0; max-width: 170px; min-height: 48px; font-size: 16px; padding: 0 10px; }
    .chip-btn { width: 42px; height: 42px; }
}
@media (max-width: 380px) {
    .chip-btn { width: 37px; height: 37px; font-size: 11px; }
    .bj-chips { gap: 4px; }
    .bj-chips .pill { padding: 6px 7px; }
    .bj-btn { min-height: 44px; font-size: 15px; letter-spacing: 2px; }
    .bj-result strong { font-size: 20px; }
}