/* MLB Craps — felt-style bet table.
 * Wood frame + emerald felt + brass accents + Cinzel/Bodoni casino fonts.
 */

/* ---- Global overflow guard ---- */
html, body { overflow-x: hidden; max-width: 100vw; }
* { min-width: 0; }   /* flex children default to min-content; let them shrink */

:root {
  --felt-1:    #0d4a34;
  --felt-2:    #082617;
  --felt-edge: #051a0f;
  --brass:     #d4af37;
  --brass-dim: #a08020;
  --cream:     #f4e8c1;
  --cream-mut: #b5c9b8;
  --wood-1:    #5a3a26;
  --wood-2:    #2c180e;
  --wood-stitch: #c9a043;
  /* Classic vegas red — used for COME, DON'T COME, ANY 7/CRAPS, FIELD bonuses. */
  --casino-red:     #d92e2e;
  --casino-red-dim: #a01e1e;
}

.craps-page {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .craps-page { grid-template-columns: 1fr; } }

/* ---------- slate rail ---------- */
.slate-rail {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  position: sticky; top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
@media (max-width: 900px) { .slate-rail { position: static; max-height: none; } }
.slate-rail h3 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .2em; color: var(--muted);
  font-family: 'Cinzel', serif; font-weight: 700; text-transform: uppercase;
}
.slate-rail .date-row { display: flex; gap: 6px; margin-bottom: 12px; }
.slate-rail input[type=date] {
  flex: 1; padding: 7px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card2); color: var(--text);
  font-size: 13px;
}
.slate-rail .btn { padding: 7px 10px; font-size: 13px; }
.rail-games { display: flex; flex-direction: column; gap: 10px; }
.rail-game {
  border: 1px solid var(--border); background: var(--card2);
  border-radius: 10px; padding: 8px 10px; font-size: 12px;
}
.rail-game.locked { opacity: .55; }
.rail-game .meta { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 6px; }
.rail-game .teams { display: flex; flex-direction: column; gap: 4px; }
.team-btn {
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text); cursor: pointer; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 600;
}
.team-btn:hover:not(:disabled) { border-color: var(--brass); background: var(--row-hover); }
.team-btn:disabled { cursor: not-allowed; }
.team-btn.selected {
  border-color: var(--brass);
  background: linear-gradient(135deg, rgba(212,175,55,.15), transparent);
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.4);
}
.team-btn .tscore { color: var(--brass); font-variant-numeric: tabular-nums; }

/* ---------- top toolbar (team picker + shooter tabs side-by-side) ---------- */
.top-toolbar {
  display: flex; gap: 10px; align-items: stretch;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .top-toolbar { flex-direction: column; }
}

/* ---------- team picker dropdown ---------- */
.team-picker { position: relative; flex: 0 0 auto; }
.tp-trigger {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text); cursor: pointer;
  min-width: 220px; height: 100%;
  transition: border-color .15s ease;
}
.tp-trigger:hover { border-color: var(--brass); }
.tp-current { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.tp-logo { width: 32px; height: 32px; object-fit: contain; flex: 0 0 auto; }

/* Public-brand team art — colored circle with team abbreviation. Sizing
   inherits from whichever logo class is applied alongside (.tp-logo,
   .fp-logo, .pb-logo, .b-team-logo, .rs-logo). The --team-c custom prop
   is set inline by static/team-colors.js per team. */
.team-badge {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; flex: 0 0 auto;
  background: var(--team-c, #6b7280);
  color: #fff;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 900; letter-spacing: .02em;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18),
              0 1px 2px rgba(0,0,0,.35);
  user-select: none; line-height: 1;
}
/* Auto-size the abbrev to ~40% of the badge diameter. Each logo class
   already has fixed width/height; we just dial in the font size to match. */
.team-badge.tp-logo      { font-size: 11px; }
.team-badge.fp-logo      { font-size: 10px; }
.team-badge.pb-logo      { font-size: 14px; }
.team-badge.b-team-logo  { font-size:  9px; }
.team-badge.rs-logo      { font-size: 11px; width: 28px; height: 28px; }
@media (max-width: 480px) {
  .team-badge.pb-logo    { font-size: 11px; }
  .team-badge.tp-logo    { font-size: 10px; }
  .team-badge.fp-logo    { font-size:  9px; }
}
.tp-name {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 13px;
  letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-caret { color: var(--muted); font-size: 14px; }
.tp-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 280px; max-height: 60vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--brass);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  z-index: 30;
}
.tp-menu.hidden { display: none; }
.tp-row {
  display: flex; align-items: stretch;
  width: 100%; border-radius: 8px;
  color: var(--text);
}
.tp-row:hover { background: var(--row-hover); }
.tp-row.active { background: rgba(212,175,55,.10); }
.tp-row.current { background: rgba(212,175,55,.22); }
.tp-row .tp-pick {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; background: transparent; border: none;
  text-align: left; color: inherit; cursor: pointer; border-radius: 8px;
  min-width: 0;
}
.tp-row .tp-logo { width: 28px; height: 28px; flex: 0 0 auto; }
.tp-row .tp-abbr {
  font-family: 'Cinzel', serif; font-weight: 800; font-size: 14px;
  letter-spacing: .06em; flex: 1; min-width: 0;
}
.tp-row .tp-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Bodoni Moda', Georgia, serif; font-size: 13px; font-weight: 700;
  letter-spacing: .02em; color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto; white-space: nowrap;
}
.tp-row .tp-status.live    { color: #16a34a; }
.tp-row .tp-status.final   { color: var(--muted); }
.tp-row .tp-status.preview { color: var(--muted); font-weight: 600; opacity: .8; }
.tp-row .tp-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; flex: 0 0 auto;
  animation: livePulse 1.4s ease-in-out infinite;
}
.tp-row .tp-fbadge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-size: 10px; font-weight: 900; color: #fff;
  background: #6b7280; border-radius: 4px;
  font-family: 'Cinzel', serif;
  flex: 0 0 auto;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55), 0 0 6px rgba(34,197,94,.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0),  0 0 14px rgba(34,197,94,1);  transform: scale(1.18); }
}
.tp-row.is-live  { background: linear-gradient(90deg, rgba(34,197,94,.07), transparent 70%); }
.tp-row.is-final { background: linear-gradient(90deg, rgba(107,114,128,.06), transparent 60%); }
.tp-row .tp-fav {
  flex: 0 0 auto; width: 36px;
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; color: var(--muted);
  padding: 0 4px; border-radius: 8px;
  transition: color .15s, background .15s;
}
.tp-row .tp-fav:hover { background: rgba(255,215,102,.15); color: var(--brass); }
.tp-row .tp-fav.on { color: var(--brass); }

/* ---------- /me page: stats row + name editor + bet table ---------- */
.me-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 10px 0 14px;
}
@media (max-width: 520px) { .me-stats { grid-template-columns: repeat(3, 1fr); } }
.me-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--card2); border: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  font: inherit; color: inherit;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.me-stat:hover { border-color: var(--brass); background: var(--row-hover); }
.me-stat:active { transform: scale(0.98); }
.me-stat.active {
  border-color: var(--brass);
  background: rgba(212,175,55,.14);
  box-shadow: inset 0 0 0 1px var(--brass);
}
.me-stat .ms-k {
  font-family: 'Cinzel', serif; text-transform: uppercase;
  font-size: 10px; letter-spacing: .14em; color: var(--muted); font-weight: 700;
}
.me-stat .ms-v {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums;
}
.me-stat .ms-v.win  { color: #16a34a; }
.me-stat .ms-v.lose { color: #ef4444; }

/* Collapsed name editor */
.me-name {
  margin: 12px 0; border: 1px solid var(--border); background: var(--card2);
  border-radius: 10px; padding: 10px 12px;
}
.me-name > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.me-name > summary::-webkit-details-marker { display: none; }
.me-name .me-name-label {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.me-name .me-name-current { font-weight: 700; color: var(--text); }
.me-name .me-name-edit-hint {
  margin-left: auto; color: var(--accent); font-size: 12px; font-weight: 700;
}
.me-name[open] .me-name-edit-hint { display: none; }
.me-name-editor {
  display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap;
}
.me-name-editor input {
  flex: 1; min-width: 160px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 14px;
}
.me-name-editor .ne-msg { flex-basis: 100%; min-height: 1em; }

/* Bet table polish */
.me-bets td, .me-bets th { vertical-align: middle; }
.me-bets .b-team-cell { display: flex; align-items: center; gap: 8px; }
.me-bets .b-team-logo { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.me-bets .b-bet-cell { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .03em; }
.me-bets .chip-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 11px; font-weight: 800;
  color: var(--brass, #a8812a);
  background: rgba(212,175,55,.14);
  border: 1px solid rgba(212,175,55,.45);
  border-radius: 999px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.me-bets .nowrap { white-space: nowrap; }
.me-bets tr.pending td { opacity: .78; }
.me-bets tr.taken td   { opacity: .7; }

/* Result pill badges */
.b-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid transparent;
}
.b-badge.win     { background: rgba(34,197,94,.15); color: #16a34a; border-color: rgba(34,197,94,.35); }
.b-badge.lose    { background: rgba(239,68,68,.15); color: #ef4444; border-color: rgba(239,68,68,.35); }
.b-badge.push    { background: rgba(212,175,55,.15); color: #a8812a; border-color: rgba(212,175,55,.5); }
.b-badge.pending { background: var(--card2); color: var(--muted); border-color: var(--border); }
.b-badge.neutral { background: var(--card2); color: var(--muted); border-color: var(--border); }

.me-empty { padding: 30px 10px; text-align: center; font-size: 15px; }

/* ---- /me page: card layout on mobile ----
 * Below 700px we flip the bets table from a wide row layout to a stacked
 * card-per-row layout (no horizontal scroll, Runs column hidden).
 *   row 1: Team           |  Result badge
 *   row 2: Bet  ×N count  |  Net (big, colored)
 *   row 3: Placed time    |  Wager
 */
@media (max-width: 700px) {
  .table-wrap { overflow: visible; margin-top: 6px; }
  .me-bets { display: block; font-size: 13px; border-collapse: separate; border-spacing: 0; }
  .me-bets thead { display: none; }
  .me-bets tbody { display: block; }
  .me-bets tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "team   result"
      "bet    net"
      "meta   wager";
    column-gap: 12px;
    row-gap: 4px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--card2);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .me-bets tr:hover { background: var(--card2); }
  .me-bets td {
    border: none !important;
    padding: 0 !important;
    display: block;
  }
  .me-bets td:nth-child(1) {  /* Placed */
    grid-area: meta;
    font-size: 11px; color: var(--muted); white-space: nowrap;
  }
  .me-bets td:nth-child(2) {  /* Team */
    grid-area: team;
    font-weight: 700; font-size: 14px;
    min-width: 0;
  }
  .me-bets td:nth-child(2) span { word-break: break-word; }
  .me-bets td:nth-child(3) {  /* Bet name + chip-count */
    grid-area: bet;
    font-size: 13px;
  }
  .me-bets td:nth-child(4) {  /* Wager */
    grid-area: wager;
    text-align: right !important;
    font-size: 12px; color: var(--muted);
    white-space: nowrap;
  }
  .me-bets td:nth-child(4)::before {
    content: 'Wager '; opacity: .65; font-weight: 600;
  }
  .me-bets td:nth-child(5) {  /* Result badge */
    grid-area: result;
    text-align: right !important;
  }
  .me-bets td:nth-child(6) { display: none; }  /* Runs — hide on mobile */
  .me-bets td:nth-child(7) {  /* Net */
    grid-area: net;
    text-align: right !important;
    font-weight: 700; font-size: 14px;
    white-space: nowrap;
  }
  .me-bets .b-team-cell { gap: 6px; }
  .me-bets .b-team-logo { width: 18px; height: 18px; }
}

/* ---------- favorites dropdown (replaces horizontal shooter tabs) ---------- */
.fav-picker { position: relative; flex: 1 1 auto; min-width: 0; }
.fp-trigger {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 100%;
  padding: 6px 14px 6px 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text); cursor: pointer;
  transition: border-color .15s ease;
}
.fp-trigger:hover { border-color: var(--brass); }
.fp-trigger .fp-icon {
  color: var(--brass); font-size: 16px; line-height: 1;
}
.fp-trigger .fp-label {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 13px;
  letter-spacing: .04em; flex: 1; min-width: 0; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-trigger .fp-count {
  background: rgba(212,175,55,.18); color: var(--brass);
  border: 1px solid var(--brass-dim); border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-weight: 800;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-variant-numeric: tabular-nums;
}
.fp-trigger .fp-caret { color: var(--muted); font-size: 14px; }
.fp-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 320px; max-width: 92vw;
  max-height: 60vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--brass);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  z-index: 30;
  display: flex; flex-direction: column; gap: 2px;
}
@media (max-width: 700px) {
  .fp-menu { min-width: 280px; max-height: 60vh; padding: 4px; gap: 1px; }
  .fp-row { padding: 6px 8px; gap: 8px; }
  .fp-row .fp-logo { width: 26px; height: 26px; }
  .fp-row .fp-team { font-size: 13px; }
  .fp-row .fp-phase { font-size: 10px; }
  .fp-row .fp-game { font-size: 10px; }
  .fp-row .fp-info { gap: 2px; }
}
.fp-menu.hidden { display: none; }
.fp-empty {
  color: var(--muted); font-style: italic; padding: 14px 12px; text-align: center;
  font-size: 13px;
}
.fp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: none; border-radius: 8px;
  background: transparent; color: var(--text); cursor: pointer;
  text-align: left; width: 100%;
  transition: background .12s ease;
}
.fp-row:hover { background: var(--row-hover); }
.fp-row.current { background: rgba(212,175,55,.18); }
.fp-row.inactive { opacity: .68; }
.fp-row .fp-logo { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }

.fp-row .fp-info {
  display: flex; flex-direction: column; gap: 3px;
  flex: 1; min-width: 0;
}
.fp-row .fp-line-1,
.fp-row .fp-line-2 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.fp-row .fp-team {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px;
  letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto; min-width: 0;
}
.fp-row .fp-phase {
  font-size: 10px; color: var(--muted); letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0;
}
.fp-row .fp-game {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  flex: 0 0 auto; white-space: nowrap;
}
.fp-row .fp-game .tp-status { gap: 4px; font-size: 11px; }
.fp-row .fp-money {
  background: rgba(34,197,94,.16);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.45);
  border-radius: 999px;
  padding: 2px 9px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 800; font-size: 12px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto; white-space: nowrap;
}

/* ---------- shooter tabs (single-row, horizontally scrollable) — legacy ---- */
.shooter-tabs {
  display: flex; gap: 6px; flex: 1;
  background: var(--card); border: 1px solid var(--border);
  padding: 8px; border-radius: 12px;
  flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}
.shooter-tabs::-webkit-scrollbar { height: 6px; }
.shooter-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.st-tab {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card2);
  color: var(--text); cursor: pointer;
  flex: 0 0 auto;             /* don't shrink — keep tabs full-size, scroll instead */
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.st-tab.inactive { opacity: .65; }
.st-tab.inactive .st-phase { color: var(--muted); }
.st-tab .st-logo { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.st-tab .st-meta { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
@media (max-width: 700px) {
  .st-tab { min-width: 0; padding: 6px 10px; flex: 1 1 auto; }
  .st-tab .st-team  { font-size: 12px; }
  .st-tab .st-phase { font-size: 9px; letter-spacing: .1em; }
  .st-tab.st-add    { min-width: 0; flex-basis: 100%; }
}
.st-tab:hover:not(.active) { border-color: var(--brass); }
.st-tab.active {
  background: linear-gradient(135deg, rgba(212,175,55,.18), transparent);
  border-color: var(--brass);
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.4);
}
.st-tab .st-team  { font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.st-tab .st-phase { font-size: 10px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.st-tab.st-add {
  background: transparent; border-style: dashed; min-width: 130px;
  align-items: center; justify-content: center; font-weight: 700; color: var(--muted);
}
.st-tab.st-add:hover { color: var(--text); }
.st-tab-empty { color: var(--muted); font-style: italic; padding: 8px 12px; }

/* ===========================================================
                     TABLE: WOOD FRAME + FELT
   =========================================================== */

/* Wood frame is the .shooter-board container itself. The felt sits inside
 * with a brass-stitched inset border. */
.shooter-board {
  background:
    /* wood grain horizontal striations */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.05) 0 1px, transparent 1px 4px,
      rgba(255,255,255,.02) 4px 5px, transparent 5px 11px),
    /* wood color */
    linear-gradient(180deg, var(--wood-1) 0%, var(--wood-2) 100%);
  border-radius: 18px;
  padding: 8px 8px 10px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 30px 60px -10px rgba(0,0,0,.55),
    0 18px 30px -12px rgba(0,0,0,.4);
  position: relative;
}
.shooter-board::before {
  /* brass stitch line just inside the wood */
  content: ""; position: absolute;
  inset: 4px; border-radius: 14px; pointer-events: none;
  border: 1px dashed var(--wood-stitch);
  opacity: .5;
}

/* phase banner sits inside the wood, atop the felt */
.phase-banner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: nowrap;
  padding: 12px 18px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #1a3a2a 0%, #0f2a1d 100%);
  border-bottom: 1.5px solid var(--brass);
  color: var(--cream);
  font-family: 'Cinzel', serif;
}
.phase-banner .team-name {
  font-size: 22px; font-weight: 900; letter-spacing: .04em;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
  white-space: nowrap;
}
.pb-team-block {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 auto; min-width: 0;
}
.pb-team-block > div { min-width: 0; flex: 1 1 auto; }
.pb-logo { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
@media (max-width: 480px) { .pb-logo { width: 34px; height: 34px; } }
.phase-banner .team-opp {
  font-size: 12px; color: var(--cream-mut); margin-left: 12px;
  font-weight: 500; font-family: system-ui, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-block; max-width: 100%; vertical-align: middle;
}
.phase-info { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* Rules button is duplicated in the topbar — hide the phase-banner copy so
   the buttons + puck stay on a single row alongside the team line. */
.phase-info .rules-btn { display: none; }
.phase-pill {
  padding: 6px 16px; border-radius: 999px;
  font-size: 11px; letter-spacing: .18em; font-weight: 800;
  text-transform: uppercase; font-family: 'Cinzel', serif;
  background: rgba(0,0,0,.4); border: 1px solid var(--brass); color: var(--brass);
}
.phase-pill.point {
  background: linear-gradient(180deg, #fff5cc, #ffd966);
  color: #382600; border-color: #fff;
  box-shadow: 0 0 14px rgba(255,215,102,.4), inset 0 -2px 4px rgba(0,0,0,.15);
}
.phase-pill.frozen::after {
  content: " 🔒";
  font-size: 11px; opacity: .85;
}

/* "Next Game →" toggle in the phase banner. Quiet by default; brass-tinted
 * when active so the player can see at a glance they're queuing bets on a
 * future game. */
.next-game-btn {
  background: rgba(0,0,0,.4);
  border: 1px solid var(--brass);
  color: var(--brass);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: 11px; letter-spacing: .14em;
  font-weight: 800; text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, transform .08s;
}
.next-game-btn:hover { background: rgba(212,175,55,.18); }
.next-game-btn:active { transform: scale(.97); }
.next-game-btn.is-future {
  background: linear-gradient(180deg, #fff5cc, #ffd966);
  color: #382600; border-color: #fff5cc;
  box-shadow: 0 0 12px rgba(255,215,102,.45);
}
@media (max-width: 480px) {
  .next-game-btn { padding: 4px 9px; font-size: 9px; letter-spacing: .1em; }
}

/* ---- Craps puck ----
 * A real-craps style ON/OFF disc. White when no point ("OFF"), gold with
 * the point number when a point is set ("ON 6"). Lives in the phase banner
 * — replaces the old text pill so the table state is unmistakable. */
.point-puck {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 58px; height: 58px;
  padding: 0; border-radius: 50%;
  border-width: 3px; border-style: solid;
  font-family: 'Cinzel', serif;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
}
.point-puck .puck-state {
  font-size: 10px; font-weight: 900; letter-spacing: .22em;
  text-transform: uppercase;
}
.point-puck .puck-num {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 22px; font-weight: 900;
  margin-top: 2px;
}
.point-puck .puck-num-pair {
  font-size: 13px; letter-spacing: .02em; margin-top: 3px;
}
/* OFF state — pearly-white puck with dark text, like a real craps puck. */
.point-puck.coming_out {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e8e8e8 60%, #c8c8c8 100%);
  border-color: #555;
  color: #1a1a1a;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,.18),
    inset 0 2px 4px rgba(255,255,255,.9),
    0 3px 8px rgba(0,0,0,.45);
}
/* ON state — gold puck with the point number, glowing. */
.point-puck.point {
  background: radial-gradient(circle at 35% 30%, #fff8d8 0%, #ffd966 55%, #c79a2b 100%);
  border-color: #fff5cc;
  color: #382600;
  box-shadow:
    inset 0 -3px 6px rgba(120,80,0,.35),
    inset 0 2px 4px rgba(255,255,255,.7),
    0 0 22px rgba(255,215,102,.55),
    0 3px 8px rgba(0,0,0,.45);
}
.point-puck.point .puck-num { color: #2b1d00; }
.btn.tiny { padding: 6px 11px; font-size: 11px; letter-spacing: .08em; }

/* Matchup tag — net % adjustment shown next to the opponent line in the
   phase banner. Tooltip contains the per-signal breakdown. */
.matchup-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: help;
}
.matchup-tag.matchup-up {
  background: rgba(34, 197, 94, .18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, .55);
}
.matchup-tag.matchup-dn {
  background: rgba(217, 46, 46, .18);
  color: #f87171;
  border: 1px solid rgba(217, 46, 46, .55);
}

/* ---- The felt ---- */
.felt {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.5), transparent 60%),
    linear-gradient(180deg, var(--felt-1) 0%, var(--felt-2) 70%, var(--felt-edge) 100%);
  border-radius: 0 0 12px 12px;
  padding: 18px;
  color: var(--cream);
  font-family: 'Cinzel', serif;
  box-shadow: inset 0 0 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 12px;
}
/* subtle felt fiber texture */
.felt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.014) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.014) 0 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.04) 0 1px, transparent 1px);
  background-size: 7px 7px, 9px 9px, 5px 5px;
  opacity: .65;
  border-radius: inherit;
}
.felt > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .felt { padding: 12px; gap: 8px; }
}
.felt.locked { pointer-events: none; }
/* Filter must NOT be applied to any ancestor of .props-half (the slide-in
   drawer) because `filter` creates a containing block for position:fixed
   descendants — that would re-anchor the drawer to the filtered ancestor's
   box instead of the viewport, sliding it halfway down the screen.
   So we filter only sibling elements of .top-section and the deep leaf
   children of the place column, but never .top-section itself. */
.felt.locked > .phase-banner,
.felt.locked > .live-ticker,
.felt.locked > .rolls-strip,
.felt.locked > .merged-bar,
.felt.locked .place-half {
  filter: grayscale(.5) brightness(.7);
}
.felt-lock-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 10; }
.felt-lock-overlay .msg {
  background: rgba(0,0,0,.78); color: var(--brass);
  width: 44px; height: 44px;
  border-radius: 50%; border: 1.5px solid var(--brass);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
}

/* ---- Top section: 2 columns side-by-side (place LEFT, props RIGHT) ---- */
.top-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.top-section .place-half { order: 1; }
.top-section .props-half { order: 2; }
@media (max-width: 700px) {
  .top-section { grid-template-columns: 1fr; }
}
/* Rail and tab are hidden on desktop — only the slide-in drawer uses it. */
.props-rail, .props-tab { display: none; }

/* Mobile: a fixed-position rail spans the full viewport height. The rail
   is what slides between the left and right edges as the drawer opens.
   The tab itself is just a flex child centered by the rail — no transform,
   no `top`, no transitions on the tab — so its vertical position is locked
   regardless of what compositing iOS Safari does next door. */
@media (max-width: 700px) {
  .props-rail {
    display: flex;
    align-items: center;
    position: fixed;
    /* Rail spans the felt area — from below the topbar to above the chip
       drawer — so the centered tab visually sits in the middle of the
       playable area, not the middle of the whole viewport. Hardcoded top
       to match the drawer (.props-half) above. */
    top: 96px;
    bottom: var(--chip-drawer-h, 44px);
    left: 0;
    width: 38px;
    z-index: 9050;          /* above drawer (9000), below chip-drawer (9100) */
    pointer-events: none;   /* let touches pass through dead space */
    /* Use translateX (same property the drawer animates) so both run on the
       compositor thread and stay locked together. Animating `left` here
       used the layout thread, which started a frame later and let the
       drawer outpace the tab. */
    transform: translateX(0);
    transition: transform .28s cubic-bezier(.22, .9, .35, 1);
    will-change: transform;
  }
  .props-rail.is-open {
    transform: translateX(calc(100vw - 38px));
  }
  .props-tab {
    display: flex;
    align-items: center; justify-content: center;
    position: relative;
    width: 100%;
    pointer-events: auto;   /* re-enable on the actual tab */
    background: linear-gradient(90deg, var(--brass-dim), var(--brass));
    color: #1a1208;
    border: 2px solid var(--brass);
    border-left: none;
    padding: 16px 4px;
    border-radius: 0 12px 12px 0;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 10px;
    letter-spacing: .24em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    cursor: pointer;
    box-shadow: 4px 4px 14px rgba(0, 0, 0, .55);
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
  }
  .props-tab:hover,
  .props-rail.is-open .props-tab {
    background: linear-gradient(90deg, var(--brass), #ffd966);
  }
}

/* Lock the bet page body, but let the shooter board scroll inside it
   so the user can reach the pass line on shorter (PWA) viewports. The
   topbar and chip drawer stay pinned. */
body.bet-page {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}
body.bet-page > main.page {
  /* main.page sits between the topbar and the chip drawer, so its height
     must be the viewport minus BOTH. Previously we only subtracted the
     chip drawer, leaving the bottom of main.page clipped past the viewport
     and Pass Line trapped under the drawer. */
  height: calc(100dvh - var(--topbar-h, 110px) - var(--chip-drawer-h, 44px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  transition: height .25s cubic-bezier(.22, .9, .35, 1);
}
/* Mobile: a real spacer element after the felt — guarantees main.page has
   scrollable runoff below the shooter board so the user can scroll Pass
   Line / Don't Pass up above the open chip drawer. On desktop the chip
   drawer is short enough that the felt fits naturally — no spacer needed. */
@media (max-width: 700px) {
  body.bet-page > main.page::after {
    content: "";
    display: block;
    width: 100%;
    height: 30vh;
    height: 30dvh;
    pointer-events: none;
  }
}

/* Desktop compaction moved to the end of the file so it wins over the
   base .place-bet { min-height: 96px } rule (source order). */

/* When the props drawer is open, hide the felt's place + merged bars
   so absolutely nothing can bleed through under the drawer regardless
   of stacking-context quirks across browsers / PWA. */
body.props-open .felt .place-half,
body.props-open .felt > .merged-bar {
  visibility: hidden;
}
/* Lock the main felt scroll while the props drawer is open so touch
   gestures inside the drawer don't drift the background page. */
body.props-open > main.page {
  overflow: hidden;
  touch-action: none;
}

@media (max-width: 700px) {
  /* Fixed slide-in panel sized to the gap between the topbar and the
     chip drawer. CSS variables --topbar-h and --chip-drawer-h are kept
     in sync by bet.js so the drawer always lines up — no overlap with
     the header above or the chip rail below. */
  .top-section .props-half {
    position: fixed;
    /* Cover the entire felt area from just below the topbar to just above
       the chip drawer. Hardcoded top so a misbehaving --topbar-h
       measurement (filter ancestor, font reflow, etc.) can't slide the
       drawer halfway down the screen. Adjust 96px if topbar styling
       changes its height. */
    top: 96px;
    bottom: var(--chip-drawer-h, 44px);
    left: 0;
    width: calc(100vw - 38px);
    z-index: 9000;               /* nuke-it-from-orbit z-index */
    isolation: isolate;
    margin: 0;
    padding: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0d4a34 0%, #082617 100%);
    border: 2px solid var(--brass);
    border-left: none;
    border-radius: 0 12px 12px 0;
    box-shadow: 12px 0 24px rgba(0, 0, 0, .65);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.22, .9, .35, 1);
    will-change: transform;
  }
  .top-section .props-half[data-open="true"] { transform: translateX(0); }
  .props-body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Stop scroll from chaining out of the drawer into the main page when
       the user reaches the top/bottom of the props list. */
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* The drawer (.props-half) already stops at the chip drawer's top edge
       via `bottom: var(--chip-drawer-h)` — so just a small inner padding
       suffices, no need to leave extra room for an overlapping chip rail. */
    padding: 10px 10px 12px;
    display: flex; flex-direction: column; gap: 4px;
  }

  /* Tab styles below — see top-level rules outside this @media block. */

  /* Aggressive compaction so Place + COME + FIELD + Don't Pass + Pass
     all fit on iPhone-SE-class screens (~568px usable) without scroll. */
  .place-bet { min-height: 56px; padding: 6px 4px 8px; }
  .place-bet .bet-num { font-size: 22px; }
  .place-bet .bet-runs { margin-top: 0; font-size: 7px; letter-spacing: .12em; }
  .place-half { padding: 4px; }
  .place-half .field-bet { min-height: 56px; }
  .place-half .field-bet .field-title { font-size: 18px; letter-spacing: .25em; }
  .place-half .field-bet .field-numbers { font-size: 11px; }
  .place-half .field-bet .field-bonus  { font-size: 10px; }
  .place-half .come-bar { min-height: 30px; font-size: 12px; }
  .place-half .place-area { gap: 4px; }
  .place-half .place-grid { gap: 4px; }
  .place-half .place-row-wrap { grid-template-columns: 32px 1fr; gap: 4px; }
  .merged-bar { min-height: 48px; }
  .merged-bar.pass-merged { min-height: 48px; }
  .felt { padding: 6px; gap: 4px; }
  .phase-banner {
    padding: 4px 8px; gap: 6px;
    flex-wrap: nowrap;          /* keep team + phase pill on one row */
  }
  .pb-team-block { gap: 6px; min-width: 0; flex: 1 1 auto; }
  .phase-banner .team-name { font-size: 14px; line-height: 1.1; }
  .phase-banner .team-opp  {
    font-size: 10px; margin-left: 0; display: block; line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 50vw;
  }
  .pb-logo { width: 26px; height: 26px; }
  .phase-pill { padding: 3px 9px; font-size: 9px; letter-spacing: .12em; }
  .point-puck { width: 46px; height: 46px; border-width: 2.5px; padding: 0; }
  .point-puck .puck-state    { font-size: 8px; letter-spacing: .18em; }
  .point-puck .puck-num      { font-size: 18px; margin-top: 1px; }
  .point-puck .puck-num-pair { font-size: 10px; margin-top: 2px; }
  .phase-info { gap: 6px; flex: 0 0 auto; }
  /* Rules + mute live in the topbar / drawer now — hide their duplicates
     in the phase banner on mobile so we save another ~40px vertical. */
  .phase-info .iconbtn { display: none; }
  .felt-label { font-size: 10px; letter-spacing: .18em; padding: 2px 4px; }

  /* Props drawer body — tighter cells so all hardways + 1-game props fit
     without scrolling within the drawer. */
  .props-body .bet { padding: 6px 4px; }
  .props-body .bet .bet-title { font-size: 11px; }
  .props-body .bet .bet-num { font-size: 18px; }
  .props-body .bet .bet-sub { font-size: 9px; }
  .props-body .bet .bet-pay { font-size: 11px; }
  .props-body .hardways,
  .props-body .runs-grid,
  .props-body .exact-craps,
  .props-body .any-bets { gap: 4px; }
  .props-body .felt-label { margin-top: 4px; }
}
.props-half, .place-half {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px;
  border: 1.5px dashed var(--brass-dim);
  border-radius: 12px;
  background: rgba(0, 0, 0, .12);
}
.props-body { display: flex; flex-direction: column; gap: 6px; }
.props-half .hardways    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.props-half .runs-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.props-half .exact-craps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.props-half .any-bets    { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.place-half .place-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

/* Place row + COME + FIELD stack vertically. Don't Come is a vertical bar
   that ONLY runs alongside the Place number row — like a real craps table. */
.place-half .place-area {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  min-height: 0;
}
.place-half .field-bet {
  /* Don't let FIELD soak leftover height — keeps the felt compact enough
     that the chip drawer fits on desktop without scrolling. Mobile
     overrides this further with even tighter sizing. */
  flex: 0 0 auto;
  min-height: 92px;
}
.place-half .place-row-wrap {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 6px;
  align-items: stretch;
  min-width: 0;
}
.band.dc-vertical {
  /* vertical text reading bottom-to-top, like a craps table */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Cinzel', serif;
  font-size: 12px; letter-spacing: .35em; font-weight: 900;
  text-transform: uppercase;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.22) 0 6px, rgba(255,255,255,.03) 6px 11px);
  border: 1.5px solid #d4c08c;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 4px;
  color: var(--casino-red);
  text-shadow: 0 2px 0 rgba(0,0,0,.7), 0 0 12px rgba(217,46,46,.25);
  cursor: pointer;
  box-sizing: border-box;
  height: 100%;
  align-self: stretch;
}
.band.dc-vertical:hover {
  border-color: #ffd966;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.32) 0 6px, rgba(255,215,102,.06) 6px 11px);
}
/* Make the COME band visually substantial — taller, larger text. */
.place-half .come-bar {
  min-height: 56px;
  font-size: 18px;
  letter-spacing: .5em;
}
@media (max-width: 700px) {
  .place-half .place-row-wrap { grid-template-columns: 40px 1fr; gap: 5px; }
  .band.dc-vertical { font-size: 10px; letter-spacing: .25em; padding: 10px 3px; }
  .place-half .come-bar { min-height: 42px; font-size: 14px; letter-spacing: .35em; }
  /* Compress the place-half so Pass / Don't Pass stay above the fold on
     phone viewports. FIELD no longer grows to fill leftover space, place
     numbers are shorter, gaps are tightened. */
  .place-half { gap: 4px; padding: 6px; }
  .place-half .place-area { flex: 0 0 auto; gap: 4px; }
  .place-half .field-bet {
    flex: 0 0 auto;
    min-height: 50px;
    padding: 5px 10px;
  }
  .place-half .field-bet .field-title  { font-size: 15px; letter-spacing: .22em; }
  .place-half .field-bet .field-numbers { font-size: 10px; margin-top: 2px; }
  .place-half .field-bet .field-bonus  { font-size: 9px; margin-top: 2px; }
  .place-bet { min-height: 48px; padding: 5px 4px 6px; }
  .place-bet .bet-num { font-size: 20px; }
  /* And slim the merged Pass / Don't Pass bars by a few pixels. */
  .merged-bar, .merged-bar.pass-merged { min-height: 42px; }
}
.felt-label .label-sub {
  font-family: system-ui, sans-serif; font-weight: 500; letter-spacing: .04em;
  color: var(--cream-mut); font-size: 9px; text-transform: none;
}

/* ---- Pass / Don't Pass with the odds bet INTERNAL to the same bar ---- */
.merged-bar {
  position: relative;
  display: flex; align-items: stretch;
  min-height: 60px;
  overflow: hidden;
}
/* Outer bar takes the styling that pass-bar / dp-bar used to own. */
.merged-bar.dp-merged {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.22) 0 6px, rgba(255,255,255,.03) 6px 11px);
  border: 1.5px solid #d4c08c;
  border-radius: 8px;
}
.merged-bar.pass-merged {
  min-height: 92px;
  background:
    radial-gradient(ellipse at 50% 130%, rgba(255,215,102,.18), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(255,215,102,.08));
  border: 3px solid var(--brass);
  border-radius: 8px;
}
@media (max-width: 480px) {
  .merged-bar.pass-merged { min-height: 72px; }
}
/* Strip the inner zones of their own border/background — outer bar wraps them. */
.merged-bar > .inner-odds,
.merged-bar > .inner-line {
  background: transparent;
  border: none;
  border-radius: 0;
  min-height: 0;
  margin: 0;
  cursor: pointer;
  transition: background .14s ease;
}
.merged-bar > .inner-odds {
  flex: 0 0 110px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 4px;
  border-right: 2px dashed rgba(212,175,55, .6);
}
.merged-bar > .inner-odds .bet-title {
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .1em;
  color: var(--brass);
  line-height: 1.15;
  text-align: center;
}
.merged-bar > .inner-odds .bet-sub {
  font-family: system-ui, sans-serif; font-size: 9px; color: var(--cream-mut);
}
.merged-bar > .inner-line {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  font-family: 'Cinzel', serif;
  color: var(--cream); text-transform: uppercase;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
}
.merged-bar > .inner-line .line-co {
  font-family: system-ui, sans-serif;
  font-size: 9px; letter-spacing: .04em;
  font-weight: 600;
  color: var(--cream-mut);
  text-transform: none;
  text-shadow: none;
  opacity: .85;
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 480px) {
  .merged-bar > .inner-line .line-co { font-size: 8px; letter-spacing: .02em; }
}
.merged-bar.dp-merged > .inner-line { font-size: 13px; letter-spacing: .32em; }
.merged-bar.dp-merged > .inner-line small {
  letter-spacing: normal; text-transform: none; color: var(--cream-mut);
  font-family: system-ui; font-weight: 600; margin-left: 6px;
}
.merged-bar.pass-merged > .inner-line {
  font-size: 22px; letter-spacing: .5em; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.7), 0 0 18px rgba(255,255,255,.15);
}
/* Hover: subtle gold wash on whichever zone you're over. */
.merged-bar > .inner-odds:hover,
.merged-bar > .inner-line:hover {
  background: rgba(255,215,102,.08);
}
.merged-bar > .inner-odds.phase-locked,
.merged-bar > .inner-line.phase-locked { opacity: .6; cursor: not-allowed; }
.merged-bar > .inner-odds.phase-locked:hover,
.merged-bar > .inner-line.phase-locked:hover { background: transparent; }

@media (max-width: 480px) {
  .merged-bar > .inner-odds { flex-basis: 84px; padding: 6px 3px; }
  .merged-bar > .inner-odds .bet-title { font-size: 10px; letter-spacing: .06em; }
  .merged-bar > .inner-odds .bet-sub   { font-size: 8px; }
  .merged-bar.dp-merged > .inner-line { font-size: 11px; letter-spacing: .22em; }
  .merged-bar.pass-merged > .inner-line { font-size: 17px; letter-spacing: .35em; }
}

.felt-label {
  text-align: center; font-size: 10px; color: #d4c08c;
  text-transform: uppercase; letter-spacing: .28em; font-weight: 700;
  margin-bottom: -2px; font-family: 'Cinzel', serif;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

.top-props { display: flex; flex-direction: column; gap: 8px; }
.top-props .hardways    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.top-props .center-props { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 700px) {
  .top-props .hardways, .top-props .center-props { grid-template-columns: repeat(2, 1fr); }
}
.place-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 700px) { .place-row { grid-template-columns: repeat(3, 1fr); } }

/* ---- bet region ---- */
.bet {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.04), transparent 70%),
    rgba(255,255,255,.025);
  border: 1.5px solid #d4c08c;
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  color: var(--cream);
  display: flex; flex-direction: column; gap: 3px;
  justify-content: center; align-items: center;
  transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
  user-select: none;
  min-height: 84px;
  font-family: 'Cinzel', serif;
}
.bet:hover {
  background: rgba(255,215,102,.12);
  border-color: #ffd966;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255,215,102,.18);
}
.bet.disabled, .band.disabled {
  opacity: .35; cursor: not-allowed;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 6px, transparent 6px 12px);
}
.bet.disabled:hover, .band.disabled:hover {
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 6px, transparent 6px 12px);
  border-color: #d4c08c; transform: none; box-shadow: none;
}
.bet.phase-locked, .band.phase-locked {
  opacity: .55; cursor: not-allowed;
}
.bet.phase-locked:hover, .band.phase-locked:hover {
  background: rgba(255,255,255,.025); border-color: #d4c08c; transform: none; box-shadow: none;
}

.bet .bet-num    { font-family: 'Bodoni Moda', 'Bodoni 72', Georgia, serif;
                   font-size: 32px; font-weight: 900; color: #fff; line-height: 1;
                   text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 12px rgba(255,255,255,.15);
                   white-space: nowrap; }
.bet .bet-num-pair {
  font-size: 16px;
  letter-spacing: 0;
  white-space: nowrap;
  /* clamp so the text never wraps but auto-shrinks if the cell narrows. */
  font-size: clamp(11px, 3.4vw, 18px);
}
@media (max-width: 480px) {
  .bet { padding: 10px 4px; }
  .bet .bet-num-pair { font-size: clamp(10px, 3vw, 14px); }
}
.bet .bet-title  { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 800;
                   letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.bet .bet-sub    { font-family: system-ui, sans-serif; font-size: 10px;
                   color: var(--cream-mut); letter-spacing: .04em; }
.bet .bet-pay    { font-family: 'Bodoni Moda', Georgia, serif;
                   font-size: 12px; font-weight: 700; color: var(--brass); letter-spacing: .03em; }

/* ---- Classic-craps color hits ---- */

/* ---- Place spots: classic vegas square with crisp white border ---- */
.place-bet {
  position: relative;
  border: 1.5px solid rgba(255, 255, 255, .78);
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.05), transparent 65%),
    linear-gradient(180deg, rgba(13,74,52,.55), rgba(8,38,23,.7));
  padding: 14px 6px 18px;
  min-height: 96px;
  justify-content: center;
}
.place-bet:hover {
  border-color: #fff;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,215,102,.10), transparent 65%),
    linear-gradient(180deg, rgba(13,74,52,.7), rgba(8,38,23,.85));
}
/* Yellow-gold place numbers (vegas iconic). */
.place-bet .bet-num {
  color: #ffd966;
  font-size: 38px;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(0,0,0,.75), 0 0 14px rgba(255,215,102,.18);
}
/* Compound selector beats `.place-bet .bet-num` (38px) on specificity, so
   the pair labels ("4 or 12", "10 or 11") actually shrink to fit. */
.place-bet .bet-num.bet-num-pair {
  font-size: clamp(15px, 3vw, 22px);
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,.7);
}
/* small "Runs" label under each Place number, so spots read as runs counts. */
.place-bet .bet-runs {
  font-family: system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-mut);
  font-weight: 700;
  margin-top: 2px;
  line-height: 1;
  opacity: .85;
}
/* Live payout ratio under each Place spot — populated by bet.js from
   s.payouts and updated as matchup adjustments change pre-lock. */
.place-bet .bet-pay {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--brass);
  margin-top: 3px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
}
@media (max-width: 700px) {
  .place-bet .bet-pay { font-size: 10px; margin-top: 2px; }
}
/* PLACE / BUY / LAY corner buttons — the three bet types per Place spot,
   styled like the corner labels on a real craps square. */
.place-bet .place-corner {
  position: absolute;
  background: transparent;
  border: 1px solid transparent;
  font-family: 'Cinzel', serif;
  font-size: 10px; font-weight: 800;
  color: rgba(255, 255, 255, .85);
  letter-spacing: .18em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 4px;
  transition: background .12s, color .12s, border-color .12s;
  z-index: 6;
  line-height: 1;
}
.place-bet .place-corner:hover {
  background: rgba(255, 215, 102, .18);
  color: #ffd966;
  border-color: rgba(212, 175, 55, .4);
}
.place-bet .corner-place { bottom: 4px; left: 5px; }
.place-bet .corner-buy   { bottom: 4px; right: 5px; }
.place-bet .corner-lay   { top: 4px;    right: 5px; }

/* Locked Come / Don't Come chip — appears on the Place cell whose number
   matches a come bet's established point. Clicking opens come-odds modal. */
.place-bet .come-locked {
  position: absolute;
  top: 4px; left: 5px;
  z-index: 7;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.92));
  border: 1.5px solid var(--brass);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 8px rgba(212,175,55,.25);
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 800; font-size: 10px;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  transition: transform .08s, box-shadow .15s, border-color .15s;
}
.place-bet .come-locked:hover {
  transform: translateY(-1px);
  border-color: #ffd966;
  box-shadow: 0 4px 12px rgba(255,215,102,.4), 0 0 14px rgba(255,215,102,.35);
}
.place-bet .come-locked.dont-come {
  border-color: var(--casino-red);
  color: #fca5a5;
  box-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 8px rgba(217,46,46,.25);
}
.place-bet .come-locked.dont-come:hover {
  border-color: #ef4444;
  box-shadow: 0 4px 12px rgba(239,68,68,.4), 0 0 14px rgba(239,68,68,.35);
}
.place-bet .come-locked .cl-icon {
  font-size: 9px; line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.5));
}
.place-bet .come-locked .cl-label {
  font-family: 'Cinzel', serif;
  font-weight: 900; font-size: 9px;
  letter-spacing: .08em;
  color: inherit;
}
.place-bet .come-locked .cl-amt { color: inherit; }
.place-bet .come-locked .cl-odds {
  margin-left: 4px;
  font-size: 9px;
  color: var(--cream-mut);
  font-family: system-ui, sans-serif;
  font-weight: 600;
}
@media (max-width: 480px) {
  .place-bet .come-locked { padding: 2px 6px; font-size: 9px; }
  .place-bet .come-locked .cl-odds { display: none; }
}
@media (max-width: 480px) {
  .place-bet { min-height: 84px; padding: 14px 4px 14px; }
  .place-bet .bet-num { font-size: 30px; }
  .place-bet .bet-num.bet-num-pair { font-size: 13px; }
  .place-bet .bet-runs { font-size: 8px; letter-spacing: .14em; }
  /* Hide PLACE/BUY/LAY corner buttons on mobile — the modal segmented
     control replaces them so the felt stays readable. Tapping the cell
     opens the Place modal; users switch to Buy/Lay from inside. */
  .place-bet .place-corner { display: none; }
}

/* COME / DON'T COME bands — red text, like a real casino felt. */
.band.come-bar,
.band.dc-bar {
  color: var(--casino-red);
  text-shadow: 0 2px 0 rgba(0,0,0,.7), 0 0 12px rgba(217,46,46,.25);
}
.band.dc-bar small {
  color: var(--cream-mut);   /* keep "bar 12" / hint text legible */
}

/* ANY 7 and ANY CRAPS labels — red. */
.any-bets .bet .bet-title {
  color: var(--casino-red);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

/* Field bonus callouts ("13+ DOUBLE", "9 TRIPLE") — red, casino-style. */
.bet.field-bet .field-bonus {
  color: var(--casino-red);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.bet.field-bet .field-bonus-sep {
  color: var(--casino-red-dim);
  margin: 0 6px;
}

/* point marker glow */
.bet.is-point {
  background: radial-gradient(ellipse at 50% 50%, rgba(255,215,102,.32), rgba(255,215,102,.1)) !important;
  border-color: #ffd966 !important;
  box-shadow: 0 0 0 3px rgba(255,215,102,.18), 0 0 22px rgba(255,215,102,.35) !important;
}
.bet.is-point::before {
  content: attr(data-point-label);
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif; font-size: 9px; font-weight: 900;
  letter-spacing: .22em; color: #382600;
  background: linear-gradient(180deg, #fff5cc, #ffd966);
  padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 -1px 2px rgba(0,0,0,.2);
  z-index: 5;
  white-space: nowrap;
}

/* big 6 / big 8 vertical */
.bet.big {
  writing-mode: vertical-rl; transform: rotate(180deg); padding: 0;
  min-height: auto; height: 100%;
  font-size: 22px; letter-spacing: .35em; font-weight: 900;
  font-family: 'Cinzel', serif;
}
.bet.big .bet-title { font-size: 22px; }

/* field — proper trapezoid via clip-path with chips visible (chip-stack escapes via z-index/positioning) */
.bet.field-bet {
  min-height: 92px;
  background:
    repeating-linear-gradient(45deg, rgba(212,175,55,.07) 0 6px, transparent 6px 18px),
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.32));
  border: 2px solid var(--brass);
  padding: 14px;
}
.bet.field-bet:hover {
  background:
    repeating-linear-gradient(45deg, rgba(212,175,55,.15) 0 6px, transparent 6px 18px),
    rgba(255,215,102,.1);
}
.bet.field-bet .field-title {
  font-family: 'Cinzel', serif;
  font-size: 32px; font-weight: 900; letter-spacing: .42em; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 18px rgba(255,255,255,.12);
}
.bet.field-bet .field-numbers {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 14px; color: var(--brass); font-weight: 800; letter-spacing: .18em;
  margin-top: 4px;
}
.bet.field-bet .field-bonus {
  font-size: 10px; color: var(--cream); letter-spacing: .14em; margin-top: 4px;
  font-family: 'Cinzel', serif; font-weight: 700;
}

/* come / don't come bands */
.band {
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 14px; font-weight: 900; letter-spacing: .42em; text-transform: uppercase;
  color: var(--cream);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.04), transparent 60%),
    rgba(0,0,0,.22);
  border: 1.5px solid #d4c08c;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}
.band.dp-bar {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.22) 0 6px, rgba(255,255,255,.03) 6px 11px);
  font-size: 12px; letter-spacing: .32em;
}
.band.dp-bar small {
  letter-spacing: normal; text-transform: none; color: var(--cream-mut);
  font-family: system-ui; font-weight: 600;
}

/* Pass Line — big curved gold arc */
.bet.pass-bar {
  min-height: 62px;
  background:
    radial-gradient(ellipse at 50% 130%, rgba(255,215,102,.18), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(255,215,102,.08));
  border: 3px solid var(--brass);
  border-radius: 999px / 40px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 22px; font-weight: 900; letter-spacing: .5em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.7), 0 0 18px rgba(255,255,255,.15);
  padding: 12px;
}
@media (max-width: 480px) {
  .bet.pass-bar { font-size: 16px; letter-spacing: .3em; min-height: 52px; }
  .bet.field-bet .field-title { font-size: 22px; letter-spacing: .25em; }
  .bet.field-bet .field-numbers { font-size: 12px; letter-spacing: .1em; }
  .bet.field-bet .field-bonus   { font-size: 9px;  letter-spacing: .08em; }
  .band { font-size: 12px; letter-spacing: .25em; min-height: 38px; }
  .band.dp-bar { font-size: 10px; letter-spacing: .18em; }
  .felt-label { font-size: 9px; letter-spacing: .2em; }
  .bet .bet-num { font-size: 26px; }
  .bet .bet-title { font-size: 11px; letter-spacing: .08em; }
  .phase-banner .team-name { font-size: 18px; }
  .phase-banner .team-opp { display: block; margin-left: 0; margin-top: 2px; }
  .phase-pill { font-size: 10px; letter-spacing: .12em; padding: 5px 10px; }
  .point-puck { width: 50px; height: 50px; border-width: 2.5px; padding: 0; }
  .point-puck .puck-state    { font-size: 9px; }
  .point-puck .puck-num      { font-size: 19px; }
  .point-puck .puck-num-pair { font-size: 11px; }
}

/* ---- Odds row (below pass line) ---- */
.felt .odds-row {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 4px;
}
.odds-bet { min-height: 70px; }
@media (max-width: 700px) { .felt .odds-row { grid-template-columns: 1fr; } }

/* ===========================================================
                     CHIP STACKS ON BETS
   =========================================================== */

/* Stack rendering is done inline in JS, but the wrapper class lets us tweak. */
.chip-stack {
  /* JS sets position/transform inline */
}

/* "coming soon" tag for disabled bets */
.coming-soon {
  position: absolute; top: 4px; right: 4px;
  font-family: 'Cinzel', serif;
  font-size: 8px; color: var(--brass); letter-spacing: .2em;
  text-transform: uppercase;
  background: rgba(0,0,0,.55); padding: 2px 5px; border-radius: 4px;
  z-index: 4;
}

/* ===========================================================
                     REGION MODAL
   =========================================================== */

.region-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  display: grid; place-items: end center;
  z-index: 60;
  /* Lift the modal above the chip drawer so the entire card is visible.
     --chip-drawer-h tracks the drawer (handle height when closed, full
     height when open). 12px breathing room above the drawer's top edge. */
  padding: 0 0 calc(var(--chip-drawer-h, 44px) + 12px) 0;
  pointer-events: none;
  transition: background .22s ease, padding-bottom .25s cubic-bezier(.22, .9, .35, 1);
}
/* override the global `.hidden { display: none !important }` so we can animate */
.region-modal.hidden { display: grid !important; }
@media (min-width: 700px) { .region-modal { place-items: center; } }
.region-modal:not(.hidden) {
  background: rgba(0,0,0,.74);
  pointer-events: auto;
}
.rm-card {
  width: 100%;
  max-width: 560px;
  /* Wood frame, mirrors .shooter-board / .rules-card. */
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.05) 0 1px, transparent 1px 4px,
      rgba(255,255,255,.02) 4px 5px, transparent 5px 11px),
    linear-gradient(180deg, var(--wood-1) 0%, var(--wood-2) 100%);
  border: none;
  /* All four corners rounded since the card no longer sits flush with the
     viewport bottom (it floats above the chip drawer). */
  border-radius: 18px;
  padding: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 -16px 50px rgba(0,0,0,.6);
  /* Cap height so the lifted modal fits between the top of the viewport
     and the chip drawer's top edge. */
  max-height: calc(100vh - var(--chip-drawer-h, 44px) - 24px);
  max-height: calc(100dvh - var(--chip-drawer-h, 44px) - 24px);
  overflow: hidden;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .32s cubic-bezier(.2,.9,.3,1), opacity .22s ease;
  position: relative;
  display: flex; flex-direction: column;
  color: var(--cream);
}
.rm-card::before {
  /* brass dashed stitching just inside the wood — matches .shooter-board */
  content: ""; position: absolute;
  inset: 4px; border-radius: 14px; pointer-events: none;
  border: 1px dashed var(--wood-stitch);
  opacity: .55;
}
.region-modal:not(.hidden) .rm-card { transform: translateY(0); opacity: 1; }
@media (min-width: 700px) {
  .rm-card {
    border-radius: 18px;
    padding: 6px;
    transform: translateY(30px) scale(.97);
  }
  .rm-card::before { border-radius: 14px; border-bottom: 1px dashed var(--wood-stitch); }
  .region-modal:not(.hidden) .rm-card { transform: translateY(0) scale(1); }
}

/* Inner felt panel — wraps everything below the header. */
.rm-body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.5), transparent 60%),
    linear-gradient(180deg, var(--felt-1) 0%, var(--felt-2) 70%, var(--felt-edge) 100%);
  border-radius: 0 0 12px 12px;
  padding: 18px 22px 22px;
  overflow-y: auto;
  box-shadow: inset 0 0 90px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.4);
}
@media (min-width: 700px) {
  .rm-body { border-radius: 12px; }
}

/* Brass header band — sits above the felt body. */
.rm-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px;
  background: linear-gradient(180deg, #1a3a2a 0%, #0f2a1d 100%);
  border-bottom: 1.5px solid var(--brass);
  border-radius: 12px 12px 0 0;
  margin: 0;
  position: relative; z-index: 1;
}
@media (min-width: 700px) { .rm-header { border-radius: 12px 12px 0 0; } }
.rm-header h3 {
  margin: 0; font-family: 'Cinzel', serif; font-size: 20px;
  font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
}
.rm-header .iconbtn {
  background: rgba(0,0,0,.3); color: var(--cream);
  border: 1px solid var(--brass-dim);
  border-radius: 6px;
  width: 30px; height: 30px;
  font-size: 22px; cursor: pointer; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.rm-header .iconbtn:hover {
  background: rgba(0,0,0,.55);
  border-color: var(--brass);
  color: #ffd966;
}
/* PLACE / BUY / LAY segmented switcher inside the modal — replaces the
   three corner buttons on mobile, also available on desktop. */
.rm-segmented {
  display: flex;
  gap: 3px;
  background: rgba(0, 0, 0, .42);
  border: 1.5px solid var(--brass-dim);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 12px;
}
.rm-segmented.hidden { display: none; }
.rm-seg-btn {
  flex: 1;
  padding: 10px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: rgba(255, 255, 255, .7);
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.rm-seg-btn:hover {
  color: #ffd966;
  background: rgba(255, 215, 102, .08);
}
.rm-seg-btn.active {
  color: #ffd966;
  background: linear-gradient(180deg, rgba(212, 175, 55, .25), rgba(212, 175, 55, .10));
  border-color: var(--brass);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .4), inset 0 0 8px rgba(255, 215, 102, .12);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
}

.rm-detail {
  color: var(--cream-mut); font-size: 13px;
  font-family: system-ui, sans-serif;
  margin-top: 2px;
}
.rm-pay {
  color: var(--brass); font-weight: 700; font-size: 13px; margin-top: 4px;
  font-family: 'Bodoni Moda', Georgia, serif;
  letter-spacing: .02em;
}

.rm-section { margin-top: 16px; }
.rm-section:first-of-type { margin-top: 0; }
.rm-section-label {
  font-family: 'Cinzel', serif; text-transform: uppercase;
  font-size: 10px; letter-spacing: .26em;
  color: var(--brass); font-weight: 800; margin-bottom: 8px;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

.rm-table-display {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; min-height: 64px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--felt-1), var(--felt-2));
  color: var(--cream);
  border-radius: 12px;
  border: 1.5px solid var(--brass);
  position: relative;
  box-shadow: inset 0 0 30px rgba(0,0,0,.4);
}
.rm-stack-visual { display: flex; align-items: center; padding-left: 10px; }
.rm-total {
  background: rgba(0,0,0,.85); color: var(--brass);
  border: 1.5px solid var(--brass); border-radius: 999px;
  padding: 6px 16px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums;
}
.rm-sub-info {
  margin-top: 6px; font-size: 12px; color: #ef4444; font-weight: 700;
  display: none; font-family: system-ui, sans-serif;
}

.rm-chips {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
@media (max-width: 420px) { .rm-chips { grid-template-columns: repeat(3, 1fr); } }
.rm-chips .rail-chip { width: 100%; height: 56px; border-radius: 50%; aspect-ratio: 1 / 1; font-size: 14px; }
.rm-custom-row {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
}
.rm-custom-row .rm-or {
  font-family: 'Cinzel', serif;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-mut); font-weight: 700;
}
.rm-custom-row .rm-dollar {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 800; font-size: 17px; color: var(--brass);
  margin-left: 2px;
}
.rm-custom-row input {
  flex: 1; padding: 10px 12px; border-radius: 8px;
  border: 1.5px solid var(--brass-dim);
  background: rgba(0, 0, 0, .35);
  color: var(--cream);
  font-size: 15px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, background .15s;
}
.rm-custom-row input:focus {
  outline: none;
  border-color: var(--brass);
  background: rgba(0, 0, 0, .55);
}
.rm-custom-row input::placeholder { color: rgba(245, 232, 193, .35); }

.rm-error {
  color: #fff;
  background: linear-gradient(180deg, #b91c1c, #7f1d1d);
  border: 1px solid #ef4444;
  font-weight: 700; font-size: 13px;
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  font-family: system-ui, sans-serif;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.rm-error.hidden { display: none; }

.rm-footer {
  margin-top: 20px; display: flex; gap: 10px; justify-content: space-between;
}
.rm-footer .btn { flex: 1; padding: 13px; font-size: 14px; }

/* Done button — brass like a casino "play" chip. */
.rm-btn-done {
  font-family: 'Cinzel', serif;
  font-weight: 900; letter-spacing: .26em; text-transform: uppercase;
  color: #382600;
  background: linear-gradient(180deg, #ffeaa6, #d4af37);
  border: 1.5px solid #b8941f;
  box-shadow: 0 4px 12px rgba(212, 175, 55, .35),
              inset 0 -2px 4px rgba(0, 0, 0, .25),
              inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: filter .12s, transform .08s, box-shadow .15s;
}
.rm-btn-done:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(212, 175, 55, .55),
              inset 0 -2px 4px rgba(0, 0, 0, .25),
              inset 0 1px 0 rgba(255, 255, 255, .4);
}
.rm-btn-done:active { transform: translateY(1px); }

/* Take Down — casino red, secondary visual weight. */
.rm-btn-takedown {
  font-family: 'Cinzel', serif;
  font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #d92e2e, #8a1717);
  border: 1.5px solid #6b1010;
  box-shadow: 0 4px 12px rgba(217, 46, 46, .35),
              inset 0 -2px 4px rgba(0, 0, 0, .3),
              inset 0 1px 0 rgba(255, 255, 255, .15);
  transition: filter .12s, transform .08s;
}
.rm-btn-takedown:hover { filter: brightness(1.08); }
.rm-btn-takedown:active { transform: translateY(1px); }

/* "Add" custom-amount button — brass-outlined ghost. */
.rm-btn-ghost {
  background: rgba(0, 0, 0, .35);
  color: var(--cream);
  border: 1.5px solid var(--brass-dim);
  font-family: 'Cinzel', serif;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: 12px;
  padding: 9px 14px;
  transition: background .12s, border-color .12s, color .12s;
}
.rm-btn-ghost:hover {
  background: rgba(0, 0, 0, .55);
  border-color: var(--brass);
  color: #ffd966;
}

/* ===========================================================
                     CHIP RAIL (selector)
   =========================================================== */

.rail-chip {
  width: 60px; height: 60px; border-radius: 50%;
  border: 4px dashed #fff;
  cursor: pointer;
  font-weight: 900; font-size: 14px;
  display: grid; place-items: center;
  transition: transform .08s, box-shadow .15s;
  box-shadow: 0 4px 8px rgba(0,0,0,.3), inset 0 -3px 5px rgba(0,0,0,.4);
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-family: 'Bodoni Moda', Georgia, serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
}
.rail-chip:hover  { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 14px rgba(0,0,0,.4), inset 0 -3px 5px rgba(0,0,0,.4); }
.rail-chip:active { transform: translateY(0) scale(.96); transition: transform .08s ease; }
.rail-chip.selected { outline: 3px solid var(--brass); outline-offset: 2px; }
.rail-chip[data-amt="1"]   { background: radial-gradient(circle at 30% 30%, #9ca3af, #4b5563); }
.rail-chip[data-amt="5"]   { background: radial-gradient(circle at 30% 30%, #dc2626, #7f1d1d); }
.rail-chip[data-amt="10"]  { background: radial-gradient(circle at 30% 30%, #2563eb, #1e3a8a); }
.rail-chip[data-amt="25"]  { background: radial-gradient(circle at 30% 30%, #16a34a, #14532d); }
.rail-chip[data-amt="100"] { background: radial-gradient(circle at 30% 30%, #111827, #000); border-color: var(--brass); }
.rail-chip[data-amt="500"] { background: radial-gradient(circle at 30% 30%, #7c3aed, #4c1d95); }

/* ---- empty state ---- */
.no-shooters .card {
  text-align: center; padding: 50px 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.08), transparent 60%),
    var(--card);
}
.no-shooters h2 { margin: 0 0 8px; font-family: 'Cinzel', serif; letter-spacing: .04em; }

/* ---- toast ---- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: linear-gradient(180deg, #2a2a2a, #0f0f0f);
  color: var(--brass); padding: 12px 22px;
  border-radius: 999px; border: 1px solid var(--brass);
  font-weight: 800; opacity: 0;
  font-family: 'Cinzel', serif; letter-spacing: .08em; font-size: 13px;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.9,.3,1);
  z-index: 200;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Inline "why locked" tip pinned over the felt region the user just tried
 * to bet on — answers "why didn't my chip land?" right where they looked.
 * Brass-on-charcoal pill, gentle pop-in. Two-second auto-fade. */
.spot-tip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.92);
  background: linear-gradient(180deg, #2a2a2a, #0f0f0f);
  color: var(--brass);
  border: 1.5px solid var(--brass);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: 'Cinzel', serif;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 4px 14px rgba(0,0,0,.55), 0 0 16px rgba(212,175,55,.25);
  opacity: 0; pointer-events: none;
  z-index: 25;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1);
}
.spot-tip.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (max-width: 480px) {
  .spot-tip { font-size: 10px; padding: 6px 11px; letter-spacing: .06em; }
}

/* ===========================================================
          Legacy .confirm-wrap / .confirm-card (pick-team)
   =========================================================== */

.confirm-wrap {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  display: grid; place-items: center;
  z-index: 60;
  padding: 16px;
  pointer-events: none;
  transition: background .22s ease;
}
.confirm-wrap.hidden { display: grid !important; }
.confirm-wrap:not(.hidden) { background: rgba(0,0,0,.74); pointer-events: auto; }

.confirm-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brass);
  border-radius: 16px;
  padding: 20px 24px;
  width: 100%; max-width: 520px;
  box-sizing: border-box;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  transform: translateY(24px) scale(.96);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2,.9,.3,1), opacity .22s ease;
}
@media (max-width: 480px) {
  .confirm-card { padding: 16px 14px; border-radius: 14px; }
}
.pick-date-row { margin: 10px 0; display: flex; gap: 6px; }
.pick-date-row input[type=date] {
  flex: 1; min-width: 0; padding: 8px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--card2); color: var(--text); font-size: 13px;
}
.pick-games-scroll { max-height: 50vh; overflow: auto; }
.pick-games-scroll .team-btn span:first-child {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.confirm-wrap:not(.hidden) .confirm-card { transform: translateY(0) scale(1); opacity: 1; }
.confirm-card h3 { margin: 0 0 6px; font-family: 'Cinzel', serif; font-size: 20px; letter-spacing: .04em; }
.confirm-card .sub { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.confirm-card .actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
.confirm-card .row-pair { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px dashed var(--border); }
.confirm-card .row-pair .v { font-weight: 800; }
.confirm-card .potential { color: #22c55e; font-weight: 800; }
.confirm-card .lose { color: #ef4444; font-weight: 700; }

/* ===========================================================
                        ANIMATIONS
   =========================================================== */

/* Chip drop — each chip disc in a stack animates in with bounce. */
@keyframes chipDrop {
  0%   { transform: translateY(-50px) rotate(-8deg); opacity: 0; }
  55%  { transform: translateY(4px)  rotate(2deg);  opacity: 1; }
  80%  { transform: translateY(-2px) rotate(0deg);  }
  100% { transform: translateY(0);                   opacity: 1; }
}
.chip-stack .chip-disc {
  animation: chipDrop .42s cubic-bezier(.28, 1.35, .5, 1) both;
}
.chip-stack .chip-disc:nth-child(1) { animation-delay:   0ms; }
.chip-stack .chip-disc:nth-child(2) { animation-delay:  70ms; }
.chip-stack .chip-disc:nth-child(3) { animation-delay: 140ms; }
.chip-stack .chip-disc:nth-child(4) { animation-delay: 210ms; }

/* Total-value pill slides in shortly after the chips land. */
@keyframes labelPop {
  0%   { transform: scale(.6); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.chip-stack > div:last-child {
  animation: labelPop .35s cubic-bezier(.3, 1.4, .5, 1) .25s both;
}

/* Point pill: gently pulse while on point so the user's eye is drawn to phase. */
@keyframes pointGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(255,215,102,.45), inset 0 -2px 4px rgba(0,0,0,.15); }
  50%      { box-shadow: 0 0 22px rgba(255,215,102,.85), inset 0 -2px 4px rgba(0,0,0,.15); }
}
.phase-pill.point { animation: pointGlow 2s ease-in-out infinite; }

/* Point marker on a Place number — slow breathing glow. */
@keyframes markerPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,215,102,.14), 0 0 20px rgba(255,215,102,.3); }
  50%      { box-shadow: 0 0 0 4px rgba(255,215,102,.22), 0 0 30px rgba(255,215,102,.55); }
}
.bet.is-point { animation: markerPulse 2.4s ease-in-out infinite; }

/* Button press feedback */
.btn:active { transform: translateY(1px) scale(.98); transition: transform .08s ease; }

/* Region hover scale (already translateY(-1), adding subtle glow in @keyframes) */
@keyframes betPulse {
  0% { box-shadow: 0 4px 14px rgba(255,215,102,.22); }
  100% { box-shadow: 0 4px 22px rgba(255,215,102,.45); }
}
.bet:hover:not(.disabled):not(.phase-locked) {
  animation: betPulse .8s ease-in-out infinite alternate;
}

/* ===========================================================
              LIVE TICKER + RECENT ROLLS STRIP
   =========================================================== */

.live-ticker {
  margin: 6px 8px 0;
  padding: 6px 14px;
  background: linear-gradient(90deg, rgba(220, 38, 38, .14), rgba(220, 38, 38, .04));
  border: 1px solid rgba(220, 38, 38, .35);
  border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .14em;
  color: var(--cream);
  text-transform: uppercase;
}
.live-ticker.hidden { display: none; }
.live-ticker .live-dot {
  color: #ef4444; font-size: 11px;
  animation: livePulse 1.2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; text-shadow: 0 0 8px #ef4444; }
}

.rolls-strip {
  margin: 6px 8px 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, .15);
  border: 1px dashed var(--brass-dim);
  border-radius: 8px;
  display: flex; align-items: center; gap: 12px;
}
.rolls-strip.hidden { display: none; }
.rolls-strip .strip-label {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .22em;
  color: var(--brass); text-transform: uppercase; font-weight: 800;
  white-space: nowrap;
}
.rolls-list { display: flex; gap: 6px; flex: 1; overflow-x: auto; }
.roll-pill {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 4px 9px; border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid var(--brass-dim);
  color: var(--cream);
  font-family: 'Bodoni Moda', Georgia, serif;
  min-width: 38px;
  line-height: 1;
}
.roll-pill b { font-size: 16px; font-weight: 900; }
.roll-pill small {
  font-size: 9px; color: var(--cream-mut); margin-top: 2px;
  font-family: system-ui, sans-serif; letter-spacing: .04em;
}
.roll-pill.seven-out { background: rgba(239,68,68,.2); border-color: #ef4444; }
.roll-pill.seven-out b { color: #fca5a5; }
.roll-pill.point-made { background: rgba(34,197,94,.18); border-color: #22c55e; }
.roll-pill.point-made b { color: #86efac; }
.roll-pill.natural { background: rgba(255,215,102,.16); border-color: var(--brass); }
.roll-pill.natural b { color: #ffd966; }

/* mute btn in phase banner */
.iconbtn.mute-btn {
  background: rgba(0,0,0,.3); border: 1px solid var(--brass-dim);
  color: var(--cream); border-radius: 6px;
  width: 32px; height: 32px;
  font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn.mute-btn:hover { background: rgba(0,0,0,.5); }

/* rules btn in phase banner — same chassis as mute, brass "?" glyph */
.iconbtn.rules-btn {
  background: rgba(0,0,0,.3); border: 1px solid var(--brass-dim);
  color: var(--brass); border-radius: 6px;
  width: 32px; height: 32px;
  font-family: 'Cinzel', serif;
  font-size: 17px; font-weight: 900;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.iconbtn.rules-btn:hover {
  background: rgba(0,0,0,.55);
  border-color: var(--brass);
  color: #ffd966;
}

/* ===========================================================
              COME / DON'T COME ROW
   =========================================================== */
.felt .cdc-row {
  grid-column: 2 / 3; grid-row: 3;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.felt .cdc-row .come-bar { order: 1; }
.felt .cdc-row .dc-bar   { order: 2; }
@media (max-width: 900px) {
  .felt .cdc-row { grid-column: 1; grid-row: auto; }
}
.band.dc-bar {
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.22) 0 6px, rgba(255,255,255,.03) 6px 11px);
  font-size: 13px; letter-spacing: .3em;
}

/* ===========================================================
              ROLL REVEAL OVERLAY
   =========================================================== */
.roll-reveal {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(8,32,20,.92), rgba(0,0,0,.92));
  z-index: 200;
  display: grid; place-items: center;
  padding: 16px;
  animation: revealFade .25s ease-out;
}
.roll-reveal.closing { animation: revealFadeOut .25s ease-in forwards; }
@keyframes revealFade    { from { opacity: 0; }   to { opacity: 1; } }
@keyframes revealFadeOut { from { opacity: 1; }   to { opacity: 0; } }

.reveal-card {
  box-sizing: border-box;
  width: min(420px, calc(100vw - 24px));
  max-width: 100%;
  background: linear-gradient(180deg, #1a3a2a, #0a2417);
  border: 2.5px solid var(--brass);
  border-radius: 18px;
  padding: 26px 22px;
  text-align: center;
  color: var(--cream);
  font-family: 'Cinzel', serif;
  box-shadow: 0 0 60px rgba(255,215,102,.25), 0 30px 60px rgba(0,0,0,.6);
  transform: scale(.92);
  animation: revealPop .42s cubic-bezier(.3, 1.4, .5, 1) forwards;
}
@media (max-width: 420px) {
  .reveal-card { padding: 22px 16px; }
  .reveal-headline { font-size: 26px; letter-spacing: .12em; }
  .reveal-dice { font-size: 56px; gap: 14px; }
  .reveal-bets { max-width: 100%; }
  .reveal-bet {
    grid-template-columns: 16px minmax(64px, max-content) 1fr;
    gap: 6px;
  }
}
@keyframes revealPop {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.reveal-team {
  font-size: 18px; font-weight: 900; letter-spacing: .08em;
  color: var(--brass); text-transform: uppercase;
  margin-bottom: 14px;
}
.reveal-rolling.hidden { display: none; }
.reveal-dice {
  font-size: 64px; line-height: 1;
  display: flex; gap: 18px; justify-content: center;
  margin: 8px 0 14px;
  animation: diceShake .15s ease-in-out infinite;
}
@keyframes diceShake {
  0%,100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-3px) rotate(-3deg); }
  75% { transform: translateX(3px) rotate(3deg); }
}
.reveal-rolling-text {
  font-size: 14px; letter-spacing: .3em; color: var(--cream-mut);
  text-transform: uppercase;
}
.reveal-result.hidden { display: none; }
.reveal-headline {
  font-family: 'Cinzel', serif; text-transform: uppercase;
  font-size: 30px; font-weight: 900; letter-spacing: .14em;
  line-height: 1.15;
}
.reveal-headline.tone-good { color: #86efac; text-shadow: 0 0 22px rgba(134,239,172,.55); }
.reveal-headline.tone-bad  { color: #fca5a5; text-shadow: 0 0 22px rgba(252,165,165,.55); }
.reveal-headline.tone-set  { color: var(--brass); text-shadow: 0 0 22px rgba(212,175,55,.55); }
.reveal-headline-sub {
  margin-top: 6px;
  font-family: 'Cinzel', serif; text-transform: uppercase;
  font-size: 13px; letter-spacing: .22em; color: var(--cream-mut);
}
.reveal-headline-sub.hidden { display: none; }
.reveal-runs-line {
  margin-top: 10px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 15px; color: var(--cream-mut);
  font-variant-numeric: tabular-nums;
}
.reveal-bets {
  margin: 18px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(212,175,55,.3);
  text-align: left;
  max-width: 320px;
}
.reveal-bets.hidden { display: none; }
.reveal-bets-title {
  font-family: 'Cinzel', serif; text-transform: uppercase;
  font-size: 11px; letter-spacing: .26em; color: var(--brass);
  text-align: center; margin-bottom: 10px;
}
.reveal-bet {
  display: grid;
  grid-template-columns: 18px 78px 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 4px 2px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.reveal-bet .rb-icon { font-weight: 900; text-align: center; }
.reveal-bet .rb-net  { font-weight: 700; }
.reveal-bet .rb-label { color: var(--cream-mut); font-size: 13px; }
.reveal-bet .rb-count { color: var(--cream-mut); font-size: 11px; opacity: .8; }
.reveal-bet.win  { color: #86efac; }
.reveal-bet.win  .rb-icon { color: #86efac; }
.reveal-bet.lose { color: #fca5a5; }
.reveal-bet.lose .rb-icon { color: #fca5a5; }
.reveal-bet.push { color: var(--cream); }
.reveal-bet.push .rb-icon { color: var(--cream-mut); }
.reveal-close { margin-top: 18px; min-width: 140px; }
.reveal-close.hidden { display: none; }

/* ---- Bottom chip drawer + drag-to-bet ----
 * Collapsed: shows just the brass handle. Tap to expand and reveal chips.
 * Drag a chip up onto any felt region to drop a chip there. Taps on the
 * board itself open the management modal — they don't place bets. */
.chip-drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9100;
  background: linear-gradient(180deg, rgba(20, 40, 30, .96), rgba(0, 0, 0, .98));
  border-top: 2px solid var(--brass);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(calc(100% - 44px));
  transition: transform .25s cubic-bezier(.22, .9, .35, 1);
  -webkit-tap-highlight-color: transparent;
}
.chip-drawer[data-open="true"] { transform: translateY(0); }
.cd-handle {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--cream);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cd-grip {
  width: 44px; height: 4px;
  background: var(--brass);
  border-radius: 2px;
  opacity: .75;
}
.chip-drawer[data-open="true"] .cd-grip {
  background: #ffd966;
  opacity: 1;
}
.cd-body {
  padding: 4px 12px 14px;
}
.cd-row {
  display: flex; gap: 8px; justify-content: center;
  padding: 6px 10px 8px;
  max-width: 520px;
  margin: 0 auto;
}
.cd-hint {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  letter-spacing: .22em;
  color: var(--cream-mut);
  text-transform: uppercase;
  opacity: .75;
  margin-top: 2px;
}
.rail-chip-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 56px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 50%;
  border: 3px dashed #fff;
  color: #fff;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 900;
  font-size: clamp(11px, 3.2vw, 14px);
  cursor: grab;
  transition: transform .15s, box-shadow .12s;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .6), inset 0 -2px 4px rgba(0, 0, 0, .35);
  touch-action: none;     /* don't scroll while dragging */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rail-chip-btn:active { cursor: grabbing; transform: translateY(-3px) scale(1.05); }
.rail-chip-btn[data-amt="1"]   { background: radial-gradient(circle at 30% 30%, #9ca3af, #4b5563); }
.rail-chip-btn[data-amt="5"]   { background: radial-gradient(circle at 30% 30%, #dc2626, #7f1d1d); }
.rail-chip-btn[data-amt="10"]  { background: radial-gradient(circle at 30% 30%, #2563eb, #1e3a8a); }
.rail-chip-btn[data-amt="25"]  { background: radial-gradient(circle at 30% 30%, #16a34a, #14532d); }
.rail-chip-btn[data-amt="100"] { background: radial-gradient(circle at 30% 30%, #111827, #000000); border-color: #ffd966; }
.rail-chip-btn[data-amt="500"] { background: radial-gradient(circle at 30% 30%, #7c3aed, #4c1d95); }

/* Floating chip while dragging. */
.chip-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .65));
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transform: translateZ(0);
}
.chip-ghost-amt {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 900; font-size: 11px;
  color: #ffd966;
  background: rgba(0, 0, 0, .92);
  border: 1px solid var(--brass);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* Suppress iOS long-press text selection / callout on bet regions and
   chip stacks — they're drag targets, not text. */
.bet, .band, .chip-stack, .place-bet, .rail-chip-btn, .come-locked {
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}

/* Highlight a region while a chip is hovering over it. */
.bet.chip-hover, .band.chip-hover {
  outline: 3px solid #ffd966;
  outline-offset: 2px;
  background-color: rgba(255, 215, 102, .12);
  transition: background-color .08s;
}

/* While the user is dragging a chip from the drawer, fade the drawer so
   Pass Line / Don't Pass underneath are visible and droppable. The drawer
   stays where it is (so the user knows it's still there) but doesn't catch
   pointer events, which lets elementFromPoint resolve to the felt below. */
body.chip-drag-active .chip-drawer {
  opacity: 0.18;
  pointer-events: none;
  transition: opacity .14s ease;
}

/* The bet-management modal's old internal "Add chip" buttons are hidden —
   the user adds chips by dragging from the chip drawer onto the modal. */
#rmAddSection { display: none !important; }

/* Highlight the modal card while a chip is dragging over it so the user
   knows it's a valid drop target. */
.rm-card.chip-hover {
  outline: 3px solid #ffd966;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6),
              0 0 30px rgba(255, 215, 102, .35),
              0 -16px 50px rgba(0, 0, 0, .6);
}

/* Drawer in take-down mode (drag chip stack from felt → drawer). */
.cd-takedown-zone {
  display: none;
  align-items: center; justify-content: center;
  gap: 14px;
  padding: 22px 12px 8px;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #fca5a5;
}
.cd-takedown-zone .cd-tz-icon {
  font-size: 26px;
  color: var(--casino-red);
  text-shadow: 0 0 16px rgba(217, 46, 46, .6);
}
.chip-drawer[data-mode="takedown"] {
  background: linear-gradient(180deg, rgba(60, 8, 8, .96), rgba(0, 0, 0, .98));
  border-top-color: var(--casino-red);
  box-shadow: 0 -8px 28px rgba(217, 46, 46, .35);
}
.chip-drawer[data-mode="takedown"] .cd-grip { background: var(--casino-red); }
.chip-drawer[data-mode="takedown"] .cd-handle { color: #fca5a5; }
.chip-drawer[data-mode="takedown"] .cd-row,
.chip-drawer[data-mode="takedown"] .cd-hint { display: none; }
.chip-drawer[data-mode="takedown"] .cd-takedown-zone { display: flex; }
.chip-drawer.drop-zone-hot {
  box-shadow: 0 -10px 36px rgba(217, 46, 46, .65), inset 0 0 0 2px var(--casino-red);
}
.chip-drawer.drop-zone-hot .cd-takedown-zone { color: #fff; }
.chip-drawer.drop-zone-hot .cd-tz-icon { color: #ffd966; text-shadow: 0 0 22px rgba(255, 215, 102, .7); }

/* Spacer so the felt isn't hidden behind the collapsed drawer handle. */
.page { padding-bottom: 70px; }
@media (max-width: 480px) {
  .cd-row { gap: 6px; padding: 6px 8px 8px; }
  .rail-chip-btn { max-width: 52px; }
  .cd-handle { font-size: 10px; letter-spacing: .22em; }
  .page { padding-bottom: 64px; }
}

/* =====================================================================
   Desktop compaction (≥700px) — placed at end of file so it wins source
   order over the base .place-bet / .field-bet sizing rules. Goal: felt
   + chip drawer fit on a standard laptop viewport (~800–900px) with no
   scrollbar.
   ===================================================================== */
@media (min-width: 700px) {
  .felt { padding: 12px; gap: 6px; }
  .top-section { gap: 8px; }
  .props-half, .place-half { padding: 6px; gap: 4px; }

  /* PLACE bets — was 96px min-height with 32px vertical padding. Cut hard. */
  .place-bet {
    min-height: 56px;
    padding: 5px 6px 6px;
  }
  .place-bet .bet-num { font-size: 24px; line-height: 1; }
  .place-bet .bet-runs { font-size: 9px; margin-top: 1px; }
  .place-bet .place-corner { font-size: 9px; padding: 2px 5px; }

  /* PROPS tiles (Hardways / runs / Any 7 / Any Craps) — short and tight. */
  .props-half .bet, .props-body .bet {
    padding: 3px 4px;
    min-height: 0;
  }
  .props-half .bet .bet-title,
  .props-body .bet .bet-title { font-size: 11px; letter-spacing: .1em; line-height: 1.1; }
  .props-half .bet .bet-num,
  .props-body .bet .bet-num   { font-size: 18px; line-height: 1; }
  .props-half .bet .bet-sub,
  .props-body .bet .bet-sub   { font-size: 8px; line-height: 1.1; }
  .props-half .bet .bet-pay,
  .props-body .bet .bet-pay   { font-size: 10px; line-height: 1.1; }
  .props-half .hardways,
  .props-half .runs-grid,
  .props-half .any-bets       { gap: 4px; }
  .props-half .felt-label     { font-size: 10px; padding: 1px 4px; }

  /* COME / FIELD / merged bars */
  .place-half .come-bar       { min-height: 40px; font-size: 13px; letter-spacing: .35em; }
  .place-half .field-bet      { min-height: 60px; padding: 8px; }
  .place-half .field-bet .field-title   { font-size: 22px; letter-spacing: .35em; }
  .place-half .field-bet .field-numbers { font-size: 12px; margin-top: 2px; }
  .place-half .field-bet .field-bonus   { font-size: 9px; margin-top: 2px; }
  .merged-bar.pass-merged     { min-height: 64px; }
  .merged-bar                 { min-height: 44px; }

  /* Phase banner */
  .phase-banner               { padding: 8px 16px; }
  .phase-banner .team-name    { font-size: 18px; }
  .pb-logo                    { width: 36px; height: 36px; }
}

/* ==============================================================
   Daily rewards (public brand) — pill, modal, wheel, check-in grid
   ============================================================== */

.coins-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f4d76e 0%, #d4af37 60%, #b89030 100%);
  color: #1a1a1a;
  font-family: 'Cinzel', serif;
  font-weight: 900; font-size: 11px;
  letter-spacing: .08em;
  border: 1px solid #8a6a20;
  cursor: pointer;
  animation: coinsPulse 1.8s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.45);
  transition: transform .12s ease;
}
.coins-pill:hover  { transform: translateY(-1px); }
.coins-pill:active { transform: translateY(0); }
.coins-pill .cp-icon  { font-size: 14px; line-height: 1; }
.coins-pill .cp-badge {
  background: #b91c1c; color: white;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0;
}
@keyframes coinsPulse {
  0%, 100% { box-shadow: 0 2px 8px  rgba(212, 175, 55, 0.45); }
  50%      { box-shadow: 0 2px 18px rgba(212, 175, 55, 0.85); }
}
@media (max-width: 480px) {
  .coins-pill           { padding: 5px 10px; font-size: 10px; }
  .coins-pill .cp-label { display: none; }       /* mobile = icon-only */
}

/* ----- modal shell -----
   The overlay itself scrolls when content is taller than the viewport;
   the card flows naturally inside. Avoids the place-items:center clip
   trap where tall content gets cut off above/below with no way to scroll.
   On desktop the auto margins still vertically center a short card. */
.coins-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1000;
  padding: 24px 16px;
}
.coins-modal.hidden { display: none; }
.cm-card {
  background: var(--card, #14181f);
  color: var(--text, #fff);
  border: 1px solid var(--border, #2a3140);
  border-radius: 16px;
  width: 100%;
  max-width: 760px;
  margin: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
@media (max-width: 480px) {
  .coins-modal { padding: 12px 10px; }
  .cm-header   { padding: 12px 14px; }
  .cm-body     { padding: 14px 14px 18px; }
  .cm-section  { padding: 12px; }
  /* Smaller wheel on phones so the section + button fit in less scrolling. */
  .wheel-stage { width: min(220px, 60vw); margin-bottom: 10px; }
  .wheel-pointer { font-size: 22px; top: -8px; }
  .cm-section h3 { font-size: 13px; }
  .cm-sub        { font-size: 11px; margin-bottom: 10px; }
  .cm-spin, .cm-checkin-btn { padding: 10px 18px; font-size: 12px; }
  /* Stack-spacing between the two cards is tighter on mobile. */
  .cm-cards    { gap: 12px; }
}
.cm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #2a3140);
}
.cm-header h2 {
  margin: 0;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 18px; letter-spacing: .04em;
}
.cm-close {
  background: none; border: none;
  color: var(--muted, #94a3b8); font-size: 28px;
  cursor: pointer; padding: 0 6px;
  line-height: 1;
}
.cm-close:hover { color: var(--text, #fff); }
.cm-body { padding: 18px 20px 22px; }
.cm-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 680px) {
  .cm-cards { grid-template-columns: 1fr; }
}
.cm-section {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border, #2a3140);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.cm-section h3 {
  margin: 0 0 4px;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: #d4af37;
}
.cm-sub {
  margin: 0 0 14px;
  font-size: 12px; color: var(--muted, #94a3b8);
  max-width: 320px;
}
.cm-bankroll {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #94a3b8);
}
.cm-bankroll b { color: #d4af37; font-family: 'Bodoni Moda', serif; }

/* ----- wheel ----- */
.wheel-stage {
  position: relative;
  width: min(280px, 70vw); aspect-ratio: 1;
  margin: 0 auto 14px;
}
.wheel-pointer {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  color: #d4af37;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
  z-index: 2;
  line-height: 1;
}
.wheel-disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid #d4af37;
  box-shadow: 0 8px 24px rgba(0,0,0,.55), inset 0 0 0 4px rgba(0,0,0,.4);
  /* 6 segments, each 60°, starting at -30° so segment 0 is centered at top. */
  background: conic-gradient(
    from -30deg,
    #1e3a8a 0deg 60deg,
    #7c3aed 60deg 120deg,
    #16a34a 120deg 180deg,
    #b91c1c 180deg 240deg,
    #d97706 240deg 300deg,
    #be185d 300deg 360deg
  );
  transform: rotate(0);
  transition: transform 0s;
  will-change: transform;
}
.wheel-disc::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: radial-gradient(circle, #f4d76e 0%, #b89030 100%);
  border: 2px solid #6a4f10;
  box-shadow: 0 0 8px rgba(0,0,0,.5);
}
.wheel-seg {
  position: absolute; inset: 0;
  pointer-events: none;
  transform: rotate(var(--angle, 0deg));
}
.wheel-seg .ws-amt {
  position: absolute;
  top: 12%; left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: 'Bodoni Moda', serif;
  font-weight: 900;
  font-size: clamp(11px, 2.2vw, 15px);
  text-shadow: 0 2px 3px rgba(0,0,0,.7);
  white-space: nowrap;
}
.wheel-seg .ws-pct {
  position: absolute;
  top: 24%; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.75);
  font-size: 9px;
  letter-spacing: .05em;
}
.cm-spin, .cm-checkin-btn {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 10px 24px;
  font-size: 13px;
  margin-top: auto;
}
.cm-spin[disabled], .cm-checkin-btn[disabled] {
  opacity: .55; cursor: not-allowed;
  animation: none;
}
.cm-prize-reveal {
  margin-top: 14px;
  width: 100%;
  text-align: center;
}
.cm-prize-reveal.hidden { display: none; }
.cm-prize-card {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, #d4af37 0%, #f4d76e 50%, #d4af37 100%);
  color: #1a1a1a;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.6);
  animation: prizePop .5s cubic-bezier(.18,.84,.34,1.4);
}
@keyframes prizePop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.cm-prize-card .pc-amount {
  font-family: 'Bodoni Moda', serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
}
.cm-prize-card .pc-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ----- check-in grid ----- */
.ci-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  width: 100%;
  margin-bottom: 14px;
}
.ci-day {
  padding: 6px 2px;
  border-radius: 8px;
  border: 1px solid var(--border, #2a3140);
  background: rgba(255,255,255,.02);
  font-size: 9px;
  text-align: center;
  transition: border-color .2s, background .2s;
}
.ci-day .cd-day {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted, #94a3b8);
  font-size: 8px;
}
.ci-day .cd-amt {
  font-family: 'Bodoni Moda', serif;
  font-weight: 700;
  color: var(--text, #fff);
  font-size: 11px;
  margin-top: 2px;
}
.ci-day.past, .ci-day.claimed {
  opacity: .4;
  background: rgba(255,255,255,.01);
}
.ci-day.claimed {
  border-color: #16a34a;
  opacity: .65;
}
.ci-day.claimed::after {
  content: "✓";
  display: block;
  color: #16a34a;
  font-size: 10px;
  margin-top: 1px;
}
.ci-day.today {
  border-color: #d4af37;
  background: rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
  animation: todayPulse 2s ease-in-out infinite;
}
.ci-day.today .cd-day { color: #d4af37; }
@keyframes todayPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(212, 175, 55, 0.35); }
  50%      { box-shadow: 0 0 22px rgba(212, 175, 55, 0.65); }
}

/* ----- toast ----- */
.coins-toast {
  position: fixed;
  bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, #d4af37 0%, #f4d76e 100%);
  color: #1a1a1a;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  opacity: 0;
  transition: transform .3s cubic-bezier(.18,.84,.34,1.2), opacity .3s;
  z-index: 1100;
  pointer-events: none;
}
.coins-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01s !important;
    transition-duration: .01s !important;
    animation-iteration-count: 1 !important;
  }
}