/* Cribbage helper: hand counter (card picker). Inside .tl-card (light card palette). The card slots and
   pickers are reused by the Cribbage board (cribbage-board.css) in the score tab. */
.tl-cribbage + .tl-cribbage { margin-top: 1.4rem; }
.tl-cribbage .tl-h { margin-top: .3rem; }
.tl-cribbage .red { color: var(--card-red); }

/* the five card slots: 4 hand cards, a gap, the starter */
.cr-slots { display: grid; grid-template-columns: repeat(4, 1fr) .4rem 1fr; gap: .4rem; margin: .4rem 0; }
.cr-starter { grid-column: 6; }
.cr-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  min-height: 76px; padding: .3rem .1rem; cursor: pointer;
  background: var(--card); color: var(--card-ink); border: 1px solid var(--card-line); border-radius: 7px;
  box-shadow: 0 1px 0 rgb(0 0 0 / .06), 0 3px 8px -5px rgb(0 0 0 / .3);
}
.cr-slot[aria-pressed="true"] { outline: 3px solid var(--card-ink); outline-offset: 1px; }
.cr-slot-l { font-size: .8rem; color: var(--card-soft); font-variant-caps: all-small-caps; letter-spacing: .05em; line-height: 1; }
.cr-slot-c { font: 700 1.45rem/1.1 "Suits", var(--serif); white-space: nowrap; }
.cr-prompt { margin: .2rem 0; }

.cr-ranks { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.cr-suits { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.tl-cribbage .cr-pick { padding: .3rem 0; min-width: 0; font-weight: 700; }
.cr-suit { font-family: "Suits", var(--serif); font-size: 1.35rem; line-height: 1; }
.tl-card .cr-suit.red:not([aria-pressed="true"]) { color: var(--card-red); }

/* the spoken count */
.cr-say { list-style: none; margin: 0; padding: 0; }
.cr-say li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .8rem; padding: .3rem 0; border-bottom: 1px dotted var(--card-rule); }
.cr-cards { display: inline-flex; gap: .45rem; font-family: "Suits", var(--serif); font-weight: 700; }
.cr-phrase { font-style: italic; }
.cr-sums { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .95rem; color: var(--card-soft); margin: .5rem 0; }