.comparison-page {
    --comparison-line: rgba(220, 230, 240, .10);
    --comparison-soft: rgba(255, 255, 255, .035);
    --comparison-accent-soft: rgba(92, 161, 130, .11);
    padding-bottom: 1rem;
}

.comparison-hero,
.comparison-detail-hero,
.comparison-builder,
.comparison-scoreboard,
.comparison-archive-summary,
.comparison-h2h,
.comparison-teams,
.comparison-history,
.comparison-note {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-card-strong);
}

.comparison-hero,
.comparison-detail-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.4rem, 4vw, 2.4rem);
}

.comparison-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
}

.comparison-hero::after,
.comparison-detail-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -110px;
    top: -130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92,161,130,.12), rgba(92,161,130,0) 68%);
    pointer-events: none;
}

.comparison-hero .page-subtitle,
.comparison-detail-hero > p {
    max-width: 820px;
}

.comparison-hero-badge {
    width: 92px;
    height: 92px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(92, 161, 130, .22);
    background: var(--comparison-accent-soft);
    color: #b8d8c8;
    font-size: 2rem;
}

.comparison-builder,
.comparison-scoreboard,
.comparison-archive-summary,
.comparison-h2h,
.comparison-teams,
.comparison-history {
    overflow: hidden;
}

.comparison-section-head {
    min-height: 76px;
    padding: 1.05rem 1.2rem;
    border-bottom: 1px solid var(--comparison-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.comparison-section-head h2 {
    margin: .15rem 0 0;
    color: #fff;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.comparison-eyebrow {
    color: var(--text-dim);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.comparison-live-chip,
.comparison-archive-count {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .68rem;
    border-radius: 999px;
    border: 1px solid rgba(92, 161, 130, .20);
    background: rgba(92, 161, 130, .08);
    color: #b7d4c6;
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 700;
}

.comparison-archive-count {
    border-color: var(--line-strong);
    background: rgba(255,255,255,.025);
    color: var(--text-soft);
}

.comparison-form {
    padding: 1.2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: .9rem;
}

.comparison-select-card,
.comparison-season-select {
    display: grid;
    gap: .5rem;
}

.comparison-select-card > span,
.comparison-season-select > span {
    color: var(--text-dim);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.comparison-form select {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #0c1218;
    color: var(--text);
    padding: 0 .85rem;
    font-weight: 700;
}

.comparison-vs,
.comparison-title-vs {
    display: grid;
    place-items: center;
    font-weight: 900;
    letter-spacing: .05em;
    color: #b5c0ca;
}

.comparison-vs {
    width: 48px;
    height: 48px;
    margin-bottom: 2px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: rgba(255,255,255,.025);
    font-size: .78rem;
}

.comparison-season-select {
    grid-column: 1 / 3;
}

.comparison-submit {
    min-height: 52px;
    border: 1px solid rgba(92, 161, 130, .34);
    border-radius: 10px;
    background: rgba(92, 161, 130, .14);
    color: #e5f3ec;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    transition: .2s ease;
}

.comparison-submit:hover {
    background: rgba(92, 161, 130, .22);
    border-color: rgba(92, 161, 130, .48);
}

.comparison-form-error {
    grid-column: 1 / -1;
    margin: 0;
    color: #e39aa5;
    font-size: .85rem;
}

.comparison-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.comparison-feature-grid article {
    min-height: 154px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-card-strong);
    padding: 1.1rem;
    display: grid;
    align-content: start;
    gap: .48rem;
}

.comparison-feature-grid article > i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(92, 161, 130, .09);
    color: #aacbbb;
}

.comparison-feature-grid strong { color: #fff; }
.comparison-feature-grid span { color: var(--text-soft); font-size: .88rem; line-height: 1.55; }

.comparison-note {
    padding: 1rem 1.15rem;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    color: var(--text-soft);
}

.comparison-note > i { margin-top: .25rem; color: #9db7cb; }
.comparison-note div { display: grid; gap: .15rem; }
.comparison-note strong { color: #e9eef2; }
.comparison-note span { font-size: .88rem; }

.comparison-detail-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.comparison-new-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #b9c7d2;
    font-size: .82rem;
    font-weight: 700;
}

.comparison-country-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem;
    margin: .55rem 0 1rem;
}

.comparison-country-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .85rem;
}

.comparison-country-title.is-right {
    flex-direction: row-reverse;
    text-align: right;
}

.comparison-country-title img {
    width: 58px;
    height: 42px;
    border-radius: 7px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.13);
}

.comparison-country-title span { min-width: 0; display: grid; }
.comparison-country-title small { color: var(--text-dim); font-size: .69rem; font-weight: 800; letter-spacing: .08em; }
.comparison-country-title strong { color: #fff; font-size: clamp(1.35rem, 3vw, 2.2rem); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comparison-title-vs { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255,255,255,.025); }
.comparison-detail-hero > p { margin: 0; color: var(--text-soft); font-size: .92rem; }

.comparison-scope-tabs {
    display: flex;
    align-items: center;
    gap: .4rem;
    overflow-x: auto;
    padding-bottom: .1rem;
}

.comparison-scope-tabs a,
.comparison-season-tabs-label {
    flex: 0 0 auto;
}

.comparison-scope-tabs a {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem .72rem;
    color: var(--text-soft);
    font-size: .8rem;
    font-weight: 700;
    background: rgba(255,255,255,.018);
}

.comparison-scope-tabs a.active {
    color: #dff0e8;
    border-color: rgba(92,161,130,.3);
    background: rgba(92,161,130,.12);
}

.comparison-season-tabs-label { margin-left: .35rem; color: var(--text-dim); font-size: .75rem; font-weight: 700; }

.comparison-metric-head,
.comparison-metric-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, .8fr) minmax(0, 1fr);
    align-items: center;
    text-align: center;
}

.comparison-metric-head {
    min-height: 44px;
    color: var(--text-dim);
    background: rgba(255,255,255,.018);
    border-bottom: 1px solid var(--comparison-line);
    font-size: .7rem;
    letter-spacing: .06em;
}

.comparison-metric-head strong { color: #aab5bf; font-size: .76rem; }

.comparison-metric-row {
    min-height: 65px;
    border-bottom: 1px solid var(--comparison-line);
    padding: .25rem 1rem;
}

.comparison-metric-row:last-child { border-bottom: 0; }
.comparison-metric-row > span { color: var(--text-soft); font-size: .82rem; font-weight: 700; }
.comparison-metric-row > strong { color: #e8edf1; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.comparison-metric-row > strong:first-child { text-align: left; }
.comparison-metric-row > strong:last-child { text-align: right; }
.comparison-metric-row > strong small { display: block; color: var(--text-dim); font-size: .68rem; font-weight: 600; margin-top: .1rem; }
.comparison-metric-row > strong.is-leading { color: #9ed1b8; }
.comparison-metric-row > strong.is-leading::after { content: " ↑"; font-size: .72rem; }

.comparison-tie-note,
.comparison-source-note {
    margin: 0;
    padding: .75rem 1rem;
    border-top: 1px solid var(--comparison-line);
    color: var(--text-dim);
    font-size: .78rem;
}

.comparison-h2h-score {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comparison-h2h-score > div {
    min-height: 145px;
    padding: 1rem;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    gap: .15rem;
    border-right: 1px solid var(--comparison-line);
}

.comparison-h2h-score > div:last-child { border-right: 0; }
.comparison-h2h-score strong { font-size: clamp(1.7rem, 4vw, 2.45rem); color: #fff; }
.comparison-h2h-score span { color: var(--text-soft); font-size: .82rem; }
.comparison-h2h-score small { color: var(--text-dim); font-size: .75rem; }
.comparison-h2h-score .comparison-h2h-draw { background: rgba(255,255,255,.018); }

.comparison-empty {
    min-height: 150px;
    padding: 1.2rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .25rem;
    text-align: center;
    color: var(--text-soft);
}

.comparison-empty > i { font-size: 1.4rem; color: var(--text-dim); margin-bottom: .25rem; }
.comparison-empty > strong { color: #e9edf1; }
.comparison-empty > span { font-size: .84rem; }
.comparison-empty.compact { min-height: 80px; }

.comparison-team-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comparison-team-column:first-child { border-right: 1px solid var(--comparison-line); }
.comparison-team-column h3 { margin: 0; padding: .8rem 1rem; color: #fff; font-size: .94rem; border-bottom: 1px solid var(--comparison-line); }

.comparison-team-row {
    min-height: 54px;
    padding: .55rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    border-bottom: 1px solid var(--comparison-line);
}

.comparison-team-row:last-child { border-bottom: 0; }
.comparison-team-row > span { min-width: 0; display: flex; align-items: center; gap: .55rem; }
.comparison-team-row img { width: 28px; height: 28px; object-fit: contain; }
.comparison-team-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.comparison-team-row > strong { color: #afd1c0; font-size: .83rem; font-variant-numeric: tabular-nums; }

.comparison-table-wrap { overflow-x: auto; }
.comparison-table { width: 100%; border-collapse: collapse; min-width: 650px; }
.comparison-table th { background: rgba(255,255,255,.018); color: var(--text-dim); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; text-align: left; }
.comparison-table th,
.comparison-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--comparison-line); }
.comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-table td { color: var(--text-soft); font-size: .82rem; }
.comparison-table td > a { color: #e8edf1; font-weight: 800; }
.comparison-table td > small { display: inline-block; margin-left: .4rem; color: #9bc8b2; font-size: .65rem; }
.comparison-table td > strong { display: inline-block; min-width: 64px; color: #e8edf1; font-variant-numeric: tabular-nums; }
.comparison-table td > span:not(.comparison-winner-label):not(.comparison-draw-label) { color: var(--text-dim); }
.comparison-winner-label,
.comparison-draw-label { display: inline-flex; padding: .22rem .48rem; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.comparison-winner-label { background: rgba(92,161,130,.10); color: #a9d1bd; }
.comparison-draw-label { background: rgba(255,255,255,.035); color: var(--text-soft); }

@media (max-width: 767.98px) {
    .comparison-hero { grid-template-columns: 1fr; }
    .comparison-hero-badge { display: none; }
    .comparison-form { grid-template-columns: 1fr; }
    .comparison-vs { margin: -.15rem auto; }
    .comparison-season-select,
    .comparison-submit,
    .comparison-form-error { grid-column: 1; }
    .comparison-feature-grid { grid-template-columns: 1fr; }
    .comparison-country-title-row { gap: .55rem; }
    .comparison-country-title { gap: .45rem; }
    .comparison-country-title img { width: 42px; height: 31px; }
    .comparison-country-title strong { font-size: clamp(1rem, 5vw, 1.4rem); }
    .comparison-title-vs { width: 42px; height: 42px; font-size: .72rem; }
    .comparison-detail-topline { align-items: flex-start; }
    .comparison-section-head { align-items: flex-start; flex-direction: column; }
    .comparison-metric-head,
    .comparison-metric-row { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); }
    .comparison-metric-row { padding: .2rem .7rem; }
    .comparison-metric-row > strong { font-size: .9rem; }
    .comparison-metric-row > span { font-size: .72rem; }
    .comparison-h2h-score > div { min-height: 125px; padding: .75rem .45rem; }
    .comparison-h2h-score span { font-size: .72rem; }
    .comparison-team-columns { grid-template-columns: 1fr; }
    .comparison-team-column:first-child { border-right: 0; border-bottom: 1px solid var(--comparison-line); }
}

.comparison-featured {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-card-strong);
    overflow: hidden;
}

.comparison-featured-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comparison-featured-links a {
    min-height: 64px;
    padding: .75rem 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    border-bottom: 1px solid var(--comparison-line);
    border-right: 1px solid var(--comparison-line);
    color: var(--text-soft);
    font-size: .83rem;
}

.comparison-featured-links a:nth-child(2n) { border-right: 0; }
.comparison-featured-links a:nth-last-child(-n+2) { border-bottom: 0; }
.comparison-featured-links a span:first-child { text-align: right; }
.comparison-featured-links a b { color: var(--text-dim); font-size: .68rem; }
.comparison-featured-links a i { color: var(--text-dim); font-size: .72rem; }
.comparison-featured-links a:hover { background: rgba(255,255,255,.02); color: #fff; }

@media (max-width: 767.98px) {
    .comparison-featured-links { grid-template-columns: 1fr; }
    .comparison-featured-links a { border-right: 0; }
    .comparison-featured-links a:nth-last-child(-n+2) { border-bottom: 1px solid var(--comparison-line); }
    .comparison-featured-links a:last-child { border-bottom: 0; }
}

/* Country / club comparison switcher */
.comparison-builder { overflow: visible; }

.comparison-type-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    padding: .9rem 1.2rem 0;
}

.comparison-type-tabs button {
    min-height: 46px;
    border: 1px solid var(--comparison-line);
    border-radius: 10px;
    background: rgba(255,255,255,.018);
    color: var(--text-soft);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: .18s ease;
}

.comparison-type-tabs button:hover,
.comparison-type-tabs button:focus-visible {
    color: #fff;
    border-color: var(--line-strong);
    outline: none;
}

.comparison-type-tabs button.active {
    color: #dff0e8;
    border-color: rgba(92,161,130,.34);
    background: rgba(92,161,130,.11);
}

.comparison-team-picker {
    position: relative;
    display: grid;
    gap: .5rem;
    min-width: 0;
}

.comparison-team-picker > label {
    color: var(--text-dim);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.comparison-team-search-field {
    min-height: 52px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #0c1218;
    padding: 0 .82rem;
}

.comparison-team-search-field > i {
    color: var(--text-dim);
    font-size: .82rem;
}

.comparison-team-search-field input[type="search"] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-weight: 700;
}

.comparison-team-search-field input::placeholder { color: #67727d; }

.comparison-team-results {
    position: absolute;
    z-index: 80;
    top: calc(100% + .4rem);
    left: 0;
    right: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: #0c1218;
    box-shadow: 0 20px 45px rgba(0,0,0,.38);
}

.comparison-team-result {
    width: 100%;
    min-height: 55px;
    padding: .52rem .72rem;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 18px;
    align-items: center;
    gap: .65rem;
    border: 0;
    border-bottom: 1px solid var(--comparison-line);
    background: transparent;
    color: inherit;
    text-align: left;
}

.comparison-team-result:last-child { border-bottom: 0; }
.comparison-team-result:hover,
.comparison-team-result:focus-visible { background: rgba(255,255,255,.035); outline: none; }
.comparison-team-result > i { color: #8ebba5; font-size: .72rem; }

.comparison-team-result-logo {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    color: var(--text-dim);
}

.comparison-team-result-logo img { width: 32px; height: 32px; object-fit: contain; }
.comparison-team-result-copy { min-width: 0; display: grid; gap: .08rem; }
.comparison-team-result-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eef2f5; font-size: .84rem; }
.comparison-team-result-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-size: .72rem; }
.comparison-team-result-empty { padding: .85rem; color: var(--text-dim); font-size: .8rem; text-align: center; }

/* Club comparison detail */
.comparison-team-title img {
    width: 62px;
    height: 62px;
    padding: .3rem;
    border-radius: 12px;
    object-fit: contain;
    background: rgba(255,255,255,.025);
}

.comparison-team-title .comparison-team-placeholder {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    color: var(--text-dim);
    background: rgba(255,255,255,.025);
    font-size: 1.25rem;
}

.comparison-team-title small {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.comparison-team-title small img {
    width: 19px;
    height: 14px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    object-fit: cover;
}

.comparison-participation-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
}

.comparison-participation-status.is-active { color: #9ed1b8; }
.comparison-participation-status.is-empty { color: var(--text-dim); }

.comparison-season-cell {
    min-width: 145px;
    display: grid;
    gap: .12rem;
}

.comparison-season-cell > strong { color: #e8edf1; font-variant-numeric: tabular-nums; }
.comparison-season-cell > span { color: var(--text-soft); font-size: .74rem; }
.comparison-season-cell > small { color: var(--text-dim); font-size: .68rem; }
.comparison-season-cell.is-empty > strong { color: var(--text-dim); font-weight: 700; }

.comparison-h2h-fixture {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: #e7edf1;
    font-weight: 700;
}

.comparison-h2h-fixture b {
    min-width: 48px;
    color: #fff;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.comparison-h2h-fixture a { color: inherit; }
.comparison-h2h-fixture a:hover { color: #fff; }

.comparison-competition-name {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 800;
    color: #e9eef2;
}

.comparison-competition-badge {
    display: inline-flex;
    min-width: 45px;
    justify-content: center;
    padding: .22rem .42rem;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: #aebbc6;
    background: rgba(255,255,255,.025);
    font-size: .65rem;
    letter-spacing: .05em;
}


@media (max-width: 767.98px) {
    .comparison-type-tabs { padding: .75rem .8rem 0; }
    .comparison-team-form { grid-template-columns: 1fr; }
    .comparison-team-title img,
    .comparison-team-title .comparison-team-placeholder { width: 48px; height: 48px; }
    .comparison-team-title strong { font-size: clamp(.95rem, 4.5vw, 1.3rem); }
}