/* Blackjack. Layout, toggles and charts come from battleship.css, cards from style.css. */

.bj-felt {
  display: grid; gap: 16px; padding: 16px; margin-top: 4px;
  border-radius: 14px; background: radial-gradient(ellipse at 50% 30%, #1d4a3a, #12302a);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06);
}
.bj-row .label { display: flex; gap: 8px; align-items: baseline; }
.bj-total { font-family: var(--mono); font-size: 15px; color: var(--gold); letter-spacing: 0; text-transform: none; }
.bj-cards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; min-height: 68px; }
.bj-cards .card.new { animation: bj-deal .25s ease-out; }
@keyframes bj-deal { from { transform: translateY(-14px) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bj-cards .card.new { animation: none; } }

.bj-controls { display: grid; gap: 10px; margin-top: 14px; }
.bj-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bj-actions button { padding: 12px 6px; display: grid; gap: 2px; font-size: 17px; }
.bj-actions button small { font-family: var(--mono); font-size: 12px; font-weight: 600; opacity: .85; }
.bj-actions button.best { box-shadow: 0 0 0 2px var(--gold); }
.bj-bet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bj-bet .chip { border-radius: 999px; min-width: 56px; font-family: var(--mono); }
.bj-bet .chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #2b1f06; }
.bj-bet .deal { margin-left: auto; padding: 12px 22px; font-size: 17px; }
.bj-edge { font-size: 14px; }
.bj-edge b { font-family: var(--mono); }
.bj-edge .up { color: var(--posterior); }
.bj-edge .down { color: var(--hot); }

.bj-legend { display: flex; gap: 14px; font-size: 13px; color: var(--ink-dim); margin: 6px 0 8px; }
.bj-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
/* Action colours: deliberately not the prior/likelihood/posterior colours used
   by the charts beside this one. Checked for colour-blind separation; each
   cell also carries its letter. */
.sw.hit, .bj-chart .hit { background: #9085e9; }
.sw.stand, .bj-chart .stand { background: #c98500; }
.sw.double, .bj-chart .double { background: #d55181; }
.bj-chart-wrap { overflow-x: auto; }
.bj-chart { display: grid; grid-template-columns: 38px repeat(10, minmax(24px, 1fr)); gap: 2px; min-width: 330px; font-family: var(--mono); font-size: 11px; }
.bj-chart .h { color: var(--ink-dim); font-weight: 700; display: grid; place-items: center; height: 20px; }
.bj-chart .r { color: var(--ink-dim); font-weight: 700; display: flex; align-items: center; }
.bj-chart .c { height: 20px; border-radius: 3px; display: grid; place-items: center; color: #08131a; font-weight: 700; position: relative; }
.bj-chart .c.changed::after { content: ""; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.bj-chart .c.here { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 1; }

.bj-shoes { display: grid; gap: 8px; margin: 10px 0 8px; }
.bj-shoe { display: grid; grid-template-columns: 110px 1fr 48px; gap: 10px; align-items: center; font-size: 14px; }
.bj-shoe .track { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bj-shoe .fill { height: 100%; border-radius: 6px; background: var(--s-posterior); transition: width .35s ease; }
.bj-shoe .mono { text-align: right; }
.bj-small { font-size: 13px; line-height: 1.45; margin: 0 0 8px; }
.bj-gap { margin-top: 14px; }