/* Capobi Blackjack – table, cards, animations */
.hint{color:var(--muted);font-weight:400;font-size:.85em;text-transform:none;letter-spacing:0}
.table-panel{padding:16px clamp(10px,2vw,22px)}
:root{--cw:clamp(52px,6.2vw,78px)}
.felt{position:relative;min-height:470px;border-radius:24px 24px 50% 50% / 24px 24px 22% 22%;border:8px solid #6b3e12;padding:16px 12px 26px;
  background:radial-gradient(ellipse at 50% 30%,#23885a,#0e4a2e 75%);box-shadow:inset 0 0 50px #000a,0 12px 30px #0008;overflow:hidden}
.shoe{position:absolute;top:12px;right:14px;width:74px;height:58px;border-radius:8px 8px 4px 4px;background:linear-gradient(160deg,#3a2a14,#1b1206);border:2px solid #c9912f;box-shadow:0 4px 10px #0009;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:3px}
.shoe-cards{position:absolute;top:6px;left:8px;width:52px;height:30px;border-radius:4px;background:repeating-linear-gradient(90deg,#fff 0 2px,#ddd 2px 3px);transform:skewX(-12deg);box-shadow:inset 0 0 0 2px #7c3aed}
.shoe-label{font-size:.58rem;color:#f4e6c4;position:relative;white-space:nowrap}
.dealer{display:flex;flex-direction:column;align-items:center;min-height:calc(var(--cw) * 1.4 + 30px)}
.area-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:#e9f5ec;margin-bottom:6px;display:flex;gap:8px;align-items:center}
.felt-text{text-align:center;color:#f6e7b0;font-weight:800;letter-spacing:.14em;font-size:clamp(.6rem,1.3vw,.82rem);margin:12px auto 14px;opacity:.9;text-shadow:0 1px 2px #0008;max-width:90%}
.cards{display:flex;justify-content:center;min-height:calc(var(--cw) * 1.4)}
.cards .card+.card{margin-left:calc(var(--cw) * -0.55)}
.dealer-cards .card+.card{margin-left:calc(var(--cw) * -0.35)}
.card{width:var(--cw);height:calc(var(--cw) * 1.4);border-radius:calc(var(--cw) * .1);background:linear-gradient(160deg,#fff,#f1eee6);color:#15121f;position:relative;flex:0 0 auto;
  box-shadow:0 3px 8px #0007;border:1px solid #0003;font-weight:800;font-family:Georgia,"Times New Roman",serif;backface-visibility:hidden}
.card.red{color:#c8102e}
.c-tl,.c-br{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.95;font-size:calc(var(--cw) * .26)}
.c-tl i,.c-br i{font-style:normal;font-size:.85em}
.c-tl{top:5%;left:7%}.c-br{bottom:5%;right:7%;transform:rotate(180deg)}
.c-mid{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw) * .56)}
.card.back{background:linear-gradient(135deg,#3b1f8a,#1b1140);border:3px solid #fff}
.back-art{position:absolute;inset:5px;border-radius:5px;border:1px solid #ffc83d88;background:repeating-linear-gradient(45deg,#ffc83d22 0 4px,transparent 4px 9px),radial-gradient(circle,#ff5fa255,transparent 60%)}
.back-art::after{content:"C";position:absolute;inset:0;display:grid;place-items:center;color:#ffc83d;font:900 calc(var(--cw) * .38) system-ui,sans-serif;text-shadow:0 0 8px #ffc83d}
.card.deal{animation:dealIn .38s cubic-bezier(.2,.8,.3,1) both}
@keyframes dealIn{from{transform:translate(var(--dx,300px),var(--dy,-200px)) rotate(-25deg) scale(.7);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
.card.flip{animation:flipIn .5s ease-out both}
@keyframes flipIn{from{transform:rotateY(90deg) scale(1.05)}to{transform:none}}
.boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;margin-top:8px}
.box{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;min-width:0}
.hands{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 6px;min-height:calc(var(--cw) * 1.4 + 26px);align-items:flex-end}
.hand{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;border-radius:12px;transition:background .2s,box-shadow .2s;position:relative}
.hand.active{background:#ffc83d22;box-shadow:0 0 0 2px var(--accent),0 0 18px #ffc83d66}
.hand.is-bust .cards,.hand.r-lose .cards{opacity:.55;filter:grayscale(.4)}
.hand-meta{display:flex;gap:6px;align-items:center;font-size:.72rem}
.total-badge{background:#0e0828dd;border:1px solid #fff5;border-radius:999px;padding:1px 8px;font-weight:800;font-size:.78rem;color:#fff;font-family:system-ui,sans-serif}
.total-badge.bust{background:#b3125a}.total-badge.bj{background:linear-gradient(135deg,var(--accent),#ff9a3d);color:#2a1600}
.hand-amt{color:#f6e7b0;font-weight:700}
.res{position:absolute;top:30%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:3px 9px;border-radius:999px;font-weight:900;font-size:.74rem;animation:pop .45s cubic-bezier(.2,1.6,.4,1) both;box-shadow:0 4px 12px #0009;z-index:2;font-family:system-ui,sans-serif}
.res-blackjack,.res-win{background:linear-gradient(135deg,var(--accent),#ff9a3d);color:#2a1600}
.res-push,.res-surrender{background:#3b82f6;color:#fff}
.res-lose,.res-bust{background:#2a1a3e;color:#ff8fab;border:1px solid #ff8fab66}
.spot{width:68px;height:68px;border-radius:50%;border:3px dashed #f6e7b0aa;background:#ffffff0d;display:grid;place-items:center;cursor:pointer;color:#f6e7b0;font:inherit;transition:background .15s,transform .1s}
.spot:disabled{cursor:default}
.box.placeable .spot:hover{background:#ffffff22;transform:scale(1.05)}
.spot.has{border-style:solid}
.spot-lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.spot-x{position:absolute;bottom:48px;right:calc(50% - 44px);width:22px;height:22px;border-radius:50%;border:none;background:#0e0828;color:#fff;cursor:pointer;font-weight:900;line-height:1;box-shadow:0 2px 6px #0008}
.chipmark{min-width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:900;color:#fff;border:4px dashed #fffa;box-shadow:0 4px 8px #000a;padding:0 3px;animation:chipin .2s ease-out}
@keyframes chipin{from{transform:translateY(-30px) scale(1.3);opacity:0}}
.c2{background:#8b8b9e}.c10{background:#2563eb}.c20{background:#16a34a}.c50{background:#d97706}.c100{background:#111;color:#ffe083}

.msg-bar{margin:14px auto 4px;text-align:center;min-height:2.6em;font-size:1.05rem;display:flex;align-items:center;justify-content:center;flex-direction:column}
.msg-bar .big{font-size:1.5rem;font-weight:900;color:var(--accent);text-shadow:0 0 18px #ffc83d88}
.msg-bar .sub{font-size:.85rem;color:var(--muted)}
.hint-line{text-align:center;font-size:.92rem;margin:0 auto 4px;background:#35d39922;border:1px solid #35d39966;border-radius:10px;padding:5px 12px;width:max-content;max-width:100%}
.controls{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;justify-content:center;margin-top:10px}
.ctrl{display:flex;flex-direction:column;gap:5px}
.chips{display:flex;gap:6px}
.chip{width:46px;height:46px;border-radius:50%;border:4px dashed #fffc;color:#fff;font:inherit;font-weight:900;cursor:pointer;box-shadow:0 4px 10px #0008;transition:transform .12s}
.chip[aria-checked=true]{transform:translateY(-5px) scale(1.08);box-shadow:0 0 0 3px var(--accent),0 8px 18px #000a}
.total strong{font-size:1.2rem;color:var(--accent)}
.ctrl-buttons{flex-wrap:wrap;justify-content:center}
.ctrl-buttons.play .btn{min-width:104px;display:flex;flex-direction:column;align-items:center;padding:9px 14px}
.btn.act b{font-size:1.05rem}.btn.act small{font-size:.7rem;color:var(--muted);font-weight:500}
.btn.act.hinted{box-shadow:0 0 0 3px var(--ok),0 0 16px #35d39988;background:#35d39933}
#hitBtn:not(:disabled){background:linear-gradient(135deg,#16a34a55,#16a34a22)}
#standBtn:not(:disabled){background:linear-gradient(135deg,#dc262655,#dc262622)}
.ins-q{width:100%;text-align:center}
.subbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.toggle{display:flex;gap:8px;align-items:center;cursor:pointer;font-size:.9rem}
.toggle input{width:18px;height:18px;accent-color:var(--accent)}
body.busy .spot{cursor:wait}

@media (max-width:640px){
  :root{--cw:44px}
  .top-actions{gap:5px;flex-wrap:nowrap;width:100%;justify-content:space-between}.icon-btn{padding:6px 7px;font-size:.9rem}.balance{padding:3px 8px}.balance-dbv{font-size:1rem}.balance-local{font-size:.66rem}.value-in select{padding:6px;max-width:76px}
  .table-panel{padding:10px 6px}
  .felt{padding:12px 4px 22px;min-height:400px;border-width:6px}
  .shoe{transform:scale(.8);transform-origin:top right;top:8px;right:8px}
  .boxes{gap:4px}
  .hands{gap:6px 2px}
  .spot{width:56px;height:56px}
  .chipmark{min-width:36px;height:36px;font-size:.7rem;border-width:3px}
  .spot-x{bottom:40px;right:calc(50% - 38px)}
  .chip{width:42px;height:42px}
  .btn.spin{width:78px;height:78px}
  .ctrl-buttons.play .btn{min-width:0;flex:1 1 40%;padding:8px}
  .res{font-size:.62rem;padding:2px 6px}
}
/* result banner over the table (js/result-banner.js + css/result-banner.css) */
.felt .rb-live{top:46%;width:min(92%,440px)}

/* big, high-contrast hand totals (dealer next to the label, each player hand above its cards) + larger result tags */
.area-label{font-size:.95rem;gap:10px}
.total-badge{display:inline-block;min-width:2.3em;text-align:center;font-size:1.55rem;line-height:1.15;padding:4px 14px;border:2px solid #fffc;border-radius:14px;
  background:#0b0620f2;color:#fff;font-weight:900;letter-spacing:.02em;box-shadow:0 4px 14px #000b;text-transform:none;font-family:system-ui,sans-serif}
.total-badge.bj,.total-badge.x21{background:linear-gradient(135deg,#ffe27a,#ffb020 55%,#ff8a1f);color:#2a1600;border-color:#fff6c8;box-shadow:0 0 0 3px #ffc83d66,0 0 22px #ffc83dcc}
.total-badge.bust{background:linear-gradient(135deg,#ff3b5c,#c1122f);color:#fff;border-color:#ffd0d8;box-shadow:0 0 0 3px #ff3b5c55,0 0 18px #ff3b5caa}
.hand-total{display:flex;justify-content:center;margin-bottom:2px}
.hand.is-bust .hand-total,.hand.r-lose .hand-total{opacity:1}
.hand-meta{font-size:.8rem}
.res{top:auto;bottom:34%;font-size:1.15rem;padding:6px 16px;border-width:2px;box-shadow:0 6px 18px #000c}
@media (max-width:760px){
  .total-badge{font-size:1.2rem;padding:3px 10px;border-radius:12px}
  .area-label{font-size:.85rem}
  .res{font-size:.95rem;padding:5px 11px}
  /* phones: the result tag sits under the cards (inside the box), so it is never cut off at the felt edge */
  .res{position:static;transform:none;bottom:auto;white-space:normal;text-align:center;max-width:100%;line-height:1.2;margin-top:2px}
}
@media (max-width:420px){
  .total-badge{font-size:1.05rem;padding:2px 8px}
  .res{font-size:.85rem;padding:4px 9px}
}