/* Keep the stadium at the edges; match information has its own solid surface. */
body:has(.match-center-page) {
    background-image: linear-gradient(rgba(5, 12, 22, .58), rgba(5, 12, 22, .8)), url('../images/fon3.jpeg');
    background-color: #080f1b;
}
.match-center-page .card {
    background: #151f2e;
    border: 1px solid #2b3a4f;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.match-center-page .bg-dark { opacity: 1; background: #151f2e !important; }
.match-center-page .card-header { background: #1b2d46; border-bottom: 1px solid #31435c; }
.match-center-page .compact-group-header { background: #223148 !important; color: #dbe6f4; }
.match-center-page .text-muted, .match-center-page .textGrey { color: #b7c5d8 !important; }
.match-center-page .compact-match-meta { color: #b7c5d8; padding-top: .65rem; }
.match-center-page .matchBlock { padding-bottom: .35rem; border-color: #2a374b; }
.match-center-page .compact-team-row { color: #f1f5fb; line-height: 1.4; }
.match-center-page .compact-score-box { font-size: 1.25rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.match-center-page .js-home-score, .match-center-page .js-away-score { color: #fff !important; }
.match-center-page .match-is-live .js-home-score,
.match-center-page .match-is-live .js-away-score { color: #ff6b7d !important; }
.match-center-page .match-is-live { box-shadow: inset 3px 0 #f34b63; }
.match-center-page .live { background: #bd233c; color: #fff; padding: 4px 7px; border-radius: 5px; font-weight: 700; }
.match-center-page .live::before { content: '● LIVE · '; font-size: .68rem; }
.match-center-page .wait { background: #34445b; color: #dce5f2; padding: 4px 7px; border-radius: 5px; }
.match-center-page .over { background: #263e38; color: #cbecde; padding: 4px 7px; border-radius: 5px; }
.match-center-page .compact-status-cell, .match-center-page .compact-stadium-cell { line-height: 1.5; }

/* Shared match layout, using the main site's solid dark surfaces. */
#headToHeadModal .modal-dialog { width: min(1040px, calc(100vw - 32px)); max-width: 1040px; margin: 16px auto; }
#headToHeadModal .modal-content {
    background: #151f2e; color: #f1f5fb; opacity: 1; border: 1px solid #2b3a4f;
    border-radius: 26px; max-height: calc(100dvh - 32px);
    box-shadow: 0 24px 80px rgba(8, 25, 55, .3);
}
#headToHeadModal .modal-body { overflow-y: auto; background: #151f2e; }
#headToHeadModal .match-center-hero {
    position: relative; display: block; flex: 0 0 auto; border: 0;
    padding: 26px 72px 24px 28px; color: #fff;
    background: #1b2d46;
    border-bottom: 1px solid #31435c;
}
#headToHeadModal .match-center-hero-content { width: 100%; }
#headToHeadModal .btn-close {
    position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; padding: 0;
    border-radius: 50%; background-color: #fff; background-size: 14px; opacity: 1;
}
#headToHeadModal .match-center-matchup { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; }
#headToHeadModal .match-center-team { display: flex; align-items: center; gap: 18px; min-width: 0; font-size: 22px; line-height: 1.2; }
#headToHeadModal .match-center-team strong { overflow-wrap: anywhere; }
#headToHeadModal .match-center-team-home { justify-content: flex-end; text-align: right; }
#headToHeadModal .match-center-team img, #headToHeadModal .match-center-team-placeholder {
    width: 76px; height: 76px; object-fit: contain; padding: 10px; border-radius: 50%; background: #fff; flex-shrink: 0;
}
#headToHeadModal .match-center-team-placeholder { display: grid; place-items: center; }
#headToHeadModal .match-center-hero-score { font-size: 54px; line-height: 1.2; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
#headToHeadModal .match-center-hero-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; font-weight: 700; }
#headToHeadModal .match-center-hero-meta > div { display: flex; flex-wrap: wrap; gap: 8px; }
#headToHeadModal .match-center-hero-meta span { padding: 5px 10px; border-radius: 999px; background: #223148; border: 1px solid #40516b; }
#headToHeadModal .stats-tabs { margin: 12px 24px; padding: 4px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: #1c283a; border: 1px solid #31435c; border-radius: 15px; gap: 4px; }
#headToHeadModal .stats-tabs .nav-link { width: 100%; border: 0; border-radius: 12px; padding: 14px 8px; color: #b7c5d8; font-size: 14px; }
#headToHeadModal .stats-tabs .nav-link.active { background: #0d6efd; color: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.18); }
#headToHeadModal .stats-tab-pane { padding: 24px; }
#headToHeadModal .text-muted, #headToHeadModal .text-light, #headToHeadModal .team-form-label,
#headToHeadModal .protocol-meta, #headToHeadModal .timeline-event-meta { color: #b7c5d8 !important; }
#headToHeadModal .table { --bs-table-bg: #151f2e; --bs-table-color: #f1f5fb; --bs-table-hover-bg: #223148; --bs-table-hover-color: #fff; --bs-table-border-color: #31435c; color: #f1f5fb; }
#headToHeadModal .stats-card, #headToHeadModal .recent-team-match,
#headToHeadModal .protocol-team-card, #headToHeadModal .protocol-player-chip,
#headToHeadModal .timeline-event-card, #headToHeadModal .timeline-mvp { background: #1c283a; border-color: #31435c; color: #f1f5fb; }
#headToHeadModal .timeline-header-teams, #headToHeadModal .timeline-summary-grid { display: none; }
#headToHeadModal .timeline-empty { border: 0; background: #151f2e; padding: 26px 16px 36px; color: #f1f5fb; }
#headToHeadModal .timeline-empty p { max-width: 460px; margin: 16px auto 0; color: #b7c5d8; font-size: 14px; }
#headToHeadModal .match-center-empty-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 20px; background: #223148; border-radius: 18px; color: #6ea8fe; font-size: 26px; }
#headToHeadModal .btn-close:focus-visible, #headToHeadModal .nav-link:focus-visible { outline: 3px solid #facc15; outline-offset: 3px; }
@media (max-width: 575.98px) {
    #headToHeadModal .modal-dialog { width: calc(100vw - 16px); margin: 8px auto; }
    #headToHeadModal .modal-content { max-height: calc(100dvh - 16px); border-radius: 20px; }
    #headToHeadModal .match-center-hero { padding: 64px 16px 18px; }
    #headToHeadModal .match-center-matchup { gap: 8px; }
    #headToHeadModal .match-center-team { flex-direction: column; gap: 10px; text-align: center; font-size: 14px; }
    #headToHeadModal .match-center-team-home strong { order: 2; }
    #headToHeadModal .match-center-team img, #headToHeadModal .match-center-team-placeholder { width: 56px; height: 56px; }
    #headToHeadModal .match-center-hero-score { font-size: 32px; }
    #headToHeadModal .match-center-hero-meta { flex-direction: column; align-items: flex-start; font-size: 11px; }
    #headToHeadModal .stats-tabs { margin: 10px 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
    #headToHeadModal .stats-tabs .nav-link { font-size: 12px; padding: 12px 6px; }
    #headToHeadModal .stats-tab-pane { padding: 16px; }
}