/* Baccarat table */
.bac-felt { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.bac-hands { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.bac-hand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px; border-radius: 14px; border: 2px solid transparent; min-width: 0; transition: border-color 0.2s, background 0.2s; }
.bac-hand.won { border-color: var(--gold-2); background: rgba(241, 207, 133, 0.10); }
.bac-hand-head { display: flex; align-items: center; gap: 10px; }
.bac-hand-name { font-weight: 800; letter-spacing: 0.14em; font-size: 14px; padding: 3px 10px; border-radius: 999px; }
.bac-hand-p .bac-hand-name { background: #1f4f9e; }
.bac-hand-b .bac-hand-name { background: #9e1f28; }
.bac-total { display: inline-grid; place-items: center; min-width: 36px; height: 36px; border-radius: 50%; background: #fbfbf8; color: #111; font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; }
.bac-cards { display: flex; justify-content: center; min-height: 94px; }
.bac-cards > .pcard + .pcard { margin-left: -18px; }
/* third cards are dealt sideways in a real casino */
.bac-cards > .pcard:nth-child(3) { transform: rotate(90deg) translateY(-6px); margin-left: 6px; }
.bac-cards > .pcard.deal-in:nth-child(3) { animation: bac-side 0.3s ease-out both; }
@keyframes bac-side { from { transform: rotate(90deg) translate(-40px, -30px); opacity: 0; } to { transform: rotate(90deg) translateY(-6px); opacity: 1; } }

.bac-banner { text-align: center; font-weight: 900; letter-spacing: 0.08em; font-size: 16px; padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
.bac-banner.idle { font-weight: 600; font-size: 14px; letter-spacing: 0.02em; opacity: 0.85; white-space: normal; max-width: 140px; }
.bac-win-player { background: #1f4f9e; }
.bac-win-banker { background: #9e1f28; }
.bac-win-tie { background: #1c7a44; }

.bac-rules-line { text-align: center; font-size: 11.5px; letter-spacing: 0.12em; color: rgba(242, 247, 243, 0.8); border-top: 1px solid var(--felt-line); border-bottom: 1px solid var(--felt-line); padding: 6px 4px; }

.bac-spots { display: grid; grid-template-columns: 0.8fr 1.4fr 1fr 1.4fr 0.8fr; gap: 8px; }
.bac-spot {
  appearance: none; font: inherit; color: #f4f8f4; cursor: pointer; text-align: center;
  border: 2px solid var(--felt-line); border-radius: 14px; padding: 10px 6px; min-height: 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: background 0.12s, box-shadow 0.12s; min-width: 0;
}
.bac-spot:hover { filter: brightness(1.12); }
.bac-spot.sel { box-shadow: 0 0 0 3px var(--gold-2); }
.bac-spot-label { font-weight: 900; letter-spacing: 0.1em; font-size: 17px; }
.bac-spot-sub { font-size: 11px; opacity: 0.85; }
.bac-chipline { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; pointer-events: none; }
.bac-player { background: rgba(31, 79, 158, 0.55); }
.bac-banker { background: rgba(158, 31, 40, 0.55); }
.bac-tie { background: rgba(28, 122, 68, 0.55); }
.bac-pp, .bac-bp { background: rgba(0, 0, 0, 0.18); }
.bac-pp .bac-spot-label, .bac-bp .bac-spot-label, .bac-tie .bac-spot-label { font-size: 14px; }
.bac-shoeinfo { font-size: 12px; opacity: 0.75; text-align: right; }

.bac-controls .chip-selector { justify-content: flex-end; }
.bac-bet-total { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bac-deal { margin-left: auto; }
.bac-deal .kbd { margin-left: 8px; background: rgba(0,0,0,0.18); border-color: rgba(0,0,0,0.3); color: #2a1f08; }
.bac-hint { flex: 1; min-width: 160px; }

.bac-steps { margin: 0 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.bac-steps li::marker { color: var(--muted); }
.bac-step-player { color: #9cc4ff; }
.bac-step-banker { color: #ffa3a8; }
.bac-step-rule { color: var(--gold-2); }
.bac-step-result { font-weight: 700; }

.bac-best td { color: var(--gold-2); font-weight: 700; }

.bac-beads { display: grid; grid-template-rows: repeat(6, 26px); grid-auto-flow: column; grid-auto-columns: 26px; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.bac-bead { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; }
.bead-p { background: #1f4f9e; } .bead-b { background: #9e1f28; } .bead-t { background: #1c7a44; }
.bead-pp, .bead-bp { position: absolute; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #fff; }
.bead-pp { background: #1f4f9e; bottom: -1px; right: -1px; }
.bead-bp { background: #9e1f28; top: -1px; left: -1px; }

.bac-matrix th, .bac-matrix td { padding: 5px 6px; }
.bac-matrix .act { min-width: 24px; }
.bac-rulelist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.bac-quiz .btn-lg { min-width: 120px; }

@media (max-width: 700px) {
  .bac-felt { padding: 12px; gap: 10px; }
  .bac-hands { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bac-banner { grid-column: 1 / -1; grid-row: 2; }
  .bac-banner.idle { max-width: none; }
  .bac-spots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bac-player { grid-column: 1 / 4; grid-row: 1; } .bac-banker { grid-column: 4 / 7; grid-row: 1; }
  .bac-pp { grid-column: 1 / 3; grid-row: 2; } .bac-tie { grid-column: 3 / 5; grid-row: 2; } .bac-bp { grid-column: 5 / 7; grid-row: 2; }
  .bac-spot { min-height: 64px; }
  .bac-player, .bac-banker { min-height: 80px; }
  .bac-rules-line { font-size: 10px; letter-spacing: 0.06em; }
  .bac-hint { display: none; }
}
@media (max-width: 420px) {
  .bac-cards .pcard { width: 50px; height: 72px; }
  .bac-cards .pcard .pc-center { font-size: 24px; }
  .bac-cards .pcard .pc-corner b { font-size: 14px; }
  .bac-cards { min-height: 76px; }
  .bac-cards > .pcard + .pcard { margin-left: -16px; }
  .bac-cards > .pcard:nth-child(3) { margin-left: 2px; }
  .bac-hand { padding: 6px 2px; }
  .bac-total { min-width: 30px; height: 30px; font-size: 16px; }
  .bac-hand-name { font-size: 12px; padding: 2px 8px; }
  .bac-spot-label { font-size: 15px; }
  .bac-controls .chip-selector { justify-content: flex-start; }
  .bac-deal { width: 100%; margin-left: 0; }
}