/* =========================================================
   Blackjack — page-specific layout. Loads after styles.css and
   only adds what the poker page doesn't have: the dealer/player
   table, multi-hand rows, action buttons, chart and shoe meter.
   Everything else (tokens, buttons, cards, coach, modals) is
   inherited from styles.css so both games share one theme.
   ========================================================= */

.game-blackjack {
  --bj-card-w: clamp(56px, 3vw + 44px, 100px);
  --bj-card-overlap: calc(var(--bj-card-w) * -0.42);
}

/* ---------- Table ---------- */
.bj-table {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(245, 165, 36, 0.05), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  /* Two rows of cards + headers, so the controls below don't jump
     between an empty table and a dealt one. */
  min-height: calc(var(--bj-card-w) * 2.8 + 150px);
}

.bj-felt-line {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: var(--s-1) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.bj-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}

.bj-seat__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  min-height: 28px;
}
.bj-seat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.bj-total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
}
.bj-total.is-bust {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.45);
}

.bj-hand__bet {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  letter-spacing: 0.06em;
}

.bj-hand__result {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: var(--bg-3);
  color: var(--text-dim);
}
.bj-hand__result[data-result="win"],
.bj-hand__result[data-result="blackjack"] {
  background: var(--accent-soft);
  color: var(--accent-hi);
}
.bj-hand__result[data-result="lose"],
.bj-hand__result[data-result="bust"] {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

/* Player hands sit side by side after a split and wrap on narrow screens. */
.bj-hands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
}
.bj-hand {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.bj-hand.is-active {
  border-color: var(--accent-ring);
  background: var(--accent-soft);
}

/* ---------- Cards (reuse .card from styles.css) ---------- */
.bj-cards {
  display: flex;
  justify-content: center;
  min-height: calc(var(--bj-card-w) * 1.4);
}
.bj-cards .card {
  width: var(--bj-card-w);
  flex: 0 0 auto;
  cursor: default;
}
.bj-cards .card + .card {
  margin-left: calc(var(--bj-card-w) * -0.18);
}
.bj-cards--many .card + .card {
  margin-left: var(--bj-card-overlap);
}
.bj-cards .card:hover {
  transform: none;
}

/* Dealing: the OUTER card slides in from the shoe while the INNER layer
   is free to do the 3D flip (.is-flipped → rotateY transition in
   styles.css). The poker page's .is-dealing animates .card__inner, which
   would fight the flip — switch that off here. */
.bj-card.is-dealing .card__inner {
  animation: none;
}
.bj-card.is-dealing {
  animation: bjSlideIn 0.32s var(--ease-out) both;
}
@keyframes bjSlideIn {
  from {
    transform: translate(48px, -56px) rotate(-6deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ---------- Controls ---------- */
.bj-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
/* .btn / .bj-actions set display, which would beat the UA [hidden] rule.
   The controller swaps Deal ↔ actions ↔ insurance via `hidden`. */
.bj-primary [hidden],
.bj-seat [hidden],
.coach [hidden] {
  display: none !important;
}
.bj-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-2);
}
.bj-controls {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.bj-controls .bet-display {
  white-space: nowrap;
}
.bj-action {
  min-width: 78px;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2) var(--s-4);
}
.bj-action kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
}
.bj-action:not(:disabled) {
  border-color: var(--border-strong);
}
.bj-action:disabled {
  opacity: 0.3;
}
.bj-insurance__prompt {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-dim);
  margin-right: var(--s-2);
}

.result-bar__amount.is-negative {
  color: var(--text-dim);
}

/* ---------- Coach extras ---------- */
.bj-evs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding: 0;
}
.bj-evs__item {
  display: inline-flex;
  gap: var(--s-2);
  align-items: baseline;
  font-size: var(--fs-sm);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.bj-evs__val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.bj-evs__item.is-best {
  border-color: var(--accent-ring);
  color: var(--accent-hi);
}
.bj-evs__item.is-chosen:not(.is-best) {
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

.bj-log {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.bj-log__item {
  display: flex;
  gap: var(--s-2);
}
.bj-log__item.is-correct .bj-log__mark { color: var(--success); }
.bj-log__item.is-incorrect .bj-log__mark { color: var(--danger); }

/* ---------- Rules + shoe aside ---------- */
.bj-rules__list {
  margin: 0;
  padding: var(--s-3) var(--s-5) var(--s-4) calc(var(--s-5) + 1em);
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.bj-shoe {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border);
}
.bj-shoe__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-2);
}
.bj-shoe__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.bj-shoe__count {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.bj-shoe__bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-3);
  overflow: visible;
}
.bj-shoe__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-lo), var(--accent));
  transition: width 0.4s var(--ease-out);
}
.bj-shoe__cut {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  left: 75%;
  background: var(--danger);
  border-radius: 1px;
}
.bj-shoe__note {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ---------- Strategy chart modal ---------- */
.modal__panel--wide {
  max-width: 760px;
}
.bj-chart__wrap {
  overflow-x: auto;
  margin-bottom: var(--s-5);
}
.bj-chart {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-align: center;
}
.bj-chart caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  padding-bottom: var(--s-2);
}
.bj-chart th {
  color: var(--text-faint);
  font-weight: 500;
  padding: 4px;
  white-space: nowrap;
}
.bj-chart tbody th {
  text-align: right;
  padding-right: var(--s-3);
  color: var(--text-dim);
}
.bj-chart td {
  min-width: 30px;
  padding: 0;
  border-radius: 4px;
  background: var(--bg-2);
}
.bj-chart__cell {
  font-weight: 600;
  color: var(--bg-0);
}
.bj-chart__cell--hit { background: #64748b !important; color: #f8fafc; }
.bj-chart__cell--stand { background: #4ade80 !important; }
.bj-chart__cell--double { background: var(--accent) !important; }
.bj-chart__cell--split { background: #60a5fa !important; }

.bj-chart__legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-5);
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.bj-chart__legend .bj-chart__cell {
  display: inline-block;
  min-width: 28px;
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
  font-family: var(--font-mono);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .bj-controls {
    grid-template-columns: 1fr;
  }
  .bj-controls .bet-controls,
  .bj-controls .side-controls {
    justify-self: center;
  }
  .bj-primary {
    order: -1;
  }
}

@media (max-width: 560px) {
  .game-blackjack {
    --bj-card-w: clamp(54px, 17vw, 80px);
  }
  .bj-table {
    padding: var(--s-4) var(--s-3);
    gap: var(--s-4);
    min-height: 0;
  }
  .bj-felt-line span:not(:first-child) {
    display: none;
  }
  .bj-hands {
    gap: var(--s-2);
  }
  .bj-hand {
    padding: var(--s-2);
  }
  .bj-action {
    min-width: 0;
    flex: 1 1 30%;
  }
  .bj-actions {
    width: 100%;
  }
  .bj-primary .btn--primary {
    width: 100%;
  }
  .bj-chart {
    font-size: 11px;
  }
  .bj-chart td {
    min-width: 22px;
  }
}

/* ---------- Training strip: four cards instead of poker's three ---------- */
.bj-training {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bj-evloss {
  appearance: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: left;
}
.bj-evloss:hover,
.bj-evloss:hover .training__info {
  color: var(--accent);
}
.bj-evloss__value {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
@media (max-width: 900px) {
  .bj-training {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bj-training .training__stat:last-child {
    grid-column: auto;
  }
}

.bj-evs__caption {
  margin: var(--s-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.bj-evs__caption + .bj-evs {
  margin-top: var(--s-2);
}

/* ---------- Tappable chart squares (bj-chart.js) ---------- */
.bj-chart__btn {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 28px;
  padding: 5px 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bj-chart__btn:hover {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.bj-chart__btn.is-selected {
  box-shadow: inset 0 0 0 2px var(--text);
}
.bj-chart__cell--nosplit {
  background: var(--bg-3) !important;
}
.bj-chart td.is-dim {
  opacity: 0.25;
}
.bj-chart td.is-current {
  outline: 3px solid var(--accent-hi);
  outline-offset: 1px;
}
.bj-chart th.is-current {
  color: var(--accent-hi);
}
.bj-chart__tabs {
  margin: 0 0 var(--s-3);
  padding: 0;
  border-bottom: 1px solid var(--border);
}
.bj-chart__explain {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1.5;
  min-height: 3em;
}
.bj-chart__explain strong {
  color: var(--text);
}
.bj-guide-link {
  display: inline-block;
  margin: 0 0 var(--s-4);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.bj-guide-link:hover {
  text-decoration: underline;
}

/* ---------- /blackjack/learn/ guide ---------- */
.bj-learn {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.bj-learn__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  color: var(--text-dim);
  line-height: 1.6;
}
.bj-learn__card p {
  margin: 0 0 var(--s-3);
}
.bj-learn__card strong {
  color: var(--text);
}
.bj-learn__h2 {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text);
}
.bj-learn__h3 {
  margin: var(--s-5) 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--text);
}
.bj-learn__note {
  font-size: var(--fs-sm);
  color: var(--text-faint);
}
.bj-learn__cta {
  text-align: center;
  margin: var(--s-4) 0 var(--s-6);
}

.bj-updown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.bj-updown__col {
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
}
.bj-updown__col p {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
}
.bj-updown__col--weak { background: rgba(74, 222, 128, 0.07); border-color: rgba(74, 222, 128, 0.3); }
.bj-updown__col--strong { background: rgba(239, 68, 68, 0.07); border-color: rgba(239, 68, 68, 0.3); }
.bj-updown__cards {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text);
}
.bj-updown__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.bj-toc {
  margin: var(--s-3) 0 0;
  padding-left: 1.4em;
  columns: 2;
  column-gap: var(--s-6);
  font-size: var(--fs-sm);
}
.bj-toc li {
  margin-bottom: 4px;
  break-inside: avoid;
}
.bj-toc a {
  color: var(--text-dim);
  text-decoration: none;
}
.bj-toc a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.bj-toc .is-mastered a,
.bj-toc__check {
  color: var(--success);
}

.bj-lessons {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.bj-lesson {
  scroll-margin-top: var(--s-5);
}
.bj-lesson.is-mastered {
  border-color: rgba(74, 222, 128, 0.4);
}
.bj-lesson__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.bj-lesson__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 600;
  flex-shrink: 0;
}
.bj-lesson__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.bj-lesson__badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--success);
  border: 1px solid rgba(74, 222, 128, 0.45);
  border-radius: 999px;
  padding: 3px 10px;
}
.bj-lesson__rule {
  color: var(--text) !important;
  font-size: var(--fs-md);
  font-weight: 600;
}

.bj-examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-3) 0 var(--s-4);
}
.bj-example {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.bj-example__hand {
  display: flex;
  gap: 3px;
}
.bj-example__card {
  width: 34px;
}
.bj-example__vs {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.bj-example__action {
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.bj-lesson__progress {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.bj-skill {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-1);
}
.bj-skill__head,
.bj-skill__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.bj-skill__label {
  color: var(--text);
  font-weight: 600;
}
.bj-skill__nums,
.bj-skill__status {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.bj-skill__bar {
  height: 4px;
  margin: var(--s-2) 0;
  border-radius: 2px;
  background: var(--bg-3);
  overflow: hidden;
}
.bj-skill__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.bj-skill--mastered {
  border-color: rgba(74, 222, 128, 0.35);
}
.bj-skill--mastered .bj-skill__fill {
  background: var(--success);
}
.bj-skill--mastered .bj-skill__status {
  color: var(--success);
}

@media (max-width: 560px) {
  .bj-learn__card {
    padding: var(--s-4);
  }
  .bj-updown {
    grid-template-columns: 1fr;
  }
  .bj-toc {
    columns: 1;
  }
  .bj-example__card {
    width: 28px;
  }
  .bj-chart__btn {
    min-height: 26px;
    padding: 4px 0;
  }
}