/* ==========================================================
   Typography: one family (Heebo) everywhere, numbers included.
   Hierarchy comes from weight and size only:
     900  display / big numbers      800  labels, buttons, card indexes
     700  secondary labels           500  body text            400  small print
   Numbers always use tabular figures so amounts line up and don't jump.
   ========================================================== */
:root { --font: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
html, body, button, input, select, textarea { font-family: var(--font); }
body { font-weight: 500; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* SVG text (cards, chips, wheels) follows the same family; CSS wins over the attributes */
svg text { font-family: var(--font); font-variant-numeric: tabular-nums; }

/* everything that used a serif/typewriter face before */
.table-rules, .wheel-result, .rl-cell, .rl-history .hist, .dealer-btn, .bac-vs, .pt-row b,
.vp-pay, .hold-tag, .led b, .card .face-letter, .rl-cell.out { font-family: var(--font); }

/* headings */
h1, h2, h3 { font-weight: 900; letter-spacing: -.01em; line-height: 1.15; }
.section-title, .stats-panel h2, .host-text h2, .mem-text h2 { letter-spacing: -.015em; }
.btn { font-weight: 800; letter-spacing: 0; }
.btn-xl { font-weight: 900; }
.muted, .hint, small { font-weight: 400; }

/* ---- cards: bold modern indexes ---- */
.card .idx { font-family: var(--font); font-weight: 800; font-size: 21px; letter-spacing: -1.5px; }
.card .idx.big { font-weight: 900; font-size: 31px; letter-spacing: -2.5px; }
.card .jumbo-rank { font-family: var(--font); font-weight: 900; font-size: 54px; letter-spacing: -4px; }

/* ---- table print & labels ---- */
.table-rules { font-weight: 700; letter-spacing: .02em; }
.felt-print text { font-weight: 800; letter-spacing: .03em; }
.print-big { font-weight: 900; }
.table-msg { font-weight: 800; letter-spacing: -.005em; }
.zone-label b, .bac-hand h3 { font-weight: 800; letter-spacing: 0; }
.total { font-weight: 900; }

/* ---- roulette ---- */
.rl-cell .oval { font-weight: 800; letter-spacing: -.5px; }
.rl-cell.col { font-weight: 800; letter-spacing: .02em; }
.wheel-result { font-weight: 900; letter-spacing: -1px; }
.hist { font-weight: 800; }

/* ---- slot machine display: LED look, same font ---- */
.led b { font-weight: 900; letter-spacing: .04em; }
.slot-topper span { font-weight: 900; letter-spacing: 0; }

/* ---- video poker: classic machine paytable, readable ---- */
.vp-paytable {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: auto repeat(5, auto);
  gap: 0 26px; padding: 10px 16px;
}
.vp-pt-head { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; padding: 0 2px 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 215, 0, .35); color: #fff2b0; font-size: .82rem; font-weight: 700; }
.vp-pay { display: flex; align-items: baseline; gap: 8px; padding: 5px 4px; font-size: 1.02rem; font-weight: 800; color: #ffd700; text-transform: none; letter-spacing: 0; border-bottom: 0; border-radius: 6px; }
.vp-pay span { white-space: nowrap; }
.vp-pay i { flex: 1; border-bottom: 2px dotted rgba(255, 215, 0, .35); transform: translateY(-4px); }
.vp-pay b { color: #fff; font-weight: 900; font-variant-numeric: tabular-nums; }
.vp-pay.now { background: rgba(34, 211, 238, .18); box-shadow: inset 0 0 0 1px #22d3ee; }
.vp-pay.hit { background: #d40000; color: #fff; }
.vp-pay.hit i { border-color: rgba(255, 255, 255, .5); }

/* hold buttons under the cards */
.hold-tag {
  min-width: 78px; min-height: 30px; display: inline-grid; place-items: center; padding: 2px 12px; border-radius: 999px;
  font-size: .95rem; font-weight: 800; letter-spacing: 0; color: #fff2b0; border: 2px solid rgba(255, 215, 0, .55); background: rgba(0, 0, 0, .25);
}
.hold-tag:empty { visibility: hidden; }
.vp-card.held .hold-tag { background: #ffd700; color: #0b1d4a; border-color: #fff3b0; }
.vp-msg { font-weight: 700; font-size: 1.1rem; }

/* chips: heavier numerals read better at small sizes */
.chip text { font-weight: 900; }

@media (max-width: 680px) {
  .vp-paytable { grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 6px 8px; }
  .vp-pay { font-size: .8rem; padding: 3px 2px; gap: 4px; }
  .vp-pt-head { font-size: .72rem; }
  .hold-tag { min-width: 0; width: 100%; font-size: .78rem; padding: 1px 4px; min-height: 26px; }
  .card .idx { font-size: 22px; }
}

/* ---- slot machine: smaller symbols with clear space between them ---- */
.sym { padding: 0; display: grid; place-items: center; }
.sym img { width: auto; height: 60%; max-width: 70%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
.sym.win img { height: 66%; }
/* a thin line between rows, like printed reel strips */
.sym + .sym { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .06); }
/* pay table: icons with breathing room */
.pt-syms { gap: 6px; }
.pt-syms img { width: 26px; height: 26px; }
.pt-syms i { width: 26px; }
.pt-row { padding: 5px 8px; }