/* MatchIQ. One idea carries the design: the pitch, split into three zones sized by the
   chance of a home win, a draw and an away win. Everything else stays quiet.
   Colours: jet black, moss, neon emerald (brand) + chalk for the away side and text.
   Type: Archivo only, using its width axis: condensed for names and numbers, normal for reading.
   Layout uses logical properties throughout, so right-to-left languages mirror correctly. */

@font-face { font-family: Archivo; src: url(fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Archivo; src: url(fonts/archivo-ext.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Archivo; src: url(fonts/archivo-vi.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303,U+0309,U+0323,U+1EA0-1EF9,U+20AB; }

:root {
  --black: #000; --moss: #6D8F63; --neon: #39FF88; --chalk: #E8F0E3;
  --ink: #F3F7F0; --dim: #A6B9A0;
  --line: rgba(109, 143, 99, .34); --tint: rgba(109, 143, 99, .13);
  /* Arabic and Ethiopic fall through to the fonts already on the visitor's phone: nothing to download. */
  --font: Archivo, system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans Arabic", "Geeza Pro", "Noto Sans Ethiopic", Kefa, Nyala, sans-serif;
  --wrap: 76rem; --gap: clamp(1rem, 4vw, 2rem);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--black); color: var(--ink); font: 400 1.0625rem/1.6 var(--font); font-stretch: 100%; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--moss); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--neon); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b, strong { font-weight: 700; }
small { font-size: .8125rem; color: var(--dim); }
[hidden] { display: none !important; }
.vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--dim); }
.wrap { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gap); }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 20; padding: .6rem 1rem; background: var(--neon); color: #000; font-weight: 700; }
.skip:focus { inset-block-start: 1rem; }

/* ---------- header */
.top { border-block-end: 1px solid var(--line); }
.top-in { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem 1.5rem; padding-block: .75rem; }
.brand { display: inline-flex; }
.brand img { display: block; inline-size: 128px; block-size: auto; }
.nav { grid-column: 1 / -1; display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding-block: .5rem; color: var(--dim); font-weight: 500; text-decoration: none; white-space: nowrap; border-block-end: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); border-color: var(--neon); }
.langs { position: relative; grid-column: 2; grid-row: 1; justify-self: end; }
.langs summary { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; list-style: none; font-size: .9375rem; font-weight: 500; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary:hover, .langs[open] summary { border-color: var(--moss); }
.langs ul { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + .4rem); z-index: 10; min-inline-size: 12rem; padding: .4rem; background: #070b06; border: 1px solid var(--moss); border-radius: 3px; }
.langs li a { display: block; padding: .5rem .75rem; text-decoration: none; border-radius: 2px; }
.langs li a:hover { background: var(--tint); }
.langs li a[aria-current] { color: var(--neon); font-weight: 600; }
@media (min-width: 48rem) {
  .top-in { grid-template-columns: auto 1fr auto; padding-block: 1rem; }
  .nav { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 2rem; }
  .langs { grid-column: 3; }
}
.lang-suggest { background: var(--tint); border-block-end: 1px solid var(--line); font-size: .9375rem; }
.lang-suggest .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; padding-block: .6rem; }
.lang-suggest span { color: var(--dim); }
.lang-suggest a { font-weight: 600; }
.x { margin-inline-start: auto; inline-size: 2rem; block-size: 2rem; border: 0; background: none; color: var(--dim); font: inherit; font-size: 1.375rem; line-height: 1; cursor: pointer; }
.x:hover { color: var(--ink); }

/* ---------- the pitch */
.pitch { position: relative; display: flex; block-size: clamp(6.5rem, 17vw, 12.5rem); overflow: hidden; background: var(--chalk); }
.z { flex: 1 1 0; min-inline-size: 0; }
.z-h { flex-grow: var(--h); background: var(--neon); }
.z-d { flex-grow: var(--d); background: var(--moss); }
.z-a { flex-grow: var(--a); background: var(--chalk); }
/* mown stripes */
.pitch::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 8.333%, transparent 0 16.666%); }
.mk { position: absolute; border: 0 solid rgba(0, 0, 0, .42); }
.mk-half { inset-block: 0; inset-inline-start: calc(50% - 1px); border-inline-start-width: 2px; }
.mk-circle { inset-block-start: 50%; left: 50%; block-size: 46%; aspect-ratio: 1; border-width: 2px; border-radius: 50%; transform: translate(-50%, -50%); }
.mk-spot { inset-block-start: 50%; left: 50%; inline-size: 8px; block-size: 8px; background: rgba(0, 0, 0, .5); border-radius: 50%; transform: translate(-50%, -50%); }
.mk-box { inset-block: 18%; inline-size: 12%; border-width: 2px; }
.mk-six { inset-block: 35%; inline-size: 4.5%; border-width: 2px; }
.mk-box-h, .mk-six-h { inset-inline-start: 0; border-inline-start-width: 0; }
.mk-box-a, .mk-six-a { inset-inline-end: 0; border-inline-end-width: 0; }
/* the one piece of choreography: zones grow from an even split to the forecast */
@keyframes zone { from { flex-grow: 33.3; } }
.pitch .z { animation: zone .9s cubic-bezier(.2, .7, .1, 1) .15s both; }

.bar { display: flex; gap: 2px; block-size: .5rem; }
.bar .z-a { background: var(--chalk); }

/* ---------- two teams and their chances */
.duel { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
.duel-s { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1rem; }
.duel-n { display: flex; align-items: center; gap: .6rem; min-inline-size: 0; font-weight: 800; font-stretch: 62%; font-size: clamp(2.25rem, 10.5vw, 6.25rem); line-height: .95; letter-spacing: -.01em; overflow-wrap: anywhere; }
.duel-n a { text-decoration: none; }
.duel-n a:hover { text-decoration: underline; text-decoration-color: var(--neon); text-decoration-thickness: 3px; }
.duel-n .crest { flex: none; inline-size: clamp(1.75rem, 5vw, 2.75rem); block-size: auto; aspect-ratio: 1; }
.duel-n .crest-fallback { font-size: .6875rem; }
.duel-p { font-weight: 600; font-stretch: 62%; font-size: clamp(1.75rem, 6vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--chalk); }
.is-pick > .duel-p, .duel-m.is-pick b { color: var(--neon); }
.duel-pos { flex-basis: 100%; color: var(--dim); font-size: .875rem; }
.duel-m { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--dim); }
.duel-d b { font-stretch: 62%; font-size: 1.375rem; font-variant-numeric: tabular-nums; color: var(--chalk); }
.duel-score { font-weight: 800; font-stretch: 62%; font-size: clamp(2.25rem, 8vw, 4.5rem); line-height: 1; color: var(--ink); }
.duel .pitch { margin-block-start: .9rem; }
@media (min-width: 48rem) {
  .duel { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 2rem; align-items: end; }
  .duel-s { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; row-gap: .5rem; }
  .duel-a { align-items: flex-end; text-align: end; }
  .duel-a .duel-n { flex-direction: row-reverse; }
  .duel-m { flex-direction: column; align-items: center; gap: .25rem; padding-block-end: .3rem; }
  .duel .pitch { grid-column: 1 / -1; }
  .duel-pos { flex-basis: auto; }
}

/* ---------- home */
.intro { display: grid; gap: .35rem; padding-block: clamp(1.25rem, 3vw, 2rem); }
.intro h1 { font-size: 1.125rem; font-stretch: 100%; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.intro p { color: var(--dim); font-size: .9375rem; max-inline-size: 60ch; }
@media (min-width: 62rem) { .intro { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 2rem; } .intro p { justify-self: end; text-align: end; } }

.lead { padding-block: 0 clamp(2rem, 5vw, 3.5rem); }
.lead-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1.25rem; margin-block-end: clamp(.75rem, 2vw, 1.5rem); padding-block-start: 1rem; border-block-start: 1px solid var(--line); color: var(--dim); font-size: .9375rem; }
.tag { color: var(--neon); font-weight: 600; }
.lead-ko { margin-inline-start: auto; color: var(--ink); }
.cd:not(:empty) { margin-inline-start: .6rem; padding-inline-start: .6rem; border-inline-start: 1px solid var(--line); color: var(--neon); }
.lead-foot { display: grid; gap: 1rem; margin-block-start: 1.25rem; }
.lead-foot h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); font-stretch: 80%; font-weight: 700; line-height: 1.15; }
.lead-foot h2 a { text-decoration: none; }
.lead-foot h2 a:hover { text-decoration: underline; text-decoration-color: var(--neon); }
.lead-foot p { color: var(--dim); margin-block-start: .25rem; }
@media (min-width: 48rem) { .lead-foot { grid-template-columns: 1fr auto; align-items: center; } }

.btn { display: inline-block; padding: .8rem 1.25rem; background: var(--neon); color: #000; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; border-radius: 3px; }
.btn:hover { background: var(--chalk); }
.btn-s { padding: .5rem .9rem; font-size: .9375rem; }

.chips { display: flex; gap: .25rem 1.5rem; overflow-x: auto; margin-block-end: 1rem; padding-block: .75rem; border-block: 1px solid var(--line); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: none; padding-block: .25rem; color: var(--dim); font-weight: 500; text-decoration: none; border-block-end: 2px solid transparent; }
.chips a:hover { color: var(--ink); }
.chips a[aria-current] { color: var(--ink); border-color: var(--neon); }

/* ---------- fixture lists: stacked by default, one line when the list is wide */
.fixtures { container: fx / inline-size; }
.day-h { margin-block: 2.25rem .5rem; font-size: 1.25rem; font-stretch: 80%; font-weight: 700; }
.fixtures > .day-h:first-child { margin-block-start: 1.25rem; }
.fx { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t c" "h h" "a a" "bar bar"; gap: .3rem 1rem; padding: .95rem .5rem; margin-inline: -.5rem; border-block-start: 1px solid var(--line); text-decoration: none; }
.fx:hover { background: var(--tint); }
.fx-t { grid-area: t; color: var(--dim); font-size: .875rem; font-variant-numeric: tabular-nums; }
.fx-c { grid-area: c; color: var(--dim); font-size: .875rem; }
.fx-s { display: flex; align-items: center; gap: .6rem; min-inline-size: 0; }
.fx-h { grid-area: h; } .fx-a { grid-area: a; }
.fx-n { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fx-s b { font-stretch: 75%; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--dim); }
.fx-s.is-pick b { color: var(--neon); }
.fx .bar { grid-area: bar; margin-block-start: .3rem; }
.fx .crest { flex: none; }
.fx .crest-fallback, .standings .crest-fallback, .recent .crest-fallback, .lineup .crest-fallback { display: none; }
@container fx (min-width: 44rem) {
  .fx { grid-template-columns: 4.75rem minmax(0, 1fr) minmax(7rem, 15rem) minmax(0, 1fr) 11rem; grid-template-areas: "t h bar a c"; align-items: center; gap: 0 1.25rem; }
  .no-comp .fx { grid-template-columns: 4.75rem minmax(0, 1fr) minmax(7rem, 15rem) minmax(0, 1fr); grid-template-areas: "t h bar a"; }
  [data-flat] .fx { grid-template-columns: 13rem minmax(0, 1fr) minmax(7rem, 13rem) minmax(0, 1fr) 10rem; }
  .fx-h .fx-n { order: 1; text-align: end; } .fx-h .crest { order: 2; } .fx-h b { order: 3; }
  .fx-a b { order: 1; } .fx-a .crest { order: 2; } .fx-a .fx-n { order: 3; }
  .fx .bar { margin: 0; }
  .fx-c { text-align: end; }
}
.empty { padding-block: 2rem; color: var(--dim); }
/* scheduled fixtures that do not have a preview yet */
.fx-soon:hover { background: none; }
.fx-soon .fx-n { color: var(--chalk); font-weight: 500; }
.fx-vs { display: none; grid-area: bar; color: var(--dim); text-align: center; }
@container fx (min-width: 44rem) { .fx-vs { display: block; } }

.crest { display: inline-block; vertical-align: middle; object-fit: contain; }
.crest-fallback { display: inline-grid; place-items: center; inline-size: var(--s); block-size: var(--s); border: 1px solid var(--moss); border-radius: 50%; color: var(--dim); font-size: calc(var(--s) * .3); font-stretch: 75%; font-weight: 700; letter-spacing: 0; line-height: 1; }

/* ---------- page headers, breadcrumbs */
.crumbs { padding-block: 1.25rem .25rem; color: var(--dim); font-size: .875rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.page-head { padding-block-end: 1.5rem; }
.page-head > h1:first-child { padding-block-start: 2rem; }
h1 { font-size: clamp(2rem, 5.2vw, 3.25rem); font-stretch: 75%; font-weight: 800; line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.lede { margin-block-start: .75rem; color: var(--dim); max-inline-size: 62ch; }
.two-col { display: grid; gap: 2.5rem; margin-block-end: 3rem; }
@media (min-width: 62rem) { .two-col { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }

.panel { padding: 1.25rem; border: 1px solid var(--line); }
.panel h2 { margin-block-end: .75rem; font-size: 1.0625rem; font-weight: 700; }
.panel .fx:first-child { border-block-start: 0; }
.table-scroll { overflow-x: auto; container-type: inline-size; }
.standings { inline-size: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.standings th, .standings td { padding: .45rem .4rem; text-align: center; font-weight: 400; border-block-start: 1px solid var(--line); white-space: nowrap; }
.standings thead th { border: 0; color: var(--dim); font-size: .8125rem; }
.standings .tl { text-align: start; font-weight: 600; }
.standings td:first-child { color: var(--dim); }
@container (max-width: 27rem) { .hide-sm { display: none; } }

.form { display: inline-flex; gap: 3px; vertical-align: middle; }
.fb { display: inline-grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; font-size: .6875rem; font-weight: 700; line-height: 1; letter-spacing: 0; }
.fb-W { background: var(--neon); color: #000; }
.fb-D { background: var(--moss); color: #000; }
.fb-L { box-shadow: inset 0 0 0 1px var(--dim); color: var(--dim); }

/* ---------- match preview */
.match-layout { display: grid; gap: 3rem; padding-block-end: 3rem; }
@media (min-width: 64rem) { .match-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: 4rem; align-items: start; } }
.story-head { padding-block: .75rem 1.5rem; }
.kicker { margin-block-end: .6rem; color: var(--neon); font-weight: 600; }
.meta { margin-block-start: .9rem; color: var(--dim); font-size: .875rem; }
.story h2 { margin-block: 2.75rem .75rem; font-size: 1.5rem; font-stretch: 80%; font-weight: 700; line-height: 1.2; }
.story p, .story li { max-inline-size: 68ch; }
.story > section > p + * { margin-block-start: 1rem; }

.scoreboard { padding-block: 1.25rem 1rem; border-block: 1px solid var(--line); }
.scoreboard .duel-n { font-size: clamp(2rem, 7.5vw, 4rem); }
.sb-ko { margin-block-end: 1rem; color: var(--dim); font-size: .9375rem; }
.sb-ko time { color: var(--ink); }
.pickline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; margin-block-start: .75rem; color: var(--dim); font-size: .9375rem; }
.pickline b { color: var(--ink); }

.notice { margin-block-end: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--moss); }
.notice p + p { margin-block-start: .5rem; color: var(--dim); }
.final { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.final > span:first-child { color: var(--dim); font-size: .875rem; }
.final strong { font-size: 1.375rem; font-stretch: 80%; }
.mark { display: inline-flex; align-items: center; gap: .45rem; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.mark::before { content: ""; inline-size: .7rem; block-size: .7rem; border-radius: 50%; }
.mark.ok { color: var(--neon); } .mark.ok::before { background: var(--neon); }
.mark.miss { color: var(--dim); } .mark.miss::before { box-shadow: inset 0 0 0 2px var(--dim); }

.quick { margin-block-start: 1.75rem; padding: 1.25rem; background: var(--tint); }
.story .quick h2 { margin: 0 0 1rem; font-size: 1.0625rem; font-stretch: 100%; }
.quick dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; }
@media (min-width: 36rem) { .quick dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quick dt { color: var(--dim); font-size: .8125rem; line-height: 1.3; }
.quick dd { margin-block-start: .15rem; font-size: 1.5rem; font-stretch: 75%; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.quick dd small { font-size: .9375rem; font-weight: 500; color: var(--neon); }
.quick .dd-s { font-size: 1.0625rem; font-stretch: 85%; }
.standfirst { margin-block-start: 1.25rem; padding-block-start: 1.1rem; border-block-start: 1px solid var(--line); font-size: 1.125rem; }

.facts li { position: relative; padding-inline-start: 1.4rem; }
.facts li + li { margin-block-start: .6rem; }
.facts li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; inline-size: .5rem; block-size: .5rem; background: var(--neon); }

.recent-cols, .cols { display: grid; gap: 1.5rem; }
@media (min-width: 36rem) { .recent-cols, .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.recent h3, .lineup h4 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block-end: .5rem; font-size: 1rem; font-weight: 700; }
.recent li { display: grid; grid-template-columns: auto 1.25rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding-block: .45rem; border-block-start: 1px solid var(--line); font-size: .9375rem; }
.recent .venue { color: var(--dim); font-size: .8125rem; text-align: center; }
.recent .sc { font-weight: 600; font-variant-numeric: tabular-nums; }
.recent.wide { max-inline-size: 44rem; }
.h2h li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding-block: .45rem; border-block-start: 1px solid var(--line); font-size: .9375rem; }
.h2h time { color: var(--dim); }
.lineups { margin-block-start: 1.5rem; }
.lineups h3 { margin-block-end: .75rem; font-size: 1.0625rem; }
.lineup li { display: flex; gap: .75rem; padding-block: .3rem; border-block-start: 1px solid var(--line); font-size: .9375rem; }
.lineup .num { inline-size: 1.5rem; color: var(--dim); font-variant-numeric: tabular-nums; text-align: end; }
.scores { display: flex; flex-wrap: wrap; gap: .5rem; }
.scores li { padding: .4rem .8rem; border: 1px solid var(--line); color: var(--dim); font-size: .9375rem; }
.scores b { color: var(--ink); font-size: 1.0625rem; }
.verdict p { font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
.qa + .qa { margin-block-start: 1.25rem; }
.qa h3 { font-size: 1.0625rem; font-weight: 700; }
.qa p { margin-block-start: .25rem; color: var(--dim); }
.disclaimer { margin-block-start: 2.5rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); color: var(--dim); font-size: .875rem; }
.side { display: grid; gap: 1.5rem; }

/* ---------- results and archive lists */
.record { margin-block-end: 2rem; }
.record-n { color: var(--dim); }
.record-n b { margin-inline-end: .5rem; color: var(--neon); font-size: clamp(3rem, 10vw, 5rem); font-stretch: 62%; font-weight: 800; line-height: 1; }
.record-bar { display: flex; block-size: .75rem; margin-block: 1rem; box-shadow: inset 0 0 0 1px var(--dim); }
.record-bar span { inline-size: calc(var(--ok) * 1%); background: var(--neon); }
.record dl { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; }
.record dl div { display: flex; flex-direction: row-reverse; align-items: baseline; gap: .4rem; }
.record dt { color: var(--dim); font-size: .9375rem; }
.record dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.results { margin-block-end: 3rem; container: res / inline-size; }
.res { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m k" "d d"; gap: .2rem 1rem; padding-block: .8rem; border-block-start: 1px solid var(--line); }
.res > a { grid-area: m; font-weight: 600; text-decoration: none; }
.res > a:hover { text-decoration: underline; text-decoration-color: var(--neon); }
.res > a b { margin-inline: .3rem; color: var(--neon); }
.res.miss > a b { color: var(--ink); }
.res > .mark { grid-area: k; }
.res > time, .res-c, .res-pick { color: var(--dim); font-size: .875rem; }
.res > time { grid-area: d; }
.res-c, .res-pick { display: none; }
@container res (min-width: 44rem) {
  .res { grid-template-columns: 6.5rem minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr) 6.5rem; grid-template-areas: "d m c p k"; align-items: baseline; }
  .res-c { display: block; grid-area: c; }
  .res-pick { display: block; grid-area: p; }
}

/* ---------- team, text pages */
.team-title { display: flex; align-items: center; gap: 1.25rem; padding-block-start: .5rem; }
.team-title .crest { flex: none; }
.team-body { display: grid; gap: 2.5rem; padding-block-end: 3rem; }
.team-body h2 { margin-block-end: .75rem; font-size: 1.5rem; font-stretch: 80%; font-weight: 700; }
.prose { max-inline-size: 46rem; padding-block: 2.5rem 4rem; }
.prose h2 { margin-block: 2.25rem .5rem; font-size: 1.375rem; font-stretch: 85%; font-weight: 700; }
.prose p { color: var(--chalk); }
.root-pick { display: grid; justify-items: center; gap: 2rem; padding-block: 20vh; }
.lang-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.5rem; font-weight: 600; }

/* ---------- advertising and affiliate (always labelled) */
.ad { margin-block: 1.5rem; min-block-size: 6rem; text-align: center; }
.ad-label, .aff-label { color: var(--dim); font-size: .75rem; }
.ad-placeholder { display: grid; place-content: center; gap: .25rem; border: 1px dashed var(--line); color: var(--dim); font-size: .8125rem; }
.fixtures > .ad { margin-block: 0; padding-block: 1rem; border-block-start: 1px solid var(--line); }
.age { display: inline-grid; place-items: center; min-inline-size: 1.9rem; block-size: 1.9rem; padding-inline: .2rem; border: 1px solid var(--dim); border-radius: 50%; color: var(--dim); font-size: .6875rem; font-weight: 700; line-height: 1; }
.aff-box { margin-block: 2rem 0; padding: 1.25rem; border: 1px solid var(--moss); background: rgba(57, 255, 136, .05); }
.side .aff-box { margin: 0; }
.aff-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: .5rem; }
.aff-title { font-size: 1.25rem; font-stretch: 80%; font-weight: 700; line-height: 1.2; }
.aff-body { margin-block: .4rem 1rem; color: var(--dim); font-size: .9375rem; }
.aff-small { margin-block-start: .9rem; color: var(--dim); font-size: .75rem; line-height: 1.45; }
.aff-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-block-end: 1rem; padding: .7rem 1rem; border: 1px solid var(--line); font-size: .9375rem; }
.aff-strip-text { flex: 1 1 16rem; }
.aff-sticky { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 15; display: flex; align-items: center; gap: .75rem; padding: .6rem var(--gap); padding-block-end: max(.6rem, env(safe-area-inset-bottom)); background: #070b06; border-block-start: 1px solid var(--moss); font-size: .9375rem; }
.aff-sticky-text { flex: 1; min-inline-size: 0; }
.aff-sticky .x { margin: 0; }

/* ---------- footer */
.foot { margin-block-start: 3rem; border-block-start: 1px solid var(--line); font-size: .9375rem; }
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; padding-block: 2.5rem; }
.foot-brand { grid-column: 1 / -1; }
.foot-brand p { margin-block-start: .75rem; max-inline-size: 34ch; color: var(--dim); font-size: .875rem; }
.foot h2 { margin-block-end: .6rem; color: var(--dim); font-size: .8125rem; font-weight: 500; }
.foot li + li { margin-block-start: .35rem; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { text-decoration: underline; text-decoration-color: var(--neon); }
.foot nav a[aria-current] { color: var(--neon); }
.foot-base { padding-block: 1.25rem 2rem; border-block-start: 1px solid var(--line); color: var(--dim); font-size: .8125rem; }
.foot-base p + p { margin-block-start: .6rem; }
.foot-base .age { margin-inline-end: .4rem; }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: auto; } }

/* ---------- scripts without a condensed cut, right-to-left, reduced motion */
:lang(ar), :lang(am) { letter-spacing: 0; }
:lang(ar) body, :lang(am) body { line-height: 1.75; }
:lang(ar) h1, :lang(am) h1 { line-height: 1.3; }
:lang(ar) .duel-n, :lang(am) .duel-n { line-height: 1.1; }
@media (prefers-reduced-motion: reduce) { .pitch .z { animation: none; } html { scroll-behavior: auto; } }
@media print { .top, .foot, .aff, .ad, .lang-suggest, .chips { display: none !important; } body { background: #fff; color: #000; } }