/* Scoped to the combinations exercise and its reusable suit matrix. */
.hand-combinations #combinations-question { white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; }
.hand-combinations #timer { color: #17212b; }
.hand-combinations #submit-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.combination-hand { display: flex; justify-content: center; align-items: flex-end; gap: 8px; }
.combination-rank { display: flex; align-items: center; justify-content: center; width: 60px; height: 87px; border: 1px solid #d7d5ce; border-radius: 6px; background: #fffdf6; color: #17212b; font-size: 2rem; font-weight: 700; line-height: 1; box-shadow: 0 3px 7px rgba(0,0,0,.2); }
.combination-suffix { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 4px; background: var(--bs-dark); color: var(--bs-light); font-weight: 700; }
.combinations-guide .table-responsive { width: min(680px, 100%); }
.combinations-reference-table { width: 100%; table-layout: fixed; overflow-wrap: break-word; }
.combinations-reference-table th:first-child { width: 50%; }
.combinations-reference-table th:nth-child(2),
.combinations-reference-table th:nth-child(3) { width: 25%; }
.combinations-reference-table caption { white-space: normal; overflow-wrap: break-word; }
.combinations-guide .extra-info-table { table-layout: fixed; }
.hand-combinations .combinations-guide .extra-info-table.combinations-reference-table th:first-child { width: 50%; }
.hand-combinations .combinations-guide .extra-info-table.combinations-reference-table th:nth-child(2),
.hand-combinations .combinations-guide .extra-info-table.combinations-reference-table th:nth-child(3) { width: 25%; }
.combination-notation { color: #fff; font-weight: 600; }
.combination-formula { font-size: clamp(1.2rem, 5vw, 1.65rem); font-weight: 700; text-align: center; }
.combination-matrix-wrap { --combo-card-scale: .52; max-width: 600px; width: 100%; margin: 0 auto; background: var(--bs-light); color: var(--bs-body-color); border-radius: 8px; padding: 8px; }
.combination-matrix { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; color: var(--bs-body-color); text-align: center; }
.combination-matrix caption { caption-side: top; color: var(--bs-body-color); text-align: center; font-weight: 700; padding: 12px 0; }
.combination-matrix th { text-align: center; vertical-align: middle; }
.combination-matrix th:first-child { width: 44px; }
.combination-cell { padding: 8px 2px; border-radius: 6px; background: #fff; border: 1px solid #dee2e6; vertical-align: middle; }
.combination-cell-valid { background: #eaf7ff; border-color: #a0d4f5; }
.combination-cell-same_card { background: #f1f3f5; }
.combination-same-card { color: #b02a37; font-weight: 700; }
.combination-duplicate { color: #0a58ca; font-weight: 700; }
.combination-cell-duplicate { background: #f1f3f5; }
.combination-cards { display: flex; gap: 3px; justify-content: center; align-items: center; }
.combo-card { display: inline-block; position: relative; overflow: hidden; width: calc(60px * var(--combo-card-scale)); height: calc(87px * var(--combo-card-scale)); flex: 0 0 auto; vertical-align: middle; }
.combination-matrix .combo-card { box-sizing: content-box; border: 1px solid #adb5bd; border-radius: 3px; background: #fff; }
.combo-card-image { position: absolute; top: 0; left: 0; width: 780px; height: 87px; max-width: none; transform-origin: top left; transform: scale(var(--combo-card-scale)) translateX(calc(-1 * var(--x))); }
.combination-check { display: block; color: #1b6849; line-height: 1; margin-top: 3px; font-weight: 700; }
.combination-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: .875rem; margin-top: 12px; }
.combination-legend span { font-weight: 700; }
.hand-combinations .btn:focus-visible { outline: 3px solid white; outline-offset: 3px; }
@media (max-width: 920px) {
    .hand-combinations .combinations-intro { display: none; }
    .hand-combinations .exercise-dock .option-container { position: static; width: 100%; }
    .hand-combinations .exercise-dock #submit-form { width: 100%; }
    .hand-combinations .combination-rank { width: 45px; height: 65px; font-size: 1.6rem; }
    .combinations-reference-table th,
    .combinations-reference-table td { padding: 8px 6px; font-size: .875rem; }
    .combinations-reference-table thead th { white-space: nowrap; font-size: .8125rem; }
    .combination-matrix-wrap { --combo-card-scale: .40; }
    .combination-matrix { border-spacing: 2px; }
    .combination-matrix th:first-child { width: 28px; }
    .combination-cards { gap: 1px; }
    .combination-cell { padding: 6px 1px; }
}

/* The site theme does not include Bootstrap's visually-hidden utility. */
.combination-matrix .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Known-card blockers reuse the same question controls and suit matrix. */
.blocker-exercise .combination-rank { width: 45px; height: 65px; font-size: 1.7rem; }
.blocker-card-label { margin: 0 0 6px; color: #fff; font-size: .9rem; font-weight: 600; text-align: center; }
.blocker-known { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px 24px; }
.known-card-row { --combo-card-scale: .7; display: flex; justify-content: center; gap: 4px; }
.blocker-target .combination-notation { font-size: .875rem; }
.combination-cell-blocked { background: #fff4f4; border-color: #f5c2c2; }
.combo-card-blocked { opacity: .55; outline: 2px solid #a94458; border-radius: 2px; }
.combo-card-blocked::after { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 46%, #b94158 48%, #b94158 52%, transparent 54%); pointer-events: none; }
.combination-blocked-mark { display: block; color: #a12842; font-weight: 700; line-height: 1; margin-top: 3px; }
.blockers-reference-table th:first-child { width: 30%; }
.blockers-reference-table th:nth-child(2) { width: 70%; }
.hand-combinations .combinations-guide .blockers-reference-table.extra-info-table th:first-child { width: 30%; }
.hand-combinations .combinations-guide .blockers-reference-table.extra-info-table th:nth-child(2) { width: 70%; }
.blockers-reference-table thead th { white-space: normal; }
@media (max-width: 920px) {
    .blocker-exercise .combination-rank { width: 38px; height: 55px; font-size: 1.4rem; }
    .blocker-known { gap: 10px 12px; }
    .known-card-row { --combo-card-scale: .5; gap: 3px; }
    .blocker-card-label { font-size: .8rem; margin-bottom: 4px; }
    .blockers-reference-table thead th { white-space: normal; }
}

@media (max-width: 920px) {
    .hand-combinations .exercise-dock .option-container #submit-form { grid-column: 1 / -1; }
}

/* Concrete reference examples and the guided three-step flow. */
.blocker-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.blockers-reference-intro { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.reference-known-card { --combo-card-scale: .6; }
.reference-hand { display: block; margin-top: 8px; font-size: 1.1rem; }
.reference-blocked-pairs { --combo-card-scale: .45; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0; }
.reference-blocked-pair { display: inline-flex; gap: 3px; border: 1px solid #a94458; border-radius: 4px; padding: 4px; background: #fff4f4; }
.reference-combo-counts { display: flex; gap: 6px; margin: 12px 0 0; text-align: center; }
.reference-combo-counts > div { flex: 1; min-width: 0; padding: 6px 2px; border: 1px solid #b5bac0; border-radius: 4px; }
.reference-combo-counts dt { font-size: .8rem; font-weight: 400; overflow-wrap: anywhere; }
.reference-combo-counts dd { font-size: 1.2rem; font-weight: 700; margin: 4px 0 0; }
@media (max-width: 920px) {
    .blocker-exercise .exercise-dock .blocker-options { grid-column: 1 / -1; width: 100%; }
    .reference-blocked-pairs { --combo-card-scale: .42; }
    .reference-combo-counts { flex-direction: column; gap: 4px; }
    .reference-combo-counts > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px; }
    .reference-combo-counts dt { font-size: .8rem; text-align: left; }
    .reference-combo-counts dd { font-size: 1rem; margin: 0; }
}

/* Result screens follow the existing table, breadcrumb, alert and light outs panel. */
.combinations-matrix-panel { color: var(--bs-body-color); }
@media (max-width: 920px) {
    .combinations-matrix-panel { padding: 8px; }
}

/* Side-seat target uses the existing rank display without assigning unknown suits. */
.blocker-target-seat .combination-hand { gap: 4px; }
.blocker-target-seat .combination-suffix { width: 20px; flex-shrink: 0; }
.blocker-target-seat .combination-notation { margin: 6px 0 0; font-size: .8rem; }
@media (max-width: 920px) {
 .exercise-stage .blocker-target-seat .combination-hand { gap: 2px; }
 .exercise-stage .blocker-target-seat .combination-rank { width: 26px; height: 38px; font-size: 1.1rem; }
 .exercise-stage .blocker-target-seat .combination-suffix { width: 14px; height: 20px; font-size: .7rem; }
 .exercise-stage .blocker-target-seat .combination-notation { font-size: .65rem; margin-top: 3px; }
}

/* Composition targets retain the original valid/blocked states. */
.combination-cell-target { box-shadow: inset 0 0 0 2px #198754; }
.combination-target-mark { color: #146c43; font-weight: 700; }