/* Range presentation is opt-in; existing preflop action charts retain their styles. */
.preflop-table-wrapper.preflop-range-view { width: min(600px, 100%); padding: 16px; box-sizing: border-box; background: var(--bs-light); color: #212529; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: none; }
.preflop-range-view .preflop-table-container { overflow: visible; }
.preflop-range-view table.preflop-table { width: 100%; min-width: 0; }
.preflop-range-view col.pf-col-hdr { width: 4%; }
.preflop-range-view col.pf-col { width: auto; }
.preflop-range-view .preflop-cell { height: auto; line-height: normal; font-size: .75rem; }
.preflop-range-view table.preflop-table th { font-size: .7rem; background: #495057; color: #fff; position: static; }
.preflop-range-view .range-view-hand { display: flex; width: 100%; aspect-ratio: 1; flex-direction: column; justify-content: center; align-items: center; gap: 1px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; }
.preflop-range-view button.range-view-hand { cursor: pointer; }
.preflop-range-view button:focus-visible { outline: 3px solid #0d6efd; outline-offset: -3px; position: relative; z-index: 1; }
.preflop-range-view .range-view-hand small { font-size: max(8px, .7em); font-weight: 600; line-height: 1.1; flex-shrink: 0; }
.preflop-range-view .range-view-hand small span { white-space: nowrap; }
.preflop-range-view [data-original] .range-view-hand { aspect-ratio: auto; min-height: 40px; padding: 2px 0; }
.preflop-range-view [data-range-state="outside"] { background: #f1f3f5; color: #6c757d; }
.preflop-range-view [data-range-state="included"] { background: #dcefff; color: #084b83; }
.preflop-range-view [data-range-state="partial"] { background: #fff0c2; color: #664d03; }
.preflop-range-view [data-range-state="blocked"] { background: #f8d7da; color: #842029; }
.range-view-detail { margin-top: 12px; text-align: center; font-size: .875rem; min-height: 2.5em; }
.preflop-range-view .range-view-legend { margin-top: 12px; justify-content: center; gap: 8px; font-size: .8rem; }
.range-view-legend span { padding: 3px 6px; border: 1px solid #adb5bd; border-radius: 3px; }
.range-target-hands { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 380px; margin: 0 auto; }
.range-target-hands span { padding: 3px 7px; border: 1px solid rgba(255,255,255,.7); border-radius: 4px; background: #173d32; font-weight: 600; }
.range-context { max-width: 650px; margin: 0 auto 16px; text-align: center; }
.range-view-panel { width: 100%; margin: 24px auto; }
.range-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 20px auto; }
.range-summary div { text-align: center; }
.range-summary dt { font-weight: 400; }
.range-summary dd { margin: 4px 0; font-size: 1.3rem; font-weight: 700; }
.range-guide { margin: 24px auto; text-align: center; }
.range-guide .formula-container { max-width: 100%; white-space: normal; }
@media (max-width: 920px) {
 .preflop-table-wrapper.preflop-range-view { padding: 8px; }
 .preflop-range-view .preflop-cell { font-size: clamp(8px, 2.5vw, 12px); }
 .preflop-range-view table.preflop-table th { font-size: .55rem; }
 .range-target-hands { max-width: 270px; font-size: .875rem; }
 .range-context { font-size: .875rem; }
 .range-exercise .exercise-dock .range-options { grid-column: 1 / -1; width: 100%; }
}

/* Leave card geometry to the shared exercise styles; reserve space for outside seats. */
.range-question-heading { margin-top: 150px; }
.range-spot-info { display: flex; flex-direction: column; align-items: center; gap: 2px; }
@media (max-width: 920px) {
 .range-question-heading { margin-top: 24px; }
}

/* Result counts read original / blocked / available; the modal reuses the 3.2 matrix. */
.preflop-range-view .range-count-legend { font-size: .8rem; line-height: 1.5; text-align: center; margin: 12px 0 0; }
.preflop-range-view .range-view-hand.is-selected { outline: 2px solid #0a58ca; outline-offset: -2px; }
.range-detail-modal .modal-dialog { max-width: 680px; }
.range-detail-modal .modal-content { width: 100%; max-width: none; margin: 0; padding: 0; }
.range-detail-modal .modal-body { padding: 8px; }
.range-detail-modal button:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }

/* Classes contributing to the requested composition target. */
.preflop-range-view .range-view-cell-matches,
.preflop-range-view .range-view-legend [data-range-state="target"] { box-shadow: inset 0 0 0 2px #198754; }

.range-composition-reference thead th:first-child { width: 30%; }
@media (max-width: 920px) {
 .range-composition-reference th, .range-composition-reference td { padding: 8px 6px; font-size: .875rem; }
}

/* Keep the objective beside the controls without moving the board or seats. */
.range-composition-target { margin: 12px auto; text-align: center; }
.range-composition-target p { display: inline-block; max-width: 100%; margin: 0; padding: 8px 16px; border-radius: 6px; background: var(--bs-warning); color: #212529; font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 700; line-height: 1.25; }
@media (max-width: 920px) {
 .range-composition-target p { padding: 6px 10px; }
}

/* Guided answers keep the existing breadcrumb arrows within narrower screens. */
.range-exercise:has(.range-composition-target) .btn-breadcrumb,
.range-exercise:has([data-range-hint]) .btn-breadcrumb,
.range-exercise:has([data-step-result="wins"]) .btn-breadcrumb { max-width: 100%; overflow-x: auto; }
.range-exercise:has(.range-composition-target) .btn-breadcrumb .breadcrumb-step,
.range-exercise:has([data-range-hint]) .btn-breadcrumb .breadcrumb-step,
.range-exercise:has([data-step-result="wins"]) .btn-breadcrumb .breadcrumb-step { flex-shrink: 0; }