/* Blackjack table styles: "Graphite & Vermilion" with depth, glass panels and a champagne metal accent.
   Fonts: CSS stack only, no files bundled. Green (sage) is used only for wins. */
:root{
  --bj-ink:#0b0c0d;--bj-felt:#24282b;--bj-felt2:#181b1d;--bj-chalk:#e9e4d8;--bj-mut:#8f9490;--bj-off:rgba(233,228,216,.28);
  --bj-line:rgba(233,228,216,.14);--bj-ver:#e8502e;--bj-ver2:#b93c1e;--bj-sage:#9dd3a6;--bj-card:#f6f1e6;--bj-blk:#1b1c1e;
  --bj-met:linear-gradient(135deg,#f1e6c9 0,#a8946a 45%,#f3e7c8 55%,#8c7a55 100%);--bj-met1:#cdb98f;
  --bj-glass:rgba(22,25,27,.55);
  --bj-serif:Fraunces,"Iowan Old Style",Georgia,serif;
  --bj-sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --bj-mono:"IBM Plex Mono",ui-monospace,Consolas,Menlo,monospace;
  --bj-card-w:84px;
}
.bj-svg{display:block;width:100%;height:100%}

/* glass panel: top bar, decision bar, prompts, banners */
.bj-glass{background:var(--bj-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--bj-line);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px rgba(0,0,0,.45)}

/* table with slight first-person perspective */
.bj-felt{position:relative;perspective:1100px;perspective-origin:50% 0;overflow:hidden;background:var(--bj-ink);border-radius:14px}
.bj-plane{transform:rotateX(16deg);transform-origin:50% 0;transform-style:preserve-3d}
@media (max-width:600px){.bj-plane{transform:rotateX(9deg)}}

/* cards: thickness is in the SVG, the shadow lifts it off the felt */
.bj-card{width:var(--bj-card-w);aspect-ratio:200/280;flex:none;position:relative;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)) drop-shadow(0 1px 1px rgba(0,0,0,.5));will-change:transform}
.bj-cards{display:flex}
.bj-cards .bj-card+.bj-card{margin-left:calc(var(--bj-card-w) * -.48)}
.bj-card.bj-side{transform:rotate(90deg);margin:0 calc(var(--bj-card-w) * .2)}
.bj-card.new{outline:2px solid var(--bj-ver);outline-offset:3px;border-radius:8px}
@media (max-width:600px){:root{--bj-card-w:56px}}

/* hand-total badges: bold, clear */
.bj-tot{display:inline-flex;align-items:center;gap:6px;min-width:40px;height:28px;padding:0 11px;border-radius:999px;justify-content:center;
  font:700 16px/1 var(--bj-mono);background:var(--bj-chalk);color:var(--bj-blk);box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 -2px 0 rgba(0,0,0,.12)}
.bj-tot.soft{background:var(--bj-glass);color:var(--bj-chalk);border:1.5px solid var(--bj-chalk);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bj-tot.bj{background:var(--bj-sage);color:var(--bj-blk);box-shadow:0 0 0 2px #c7ad79,0 4px 14px rgba(157,211,166,.35)}
.bj-tot.bust{background:var(--bj-ver);color:#fff}
.bj-tot small{font:700 10px var(--bj-sans);letter-spacing:1px}

/* chips + stack */
.bj-chip{width:58px;height:58px;flex:none;border-radius:50%;cursor:pointer;transition:transform .12s}
.bj-chip:active{transform:translateY(1px) scale(.95)}
.bj-chip.on{box-shadow:0 0 0 3px var(--bj-chalk)}
.bj-stack{position:relative;width:46px;height:46px}
.bj-stack .bj-chip{position:absolute;left:0;width:46px;height:46px}
@media (max-width:600px){.bj-chip{width:46px;height:46px}}

/* decision bar: every move shown; illegal ones greyed, never hidden */
.bj-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.bj-act{position:relative;overflow:hidden;flex:1 1 110px;max-width:160px;min-width:0;min-height:68px;padding:0 14px;border-radius:14px;cursor:pointer;
  border:1px solid var(--bj-line);background:rgba(255,255,255,.06);color:var(--bj-chalk);font:700 17px var(--bj-sans);
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 0 rgba(0,0,0,.35);transition:transform .1s,box-shadow .1s,background .15s,filter .15s}
.bj-act kbd{font:500 11px var(--bj-mono);color:var(--bj-mut)}
.bj-act:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}
.bj-act:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 rgba(0,0,0,.35)}
.bj-act:focus-visible{outline:2px solid var(--bj-met1);outline-offset:3px}
.bj-act.hit{background:var(--bj-chalk);color:var(--bj-blk);border-color:var(--bj-chalk)}.bj-act.hit kbd{color:#555}
.bj-act.stand{background:linear-gradient(180deg,#f0603d,var(--bj-ver2));color:#fff;border-color:var(--bj-ver)}.bj-act.stand kbd{color:#ffd9cf}
.bj-act.insure{border-color:var(--bj-met1);box-shadow:inset 0 0 0 1px rgba(205,185,143,.4),0 4px 0 rgba(0,0,0,.35)}
.bj-act.is-off,.bj-act:disabled{opacity:.3;filter:grayscale(1);cursor:not-allowed;box-shadow:none;transform:none}
/* micro-feedback ripple, added by BJAnim.press */
.bj-ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.25;pointer-events:none;transform:scale(0)}
/* phone: one-thumb, big Hit/Stand row at the bottom */
.bj-acts.phone{flex-direction:column-reverse;gap:8px;width:100%}
.bj-acts.phone .big{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bj-acts.phone .small{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bj-acts.phone .bj-act{min-width:0;max-width:none}
.bj-acts.phone .big .bj-act{min-height:76px;font-size:20px;border-radius:18px}
.bj-acts.phone .small .bj-act{min-height:48px;font-size:14px}
.bj-ins-btns{display:flex;gap:10px;justify-content:center}.bj-ins-btns .bj-act{min-height:52px}

/* split hands: phone shows them in a sideways strip */
.bj-hands{display:flex;gap:28px;align-items:flex-end;justify-content:center}
.bj-hand{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border-radius:14px;border:1px solid transparent}
.bj-hand.on{border-color:var(--bj-ver);background:rgba(232,80,46,.07);box-shadow:0 0 0 1px rgba(205,185,143,.25)}
.bj-hand.done{opacity:.6}
.bj-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 16px;scrollbar-width:none}
.bj-strip::-webkit-scrollbar{display:none}
.bj-strip .bj-hand{scroll-snap-align:center;flex:none;min-width:70%}

/* timer ring */
.bj-timer-host{width:48px;height:48px}
.bj-timer.low .bj-tr-p{stroke:var(--bj-ver)}

/* results: win (sage), push (neutral), lose (dim); bj and bigwin get the metal tier */
.bj-res{display:inline-flex;flex-direction:column;align-items:center;padding:10px 26px;border-radius:16px;text-align:center}
.bj-res small{font:600 11px var(--bj-sans);letter-spacing:2px;text-transform:uppercase;color:var(--bj-mut)}
.bj-res strong{font:600 34px var(--bj-mono);color:var(--bj-chalk)}
.bj-res.win{border-color:var(--bj-sage)}.bj-res.win strong{color:var(--bj-sage)}
.bj-res.push strong{color:var(--bj-chalk)}
.bj-res.lose strong{color:var(--bj-mut);font-size:22px}
.bj-res.bj,.bj-res.bigwin{border:1.5px solid var(--bj-met1);position:relative;overflow:hidden}
.bj-res.bj strong,.bj-res.bigwin strong{color:var(--bj-sage)}
.bj-res .bj-title{font:600 26px var(--bj-serif);background:var(--bj-met);-webkit-background-clip:text;background-clip:text;color:transparent}
.bj-sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,244,214,.35) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.bj-spark{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;background:var(--bj-met1)}

/* insurance prompt */
.bj-prompt{padding:20px 24px;text-align:center;max-width:420px}
.bj-prompt h3{font:600 22px var(--bj-serif);margin-bottom:6px;color:var(--bj-chalk)}
.bj-prompt p{color:var(--bj-mut);margin-bottom:14px;font:14px var(--bj-sans)}

/* reduced motion: OS setting or .bj-reduce on <html> */
@media (prefers-reduced-motion:reduce){.bj-act,.bj-chip{transition:none}.bj-act:hover:not(:disabled),.bj-act:active:not(:disabled),.bj-chip:active{transform:none}}
.bj-reduce .bj-act,.bj-reduce .bj-chip{transition:none}
.bj-reduce .bj-act:hover:not(:disabled),.bj-reduce .bj-act:active:not(:disabled),.bj-reduce .bj-chip:active{transform:none}