/* ======================================================================
   Casino: Blackjack-Tisch (Samt in der Farbwelt, goldener Rand), Karten, Chips
   ====================================================================== */
.casino-game .gc-play{width:44px;height:44px;font-size:18px;display:flex;align-items:center;justify-content:center}

.bj-bal{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:16px;background:var(--glass-strong);
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- Tisch ---------- */
.bj-table{position:relative;display:flex;flex-direction:column;gap:14px;min-height:410px;padding:18px 14px 20px;border-radius:30px;color:#fff;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,rgba(255,255,255,.16),transparent 70%),
    radial-gradient(ellipse at 50% 120%,rgba(0,0,0,.35),transparent 60%),
    linear-gradient(160deg,color-mix(in srgb,var(--accent) 62%,#2a0016),color-mix(in srgb,var(--accent) 32%,#0e0008));
  box-shadow:inset 0 0 0 3px rgba(255,214,120,.55),inset 0 0 0 7px rgba(0,0,0,.12),inset 0 2px 30px rgba(0,0,0,.25),0 14px 34px rgba(var(--shadow),.3)}
.bj-table::before{content:'BLACKJACK ZAHLT 3 : 2';position:absolute;left:0;right:0;top:calc(50% - 14px);transform:translateY(-50%);text-align:center;
  font-size:11px;font-weight:700;letter-spacing:3px;color:rgba(255,230,170,.38);pointer-events:none}
.bj-table::after{content:'Dealer zieht bis 16 · steht ab 17';position:absolute;left:0;right:0;top:calc(50% + 2px);text-align:center;
  font-family:'Caveat',cursive;font-size:17px;color:rgba(255,230,170,.32);pointer-events:none}
.bj-zone{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:130px}
.bj-label{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.5px;color:rgba(255,255,255,.85)}
.bj-score{min-width:30px;padding:2px 9px;border-radius:12px;background:rgba(0,0,0,.28);font-size:14px;font-variant-numeric:tabular-nums;text-align:center}
.bj-score:empty{display:none}
.bj-empty{margin:auto;font-family:'Caveat',cursive;font-size:26px;color:rgba(255,240,210,.8);position:relative;z-index:1}
.bj-hands{display:flex;justify-content:center;gap:12px;margin-top:auto;position:relative;z-index:1}
.bj-hand{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px;border-radius:20px;transition:background .3s,box-shadow .3s}
.bj-hand.active{background:rgba(255,255,255,.12);box-shadow:0 0 0 2px rgba(255,214,120,.8)}
.bj-hands.two .bj-hand{flex:1;min-width:0}
.bj-stake{display:inline-flex;align-items:center;gap:4px;padding:2px 9px 2px 4px;border-radius:12px;background:rgba(0,0,0,.28);font-variant-numeric:tabular-nums}
.bj-stake .coin{width:15px;height:15px}
.bj-stake .coin::after{font-size:9px}
.bj-res{padding:2px 9px;border-radius:12px;font-size:12px}
.bj-res.win,.bj-res.blackjack{background:#ffd45c;color:#6b3a00}
.bj-res.push{background:rgba(255,255,255,.85);color:#555}
.bj-res.lose,.bj-res.bust{background:rgba(0,0,0,.35);color:rgba(255,255,255,.8)}
.bj-table.over .bj-hand:not(:has(.bj-res.win)):not(:has(.bj-res.blackjack)) .bj-cards{opacity:.75}

/* ---------- Karten ---------- */
.bj-cards{display:flex;justify-content:center;min-height:96px;padding-left:30px}
.bj-hands.two .bj-cards{padding-left:24px}
.pcard{position:relative;flex-shrink:0;width:66px;height:96px;margin-left:-30px;border-radius:10px;background:#fffdfb;color:#2a1a24;
  box-shadow:0 4px 10px rgba(0,0,0,.28),inset 0 0 0 1px rgba(0,0,0,.06);font-family:'Quicksand',system-ui,sans-serif}
.bj-hands.two .pcard{width:56px;height:82px;margin-left:-24px}
.bj-hands.two .bj-cards{min-height:82px}
.pcard.red{color:#d42a5c}
.pc-corner{position:absolute;left:6px;top:4px;display:flex;flex-direction:column;align-items:center;line-height:1}
.pc-corner b{font-size:18px}
.pc-corner i{font-style:normal;font-size:14px}
.pc-suit{position:absolute;right:8px;bottom:6px;font-size:32px;line-height:1}
.bj-hands.two .pc-suit{font-size:26px}
.pcard.back{background:
  radial-gradient(circle at 50% 50%,rgba(255,255,255,.3) 0 18%,transparent 19%),
  repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 6px,transparent 6px 12px),
  linear-gradient(135deg,var(--accent2),var(--accent));
  box-shadow:0 4px 10px rgba(0,0,0,.28),inset 0 0 0 4px #fffdfb}
.pcard.back::after{content:'♥';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px}
.pcard.deal{animation:cardDeal .42s cubic-bezier(.2,.9,.3,1.1) both}
.pcard.flip{animation:cardFlip .5s ease both}
@keyframes cardDeal{from{transform:translate(70px,-160px) rotate(-25deg) scale(.7);opacity:0}to{transform:none;opacity:1}}
@keyframes cardFlip{0%{transform:rotateY(90deg)}100%{transform:none}}

/* ---------- Ergebnis ---------- */
.bj-banner{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);padding:12px 22px;border-radius:24px;white-space:nowrap;
  font-size:19px;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.3);animation:bannerIn .45s cubic-bezier(.2,.9,.3,1.3)}
.bj-banner.win{background:linear-gradient(135deg,#fff3c4,#ffd45c);color:#6b3a00}
.bj-banner.push{background:#fffdfb;color:#5a4a55}
.bj-banner.lose{background:rgba(20,0,10,.75);color:#fff}
@keyframes bannerIn{from{transform:translate(-50%,-50%) scale(.6);opacity:0}}

/* ---------- Steuerung ---------- */
.bj-controls{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.bj-bet{display:flex;align-items:baseline;justify-content:center;gap:10px}
.bj-bet small{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--ink-soft)}
.bj-bet b{font-size:30px;font-variant-numeric:tabular-nums}
.bj-chips{display:flex;justify-content:center;gap:8px}
.bj-chip{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;font-size:15px;font-weight:700;color:#fff;position:relative;
  background:radial-gradient(circle,var(--c) 0 52%,#fff 53% 58%,var(--c) 59%);
  box-shadow:0 4px 10px rgba(0,0,0,.25),inset 0 0 0 3px rgba(255,255,255,.25);
  transition:transform .15s}
.bj-chip::before{content:'';position:absolute;inset:3px;border-radius:50%;border:3px dashed rgba(255,255,255,.75)}
.bj-chip:active{transform:scale(.9) translateY(2px)}
.bj-chip:disabled{opacity:.35;cursor:default}
.bj-chip.c5{--c:#e0457b}
.bj-chip.c10{--c:#7b5cd6}
.bj-chip.c25{--c:#2a9d8f}
.bj-chip.c50{--c:#f08a24}
.bj-chip.c100{--c:#2b2b3a}
.bj-actions{flex-direction:row;flex-wrap:wrap}
.bj-act{flex:1 1 calc(50% - 6px);min-height:58px;border:none;border-radius:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--glass-strong);color:var(--ink);font-size:16px;font-weight:700;box-shadow:0 6px 16px rgba(var(--shadow),.14);border:1px solid var(--glass-border)}
.bj-act span{font-size:18px}
.bj-act[data-act="hit"],.bj-act[data-act="stand"]{background:linear-gradient(135deg,var(--accent2),var(--accent));color:var(--accent-ink)}
.bj-act:active{transform:scale(.96)}
.bj-act:disabled{opacity:.45}
#bjMsg{margin-top:8px}
#bjMsg:empty{display:none}
.bj-note{margin-top:12px;font-size:12px;font-weight:600;color:var(--ink-soft);text-align:center;line-height:1.4}
.bj-rules{margin-top:12px}
.bj-rules li{grid-template-columns:28px 1fr}

@media (max-width:360px){
  .pcard{width:58px;height:84px;margin-left:-26px}
  .bj-chip{width:48px;height:48px;font-size:14px}
}