.bj-page { max-width: 1440px; }
.bj-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.bj-heading .back-link { display:block; margin-bottom:17px; }
.bj-heading h1 { margin:7px 0 6px; font-size:clamp(3rem,5vw,4.5rem); }
.bj-heading p { margin:0; color:#abb3bc; font-size:.94rem; }
.bj-demo-pill { padding:9px 12px; border:1px solid #a7ef5b54; background:#a5ed3410; border-radius:6px; color:#c5f383; font-size:.68rem; letter-spacing:.13em; font-weight:800; white-space:nowrap; }
#blackjack-root { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:14px; }
.bj-table { min-height:570px; position:relative; isolation:isolate; overflow:hidden; border-radius:17px; border:1px solid #70bc663b; background:radial-gradient(ellipse at 50% 59%,#214b3d 0,#123127 39%,#0d201c 70%,#0c1516 100%); box-shadow:inset 0 0 0 12px #0a1113,0 22px 55px #0006; padding:26px 34px 18px; display:flex; flex-direction:column; justify-content:space-between; }
.bj-table::before { content:''; position:absolute; inset:14px; border:1px solid #c1e7b830; border-radius:48% 48% 42% 42% / 44% 44% 55% 55%; pointer-events:none; }
.bj-table::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(106deg,#fff1 0 1px,transparent 1px 5px); opacity:.08; pointer-events:none; }
.bj-table-glow { position:absolute; inset:15% 24%; background:#7fbf6d28; filter:blur(80px); z-index:-1; }
.bj-table-top,.bj-table-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.66rem; color:#b4ccbf; letter-spacing:.16em; font-weight:700; position:relative; z-index:1; }
.bj-table-mark { font:600 1.45rem Oswald,Impact,sans-serif; color:#bdf27d; letter-spacing:-.03em; line-height:1; }
.bj-table-mark span { color:#fff; }
.bj-dealer-area,.bj-player-area { position:relative; z-index:1; display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap; }
.bj-dealer-area { min-height:140px; margin-top:12px; }
.bj-player-area { min-height:160px; }
.bj-hand { min-width:180px; text-align:center; padding:9px 12px 11px; border:1px solid transparent; border-radius:13px; }
.bj-hand-current { background:#c5f3830d; border-color:#b5e8858c; box-shadow:0 0 28px #acdf5330; }
.bj-hand-label { display:flex; gap:8px; justify-content:center; align-items:center; margin-bottom:10px; color:#e2eee6; font-size:.7rem; letter-spacing:.11em; font-weight:800; text-transform:uppercase; }
.bj-hand-label b { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 6px; color:#111a12; background:#d3f1b2; border-radius:5px; letter-spacing:0; font-size:.8rem; }
.bj-hand-label em { font-size:.62rem; color:#c5f383; font-style:normal; letter-spacing:0; }
.bj-card-row { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.bj-card { width:69px; height:96px; padding:7px; color:#171d20; background:linear-gradient(145deg,#fff 0,#edece6 100%); border:1px solid #fff; border-radius:7px; box-shadow:0 8px 16px #0008; display:flex; flex-direction:column; justify-content:space-between; text-align:left; font:700 1rem DM Sans,Arial,sans-serif; line-height:1; }
.bj-card-red { color:#b83448; }
.bj-card span { display:flex; flex-direction:column; align-items:flex-start; }
.bj-card span small { font-size:.75rem; margin-top:2px; }
.bj-card strong { align-self:center; font-size:1.8rem; }
.bj-card .bj-card-corner { align-self:end; transform:rotate(180deg); }
.bj-card-back { align-items:center; justify-content:center; text-align:center; border:4px solid #f3f3eb; color:#c5f383; background:repeating-linear-gradient(45deg,#13252a 0 5px,#203e38 5px 10px); }
.bj-card-back span { font:700 1.35rem Oswald,Impact,sans-serif; }
.bj-card-back small { color:#fff; font-size:.52rem; letter-spacing:.2em; margin-top:4px; }
.bj-card-placeholder { width:180px; min-height:96px; display:grid; place-items:center; color:#9fb9ae; font-size:.76rem; border:1px dashed #ccf3c33d; border-radius:8px; }
.bj-table-arc { height:60px; border-bottom:2px solid #d3eeb477; border-radius:0 0 50% 50%; text-align:center; color:#d4eac3; font-size:.66rem; letter-spacing:.17em; padding-top:13px; position:relative; z-index:1; }
.bj-controls { background:#1a2225; border:1px solid #ffffff19; border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:17px; }
.bj-balance { padding:15px 17px; background:#11191a; border:1px solid #d1f0b125; border-radius:9px; }
.bj-balance span,.bj-balance small { display:block; color:#a4b5ad; font-size:.64rem; letter-spacing:.12em; font-weight:800; }
.bj-balance strong { display:block; margin:5px 0; color:#fff; font:600 1.95rem Oswald,Impact,sans-serif; }
.bj-balance small { font-size:.68rem; letter-spacing:0; font-weight:500; }
.bj-bet label { display:block; margin:0 0 8px; color:#d9e2db; font-size:.78rem; font-weight:700; }
.bj-bet-input { display:flex; align-items:center; background:#0d1416; border:1px solid #ffffff38; border-radius:7px; padding:6px 7px 6px 12px; gap:5px; }
.bj-bet-input:focus-within { border-color:#c5f383; box-shadow:0 0 0 2px #c5f38333; }
.bj-bet-input span { color:#c5f383; }
.bj-bet-input input { min-width:0; width:100%; background:none; border:0; color:#fff; outline:none; }
.bj-bet-input button,.bj-chips button { border:1px solid #ffffff20; color:#dbe6db; background:#283235; border-radius:5px; min-height:34px; padding:5px 9px; font-weight:800; }
.bj-chips { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-top:9px; }
.bj-chips button { font-size:.66rem; padding:5px 2px; }
.bj-bet-input button:hover,.bj-chips button:hover,.bj-action-grid button:hover:not(:disabled),.bj-action-row button:hover:not(:disabled) { border-color:#bdf171; background:#33433c; }
.bj-status { min-height:58px; padding:12px; border-left:3px solid #b9ef77; background:#a9ed6611; color:#e3f3d6; font-size:.8rem; line-height:1.4; }
.bj-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.bj-action-grid button,.bj-action-row button,.bj-deal-button { min-height:56px; padding:10px 9px; border:1px solid #ffffff32; border-radius:8px; background:#293336; color:#fff; font-weight:800; }
.bj-action-grid button small { display:block; margin-top:3px; color:#aebeb4; font-size:.62rem; font-weight:500; }
.bj-action-grid .bj-action-primary,.bj-action-row .bj-action-primary,.bj-deal-button { background:linear-gradient(135deg,#c5f383,#91e521); color:#132016; border-color:transparent; }
.bj-action-grid .bj-action-primary small { color:#324f27; }
.bj-action-row { display:grid; gap:8px; }
.bj-action-hint { margin:-7px 0 0; color:#afbbb1; font-size:.7rem; }
.bj-deal-button { width:100%; font-size:.95rem; }
.bj-controls button:disabled { opacity:.4; cursor:not-allowed; }
.bj-control-note { margin-top:auto; color:#a3aea5; font-size:.68rem; line-height:1.45; }
.bj-reset { align-self:start; border:0; background:none; color:#c5f383; padding:0; font-weight:800; font-size:.75rem; }
.bj-lower { grid-column:1/-1; margin-top:6px; border:1px solid #ffffff1d; border-radius:12px; overflow:hidden; background:#172024; }
.bj-lower-tabs { display:flex; gap:0; overflow-x:auto; border-bottom:1px solid #ffffff1d; }
.bj-lower-tabs button { min-width:max-content; padding:16px 20px; border:0; border-bottom:2px solid transparent; background:none; color:#afbcb8; font-weight:800; font-size:.8rem; }
.bj-lower-tabs button.active { color:#c5f383; border-bottom-color:#b8ee74; background:#aaf05e0a; }
.bj-fairness,.bj-rules,.bj-history { padding:24px; }
.bj-fairness-intro h2,.bj-rules h2 { margin:0 0 6px; font-size:1.23rem; }
.bj-fairness-intro p,.bj-rules p { margin:0; color:#b6c0bd; font-size:.8rem; line-height:1.5; }
.bj-fairness-grid { display:grid; grid-template-columns:1.5fr 1fr .5fr; gap:9px; margin:19px 0; }
.bj-data { min-width:0; min-height:95px; padding:13px; border:1px solid #ffffff1d; border-radius:7px; background:#0f171a; }
.bj-data span,.bj-data label,.bj-last-round span { display:block; color:#b4bfb9; font-size:.62rem; font-weight:800; letter-spacing:.1em; }
.bj-data code,.bj-data strong { display:block; margin-top:10px; color:#d4edc0; font-size:.73rem; word-break:break-all; }
.bj-data input { width:100%; margin-top:8px; border:1px solid #ffffff38; background:#1a2829; color:#fff; border-radius:5px; padding:7px; font-size:.76rem; }
.bj-data small { display:block; margin-top:5px; color:#aeb7b2; font-size:.62rem; }
.bj-last-round { padding:16px; background:#243138; border:1px solid #d7f4cb21; border-radius:8px; }
.bj-last-round>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bj-last-round strong { color:#e9f4df; font-size:.84rem; }
.bj-proof-fields { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:15px 0; }
.bj-proof-fields p { min-width:0; margin:0; padding:9px; background:#111d1f; border-radius:5px; }
.bj-proof-fields code { display:block; margin-top:5px; color:#d6ead1; font-size:.69rem; line-height:1.35; word-break:break-all; }
.bj-last-round button { border:1px solid #bce77d; background:#abed3520; color:#d9f3bc; padding:9px 13px; border-radius:6px; font-weight:800; }
.bj-verify-result { display:inline-block; margin-left:11px; color:#dcf4c5; letter-spacing:0; }
.bj-no-rounds,.bj-fair-disclosure { color:#aeb9b2; font-size:.75rem; line-height:1.5; }
.bj-fair-disclosure { margin:16px 0 0; }
.bj-history { display:grid; gap:7px; }
.bj-history button { display:grid; grid-template-columns:1fr 1fr auto; gap:9px; text-align:left; align-items:center; padding:11px 13px; border:1px solid #ffffff1b; background:#111a1d; color:#e8eee7; border-radius:6px; }
.bj-history button:hover { border-color:#b6e777; }
.bj-history em { font-style:normal; color:#f3b8b8; }
.bj-history em.positive { color:#c6f28e; }
.bj-history p { color:#b7c3bc; margin:0; }
.bj-rules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.bj-rules h3 { font-size:.9rem; margin:0 0 6px; }
@media(max-width:1000px) { #blackjack-root { grid-template-columns:minmax(0,1fr) 270px; } .bj-table { padding:24px 17px 16px; } .bj-fairness-grid { grid-template-columns:1fr 1fr; } .bj-data:last-child { grid-column:1/-1; min-height:70px; } }
@media(max-width:760px) { .bj-page { padding:25px 12px 70px; } .bj-heading { align-items:start; } .bj-heading h1 { font-size:3rem; } .bj-heading p { font-size:.79rem; } .bj-demo-pill { font-size:.58rem; padding:7px; } #blackjack-root { display:block; } .bj-table { min-height:475px; padding:18px 12px 14px; border-radius:12px; } .bj-table::before { inset:10px; } .bj-table-top,.bj-table-bottom { font-size:.54rem; } .bj-card { width:52px; height:74px; padding:5px; } .bj-card strong { font-size:1.25rem; } .bj-card span { font-size:.8rem; } .bj-card span small { font-size:.57rem; } .bj-card-back span { font-size:1.05rem; } .bj-card-back small { font-size:.43rem; } .bj-card-row { gap:3px; } .bj-hand { min-width:125px; padding:5px; } .bj-hand-label { font-size:.58rem; } .bj-hand-label b { min-width:22px; height:22px; font-size:.66rem; } .bj-table-arc { height:42px; padding-top:8px; font-size:.5rem; } .bj-dealer-area { min-height:105px; } .bj-player-area { min-height:115px; gap:0; } .bj-controls { margin-top:10px; gap:12px; } .bj-control-note { margin-top:0; } .bj-lower { margin-top:14px; } .bj-fairness,.bj-rules,.bj-history { padding:15px; } .bj-fairness-grid,.bj-proof-fields,.bj-rules { grid-template-columns:1fr; } .bj-data:last-child { grid-column:auto; } .bj-last-round>div:first-child { align-items:start; flex-direction:column; } .bj-verify-result { display:block; margin:9px 0 0; } }
@media(prefers-reduced-motion:reduce) { .bj-page * { scroll-behavior:auto !important; transition:none !important; } }