/* Blackjack mesa — chrome oscuro coherente + fichas casino */

.bj-page {
  min-height: 100vh;
  background: #0c0e0d;
  color: #e8ece7;
  --bg: #0c0e0d;
  --bg2: #161a17;
  --bg3: #1e2420;
  --ink: #f2f4f1;
  --ink2: #a7b0a6;
  --ink3: #6f7870;
  --border: #2c332e;
  --white: #161a17;
}

.bj-page .header {
  background: rgba(12, 14, 13, 0.96) !important;
  border-bottom: 1px solid #2c332e !important;
  backdrop-filter: none !important;
}

.bj-page .logo-text h1 { color: #f2f4f1 !important; }
.bj-page .logo-text span { color: #6f7870 !important; }

.bj-page .mobile-menu-toggle span {
  background: #f2f4f1 !important;
  height: 2.5px !important;
}

.bj-page .mobile-menu-toggle:hover { background: #1e2420 !important; }

.bj-page .btn-connect {
  background: #e8e2d6 !important;
  color: #111 !important;
  border: none !important;
  box-shadow: none !important;
}

.bj-page .nav-links {
  background: #121512 !important;
  border-left-color: #2c332e !important;
}

.bj-page .nav-links a { color: #c5ccc3 !important; }
.bj-page .nav-links a:hover { background: #1e2420 !important; color: #fff !important; }

.bj-logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.bj-nav-home {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #3a433c;
  background: transparent;
  color: #e8ece7;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.bj-nav-home:hover { background: #1e2420; }

.nav-links a.nav-featured {
  background: rgba(34, 160, 98, 0.18) !important;
  color: #7dffb4 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(34, 160, 98, 0.35) !important;
}
.nav-links a.nav-featured:hover { background: rgba(34, 160, 98, 0.28) !important; }

.bj-main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; }

.bj-topbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.bj-title {
  margin: 0;
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #f2f4f1;
}
.bj-title span { color: #3dd68c; font-weight: 600; }
.bj-sub { margin: 6px 0 0; color: #a7b0a6; font-size: 0.88rem; }

.bj-status-card {
  min-width: min(100%, 220px);
  background: #161a17;
  border: 1px solid #2c332e;
  border-radius: 12px;
  padding: 10px 12px;
}
.bj-balance { color: #a7b0a6; font-size: 0.82rem; }
.bj-balance strong { color: #fff; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.bj-phase { margin-top: 4px; font-family: 'Unbounded', sans-serif; font-size: 0.72rem; color: #3dd68c; }
.bj-msg { margin-top: 2px; color: #a7b0a6; font-size: 0.8rem; line-height: 1.3; }

.bj-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 12px;
  align-items: start;
}

.bj-table {
  position: relative;
  border-radius: 22px;
  padding: 12px;
  background: linear-gradient(160deg, #7a3826, #4a1c12 60%, #2a100c);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

.bj-felt {
  position: relative;
  min-height: 520px;
  border-radius: 14px;
  overflow: hidden;
  padding: 16px 12px 14px;
  background: radial-gradient(ellipse at 50% 30%, #14965a, #0b5c3a 55%, #08422a);
}

.bj-felt-mark {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Georgia, serif;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  color: rgba(255, 236, 170, 0.28);
  pointer-events: none;
}

.bj-dealer-zone {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 120px;
  color: #f6f1e7;
}
.bj-dealer-label { font-size: 0.62rem; letter-spacing: 0.16em; font-weight: 700; opacity: 0.85; }
.bj-dealer-zone.online .bj-dealer-label { color: #f0c94d; }

.bj-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #163528; border: 2px solid rgba(224, 184, 74, 0.65);
  display: grid; place-items: center; overflow: hidden;
  font-weight: 800; font-size: 0.78rem; color: #fff; flex-shrink: 0;
}
.bj-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bj-avatar .bj-initials { font-size: 0.68rem; color: #ffe9a8; }
.bj-avatar.dealer { width: 48px; height: 48px; border-color: #f0c94d; }

.bj-name { font-weight: 700; font-size: 0.82rem; color: #f6f1e7; }
.bj-hand { display: flex; justify-content: center; align-items: flex-end; min-height: 70px; }
.bj-hand-value { min-height: 16px; font-weight: 800; font-size: 0.8rem; color: #ffe9a8; }

.bj-card {
  width: 48px; height: 70px; border-radius: 6px; background: #fffef8;
  border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 4px 8px rgba(0,0,0,0.22);
  margin-left: -14px; position: relative; font-family: Georgia, serif; user-select: none;
}
.bj-card:first-child { margin-left: 0; }
.bj-card .rank { position: absolute; top: 4px; left: 5px; font-size: 0.88rem; font-weight: 700; }
.bj-card .suit { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.2rem; }
.bj-card .rank-br { position: absolute; right: 5px; bottom: 4px; transform: rotate(180deg); font-size: 0.88rem; font-weight: 700; }
.bj-card.red { color: #c0182a; }
.bj-card.black { color: #151515; }
.bj-card.back { background: #1e3f74; border-color: #0f274d; }
.bj-card.back::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(255,215,120,0.3); border-radius: 3px; }

.bj-seats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin-top: 8px; position: relative; z-index: 2;
}
.bj-seat { min-width: 0; }
.bj-seat-spot {
  min-height: 158px; border-radius: 12px; padding: 8px 6px 10px;
  background: rgba(0,0,0,0.2); border: 1.5px solid rgba(255,255,255,0.14);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; color: #f6f1e7;
}
.bj-seat.empty .bj-seat-spot:hover { border-color: rgba(224,184,74,0.75); }
.bj-seat.you .bj-seat-spot { border-color: rgba(110,230,170,0.85); }
.bj-seat.active .bj-seat-spot, .bj-seat.selected .bj-seat-spot { border-color: #f0c94d; }
.bj-seat .bj-hand { min-height: 56px; }
.bj-seat .bj-card { width: 40px; height: 58px; margin-left: -10px; }

.bj-seat-meta {
  display: flex; align-items: center; gap: 5px; margin-top: auto;
  width: 100%; justify-content: center; min-width: 0;
}
.bj-seat-meta > div:last-child { min-width: 0; overflow: hidden; }
.bj-seat .bj-name {
  font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px;
}
.bj-bet-label {
  font-size: 0.66rem; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px;
}

.bj-chip-stack {
  display: flex; flex-direction: column-reverse; align-items: center;
  justify-content: flex-start; min-height: 36px; margin: 2px 0 4px; position: relative;
}
.bj-chip-stack .table-chip {
  width: 34px; height: 34px; border-radius: 50%; margin-top: -20px;
  display: grid; place-items: center; font-size: 0.55rem; font-weight: 900;
  font-family: 'DM Sans', sans-serif; color: #fff;
  border: 3px dashed rgba(255,255,255,0.55);
  box-shadow: 0 3px 0 rgba(0,0,0,0.35), inset 0 0 0 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
  position: relative; z-index: 1;
}
.bj-chip-stack .table-chip:last-child { margin-top: 0; }
.bj-chip-stack .table-chip::before {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.28); pointer-events: none;
}

.bj-result-tag { min-height: 12px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.bj-result-tag.win, .bj-result-tag.blackjack { color: #7CFF3A; }
.bj-result-tag.lose, .bj-result-tag.bust { color: #ff8a8a; }
.bj-result-tag.push { color: #ffd76a; }

.bj-panel { display: flex; flex-direction: column; gap: 8px; }
.bj-panel-block {
  background: #161a17; border: 1px solid #2c332e; border-radius: 12px; padding: 12px;
}
.bj-panel-block h2 {
  margin: 0 0 8px; font-family: 'Unbounded', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.04em; color: #a7b0a6; text-transform: uppercase;
}
.bj-panel-row { display: flex; gap: 8px; }
.bj-panel-row .bj-btn { flex: 1; margin-top: 0; }

.bj-bet-display {
  font-size: 1.45rem; font-family: 'Unbounded', sans-serif; margin-bottom: 10px;
  font-variant-numeric: tabular-nums; color: #fff;
}

.bj-chips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px;
}

.chip {
  --chip-c1: #ddd; --chip-c2: #999; --chip-text: #111;
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px dashed rgba(255,255,255,0.65);
  color: var(--chip-text); font-weight: 900; font-size: 0.68rem;
  font-family: 'DM Sans', sans-serif; cursor: pointer; justify-self: center;
  position: relative;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.45), transparent 42%),
    radial-gradient(circle at 50% 50%, var(--chip-c1), var(--chip-c2));
  box-shadow:
    0 5px 0 rgba(0,0,0,0.35),
    inset 0 0 0 4px rgba(0,0,0,0.16),
    inset 0 2px 0 rgba(255,255,255,0.28);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.chip::before {
  content: ''; position: absolute; inset: 7px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35); pointer-events: none;
}
.chip:hover { transform: translateY(-2px); filter: saturate(1.08); }
.chip:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,0.35), inset 0 0 0 4px rgba(0,0,0,0.16); }
.chip.selected { outline: 2px solid #fff; outline-offset: 3px; }

.chip-10 { --chip-c1: #f5f5f5; --chip-c2: #bdbdbd; --chip-text: #222; }
.chip-50 { --chip-c1: #ff6b6b; --chip-c2: #b71c1c; --chip-text: #fff; }
.chip-100 { --chip-c1: #64b5f6; --chip-c2: #0d47a1; --chip-text: #fff; }
.chip-500 { --chip-c1: #69f0ae; --chip-c2: #1b5e20; --chip-text: #fff; }
.chip-1k { --chip-c1: #424242; --chip-c2: #0d0d0d; --chip-text: #ffd54f; border-color: rgba(255,213,79,0.7); }
.chip-5k { --chip-c1: #ce93d8; --chip-c2: #4a148c; --chip-text: #fff; }
.chip-10k { --chip-c1: #ffe082; --chip-c2: #f57f17; --chip-text: #3e2723; }

.table-chip.chip-10 { background: radial-gradient(circle at 35% 30%, #fff, #bdbdbd); color: #222; }
.table-chip.chip-50 { background: radial-gradient(circle at 35% 30%, #ff6b6b, #b71c1c); }
.table-chip.chip-100 { background: radial-gradient(circle at 35% 30%, #64b5f6, #0d47a1); }
.table-chip.chip-500 { background: radial-gradient(circle at 35% 30%, #69f0ae, #1b5e20); }
.table-chip.chip-1k { background: radial-gradient(circle at 35% 30%, #424242, #111); color: #ffd54f; border-color: rgba(255,213,79,0.65); }
.table-chip.chip-5k { background: radial-gradient(circle at 35% 30%, #ce93d8, #4a148c); }
.table-chip.chip-10k { background: radial-gradient(circle at 35% 30%, #ffe082, #f57f17); color: #3e2723; }

.bj-bet-actions, .bj-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.bj-btn {
  appearance: none; border: none; border-radius: 8px; padding: 9px 12px;
  font-weight: 700; font-family: inherit; cursor: pointer;
  background: #e8e2d6; color: #111; font-size: 0.84rem;
}
.bj-btn:hover { filter: brightness(1.05); }
.bj-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bj-btn.secondary { background: #2a322c; color: #fff; }
.bj-btn.ghost { background: transparent; color: #d5dbd4; border: 1px solid #3a433c; }
.bj-btn.gold { background: #1f8a4e; color: #fff; }
.bj-btn.wide { width: 100%; margin-top: 6px; }

.bj-toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: #1a1f1c; color: #fff; border: 1px solid #2c332e;
  padding: 10px 14px; border-radius: 999px; z-index: 50;
  max-width: min(92vw, 380px); text-align: center; font-size: 0.88rem;
}

@media (max-width: 980px) {
  .bj-stage { grid-template-columns: 1fr; }
  .bj-felt { min-height: 440px; }
  .bj-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bj-nav-home { padding: 7px 10px; font-size: 0.78rem; }
}
@media (max-width: 560px) {
  .bj-seat .bj-name { max-width: 68px; }
  .chip { width: 46px; height: 46px; }
}