.draw-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
        gap: 1.5rem;
        width: 100%;
    }
    .scorecard {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        overflow: hidden;
        page-break-inside: avoid;
    }
    .scorecard .table-responsive-scorecard {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .scorecard .table {
        font-size: 0.8rem;
        margin-bottom: 0;
        table-layout: auto;
        width: 100%;
    }
    .scorecard .table th, .scorecard .table td {
        padding: 4px 6px;
        text-align: center;
        vertical-align: middle;
    }
    .scorecard .col-fixed {
        white-space: nowrap;
    }
    .scorecard .col-fixed.text-start {
        /* VS column - keep on one line with ellipsis if needed */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 120px;
        max-width: 150px;
        text-align: left !important;
    }
    .scorecard .col-result {
        width: 58px;
        min-width: 58px;
        max-width: 58px;
        padding: 2px 4px !important;
    }
    .scorecard .col-dynamic {
        width: 58px;
        min-width: 58px;
        max-width: 58px;
        padding: 2px 4px !important;
    }
    .scorecard .pts-cell {
        width: 50px;
        max-width: 50px;
    }
    .scorecard .rink-cell {
        width: 55px;
        max-width: 55px;
        text-align: center !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .scorecard .rink-input {
        width: 100% !important;
        padding: 2px 4px !important;
        font-size: 0.82rem !important;
        text-align: center !important;
        border: 1px solid transparent !important;
        background: transparent !important;
        border-radius: 3px !important;
        cursor: text !important;
        display: block !important;
        margin: 0 auto !important;
    }
    .scorecard .rink-input:hover,
    .scorecard .rink-input:focus {
        border-color: #86b7fe !important;
        background: #fff !important;
        outline: none !important;
    }
    .scorecard input.score-input,
    .scorecard input.points-input-comp10 {
        width: 100%;
        max-width: 44px;
        padding: 2px 3px;
        font-size: 0.8rem;
        text-align: center;
    }
    .agg-pos { color: #198754; font-weight: bold; }
    .agg-neg { color: #dc3545; font-weight: bold; }
    .totals-row { font-weight: bold; background: #f8f9fa; }
    .team-title {
        font-size: 0.85rem;
        font-weight: 600;
        cursor: help;
        border-bottom: 2px dotted rgba(255, 255, 255, 0.7) !important;
        padding-bottom: 2px;
    }
    .team-title:hover {
        border-bottom-style: solid !important;
        border-bottom-color: rgba(255, 255, 255, 1) !important;
    }
    /* Mobile: make tooltips work on touch */
    @media (max-width: 767.98px) {
        .team-title {
            position: relative;
        }
    }
    .pos-indicator {
        font-size: 0.75rem;
        background: #198754;
        color: #fff;
        padding: 2px 8px;
        border-radius: 12px;
        white-space: nowrap;
        font-weight: 600;
    }
    .section-container {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
    }
    .section-main-caption {
        background: #001f3f;
        color: #fff;
        padding: 8px 16px;
        font-weight: bold;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
    }
    /* RR section collapse */
    .rr-section-toggle { border-radius: 4px 4px 0 0; margin-bottom: 0 !important; }
    .rr-section-toggle:hover { filter: brightness(1.1); }
    .rr-section-body { display: none; } /* hidden by default; JS opens on click */
    .rr-section-open .rr-section-body { display: block; }
    .rr-section-open .rr-chevron { transform: rotate(180deg); }
    .rr-chevron { transition: transform 0.2s ease; flex-shrink: 0; }
    .section-standings-sub-caption {
        background: #e9ecef;
        color: #001f3f;
        padding: 6px 12px;
        font-weight: bold;
        border-radius: 4px;
    }
    .print-standings-heading {
        font-size: 1.4rem;
        font-weight: bold;
        color: #001f3f;
        text-align: center;
        padding: 12px 0 8px;
        border-bottom: 2px solid #001f3f;
        margin-bottom: 16px;
    }
    .standings-table { font-size: 0.85rem; }
    .standings-table th, .standings-table td { padding: 6px 10px; }
    .bg-navy { background-color: #001f3f !important; }
    .text-navy { color: #001f3f !important; }
    .bg-orange { background-color: #ff8c00 !important; }
    .bg-orange.text-white { color: #fff !important; }
    .knockout-bracket { display: flex; flex-wrap: wrap; gap: 1.5rem; }
    .knockout-stage { flex: 1; min-width: 300px; }
    .knockout-match-card { background: #fff; }
    .date-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .draw-grid {
            grid-template-columns: 1fr;
        }
        .scorecard .col-fixed.text-start {
            font-size: 0.75rem;
            min-width: 100px;
            max-width: 140px;
        }
        .scorecard .col-result {
            width: 38px;
            max-width: 38px;
        }
        .scorecard .col-dynamic {
            width: 42px;
            max-width: 42px;
        }
        .scorecard .table {
            font-size: 0.75rem;
        }
        .scorecard .table th, .scorecard .table td {
            padding: 3px 4px;
        }
    }
    .date-pill {
        padding: 6px 14px;
        border-radius: 20px;
        background: #fff;
        border: 1px solid #dee2e6;
        cursor: pointer;
        font-size: 0.85rem;
        text-decoration: none;
        color: #001f3f;
    }
    .date-pill.active { background: #001f3f; color: #fff; }
    .section-caption {
        background: #001f3f;
        color: #fff;
        padding: 8px 16px;
        font-weight: bold;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* ── Mobile landscape hint & popup ────────────────────────────────── */
    .landscape-hint {
        font-size: 0.72rem;
        color: #6c757d;
        text-align: center;
        padding: 4px 8px;
        background: #f8f9fa;
        border-top: 1px solid #e9ecef;
    }
    .landscape-popup {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 99999;
        align-items: center;
        justify-content: center;
    }
    .landscape-popup-inner {
        background: #fff;
        border-radius: 12px;
        padding: 28px 24px;
        max-width: 300px;
        text-align: center;
        box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    }
    .landscape-popup-icons {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 14px;
        color: #001f3f;
    }

    /* ── Mobile: strip side margins so scorecards reach the edges ──────── */
    @media (max-width: 767.98px) {
        /* One column, full width — no horizontal scroll on phone */
        .draw-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
        }
        /* Section block: flush to screen edges */
        .rr-section-block {
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding: 0.4rem !important;
            border-radius: 0 !important;
        }
        /* The scorecard inside also flush */
        .scorecard {
            border-radius: 4px;
        }
        /* Strip the p-3 padding inside the section body */
        .rr-section-body {
            padding: 0 !important;
        }
        /* And the draw-grid gap */
        .draw-grid {
            gap: 0.5rem;
        }
        /* Strip Bootstrap container padding so nothing wastes screen width */
        .container, .container-fluid {
            padding-left: 4px !important;
            padding-right: 4px !important;
        }
        /* Inline px-3 rows: tighten too */
        .row.px-3 { padding-left: 4px !important; padding-right: 4px !important; }
        /* Tighter scorecard table: smaller font, tighter padding */
        .scorecard .table {
            font-size: 0.75rem;
        }
        .scorecard .table th,
        .scorecard .table td {
            padding: 4px 4px;
        }
        /* Tablet portrait: keep reasonable column widths for scrolling */
        .scorecard .col-result { width: 52px; min-width: 52px; }
        .scorecard .col-dynamic { width: 52px; min-width: 52px; }
        /* Score inputs fit inside cells */
        .scorecard .score-input {
            width: 50px;
            height: 26px;
            font-size: 0.75rem;
            padding: 0 3px;
        }
        .scorecard .ends-input {
            width: 46px;
            height: 24px;
            font-size: 0.72rem;
            padding: 0 3px;
        }
        /* Team header: wrap cleanly */
        .team-title { font-size: 0.8rem; }
        .pos-indicator { font-size: 0.7rem; padding: 2px 6px; }
        /* Section caption: stack label and Standings link */
        .section-main-caption {
            font-size: 0.82rem;
            padding: 6px 10px;
            letter-spacing: 0;
        }
        /* Section/COP/District Names tab row: COP group drops to its own line */
        .section-tab-nav .ms-auto {
            margin-left: 0 !important;
            width: 100%;
            margin-top: 6px;
        }
        /* Standings table: tighter on mobile */
        .standings-table { font-size: 0.78rem; }
        .standings-table th,
        .standings-table td { padding: 5px 6px; }
        /* Standings team name: truncate instead of overflow */
        .standings-table td.team-name-cell {
            max-width: 120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    
    /* ── Very small phones: even narrower columns ──────── */
    @media (max-width: 480px) {
        .scorecard .table {
            font-size: 0.72rem;
        }
        .scorecard .table th,
        .scorecard .table td {
            padding: 3px 3px;
        }
        /* Narrower columns for very small screens */
        .scorecard .col-result { width: 44px; min-width: 44px; }
        .scorecard .col-dynamic { width: 44px; min-width: 44px; }
        /* Score inputs fit inside narrow cells */
        .scorecard .score-input {
            width: 42px;
            height: 24px;
            font-size: 0.72rem;
            padding: 0 2px;
        }
        .scorecard .ends-input {
            width: 38px;
            height: 22px;
            font-size: 0.68rem;
            padding: 0 2px;
        }
        /* Team header */
        .team-title { font-size: 0.78rem; }
        .pos-indicator { font-size: 0.68rem; padding: 2px 5px; }
        /* Section caption */
        .section-main-caption {
            font-size: 0.8rem;
        }
        /* Standings table */
        .standings-table { font-size: 0.75rem; }
        .standings-table th,
        .standings-table td { padding: 4px 5px; }
        .standings-table td.team-name-cell {
            max-width: 110px;
        }
        /* Date pills: smaller */
        .date-pill { padding: 5px 10px; font-size: 0.78rem; }
    }
    .refresh-timer {
        font-size: 0.85rem;
        color: #666;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #fff;
        padding: 4px 12px;
        border-radius: 20px;
        border: 1px solid #ddd;
    }
    /* Scorecard score inputs (for inline editing inside scorecard) */
    .scorecard .score-input {
        width: 45px;
        height: 26px;
        text-align: center;
        font-weight: bold;
        border: 1px solid #ced4da;
        border-radius: 3px;
        font-size: 0.8rem;
    }
    /* When the parent TD is coloured (locked/verified), keep disabled input text black and transparent bg */
    .scorecard td.score-win .score-input:disabled,
    .scorecard td.score-lose .score-input:disabled {
        background: transparent !important;
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        opacity: 1 !important;
        font-weight: bold;
        border-color: rgba(0,0,0,0.2);
    }
    .scorecard td.score-win {
        background-color: #d1e7dd !important;
        color: #000;
        font-weight: bold;
    }
    .scorecard td.score-lose {
        background-color: #f8d7da !important;
        color: #000;
        font-weight: bold;
    }
    .scorecard .pts-cell {
        font-weight: bold;
    }
    .scorecard .ends-input {
        width: 40px;
        height: 24px;
        text-align: center;
        border: 1px solid #ced4da;
        border-radius: 3px;
        font-size: 0.75rem;
    }
    .scorecard .aggr-input {
        width: 45px;
        height: 26px;
        text-align: center;
        border: 1px solid #ced4da;
        border-radius: 3px;
        font-size: 0.8rem;
    }
    .scorecard .ctrl-btn {
        cursor: pointer;
        font-size: 0.9rem;
        transition: transform 0.1s;
    }
    .scorecard .ctrl-btn:hover { transform: scale(1.1); }
    .team-opponent {
        cursor: help;
        border-bottom: 1px dotted #001f3f;
    }
    .team-opponent:hover {
        background-color: rgba(0, 31, 63, 0.1);
        border-bottom-style: solid;
    }
    /* Mobile: make opponent names more visible with touch support */
    @media (max-width: 767.98px) {
        .team-opponent {
            border-bottom: 1px dotted #0d6efd;
            position: relative;
        }
    }
    .page-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .page-actions .actions-left,
    .page-actions .actions-right {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }
    .cop-pdf-btn {
        white-space: nowrap;
    }
    @media (max-width: 575.98px) {
        .page-actions {
            flex-direction: column;
            align-items: flex-start;
        }
        .page-actions .actions-right {
            width: 100%;
            justify-content: flex-start;
        }
    }
    /* Previous-day (read-only) scorecard rows */
    .other-date-row td {
        opacity: 0.72;
        background-color: #f0f0f0 !important;
    }
    .other-date-row .fw-bold {
        color: #555 !important;
    }
    /* Bracket match styles retained for knockout view */
    .bracket-container {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        overflow-x: auto;
        padding: 1rem;
        width: 100%;
        background-color: #f0f2f5;
        min-height: 800px;
        align-items: stretch;
    }
    .bracket-col {
        display: flex;
        flex-direction: column;
        min-width: 200px;
        flex: 1;
    }
    .bracket-round-header {
        background-color: #001f3f;
        color: white;
        padding: 8px;
        margin-bottom: 10px;
        border-radius: 4px;
        text-align: center;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .bracket-matches-list {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex-grow: 1;
        gap: 10px;
    }
    .bracket-match {
        margin: 5px 0;
        width: 100%;
        background: #fff;
        border-radius: 6px;
        border: 1px solid #dee2e6 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 140px;
    }
    .bracket-match.is-bronze { border: 2px solid #cd7f32 !important; margin-top: 20px; }
    .bracket-match .card-header {
        background-color: #e9ecef !important;
        color: #495057 !important;
        padding: 4px 8px !important;
        font-size: 0.75rem;
        border-bottom: 1px solid #dee2e6;
    }
    .bracket-match.is-bronze .card-header { background-color: #cd7f32 !important; color: white !important; }
    .bracket-match .card-body { padding: 8px !important; flex-grow: 1; }
    .score-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 8px;
        border-radius: 4px;
        margin-bottom: 4px;
    }
    .score-winner { background-color: #28a745 !important; color: #fff !important; }
    .score-loser { background-color: #dc3545 !important; color: #fff !important; }
    .score-final-gold { background-color: #ffd700 !important; color: #000 !important; font-weight: bold; }
    .score-final-silver { background-color: #c0c0c0 !important; color: #000 !important; font-weight: bold; }
    .team-name {
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 110px;
        cursor: help;
        border-bottom: 1px dashed #666;
    }
    .team-name:hover {
        background-color: rgba(0, 31, 63, 0.1);
        border-bottom-style: solid;
    }
    .score-input {
        width: 45px;
        height: 30px;
        text-align: center;
        font-weight: bold;
        border: 1px solid #ced4da;
        border-radius: 4px;
    }
    .ends-row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        font-size: 0.7rem;
        color: #6c757d;
        margin-top: 5px;
        padding: 0 8px;
    }
    .match-controls {
        display: flex;
        justify-content: center;
        gap: 15px;
        padding: 5px;
        background: #f8f9fa;
        border-top: 1px solid #eee;
    }
    .medal-display {
        background: #fff;
        border-radius: 8px;
        border: 2px solid #001f3f;
        padding: 10px 15px;
        margin-bottom: 10px;
        text-align: center;
    }
    .medal-display h6 {
        font-size: 1.2rem;
        margin-bottom: 10px !important;
        color: #001f3f;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    .medal-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-bottom: 6px;
        padding: 8px 15px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .medal-item i { font-size: 1.6rem; }
    .medal-item span { font-size: 1.1rem; letter-spacing: 0.5px; }
    .medal-gold { background-color: rgba(255, 215, 0, 0.15); border: 2px solid #ffd700; }
    .medal-silver { background-color: rgba(192, 192, 192, 0.15); border: 2px solid #c0c0c0; }
    .medal-bronze { background-color: rgba(205, 127, 50, 0.15); border: 2px solid #cd7f32; }
    .final-col-layout { justify-content: flex-start !important; gap: 0 !important; }
    .final-match-wrapper {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 400px;
    }
    .bronze-match-wrapper { margin-top: auto; padding-top: 20px; }
    .badge-gold-silver {
        background: linear-gradient(45deg, #ffd700, #fff 50%, #ffd700);
        background-size: 200% auto;
        color: #001f3f;
        font-weight: 800;
        border: 2px solid #001f3f;
        text-transform: uppercase;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        animation: shine 3s linear infinite;
    }
    @keyframes shine { to { background-position: 200% center; } }
    
    @media print {
        .no-print { display: none !important; }
        /* Single column for scorecards so nothing is cut off */
        .draw-grid { grid-template-columns: 1fr !important; }
        /* Don't break inside a scorecard card */
        .scorecard { break-inside: avoid; page-break-inside: avoid; }
        /* Force a new page before each section standings heading */
        .print-standings-heading { break-before: page; page-break-before: always; }
        /* Keep the standings table together */
        .standings-table { break-inside: avoid; page-break-inside: avoid; }
        /* Full width tables */
        .table-responsive { overflow: visible !important; }
        /* Widen the container for print */
        .container { max-width: 100% !important; padding: 0 8px !important; }
        /* Hide section tab nav */
        .section-tab-nav, .date-pills { display: none !important; }
    }
    .phase-divider {
        border-top: 3px dashed #198754;
        margin: 20px 0;
        position: relative;
    }
    .phase-divider::after {
        content: 'Knockout Phase';
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: #198754;
        color: white;
        padding: 2px 15px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: bold;
    }
    .section-badge {
        background-color: #6f42c1;
        color: white;
        padding: 2px 10px;
        border-radius: 4px;
        font-size: 0.75rem;
        margin-right: 5px;
    }
    .btn-purple {
        background-color: #6f42c1;
        color: white;
        border-color: #6f42c1;
    }
    .btn-purple:hover {
        background-color: #5a32a3;
        color: white;
        border-color: #5a32a3;
    }
    .bg-purple { background-color: #198754 !important; }
.bg-navy { background-color: #001f3f !important; }
    .alert-purple {
        background-color: #f3e5f5;
        border-color: #ce93d8;
        color: #4a148c;
    }
    .team-name,
    .team-opponent,
    .team-title {
        cursor: help;
        border-bottom: 2px dotted #0d6efd !important;
    }
    .team-opponent {
        display: inline-block;
        color: #0d6efd;
    }
    .team-name:hover,
    .team-opponent:hover {
        border-bottom-style: solid !important;
    }
    .bracket-display {
        background: #fafafa;
        border-radius: 8px;
        padding: 20px;
    }
    .bracket-round {
        position: relative;
    }
    .bracket-match {
        background: white;
        border: 2px solid #dee2e6;
        border-radius: 8px;
        padding: 12px;
        min-width: 200px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .bracket-match-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        font-size: 0.75rem;
        padding-bottom: 6px;
        border-bottom: 1px solid #eee;
    }
    .bracket-team {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 8px;
        margin: 4px 0;
        background: #f8f9fa;
        border-radius: 4px;
    }
    .bracket-team.winner {
        background: #d4edda;
        font-weight: bold;
    }
    .bracket-team.gold-winner {
        background: linear-gradient(135deg, #fff3cd, #ffc107);
        border: 2px solid #ffc107;
    }
    .bracket-team .score {
        font-weight: bold;
        min-width: 30px;
        text-align: center;
    }
    .medal-icon {
        font-size: 1.2rem;
        margin-right: 5px;
    }
    .final-match {
        border-color: #ffc107;
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    }
    .final-match .bracket-match-header {
        background: #ffc107;
        color: #212529;
        margin: -12px -12px 12px -12px;
        padding: 8px 12px;
        border-radius: 6px 6px 0 0;
        font-weight: bold;
    }
    .bronze-match {
        border-color: #cd7f32;
    }
    .bronze-match .bracket-match-header {
        background: #cd7f32;
    }
    .bracket-actions {
        text-align: center;
    }
    .bracket-team.winner::after {
        content: '✓';
        color: #28a745;
        margin-left: 5px;
    }

/* ── PBA section header: 3-zone layout, all on one line ────────────────────
   Zone 1 (left)  : "Section X" + player names + pts badges  — flex, clips
   Zone 2 (centre): Winner badge — truly centred in the row
   Zone 3 (right) : heart + chevron — right-aligned in its cell
   1fr | auto | 1fr keeps Zone 2 dead-centre on desktop.
   On mobile we switch to a 2-row layout: names row + badge row.
*/
.pba-hdr-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
/* Zone 1 */
.pba-hdr-left {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: hidden;
}
/* The players+badges strip inside Zone 1 */
.pba-hdr-left .pba-section-players {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}
/* Zone 2: winner badge — dead-centre of the header */
.pba-hdr-centre {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
/* Zone 3: heart + chevron — right-aligned inside its 1fr cell */
.pba-hdr-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

/* ── Mobile: reflow section header into two rows ────────────────────────── */
@media (max-width: 575.98px) {
    /* Switch to single column; all three zones stack */
    .pba-hdr-grid {
        grid-template-columns: 1fr auto;   /* [names+label] [heart+chevron] */
        grid-template-rows: auto auto;
        gap: 3px 4px;
    }
    /* Row 1 col 1: section label + names */
    .pba-hdr-left {
        grid-column: 1;
        grid-row: 1;
        flex-wrap: wrap;        /* let names wrap within the zone */
        overflow: visible;
    }
    /* Row 1 col 2: heart + chevron — stay right-aligned */
    .pba-hdr-right {
        grid-column: 2;
        grid-row: 1;
    }
    /* Row 2: winner badge spans both columns */
    .pba-hdr-centre {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;   /* left-align on mobile */
        white-space: normal;           /* allow badge text to wrap */
    }
    /* Player names can wrap on mobile */
    .pba-hdr-left .pba-section-players {
        flex-wrap: wrap;
        overflow: visible;
    }
    .pba-player-name {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }
}

/* ── Per-player points badge (coloured circle) ──────────────────────────── */
.pba-pts-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.7rem;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    cursor: help;
    line-height: 1;
    vertical-align: middle;
}

/* ── Player name hover: dotted underline + pointer ──────────────────────── */
.pba-player-name {
    cursor: help;
    border-bottom: 1px dotted rgba(255,255,200,0.7);
    padding-bottom: 1px;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pba-player-name:hover {
    border-bottom-style: solid;
    color: #fff !important;
}

/* ── PBA section winner badge ───────────────────────────────────────────── */
.pba-section-winner-badge {
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 3px 10px;
    vertical-align: middle;
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .pba-section-winner-badge {
        white-space: normal;
        word-break: break-word;
        font-size: 0.74rem;
        padding: 2px 7px;
    }
}

/* ── PBA Singles: 3-column section grid ──────────────────────────────────── */
.pba-sections-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}
.pba-grid-cols-1 { grid-template-columns: 1fr !important; }
.pba-section-col {
    min-width: 0;
    box-sizing: border-box;
}
.pba-set-block {
    flex: 1 1 280px;
    min-width: 260px;
}
.pba-tiebreak-block {
    flex: 1 1 220px;
    min-width: 220px;
}
@media print {
    .pba-sections-grid {
        grid-template-columns: 1fr;
    }
}

/* ── PBA Section collapse ─────────────────────────────────────────────────── */
.pba-section-header {
    cursor: pointer;
    user-select: none;
}
.pba-section-header:hover {
    filter: brightness(1.12);
}
.pba-section-toggle-icon {
    flex-shrink: 0;
    font-size: 0.85rem;
    opacity: 0.85;
    transition: transform 0.2s ease;
}

/* Section bodies are hidden by default via JS on load; CSS rules here are for chevron icon only */
.pba-section-body { display: none; }
.pba-section-col.pba-open .pba-section-body { display: block; }
.pba-section-col.pba-open .pba-section-toggle-icon { transform: rotate(180deg); }

/* ── Responsive page header: logo | title | ads ─────────────────────────────
   On desktop the three zones sit side-by-side.
   On mobile they stack: title first (most important), then logo + ads row.
*/
.comp-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
}
.comp-header-logo {
    flex-shrink: 0;
    width: 130px;
}
.comp-header-logo-box {
    width: 120px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.comp-header-title {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.comp-header-ads {
    flex-shrink: 0;
    align-items: center;
}
.comp-header-ad-slot {
    width: 110px;
}
.comp-header-ad-img-box {
    width: 105px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575.98px) {
    /* Stack: title spans full width on top, then logo + ads in a row below */
    .comp-header-row {
        flex-wrap: wrap;
    }
    .comp-header-title {
        order: -1;          /* title first */
        width: 100%;
        flex: 0 0 100%;
    }
    .comp-header-logo {
        width: auto;
        flex: 1;
    }
    .comp-header-logo-box {
        width: 80px;
        height: 70px;
    }
    .comp-header-logo-box img {
        max-height: 65px !important;
        max-width: 75px !important;
    }
    .comp-header-ads {
        flex: 0 0 auto;
    }
    .comp-header-ad-slot {
        width: 75px;
    }
    .comp-header-ad-img-box {
        width: 70px;
        height: 70px;
    }
    .comp-header-ad-img-box img {
        max-height: 65px !important;
        max-width: 65px !important;
    }
    /* Shrink the heading on small screens */
    .comp-header-title h2 {
        font-size: 1.1rem;
    }
}

/* ── PBA player search: full-width on mobile, capped on desktop ─────────── */
.pba-search-input-group {
    max-width: 540px;  /* comfortable cap on wide screens */
    width: 100%;
}
@media (max-width: 575.98px) {
    .pba-search-input-group {
        max-width: 100%;
    }
    /* Make the input grow, button stays compact */
    #pba-player-search-wrap .input-group .form-control {
        min-width: 0;
        flex: 1 1 auto;
    }
    #pba-player-search-wrap .input-group .btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

    /* Section tab navigation */
    .section-tab-nav { margin-bottom: 0.5rem; }
    .section-tab-btn { opacity: 0.72; transition: opacity 0.15s, box-shadow 0.15s; }
    .section-tab-btn:hover { opacity: 0.9; }
    .section-tab-btn.active { opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.22); font-weight: bold; }

/* ── District Names popup: full-width on mobile ── */
@media (max-width: 576px) {
    #abbrLegendPopup {
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: 16px !important;
        max-width: none !important;
        min-width: 0 !important;
        max-height: 60vh !important;
        border-radius: 12px !important;
    }
}