/* public/games/blackjack/blackjack.css */
body { min-height:100vh; display:flex; flex-direction:column; }

.bj-layout { min-height:100vh; display:flex; flex-direction:column; position:relative; z-index:1; }

/* ── Table felt ───────────────────────────────────────── */
/* A1.T08: richer radial gradient + noise overlay matching poker felt treatment */
.bj-table {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; padding:1.5rem 2rem 1.25rem;
  position:relative;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%,
      var(--felt-light) 0%,
      var(--felt) 35%,
      #164a2e 65%,
      var(--felt-dark) 100%
    );
  box-shadow: inset 0 0 80px rgba(0,0,0,.45);
}
/* Noise + diagonal weave — same pattern as poker felt */
.bj-table::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg,rgba(0,0,0,.025) 0px,rgba(0,0,0,.025) 1px,transparent 1px,transparent 10px);
}

/* A1.T10: felt label — decorative, intentionally dim — leave as-is */
.bj-felt-label {
  position:absolute; top:1.2rem; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--font-display); font-size:8px;
  letter-spacing:.22em; color:rgba(195,155,90,.22);
}

/* ── Other players row ────────────────────────────────── */
.bj-others-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; min-height:50px; }
.other-card {
  background:rgba(0,0,0,.3);
  border:1px solid rgba(195,155,90,.14);
  padding:.6rem .9rem; text-align:center; min-width:130px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
/* A1.T01: other-name bumped via token (text-dim → text-mid) */
.other-name { font-family:var(--font-serif); font-size:.82rem; color:var(--text-mid); margin-bottom:.4rem; }
.other-cards { display:flex; gap:4px; justify-content:center; }
.other-cards .card { width:36px; height:52px; }
.other-cards .card .c-rank { font-size:.7rem; }
.other-cards .card .c-suit { font-size:1.1rem; }
.other-cards .card .c-corner, .other-cards .card .c-corner-b { font-size:.45rem; }
/* A1.T01: other-status default bumped to text-mid */
.other-status { font-family:var(--font-display); font-size:.58rem; letter-spacing:.1em; margin-top:.35rem; color:var(--text-mid); }
.other-status.win,.other-status.blackjack { color:var(--green-live); }
.other-status.bust,.other-status.lose     { color:#E05050; }
.other-status.push                        { color:var(--gold); }

/* ── Zones ────────────────────────────────────────────── */
.bj-zone { display:flex; flex-direction:column; align-items:center; gap:.65rem; position:relative; z-index:1; width:100%; max-width:680px; }

/* A1.T10: zone-tag was rgba(195,155,90,.45) — bumped to .7 with text-shadow */
.zone-tag {
  font-family:var(--font-display); font-size:.65rem; letter-spacing:.28em;
  color:rgba(195,155,90,.7);
  text-shadow: 0 0 10px rgba(195,155,90,.2);
  display:flex; align-items:center; gap:.75rem;
}
.my-total { font-family:var(--font-display); font-size:1rem; color:var(--gold); }

.cards-row { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; min-height:96px; align-items:center; }

/* A1.T06: blackjack cards 60×88 → 84×120 */
.card {
  width: var(--card-w-lg);   /* 84px via token — using lg size */
  height: var(--card-h-lg);  /* 120px via token */
}
.card .c-rank  { font-size:1.35rem; }
.card .c-suit  { font-size:2.1rem; }
.card .c-corner, .card .c-corner-b { font-size:.7rem; }

/* A1.T01: hand-info bumped via token */
.hand-info { font-family:var(--font-serif); font-style:italic; font-size:.82rem; color:var(--text-mid); min-height:1.1rem; }

/* ── Divider ──────────────────────────────────────────── */
.bj-table-divider { display:flex; align-items:center; gap:12px; width:100%; max-width:480px; position:relative; z-index:1; }
.div-l { flex:1; height:1px; background:rgba(195,155,90,.16); }
.div-d { font-size:.5rem; color:rgba(195,155,90,.3); } /* decorative — intentionally dim */

/* ── Bet zone ─────────────────────────────────────────── */
.bet-zone { display:flex; flex-direction:column; align-items:center; gap:.85rem; position:relative; z-index:1; }
.chips-row { display:flex; gap:.6rem; }
.bet-info { display:flex; align-items:center; gap:.75rem; font-family:var(--font-display); }
/* A1.T01: bet-label bumped via token */
.bet-label { font-size:.65rem; letter-spacing:.25em; color:var(--text-mid); }
.bet-val   { font-size:1.1rem; color:var(--gold); min-width:2.5rem; text-align:center; }
.bj-deal-btn { min-width:180px; justify-content:center; font-size:.78rem; padding:.88rem; }

/* ── Action zone ──────────────────────────────────────── */
.action-zone { display:flex; gap:.75rem; justify-content:center; position:relative; z-index:1; }
.action-zone .btn { font-size:.72rem; padding:.62rem 1.4rem; }

/* ── Result area ──────────────────────────────────────── */
.result-area { display:flex; flex-direction:column; align-items:center; gap:.7rem; position:relative; z-index:1; }
.result-banner { font-family:var(--font-display); font-size:1.4rem; font-weight:600; letter-spacing:.1em; text-align:center; }

/* A1.T01: bj-status already at text-mid — fine */
.bj-status {
  font-family:var(--font-serif); font-style:italic; font-size:.95rem;
  color:var(--text-mid); position:relative; z-index:1; min-height:1.2rem; text-align:center;
}

.dealer-tot, .my-total {
  font-family:var(--font-display); font-size:.9rem; color:var(--gold); margin-left:.5rem;
  text-shadow: 0 0 10px rgba(195,155,90,.3);
}