.ffs-h2h {
    --h2h-ink: #10261e;
    --h2h-green: #008f62;
    --h2h-dark: #004d38;
    --h2h-lime: #d8ff72;
    --h2h-pale: #edf8f3;
    --h2h-line: #d8e2de;
    --h2h-muted: #66736e;
    color: var(--h2h-ink);
    display: grid;
    font-family: inherit;
    gap: 14px;
    margin: 4px auto 28px;
    max-width: 1180px;
}

.ffs-h2h *, .ffs-h2h *::before, .ffs-h2h *::after { box-sizing: border-box; }
body.ffs-h2h-page article[id^="post-"] > header.header,
body.ffs-h2h-page h1.entry-title,
body.ffs-h2h-page h1.page-title { display: none; }

.ffs-h2h__hero {
    align-items: end;
    background:
        radial-gradient(circle at 90% 15%, rgba(216, 255, 114, .22), transparent 30%),
        linear-gradient(125deg, #003d30 0%, #007851 58%, #00a86f 100%);
    border-radius: 22px;
    box-shadow: 0 20px 42px rgba(0, 73, 52, .18);
    color: #fff;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    min-height: 196px;
    overflow: hidden;
    padding: 32px 36px;
    position: relative;
}

.ffs-h2h__hero h2 {
    color: #fff !important;
    font-size: clamp(34px, 5vw, 62px) !important;
    letter-spacing: -.04em;
    line-height: .95 !important;
    margin: 8px 0 14px !important;
}

.ffs-h2h__hero p { color: rgba(255, 255, 255, .78); font-size: 17px; margin: 0; }
.ffs-h2h__eyebrow { color: #18bc85; display: block; font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.ffs-h2h__hero .ffs-h2h__eyebrow { color: var(--h2h-lime); }

.ffs-h2h__season-badge {
    align-items: center;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    display: flex;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
    padding: 10px 15px;
}

.ffs-h2h__season-badge::before { background: var(--h2h-lime); border-radius: 50%; box-shadow: 0 0 12px var(--h2h-lime); content: ""; height: 7px; width: 7px; }

.ffs-h2h__metrics { background: #fff; border: 1px solid var(--h2h-line); border-radius: 14px; box-shadow: 0 6px 22px rgba(16, 38, 30, .04); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.ffs-h2h__metrics > div { border-right: 1px solid var(--h2h-line); min-width: 0; padding: 13px 18px; }
.ffs-h2h__metrics > div:last-child { border-right: 0; }
.ffs-h2h__metrics span { color: var(--h2h-muted); display: block; font-size: 9px; font-weight: 800; letter-spacing: .08em; margin-bottom: 3px; text-transform: uppercase; }
.ffs-h2h__metrics strong { color: var(--h2h-ink); font-size: 21px; letter-spacing: -.02em; }

.ffs-h2h__finder { align-items: center; background: #fff; border: 1px solid var(--h2h-line); border-radius: 14px; display: grid; gap: 18px; grid-template-columns: minmax(150px, .34fr) minmax(280px, 1.66fr); padding: 13px 16px; }
.ffs-h2h__finder > label { color: var(--h2h-dark); font-size: 14px; font-weight: 800; letter-spacing: .035em; line-height: 1.2; padding: 0 2px; text-transform: uppercase; }
.ffs-h2h__search-wrap { position: relative; }
.ffs-h2h input[type="search"], .ffs-h2h select { background: #fff; border: 1px solid #c9d5d0; border-radius: 9px; color: var(--h2h-ink); font: inherit; min-height: 44px; outline: none; padding: 9px 13px; width: 100%; }
.ffs-h2h input[type="search"]:focus, .ffs-h2h select:focus { border-color: var(--h2h-green); box-shadow: 0 0 0 3px rgba(0, 143, 98, .13); }

.ffs-h2h__search-results { background: #fff; border: 1px solid var(--h2h-line); border-radius: 10px; box-shadow: 0 14px 35px rgba(16, 38, 30, .18); left: 0; max-height: 340px; overflow: auto; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; }
.ffs-h2h__search-results button { align-items: center; background: #fff; border: 0; border-bottom: 1px solid #edf1ef; color: var(--h2h-ink); cursor: pointer; display: flex; font: inherit; justify-content: space-between; padding: 12px 14px; text-align: left; width: 100%; }
.ffs-h2h__search-results button:hover { background: var(--h2h-pale); }
.ffs-h2h__search-results small { color: var(--h2h-muted); font-size: 11px; margin-left: 12px; }

.ffs-h2h__centre { background: #fff; border: 1px solid var(--h2h-line); border-radius: 18px; box-shadow: 0 12px 32px rgba(16, 38, 30, .05); min-width: 0; overflow: hidden; padding: 22px; }
.ffs-h2h__toolbar { align-items: end; display: flex; gap: 16px; justify-content: space-between; }
.ffs-h2h__division-heading { flex: 0 0 auto; min-width: 230px; }
.ffs-h2h__control-label, .ffs-h2h__selectors label { color: var(--h2h-muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.ffs-h2h__control-label { display: block; margin-bottom: 5px; }
.ffs-h2h__toolbar h3 { align-items: center; background: var(--h2h-pale); border: 1px solid var(--h2h-line); border-radius: 9px; color: var(--h2h-dark); display: flex; font-size: 14px !important; line-height: 1.2 !important; min-height: 42px; margin: 0 !important; padding: 9px 13px; white-space: nowrap; }
.ffs-h2h__selectors { display: grid; flex: 1 1 650px; gap: 9px; grid-template-columns: repeat(4, minmax(100px, 1fr)); max-width: 700px; }
.ffs-h2h__selectors label { margin: 0; }
.ffs-h2h__selectors select { display: block; font-size: 13px; font-weight: 700; margin: 5px 0 0; min-height: 42px; }

.ffs-h2h__tabs { border-bottom: 1px solid var(--h2h-line); display: flex; gap: 8px; margin-top: 22px; }
.ffs-h2h__tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--h2h-muted); cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; margin-bottom: -1px; padding: 13px 14px; }
.ffs-h2h__tabs button.is-active { border-color: var(--h2h-green); color: var(--h2h-dark); }
.ffs-h2h__status { color: var(--h2h-muted); font-size: 13px; margin: 12px 0 0; min-height: 18px; }
.ffs-h2h__panel[hidden] { display: none; }

.ffs-h2h__table-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
.ffs-h2h table { border-collapse: collapse; font-size: 12px; margin: 0; min-width: 820px; width: 100%; }
.ffs-h2h th { border-bottom: 1px solid var(--h2h-line); color: var(--h2h-muted); font-size: 9px; letter-spacing: .06em; padding: 11px 8px; text-align: center; text-transform: uppercase; }
.ffs-h2h th:nth-child(2), .ffs-h2h td:nth-child(2) { text-align: left; }
.ffs-h2h td { border-bottom: 1px solid #edf1ef; color: #3c4944; padding: 11px 8px; text-align: center; }
.ffs-h2h tr:hover td { background: #f8fbfa; }
.ffs-h2h tr.is-promotion td:first-child { box-shadow: inset 3px 0 var(--h2h-green); }
.ffs-h2h tr.is-relegation td:first-child { box-shadow: inset 3px 0 #e48b80; }
.ffs-h2h td.is-manager { font-size: 13px; font-weight: 700; max-width: 240px; }
.ffs-h2h td.is-manager a { color: var(--h2h-dark); text-decoration: none; }
.ffs-h2h td.is-manager a:hover { color: var(--h2h-green); text-decoration: underline; }
.ffs-h2h td.is-points { color: var(--h2h-dark); font-size: 14px; font-weight: 900; }
.ffs-h2h__position { align-items: center; display: inline-flex; font-size: 14px; font-weight: 900; gap: 3px; }
.ffs-h2h__position small { font-size: 7px; }
.ffs-h2h__position small.is-up { color: var(--h2h-green); }
.ffs-h2h__position small.is-down { color: #c2574d; }
.ffs-h2h__form { display: inline-flex; gap: 3px; }
.ffs-h2h__form b { align-items: center; border-radius: 50%; color: #fff; display: inline-flex; font-size: 7px; height: 18px; justify-content: center; width: 18px; }
.ffs-h2h__form .is-w { background: var(--h2h-green); }
.ffs-h2h__form .is-d { background: #8d9a95; }
.ffs-h2h__form .is-l { background: #d5675d; }
.ffs-h2h__key { color: var(--h2h-muted); display: flex; font-size: 10px; gap: 16px; margin-top: 12px; }
.ffs-h2h__key span::before { background: var(--h2h-green); border-radius: 50%; content: ""; display: inline-block; height: 7px; margin-right: 5px; width: 7px; }
.ffs-h2h__key span:last-child::before { background: #e48b80; }

.ffs-h2h__fixtures { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 4px; }
.ffs-h2h__fixture { align-items: center; background: #f7faf9; border: 1px solid #e0e7e4; border-radius: 10px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); min-height: 64px; padding: 10px 12px; }
.ffs-h2h__fixture .is-team { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ffs-h2h__fixture .is-team:last-child { text-align: right; }
.ffs-h2h__fixture strong { background: var(--h2h-dark); border-radius: 5px; color: #fff; font-size: 13px; padding: 7px 5px; text-align: center; }
.ffs-h2h__fixture strong.is-scheduled { background: #dce7e3; color: var(--h2h-muted); }
.ffs-h2h__empty { color: var(--h2h-muted); padding: 30px !important; text-align: center !important; }

@media (max-width: 900px) {
    .ffs-h2h__hero { align-items: start; flex-direction: column; min-height: 0; }
    .ffs-h2h__toolbar { align-items: stretch; flex-direction: column; }
    .ffs-h2h__selectors { flex-basis: auto; max-width: none; width: 100%; }
    .ffs-h2h__fixtures { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .ffs-h2h { gap: 13px; margin: 18px auto; }
    .ffs-h2h__hero { border-radius: 15px; padding: 26px 22px; }
    .ffs-h2h__hero h2 { font-size: 38px !important; }
    .ffs-h2h__hero p { font-size: 14px; }
    .ffs-h2h__metrics { grid-template-columns: repeat(2, 1fr); }
    .ffs-h2h__metrics > div { padding: 12px 14px; }
    .ffs-h2h__metrics > div:nth-child(2) { border-right: 0; }
    .ffs-h2h__metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--h2h-line); }
    .ffs-h2h__metrics strong { font-size: 20px; }
    .ffs-h2h__finder { align-items: stretch; gap: 9px; grid-template-columns: 1fr; padding: 13px; }
    .ffs-h2h__finder > label { font-size: 12px; }
    .ffs-h2h__centre { border-radius: 15px; padding: 18px 14px; }
    .ffs-h2h__division-heading { min-width: 0; }
    .ffs-h2h__toolbar h3 { font-size: 13px; }
    .ffs-h2h__selectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ffs-h2h__tabs button { font-size: 12px; padding-inline: 8px; }
    .ffs-h2h__key { flex-direction: column; gap: 5px; }
    .ffs-h2h__fixture { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); }
}