/* ==========================================================================
   Sports Platform — design system (Phase 2)
   - Logical properties only (inline/block) → zero-break RTL/LTR flipping
   - Theme: auto (prefers-color-scheme) | [data-theme="light"] | [data-theme="dark"]
   - Fonts (self-hosted woff2, /public/assets/fonts/, font-display: swap):
       Arabic  → Neo Sans Arabic (+ Somar for any glyph it lacks)
       Latin   → Plus Jakarta Sans (variable 200–800)
       Numbers → Barlow Semi Condensed 400–800 (scores, clocks, stats; tabular digits)
     Bump the ?v= of a font here and in layouts/main.php when that file changes.
   ========================================================================== */

/* Arabic text — every CSS weight maps to a real face (no synthetic bold):
   100–499 Regular · 500–649 Medium (600 included) · 650–900 Bold (700 / 800 included) */
@font-face { font-family: "NeoSansArabic"; src: url("../fonts/NeoSansArabic-Regular.woff2?v=1") format("woff2"); font-weight: 100 499; font-style: normal; font-display: swap; }
@font-face { font-family: "NeoSansArabic"; src: url("../fonts/NeoSansArabic-Medium.woff2?v=1") format("woff2"); font-weight: 500 649; font-style: normal; font-display: swap; }
@font-face { font-family: "NeoSansArabic"; src: url("../fonts/NeoSansArabic-Bold.woff2?v=1") format("woff2"); font-weight: 650 900; font-style: normal; font-display: swap; }
/* Fallback for the rare glyph Neo Sans lacks; a single face for every weight. */
@font-face { font-family: "Somar"; src: url("../fonts/Somar-Regular.woff2?v=1") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Latin text: one variable file covers every weight */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/PlusJakartaSans-Variable.woff2?v=1") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

/* Numbers: scoreboard identity (scores, minutes, stats, tables) */
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/BarlowSemiCondensed-Regular.woff2?v=1") format("woff2"); font-weight: 100 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/BarlowSemiCondensed-Medium.woff2?v=1") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/BarlowSemiCondensed-SemiBold.woff2?v=1") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/BarlowSemiCondensed-Bold.woff2?v=1") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/BarlowSemiCondensed-ExtraBold.woff2?v=1") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }

/* ---------- Tokens (light) ---------- */
:root {
    --font-ar: "NeoSansArabic", "Somar", "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
    --font-en: "Plus Jakarta Sans", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
    --font-num: "Barlow Semi Condensed", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

    --bg: #f3f5fa;
    --surface: #ffffff;
    --surface-2: #f1f4f9;
    --surface-3: #e7ecf4;
    --border: #e2e7f0;
    --text: #0e1626;
    --text-muted: #5d687c;
    --text-faint: #8a94a7;
    --accent: #0fb58a;
    --accent-strong: #08946f;
    --accent-soft: #dcf6ec;
    --accent-solid: #067a5c;
    --on-accent-solid: #ffffff;
    --live: #e5484d;
    --live-soft: #fde8e8;
    --amber: #d98a00;
    --amber-soft: #fdf1d8;
    --extra: #ef6c1a;
    --kick-scored: #12b76a;
    --kick-missed: #e5484d;
    --kick-pending: #b8c0cc;
    --ring-track: #e6ebf2;
    --focus: #2563eb;
    --shadow: 0 1px 2px rgb(14 22 38 / .04), 0 6px 20px rgb(14 22 38 / .06);
    --shadow-lg: 0 12px 40px rgb(14 22 38 / .16);

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --container: 1280px;
    --header-h: 64px;
    color-scheme: light;
}

/* ---------- Tokens (dark) ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0a111e;
        --surface: #111a2b;
        --surface-2: #162034;
        --surface-3: #1d2940;
        --border: #233049;
        --text: #e7ecf6;
        --text-muted: #96a2ba;
        --text-faint: #6b7892;
        --accent: #22d3a6;
        --accent-strong: #5ce6c1;
        --accent-soft: rgb(34 211 166 / .13);
        --accent-solid: #22d3a6;
        --on-accent-solid: #04140f;
        --live: #ff5c61;
        --live-soft: rgb(255 92 97 / .14);
        --amber: #ffb627;
        --amber-soft: rgb(255 182 39 / .14);
        --extra: #ff8a3d;
        --kick-pending: #4a5872;
        --ring-track: #22304a;
        --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 8px 24px rgb(0 0 0 / .25);
        --shadow-lg: 0 16px 48px rgb(0 0 0 / .5);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #0a111e;
    --surface: #111a2b;
    --surface-2: #162034;
    --surface-3: #1d2940;
    --border: #233049;
    --text: #e7ecf6;
    --text-muted: #96a2ba;
    --text-faint: #6b7892;
    --accent: #22d3a6;
    --accent-strong: #5ce6c1;
    --accent-soft: rgb(34 211 166 / .13);
    --accent-solid: #22d3a6;
    --on-accent-solid: #04140f;
    --live: #ff5c61;
    --live-soft: rgb(255 92 97 / .14);
    --amber: #ffb627;
    --amber-soft: rgb(255 182 39 / .14);
    --extra: #ff8a3d;
    --kick-pending: #4a5872;
    --ring-track: #22304a;
    --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 8px 24px rgb(0 0 0 / .25);
    --shadow-lg: 0 16px 48px rgb(0 0 0 / .5);
    color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 93.75%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: calc(var(--sticky-top, var(--header-h)) + var(--space-4)); }
body {
    margin: 0;
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-en);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Every weight in use has a real face: never let the browser fake bold or italics. */
html { font-synthesis: none; }
html[lang="ar"] body { font-family: var(--font-ar); }
img, svg { display: block; max-inline-size: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.svg-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.visually-hidden {
    position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Layout ---------- */
.container { inline-size: 100%; max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
/* One vertical rhythm for every page (symmetry rule — CORE_RULES "Spacing"):
   header → breadcrumbs → content → footer are all separated by the same --page-gap. Components
   never add their own outer margin at the top or bottom of the page. */
:root { --page-gap: 28px; }
@media (max-width: 760px) { :root { --page-gap: 18px; } }
.site-main { flex: 1; padding-block: var(--page-gap); outline: none; }
.skip-link {
    position: absolute; inset-inline-start: var(--space-4); inset-block-start: -100px; z-index: 100;
    padding: var(--space-2) var(--space-4); background: var(--accent); color: #04140f; border-radius: var(--radius-sm); font-weight: 700;
}
.skip-link:focus { inset-block-start: var(--space-2); }

/* ==========================================================================
   Site header
   Desktop: sticky glass bar — brand · navigation (underline indicator, dropdown panels) ·
   search + settings. Phones / tablets (≤ 960 px): menu · brand · settings, NOT sticky, and the
   navigation becomes a side drawer (see the media query below).
   ========================================================================== */
.site-header {
    position: sticky; inset-block-start: 0; z-index: 50;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    backdrop-filter: saturate(170%) blur(16px);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    border-block-end: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    transition: box-shadow .25s ease, background-color .25s ease;
}
/* Brand line: a thin gradient accent on the very top edge. */
.site-header::before {
    content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 2px;
    background: linear-gradient(90deg, var(--accent), #3b82f6 55%, var(--accent));
    opacity: .9;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgb(14 22 38 / .35); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.site-header__bar { display: flex; align-items: center; gap: var(--space-4); min-block-size: var(--header-h); }

/* Brand: text (name + Latin line, both on the start side) or image logo. */
.brand { display: inline-flex; align-items: center; flex: none; border-radius: var(--radius-sm); }
.brand__text { display: grid; justify-items: start; row-gap: 3px; line-height: 1.1; text-align: start; }
.brand__name { font-size: 1.16rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; color: var(--text); }
.brand__latin {
    font-family: var(--font-en); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap;
}
.brand:hover .brand__name { color: var(--accent-strong); }
.brand__name { transition: color .2s ease; }
.brand__logo { block-size: 36px; inline-size: auto; max-inline-size: 180px; object-fit: contain; }
.brand__logo--dark { display: none; }
:root[data-theme="dark"] .brand__logo--light { display: none; }
:root[data-theme="dark"] .brand__logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand__logo--light { display: none; }
    :root:not([data-theme="light"]) .brand__logo--dark { display: block; }
}

/* Drawer-only parts (shown in the mobile drawer). */
.drawer__close, .drawer__head, .search--drawer, .drawer__foot { display: none; }
.drawer__scroll { display: contents; }

/* Navigation — desktop bar */
.main-nav { flex: 1; min-inline-size: 0; }
.main-nav__list { display: flex; align-items: center; gap: 2px; }
.main-nav__item { position: relative; }
.main-nav__row { display: flex; align-items: center; }
.main-nav__link {
    position: relative; display: block; padding: 9px 14px; border-radius: 12px;
    color: var(--text-muted); font-size: .9rem; font-weight: 700; white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}
/* Underline indicator: grows from the centre on hover, full on the current page. */
.main-nav__link::after {
    content: ""; position: absolute; inset-inline: 14px; inset-block-end: 3px; block-size: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), #3b82f6);
    transform: scaleX(0); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.main-nav__link:hover { color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
.main-nav__link:hover::after { transform: scaleX(.45); }
.main-nav__link.is-active, .has-active-child > .main-nav__row > .main-nav__link {
    color: var(--accent-strong); background: var(--accent-soft);
}
.main-nav__link.is-active::after, .has-active-child > .main-nav__row > .main-nav__link::after { transform: scaleX(1); }
.has-dropdown .main-nav__link { padding-inline-end: 6px; }
.has-dropdown .main-nav__link::after { inset-inline-end: 6px; }

.dropdown-toggle {
    display: grid; place-items: center; inline-size: 26px; block-size: 26px; margin-inline-end: 4px;
    border: 0; border-radius: 8px; background: transparent; color: var(--text-muted);
    transition: background-color .2s ease, color .2s ease;
}
.dropdown-toggle:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.dropdown-toggle svg { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Dropdown panel: fades, lifts and scales in from its top edge. */
.dropdown {
    position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: 0; z-index: 60;
    min-inline-size: 230px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 24px 48px -20px rgb(14 22 38 / .35), 0 2px 6px rgb(14 22 38 / .05);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px) scale(.98); transform-origin: top center;
    transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .25s;
}
/* Invisible bridge so the pointer can travel from the link to the panel. */
.dropdown::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: 12px; }
.has-dropdown.is-open > .dropdown {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
@media (hover: hover) and (min-width: 961px) {
    .has-dropdown:hover > .dropdown {
        opacity: 1; visibility: visible; pointer-events: auto; transform: none;
        transition: opacity .2s ease .06s, transform .25s cubic-bezier(.2, .8, .2, 1) .06s, visibility 0s;
    }
    .has-dropdown:hover .dropdown-toggle svg { transform: rotate(180deg); }
}
.dropdown__list { display: grid; gap: 2px; }
.dropdown__link {
    position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px;
    color: var(--text-muted); font-size: .86rem; font-weight: 700;
    transition: background-color .18s ease, color .18s ease, padding .2s ease;
}
.dropdown__link::before {
    content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; flex: none;
    background: var(--border); transition: background-color .18s ease, transform .2s ease;
}
.dropdown__link:hover { background: var(--surface-2); color: var(--text); padding-inline-start: 16px; }
.dropdown__link:hover::before, .dropdown__link.is-active::before { background: var(--accent); transform: scale(1.2); }
.dropdown__link.is-active { color: var(--accent-strong); background: var(--accent-soft); }

/* Actions: search + settings */
.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.icon-btn {
    display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.icon-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.icon-btn:active { transform: scale(.95); }
.icon-btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.icon-btn--sm { inline-size: 32px; block-size: 32px; border-radius: 10px; }
.icon-btn--settings svg { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.icon-btn--settings:hover svg, .icon-btn--settings[aria-expanded="true"] svg { transform: rotate(75deg); }
.nav-toggle { display: none; }
.nav-toggle__bars { display: grid; gap: 4px; inline-size: 18px; }
.nav-toggle__bars span { display: block; block-size: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, opacity .2s ease, inline-size .3s ease; }
.nav-toggle__bars span:nth-child(2) { inline-size: 70%; }
.nav-toggle:hover .nav-toggle__bars span:nth-child(2) { inline-size: 100%; }

.search { position: relative; inline-size: 240px; transition: inline-size .3s cubic-bezier(.2, .8, .2, 1); }
.search:focus-within { inline-size: 290px; }
.search__icon { position: absolute; inset-inline-start: 13px; inset-block-start: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; transition: color .2s ease; }
.search:focus-within .search__icon { color: var(--accent-strong); }
.search__input {
    inline-size: 100%; block-size: 40px; padding-inline: 38px 36px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: .86rem;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.search__input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.search__input::-webkit-search-cancel-button { cursor: pointer; }
.search__kbd {
    position: absolute; inset-inline-end: 10px; inset-block-start: 50%; transform: translateY(-50%);
    display: grid; place-items: center; inline-size: 20px; block-size: 20px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--text-faint); font: 700 .68rem/1 var(--font-en); pointer-events: none;
    transition: opacity .2s ease;
}
.search:focus-within .search__kbd, .search__input:not(:placeholder-shown) ~ .search__kbd { opacity: 0; }

.nav-backdrop { display: none; }

/* ==========================================================================
   Phones / tablets (≤ 960 px): menu · brand · settings; the header scrolls away with the page;
   the navigation slides in from the start side (right in Arabic, left in English) over a
   blurred backdrop. Sub-menus open as accordions that push the next items down.
   ========================================================================== */
@media (max-width: 960px) {
    /* Not sticky on phones, and no glass: backdrop-filter / z-index on the header would make it a
       stacking context and the containing block of the fixed drawer (drawer trapped under the
       backdrop, sized to the header). */
    .site-header { position: relative; z-index: auto; background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .site-header__bar { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: var(--space-3); }
    .nav-toggle { display: grid; }
    .site-header__bar > .brand { justify-self: center; }
    .header-actions { display: contents; }
    .search--header { display: none; }

    .main-nav {
        position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 210;
        inline-size: min(86vw, 360px);
        background: var(--surface); border-inline-end: 1px solid var(--border);
        box-shadow: 0 0 60px -10px rgb(6 10 18 / .45);
        transform: translateX(-100%); visibility: hidden;
        transition: transform .42s cubic-bezier(.22, .9, .25, 1), visibility 0s linear .42s;
    }
    [dir="rtl"] .main-nav { transform: translateX(100%); }
    .main-nav.is-open { transform: none; visibility: visible; transition: transform .42s cubic-bezier(.22, .9, .25, 1), visibility 0s; }

    .drawer__scroll {
        display: flex; flex-direction: column; gap: var(--space-4); block-size: 100%;
        padding: calc(var(--space-5) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
        overflow-y: auto; overscroll-behavior: contain;
    }
    .drawer__head { display: flex; align-items: center; min-block-size: 40px; padding-inline-end: 28px; }
    .brand--compact .brand__name { font-size: 1.05rem; }

    /* Close button floating on the drawer's inner edge. */
    .drawer__close {
        display: grid; place-items: center; position: absolute; z-index: 2;
        inset-block-start: calc(var(--space-5) + env(safe-area-inset-top)); inset-inline-end: -20px;
        inline-size: 40px; block-size: 40px; border: 1px solid var(--border); border-radius: 50%;
        background: var(--surface); color: var(--text); box-shadow: 0 10px 24px -10px rgb(6 10 18 / .45);
        transition: transform .3s cubic-bezier(.2, .8, .2, 1), color .2s ease, border-color .2s ease;
    }
    .drawer__close:hover { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, var(--border)); transform: rotate(90deg); }

    .main-nav .search--drawer, .main-nav .search--drawer:focus-within { display: block; inline-size: 100%; }
    .search--drawer .search__input { block-size: 46px; padding-inline-end: 14px; font-size: .92rem; }

    .main-nav__list { display: grid; gap: 4px; align-items: stretch; }
    .main-nav__item { opacity: 0; transform: translateX(-12px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
    [dir="rtl"] .main-nav__item { transform: translateX(12px); }
    .main-nav.is-open .main-nav__item { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 35ms + 90ms); }
    .main-nav__row { gap: 4px; }
    .main-nav__link {
        flex: 1; display: flex; align-items: center; min-block-size: 48px; padding: 12px 16px; border-radius: 14px;
        font-size: .98rem; color: var(--text);
    }
    .main-nav__link::after { inset-inline: 0 auto; inset-block: 12px; inline-size: 3px; block-size: auto; transform: scaleY(0); }
    .main-nav__link:hover::after { transform: scaleY(.5); }
    .main-nav__link.is-active::after, .has-active-child > .main-nav__row > .main-nav__link::after { transform: scaleY(1); }
    .has-dropdown .main-nav__link { padding-inline-end: 16px; }
    .dropdown-toggle { inline-size: 48px; block-size: 48px; margin: 0; border-radius: 14px; background: var(--surface-2); }
    .has-dropdown.is-open > .main-nav__row > .dropdown-toggle { background: var(--accent-soft); color: var(--accent-strong); }

    /* Accordion: the panel's height animates (0fr → 1fr) and pushes the next items down. */
    .dropdown {
        position: static; display: grid; grid-template-rows: 0fr; min-inline-size: 0; padding: 0;
        border: 0; border-radius: 0; background: transparent; box-shadow: none;
        opacity: 1; visibility: visible; pointer-events: auto; transform: none;
        transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1);
    }
    .dropdown::before { display: none; }
    .dropdown__list { overflow: hidden; min-block-size: 0; margin-inline-start: 18px; padding-inline-start: 12px; border-inline-start: 2px solid var(--border); }
    .has-dropdown.is-open > .dropdown { grid-template-rows: 1fr; transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1); }
    .has-dropdown.is-open > .dropdown > .dropdown__list { padding-block: 6px; }
    .dropdown__link { padding: 11px 12px; font-size: .92rem; }

    .drawer__foot { display: grid; gap: var(--space-2); margin-block-start: auto; padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
    .drawer__foot-label { color: var(--text-muted); font-size: .8rem; font-weight: 700; }

    .nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 200;
        background: rgb(6 10 18 / .38);
        backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
        opacity: 0; transition: opacity .35s ease;
    }
    .nav-backdrop.is-visible { opacity: 1; }
}

/* ---------- Settings panel ---------- */
.settings-panel {
    position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: max(var(--space-4), calc((100vw - var(--container)) / 2 + var(--space-4)));
    z-index: 70; inline-size: min(340px, calc(100vw - 32px)); padding: var(--space-4);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    display: grid; gap: var(--space-4);
}
.settings-panel__head { display: flex; align-items: center; justify-content: space-between; }
.settings-panel__title { font-size: 1rem; font-weight: 800; }
.settings-group { display: grid; gap: var(--space-2); }
.settings-group__label { font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.segmented { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 12px; }
.segmented__item {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-block-size: 36px; padding-inline: var(--space-2); border: 0; border-radius: 9px; background: transparent;
    color: var(--text-muted); font-weight: 700; font-size: .88rem; text-align: center;
}
.segmented__item:hover { color: var(--text); }
.segmented__item.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.select {
    inline-size: 100%; min-block-size: 40px; padding-inline: var(--space-3);
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}

/* ---------- Time-zone picker (settings panel): custom listbox, opens in place ---------- */
.tzpick { position: relative; }
.tzpick__btn {
    display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-block-size: 48px;
    padding: 6px var(--space-3); border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
    color: var(--text); text-align: start; cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.tzpick__btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.tzpick.is-open .tzpick__btn { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.tzpick__label { flex: 1; min-inline-size: 0; display: grid; gap: 1px; }
.tzpick__name { font-weight: 700; font-size: .9rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tzpick__meta {
    font-family: var(--font-num); font-size: .78rem; font-weight: 600; color: var(--text-muted); line-height: 1.3;
    text-align: start; unicode-bidi: plaintext; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tzpick__code {
    flex: none; display: inline-grid; place-items: center; inline-size: 34px; block-size: 24px; border-radius: 7px;
    background: var(--surface-3); color: var(--text-muted); font-family: var(--font-num); font-size: .74rem; font-weight: 800; letter-spacing: .04em;
}
.tzpick__code--auto { background: var(--accent-soft); color: var(--accent-strong); }
.tzpick__code svg { display: block; }
.tzpick__chevron { flex: none; color: var(--text-muted); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.tzpick.is-open .tzpick__chevron { transform: rotate(180deg); color: var(--accent-strong); }

/* The sub-menu: animated height (grid 0fr → 1fr), pushes the rest of the panel down. */
.tzpick__drop {
    display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
    transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, visibility 0s linear .32s;
}
.tzpick.is-open .tzpick__drop {
    grid-template-rows: 1fr; opacity: 1; visibility: visible;
    transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease .05s, visibility 0s;
}
.tzpick__list {
    min-block-size: 0; overflow: hidden auto; max-block-size: min(330px, 46dvh);
    margin-block-start: 6px; padding: 4px; border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface); box-shadow: var(--shadow);
    scrollbar-width: thin; scrollbar-color: var(--accent) transparent; outline: none;
}
.tzpick.is-open .tzpick__list { overflow-y: auto; }
.tzpick__list:focus-visible { box-shadow: var(--shadow), 0 0 0 2px var(--focus); }
.tzpick__opt {
    position: relative; display: flex; align-items: center; gap: var(--space-3); min-block-size: 46px;
    padding: 5px var(--space-2) 5px var(--space-3); border-radius: 10px; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.tzpick__opt + .tzpick__opt { margin-block-start: 2px; }
.tzpick__opt:first-child { margin-block-end: 4px; }
.tzpick__opt:first-child::after {
    content: ""; position: absolute; inset-inline: var(--space-3); inset-block-end: -4px; block-size: 1px; background: var(--border);
}
.tzpick__opt.is-active { background: var(--surface-2); }
.tzpick__opt.is-selected { background: var(--accent-soft); color: var(--accent-solid); }
.tzpick__opt.is-selected .tzpick__code { background: var(--accent); color: var(--on-accent-solid); }
:root[data-theme="dark"] .tzpick__opt.is-selected { color: var(--accent-strong); }
.tzpick__check { flex: none; color: var(--accent-strong); opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease; }
.tzpick__opt.is-selected .tzpick__check { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tzpick__opt.is-selected { color: var(--accent-strong); }
}
@media (prefers-reduced-motion: reduce) {
    .tzpick__drop, .tzpick.is-open .tzpick__drop, .tzpick__chevron { transition: none; }
}

/* ---------- Breadcrumbs: a slim box in the entity-nav family ----------
   The separator is a drawn chevron (mask) pointing to the reading direction: toward the left in
   Arabic, toward the right in English (a "›" glyph is bidi-mirrored by the browser, so it can't be
   trusted to point the right way). On phones the trail stays on one line and scrolls; the current
   page (last item) is visible first. */
.breadcrumbs { padding-block-start: var(--page-gap); }
.breadcrumbs__list {
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    display: flex; align-items: center; gap: 2px; margin: 0; padding: 6px 8px; list-style: none;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
    box-shadow: 0 1px 2px rgb(14 22 38 / .03);
    font-size: .82rem; font-weight: 600; color: var(--text-muted); white-space: nowrap;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.breadcrumbs__list::-webkit-scrollbar { display: none; }
.breadcrumbs__list li { display: inline-flex; align-items: center; flex: none; min-inline-size: 0; }
.breadcrumbs__list li:not(:last-child)::after {
    content: ""; inline-size: 12px; block-size: 12px; margin-inline: 4px; flex: none;
    background: var(--text-faint); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
}
[dir="rtl"] .breadcrumbs__list li:not(:last-child)::after { transform: scaleX(-1); }
.breadcrumbs__list a {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 9px; color: var(--text-muted);
    transition: background-color .15s ease, color .15s ease;
}
.breadcrumbs__list a:hover { background: var(--surface-2); color: var(--accent-strong); }
.breadcrumbs__home svg { color: var(--accent); flex: none; }
.breadcrumbs__list [aria-current="page"] {
    display: inline-block; max-inline-size: 42ch; padding: 5px 10px; border-radius: 9px;
    background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 560px) {
    .breadcrumbs__home span { display: none; }
    .breadcrumbs__list [aria-current="page"] { max-inline-size: 60vw; }
}

/* ---------- Home grid: matches 40 % · news 60 % (matches first in the DOM → right in RTL) ---------- */
.home-grid {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas: "fx news" "list news"; grid-template-rows: auto 1fr;
    column-gap: var(--page-gap); row-gap: 0; align-items: start;
}
.home-grid > .fixtures-col { grid-area: fx; }
.home-grid > .news-col { grid-area: news; }
.home-grid > .fixtures { grid-area: list; }
.home-grid--solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fx" "list"; }
.home-grid--solo > .fixtures-col, .home-grid--solo > .fixtures { inline-size: 100%; max-inline-size: 820px; margin-inline: auto; }
.news-col { position: sticky; inset-block-start: calc(var(--sticky-top, var(--header-h)) + var(--space-4)); display: grid; gap: var(--space-3); }
.news-col__title { font-size: 1rem; font-weight: 800; }

/* ==========================================================================
   Fixtures header
   1. title + selected day · "back to today" + calendar
   2. sticky control bar: day strip + state filters (pinned under the site header)
   ========================================================================== */
.fx-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-block-end: var(--space-3); }
.fixtures-col { min-inline-size: 0; }
.fx-head__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.fx-head__titles { min-inline-size: 0; }
.fx-head__title { font-size: 1.2rem; font-weight: 800; line-height: 1.35; letter-spacing: -.005em; }
.fx-head__date { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-block-start: 4px; color: var(--text-muted); font-size: .84rem; }
.fx-head__rel {
    padding: 1px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text);
    font-size: .74rem; font-weight: 800; line-height: 1.6;
}
.fx-head__rel.is-today { background: var(--accent-soft); color: var(--accent-strong); }
.fx-head__tools { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.fx-tool {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; block-size: 40px; padding-inline: 12px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-muted);
    font-size: .8rem; font-weight: 800; white-space: nowrap; cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.fx-tool--icon { inline-size: 40px; padding: 0; }
.fx-tool:hover, .fx-tool[aria-expanded="true"] {
    color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft);
}
.fx-tool--today { color: var(--accent-strong); }

/* Control bar: day strip + filters (scrolls with the page — not pinned). */
.fx-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-block-end: var(--space-3); }

/* Day strip */
.daystrip {
    display: flex; align-items: stretch; gap: 4px; padding: 5px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
}
.daystrip__arrow {
    flex: none; display: grid; place-items: center; inline-size: 34px; border-radius: 12px; color: var(--text-muted);
    transition: color .15s ease, background-color .15s ease;
}
.daystrip__arrow:hover { color: var(--text); background: var(--surface-2); }
[dir="rtl"] .daystrip__arrow svg, .daystrip__arrow--next svg { transform: scaleX(-1); }
[dir="rtl"] .daystrip__arrow--next svg { transform: none; }
.daystrip__days {
    flex: 1; min-inline-size: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px;
    scrollbar-width: none; overscroll-behavior-x: contain;
}
.daystrip__days::-webkit-scrollbar { display: none; }
.daystrip__item { min-inline-size: 0; }
.daystrip__day {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 1px;
    block-size: 100%; min-block-size: 54px; padding: 5px 2px; border-radius: 13px;
    color: var(--text-muted); line-height: 1.15; text-align: center;
    transition: background-color .15s ease, color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.daystrip__day:hover { background: var(--surface-2); color: var(--text); }
.daystrip__day:active { transform: scale(.97); }
.daystrip__top { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; font-weight: 700; }
.daystrip__num { font-family: var(--font-num); font-size: 1.12rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.daystrip__month { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; color: var(--text-faint); }
.daystrip__day.is-relative .daystrip__top { color: var(--text); font-weight: 800; }
/* Today: brand-coloured number + a dot, whatever day is selected. */
.daystrip__day.is-today .daystrip__num { color: var(--accent-strong); }
.daystrip__day.is-today::after {
    content: ""; position: absolute; inset-block-start: 5px; inset-inline-end: 7px;
    inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--accent);
}
.daystrip__day.is-active {
    background: var(--accent-solid); color: var(--on-accent-solid);
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.daystrip__day.is-active .daystrip__top,
.daystrip__day.is-active .daystrip__num,
.daystrip__day.is-active .daystrip__month { color: inherit; }
.daystrip__day.is-active .daystrip__month { opacity: .8; }
.daystrip__day.is-active::after { background: currentColor; }
.daystrip__day.is-pending { animation: day-pending 1s ease-in-out infinite; }
@keyframes day-pending { 50% { opacity: .55; } }

/* State filters: segmented control with live counts */
.fx-filters {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 4px;
    background: var(--surface-3); border-radius: 14px;
}
.fx-filter {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-inline-size: 0; min-block-size: 34px;
    padding-inline: 6px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted);
    font-size: .8rem; font-weight: 800; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.fx-filter:hover { color: var(--text); }
.fx-filter.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(14 22 38 / .08), 0 4px 12px rgb(14 22 38 / .07); }
.fx-filter__label { overflow: hidden; text-overflow: ellipsis; }
.fx-filter__count {
    flex: none; min-inline-size: 20px; padding-inline: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent);
    font-family: var(--font-num); font-size: .72rem; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.fx-filter.is-active .fx-filter__count { background: var(--accent-soft); color: var(--accent-strong); }
.fx-filter__dot { flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--text-faint); }
.fx-filter--live.has-live { color: var(--live); }
.fx-filter--live.has-live .fx-filter__dot { background: var(--live); animation: pulse 1.6s infinite; }
.fx-filter--live.has-live .fx-filter__count { background: var(--live-soft); color: var(--live); }

/* Generic pill filters (standings: all / home / away). */
.filters { display: flex; gap: var(--space-2); margin-block-end: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters__item {
    display: inline-flex; align-items: center; gap: 6px; min-block-size: 34px; padding-inline: var(--space-3);
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted);
    font-weight: 700; font-size: .84rem; white-space: nowrap;
}
.filters__item:hover { color: var(--text); }
.filters__item.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }

.live-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 var(--live); animation: pulse 1.6s infinite; flex: none; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ==========================================================================
   Calendar — custom popover (desktop) / bottom sheet (phones), built by app.js
   ========================================================================== */
.fx-cal { position: relative; }
.cal {
    position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
    inline-size: 324px; padding: 14px; display: grid; gap: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg);
    transform-origin: top; animation: cal-in .16s ease-out;
}
[dir="rtl"] .cal { transform-origin: top left; }
@keyframes cal-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cal__title { font-size: .95rem; font-weight: 800; }
.cal__close, .cal__nav {
    display: grid; place-items: center; inline-size: 32px; block-size: 32px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text-muted); transition: background-color .15s ease, color .15s ease;
}
.cal__close:hover, .cal__nav:hover { background: var(--surface-2); color: var(--text); }
.cal__nav:disabled { opacity: .3; cursor: not-allowed; }
[dir="rtl"] .cal__nav svg, .cal__nav--next svg { transform: scaleX(-1); }
[dir="rtl"] .cal__nav--next svg { transform: none; }
.cal__quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cal__chip {
    min-block-size: 32px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
    color: var(--text); font-size: .78rem; font-weight: 800; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.cal__chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent-strong); }
.cal__chip.is-selected { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); }
.cal__month { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cal__label { font-size: .9rem; font-weight: 800; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.cal__wd { padding-block: 4px; font-size: .68rem; font-weight: 700; color: var(--text-faint); }
.cal__day {
    position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 12px;
    background: transparent; color: var(--text); font-family: var(--font-num); font-size: .9rem; font-weight: 700;
    font-variant-numeric: tabular-nums; transition: background-color .12s ease, color .12s ease, box-shadow .15s ease;
}
.cal__day:hover:not(:disabled) { background: var(--surface-2); }
.cal__day.is-out { color: var(--text-faint); }
.cal__day.is-today { color: var(--accent-strong); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); }
.cal__day.is-today::after {
    content: ""; position: absolute; inset-block-end: 5px; inline-size: 4px; block-size: 4px; border-radius: 50%; background: currentColor;
}
.cal__day.is-selected {
    background: var(--accent-solid); color: var(--on-accent-solid); box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.cal__day:disabled { opacity: .3; cursor: not-allowed; }
.cal__day:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cal__hint { color: var(--text-faint); font-size: .7rem; text-align: center; }
.cal-backdrop { display: none; }

/* ==========================================================================
   Fixtures list
   ========================================================================== */
.fixtures-message { margin-block-end: var(--space-3); color: var(--text-muted); font-size: .88rem; }
.fixtures { display: grid; gap: var(--space-3); transition: opacity .2s ease; }

/* Matches list as its own scroll area — only while matches and news sit side by side
   (desktop, news column present). Height = the full screen under the sticky site header, so
   once the page reaches the list it fills the rest of the viewport exactly.
   Transparent (the cards keep their own surfaces), thin scrollbar in the brand colour, soft
   fades on the edges that still hide content (--fade-* set by app.js). Phones / tablets and
   pages without news keep the natural full-length list. */
@media (min-width: 961px) {
    .home-grid:not(.home-grid--solo) > .fixtures {
        --fade-top: 0px;
        --fade-bottom: 0px;
        max-block-size: calc(100vh - var(--sticky-top, var(--header-h)) - var(--space-4));
        max-block-size: calc(100dvh - var(--sticky-top, var(--header-h)) - var(--space-4));
        min-block-size: 360px;
        overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: auto;
        align-content: start;
        margin-inline: -8px; padding: 2px 8px 12px; scroll-padding-block: 8px;
        background: transparent; border-radius: var(--radius-lg);
        scrollbar-width: thin; scrollbar-color: var(--accent) transparent; scrollbar-gutter: stable;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
    }
    .home-grid:not(.home-grid--solo) > .fixtures::-webkit-scrollbar { inline-size: 6px; }
    .home-grid:not(.home-grid--solo) > .fixtures::-webkit-scrollbar-track { background: transparent; }
    .home-grid:not(.home-grid--solo) > .fixtures::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
    .home-grid:not(.home-grid--solo) > .fixtures::-webkit-scrollbar-thumb:hover { background: var(--accent-strong); }
    .home-grid:not(.home-grid--solo) > .fixtures.has-fade-top { --fade-top: 22px; }
    .home-grid:not(.home-grid--solo) > .fixtures.has-fade-bottom { --fade-bottom: 28px; }
    .home-grid:not(.home-grid--solo) > .fixtures:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
}
.fixtures[aria-busy="true"] { opacity: .45; pointer-events: none; }

/* State cards */
.state-card {
    display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-5);
    background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); text-align: center;
}
.state-card--soft { padding: var(--space-5); }
.state-card__title { font-weight: 800; }
.state-card__body { color: var(--text-muted); font-size: .88rem; max-inline-size: 48ch; }
.state-card--error .state-card__title { color: var(--live); }

/* Competition block */
.league { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.league__head {
    display: flex; align-items: center; gap: var(--space-2); padding: 9px var(--space-4);
    background: var(--surface-2); border-block-end: 1px solid var(--border);
}
.league__logo { inline-size: 22px; block-size: 22px; object-fit: contain; flex: none; }
.league__name { font-size: .86rem; font-weight: 800; display: flex; align-items: baseline; gap: var(--space-2); min-inline-size: 0; flex-wrap: wrap; }
.league__country { font-size: .72rem; font-weight: 600; color: var(--text-faint); }
.league__round { margin-inline-start: auto; font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.league__live { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: var(--live-soft); color: var(--live); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.league__round + .league__live, .league__live:first-of-type { margin-inline-start: var(--space-2); }
.league__name + .league__live { margin-inline-start: auto; }
.league__toggle { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); flex: none; }
.league__toggle:hover { background: var(--surface-3); color: var(--text); }
.league__toggle svg { transition: transform .2s ease; }
.league.is-collapsed .league__toggle svg { transform: rotate(-90deg); }
[dir="rtl"] .league.is-collapsed .league__toggle svg { transform: rotate(90deg); }
.league.is-collapsed .league__matches { display: none; }
.league.is-filtered-out { display: none; }

/* ==========================================================================
   Match card — one component (home, competition and team fixtures / results)
   [name logo] [status · score / kick-off / ring] [logo name]
   Teams are horizontal (logo next to the centre) except while live: stacked.
   ========================================================================== */
.match {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "home center away" "pens pens pens";
    align-items: center; align-content: center; column-gap: var(--space-3);
    padding: 12px var(--space-4); min-block-size: 76px;
    border-block-end: 1px solid var(--border);
    transition: background-color .15s ease;
}
.match:last-child { border-block-end: 0; }
.match:hover { background: var(--surface-2); }
.match.is-filtered-out { display: none; }
.match.is-flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }

.match__team { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
/* Home sits on the start side: reversed so its logo touches the centre; both pack toward it. */
.match__team--home { grid-area: home; flex-direction: row-reverse; text-align: end; }
.match__team--away { grid-area: away; text-align: start; }
.match__crest { position: relative; display: inline-grid; place-items: center; flex: none; }
.match__logo { inline-size: 28px; block-size: 28px; object-fit: contain; flex: none; }
.match__name-row { display: inline-flex; align-items: center; min-inline-size: 0; }
.match__name {
    font-size: .6875rem; font-weight: 700; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.match__team.is-winner .match__name { font-weight: 800; }
.match__team.is-loser .match__name { color: var(--text-muted); font-weight: 600; }
.red-card {
    flex: none; display: inline-grid; place-items: center; inline-size: 10px; block-size: 14px; border-radius: 2px;
    background: var(--live); color: #fff; font-size: .68rem; font-weight: 800; font-family: var(--font-num);
}
/* Match card: the red card sits on the crest's top outer corner (identical on both sides, mirrored),
   tilted like a referee card, with a ring in the card colour so it reads on any logo. */
.match__crest .red-card {
    position: absolute; z-index: 1; inset-block-start: -4px; inset-inline-start: -5px;
    inline-size: 10px; block-size: 13px; border-radius: 2px; font-size: .56rem; line-height: 1;
    box-shadow: 0 0 0 2px var(--surface); transform: rotate(-10deg);
}
/* Home is laid out reversed: its score-side corner is the inline end. */
.match__team--home .match__crest .red-card { inset-inline-start: auto; inset-inline-end: -5px; transform: rotate(10deg); }
.match__crest .red-card[hidden] { display: none; }

/* Centre */
.match__center { grid-area: center; display: grid; justify-items: center; align-content: center; gap: 3px; min-inline-size: 84px; text-align: center; }
.match__main { display: flex; align-items: center; justify-content: center; gap: 10px; }
.match__goals {
    min-inline-size: 12px; font-family: var(--font-num); font-weight: 800; font-size: 20px; line-height: 1; text-align: center;
    font-variant-numeric: tabular-nums;
}
.match__goals.is-winner { color: var(--accent-strong); }
.match__sep { color: var(--text-faint); font-family: var(--font-num); font-size: 1.1rem; font-weight: 700; line-height: 1; }
.match__status { font-size: .7rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; line-height: 1.2; }
.match__kickoff {
    display: inline-block; padding: 5px 12px; border-radius: 10px; background: var(--surface-2);
    font-family: var(--font-num); font-weight: 800; font-size: 1rem; white-space: nowrap; direction: ltr;
}
html[lang="ar"] .match__kickoff { font-family: var(--font-ar); }
.match__agg { font-size: .68rem; color: var(--text-faint); white-space: nowrap; }

/* Visibility by state */
.match[data-state="upcoming"] .match__status,
.match:not([data-state="upcoming"]) .match__kickoff,
.match:not([data-state="live"]) .ring,
.match:not([data-state="live"]) .added-time,
.match:not([data-state="upcoming"]) .countdown,
.match:not([data-state="upcoming"]) .lineups-chip,
.match:not([data-state="upcoming"]) .match__lineups,
.match[data-state="upcoming"] .match__goals,
.match[data-state="upcoming"] .match__sep,
.match[data-state="live"] .match__sep,
.match[data-phase="postponed"] .match__goals, .match[data-phase="postponed"] .match__sep,
.match[data-phase="cancelled"] .match__goals, .match[data-phase="cancelled"] .match__sep { display: none; }

.match[data-state="live"] .match__status { color: var(--live); }
.match[data-state="live"] .match__status::before {
    content: ""; display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-end: 5px; border-radius: 50%;
    background: currentColor; vertical-align: middle; animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .25; } }
.match[data-state="finished"] .match__status {
    padding: 1px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: .68rem;
}
.match[data-phase="half_time"] .match__status,
.match[data-phase="et_break"] .match__status,
.match[data-phase="extra_break"] .match__status,
.match[data-phase="penalties"] .match__status { color: var(--amber); }
.match[data-phase="postponed"] .match__status,
.match[data-phase="cancelled"] .match__status,
.match[data-phase="interrupted"] .match__status {
    /* Same footprint as the kick-off pill: one clear state instead of a tiny label. */
    display: inline-block; padding: 5px 12px; border-radius: 10px;
    color: var(--amber); background: var(--amber-soft); font-size: .86rem; font-weight: 800; line-height: 1.35;
}
.match[data-phase="cancelled"] .match__status { color: var(--live); background: var(--live-soft); }

/* Live: teams stack (logo over name) so the clock ring has the centre. */
.match[data-state="live"] { min-block-size: 96px; }
.match[data-state="live"] .match__team { flex-direction: column; justify-content: center; gap: 6px; text-align: center; }
.match[data-state="live"] .match__logo { inline-size: 34px; block-size: 34px; }
.match[data-state="live"] .match__name-row { justify-content: center; }

/* ---------- Circular progress ring (centre) ---------- */
.ring { position: relative; inline-size: 54px; block-size: 54px; --ring-color: var(--accent); }
/* Live minute ring (match card + match page): fills from 12 o'clock, clockwise in Arabic,
   counter-clockwise in English. The countdown rings (.cd-ring) are not affected. */
.ring__svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg) scaleY(-1); }
[dir="rtl"] .ring__svg { transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--ring-track); stroke-width: 2.4; }
.ring__value {
    fill: none; stroke: var(--ring-color); stroke-width: 2.4; stroke-linecap: round;
    transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .2, 1), stroke .3s ease;
}
.ring__time {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--font-num); font-size: .82rem; font-weight: 800; letter-spacing: -.01em; direction: ltr; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.match[data-phase="half_time"] .ring,
.match[data-phase="et_break"] .ring,
.match[data-phase="extra_break"] .ring,
.match[data-phase="penalties"] .ring { --ring-color: var(--amber); }
.match[data-phase="extra_first"] .ring,
.match[data-phase="extra_second"] .ring { --ring-color: var(--extra); }
.match[data-running="1"] .ring__track { stroke: color-mix(in srgb, var(--ring-color) 16%, var(--ring-track)); }
.added-time {
    color: var(--live); font-family: var(--font-num); font-size: .76rem; font-weight: 800; direction: ltr; white-space: nowrap;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.countdown {
    /* Floats on the card's top corner opposite the lineups badge: never pushes the centre column. */
    position: absolute; z-index: 2; inset-block-start: 6px;
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft);
    font-size: .68rem; font-weight: 700; color: var(--accent-strong); white-space: nowrap;
    direction: ltr; font-variant-numeric: tabular-nums; letter-spacing: .02em;
    transition: color .3s ease, background-color .3s ease;
}
/* Physical sides: the chip itself is direction:ltr (digits), so logical insets would flip. */
[dir="rtl"] .countdown { right: 8px; }
[dir="ltr"] .countdown { left: 8px; }
.countdown::before {
    content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; opacity: .8;
}
/* Last 30 minutes before kick-off: red, pulsing. */
.countdown.is-soon { color: var(--live); background: var(--live-soft); animation: countdown-pulse 1.6s ease-in-out infinite; }
.countdown.is-soon::before { animation: blink 1s ease-in-out infinite; }
@keyframes countdown-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 35%, transparent); }
    50% { box-shadow: 0 0 0 5px transparent; }
}

/* Lineups — list cards: small chip under the kick-off */
.lineups-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-strong); font-size: .68rem; font-weight: 800; white-space: nowrap;
}
.lineups-chip--expected { background: color-mix(in srgb, var(--live) 9%, transparent); color: color-mix(in srgb, var(--live) 78%, var(--text-muted)); }

/* Lineups — home cards: floating badge on the card's edge
   (faded red = predicted lineups, brand green = official lineups). */
.match__lineups {
    position: absolute; z-index: 2; inset-block-start: 50%; inset-inline-end: 6px; transform: translateY(-50%);
    display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 9px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 8px rgb(14 22 38 / .08);
}
.match__lineups svg { inline-size: 16px; block-size: 16px; }
.match__lineups--expected {
    color: color-mix(in srgb, var(--live) 62%, var(--surface));
    background: color-mix(in srgb, var(--live) 7%, var(--surface));
    border-color: color-mix(in srgb, var(--live) 22%, var(--border));
}
.match__lineups--confirmed {
    color: var(--accent-strong);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
/* Keep the away name clear of the badge without moving the centre column. */
.match--home[data-state="upcoming"]:has(.match__lineups:not([hidden])) .match__team--away { padding-inline-end: 26px; }

/* ---------- Penalty shootout ---------- */
.match__pens {
    grid-area: pens; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
    gap: var(--space-3); margin-block-start: var(--space-3); padding-block-start: var(--space-2); border-block-start: 1px dashed var(--border);
}
.kicks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.kick { inline-size: 14px; block-size: 14px; }
.kick--scored { color: var(--kick-scored); }
.kick--missed { color: var(--kick-missed); }
.kick--pending { color: var(--kick-pending); }
.kick.is-new { animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.pens-score { display: grid; justify-items: center; line-height: 1.2; }
.pens-score__label { font-size: .68rem; font-weight: 700; color: var(--text-muted); }
.pens-score__value { font-family: var(--font-num); font-weight: 800; font-size: .95rem; }

/* ---------- Buttons ---------- */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: 42px;
    padding-inline: var(--space-5); border: 0; border-radius: 999px; background: var(--accent); color: #04140f; font-weight: 800;
}
.button:hover { background: var(--accent-strong); }
.button--ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.button--ghost:hover { background: var(--surface-2); border-color: var(--accent); }

/* ---------- Error page ---------- */
.error-page { display: grid; justify-items: center; gap: var(--space-3); padding-block: var(--space-7); text-align: center; }
.error-page__code { font-family: var(--font-num); font-size: clamp(4rem, 3rem + 6vw, 7rem); font-weight: 800; line-height: 1; color: var(--accent); }
.error-page__title { font-size: 1.5rem; font-weight: 800; }
.error-page__body { max-inline-size: 52ch; color: var(--text-muted); margin-block-end: var(--space-3); }


/* ---------- Image pipeline placeholders ---------- */
.img-ph { background: var(--surface-2); }
.img-ph.is-loaded { background: transparent; }
img.is-fallback { object-fit: contain; background: var(--surface-2); }
.img-empty { display: block; inline-size: 100%; block-size: 100%; background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); }
.match__logo.img-ph, .league__logo.img-ph, .team-cell__logo.img-ph, .entity-chip__img.img-ph, .comp-card__img.img-ph { border-radius: 50%; }

/* ---------- Section heads ---------- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-3); }
.section-head__title { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 1.05rem; font-weight: 800; }
.section-head__title svg { color: var(--accent); }
.section-head__more { font-size: .85rem; font-weight: 700; color: var(--accent-strong); }
.section-head__more:hover { text-decoration: underline; }
.page-head { display: grid; gap: var(--space-1); margin-block: 0 var(--space-4); }
.page-head__title { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 800; line-height: 1.3; }
.page-head__meta { color: var(--text-muted); font-size: .9rem; }

/* ---------- League head link ---------- */
.league__link { display: inline-flex; align-items: center; gap: var(--space-2); min-inline-size: 0; color: inherit; }
a.league__link:hover .league__name { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- News cards ---------- */
.news-stack { display: grid; gap: var(--space-3); }
.news-card { position: relative; display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.news-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.news-card__img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .4s ease; }
.news-card:hover .news-card__img { transform: scale(1.04); }
.news-card__body { display: grid; gap: 6px; padding: var(--space-3) var(--space-4) var(--space-4); align-content: start; }
.news-card__category { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .72rem; font-weight: 800; }
.news-card__title { font-size: 1rem; font-weight: 800; line-height: 1.45; }
.news-card__title a::after { content: ""; position: absolute; inset: 0; }
.news-card__title a:hover { color: var(--accent-strong); }
.news-card__excerpt { color: var(--text-muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card__date { color: var(--text-faint); font-size: .78rem; }
.news-card--lead .news-card__title { font-size: 1.15rem; }
.news-card--row { grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; border-radius: var(--radius); }
.news-card--row .news-card__media { aspect-ratio: auto; block-size: 100%; min-block-size: 76px; }
.news-card--row .news-card__body { padding: 10px var(--space-3); gap: 4px; }
.news-card--row .news-card__title { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.news-col--home { position: static; }
.news-col--home .news-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.news-col--home .news-card--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.news-col--home .news-card--lead .news-card__media { aspect-ratio: 16 / 10; }
.news-col--home .news-card--lead .news-card__body { padding: var(--space-4) var(--space-5); align-content: center; }
.news-col--home .news-card--card .news-card__title { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-col--home .news-card--card .news-card__excerpt { display: none; }
@media (max-width: 760px) {
    .news-col--home .news-card--lead { grid-template-columns: minmax(0, 1fr); }
    .news-col--home .news-card--lead .news-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
}
@media (max-width: 380px) {
    .news-col--home .news-stack { grid-template-columns: minmax(0, 1fr); }
}
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.news-grid > .news-card--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.news-grid > .news-card--lead .news-card__media { aspect-ratio: 16 / 9; }
.news-grid > .news-card--lead .news-card__body { padding: var(--space-5); align-content: center; }
.news-grid > .news-card--lead .news-card__title { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
.news-grid--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.chips { display: flex; gap: var(--space-2); margin-block-end: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips__item { display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; padding-inline: var(--space-3); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-weight: 700; font-size: .88rem; white-space: nowrap; }
.chips__item:hover { color: var(--text); border-color: var(--accent); }
.chips__item.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }
.chips__count { font-family: var(--font-num); font-size: .72rem; opacity: .7; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-6); }
.pagination__item { display: inline-grid; place-items: center; min-inline-size: 40px; min-block-size: 40px; padding-inline: var(--space-3); border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-weight: 700; }
.pagination__item:hover { border-color: var(--accent); }
.pagination__item.is-active { background: var(--accent); border-color: var(--accent); color: #04140f; }

/* ---------- Content pages (article, championship) ---------- */
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--page-gap); align-items: start; }
.page-grid--full { grid-template-columns: minmax(0, 1fr); }
.content-col { min-inline-size: 0; }

.tag { padding: 4px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: .85rem; font-weight: 600; }
.tag:hover { color: var(--accent-strong); background: var(--accent-soft); }

.entity-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.entity-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .86rem; font-weight: 700; }
[dir="rtl"] .entity-chip { padding: 4px 6px 4px 12px; }
.entity-chip__link { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.entity-chip__link:hover { color: var(--accent-strong); }
.entity-chip__img { inline-size: 24px; block-size: 24px; object-fit: contain; }

.related { display: grid; gap: var(--space-3); }

/* Rich text */
.prose { font-size: 1.06rem; line-height: 1.9; overflow-wrap: anywhere; }
.prose > * + * { margin-block-start: 1em; }
.prose h2 { font-size: 1.3rem; font-weight: 800; line-height: 1.4; margin-block-start: 1.6em; }
.prose h3 { font-size: 1.18rem; font-weight: 800; margin-block-start: 1.4em; }
.prose h4 { font-size: 1.05rem; font-weight: 800; }
.prose a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-block-start: .4em; }
.prose blockquote { margin-inline: 0; padding: var(--space-3) var(--space-4); border-inline-start: 4px solid var(--accent); background: var(--surface-2); border-radius: var(--radius-sm); font-weight: 600; }
.prose figure { margin-inline: 0; }
.prose img { inline-size: auto; max-inline-size: 100%; block-size: auto; border-radius: var(--radius); }
.prose figure { text-align: center; }
.prose figcaption:empty { display: none; }
.prose figcaption { color: var(--text-muted); font-size: .85rem; margin-block-start: var(--space-2); }
.prose hr { border: 0; border-block-start: 1px solid var(--border); margin-block: 2em; }
.prose-table { overflow-x: auto; }
.prose table { inline-size: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: 8px 12px; border: 1px solid var(--border); text-align: start; }
.prose th { background: var(--surface-2); }
.static-page { max-inline-size: 820px; margin-inline: auto; }

/* ---------- Championship / standings ---------- */
.entity-head { display: flex; align-items: center; gap: var(--space-4); margin-block-end: var(--space-5); }
.entity-head__logo { inline-size: 68px; block-size: 68px; object-fit: contain; flex: none; border-radius: 16px; }
.entity-head__title { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 800; line-height: 1.3; }
.entity-head__meta { color: var(--text-muted); }
.entity-intro { margin-block-end: var(--space-5); }
.standings { margin-block-end: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.standings__group { padding: 10px var(--space-4); background: var(--surface-2); border-block-end: 1px solid var(--border); font-size: .95rem; font-weight: 800; }
.standings__scroll { overflow-x: auto; }
.standings__table { inline-size: 100%; border-collapse: collapse; font-size: .9rem; font-family: var(--font-num); }
html[lang="ar"] .standings__table { font-family: var(--font-ar); }
.standings__table th, .standings__table td { padding: 10px 8px; text-align: center; border-block-end: 1px solid var(--border); white-space: nowrap; font-variant-numeric: tabular-nums; }
.standings__table thead th { color: var(--text-muted); font-size: .78rem; font-weight: 700; background: var(--surface); position: sticky; inset-block-start: 0; }
.standings__table abbr { text-decoration: none; cursor: help; }
.standings__table tbody tr:last-child > * { border-block-end: 0; }
.standings__table tbody tr:hover { background: var(--surface-2); }
.standings__table .col-team { text-align: start; min-inline-size: 180px; }
.standings__table .col-pts strong { font-size: 1rem; }
.standings__table .col-pos { inline-size: 44px; position: relative; font-weight: 800; }
.standings__table tr.has-dest .col-pos::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0; inline-size: 4px; border-radius: 4px; background: var(--dest); }
.team-cell { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.team-cell__logo { inline-size: 24px; block-size: 24px; object-fit: contain; flex: none; }
.form-row { display: inline-flex; gap: 3px; direction: ltr; }
[dir="rtl"] .form-row { direction: rtl; }
.form-dot { display: inline-grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 6px; color: #fff; font-size: .68rem; font-weight: 800; }
.form-dot--w { background: var(--kick-scored); }
.form-dot--d { background: #94a3b8; }
.form-dot--l { background: var(--kick-missed); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--text-muted); font-size: .85rem; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { inline-size: 12px; block-size: 12px; border-radius: 3px; background: var(--dest); }

/* ---------- Top competitions ---------- */
.featured { padding-block: var(--space-6) 0; }
.featured__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.comp-card {
    display: flex; align-items: center; gap: var(--space-3); min-block-size: 76px; padding: var(--space-3) var(--space-4);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.comp-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-lg); }
.comp-card__logo { display: grid; place-items: center; inline-size: 52px; block-size: 52px; flex: none; border-radius: 14px; background: var(--surface-2); color: var(--accent); }
.comp-card__img { inline-size: 40px; block-size: 40px; object-fit: contain; }
.comp-card__name { flex: 1; font-weight: 800; line-height: 1.35; }
.comp-card__arrow { color: var(--text-faint); transition: transform .2s ease, color .2s ease; }
[dir="rtl"] .comp-card__arrow { transform: scaleX(-1); }
.comp-card:hover .comp-card__arrow { color: var(--accent-strong); transform: translateX(3px); }
[dir="rtl"] .comp-card:hover .comp-card__arrow { transform: scaleX(-1) translateX(3px); }

/* ---------- Competitions hub (/competitions/) ---------- */
.hub { display: grid; gap: var(--space-5); }
.hub__intro { max-inline-size: 860px; color: var(--text-muted); }
.hub__group { display: grid; gap: var(--space-2); }
.hub__group-count { min-inline-size: 28px; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font: 700 .8rem/1.6 var(--font-num); text-align: center; }
.hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.hub-card {
    display: flex; align-items: center; gap: var(--space-3); block-size: 100%; min-block-size: 84px; padding: var(--space-3) var(--space-4);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
a.hub-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-lg); }
.hub-card--soon { opacity: .7; box-shadow: none; }
.hub-card__logo { display: grid; place-items: center; inline-size: 60px; block-size: 60px; flex: none; border-radius: 16px; background: var(--surface-2); }
.hub-card__img { inline-size: 44px; block-size: 44px; object-fit: contain; }
.hub-card__img.img-ph { border-radius: 50%; }
.hub-card__text { display: grid; gap: 2px; flex: 1; min-inline-size: 0; }
.hub-card__name { font-weight: 800; line-height: 1.35; }
.hub-card__country { color: var(--text-muted); font-size: .85rem; }
.hub-card__arrow { flex: none; color: var(--text-faint); transition: transform .2s ease, color .2s ease; }
[dir="rtl"] .hub-card__arrow { transform: scaleX(-1); }
a.hub-card:hover .hub-card__arrow { color: var(--accent-strong); transform: translateX(3px); }
[dir="rtl"] a.hub-card:hover .hub-card__arrow { transform: scaleX(-1) translateX(3px); }
.featured__all { margin-block-start: var(--space-3); text-align: center; }
@media (max-width: 560px) {
    .hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .hub-card { flex-direction: column; text-align: center; padding: var(--space-3) var(--space-2); }
    .hub-card__arrow { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { margin-block-start: 0; background: var(--surface); border-block-start: 1px solid var(--border); color: var(--text-muted); font-size: .92rem; }
.site-footer__top { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: var(--space-6); padding-block: var(--space-6); }
.footer-about { display: grid; gap: var(--space-3); align-content: start; max-inline-size: 420px; }
.footer-about__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); font-size: 1.15rem; font-weight: 800; }
.footer-about__text { line-height: 1.8; }
.social { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.social__link { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--surface-2); color: var(--text-muted); transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.social__link:hover { transform: translateY(-2px); color: #fff; background: var(--accent); }
.social__link--facebook:hover { background: #1877f2; }
.social__link--x:hover { background: #000; }
.social__link--instagram:hover { background: #e1306c; }
.social__link--youtube:hover { background: #ff0000; }
.social__link--tiktok:hover { background: #111; }
.social__link--telegram:hover { background: #229ed9; }
.social__link--whatsapp:hover { background: #25d366; }
.social__link--snapchat:hover { background: #fffc00; color: #000; }
.social__link--threads:hover { background: #000; }
.social__link--linkedin:hover { background: #0a66c2; }
.footer-menus { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-5); }
.footer-menu__title { color: var(--text); font-size: .98rem; font-weight: 800; margin-block-end: var(--space-3); }
.footer-menu__list { display: grid; gap: var(--space-2); }
.footer-menu__list a:hover, .site-footer__legal a:hover { color: var(--accent-strong); }
.site-footer__bottom { border-block-start: 1px solid var(--border); background: var(--surface-2); }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-4); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .search { inline-size: 200px; }
}

@media (max-width: 960px) {
    .home-grid, .page-grid { grid-template-columns: minmax(0, 1fr); }
    .home-grid { grid-template-areas: "fx" "list" "news"; grid-template-rows: auto; }
    .home-grid > .news-col { margin-block-start: var(--space-6); }
    .site-footer__top { grid-template-columns: minmax(0, 1fr); }
    .news-grid > .news-card--lead { grid-template-columns: minmax(0, 1fr); }
    .news-col { position: static; }
    .settings-panel { inset-inline: var(--space-4); inline-size: auto; }
}

@media (max-width: 560px) {
    .container { padding-inline: 12px; }
    .match { column-gap: var(--space-2); padding: 10px var(--space-3); min-block-size: 68px; }
    .match__logo { inline-size: 24px; block-size: 24px; }
    .match__team { gap: 6px; }
    .match__name { font-size: .6875rem; }
    .match__goals { font-size: 18px; }
    .match__main { gap: 8px; }
    .match__center { min-inline-size: 72px; }
    .match[data-state="live"] { min-block-size: 88px; }
    .match[data-state="live"] .match__logo { inline-size: 28px; block-size: 28px; }
    .ring { inline-size: 48px; block-size: 48px; }
    .ring__time { font-size: .74rem; }
    .match__kickoff { padding: 4px 9px; font-size: .9rem; }
    .match--home[data-state="upcoming"]:has(.match__lineups:not([hidden])) .match__team--away { padding-inline-end: 22px; }
    .match__lineups { inset-inline-end: 4px; inline-size: 24px; block-size: 24px; }
    .fx-head__title { font-size: 1.08rem; }
    .fx-tool--today span { display: none; }
    .fx-tool--today { inline-size: 40px; padding: 0; }
    .daystrip__arrow { inline-size: 28px; }
    .daystrip__days { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
    .daystrip__item { flex: 0 0 auto; inline-size: 54px; scroll-snap-align: center; }
    .fx-filter { gap: 4px; font-size: .74rem; padding-inline: 4px; }
    .fx-filter__count { min-inline-size: 18px; padding-inline: 4px; font-size: .68rem; }
    .cal {
        position: fixed; inset: auto 0 0 0; inline-size: auto; z-index: 120;
        padding: 10px var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0; border-block-end: 0; animation: sheet-in .22s cubic-bezier(.2, .8, .2, 1);
    }
    .cal::before { content: ""; justify-self: center; inline-size: 40px; block-size: 4px; border-radius: 999px; background: var(--border); }
    .cal__day { font-size: 1rem; }
    .cal__hint { display: none; }
    .cal-backdrop { display: block; position: fixed; inset: 0; z-index: 110; background: rgb(6 10 18 / .45); animation: fade-in .2s ease; }
    .league__country { display: none; }
    .standings__table .col-wide { display: none; }
    .standings__table .col-team { min-inline-size: 140px; }
    .entity-head__logo { inline-size: 52px; block-size: 52px; }
    .featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .comp-card { flex-direction: column; text-align: center; padding: var(--space-3); }
    .comp-card__arrow { display: none; }
}

/* ==========================================================================
   Competition page (law §7: one page — standings, knockout, scorers, matches, transfers)
   ========================================================================== */
.comp { --comp: var(--accent-strong); --entity-nav-h: 70px; --comp-ink: color-mix(in srgb, var(--comp) 62%, var(--text)); }
.comp-hero {
    position: relative; overflow: hidden; display: grid; gap: var(--space-4); padding: var(--space-5);
    border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--comp) 22%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, color-mix(in srgb, var(--comp) 9%, var(--surface)) 0%, var(--surface) 70%);
}
.comp-hero::after {
    content: ""; position: absolute; inset-block-start: -40%; inset-inline-start: -10%; inline-size: 55%; block-size: 180%;
    background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .08) 50%, transparent 60%); pointer-events: none;
}
.comp-hero__banner { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-4); }
.comp-hero__logo {
    display: grid; place-items: center; inline-size: 96px; block-size: 96px; flex: none; border-radius: 22px;
    background: #fff; box-shadow: 0 10px 30px color-mix(in srgb, var(--comp) 25%, transparent), inset 0 0 0 1px rgb(14 22 38 / .06);
}
.comp-hero__img { inline-size: 68px; block-size: 68px; object-fit: contain; }
.comp-hero__info { display: grid; gap: var(--space-2); min-inline-size: 0; }
.comp-hero__title { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem); font-weight: 800; line-height: 1.3; }
.comp-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.comp-hero__meta li {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--border);
    color: var(--text-muted); font-size: .84rem; font-weight: 700;
}
.comp-hero__meta .comp-hero__country { color: var(--accent-strong); }
.comp-hero__meta .comp-hero__live { color: var(--live); border-color: color-mix(in srgb, var(--live) 35%, transparent); background: var(--live-soft); }

.comp-leaders { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin: 0; }
.comp-leader {
    display: grid; gap: 6px; padding: var(--space-3) var(--space-4); border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--border); backdrop-filter: blur(6px);
}
.comp-leader dt { color: var(--text-muted); font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.comp-leader dd { display: flex; align-items: center; gap: var(--space-2); margin: 0; min-inline-size: 0; }
.comp-leader__img { inline-size: 34px; block-size: 34px; object-fit: contain; flex: none; }
.comp-leader__img--round { border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.comp-leader__name { flex: 1; min-inline-size: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-leader__value { flex: none; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--comp) 14%, var(--surface)); color: var(--text); font: 800 .82rem/1.6 var(--font-num); }
html[lang="ar"] .comp-leader__value { font-family: var(--font-ar); }

/* ==========================================================================
   Entity navigation — ONE component for the match, competition, team and player
   pages (partials/entity-nav.php): its own card outside the header card, pinned
   under the site header while scrolling (.is-stuck), active item in the entity
   colour. --entity-nav-h (on .comp) drives every offset that depends on it.
   ========================================================================== */
.entity-nav {
    position: sticky; inset-block-start: var(--sticky-top, var(--header-h)); z-index: 40;
    /* hero → bar → content: equal gaps (the bar's own 6px padding is part of the gap). */
    margin-block: calc(var(--page-gap) - 6px) 0; margin-inline: calc(var(--space-2) * -1); padding: 6px var(--space-2);
    border-block-end: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.entity-nav.is-stuck {
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-block-end-color: var(--border); box-shadow: 0 12px 26px -20px rgb(0 0 0 / .5);
}
.entity-nav__track {
    display: flex; gap: 6px; padding: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
}
.entity-nav__track::-webkit-scrollbar { display: none; }
.entity-nav__item {
    flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-block-size: 44px; padding-inline: 16px; border: 0; border-radius: 12px;
    background: transparent; color: var(--text-muted); font: inherit; font-size: .92rem; font-weight: 800;
    white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.entity-nav__item[hidden] { display: none; }
.entity-nav__item:hover { color: var(--text); background: var(--surface-2); }
.entity-nav__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.entity-nav__item.is-active { background: var(--comp); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--comp) 32%, transparent); }
.entity-nav__item svg { flex: none; }
.entity-nav__item--live:not(.is-active) { color: var(--live); }
.entity-nav__item--live svg { animation: blink 1.6s infinite; }
.entity-nav__item.is-revealed { animation: flash 2.4s ease; }

/* Dropdown mode (.is-menu, set by EntityNav when the items do not fit on one line):
   the toggle shows the current section; the same track opens below it as a list.
   The toggle card has the track's exact height, so switching modes never shifts layout. */
.entity-nav__toggle { display: none; }
.entity-nav.is-menu .entity-nav__toggle {
    display: flex; align-items: center; gap: 6px; inline-size: 100%; padding: 6px; margin: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
    color: inherit; font: inherit; cursor: pointer; text-align: start;
}
.entity-nav__toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.entity-nav__current {
    flex: 1 1 auto; min-inline-size: 0; display: inline-flex; align-items: center; gap: 8px;
    min-block-size: 44px; padding-inline: 16px; border-radius: 12px;
    background: var(--comp); color: #fff; font-size: .92rem; font-weight: 800;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--comp) 32%, transparent);
}
.entity-nav__current > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-nav__current svg { flex: none; }
.entity-nav__chevron {
    flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 12px;
    background: var(--surface-2); color: var(--text-muted); transition: transform .2s ease, color .15s ease;
}
.entity-nav__toggle:hover .entity-nav__chevron { color: var(--text); }
.entity-nav.is-open .entity-nav__chevron { transform: rotate(180deg); color: var(--text); }

.entity-nav.is-menu .entity-nav__track {
    position: absolute; inset-inline: var(--space-2); inset-block-start: calc(100% - 2px); z-index: 2;
    display: none; flex-direction: column; gap: 4px;
    max-block-size: min(70vh, 460px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 22px 44px -18px rgb(0 0 0 / .45), var(--shadow);
}
.entity-nav.is-menu.is-open .entity-nav__track { display: flex; animation: entity-nav-drop .16s ease-out; }
.entity-nav.is-menu .entity-nav__item { flex: none; justify-content: flex-start; min-block-size: 46px; white-space: normal; text-align: start; }
.entity-nav.is-menu .entity-nav__item.is-active::after {
    content: ""; margin-inline-start: auto; inline-size: 18px; block-size: 18px; flex: none;
    background: currentColor; -webkit-mask: var(--check-mask) center / contain no-repeat; mask: var(--check-mask) center / contain no-repeat;
}
.entity-nav { --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
@keyframes entity-nav-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Below the bar: identical rhythm and offsets on the four entity pages. */
.comp .comp-grid { padding-block-start: var(--space-4); }
.comp .comp-panel, .comp .player-section { scroll-margin-block-start: calc(var(--sticky-top, var(--header-h)) + var(--entity-nav-h) + var(--space-3)); }
.comp .news-col { inset-block-start: calc(var(--sticky-top, var(--header-h)) + var(--entity-nav-h) + var(--space-4)); }

@media (max-width: 760px) {
    .comp { --entity-nav-h: 64px; }
    .entity-nav__item { min-block-size: 40px; padding-inline: 14px; font-size: .88rem; }
    .entity-nav__current { min-block-size: 40px; padding-inline: 14px; font-size: .88rem; }
    .entity-nav__chevron { inline-size: 40px; block-size: 40px; }
}

.comp-grid { padding-block-start: calc(var(--page-gap) - 6px); }
.comp-panel { display: grid; gap: var(--space-4); }
.comp-panel[hidden] { display: none; }
.comp-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.comp-panel__title { font-size: 1.08rem; font-weight: 800; }
.comp-panel__updated { color: var(--text-faint); font-size: .8rem; }
.comp-switch { inline-size: fit-content; max-inline-size: 100%; overflow-x: auto; }
.comp-switch .segmented__item, .scorers__switch .segmented__item { white-space: nowrap; }
.comp-filters { margin-block-end: var(--space-3); }
.comp-view[hidden] { display: none; }
.comp-view { display: grid; gap: var(--space-3); }
.comp-tables--groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--space-4); }
.comp-tables--groups .standings { margin-block-end: 0; }
.comp-tables--groups .col-form, .comp-tables--groups .col-next, .comp-tables--groups .col-goals { display: none; }
.comp-table.is-refreshing { opacity: .65; transition: opacity .2s ease; }
.standings__table tr.is-live { background: color-mix(in srgb, var(--live) 6%, transparent); }
.standings__table tr.is-moved { animation: flash 2.4s ease; }
.standings__table a.team-cell:hover .team-cell__name { color: var(--accent-strong); }
.live-chip { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px; background: var(--live-soft); color: var(--live); font: 800 .74rem/1.7 var(--font-num); vertical-align: middle; }
.next-opp { display: inline-grid; place-items: center; }
.next-opp__logo { inline-size: 24px; block-size: 24px; object-fit: contain; }
.comp-rules { padding: var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: .88rem; }
.comp-rules__title { font-weight: 800; color: var(--text); margin-block-end: var(--space-2); }
.comp-rules__list { display: grid; gap: 4px; padding-inline-start: 1.3em; list-style: decimal; }
.comp-note { color: var(--text-faint); font-size: .82rem; }
.comp-subtitle { font-size: 1rem; font-weight: 800; margin-block: var(--space-2) 0; }
.comp-more { display: flex; justify-content: center; padding-block: var(--space-2); }
.comp-matches { display: grid; gap: var(--space-4); }
.comp-day__icon { color: var(--accent); flex: none; }

.comp-skeleton { display: grid; gap: 10px; }
.comp-skeleton span { display: block; block-size: 52px; border-radius: 12px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.comp-skeleton span:first-child { block-size: 40px; inline-size: 45%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Scorers ---------- */
.scorers { display: grid; gap: var(--space-3); }
.scorers__switch { inline-size: fit-content; max-inline-size: 100%; overflow-x: auto; }
.scorers__list[hidden] { display: none; }
.scorers__table { inline-size: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.scorers__table th, .scorers__table td { padding: 10px var(--space-3); text-align: start; border-block-end: 1px solid var(--border); vertical-align: middle; }
.scorers__table tbody tr:last-child > * { border-block-end: 0; }
.scorers__table thead th { color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.scorers__table .col-rank { inline-size: 52px; text-align: center; }
.scorers__table .col-value { inline-size: 80px; text-align: center; font: 800 1.05rem/1 var(--font-num); }
.scorers__table tbody tr:hover { background: var(--surface-2); }
.rank-badge { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 10px; background: var(--surface-2); font: 800 .85rem/1 var(--font-num); }
.is-top--1 .rank-badge { background: #f5c518; color: #3d2d00; }
.is-top--2 .rank-badge { background: #cbd5e1; color: #1e293b; }
.is-top--3 .rank-badge { background: #e3a06a; color: #3b1d06; }
.player-cell { display: flex; align-items: center; gap: var(--space-3); font-weight: 400; }
.player-cell__img { inline-size: 40px; block-size: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; }
.player-cell__text { display: grid; gap: 2px; min-inline-size: 0; }
.player-cell__name { font-weight: 800; }
.player-cell__meta { color: var(--text-muted); font-size: .78rem; }
.team-cell--sm { font-weight: 600; font-size: .9rem; }

/* ---------- Transfers ---------- */
.transfers { display: grid; gap: var(--space-3); }
.tr-list { display: grid; gap: var(--space-2); }
.tr-item {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.tr-item--top { border-color: color-mix(in srgb, #f5c518 55%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, #f5c518 9%, var(--surface)), var(--surface) 60%); }
.tr-item.is-rumour { border-style: dashed; }
.tr-player { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.tr-player__img { inline-size: 40px; block-size: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; }
.tr-player__text { display: grid; gap: 2px; min-inline-size: 0; }
.tr-player__name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-player__meta { color: var(--text-muted); font-size: .78rem; }
.tr-badge { color: var(--amber); font-weight: 800; }
.tr-move { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.tr-club { display: flex; align-items: center; gap: 6px; min-inline-size: 0; font-size: .86rem; font-weight: 700; }
.tr-club--to { justify-content: flex-end; flex-direction: row-reverse; text-align: end; }
.tr-club__logo { inline-size: 28px; block-size: 28px; object-fit: contain; flex: none; }
.tr-club__logo--none { display: inline-block; border-radius: 50%; background: var(--surface-2); }
.tr-club__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-club.is-none { color: var(--text-faint); }
.tr-arrow { display: grid; justify-items: center; gap: 2px; color: var(--text-faint); }
[dir="rtl"] .tr-arrow svg { transform: scaleX(-1); }
.tr-deal { color: var(--accent-strong); font: 800 .8rem/1.2 var(--font-num); white-space: nowrap; }
html[lang="ar"] .tr-deal { font-family: var(--font-ar); }
.tr-date { color: var(--text-faint); font-size: .78rem; white-space: nowrap; }

/* ---------- Knockout tree ---------- */
.bracket { --br-gap: 28px; --br-line: color-mix(in srgb, var(--text-faint) 55%, transparent); display: grid; gap: var(--space-3); }
.bracket__nav { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.bracket__nav::-webkit-scrollbar { display: none; }
.bracket__round {
    display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-muted); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.bracket__round.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }
.bracket__viewport { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; padding-block-end: var(--space-2); scrollbar-width: thin; }
.bracket__viewport:focus-visible { outline: 2px solid var(--focus); }
.bracket__tree { display: flex; gap: var(--br-gap); min-inline-size: calc(var(--rounds) * 180px + (var(--rounds) - 1) * var(--br-gap)); }
.br-col { flex: 1 0 180px; max-inline-size: 300px; display: flex; flex-direction: column; min-inline-size: 0; }
.br-col[data-off] { display: none; }
.br-col__title { block-size: 34px; display: flex; align-items: center; justify-content: center; margin-block-end: var(--space-2); border-block-end: 2px solid var(--border); color: var(--text-muted); font-size: .82rem; font-weight: 800; }
.br-col__body { flex: 1; display: flex; flex-direction: column; }
.br-group { position: relative; flex: 1; display: flex; flex-direction: column; }
.br-slot { position: relative; flex: 1; display: flex; align-items: center; padding-block: 6px; }
/* Connectors: out of every tie that feeds the next round, into every tie fed by the previous one. */
.br-col:not(.is-end) .br-slot::after,
.br-col:not(.is-start) .br-slot::before {
    content: ""; position: absolute; inset-block-start: 50%; inline-size: calc(var(--br-gap) / 2); border-block-start: 2px solid var(--br-line);
}
.br-col:not(.is-end) .br-slot::after { inset-inline-end: calc(var(--br-gap) / -2); }
.br-col:not(.is-start) .br-slot::before { inset-inline-start: calc(var(--br-gap) / -2); }
.br-col:not(.is-end) .br-group--2::after {
    content: ""; position: absolute; inset-block: 25%; inset-inline-end: calc(var(--br-gap) / -2 - 1px); border-inline-end: 2px solid var(--br-line);
}
.br-tie {
    position: relative; z-index: 1; inline-size: 100%; display: grid; gap: 2px; padding: 8px 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
}
.br-tie.is-live { border-color: color-mix(in srgb, var(--live) 50%, var(--border)); box-shadow: 0 0 0 3px var(--live-soft); }
.br-tie__title { color: var(--text); font-size: .76rem; font-weight: 800; }
.br-tie__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-faint); font-size: .72rem; font-weight: 700; margin-block-end: 2px; }
.br-tie__live { display: inline-flex; align-items: center; gap: 5px; color: var(--live); }
.br-tie__legs-tag { padding: 0 6px; border-radius: 6px; background: var(--surface-2); color: var(--text-muted); }
.br-team { display: flex; align-items: center; gap: 8px; min-block-size: 30px; font-size: .86rem; font-weight: 700; }
.br-team__logo { inline-size: 22px; block-size: 22px; object-fit: contain; flex: none; }
.br-team__logo--tbd { display: inline-block; border-radius: 50%; background: var(--surface-2); border: 1px dashed var(--border); }
.br-team__name { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.br-team__name:hover { color: var(--accent-strong); }
.br-team__score { display: inline-flex; align-items: center; gap: 4px; min-inline-size: 26px; justify-content: flex-end; font: 800 .95rem/1 var(--font-num); }
.br-team__pens { color: var(--text-faint); font-size: .72rem; font-weight: 700; }
.br-team__check { color: var(--accent-strong); flex: none; }
.br-team.is-winner .br-team__name, .br-team.is-winner .br-team__score { color: var(--accent-strong); }
.br-team.is-out { opacity: .55; }
.br-team.is-tbd { color: var(--text-faint); font-weight: 600; }
.br-tie__legs { display: grid; gap: 2px; margin-block-start: 4px; padding-block-start: 4px; border-block-start: 1px dashed var(--border); color: var(--text-muted); font-size: .7rem; }
.br-tie__legs li { display: flex; flex-wrap: wrap; gap: 4px; }
.br-tie__legs li > span:first-child { color: var(--text-faint); font-weight: 800; }
.bracket__extra { display: grid; gap: var(--space-2); max-inline-size: 300px; }

@media (max-width: 860px) {
    .bracket { --br-gap: 14px; }
    .bracket__viewport { scroll-snap-type: x mandatory; }
    .bracket__tree { min-inline-size: 0; inline-size: max-content; align-items: flex-start; }
    .bracket__viewport { transition: block-size .25s ease; overflow-y: hidden; }
    .br-col, .br-col[data-off] { display: flex; flex: none; inline-size: min(80vw, 360px); max-inline-size: none; scroll-snap-align: start; }
    .br-col__title { display: none; }
    .br-col__body, .br-group { display: grid; gap: var(--space-2); align-content: start; }
    .br-group:empty { display: none; }
    .br-slot { padding-block: 0; }
    .bracket .br-col .br-slot::before, .bracket .br-col .br-slot::after, .bracket .br-col .br-group--2::after { display: none; }
    .bracket__extra { max-inline-size: none; }
}

@media (max-width: 960px) {
    .comp-hero { padding: var(--space-4); }
}

@media (max-width: 560px) {
    .comp-hero__banner { flex-direction: column; text-align: center; }
    .comp-hero__meta { justify-content: center; }
    .comp-hero__logo { inline-size: 84px; block-size: 84px; }
    .comp-leaders { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .standings__table .col-form, .standings__table .col-next, .standings__table .col-goals { display: none; }
    .tr-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .tr-date { justify-self: end; }
    .scorers__table .col-team .team-cell__name { display: none; }
    .scorers__table th, .scorers__table td { padding-inline: 8px; }
}

/* ==========================================================================
   Unified entity hero additions + team page
   ========================================================================== */
.comp-hero__meta a { color: inherit; }
.comp-hero__meta a:hover { color: var(--accent-strong); }
.comp-hero__chip-img { inline-size: 18px; block-size: 18px; object-fit: contain; flex: none; }
.comp-hero__meta .comp-hero__accent { color: var(--text); border-color: color-mix(in srgb, var(--comp) 45%, var(--border)); background: color-mix(in srgb, var(--comp) 14%, var(--surface)); }
a.comp-leader__name:hover { color: var(--accent-strong); }
.comp-hero--person .comp-hero__logo { border-radius: 50%; overflow: hidden; }
.comp-hero--person .comp-hero__img { inline-size: 96px; block-size: 96px; object-fit: cover; }

/* ---------- Squad ---------- */
.squad-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); }
.squad-facts li { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.squad-facts strong { font: 800 1.35rem/1.2 var(--font-num); }
.squad-facts span { color: var(--text-muted); font-size: .82rem; font-weight: 700; }
.squad-line { display: grid; gap: var(--space-3); }
.squad-line__title { display: flex; align-items: center; gap: var(--space-2); font-size: 1rem; font-weight: 800; padding-block-end: var(--space-2); border-block-end: 2px solid var(--border); }
.squad-line__count { min-inline-size: 26px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font: 800 .78rem/1.8 var(--font-num); text-align: center; }
.squad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: var(--space-3); }
.player-card {
    position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: var(--space-4) var(--space-3) var(--space-3);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); text-align: center;
    transition: transform .2s ease, border-color .2s ease;
}
.player-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--comp) 50%, var(--border)); }
.player-card--staff { background: linear-gradient(160deg, color-mix(in srgb, var(--comp) 10%, var(--surface)), var(--surface) 60%); }
.player-card__img { inline-size: 72px; block-size: 72px; border-radius: 50%; object-fit: cover; background: var(--surface-2); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--comp) 30%, transparent); margin-block-end: 6px; }
.player-card__number {
    position: absolute; inset-block-start: 10px; inset-inline-start: 10px; min-inline-size: 30px; block-size: 30px; padding-inline: 6px;
    display: grid; place-items: center; border-radius: 10px; background: var(--comp); color: #fff; font: 800 .85rem/1 var(--font-num);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--comp) 35%, transparent);
}
.player-card__name { font-weight: 800; line-height: 1.35; }
a.player-card__name:hover { color: var(--accent-strong); }
.player-card__role { color: var(--accent-strong); font-size: .8rem; font-weight: 700; }
.player-card__meta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; color: var(--text-muted); font-size: .78rem; }
.player-card__nation { display: inline-flex; }
.player-card__flag { inline-size: 18px; block-size: 18px; border-radius: 50%; object-fit: cover; flex: none; }
.player-card--staff .player-card__meta { gap: 6px; }

/* ---------- Team tables / statistics ---------- */
.team-tables { display: grid; gap: var(--space-5); }
.team-table { display: grid; gap: var(--space-3); }
.team-table__head { display: flex; align-items: center; gap: var(--space-2); }
.team-table__logo { inline-size: 28px; block-size: 28px; object-fit: contain; }
.team-table__title { font-size: 1rem; font-weight: 800; }
.team-table__title a:hover { color: var(--accent-strong); }
.standings__table tr.is-highlight { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.standings__table tr.is-highlight .team-cell__name { color: var(--accent-strong); }
.team-stats { display: grid; gap: var(--space-3); }
.rank-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: var(--space-3); }
.rank-card { display: grid; gap: 4px; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.rank-card.is-top { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); }
.rank-card__label { color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.rank-card__value { font: 800 1.35rem/1.2 var(--font-num); }
.rank-card__rank { color: var(--accent-strong); font-size: .8rem; font-weight: 800; }
.leader-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-3); }
.leader-board { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.leader-board__title { margin: 0; font-size: .9rem; font-weight: 800; color: var(--text-muted); }
.leader-board__list { display: grid; gap: 2px; }
.leader-board__row { display: flex; align-items: center; gap: var(--space-2); padding: 6px 4px; border-radius: 10px; }
.leader-board__row:first-child { background: var(--surface-2); }
.leader-board__row .rank-badge { inline-size: 26px; block-size: 26px; font-size: .78rem; }
.leader-board__row:first-child .rank-badge { background: #f5c518; color: #3d2d00; }
.leader-board__img { inline-size: 34px; block-size: 34px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; }
.leader-board__text { display: grid; flex: 1; min-inline-size: 0; }
.leader-board__name { font-weight: 800; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-board__meta { color: var(--text-muted); font-size: .74rem; }
.leader-board__value { font: 800 1rem/1 var(--font-num); }
.segmented__count { margin-inline-start: 4px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font: 800 .72rem/1.6 var(--font-num); }
.tr-club__link:hover .tr-club__name { color: var(--accent-strong); }

@media (max-width: 560px) {
    .squad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .player-card { padding: var(--space-3) var(--space-2) var(--space-2); }
    .player-card__img { inline-size: 60px; block-size: 60px; }
    .squad-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Player page (one page, no tabs)
   ========================================================================== */
.comp-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); margin: 0; }
.comp-stat { display: grid; justify-items: center; gap: 2px; padding: var(--space-3); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--border); }
.comp-stat dt { order: 2; color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.comp-stat dd { order: 1; margin: 0; font: 800 1.5rem/1.1 var(--font-num); }
.player-sections { display: grid; gap: var(--space-6); }
.player-bio { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--comp); border-radius: var(--radius); line-height: 1.9; }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-2); margin: 0; }
.fact { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.fact dt { color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.fact dd { margin: 0; font-weight: 800; }
.fact dd a:hover { color: var(--accent-strong); }
.fact__sub { color: var(--text-muted); font-weight: 600; font-size: .85rem; }
.fact__with-img { display: flex; align-items: center; gap: 8px; }
.fact__flag { inline-size: 22px; block-size: 22px; object-fit: contain; border-radius: 50%; flex: none; }
.fact__number { font: 800 1.2rem/1.2 var(--font-num); color: var(--comp-ink); }

.season-switch { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-block-end: 2px; }
.season-switch::-webkit-scrollbar { display: none; }
.season-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); white-space: nowrap; }
.season-chip.is-active { border-color: var(--comp); background: color-mix(in srgb, var(--comp) 12%, var(--surface)); box-shadow: none; }
.season-chip__logo { inline-size: 20px; block-size: 20px; object-fit: contain; }
.season-chip__logo, .last-match__league, .career-table .team-cell__logo { filter: drop-shadow(0 0 1px rgb(0 0 0 / .4)); }
.season-block { display: grid; gap: var(--space-4); }
.season-block[hidden] { display: none; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-3); }
.stat-card { display: grid; justify-items: center; gap: 4px; padding: var(--space-4) var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); text-align: center; }
.stat-card__value { font: 800 1.45rem/1.1 var(--font-num); }
.stat-card__label { color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.stat-card__note { padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .72rem; font-weight: 700; }
.stat-card--goals .stat-card__value, .stat-card--clean_sheets .stat-card__value { color: var(--accent-strong); }
.stat-card--rating { background: linear-gradient(160deg, color-mix(in srgb, var(--comp) 12%, var(--surface)), var(--surface) 70%); }
.stat-groups { display: grid; gap: var(--space-3); }
.stat-group { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.stat-group__head { display: flex; align-items: center; gap: var(--space-2); }
.stat-group__icon { display: grid; place-items: center; inline-size: 32px; block-size: 32px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--comp) 14%, var(--surface)); color: var(--comp-ink); }
.stat-group__title { margin: 0; flex: 1; font-size: .98rem; font-weight: 800; color: var(--text); }
.stat-group__count { padding: 1px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font: 700 .74rem/1.7 var(--font-num); }
.stat-group--discipline .stat-group__icon { background: color-mix(in srgb, #f5c518 22%, var(--surface)); color: #a87b00; }
/* Rows flow in as many equal columns as fit: every group is a compact full-width block,
   so one long group (attack) never stretches its neighbours or leaves holes. */
.stat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 6px var(--space-2); margin: 0; }
.stat-list__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: 40px; padding: 6px 12px; border-radius: 10px; background: var(--surface-2); font-size: .87rem; }
.stat-list__row dt { color: var(--text-muted); font-weight: 600; line-height: 1.45; }
.stat-list__row dd { margin: 0; flex: none; font: 800 .95rem/1.4 var(--font-num); color: var(--text); }


.last-matches { display: grid; gap: var(--space-2); }
.last-match { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.last-match.is-benched { opacity: .65; box-shadow: none; }
.last-match__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-inline-size: 0; font-size: .8rem; color: var(--text-muted); }
.last-match__league { inline-size: 18px; block-size: 18px; object-fit: contain; }
.last-match__competition { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 100%; }
.last-match__date { inline-size: 100%; }
.last-match__teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); font-size: .84rem; font-weight: 700; }
.last-match__team { display: flex; align-items: center; gap: 6px; min-inline-size: 0; }
.last-match__team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.last-match__team--away { justify-content: flex-end; }
.last-match__team.is-own { color: var(--comp-ink); }
.last-match__logo { inline-size: 24px; block-size: 24px; object-fit: contain; flex: none; }
.last-match__score { padding: 4px 10px; border-radius: 8px; background: var(--surface-2); font: 800 1.1rem/1.2 var(--font-num); white-space: nowrap; }
.last-match__player { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.last-match__bench { color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.pm-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font: 700 .78rem/1.6 var(--font-num); }
.pm-chip--goal { background: var(--accent-soft); color: var(--accent-strong); }
.pm-chip--assist { background: color-mix(in srgb, #3b82f6 14%, var(--surface)); color: #2563eb; font-family: inherit; }
.pm-rating { min-inline-size: 38px; padding: 3px 8px; border-radius: 8px; background: var(--rating, #94a3b8); color: #fff; font: 800 .85rem/1.4 var(--font-num); text-align: center; }

.career-blocks { display: grid; gap: var(--space-4); }
.career-block { display: grid; gap: var(--space-2); }
.career-table tfoot th, .career-table tfoot td { background: var(--surface-2); font-weight: 800; }

.timeline { position: relative; display: grid; gap: var(--space-3); padding-inline-start: 26px; }
.timeline::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 8px; border-inline-start: 2px dashed var(--border); }
.timeline__item { position: relative; }
.timeline__dot { position: absolute; inset-inline-start: -24px; inset-block-start: 26px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--border); }
.timeline__item.is-current .timeline__dot { border-color: var(--comp); background: var(--comp); box-shadow: 0 0 0 4px color-mix(in srgb, var(--comp) 20%, transparent); }
.timeline__card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.timeline__item.is-current .timeline__card { border-color: color-mix(in srgb, var(--comp) 50%, var(--border)); }
.timeline__logo { inline-size: 40px; block-size: 40px; object-fit: contain; flex: none; }
.timeline__text { display: grid; gap: 2px; flex: 1; min-inline-size: 0; }
.timeline__team { font-weight: 800; }
a.timeline__team:hover { color: var(--accent-strong); }
.timeline__meta { color: var(--text-muted); font-size: .8rem; }
.timeline__fee { padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font: 800 .82rem/1.6 var(--font-num); white-space: nowrap; }
.timeline__badge { padding: 3px 10px; border-radius: 999px; background: var(--comp); color: #fff; font-size: .74rem; font-weight: 800; white-space: nowrap; }

.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: var(--space-3); }
.trophy-grid[hidden] { display: none; }
.trophy { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: var(--space-4) var(--space-3); background: linear-gradient(170deg, color-mix(in srgb, #f5c518 10%, var(--surface)), var(--surface) 55%); border: 1px solid color-mix(in srgb, #f5c518 35%, var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow); text-align: center; }
.trophy__count { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; min-inline-size: 30px; block-size: 30px; padding-inline: 6px; display: grid; place-items: center; border-radius: 10px; background: #f5c518; color: #3d2d00; font: 800 .95rem/1 var(--font-num); }
.trophy__logo { inline-size: 56px; block-size: 56px; object-fit: contain; filter: drop-shadow(0 0 1px rgb(0 0 0 / .45)) drop-shadow(0 1px 2px rgb(0 0 0 / .18)); }
.trophy__name { font-weight: 800; font-size: .88rem; line-height: 1.4; }
.trophy__wins { display: grid; gap: 2px; color: var(--text-muted); font-size: .74rem; }

@media (max-width: 760px) {
    .last-match { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .last-match__player { justify-content: flex-start; }
    .comp-stat dd { font-size: 1.35rem; }
}
@media (max-width: 560px) {
    .trophy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
    .stat-cards[data-count="4"], .stat-cards[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .comp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Match centre (one URL for every state — law §7.5)
   ========================================================================== */
.match-page { --home: var(--accent); --away: #3b82f6; }

/* ---------- Scoreboard hero ---------- */
.mhero {
    gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4);
    background:
        radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--home) 22%, transparent) 0%, transparent 62%),
        radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--away) 22%, transparent) 0%, transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--home)) 0%, var(--surface) 75%);
}
[dir="rtl"] .mhero {
    background:
        radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--home) 22%, transparent) 0%, transparent 62%),
        radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--away) 22%, transparent) 0%, transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--home)) 0%, var(--surface) 75%);
}
.mhero > * { position: relative; z-index: 1; }
.mhero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px var(--space-3); color: var(--text-muted); font-size: .85rem; font-weight: 700; text-align: center; }
.mhero__comp { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 800; }
a.mhero__comp:hover { color: var(--accent-strong); }
.mhero__league { inline-size: 22px; block-size: 22px; object-fit: contain; filter: drop-shadow(0 0 1px rgb(0 0 0 / .35)); }
.mhero__round { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); }
.mhero__title { margin: 0; text-align: center; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); font-weight: 800; color: var(--text-muted); line-height: 1.4; }

.mhero__board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 1.25fr) minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.mhero__team { display: grid; justify-items: center; gap: 6px; text-align: center; min-inline-size: 0; }
.mhero__team-link { display: grid; justify-items: center; gap: var(--space-2); color: var(--text); }
a.mhero__team-link:hover .mhero__name { color: var(--accent-strong); }
.mhero__crest {
    display: grid; place-items: center; inline-size: 92px; block-size: 92px; border-radius: 28px; background: #fff;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--home) 28%, transparent), inset 0 0 0 1px rgb(14 22 38 / .06);
}
.mhero__team--away .mhero__crest { box-shadow: 0 10px 28px color-mix(in srgb, var(--away) 28%, transparent), inset 0 0 0 1px rgb(14 22 38 / .06); }
.mhero__logo { inline-size: 64px; block-size: 64px; object-fit: contain; }
.mhero__name { font-size: clamp(.9rem, .8rem + .5vw, 1.2rem); font-weight: 800; line-height: 1.35; overflow-wrap: break-word; hyphens: auto; max-inline-size: 100%; }
.mhero__team.is-winner .mhero__name { color: var(--accent-strong); }
.mhero__team.is-loser { opacity: .72; }

.mhero__center { display: grid; justify-items: center; align-content: start; gap: 6px; padding-block-start: 4px; min-inline-size: 0; }
.mhero__status { padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.mhero[data-state="live"] .mhero__status { background: var(--live-soft); color: var(--live); }
.mhero[data-state="live"] .mhero__status::before { content: ""; display: inline-block; inline-size: 7px; block-size: 7px; margin-inline-end: 6px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite; vertical-align: 1px; }
.mhero[data-phase="half_time"] .mhero__status, .mhero[data-phase="et_break"] .mhero__status,
.mhero[data-phase="extra_break"] .mhero__status, .mhero[data-phase="penalties"] .mhero__status,
.mhero[data-phase="postponed"] .mhero__status, .mhero[data-phase="cancelled"] .mhero__status { background: var(--amber-soft); color: var(--amber); }
.mhero[data-state="finished"]:not([data-phase="postponed"]):not([data-phase="cancelled"]) .mhero__status { background: var(--surface-2); color: var(--text); }
.mhero__score { display: flex; align-items: center; gap: var(--space-3); font: 800 clamp(2.3rem, 1.6rem + 2.4vw, 3.2rem)/1 var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mhero__dash { color: var(--text-faint); font-weight: 600; }
.mhero__goals { min-inline-size: 1ch; text-align: center; transition: color .3s ease; }
.mhero.is-goal .mhero__goals.is-changed { color: var(--accent-strong); animation: goal-pop .9s ease; }
@keyframes goal-pop { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 100% { transform: scale(1); } }
.mhero.is-goal { animation: goal-glow 2.4s ease; }
@keyframes goal-glow { 0%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow); } 100% { box-shadow: var(--shadow); } }
.mhero__ring { inline-size: 74px; block-size: 74px; }
.mhero__ring .ring__time { font-size: .95rem; }
.mhero[data-phase="half_time"] .ring, .mhero[data-phase="et_break"] .ring,
.mhero[data-phase="extra_break"] .ring, .mhero[data-phase="penalties"] .ring { --ring-color: var(--amber); }
.mhero[data-phase="extra_first"] .ring, .mhero[data-phase="extra_second"] .ring { --ring-color: var(--extra); }
.mhero[data-running="1"] .ring__track { stroke: color-mix(in srgb, var(--ring-color) 16%, var(--ring-track)); }
.mhero__kickoff { font: 800 1.35rem/1.2 var(--font-num); color: var(--text); direction: ltr; }
.mhero__soon { color: var(--live); font-weight: 800; }
.mhero__line { margin: 0; color: var(--text-muted); font-size: .82rem; font-weight: 700; text-align: center; }
.mhero__agg { font-size: .76rem; }
.mhero__pens { grid-area: auto; margin-block-start: 0; }
.mhero__pens .kick { inline-size: 16px; block-size: 16px; }

/* State switches: every node stays in the DOM, CSS shows what the state needs. */
.mhero:not([data-state="live"]) .mhero__ring,
.mhero:not([data-state="live"]) .added-time,
.mhero:not([data-state="upcoming"]) .countdown-rings,
.mhero:not([data-state="upcoming"]) .mhero__kickoff,
.mhero:not([data-state="upcoming"]) .mhero__soon,
.mhero[data-state="upcoming"] .mhero__score { display: none; }
.mhero[data-state="upcoming"] .mhero__status { display: none; }
.mhero[data-phase="postponed"] .mhero__score, .mhero[data-phase="cancelled"] .mhero__score { display: none; }

/* ---------- Countdown rings ---------- */
.countdown-rings { display: flex; gap: 8px; }
.cd-ring { position: relative; display: grid; justify-items: center; inline-size: 58px; }
.cd-ring svg { inline-size: 58px; block-size: 58px; transform: rotate(-90deg); }
.cd-ring__track { fill: none; stroke: var(--ring-track); stroke-width: 2.6; }
.cd-ring__value { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); }
.cd-ring--d .cd-ring__value { stroke: var(--home); }
.cd-ring--h .cd-ring__value { stroke: color-mix(in srgb, var(--home) 50%, var(--away)); }
.cd-ring--m .cd-ring__value { stroke: var(--away); }
.cd-ring--s .cd-ring__value { stroke: var(--live); }
.cd-ring__num { position: absolute; inset-block-start: 0; block-size: 58px; display: grid; place-items: center; inline-size: 100%; font: 800 1.05rem/1 var(--font-num); font-variant-numeric: tabular-nums; }
.cd-ring__label { margin-block-start: 2px; color: var(--text-muted); font-size: .7rem; font-weight: 700; }
[dir="rtl"] .cd-ring__label { font-family: var(--font-ar); }

/* ---------- Scorers summary ---------- */
.mhero__summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.mhero__summary:not(:has(li)) { display: none; }
.msum { display: grid; align-content: start; gap: 3px; font-size: .82rem; }
.msum--home { justify-items: start; text-align: start; padding-inline-start: 8%; }
.msum--away { justify-items: end; text-align: end; padding-inline-end: 8%; }
.msum__item { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); }
.msum--away .msum__item { flex-direction: row-reverse; }
.msum__name { color: var(--text); font-weight: 700; }
.msum__min { font-family: var(--font-num); font-weight: 700; }
.msum__icon { color: var(--text); flex: none; }
.msum__card { color: var(--live); flex: none; }
.msum__item.is-new { animation: flash 2.4s ease; border-radius: 6px; }

.mhero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: 1px solid var(--border); }
.mhero__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--border); color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.mhero__chips svg { color: var(--text-faint); flex: none; }


/* ---------- Information ---------- */
.minfo { display: grid; gap: var(--space-5); }
.minfo__editorial { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--comp); border-radius: var(--radius); }
.minfo__block { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.minfo__more { justify-self: center; }
.mstat-group__title { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 1rem; font-weight: 800; }
.mstat-group__sub { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: .86rem; font-weight: 800; }

.votes__total { color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.votes__bar { display: flex; block-size: 12px; overflow: hidden; border-radius: 999px; background: var(--surface-2); gap: 3px; }
.votes__bar i { display: block; min-inline-size: 4px; border-radius: 999px; transition: inline-size .6s ease; }
.votes__home { background: var(--home); }
.votes__draw { background: #94a3b8; }
.votes__away { background: var(--away); }
.votes__legend { display: flex; justify-content: space-between; gap: var(--space-2); font-size: .82rem; color: var(--text-muted); }
.votes__legend b { color: var(--text); font-family: var(--font-num); }

.form-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-4); }
.form-col { display: grid; align-content: start; gap: var(--space-2); }
.form-col__team { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.form-col__logo { inline-size: 22px; block-size: 22px; object-fit: contain; }
.form-games { display: grid; gap: 4px; }
.form-game { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: .84rem; }
.form-game__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
a.form-game__text:hover { color: var(--accent-strong); }
.form-game__date { color: var(--text-faint); font: 600 .74rem/1 var(--font-num); }
.absent { display: grid; gap: 4px; }
.absent__item { display: grid; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); border-inline-start: 3px solid var(--live); }
.absent__item--doubtful { border-inline-start-color: var(--amber); }
.absent__item--none { border-inline-start-color: var(--kick-scored); color: var(--text-muted); font-size: .84rem; }
.absent__name { font-weight: 800; font-size: .88rem; }
.absent__why { color: var(--text-muted); font-size: .78rem; }

/* ---------- Head to head ---------- */
.h2h { display: grid; gap: var(--space-4); }
.h2h-sum { display: grid; gap: var(--space-3); }
.h2h-sum__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); text-align: center; }
.h2h-sum__team { display: grid; justify-items: center; gap: 2px; color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.h2h-sum__team b { color: var(--text); font: 800 1.45rem/1.1 var(--font-num); }
.h2h-sum__logo { inline-size: 40px; block-size: 40px; object-fit: contain; }
.h2h-sum__bar { display: flex; gap: 3px; block-size: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.h2h-sum__bar i { display: block; border-radius: 999px; }
.h2h-sum__home { background: var(--home); }
.h2h-sum__draw { background: #94a3b8; }
.h2h-sum__away { background: var(--away); }
.h2h-sum__goals { margin: 0; color: var(--text-muted); font-size: .84rem; text-align: center; }
.h2h-list { display: grid; gap: var(--space-2); }
.h2h-game {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "meta meta meta" "home score away" "note note note";
    align-items: center; gap: 6px var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
a.h2h-game:hover { border-color: color-mix(in srgb, var(--comp) 45%, var(--border)); }
.h2h-game__meta { grid-area: meta; display: flex; justify-content: space-between; gap: var(--space-2); color: var(--text-muted); font-size: .76rem; font-weight: 700; }
.h2h-game__comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-game__team { grid-area: home; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-weight: 700; font-size: .84rem; min-inline-size: 0; }
.h2h-game__team--away { grid-area: away; justify-content: flex-start; }
.h2h-game__team.is-winner { font-weight: 800; }
.h2h-game__team.is-loser { color: var(--text-muted); font-weight: 600; }
.h2h-game__logo { inline-size: 24px; block-size: 24px; object-fit: contain; flex: none; }
.h2h-game__score { grid-area: score; padding: 4px 12px; border-radius: 8px; background: var(--surface-2); font: 800 1.15rem/1.2 var(--font-num); }
.h2h-game__note { grid-area: note; justify-self: center; color: var(--text-muted); font-size: .76rem; }

/* ---------- Events timeline ---------- */
.mevents { display: grid; gap: var(--space-4); }
.tl { position: relative; display: grid; gap: var(--space-2); }
.tl::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 50%; border-inline-start: 2px solid var(--border); transform: translateX(-1px); }
[dir="rtl"] .tl::before { transform: translateX(1px); }
.tl__divider {
    position: relative; z-index: 1; justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; font-weight: 800; color: var(--text-muted);
}
.tl__divider--end { background: var(--text); color: var(--surface); border-color: var(--text); }
.tl__score { font-family: var(--font-num); color: var(--text); }
.tl__divider--end .tl__score { color: var(--surface); }
.tl__ev { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; }
.tl__minute {
    grid-column: 2; grid-row: 1; justify-self: center; z-index: 1; min-inline-size: 46px; padding: 4px 6px; border-radius: 999px; text-align: center;
    background: var(--surface); border: 2px solid var(--border); font: 800 .78rem/1.2 var(--font-num); color: var(--text-muted);
}
.tl__ev.is-goal .tl__minute { border-color: var(--accent); color: var(--accent-strong); }
.tl__ev--red .tl__minute, .tl__ev--second_yellow .tl__minute { border-color: var(--live); color: var(--live); }
.tl__side { grid-row: 1; min-inline-size: 0; }
.tl__ev--home .tl__side { grid-column: 1; display: flex; justify-content: flex-end; padding-inline-end: 8px; }
.tl__ev--away .tl__side { grid-column: 3; padding-inline-start: 8px; }
.tl__card { display: inline-flex; align-items: center; gap: var(--space-2); max-inline-size: 100%; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.tl__ev--home .tl__card { flex-direction: row-reverse; text-align: end; }
.tl__ev.is-goal .tl__card { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); }
.tl__ev--sub .tl__card, .tl__ev--woodwork .tl__card { box-shadow: none; background: var(--surface-2); }
.tl__icon { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--surface-2); flex: none; color: var(--text); }
.ev-icon--goal { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 2px var(--accent); }
.ev-icon--own { background: var(--live-soft); color: var(--live); box-shadow: inset 0 0 0 2px var(--live); }
.ev-icon--yellow { color: #facc15; }
.ev-icon--red { color: var(--live); }
.ev-icon--miss { color: var(--text-muted); }
.ev-icon--var { color: #6366f1; }
.ev-icon--post { color: var(--amber); }
.tl__text { display: grid; gap: 1px; min-inline-size: 0; }
.tl__player { font-weight: 800; font-size: .9rem; overflow-wrap: anywhere; }
a.tl__player:hover, a.tl__extra-name:hover { color: var(--accent-strong); }
.tl__extra { color: var(--text-muted); font-size: .76rem; }
.tl__extra-name { color: var(--text); font-weight: 700; }
.tl__tag { justify-self: start; padding: 0 6px; border-radius: 6px; font-size: .68rem; font-weight: 800; }
.tl__ev--home .tl__tag { justify-self: end; }
.tl__tag--in { background: color-mix(in srgb, #16a34a 14%, var(--surface)); color: #15803d; }
.tl__goal-score { padding: 2px 8px; border-radius: 8px; background: var(--surface); font: 800 .82rem/1.4 var(--font-num); border: 1px solid var(--border); white-space: nowrap; }
.tl__ev.is-new .tl__card { animation: tl-in .7s cubic-bezier(.2, .8, .2, 1), flash 2.6s ease; }
@keyframes tl-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Penalty shootout board ---------- */
.so { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(160deg, color-mix(in srgb, var(--amber) 10%, var(--surface)), var(--surface) 60%); border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--border)); }
.so__head { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.so__title { margin: 0; font-size: 1rem; font-weight: 800; }
.so__total { padding: 4px 14px; border-radius: 999px; background: var(--text); color: var(--surface); font: 800 1.05rem/1.3 var(--font-num); }
.so__teams { display: flex; justify-content: space-between; gap: var(--space-3); font-weight: 800; font-size: .9rem; }
.so__teams span { display: inline-flex; align-items: center; gap: 6px; }
.so__logo { inline-size: 24px; block-size: 24px; object-fit: contain; }
.so__rounds { display: grid; gap: 6px; }
.so__round { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.so__no { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--surface-2); font: 800 .8rem/1 var(--font-num); color: var(--text-muted); justify-self: center; }
.so__kick { display: flex; align-items: center; gap: 8px; min-inline-size: 0; padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: .85rem; font-weight: 700; }
.so__round > .so__kick:first-child { flex-direction: row-reverse; text-align: end; }
.so__kick--scored { border-color: color-mix(in srgb, var(--kick-scored) 45%, var(--border)); }
.so__kick--missed { border-color: color-mix(in srgb, var(--kick-missed) 45%, var(--border)); color: var(--text-muted); }
.so__kick--missed .so__name { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--kick-missed) 60%, transparent); }
.so__kick--empty { visibility: hidden; }
.so__kick .kick { inline-size: 18px; block-size: 18px; flex: none; }
.so__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so__result { margin: 0; text-align: center; font-weight: 800; color: var(--accent-strong); }

/* ---------- Statistics ---------- */
.mstats { display: grid; gap: var(--space-4); }
.mstats__teams { display: flex; justify-content: space-between; gap: var(--space-3); font-weight: 800; }
.mstats__team { display: inline-flex; align-items: center; gap: 8px; }
.mstats__logo { inline-size: 26px; block-size: 26px; object-fit: contain; }
.mstats__filters { justify-self: center; overflow-x: auto; max-inline-size: 100%; }
.mstats__body { display: grid; gap: var(--space-4); transition: opacity .2s ease; }
.mstats__body.is-loading { opacity: .5; }
.possession { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "home bar away" ". label ."; align-items: center; gap: 4px var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.possession__team { grid-area: home; display: inline-flex; align-items: center; gap: 8px; font: 800 1.35rem/1 var(--font-num); }
.possession__team--away { grid-area: away; }
.possession__logo { inline-size: 28px; block-size: 28px; object-fit: contain; }
.possession__bar { grid-area: bar; display: flex; gap: 4px; block-size: 14px; }
.possession__bar i { display: block; border-radius: 999px; transition: inline-size .8s cubic-bezier(.2, .8, .2, 1); }
.possession__home { background: var(--home); }
.possession__away { background: var(--away); }
.possession__label { grid-area: label; justify-self: center; color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.mstat-group { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mstat { display: grid; gap: 6px; }
.mstat__vals { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: var(--space-2); }
.mstat__name { text-align: center; color: var(--text-muted); font-size: .84rem; font-weight: 700; }
.mstat__v { font: 700 .95rem/1.3 var(--font-num); white-space: nowrap; }
.mstat__v:last-child { text-align: end; }
.mstat__v.is-lead { font-weight: 800; color: var(--text); }
.mstat__v.is-changed { animation: flash 2s ease; border-radius: 6px; }
.mstat__bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mstat__bar { display: flex; block-size: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.mstat__bar--home { justify-content: flex-end; }
.mstat__bar i { display: block; border-radius: 999px; transition: inline-size .8s cubic-bezier(.2, .8, .2, 1); }
.mstat__bar--home i { background: var(--home); }
.mstat__bar--away i { background: var(--away); }
.playtime { display: grid; gap: var(--space-2); }
.playtime__row { display: grid; gap: 4px; font-size: .84rem; font-weight: 700; color: var(--text-muted); }
.playtime__bar { display: block; block-size: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.playtime__bar i { display: block; block-size: 100%; border-radius: 999px; background: var(--accent); }
.playtime__bar--total i { background: #94a3b8; }
.playtime__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-2); margin: 0; }
.playtime__facts div { display: flex; justify-content: space-between; gap: var(--space-2); padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: .84rem; }
.playtime__facts dt { color: var(--text-muted); }
.playtime__facts dd { margin: 0; font-weight: 800; font-family: var(--font-num); }

/* ---------- Shot map ---------- */
.shotmap { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.shotmap__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.shotmap__switch { overflow-x: auto; max-inline-size: 100%; }
.shotmap__totals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.shotmap__team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 8px; border-radius: 12px; background: var(--surface-2); border-block-start: 3px solid var(--home); }
.shotmap__team--away { border-block-start-color: var(--away); }
.shotmap__team div { display: grid; justify-items: center; }
.shotmap__team dt { color: var(--text-muted); font-size: .68rem; font-weight: 700; }
.shotmap__team dd { margin: 0; font: 800 1rem/1.3 var(--font-num); }
.shotmap__pitch { display: grid; gap: var(--space-2); }
.shotmap__pitch svg { inline-size: 100%; max-inline-size: 640px; justify-self: center; aspect-ratio: 68 / 52.5; border-radius: 12px; overflow: visible; }
.sm-grass { fill: #1c7a46; }
.sm-lines rect, .sm-lines path { stroke: rgb(255 255 255 / .7); stroke-width: .3; }
.sm-lines .sm-goal { fill: rgb(255 255 255 / .85); stroke: none; }
.sm-spot { fill: rgb(255 255 255 / .8); }
.sm-shot { stroke-width: .35; cursor: pointer; transition: opacity .2s ease, transform .2s ease; transform-box: fill-box; transform-origin: center; }
.sm-shot:hover, .sm-shot:focus-visible { transform: scale(1.35); outline: none; }
.sm-shot--home { fill: color-mix(in srgb, var(--home) 35%, transparent); stroke: var(--home); }
.sm-shot--away { fill: color-mix(in srgb, var(--away) 35%, transparent); stroke: var(--away); }
.sm-shot--home.sm-shot--goal { fill: var(--home); stroke: #fff; stroke-width: .5; }
.sm-shot--away.sm-shot--goal { fill: var(--away); stroke: #fff; stroke-width: .5; }
.sm-shot--saved { stroke-width: .55; }
.sm-shot--off, .sm-shot--blocked, .sm-shot--post { opacity: .62; }
.shotmap__pitch[data-shots-scope="home"] .sm-shot--away, .shotmap__pitch[data-shots-scope="away"] .sm-shot--home { opacity: 0; pointer-events: none; }
.shotmap__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); color: var(--text-muted); font-size: .76rem; font-weight: 700; }
.shotmap__legend li { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; inline-size: 12px; block-size: 12px; border-radius: 50%; border: 2px solid var(--text-muted); }
.lg--goal { background: var(--text-muted); border-color: #fff; box-shadow: 0 0 0 1px var(--text-muted); }
.lg--off { opacity: .55; }
.lg--size { inline-size: 6px; block-size: 6px; box-shadow: 10px 0 0 2px transparent; position: relative; }

/* ---------- Lineups ---------- */
.lineups { display: grid; gap: var(--space-4); }
.lineups__note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--amber-soft); color: var(--amber); font-size: .84rem; font-weight: 700; }
.lineups__heads { display: flex; justify-content: space-between; gap: var(--space-3); }
.lineups__head { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; min-inline-size: 0; }
.lineups__head--away { flex-direction: row-reverse; }
.lineups__logo { inline-size: 28px; block-size: 28px; object-fit: contain; }
.lineups__formation { flex: none; white-space: nowrap; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); font: 800 .82rem/1.6 var(--font-num); }

.pitch {
    position: relative; inline-size: 100%; max-inline-size: 520px; justify-self: center; aspect-ratio: 68 / 105; border-radius: 18px; overflow: hidden;
    background: repeating-linear-gradient(0deg, #1f8a4f 0 9.5%, #1b7c47 9.5% 19%); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .08), var(--shadow);
}
.pitch__lines { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; fill: none; stroke: rgb(255 255 255 / .55); stroke-width: .35; vector-effect: non-scaling-stroke; }
.pitch__lines rect, .pitch__lines line, .pitch__lines circle { vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.pitch__lines--h { display: none; }
.pitch__players { position: absolute; inset: 0; }
.pl { --pl: 40px; position: absolute; transform: translate(-50%, -50%); inline-size: 84px; display: grid; justify-items: center; }
/* vertical: home attacks upward (bottom half), away attacks downward (top half) */
.pl--home { top: calc(95% - var(--l) * .385%); left: calc(8% + var(--s) * .84%); }
.pl--away { top: calc(5% + var(--l) * .385%); left: calc(92% - var(--s) * .84%); }
.pl__btn { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; font: inherit; }
.pl__photo { display: grid; place-items: center; inline-size: var(--pl); block-size: var(--pl); border-radius: 50%; background: #fff; border: 2px solid var(--home); overflow: hidden; box-shadow: 0 3px 10px rgb(0 0 0 / .3); transition: transform .2s ease; }
.pl--away .pl__photo { border-color: var(--away); }
.pl__btn:hover .pl__photo, .pl__btn:focus-visible .pl__photo { transform: scale(1.1); }
.pl__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pl__name { max-inline-size: 84px; padding: 1px 6px; border-radius: 6px; background: rgb(0 0 0 / .45); font-size: .68rem; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl__name b { color: #fde68a; font-family: var(--font-num); }
.pl.is-best .pl__photo { border-color: #facc15; box-shadow: 0 0 0 3px rgb(250 204 21 / .45), 0 3px 10px rgb(0 0 0 / .3); }
.pl__rating { min-inline-size: 30px; padding: 1px 5px; border-radius: 6px; background: #94a3b8; color: #fff; font: 800 .7rem/1.45 var(--font-num); text-align: center; }
/* Badges orbit the photo (never over the face): rating on the top corner, events stacked on the
   opposite side edge, substitution minute on the bottom corner. Positions are measured from the
   photo's centre (left: 50%) so they hold whatever the name width. */
.pl__btn .pl__rating {
    position: absolute; z-index: 2; inset-block-start: calc(var(--pl) * -.12); left: calc(50% + var(--pl) * .3);
    min-inline-size: 0; padding: 0 5px; border-radius: 999px; font-size: .66rem; line-height: 1.55;
    box-shadow: 0 0 0 2px rgb(255 255 255 / .9), 0 2px 6px rgb(0 0 0 / .3);
}
.r-low { background: #e5484d; } .r-mid { background: #f59e0b; } .r-good { background: #16a34a; } .r-top { background: #1d4ed8; }
.pl__rating.is-changed { animation: pop .5s ease; }
.pl__events { display: inline-flex; gap: 2px; }
.pl__btn .pl__events {
    position: absolute; z-index: 2; inset-block-start: calc(var(--pl) * .02); right: calc(50% + var(--pl) * .36);
    flex-direction: column; gap: 2px;
}
.pl-ev { inline-size: 16px; block-size: 16px; border-radius: 50%; background: #fff; padding: 2px; box-shadow: 0 1px 4px rgb(0 0 0 / .35); color: #0e1626; }
.pl-ev--goal { color: var(--ball); }
.pl-ev--own { color: var(--live); }
.pl-ev--yellow { color: #facc15; border-radius: 2px; }
.pl-ev--red { color: var(--live); border-radius: 2px; }
.pl-ev--assist { color: #2563eb; }
.pl__out {
    position: absolute; z-index: 2; inset-block-start: calc(var(--pl) * .66); left: calc(50% + var(--pl) * .3);
    display: inline-flex; align-items: center; gap: 1px; padding: 0 4px; border-radius: 999px;
    background: rgb(10 17 30 / .78); box-shadow: 0 0 0 1.5px rgb(255 255 255 / .55); font: 700 .62rem/1.55 var(--font-num); direction: ltr;
}

.lineups__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); }
.lineups__col { display: grid; align-content: start; gap: var(--space-2); }
.lineups__coach { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.lineups__coach div { display: grid; }
.lineups__coach-img { inline-size: 44px; block-size: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.lineups__role { color: var(--text-muted); font-size: .74rem; font-weight: 700; }
.lineups__coach-name { font-weight: 800; }
.lineups__title { margin: var(--space-2) 0 0; font-size: .92rem; font-weight: 800; }
.lineups__count { color: var(--text-muted); font-family: var(--font-num); font-size: .8rem; }
.lu-list { display: grid; gap: 4px; }
.lu { display: grid; grid-template-columns: 26px 34px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: var(--space-2); padding: 6px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.lu.is-unused { opacity: .62; }
.lu__num { color: var(--text-muted); font: 800 .8rem/1 var(--font-num); text-align: center; }
.lu__img { inline-size: 32px; block-size: 32px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.lu__main { display: grid; min-inline-size: 0; }
.lu__name { font-weight: 800; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.lu__name:hover { color: var(--accent-strong); }
.lu__pos { color: var(--text-muted); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu__in { display: inline-flex; align-items: center; gap: 2px; color: #15803d; font: 800 .74rem/1 var(--font-num); }
.lu__events .pl-ev { box-shadow: none; background: var(--surface-2); }
.lu__more { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--text-muted); cursor: pointer; }
.lu__more:hover { color: var(--text); }
.lu--missing { grid-template-columns: 34px minmax(0, 1fr) auto; border-inline-start: 3px solid var(--live); }
.lu--doubtful { border-inline-start-color: var(--amber); }
.lu__return { color: var(--text-muted); font-size: .74rem; font-weight: 700; text-align: end; max-inline-size: 140px; }

.performers { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.perf { display: grid; gap: var(--space-2); }
.perf__line { justify-self: center; padding: 2px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: .76rem; font-weight: 800; }
.perf__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.perf__player { display: flex; align-items: flex-start; gap: var(--space-2); min-inline-size: 0; padding: var(--space-3); border-radius: var(--radius); background: var(--surface-2); border-block-start: 3px solid var(--home); }
.perf__player--away { border-block-start-color: var(--away); }
.perf__img { inline-size: 42px; block-size: 42px; border-radius: 50%; object-fit: cover; background: var(--surface); flex: none; }
.perf__info { display: grid; gap: 2px; min-inline-size: 0; }
.perf__name { font-weight: 800; font-size: .88rem; }
.perf__pos { color: var(--text-muted); font-size: .72rem; }
.perf__stats { display: grid; gap: 2px; margin: 4px 0 0; }
.perf__stats div { display: flex; justify-content: space-between; gap: var(--space-2); font-size: .76rem; }
.perf__stats dt { color: var(--text-muted); }
.perf__stats dd { margin: 0; font-weight: 800; }

.sheet { inline-size: min(440px, calc(100vw - 24px)); max-block-size: min(80vh, 640px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.sheet::backdrop { background: rgb(8 12 22 / .55); backdrop-filter: blur(2px); }
.sheet__close { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; }
.sheet__body { display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-4) var(--space-4); }
.sheet__head { display: flex; align-items: center; gap: var(--space-3); padding-inline-end: 40px; }
.sheet__head div { display: grid; min-inline-size: 0; }
.sheet__img { inline-size: 58px; block-size: 58px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; }
.sheet__name { font-weight: 800; font-size: 1.05rem; }
.sheet__meta { color: var(--text-muted); font-size: .8rem; }
.sheet__rating { font-size: .95rem; padding: 4px 8px; }
.sheet__stats { display: grid; gap: 4px; margin: 0; }
.sheet__stats div { display: flex; justify-content: space-between; gap: var(--space-3); padding: 7px 12px; border-radius: 10px; background: var(--surface-2); font-size: .86rem; }
.sheet__stats div.is-top { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.sheet__stats dt { color: var(--text-muted); }
.sheet__stats dd { margin: 0; font: 800 .9rem/1.4 var(--font-num); }

/* ---------- Standings / scorers ---------- */
.mstandings { display: grid; gap: var(--space-3); }
.mstandings__more { justify-self: center; }

/* ---------- Live stream ---------- */
.mstream { display: grid; gap: var(--space-3); }
.mstream__servers { justify-self: center; overflow-x: auto; max-inline-size: 100%; }
.stream-player { position: relative; display: grid; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #05080f; box-shadow: var(--shadow-lg); }
.stream-player iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.stream-player--poster {
    position: relative; display: grid; place-items: center; align-content: center; gap: var(--space-4); inline-size: 100%; aspect-ratio: 16 / 9; padding: var(--space-4);
    border: 0; border-radius: var(--radius-lg); color: #fff; cursor: pointer; font: inherit; text-align: center;
    background:
        radial-gradient(60% 90% at 20% 30%, color-mix(in srgb, var(--home) 55%, transparent), transparent 70%),
        radial-gradient(60% 90% at 80% 70%, color-mix(in srgb, var(--away) 55%, transparent), transparent 70%),
        linear-gradient(135deg, #0b1220, #121b2e);
}
.stream-player__start { aspect-ratio: auto; block-size: 100%; border-radius: 0; }
.stream-player__crests { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 5vw, 56px); }
.stream-player__crest { display: grid; justify-items: center; gap: 8px; font-weight: 800; font-size: clamp(.8rem, .7rem + .6vw, 1.05rem); max-inline-size: 30vw; }
.stream-player__logo { inline-size: clamp(54px, 10vw, 96px); block-size: clamp(54px, 10vw, 96px); object-fit: contain; padding: 10px; border-radius: 24px; background: rgb(255 255 255 / .95); box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.stream-player__play { display: grid; place-items: center; inline-size: clamp(62px, 9vw, 86px); block-size: clamp(62px, 9vw, 86px); border-radius: 50%; background: var(--live); color: #fff; box-shadow: 0 0 0 0 rgb(229 72 77 / .6); animation: play-pulse 2s infinite; transition: transform .2s ease; }
.stream-player--poster:hover .stream-player__play { transform: scale(1.08); }
@keyframes play-pulse { 0% { box-shadow: 0 0 0 0 rgb(229 72 77 / .55); } 70% { box-shadow: 0 0 0 22px rgb(229 72 77 / 0); } 100% { box-shadow: 0 0 0 0 rgb(229 72 77 / 0); } }
.stream-player__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgb(0 0 0 / .45); font-size: .86rem; font-weight: 800; }
.stream-player__hint { position: absolute; inset-block-end: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; opacity: .8; }
.mstream__tools { display: flex; justify-content: center; }
.mstream__note { margin: 0; color: var(--text-muted); font-size: .8rem; text-align: center; }

/* ---------- Responsive ---------- */
@media (min-width: 900px) {
    /* Horizontal pitch: home attacks right (left half), away attacks left (right half). */
    .lineups .pitch { aspect-ratio: 105 / 68; max-inline-size: 100%; background: repeating-linear-gradient(90deg, #1f8a4f 0 9.5%, #1b7c47 9.5% 19%); }
    .pitch__lines--v { display: none; }
    .pitch__lines--h { display: block; }
    .pl--home { left: calc(5% + var(--l) * .41%); top: calc(8% + var(--s) * .84%); }
    .pl--away { left: calc(95% - var(--l) * .41%); top: calc(92% - var(--s) * .84%); }
    /* Arabic pages read right to left: home sits in the right half and attacks left. */
    [dir="rtl"] .pl--home { left: calc(95% - var(--l) * .41%); top: calc(92% - var(--s) * .84%); }
    [dir="rtl"] .pl--away { left: calc(5% + var(--l) * .41%); top: calc(8% + var(--s) * .84%); }
    /* Large screens: the player card grows with the pitch. */
    .lineups .pl { --pl: 52px; inline-size: 104px; }
    .lineups .pl__name { max-inline-size: 104px; padding: 2px 8px; font-size: .74rem; }
    .lineups .pl__btn .pl__rating { font-size: .72rem; padding: 0 6px; }
}
@media (min-width: 1200px) {
    .lineups .pl { --pl: 60px; inline-size: 112px; }
    .lineups .pl__name { max-inline-size: 112px; }
}
@media (max-width: 760px) {
    .mhero { padding: var(--space-4) var(--space-3) var(--space-3); }
    .mhero__board { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-2); }
    .mhero__line { font-size: .74rem; }
    .mhero[data-state="upcoming"] .mhero__board { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .mhero__name { font-size: .82rem; }
    .mhero__crest { inline-size: 64px; block-size: 64px; border-radius: 20px; }
    .mhero__logo { inline-size: 44px; block-size: 44px; }
    .countdown-rings { gap: 4px; }
    .cd-ring, .cd-ring svg, .cd-ring__num { inline-size: 44px; }
    .cd-ring svg, .cd-ring__num { block-size: 44px; }
    .cd-ring__num { font-size: .9rem; }
    .cd-ring__label { font-size: .68rem; }
    .mhero__summary { gap: var(--space-2); }
    .msum { font-size: .76rem; }
    .tl__ev { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); }
    .tl__card { padding: 6px 8px; gap: 6px; }
    .tl__player { font-size: .82rem; }
    .tl__card { position: relative; }
    .tl__goal-score { position: absolute; inset-block-start: -10px; inset-inline-end: -6px; padding: 0 6px; font-size: .72rem; box-shadow: var(--shadow); }
    .lu { grid-template-columns: 22px 30px minmax(0, 1fr) auto auto auto; }
    .lu__more { display: none; }
    .pl { --pl: 34px; inline-size: 64px; }
    .pl__name { max-inline-size: 64px; font-size: .66rem; }
    .pl-ev { inline-size: 14px; block-size: 14px; padding: 1px; }
    .perf__pair { grid-template-columns: 1fr; }
    .mstat__vals { grid-template-columns: 52px minmax(0, 1fr) 52px; }
}
@media (max-width: 420px) {
    .mhero__crest { inline-size: 54px; block-size: 54px; }
    .mhero__logo { inline-size: 38px; block-size: 38px; }
    .mhero__name { font-size: .85rem; }
    .cd-ring, .cd-ring svg, .cd-ring__num { inline-size: 38px; }
    .cd-ring svg, .cd-ring__num { block-size: 38px; }
    .cd-ring__num { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mhero.is-goal, .mhero__goals.is-changed, .tl__ev.is-new .tl__card, .stream-player__play, .entity-nav__item--live svg, .entity-nav.is-menu.is-open .entity-nav__track { animation: none !important; }
    .entity-nav__chevron { transition: none; }
}

/* Whole fixtures row opens the match centre (stretched link, keyboard focusable). */
.match:has(.match__link) { position: relative; cursor: pointer; transition: background-color .15s ease; }
.match:has(.match__link):hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.match__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.match__link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Score pairs follow the page direction: each number stays on its team's side. */
.score-pair { display: inline-flex; align-items: center; gap: .35em; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.score-pair b { font-weight: 800; }
.score-pair i { font-style: normal; opacity: .6; }
/* Winner's number in the brand colour (match cards, head-to-head, player matches). */
.score-pair b.is-winner { color: var(--accent-strong); }

/* ==========================================================================
   Entity identity — shared building blocks of the four entity pages
   (match · competition · team · player): ONE stat tile, ONE header chip,
   ONE leader card behaviour, ONE heading rhythm. Declared last on purpose:
   it overrides the earlier page-specific variants.
   ========================================================================== */

/* Stat tile — team squad facts, player header numbers, player season cards. */
.squad-facts, .stat-cards, .comp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); }
.squad-facts li, .stat-card, .comp-stat {
    display: grid; justify-items: center; align-content: center; gap: 2px;
    min-block-size: 84px; padding: var(--space-3) var(--space-2);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
    text-align: center;
}
.squad-facts strong, .stat-card__value, .comp-stat dd {
    margin: 0; color: var(--text); font: 800 1.65rem/1.1 var(--font-num); font-variant-numeric: tabular-nums;
}
.squad-facts span, .stat-card__label, .comp-stat dt { color: var(--text-muted); font-size: .8rem; font-weight: 700; }
/* Inside the header card the tiles sit on the entity gradient. */
.comp-hero .comp-stat { background: color-mix(in srgb, var(--surface) 82%, transparent); box-shadow: none; backdrop-filter: blur(6px); }
.stat-card--goals .stat-card__value, .stat-card--clean_sheets .stat-card__value { color: var(--comp-ink); }

/* Header chip — the same pill in every header card. */
.comp-hero__meta li, .mhero__chips li, .mhero__round {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--border);
    color: var(--text-muted); font-size: .82rem; font-weight: 700; line-height: 1.4;
}
.mhero__chips svg, .comp-hero__chip-img { flex: none; }

/* Header title rhythm: the match card's H1 reads like the other entity titles. */
.mhero__title { color: var(--text); font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); }

@media (max-width: 760px) {
    .squad-facts, .comp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .squad-facts strong, .stat-card__value, .comp-stat dd { font-size: 1.4rem; }
    /* Leader cards: a swipeable strip instead of a tall stack, so the section bar shows sooner. */
    .comp-leaders {
        display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); padding-block-end: 2px;
    }
    .comp-leaders::-webkit-scrollbar { display: none; }
    .comp-leader { flex: 0 0 min(80%, 300px); scroll-snap-align: start; }
}

/* Accent text inside entity pages follows the entity colour (readable ink), not the site green. */
.comp-hero__meta .comp-hero__country, .player-card__role { color: var(--comp-ink); }

/* Lazy panels fill in after a tab choice: never let the browser pick their content as a
   scroll anchor, or the inserted HTML would push the page away from the panel start. */
.comp [data-panel-body] { overflow-anchor: none; }

@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Contact page: e-mail + social accounts card (admin → ads & AdSense → contact e-mail). */
.contact-card {
    display: grid; gap: var(--space-2); margin-block-end: var(--space-5); padding: var(--space-4) var(--space-5);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.contact-card__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.contact-card__label { color: var(--text-muted); font-size: .84rem; font-weight: 700; }
.contact-card__value { color: var(--accent-strong); font-weight: 800; }
.contact-card__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contact-card__links a { color: var(--accent-strong); font-weight: 700; }
.contact-card__hint { color: var(--text-faint); font-size: .8rem; }

/* ==========================================================================
   Community chrome (every page): header account control, avatar, buttons,
   chips, drawer account card, app store links. Page-level community styles
   (account pages, comments) live in community.css.
   ========================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-block-size: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: 12px;
    font: inherit; font-size: .9rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--accent-solid); color: var(--on-accent-solid); }
.btn--primary:hover { background: var(--accent-strong); box-shadow: 0 8px 20px -12px var(--accent); }
.btn--ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn--ghost:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent-strong); }
.btn--text { min-block-size: 32px; padding: 4px 8px; background: none; color: var(--text-muted); }
.btn--text:hover { color: var(--text); background: var(--surface-2); }
.btn--danger-text { color: var(--live); }
.btn--danger-text:hover { color: var(--live); background: var(--live-soft); }
.btn--google { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn--google:hover { border-color: #4285f4; box-shadow: 0 6px 18px -12px #4285f4; }
.btn--block { display: flex; inline-size: 100%; }
.btn--lg { min-block-size: 48px; font-size: .98rem; }
.btn--sm { min-block-size: 32px; padding: 4px 12px; font-size: .82rem; border-radius: 10px; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
    background: var(--surface-2); color: var(--text-muted); font-size: .72rem; font-weight: 700; line-height: 1.5;
}
.chip--ok { background: var(--accent-soft); color: var(--accent-strong); }
.chip--warn { background: var(--amber-soft); color: var(--amber); }
.chip--danger { background: var(--live-soft); color: var(--live); }

.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.avatar--sm { inline-size: 30px; block-size: 30px; font-size: .8rem; }
.avatar--md { inline-size: 40px; block-size: 40px; font-size: .95rem; }
.avatar--lg { inline-size: 64px; block-size: 64px; font-size: 1.5rem; }
.avatar--xl { inline-size: 96px; block-size: 96px; font-size: 2.2rem; }
.avatar--letter {
    background: hsl(var(--hue, 160) 55% 42%); color: #fff; font-weight: 800; text-transform: uppercase;
    user-select: none;
}

/* Header: sign-in button / avatar menu (desktop only; phones use the drawer card). */
.account-btn {
    display: inline-flex; align-items: center; gap: 6px; block-size: 40px; padding-inline: 12px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
    font-size: .86rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.account-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent-strong); box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.account-menu { position: relative; }
.account-menu__toggle {
    display: inline-flex; align-items: center; gap: 4px; block-size: 40px; padding: 4px 6px 4px 4px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); cursor: pointer;
}
[dir="rtl"] .account-menu__toggle { padding: 4px 4px 4px 6px; }
.account-menu__toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-strong); }
.account-menu__chev { transition: transform .2s ease; }
.account-menu__toggle[aria-expanded="true"] .account-menu__chev { transform: rotate(180deg); }
.account-menu__panel {
    position: absolute; z-index: 120; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
    inline-size: 240px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow-lg);
}
.account-menu__who { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-block-end: 6px; border-block-end: 1px solid var(--border); }
.account-menu__who strong { display: block; font-size: .92rem; overflow-wrap: anywhere; }
.account-menu__link {
    display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 10px; border: 0; border-radius: 10px;
    background: none; color: var(--text); font: inherit; font-size: .88rem; text-align: start; text-decoration: none; cursor: pointer;
}
.account-menu__link:hover { background: var(--surface-2); }
.account-menu__link--danger { color: var(--live); }
.account-menu__link--danger:hover { background: var(--live-soft); }

/* Drawer account card (top of the mobile drawer). */
.drawer-account { display: none; }

@media (max-width: 960px) {
    .account-btn, .account-menu { display: none; }
    .drawer-account {
        display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius);
        background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--surface-2);
    }
    .drawer-account__guest { display: flex; align-items: center; gap: var(--space-3); }
    .drawer-account__guest p { margin: 0; color: var(--text-muted); font-size: .86rem; line-height: 1.6; }
    .drawer-account__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; flex: none; border-radius: 50%; background: var(--surface); color: var(--accent-strong); }
    .drawer-account__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
    .drawer-account__member { display: flex; align-items: center; gap: var(--space-3); color: var(--text); text-decoration: none; }
    .drawer-account__name { display: grid; flex: 1; min-inline-size: 0; }
    .drawer-account__name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .drawer-account__name small { color: var(--text-muted); font-size: .78rem; }
    .drawer-account__go { color: var(--text-faint); }
    [dir="ltr"] .drawer-account__go { transform: scaleX(-1); }
    .drawer-account__logout {
        display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none;
        color: var(--live); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
    }
}

/* App store links: only rendered when real store URLs are configured. */
.app-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.app-links__copy { display: grid; gap: 2px; }
.app-links__copy strong { font-size: .95rem; }
.app-links__copy span { color: var(--text-muted); font-size: .84rem; }
.app-links__stores { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.store-badge {
    display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 6px 14px; border-radius: 12px;
    background: #0b1220; color: #fff; text-decoration: none; border: 1px solid #253048;
}
.store-badge span { display: grid; font-size: .9rem; font-weight: 800; line-height: 1.15; }
.store-badge small { font-size: .66rem; font-weight: 500; opacity: .8; }
.store-badge:hover { border-color: var(--accent); }
.app-links--footer { margin-block: 0 var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-inline-size: var(--container); margin-inline: auto; }
.app-links--drawer { padding: var(--space-3); border-radius: var(--radius); background: var(--surface-2); }
.app-links--card { margin-block-start: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

/* Carried match (kicked off on the visitor's yesterday, still playing or just finished — rule §T7). */
.carry-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px;
    background: var(--amber-soft); color: var(--amber); font-size: .64rem; font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.carry-chip time { font-family: var(--font-num); font-weight: 700; }

/* Goal ball: brand-pitch green in goal contexts (kicks keep their scored / missed / pending colours). */
:root { --ball: #5bd286; }
.msum__icon { color: var(--ball); }

/* ==========================================================================
   Paper — the content surface shared by articles and static pages
   (one block, light / dark tokens, same radius and shadow as every other card).
   ========================================================================== */
.paper {
    position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); box-shadow: var(--shadow);
}
.paper--pad, .paper__body { padding: clamp(18px, 1rem + 1.4vw, 32px); }
.article-col, .article-aside { display: grid; gap: var(--page-gap); align-content: start; min-inline-size: 0; }
.article-aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--page-gap)); }
.article-aside .news-col { padding: clamp(16px, 1rem + .6vw, 22px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }

/* ---------- Article ---------- */
.article__figure { position: relative; margin: 0; background: var(--surface-2); }
.article__image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.article__head { display: grid; gap: var(--space-3); margin-block-end: var(--space-5); }
.article__category {
    justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft);
    color: var(--accent-strong); font-size: .78rem; font-weight: 800;
}
.article__title { font-size: clamp(1.35rem, 1.05rem + 1.25vw, 2rem); font-weight: 800; line-height: 1.4; letter-spacing: -.005em; }
.article__lead {
    margin: 0; padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--accent);
    font-size: 1.08rem; font-weight: 600; color: var(--text-muted); line-height: 1.85;
}
.article__caption { margin: calc(var(--space-3) * -1) 0 var(--space-4); color: var(--text-faint); font-size: .84rem; }
.article__body { color: var(--text); }
.article__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
.article__comments { scroll-margin-block-start: calc(var(--header-h) + 12px); }

.meta-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.meta-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface-2); color: var(--text-muted); font-size: .8rem; font-weight: 700;
}
.meta-chip svg { color: var(--accent); flex: none; }
.meta-chip--soft { background: transparent; }

/* ---------- Share: a floating glass bar on the image (large screens), a plain row on phones ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.share__label { margin-inline-end: 4px; font-size: .82rem; font-weight: 800; color: var(--text-muted); }
.share__btn {
    display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; padding: 0; border: 1px solid var(--border);
    border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer;
    transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.share__btn:hover { transform: translateY(-2px); border-color: transparent; color: #fff; }
.share__btn--x:hover { background: #0f1419; }
.share__btn--facebook:hover { background: #1877f2; }
.share__btn--whatsapp:hover { background: #25d366; }
.share__btn--telegram:hover { background: #229ed9; }
.share__btn--copy:hover, .share__btn--copy.is-copied { background: var(--accent-solid); color: var(--on-accent-solid); }
.share--inline { margin-block-start: var(--space-1); }
.share--float {
    position: absolute; inset-block-end: 16px; inset-inline-end: 16px; z-index: 2;
    padding: 6px 6px 6px 12px; border: 1px solid rgb(255 255 255 / .22); border-radius: 999px;
    background: rgb(10 17 30 / .55); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 10px 30px -12px rgb(0 0 0 / .55);
}
[dir="rtl"] .share--float { padding: 6px 12px 6px 6px; }
.share--float .share__label { color: rgb(255 255 255 / .9); }
.share--float .share__btn { inline-size: 34px; block-size: 34px; border-color: transparent; background: rgb(255 255 255 / .14); color: #fff; }
@media (max-width: 760px) {
    /* Phones: the bar leaves the image and becomes a centred row under it. */
    .share--float {
        position: static; justify-content: center; padding: 12px var(--space-4) 0; border: 0; border-radius: 0;
        background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
    }
    [dir="rtl"] .share--float { padding: 12px var(--space-4) 0; }
    .share--float .share__label { color: var(--text-muted); }
    .share--float .share__btn { background: var(--surface-2); border-color: var(--border); color: var(--text); }
    .article__figure { background: var(--surface); }
}

/* ---------- Sidebar box: the article's sections ---------- */
.side-box { display: grid; gap: var(--space-4); }
.side-box__title { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 1rem; font-weight: 800; }
.side-box__title svg { color: var(--accent); }
.side-box__group { display: grid; gap: var(--space-2); }
.side-box__group + .side-box__group { padding-block-start: var(--space-3); border-block-start: 1px dashed var(--border); }
.side-box__label { font-size: .76rem; font-weight: 800; color: var(--text-faint); }

/* ---------- Static pages: the same paper block ---------- */
.static-page { max-inline-size: 880px; margin-inline: auto; display: grid; gap: var(--page-gap); }
.static-page > .paper .page-head { margin: 0 0 var(--space-5); padding-block-end: var(--space-4); border-block-end: 1px solid var(--border); }
.static-page .contact-card { margin: 0; }

@media (max-width: 960px) {
    .article-aside { position: static; }
}