/* ===================== Blackjack — estilos ===================== */
.bj-topbar { display:flex; align-items:center; gap:var(--sp-3); }
.bj-balance { text-align:right; font-size:var(--fs-xs); color:var(--c-text-muted); line-height:1.2; }
.bj-balance b { font-family:var(--font-mono); font-size:var(--fs-lg); color:var(--c-gold); }

.bj-layout { display:grid; grid-template-columns:1fr 280px; gap:var(--sp-6); align-items:start; }
@media (max-width:940px){ .bj-layout{ grid-template-columns:1fr; } }

.bj-table { background:var(--grad-felt); border:3px solid var(--c-gold-deep); border-radius:var(--r-lg); padding:var(--sp-6); min-height:380px; box-shadow:var(--shadow-md), inset 0 0 80px rgba(0,0,0,.35); }
.bj-row-label { color:#eafaf0; font-size:var(--fs-sm); margin-bottom:.4rem; }
.bj-row-label b { font-family:var(--font-mono); color:#fff; font-size:var(--fs-md); }
.bj-dealer { margin-bottom:var(--sp-6); }
.bj-players { display:flex; gap:var(--sp-5); flex-wrap:wrap; }
.bj-hand { padding:var(--sp-3); border-radius:var(--r-md); border:2px solid transparent; }
.bj-hand.active { border-color:var(--c-gold); background:rgba(0,0,0,.15); }
.bj-hand.o-win, .bj-hand.o-blackjack { border-color:var(--c-success); }
.bj-hand.o-lose, .bj-hand.o-bust { border-color:var(--c-danger); }
.bj-out { font-family:var(--font-mono); font-weight:700; margin-left:.4rem; }
.bj-out.pos{ color:#7CFFB0; } .bj-out.neg{ color:#ff9aa2; }

.bj-cards { display:flex; gap:.5rem; flex-wrap:wrap; }
.bj-card {
  width:62px; height:88px; border-radius:8px; background:#fbfbf7; color:#15181a;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; box-shadow:0 4px 10px rgba(0,0,0,.4);
  border:1px solid #0002; position:relative; animation:bjDeal .25s ease;
}
.bj-card .r { font-size:1.5rem; line-height:1; }
.bj-card .s { font-size:1.1rem; }
.bj-card.red { color:#c4202b; }
.bj-card.back { background:repeating-linear-gradient(45deg,#0f5132,#0f5132 6px,#0a3b24 6px,#0a3b24 12px); border:2px solid var(--c-gold-deep); }
@keyframes bjDeal { from{ transform:translateY(-12px) scale(.9); opacity:0; } to{ transform:none; opacity:1; } }

.bj-controls { margin-top:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4); }
.bj-chips { display:flex; gap:var(--sp-3); }
.bj-chip { width:46px; height:46px; border-radius:50%; cursor:pointer; background:radial-gradient(circle at 50% 35%,#1a231d,#0e1310); border:3px dashed var(--c-border-strong); color:var(--c-text); font-weight:800; font-family:var(--font-mono); }
.bj-chip.sel { border-color:var(--c-gold); box-shadow:0 0 0 2px var(--c-gold); color:var(--c-gold); }
.bj-actions { display:flex; gap:var(--sp-3); flex-wrap:wrap; }

.bj-advice { min-height:1.4em; color:var(--c-gold-soft); font-weight:600; }

/* Panel de conteo */
.bj-side { display:flex; flex-direction:column; gap:var(--sp-4); }
.bj-trainer-toggle { display:flex; align-items:center; gap:.6rem; background:var(--glass-bg); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:var(--r-md); padding:var(--sp-4); box-shadow:var(--glass-hi); }
.bj-trainer-toggle input { width:18px; height:18px; accent-color:var(--c-gold); }
#countPanel { background:var(--glass-bg); backdrop-filter:var(--glass-blur); border:1px solid rgba(30,144,255,.45); border-radius:var(--r-md); padding:var(--sp-4); box-shadow:var(--shadow-glass); }
#countPanel.hidden { display:none; }
.bj-count-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:var(--sp-3); }
.bj-count-grid > div { background:var(--c-bg-2); border:1px solid var(--c-border); border-radius:var(--r-sm); padding:.5rem .7rem; }
.bj-count-grid span { display:block; font-size:var(--fs-xs); color:var(--c-text-muted); }
.bj-count-grid b { font-family:var(--font-mono); font-size:var(--fs-xl); color:var(--c-gold); }