/* 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; }

.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) 40%, var(--felt-dark) 100%);
}
.bj-table::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.035) 0px,rgba(0,0,0,.035) 1px,transparent 1px,transparent 10px);
}

.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,.2); }

/* 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,.25); border:1px solid rgba(195,155,90,.1); padding:.6rem .9rem; text-align:center; min-width:130px; }
.other-name { font-family:var(--font-serif); font-size:.82rem; color:var(--text-dim); 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; }
.other-status { font-family:var(--font-display); font-size:.58rem; letter-spacing:.1em; margin-top:.35rem; color:var(--text-dim); }
.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; }
.zone-tag { font-family:var(--font-display); font-size:.65rem; letter-spacing:.28em; color:rgba(195,155,90,.45); 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; }

.card { width:60px; height:88px; }
.card .c-rank { font-size:1.1rem; }
.card .c-suit { font-size:1.7rem; }
.card .c-corner, .card .c-corner-b { font-size:.62rem; }

.hand-info { font-family:var(--font-serif); font-style:italic; font-size:.82rem; color:var(--text-dim); 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,.14); }
.div-d { font-size:.5rem; color:rgba(195,155,90,.28); }

/* 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); }
.bet-label { font-size:.65rem; letter-spacing:.25em; color:var(--text-dim); }
.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;
}

.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;
}