/* OntoGoal sport visual system. Loaded last so every public route shares one identity. */
body.og-hide-theme-chrome {
    --og-sport-dark: #071d18;
    --og-sport-ink: #0b2a22;
    --og-sport-green: #078b65;
    --og-sport-bright: #20c997;
    --og-sport-lime: #b9ee45;
    --og-sport-line: #d8e5df;
    --og-sport-surface: #ffffff;
    background:
        radial-gradient(circle at 8% 0, rgba(32, 201, 151, .14), transparent 26rem),
        linear-gradient(180deg, #eaf3ef 0, #f8faf9 22rem, #eef3f0 100%);
    color: var(--og-sport-ink);
}

body.og-hide-theme-chrome #page {
    min-height: 100vh;
}

.og-public {
    max-width: 1240px;
    padding: 22px 22px 52px;
}

/* Dark scoreboard-style navigation. */
.og-site-bar {
    position: relative;
    z-index: 40;
    isolation: isolate;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: linear-gradient(115deg, #061a15 0%, #0b382c 66%, #087f5b 100%);
    box-shadow: 0 14px 34px rgba(5, 35, 27, .18);
    color: #fff;
}

.og-site-bar .og-language-menu {
    z-index: 2;
}

.og-site-bar .og-language-menu > div {
    z-index: 50;
}

.og-site-bar::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(120deg, transparent 0 44px, rgba(255, 255, 255, .025) 44px 46px);
    content: "";
    pointer-events: none;
}

.og-site-bar .og-brand,
.og-site-bar .og-primary-nav a,
.og-site-bar .og-language-menu summary {
    color: #fff;
}

.og-site-bar .og-brand {
    font-weight: 900;
    letter-spacing: -.035em;
}

.og-site-bar .og-primary-nav a {
    border-radius: 999px;
    padding: 9px 13px;
    font-weight: 800;
}

.og-site-bar .og-primary-nav a:hover,
.og-site-bar .og-primary-nav a:focus-visible {
    background: rgba(185, 238, 69, .16);
    color: var(--og-sport-lime);
}

.og-site-bar .og-language-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .1);
}

.og-site-bar .og-language-menu summary::after {
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease;
}

.og-site-bar .og-language-menu[open] summary::after {
    transform: translateY(2px) rotate(225deg);
}

.og-site-bar .og-language-menu ul,
.og-site-bar .og-language-menu a {
    color: var(--og-sport-ink);
}

/* Stadium-inspired hero surfaces. */
.og-home-hero,
.og-hero,
.og-match-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background:
        radial-gradient(circle at 78% 18%, rgba(185, 238, 69, .18), transparent 25%),
        linear-gradient(135deg, #061c16 0%, #087f5b 70%, #0ca678 100%);
    box-shadow: 0 18px 38px rgba(5, 57, 43, .2);
    color: #fff;
}

.og-home-hero::after,
.og-hero::after,
.og-match-hero::after {
    position: absolute;
    z-index: -1;
    top: -55%;
    inset-inline-end: -5%;
    width: 330px;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(255, 255, 255, .035), 0 0 0 84px rgba(255, 255, 255, .02);
    content: "";
    pointer-events: none;
}

.og-home-hero h1,
.og-hero h1,
.og-hero h2,
.og-match-hero h1,
.og-home-hero p,
.og-hero p,
.og-match-hero p,
.og-match-hero time {
    color: inherit;
}

.og-match-hero .og-match-competition-link,
.og-match-hero .og-match-competition-link small {
    color: #fff;
}

.og-match-hero .og-match-competition-link small,
.og-match-hero .og-match-meta {
    color: rgba(255, 255, 255, .78);
}

.og-home-hero h1,
.og-hero h1,
.og-match-hero h1 {
    font-weight: 900;
    letter-spacing: -.035em;
}

.og-home-hero .og-eyebrow,
.og-hero .og-eyebrow {
    color: var(--og-sport-lime);
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.og-hero > img,
.og-match-hero img {
    border: 4px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

/* Stronger controls and clearer active states. */
.og-tabs,
.og-status-filters,
.og-date-nav,
.og-match-tools {
    border-radius: 16px;
}

.og-tabs a,
.og-tabs button,
.og-status-filters a,
.og-status-filters button,
.og-date-nav a,
.og-date-nav button {
    border-radius: 999px;
    font-weight: 800;
}

.og-tabs .is-active,
.og-tabs [aria-current="page"],
.og-status-filters .is-active,
.og-status-filters [aria-pressed="true"] {
    background: var(--og-sport-dark);
    color: #fff;
    box-shadow: 0 7px 16px rgba(5, 35, 27, .2);
}

button,
.og-button,
.og-share-button {
    font-weight: 800;
}

/* Cards read like modern fixture and scoreboard panels. */
.og-panel,
.og-match-competition,
.og-directory-card,
.og-fixture,
.og-home-match,
.og-summary > div {
    border-color: var(--og-sport-line);
    border-radius: 18px;
    background: var(--og-sport-surface);
    box-shadow: 0 8px 24px rgba(14, 48, 38, .07);
}

.og-match-competition {
    overflow: hidden;
    border-inline-start: 5px solid var(--og-competition-accent, var(--og-sport-green));
}

.og-match-competition > header,
.og-match-competition .og-competition-header {
    background: linear-gradient(90deg, var(--og-competition-tint, #edf8f4), #fff);
}

[dir="rtl"] .og-match-competition > header,
[dir="rtl"] .og-match-competition .og-competition-header {
    background: linear-gradient(270deg, var(--og-competition-tint, #edf8f4), #fff);
}

.og-home-match,
.og-fixture {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.og-home-match:hover,
.og-fixture:hover {
    transform: translateY(-2px);
    border-color: #a9c8bc;
    box-shadow: 0 13px 28px rgba(14, 48, 38, .12);
}

.og-home-team img,
.og-fixture-team img {
    filter: drop-shadow(0 5px 6px rgba(4, 32, 24, .12));
}

.og-home-score,
.og-match-scoreboard .og-score,
.og-match-scoreboard > div > strong {
    border-radius: 10px;
    background: var(--og-sport-dark);
    color: #fff;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

.og-status,
.og-match-status {
    border-radius: 999px;
    font-weight: 900;
}

.og-status.is-live,
.og-match-status.is-live,
.is-live .og-status,
.is-live .og-home-score {
    background: #d92d3b;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(217, 45, 59, .12);
}

.og-status.is-live::before,
.og-match-status.is-live::before,
.is-live .og-status::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-end: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    animation: og-sport-pulse 1.25s ease-in-out infinite;
}

@keyframes og-sport-pulse {
    50% { opacity: .35; transform: scale(.75); }
}

/* Tables and statistics retain the same visual language. */
.og-public table {
    overflow: hidden;
    border-radius: 14px;
}

.og-public thead th {
    background: var(--og-sport-dark);
    color: #fff;
    font-weight: 800;
}

.og-public tbody tr:nth-child(even) {
    background: #f2f7f4;
}

.og-public a {
    text-underline-offset: 3px;
}

.og-site-footer {
    border-top: 4px solid var(--og-sport-green);
    background: linear-gradient(180deg, #fff, #edf5f1);
}

/*
 * OntoGoal Touchline
 * A bespoke visual language based on pitch markings, match tickets and tunnels.
 */
body.og-hide-theme-chrome {
    background-color: #edf4f0;
    background-image:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(7, 139, 101, .055) calc(50% - 1px), rgba(7, 139, 101, .055) calc(50% + 1px), transparent calc(50% + 1px)),
        radial-gradient(circle at 50% 9rem, transparent 0 76px, rgba(7, 139, 101, .045) 77px 79px, transparent 80px),
        radial-gradient(circle at 5% 0, rgba(185, 238, 69, .16), transparent 24rem),
        linear-gradient(180deg, #e6f1ec 0, #f9fbfa 26rem, #edf3f0 100%);
}

.og-site-bar {
    border-radius: 5px 24px 5px 24px;
}

.og-site-bar::after {
    position: absolute;
    bottom: -5px;
    inset-inline-start: 22px;
    width: 72px;
    height: 5px;
    background: var(--og-sport-lime);
    content: "";
    transform: skewX(-28deg);
}

.og-brand-mark {
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 4px 11px 4px 11px;
    background: rgba(255, 255, 255, .11);
}

.og-home-hero,
.og-hero,
.og-match-hero {
    border-radius: 6px 38px 6px 38px;
}

.og-home-hero {
    min-height: 218px;
}

.og-home-hero::before,
.og-hero::before,
.og-match-hero::before {
    position: absolute;
    z-index: -1;
    inset: 14px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 2px 27px 2px 27px;
    content: "";
    pointer-events: none;
}

.og-home-cta,
.og-action-button,
.og-button {
    border-radius: 3px 13px 3px 13px;
}

.og-match-tools {
    position: relative;
    border: 0;
    border-inline-start: 5px solid var(--og-sport-bright);
    border-radius: 3px 18px 3px 18px;
    box-shadow: 0 9px 25px rgba(14, 48, 38, .08);
}

.og-day-match-heading {
    position: relative;
    padding-inline-start: 18px;
}

.og-day-match-heading::before {
    position: absolute;
    top: 2px;
    bottom: 2px;
    inset-inline-start: 0;
    width: 5px;
    border-radius: 1px 7px 1px 7px;
    background: linear-gradient(var(--og-sport-lime), var(--og-sport-green));
    content: "";
}

.og-status-filters {
    padding: 6px;
    border: 1px solid #ccddd6;
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(8px);
}

.og-status-filters button span {
    display: inline-grid;
    min-width: 24px;
    min-height: 24px;
    place-items: center;
    margin-inline-start: 5px;
    border-radius: 50%;
    background: rgba(7, 29, 24, .08);
    font-size: 11px;
}

.og-status-filters .is-active span {
    background: var(--og-sport-lime);
    color: var(--og-sport-dark);
}

/* Competition blocks resemble match tickets rather than generic cards. */
.og-match-competition {
    position: relative;
    overflow: hidden;
    border: 0;
    border-inline-start: 0;
    border-radius: 4px 28px 4px 28px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(11, 42, 34, .11);
}

.og-match-competition::before {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 7px;
    background: var(--og-competition-accent, var(--og-sport-green));
    content: "";
}

.og-match-competition > header,
.og-match-competition .og-competition-header,
[dir="rtl"] .og-match-competition > header,
[dir="rtl"] .og-match-competition .og-competition-header {
    position: relative;
    min-height: 72px;
    padding-inline: 24px 20px;
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--og-competition-accent, #087f5b) 88%, #061c16), var(--og-competition-accent, #087f5b));
    color: #fff;
}

.og-match-competition > header::after,
.og-match-competition .og-competition-header::after {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 23%;
    width: 1px;
    background: rgba(255, 255, 255, .14);
    box-shadow: 13px 0 0 rgba(255, 255, 255, .06), 26px 0 0 rgba(255, 255, 255, .035);
    content: "";
    transform: skewX(-18deg);
}

.og-match-competition > header img {
    width: 44px;
    height: 44px;
    padding: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .18);
}

.og-match-competition > header strong {
    color: #fff;
    font-size: 17px;
    font-weight: 900;
}

.og-match-competition > header small {
    color: rgba(255, 255, 255, .72);
}

.og-match-competition > header > a {
    z-index: 1;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 2px 10px 2px 10px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    text-decoration: none;
}

.og-home-match {
    position: relative;
    margin: 0 16px;
    padding: 17px 12px;
    border: 0;
    border-bottom: 1px dashed #c7d8d1;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.og-home-match:last-child {
    margin-bottom: 10px;
    border-bottom: 0;
}

.og-home-match::before,
.og-home-match::after {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 26px;
    background: #edf3f0;
    content: "";
    transform: translateY(-50%);
}

.og-home-match::before {
    inset-inline-start: -16px;
    border-radius: 0 18px 18px 0;
}

.og-home-match::after {
    inset-inline-end: -16px;
    border-radius: 18px 0 0 18px;
}

[dir="rtl"] .og-home-match::before {
    border-radius: 18px 0 0 18px;
}

[dir="rtl"] .og-home-match::after {
    border-radius: 0 18px 18px 0;
}

.og-home-match:hover {
    transform: none;
    background: linear-gradient(90deg, transparent, var(--og-competition-tint, #edf8f4), transparent);
    box-shadow: none;
}

.og-home-kickoff {
    padding-inline-start: 10px;
    border-inline-start: 2px solid var(--og-competition-accent, var(--og-sport-green));
}

.og-home-team img,
.og-fixture-team img {
    padding: 3px;
    border: 1px solid #d8e5df;
    border-radius: 50%;
    background: #fff;
}

.og-home-score {
    min-width: 52px;
    padding: 10px 7px;
    border-radius: 0;
    background: var(--og-sport-dark);
    clip-path: polygon(18% 0, 82% 0, 100% 24%, 100% 76%, 82% 100%, 18% 100%, 0 76%, 0 24%);
    color: #fff;
    line-height: 1;
}

.og-home-match.is-live {
    background: linear-gradient(90deg, rgba(217, 45, 59, .035), rgba(217, 45, 59, .09), rgba(217, 45, 59, .035));
}

.og-home-match.is-live .og-home-score {
    background: #d92d3b;
    color: #fff;
}

/* Directory, statistics and match-detail cards share the cut-corner signature. */
.og-panel,
.og-directory-card,
.og-fixture,
.og-summary > div {
    border-radius: 3px 20px 3px 20px;
}

.og-directory-card,
.og-fixture {
    border-inline-start: 4px solid var(--og-sport-green);
}

.og-match-scoreboard > div > strong {
    min-width: 120px;
    padding: 10px 18px;
    border-radius: 0;
    clip-path: polygon(13% 0, 87% 0, 100% 25%, 100% 75%, 87% 100%, 13% 100%, 0 75%, 0 25%);
    text-align: center;
}

.og-public thead th:first-child {
    border-start-start-radius: 3px;
}

.og-public thead th:last-child {
    border-start-end-radius: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .og-home-match,
    .og-fixture,
    .og-status.is-live::before,
    .og-match-status.is-live::before,
    .is-live .og-status::before,
    .og-site-bar .og-language-menu summary::after {
        transition: none;
        animation: none;
    }
}

@media (max-width: 720px) {
    .og-public {
        padding: 12px 12px 88px;
    }

    .og-site-bar {
        border-radius: 13px;
        box-shadow: 0 9px 24px rgba(5, 35, 27, .16);
    }

    .og-home-hero,
    .og-hero,
    .og-match-hero {
        border-radius: 4px 24px 4px 24px;
        box-shadow: 0 12px 28px rgba(5, 57, 43, .17);
    }

    .og-home-hero {
        min-height: auto;
    }

    .og-match-competition {
        border-radius: 3px 21px 3px 21px;
    }

    .og-match-competition > header {
        min-height: 62px;
        padding: 10px 13px 10px 17px;
    }

    .og-match-competition > header > a {
        padding: 7px 9px;
    }

    .og-home-match {
        margin: 0 10px;
        padding: 0;
        border-bottom: 1px dashed #c7d8d1;
        border-radius: 0;
        box-shadow: none;
    }

    .og-home-match::before {
        inset-inline-start: -10px;
    }

    .og-home-match::after {
        inset-inline-end: -10px;
    }

    .og-mobile-match-meta {
        border-bottom-style: dashed;
        background: linear-gradient(90deg, var(--og-competition-tint, #edf8f4), #fff);
    }

    [dir="rtl"] .og-mobile-match-meta {
        background: linear-gradient(270deg, var(--og-competition-tint, #edf8f4), #fff);
    }

    .og-mobile-team img {
        padding: 3px;
        border: 1px solid #d8e5df;
        border-radius: 50%;
        background: #fff;
    }

    .og-mobile-team > b {
        border-radius: 0;
        background: var(--og-sport-dark);
        clip-path: polygon(18% 0, 82% 0, 100% 24%, 100% 76%, 82% 100%, 18% 100%, 0 76%, 0 24%);
        color: #fff;
    }

    .og-home-match.is-live .og-mobile-team > b {
        background: #d92d3b;
        color: #fff;
    }

    .og-match-scoreboard > div > strong {
        min-width: 72px;
        padding: 8px 5px;
    }

    .og-panel,
    .og-directory-card,
    .og-fixture,
    .og-summary > div {
        border-radius: 3px 15px 3px 15px;
        box-shadow: 0 5px 17px rgba(14, 48, 38, .065);
    }

    .og-home-match:hover,
    .og-fixture:hover {
        transform: none;
    }
}
