/* Cribbage hand calculator */
.cb-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.cb-tabs button { flex: 1 1 160px; min-height: 44px; border-radius: 10px; border: 1px solid var(--c-line); background: none; color: var(--c-muted); font: 700 14px var(--font, sans-serif); cursor: pointer; }
.cb-tabs button.is-on { border-color: var(--c-accent); color: var(--text, #fff); background: var(--surface-2, #1c212a); }
.cb-slots { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.cb-slot { width: 52px; height: 72px; border-radius: 8px; border: 2px dashed var(--c-line); display: flex; align-items: center; justify-content: center; font: 800 18px var(--mono, monospace); background: none; color: var(--text, #fff); cursor: pointer; }
.cb-slot.is-full { border-style: solid; border-color: var(--c-accent); background: #f4f4f0; color: #111; }
.cb-slot.is-red { color: #c81e1e; }
.cb-slot.is-next { border-color: var(--c-accent); }
.cb-sep { align-self: center; color: var(--c-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 0 4px; }
.cb-deck { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; margin-bottom: 10px; }
.cb-deck button { min-height: 40px; border-radius: 6px; border: 1px solid var(--c-line); background: #f4f4f0; color: #111; font: 700 13px var(--mono, monospace); padding: 0; cursor: pointer; }
.cb-deck button.is-red { color: #c81e1e; }
.cb-deck button:disabled { opacity: .25; cursor: default; }
.cb-opts .cc-field { margin-bottom: 10px; }
.cb-out b.cb-big { display: block; font: 800 40px var(--mono, monospace); color: var(--c-accent); margin-bottom: 6px; }
.ccc .cb-out table { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-size: 14px; }
.ccc .cb-out th, .ccc .cb-out td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--c-line); background: none; }
.ccc .cb-out td:last-child, .ccc .cb-out th:last-child { text-align: right; font-family: var(--mono, monospace); }
.cb-out .cb-c { font-family: var(--mono, monospace); font-weight: 700; white-space: nowrap; }
.cb-out .cb-c i { font-style: normal; }
.cb-out .cb-c .r { color: #f87171; }
.cb-out tr.is-best td { color: var(--c-accent); font-weight: 700; }
@media (max-width: 600px) {
	.cb-deck { grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; }
	.cb-deck button { min-height: 36px; font-size: 11px; }
	.cb-slot { width: 44px; height: 62px; font-size: 16px; }
}