/* Blackjack — reuses .poker-card, .panel, .panel-header, and the site's
   color variables from lounge.css (loaded before this file on the same
   page). Everything here is Blackjack-layout-specific. */

.bj-body {
  padding: 20px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bj-table-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.bj-dealer-rail {
  width: 100%;
  max-width: 420px;
}
.bj-dealer-felt {
  padding: 18px 20px;
  gap: 8px;
}
.bj-dealer-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
}
.bj-dealer-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bj-dealer-cards {
  display: flex;
  gap: 6px;
  min-height: 66px;
}

/* The shoe — a stack of face-down cards sitting beside the dealer's
   hand, purely cosmetic, but it's the detail that makes this read as
   an actual blackjack table instead of just cards floating in space. */
.bj-shoe {
  position: relative;
  width: 48px;
  height: 66px;
  flex-shrink: 0;
}
.bj-shoe-card {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--violet), var(--buy));
  opacity: 0.35;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.bj-shoe-card:nth-child(1) { transform: translate(0, 0); }
.bj-shoe-card:nth-child(2) { transform: translate(-2px, -2px); }
.bj-shoe-card:nth-child(3) { transform: translate(-4px, -4px); }
.bj-dealer-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim);
}

.bj-phase {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.bj-seats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  width: 100%;
}

/* Seats reuse .poker-seat-bubble and .poker-timer-ring directly (defined
   in lounge.css, shared across the whole Lounge) so Blackjack seats look
   and animate exactly like poker's, instead of a separate visual style. */
.bj-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 78px;
}
.bj-seat.empty {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 11px;
}
.bj-seat.busted { opacity: 0.5; }

.bj-seat-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--paper);
}
.bj-seat-chips {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--buy);
}
.bj-seat-bet {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--violet);
}
.bj-seat-cards {
  display: flex;
  gap: 3px;
}
.bj-seat-cards .poker-card {
  width: 36px;
  height: 50px;
  font-size: 15px;
}
.bj-seat-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}
.bj-seat-result {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.bj-seat-result.win { color: var(--buy); }
.bj-seat-result.lose { color: var(--sell); }
.bj-seat-result.push { color: var(--dim); }
.bj-seat-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sell);
}
.bj-seat-tag-disconnected { color: var(--violet); }

.bj-sit-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--void);
  background: linear-gradient(90deg, var(--violet), var(--buy));
  border: none;
  border-radius: 100px;
  padding: 6px 10px;
  cursor: pointer;
}

.bj-my-hand {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--buy);
  text-align: center;
  min-height: 18px;
}

.bj-sitout-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bj-sitout-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--paper);
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 16px;
  cursor: pointer;
}
.bj-sitout-btn:hover { border-color: var(--violet); }
.bj-sitout-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
  text-align: center;
  max-width: 320px;
  margin: 0;
}
.bj-seat-tag-sitout {
  color: var(--dim);
}

.bj-start-row {
  display: flex;
  justify-content: center;
}
.bj-start-btn {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--void);
  background: linear-gradient(90deg, var(--violet), var(--buy));
  border: none;
  border-radius: 100px;
  padding: 10px 22px;
  cursor: pointer;
}

.bj-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 40px;
}
.bj-action-btn {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--void-2);
  color: var(--paper);
  cursor: pointer;
}
.bj-action-btn:hover { border-color: var(--violet); }
.bj-hit-btn { color: var(--buy); border-color: rgba(20,241,149,0.4); }
.bj-stand-btn { color: var(--sell); border-color: rgba(255,68,104,0.35); }
.bj-double-btn { color: var(--violet); border-color: rgba(156,123,255,0.4); }
.bj-waiting-note {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 13px;
  margin: 0;
}

.bj-leave-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sell);
  background: rgba(255,68,104,0.08);
  border: 1px solid rgba(255,68,104,0.35);
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
}

.bj-log {
  max-height: 140px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.bj-log-line, .bj-log-error {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}
.bj-log-error { color: var(--sell); }

@media (max-width: 480px) {
  .bj-seat { width: 78px; padding: 8px; }
  .bj-seat-cards .poker-card { width: 28px; height: 40px; font-size: 12px; }
}