/* Cribbage board (score tab): tracks, deal flow, pegging buttons, show grid. Inside .tl-card (light card
   palette in both themes). Card slots and rank/suit pickers come from cribbage.css. */
.cb { padding: .6rem .55rem .8rem; }
.cb .red { color: var(--card-red); }
.cb-p0 { --peg: #b3141b; }
.cb-p1 { --peg: #1f4e8c; }
.cb-p2 { --peg: #2c6e3f; }

/* ---- the board ---- */
.cb-board { display: grid; gap: .4rem; padding: .3rem; border-radius: 10px; background: #efe4cc; border: 1px solid var(--card-rule); }
.cb-side { background: #fbf6ea; border: 1px solid var(--card-rule); border-left: 5px solid var(--peg); border-radius: 7px; padding: .3rem .35rem .3rem .45rem; }
.cb-side.cb-won { background: color-mix(in srgb, var(--peg) 9%, #fff); }
.cb-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cb-name { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; min-width: 0; flex: 1; }
.cb-nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cb-badge { font-size: .8rem; font-variant-caps: all-small-caps; letter-spacing: .06em; color: #fff; background: var(--card-soft); border-radius: 4px; padding: 0 .35rem; white-space: nowrap; }
.cb-score { font-size: 2rem; line-height: 1; font-weight: 800; color: var(--peg); font-variant-numeric: lining-nums tabular-nums; }
.cb-sub { display: flex; justify-content: space-between; gap: .6rem; font-size: .85rem; color: var(--card-soft); margin: .05rem 0 .1rem; }
.cb-won .cb-sub span:first-child { color: var(--peg); font-weight: 700; }
.cb-track { display: block; width: 100%; height: auto; }
.cb-h { fill: #cdbf9f; }
.cb-h.cb-on { fill: color-mix(in srgb, var(--peg) 45%, #fff); }
.cb-start { fill: #a89878; }
.cb-goal { fill: #fbf6ea; stroke: var(--card-ink); stroke-width: 1.1; }
.cb-goal.cb-on { fill: var(--peg); }
.cb-peg.cb-front { fill: var(--peg); stroke: #fff; stroke-width: 1.3; }
.cb-peg.cb-back { fill: #fff; stroke: var(--peg); stroke-width: 1.8; }
.cb-skunk { stroke: var(--card-red); stroke-width: 1; stroke-dasharray: 3 2; }
.cb-rl { fill: var(--card-soft); font: 700 8.5px sans-serif; }
.cb-rl-sk { fill: var(--card-red); }
.cb-legend { font-size: .82rem; color: var(--card-soft); font-style: italic; margin: .3rem 0 0; }
.cb-live { min-height: 1.4em; margin: .5rem 0 .2rem; font-weight: 700; text-align: center; }

/* ---- the deal ---- */
.cb-deal { border-top: 3px double var(--card-rule); padding-top: .4rem; }
.cb-dealhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; }
.cb-dealhead strong { font-size: 1.15rem; }
.cb-dealhead span { color: var(--card-soft); }
.cb-steps { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; counter-reset: cbs; margin: .5rem 0; padding: 0; gap: .3rem; }
.cb-steps li { counter-increment: cbs; text-align: center; font-size: .9rem; padding: .25rem .2rem; border-radius: 6px; border: 1px solid var(--card-rule); color: var(--card-soft); }
.cb-steps li::before { content: counter(cbs) ". "; }
.cb-steps li.cb-done { color: var(--card-ink); background: #f1ead9; }
.cb-steps li.cb-cur { color: var(--card); background: var(--card-ink); border-color: var(--card-ink); font-weight: 700; }
.cb-hint { margin: .35rem 0; }
.cb .cb-big { width: 100%; min-height: 52px; font-weight: 700; }
.cb-cutrow { display: grid; gap: .5rem; margin: .6rem 0; }
.cb-endplay { margin-top: .7rem; }

/* pegging: one column per player / partnership */
.cb-peg { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-peg.cb-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.cb-col { border: 1px solid var(--card-rule); border-top: 5px solid var(--peg); border-radius: 8px; padding: .3rem; background: var(--card); min-width: 0; }
.cb-colh { font-weight: 700; color: var(--peg); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: .25rem; }
.cb-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; }
.cb-n3 .cb-nums { grid-template-columns: repeat(2, 1fr); }
.cb .cb-num { font: inherit; min-height: 48px; font-size: 1.2rem; font-weight: 800; border-radius: 7px; cursor: pointer;
  color: #fff; background: var(--peg); border: 1px solid var(--peg); }
/* reason chips: label, then the points (two sides: two chips per row, the label may wrap) */
.cb-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; margin-top: .35rem; }
.cb .cb-chip { font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  min-height: 48px; padding: .2rem .15rem; font-size: .8rem; line-height: 1.1; text-align: center; border-radius: 6px; cursor: pointer;
  background: #fbf6ea; color: var(--card-ink); border: 1px solid var(--card-line); overflow-wrap: anywhere; }
.cb-chip b { font-size: .95rem; color: var(--peg); white-space: nowrap; }
.cb-chip b::before { content: "+"; }
/* three players: one chip per row, label left, points right */
.cb-n3 .cb-chips { grid-template-columns: minmax(0, 1fr); }
.cb .cb-n3 .cb-chip { flex-direction: row; justify-content: space-between; text-align: left; gap: .2rem; min-height: 44px; padding: .15rem .3rem; }
.cb-num:active, .cb-chip:active { transform: translateY(1px); }

/* the show */
.cb-order { list-style: none; margin: .4rem 0; padding: 0; counter-reset: cbo; }
.cb-order li { counter-increment: cbo; display: flex; justify-content: space-between; gap: .5rem; padding: .2rem .4rem; border-radius: 5px; color: var(--card-soft); }
.cb-order li::before { content: counter(cbo) "."; min-width: 1.3em; }
.cb-order li span { flex: 1; }
.cb-order li.cb-done { color: var(--card-ink); }
.cb-order li.cb-cur { background: var(--card-ink); color: var(--card); font-weight: 700; }
.cb-now { font-weight: 700; font-size: 1.1rem; margin: .6rem 0 0; }
.cb-totals { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; margin: .4rem 0 .6rem; }
.cb-tot { font: inherit; min-height: 46px; font-size: 1.15rem; font-weight: 700; border-radius: 7px; cursor: pointer; background: var(--card); color: var(--card-ink); border: 1px solid var(--card-line); font-variant-numeric: tabular-nums; }
.cb-tot[disabled] { cursor: default; color: #b9ae98; background: #eee7d8; border-color: #ddd3c0; text-decoration: line-through; }
.cb-cardsbtn { width: 100%; }
.cb-picker { border: 1px dashed var(--card-line); border-radius: 8px; padding: .5rem; margin-top: .4rem; }
.cb-slots { display: grid; grid-template-columns: 1fr .3rem repeat(4, 1fr); gap: .35rem; margin: .5rem 0 .2rem; }
.cb-slots .cb-starter { grid-column: 1; }
.cb-slots .cr-slot:nth-child(2) { grid-column: 3; }
.cb-slots .cr-slot { min-height: 64px; }
.cb-spoken { font-style: italic; margin: .3rem 0; }
.cb-pout { margin-top: .4rem; }

/* game over */
.cb-over { border-top: 3px double var(--card-rule); padding-top: .4rem; }
.cb-winner { font-size: 1.5rem; font-weight: 800; text-align: center; margin: .4rem 0; }
.cb-skunkmsg { font-weight: 600; margin: .25rem 0; }
.cb-match, .cb-stats { border-collapse: collapse; width: 100%; margin: .6rem 0 .2rem; font-variant-numeric: tabular-nums; }
.cb-match caption { text-align: left; font-weight: 700; padding-bottom: .2rem; }
.cb-match th, .cb-match td, .cb-stats th, .cb-stats td { padding: .3rem .4rem; border-bottom: 1px solid var(--card-rule); text-align: right; }
.cb-match th[scope=row], .cb-stats th[scope=row] { text-align: left; font-variant-caps: normal; letter-spacing: 0; text-transform: none; font-size: 1rem; }
.cb-match tr.cb-won th { color: var(--peg, var(--card-ink)); }

/* controls, history, statistics */
.cb-ctl { margin-top: .9rem; }
.cb-undo { flex: 1; }
.cb-more { margin: .4rem 0 0; border-top: 1px solid var(--card-rule); }
.cb-more summary { cursor: pointer; font-weight: 700; padding: .6rem 0; min-height: 44px; }
.cb-more h4 { font-size: .95rem; margin: .5rem 0 .2rem; color: var(--card-soft); }
.cb-hist { list-style: none; margin: 0; padding: 0; }
.cb-hist li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: .5rem; padding: .15rem 0 .15rem .4rem; border-left: 3px solid var(--peg); border-bottom: 1px dotted var(--card-rule); font-size: .92rem; }
.cb-hwho { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-pegsum { font-size: .92rem; color: var(--card-soft); }

/* setup */
.cb-setup .tl-h { margin-top: .2rem; }
.cb-names { display: grid; gap: 0 .6rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.cb-names-t { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-names label > span { color: var(--peg); font-weight: 700; }
.cb-firstrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.cb-start { min-width: 8rem; }