/* av-bj.css — Blackjack and Ace Blackjack (shared). Shell tokens and Inter only. Violet = action, green = win, red = loss. */
:root{
  --bg:var(--av-bg);--bg2:var(--av-panel);--bg3:var(--av-raised);--panel:var(--av-panel);
  --line:var(--av-line);--line2:var(--av-line);
  --text:var(--av-white);--muted:var(--av-muted);--muted2:var(--av-muted);
  --green:#10B981;--green2:var(--av-win);--red:var(--av-loss);--gold:#FCD34D;
  --topbar:44px;--radius:var(--av-r);--mono:var(--av-font);--sans:var(--av-font);
  --cw:78px;--ch:110px;--ov:-34px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--av-bg);color:var(--av-text);font-family:var(--av-font);font-variant-numeric:tabular-nums}
button{font-family:inherit}

/* loading */
#av-loading{position:fixed;inset:0;background:var(--av-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:9999;transition:opacity .3s}
#av-loading img{width:64px;height:64px;border-radius:50%;opacity:.72;animation:loadSpin 2s linear infinite}
#av-load-status{font-size:13px;color:var(--av-muted)}
#av-load-err{font-size:13px;color:var(--av-loss);display:none;max-width:340px;text-align:center;line-height:1.6;padding:0 16px}
#av-load-back{font-size:13px;color:var(--av-muted);text-decoration:none;margin-top:8px;display:inline-block}
@keyframes loadSpin{to{transform:rotate(360deg)}}

/* top bar (built by buildStandardTopbar) */
#topbar{position:fixed;top:var(--av-nav,52px);left:0;right:0;height:var(--topbar);z-index:490;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 16px;gap:8px;background:var(--av-bg);border-bottom:1px solid var(--av-line)}
.tb-center{display:flex;align-items:center;gap:18px;justify-content:center;overflow:hidden}
.tb-right{display:flex;align-items:center;gap:6px}
.btn-ghost{background:none;border:1px solid var(--av-line);color:var(--av-text);font:600 12px/1 var(--av-font);padding:6px 10px;border-radius:var(--av-r);cursor:pointer;transition:border-color .15s,color .15s;-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center}
.btn-ghost:hover{border-color:var(--av-accent-soft);color:var(--av-white)}
#topbar .tb-stake-badge,.tb-stake-badge{display:none!important}

/* layout */
#main{display:flex;height:calc(100dvh - var(--av-nav,52px) - var(--topbar));overflow:hidden;margin-top:calc(var(--av-nav,52px) + var(--topbar))}
#game-area{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;min-width:0;z-index:0}
#table-flash{position:absolute;inset:0;pointer-events:none;z-index:10;opacity:0}
#table-flash.win{animation:flashWin .8s ease forwards}
#table-flash.loss{animation:flashLoss .8s ease forwards}
@keyframes flashWin{0%{opacity:0}20%{opacity:1;box-shadow:inset 0 0 70px rgba(16,185,129,.22);background:rgba(16,185,129,.05)}100%{opacity:0;background:transparent}}
@keyframes flashLoss{0%{opacity:0}20%{opacity:1;box-shadow:inset 0 0 70px rgba(240,97,109,.2);background:rgba(240,97,109,.04)}100%{opacity:0;background:transparent}}
#stage{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 14px 6px;display:flex;flex-direction:column;align-items:center;min-height:0;position:relative}
#bj-table{width:min(100%,560px);margin:auto 0;display:flex;flex-direction:column;gap:10px}
#notif-bar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:80;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.notif-toast{background:var(--av-panel);border:1px solid var(--av-line);border-radius:var(--av-r);padding:8px 18px;font-size:13px;color:var(--av-white);animation:toastIn .2s ease,toastOut .3s ease 2.3s forwards;text-align:center;white-space:nowrap}
@keyframes toastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-6px)}}

/* table */
.zone{display:flex;flex-direction:column;gap:6px;min-height:calc(var(--ch) + 34px)}
.zhead{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--av-muted);min-height:24px}
.zhead b{color:var(--av-white);font-weight:600}
.tot{background:var(--av-raised);color:var(--av-white);font-weight:700;font-size:13px;padding:2px 10px;border-radius:999px;min-width:30px;text-align:center;white-space:nowrap}
.tot.bust{background:var(--av-loss-bg);color:var(--av-loss)}.tot.nat{background:var(--av-win-bg);color:var(--av-win)}
.cards{display:flex;min-height:var(--ch);align-items:center}
.cards .card:not(:first-child){margin-left:var(--ov)}
.hands{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hand{display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:8px 10px 10px;border-radius:12px;border:1px solid transparent;transition:border-color .15s,background .15s}
.hand.active{border-color:var(--av-accent);background:var(--av-accent-bg)}
.hhead{display:flex;align-items:center;justify-content:space-between;gap:14px}
.token{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;color:var(--av-white)}
.token::before{content:"";width:14px;height:14px;border-radius:50%;background:#C79A2E;border:2px dashed rgba(255,255,255,.7)}
.hand .cards{justify-content:center}
.hres{display:flex;justify-content:center;min-height:22px}
.res{font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px}
.res.w{background:var(--av-win-bg);color:var(--av-win)}.res.l{background:var(--av-loss-bg);color:var(--av-loss)}.res.p{background:var(--av-raised);color:var(--av-text)}

/* cards: same face as Hi-Lo; the back is the VirtuAce spade (central rule in css/av-ui.css) */
.card{width:var(--cw);height:var(--ch);border-radius:10px;background:#F7F8FB;color:#1B2433;position:relative;box-shadow:0 6px 16px rgba(0,0,0,.5);flex-shrink:0}
.card.red{color:#D33D4F}
.card .r{position:absolute;top:6px;left:8px;font-weight:800;font-size:calc(var(--cw)*.27);line-height:1}
.card .s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cw)*.55);line-height:1}
.card .r2{position:absolute;bottom:6px;right:8px;font-weight:800;font-size:calc(var(--cw)*.27);line-height:1;transform:rotate(180deg)}
.card.av-card-back{background:linear-gradient(145deg,#4A3499,#2A1B63)}
.card.fly{animation:fly .38s cubic-bezier(.2,.8,.25,1) both}
@keyframes fly{0%{transform:translate(var(--fx,150px),var(--fy,-130px)) rotate(14deg) scale(.82);opacity:0}15%{opacity:1}100%{transform:none;opacity:1}}
.card.turn{animation:turn .3s ease-out both}
@keyframes turn{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.card.bonus{box-shadow:0 0 0 2px var(--av-accent),0 0 18px rgba(139,92,246,.55)}
.card .rib{position:absolute;left:0;right:0;bottom:0;background:var(--av-accent);color:#fff;font:700 9px var(--av-font);text-align:center;padding:2px 0;border-radius:0 0 8px 8px}
.card.jester{background:linear-gradient(160deg,#2A1B63,#141B2B);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1.5px solid var(--av-accent);box-shadow:0 0 0 2px rgba(139,92,246,.25),0 0 18px rgba(139,92,246,.5)}
.cards .card.jester,.cards .card.jester+.card{margin-left:calc(var(--ov)*.3)}
.card.jester .jsvg{width:62%;height:auto}
.card.jester .jl{font:700 calc(var(--cw)*.16) var(--av-font);color:var(--av-accent-soft);letter-spacing:.04em}

.status{min-height:34px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--av-white);text-align:center;flex-direction:column}
.status.win{color:var(--av-win)}.status.loss{color:var(--av-loss)}.status small{font-size:13px;font-weight:500;color:var(--av-muted)}
.sidenote{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;font-size:12px;min-height:6px}
.sidenote span{padding:2px 9px;border-radius:999px;background:var(--av-raised);color:var(--av-text)}
.sidenote span.w{background:var(--av-win-bg);color:var(--av-win)}.sidenote span.l{color:var(--av-muted)}
.bnote{font-size:12px;color:var(--av-accent-soft);text-align:center;min-height:16px}

/* controls */
#bottom-zone{border-top:1px solid var(--av-line);background:var(--av-bg);padding:8px 14px 12px;display:flex;flex-direction:column;gap:8px;width:100%}
#bottom-zone>*{width:min(100%,560px);margin-left:auto;margin-right:auto}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.act{min-height:50px;border-radius:10px;border:1px solid var(--av-line);background:var(--av-panel);color:var(--av-white);font:700 15px var(--av-font);cursor:pointer;transition:background .12s,transform .08s,border-color .12s}
.act:hover:not(:disabled){border-color:var(--av-accent-soft)}
.act:active:not(:disabled){transform:scale(.98)}
.act:disabled{opacity:.35;cursor:default}
.act.pri{background:var(--av-accent);border-color:var(--av-accent);color:#fff}
.act.pri:hover:not(:disabled){background:var(--av-accent-hi)}
.ins{display:flex;flex-direction:column;gap:8px;align-items:center}
.ins p{font-size:14px;color:var(--av-text);text-align:center}.ins b{color:var(--av-white)}.ins .acts{width:100%}
.sm{font:600 12px var(--av-font);min-height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--av-line);background:var(--av-panel);color:var(--av-text);cursor:pointer}
.sm:hover{border-color:var(--av-accent-soft);color:var(--av-white)}
.sm.on{border-color:var(--av-accent);color:var(--av-accent-soft);background:var(--av-accent-bg)}
.bet{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bet .amt{font-size:24px;font-weight:700;color:var(--av-white)}.bet .amt small{font-size:12px;font-weight:500;color:var(--av-muted);margin-left:4px}
.bet .acts2{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#chip-row{display:flex;align-items:center;justify-content:center;gap:8px}
#chip-strip{display:flex;gap:5px;align-items:center;flex-shrink:0}
#limits-lbl{text-align:center;font-size:12px;color:var(--av-muted)}
.sidebets{border:1px solid var(--av-line);border-radius:10px;background:var(--av-panel);overflow:hidden}
.sbhead{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-size:13px;font-weight:600;color:var(--av-white);cursor:pointer}
.sbhead span{color:var(--av-muted);font-weight:500}
.sbrow{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--av-line);font-size:13px}
.sbrow .n{color:var(--av-white);font-weight:600}.sbrow .n small{display:block;font-weight:500;color:var(--av-muted);font-size:11px}
.sbrow .ctl{display:flex;align-items:center;gap:8px}.sbrow .ctl b{min-width:34px;text-align:center;color:var(--av-white)}
.sbrow .ctl .c1{display:flex;align-items:center;gap:6px}
.sbrow .ctl button{width:30px;height:30px;border-radius:8px;border:1px solid var(--av-line);background:var(--av-raised);color:var(--av-white);font:700 16px var(--av-font);cursor:pointer}
.go-main{min-height:50px;border:0;border-radius:10px;background:var(--av-accent);color:#fff;font:700 16px var(--av-font);cursor:pointer;width:100%}
.go-main:hover{background:var(--av-accent-hi)}.go-main:disabled{opacity:.45;cursor:default}
.rule{font-size:11px;color:var(--av-muted);text-align:center}

/* side panel (tabs built by AV_Panel) */
#sidebar{width:238px;flex-shrink:0;border-left:1px solid var(--av-line);display:flex;flex-direction:column;overflow:hidden;background:var(--av-bg)}
.sb-sec{border-bottom:1px solid var(--av-line);padding:12px 14px}
.sb-title{font-size:12px;font-weight:600;color:var(--av-muted);margin-bottom:8px}
.sb-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.sb-row:last-child{margin-bottom:0}
.sb-lbl{font-size:13px;color:var(--av-muted)}
.sb-val{font-size:13px;font-weight:600}
.sb-val.pos{color:var(--av-win)}.sb-val.neg{color:var(--av-loss)}
#session-chart-bar{display:none;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--av-line)}
#session-chart-bar.visible{display:flex!important}
#chart-pl-label{font-size:13px;font-weight:600;white-space:nowrap}
#chart-pl-label.pos{color:var(--av-win)}#chart-pl-label.neg{color:var(--av-loss)}#chart-pl-label.zero{color:var(--av-muted)}
#chart-canvas-wrap{flex:1;height:36px;position:relative;overflow:hidden;min-width:0}
#session-chart-canvas{width:100%;height:100%;display:block}
#rules-sec{border-bottom:1px solid var(--av-line)}
#rules-toggle{display:none}
#rules-body{overflow:hidden}
.rb{padding:12px 14px;border-bottom:1px solid var(--av-line)}
.rb:last-child{border-bottom:0}
.rb h4{font-size:12px;font-weight:600;color:var(--av-accent-soft);margin-bottom:6px}
.rb div{font-size:12.5px;color:var(--av-text);line-height:1.55}
.sb-log-hdr{font-size:12px;font-weight:600;color:var(--av-muted);padding:11px 14px 5px}
#round-log{flex:1;overflow-y:auto;padding:0 12px 12px;display:flex;flex-direction:column;gap:4px}
.log-entry{background:var(--av-panel);border:1px solid var(--av-line);border-radius:6px;padding:6px 8px;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.log-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.log-diff{font-size:12px;font-weight:600;color:var(--av-white)}
.log-detail{font-size:12px;color:var(--av-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-pl{font-weight:700;flex-shrink:0;font-size:13px}
.log-pl.pos{color:var(--av-win)}.log-pl.neg{color:var(--av-loss)}.log-pl.push{color:var(--av-muted)}

/* responsive */
@media(max-width:720px){
  :root{--topbar:42px;--cw:62px;--ch:88px;--ov:-28px}
  #main{display:block;overflow:hidden}
  #game-area{height:100%;display:flex;flex-direction:column}
  #stage{padding:8px 18px 4px 12px}
  #bottom-zone{padding:6px 18px 10px 12px}
  #sidebar{position:fixed;top:calc(var(--av-nav,52px) + var(--topbar));right:0;bottom:0;z-index:650;width:min(88vw,300px);border-left:1px solid var(--av-line);background:var(--av-bg);transform:translateX(102%);transition:transform .24s cubic-bezier(.22,1,.36,1);box-shadow:-16px 0 40px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow-y:auto}
  #topbar{grid-template-columns:minmax(0,1fr) auto;padding:0 10px;gap:6px}
  .tb-center{display:none}
  .hand{padding:6px 6px 8px}
}
#rules-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:850;align-items:center;justify-content:center}

/* big screens: larger cards for Blackjack, Ace Blackjack and Free Bet Blackjack */
@media(min-width:1280px) and (min-height:860px){:root{--cw:98px;--ch:137px;--ov:-42px}#bj-table{width:min(100%,680px)}}
@media(min-width:1700px) and (min-height:1000px){:root{--cw:116px;--ch:162px;--ov:-50px}#bj-table{width:min(100%,780px)}}