/* Floodlit night match. Dark only, no framework.
   The match list is one sheet. Every league band and match row shares the same columns:
   star (--c-star), time (--c-time), then teams with the score on the right edge. Green means
   live; red is only ever a goal or a dangerous attack; gold is a favourite. */

/* The font carries two sets of vertical metrics (1000/200 and 1089/261). Windows and Linux can
   pick different ones and shift text a pixel or two; the overrides pin one set everywhere. */
@font-face { font-family: "Barlow SC"; font-weight: 500; font-display: swap; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; src: url("../fonts/barlow-sc-latin-500.woff2") format("woff2"); 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: "Barlow SC"; font-weight: 700; font-display: swap; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; src: url("../fonts/barlow-sc-latin-700.woff2") format("woff2"); 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: "Barlow SC"; font-weight: 500; font-display: swap; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; src: url("../fonts/barlow-sc-latin-ext-500.woff2") format("woff2"); 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: "Barlow SC"; font-weight: 700; font-display: swap; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; src: url("../fonts/barlow-sc-latin-ext-700.woff2") format("woff2"); 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; }

:root {
	--night: #0d1522;
	--stand: #141f30;
	--stand-hi: #1b283c;
	--line: #223047;
	--chalk: #edf1f7;
	--mist: #8595ac;
	--pitch: #3bd671;
	--alarm: #ff3d52;
	--gold: #ffc83d;
	--ai: #6cc4ff;
	/* A price chip: a best price, lit like a board under floodlights. */
	--chip: linear-gradient(180deg, #2a3b56, #1e2c42);
	--chip-hover: linear-gradient(180deg, #34486a, #26364f);
	--chip-ai: linear-gradient(180deg, rgba(108, 196, 255, .34), rgba(108, 196, 255, .16));
	--chip-edge: inset 0 1px rgba(255, 255, 255, .09), 0 1px 2px rgba(0, 0, 0, .45);
	--chip-ai-edge: inset 0 0 0 1px rgba(108, 196, 255, .6), 0 1px 2px rgba(0, 0, 0, .45);

	--c-chev: 20px;
	--c-star: 36px;
	--c-time: 48px;
	--star-icon: 21px;
	--edge: 16px;
	--top: 97px;
	--radius: 12px;
	/* The desktop side column: three of twelve columns (a quarter less 12px) plus 30px for the chat. */
	--side: calc(25% + 18px);
	color-scheme: dark;
}

@media (min-width: 900px) { :root { --top: 65px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Read by screen readers and search engines, not shown. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The scrollbar is always there, so a short tab (Starred, a search) does not shift the page
   sideways when the scrollbar comes and goes. Phones overlay theirs, so this costs them nothing. */
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; }

/* Moving between pages (a match, back to the list, a tab from a match page) fades instead of
   blanking and repainting, and the header holds still. Browsers without it just navigate. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: .15s; }
}
.top { view-transition-name: top; }
body {
	margin: 0;
	background: var(--night);
	color: var(--chalk);
	font: 500 14px/1.3 "Barlow SC", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
img { display: block; flex: none; }
summary { list-style: none; cursor: pointer; }
/* The list and its controls behave like an app: clicking them never places a text cursor or
   highlights a team name. Details, team and league pages stay selectable. */
.top, .bar, .lg-h, .m, .sx-r, .dt-tabs, .panel > summary, .jump { -webkit-user-select: none; user-select: none; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--chalk); outline-offset: -2px; border-radius: 6px; }

/* A chevron that points down when its panel is open. */
.chev::after, .panel > summary::after, .lg-h::after {
	content: "";
	width: 7px;
	height: 7px;
	border: solid var(--mist);
	border-width: 0 2px 2px 0;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s;
}
details:not([open]) > .lg-h::after, details:not([open]) > summary::after { transform: rotate(-45deg); }

/* ---- Grid: 12 columns; children span all 12 until the md breakpoint ---- */

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--edge); align-items: start; }
.cols > * { grid-column: span 12; min-width: 0; }

@media (min-width: 900px) {
	.md-3 { grid-column: span 3 !important; }
	.md-4 { grid-column: span 4 !important; }
	.md-6 { grid-column: span 6 !important; }
	.md-8 { grid-column: span 8 !important; }
	.md-9 { grid-column: span 9 !important; }
	/* The page itself: the list, then a side column 30px wider than three of the twelve columns,
	   so the chat room has room. */
	.wrap.cols { grid-template-columns: minmax(0, 1fr) var(--side); }
	.wrap.cols > main, .wrap.cols > .side { grid-column: auto !important; }
}

/* ---- Top bar: brand and search, then tabs; one row on desktop ---- */

.top { position: sticky; top: 0; z-index: 10; background: rgba(13, 21, 34, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
/* Phone: brand and search on one row, tabs underneath. Desktop: the same two columns as the page,
   so the search box is exactly as wide as the side panel below it. */
.top-in { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 52px 44px; grid-template-areas: "brand search" "tabs tabs"; align-items: center; column-gap: 16px; }
.top-main { display: contents; }
@media (min-width: 900px) {
	.top-in { grid-template-columns: minmax(0, 1fr) var(--side); grid-template-rows: 64px; grid-template-areas: none; column-gap: var(--edge); }
	.top-main { grid-column: 1; display: flex; align-items: center; align-self: stretch; gap: 32px; min-width: 0; }
	.top-in .search { grid-area: 1 / 2; max-width: none; }
}

.brand { grid-area: brand; display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
/* The stopwatch from the favicon, glowing like the live dot it is built around. */
.brand svg { width: 20px; height: 20px; flex: none; fill: currentColor; color: var(--pitch); filter: drop-shadow(0 0 5px rgba(59, 214, 113, .55)); }
.brand-t { display: grid; gap: 3px; }
.brand-t small { color: var(--mist); font-size: 11px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 379px) { .brand-t small { display: none; } }

.tabs { grid-area: tabs; display: flex; align-self: stretch; gap: 24px; overflow-x: auto; scrollbar-width: none; font-size: 15px; }
.tab { position: relative; display: flex; align-items: center; gap: 4px; padding-top: 5px; flex: none; color: var(--mist); font-weight: 700; white-space: nowrap; }
.tab:hover, .tab[aria-current] { color: var(--chalk); }
.tab[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--chalk); }
.tab .n { font-size: 12px; font-weight: 500; color: var(--mist); }
.tab-live .n { color: var(--pitch); font-weight: 700; }
/* The star turns gold, like a starred match's, once there is something to follow; the label keeps
   the tabs' colours. */
.tab-starred.has::before { background: var(--gold); }
/* A goal in a followed match happened while the visitor was away and is not on screen yet. */
.tab-starred[data-unseen]::before { background: var(--alarm); animation: unseen 1.2s ease-in-out infinite; }
@keyframes unseen { 50% { opacity: .35; } }
.tab-starred::before { content: ""; width: 14px; height: 14px; margin-right: 2px; background: currentColor; -webkit-mask: var(--star-fill) center / contain no-repeat; mask: var(--star-fill) center / contain no-repeat; }

.search { grid-area: search; position: relative; justify-self: end; width: 100%; max-width: 260px; }
.search input { width: 100%; height: 36px; padding: 0 15px; background: var(--stand); border: 1px solid var(--line); border-radius: 8px; }
.search input::placeholder { color: var(--mist); }
.search input:focus { outline: none; border-color: var(--mist); }
/* Collapse or expand every league, from the list's top strip. */
.fold { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-right: calc(4px - var(--edge)); padding: 0; background: transparent; border: 0; border-radius: 6px; color: var(--mist); cursor: pointer; }
.fold::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--fold-in) center / contain no-repeat; mask: var(--fold-in) center / contain no-repeat; }
.fold[data-state="closed"]::before { -webkit-mask-image: var(--fold-out); mask-image: var(--fold-out); }
.fold:hover { color: var(--chalk); background: var(--stand-hi); }

main, .side { padding-top: var(--edge); padding-bottom: 48px; }

/* ---- The list's top strip: the window (hours either side of now) and collapse all ---- */

/* Inside the sheet, so the list and the side panel start on the same line. */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 var(--edge); border-bottom: 1px solid var(--line); }
.ctl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ctl-l { color: var(--mist); font-size: 13px; }
/* A segmented control: one outline, the chosen segment filled. */
.seg { display: inline-flex; flex: none; padding: 2px; border: 1px solid var(--line); border-radius: 16px; }
.seg button { height: 26px; padding: 0 11px; background: transparent; border: 0; border-radius: 13px; color: var(--mist); font-size: 13px; font-weight: 700; cursor: pointer; }
.seg button:hover { color: var(--chalk); }
.seg button[aria-pressed="true"] { background: var(--chalk); color: var(--night); }
@media (max-width: 599px) {
	.ctl-l { display: none; }
	.seg button { padding: 0 9px; }
}

/* The list by time: no league bands to fold or jump to, so each row names its competition. */
.by-time .fold { visibility: hidden; }
.m-lg { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--mist); font-size: 11px; line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-lg .flag { width: 14px; height: 10px; }
/* Wider screens: beside the teams, left of the scores, where the row has room to spare. It steps
   aside while "Goal!" or "No goal" holds that spot. */
@media (min-width: 600px) {
	.m-lg { position: absolute; top: 50%; right: calc(var(--edge) + 58px); max-width: 38%; margin-top: -7px; justify-content: flex-end; font-size: 12px; }
	.m[data-goal] .m-lg, .m[data-ng] .m-lg { visibility: hidden; }
	/* A live row's minute sits there already, so its league steps further left. */
	.m:is([data-b="live"], [data-b="fin"]) .m-lg { right: calc(var(--edge) + 93px); max-width: 30%; }
	/* With prices in the list, every row's league steps left of the widest pill and guess, so the
	   leagues still end in one line whatever each row shows. */
	.sheet:has(.m:not([hidden]) .m-o) .m-lg { right: calc(var(--edge) + 280px); max-width: 24%; }
	.sheet:has(.m:not([hidden]) .m-o) .m:has(.m-lg) .m-n { max-width: calc(76% - 300px); }
	/* A narrow list keeps only the league's flag, which names it on hover, before the name would
	   run into a long team name: sooner when prices take the right of the row. Team names stop
	   short of the flag. */
	@container sheet (max-width: 560px) {
		.m-lgn { display: none; }
		.m[data-b="up"]:has(.m-lg) .m-n { max-width: calc(100% - 84px); }
	}
	@container sheet (max-width: 760px) {
		.sheet:has(.m:not([hidden]) .m-o) .m-lgn { display: none; }
		.sheet:has(.m:not([hidden]) .m-o) .m:has(.m-lg) .m-n { max-width: calc(100% - 304px); }
	}
}
.searching .bar, .searching .more { display: none; }
.more { display: block; width: 100%; height: 48px; background: transparent; border: 0; border-top: 1px solid var(--line); color: var(--mist); font-size: 14px; font-weight: 700; cursor: pointer; }
.more:hover { background: var(--stand-hi); color: var(--chalk); }

/* Desktop: the strip stays in view under the header while the list scrolls, and the league bands
   stick just below it. Phones let it scroll away: header, strip and band would take too much. */
@media (min-width: 900px) {
	.bar { position: sticky; top: var(--top); z-index: 3; background: var(--stand); }
	.sheet .lg-h { top: calc(var(--top) + 48px); }
	.sheet .lg { scroll-margin-top: calc(var(--top) + 48px); }
}

/* ---- The sheet: one panel, league bands, compact rows ---- */

/* overflow: clip rounds the corners without breaking the sticky league bands. */
.sheet { container: sheet / inline-size; background: var(--stand); border-radius: var(--radius); overflow: clip; }
/* The band is the divider; only collapsed bands stacked on each other need a hairline between them. */
.lg:not([open]) + .lg { border-top: 1px solid var(--line); }

.lg-h { position: sticky; top: var(--top); z-index: 2; display: grid; grid-template-columns: var(--c-star) var(--c-time) minmax(0, 1fr) auto auto 32px; align-items: center; height: 40px; padding-right: 4px; background: var(--stand-hi); font-weight: 700; }
/* The flag and the clock below it centre between the star icon and the crests rather than in
   their column: the star's button leaves room right of its icon, so the column's own centre sits
   too far right. Padding on the right by that room moves them halfway back. */
.lg-h .flag { justify-self: center; margin-right: calc((var(--c-star) - var(--star-icon)) / 2); }

/* Rows and bands start a few pixels in, past the expand chevron's slot, which every row keeps so
   the stars line up whether it shows or not; the score already ends on the dividers' right end. */
.m, .lg-h { padding-left: calc(var(--edge) + var(--c-chev) - (var(--c-star) - var(--star-icon)) / 2); }
.lg-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The league's name links to its page; the rest of the band folds it. */
a.lg-n { justify-self: start; max-width: 100%; }
a.lg-n:hover, a.lg-n:focus-visible { color: var(--pitch); text-decoration: underline; text-underline-offset: 3px; }
/* The country is its own right-aligned column, so countries line up down the page. */
.lg-c { padding-left: var(--edge); color: var(--mist); font-weight: 500; white-space: nowrap; }
.lg-count { min-width: 28px; color: var(--mist); font-size: 13px; font-weight: 500; text-align: right; }
.lg[open] .lg-count { visibility: hidden; }
.lg-h::after { justify-self: center; }

.flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; }
span.flag { background: var(--line); }

.m { position: relative; display: grid; grid-template-columns: var(--c-star) var(--c-time) minmax(0, 1fr); align-items: center; min-height: 52px; transition: background-color .6s; }
.m::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
/* No line under a league's last visible row; the script marks it, since filters hide rows after it. */
.m.last::after, .m:last-child::after, .m:has(+ .dev-bar)::after { display: none; }
.m:hover { background: rgba(255, 255, 255, .02); }

.m-t { color: var(--mist); font-size: 13px; text-align: center; line-height: 1.15; white-space: nowrap; }
.m .m-t { padding-right: calc((var(--c-star) - var(--star-icon)) / 2); }
.m-t small { display: block; font-size: 11px; }
/* Past kickoff with no live coverage: only Starred and search show it, under its kickoff time. */
.m.await .m-t::after { content: "Awaiting"; display: block; font-size: 11px; }
/* The match card lists the kickoff under the score, so its clock needs no day line. */
.mh .m-t small { display: none; }
/* One column the width of the row, however long a name: the names' limits are shares of it. */
.m-x { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px calc(var(--edge) + 22px) 8px 0; min-width: 0; }
.m-r { display: flex; align-items: center; gap: 8px; line-height: 18px; }
.m-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-s { position: relative; flex: none; margin-left: auto; padding-left: 20px; font-size: 15px; font-weight: 700; text-align: right; }

.crest { width: 16px; height: 16px; flex: none; object-fit: contain; }
span.crest { display: grid; place-items: center; border-radius: 50%; background: var(--line); color: var(--mist); font-size: 9px; font-weight: 700; line-height: 1; }

/* Finished: the losing side steps back, so the result reads before the numbers do. */
.m-r.lo { color: var(--mist); }
.m-r.lo .m-s { font-weight: 500; }

/* Live: green minute and score, and a green edge on the row. */
.m[data-b="live"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pitch); }
.m[data-b="live"] .m-t, .m[data-b="live"] .m-s, .mh[data-b="live"] .m-t, .mh[data-b="live"] .m-s { color: var(--pitch); font-weight: 700; }

/* The clock's apostrophe blinks while the clock runs: a second on, a second off. */
.ap { font-style: normal; animation: tick 2s linear infinite; }
/* The match card counts seconds, which already shows the clock running. */
.mh .ap { animation: none; }
@keyframes tick {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* A live row's minute leaves the time column for the middle of the row, just left of the scores,
   where the eye already is: 10px from a one-digit score, as the attack dot is from it. The names
   stop short of it. It stays put through a goal: "Goal!" takes its own spot to its left. */
.m-x { grid-column: 3; }
.m[data-b="live"] .m-t { position: absolute; top: 50%; right: calc(var(--edge) + 22px + 19px); translate: 0 -50%; padding-right: 0; font-size: 14px; text-align: right; }
/* Phones list the league above the teams, so the minute centres on the team lines below it. */
@media (max-width: 599px) { .m[data-b="live"]:has(.m-lg) .m-t { top: calc(50% + 8px); } }
.m[data-b="live"] .m-n { max-width: calc(100% - 113px); }
/* Before kickoff the best prices sit in the same spot, as one pill: 1, X and 2. The row's link
   still takes the click. Once the match starts the pill goes; the Odds tab keeps the prices. */
.m-o { position: absolute; top: 50%; right: calc(var(--edge) + 22px); display: flex; gap: 4px; translate: 0 -50%; pointer-events: none; }
.m-og { display: flex; gap: 3px; }
.m-og > * { display: grid; justify-items: center; width: 44px; padding: 3px 0 4px; border-radius: 7px; background: var(--chip); box-shadow: var(--chip-edge); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.m-og > [data-tip] { pointer-events: auto; cursor: pointer; }
/* Prices that open a bookmaker's site carry the outbound arrow, like links elsewhere. */
.m-og > a { position: relative; }
.m-og > a::after { content: ""; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; background: #c3cddb; -webkit-mask: var(--ext) center / contain no-repeat; mask: var(--ext) center / contain no-repeat; }
.m-og > a:hover::after { background: #fff; }
.m-og > a.ai::after { background: var(--ai); }
.m-og > [data-tip]:hover { background: var(--chip-hover); }
.m-o small { color: var(--mist); font-size: 10px; font-weight: 500; white-space: nowrap; }
/* The model's guess: its result and goal line lit in the pill, and its score beside a spark,
   which tells the chances on hover or focus. */
.m-og > .ai, .m-og > .ai[data-tip]:hover { background: var(--chip-ai); box-shadow: var(--chip-ai-edge); }
.m-og > .ai small { color: var(--ai); }
.ai-i { display: inline-block; flex: none; width: 14px; height: 14px; background: var(--ai); -webkit-mask: var(--spark) center / contain no-repeat; mask: var(--spark) center / contain no-repeat; font-style: normal; }
.m-ai { position: absolute; top: 50%; right: calc(var(--edge) + 22px + 202px); display: flex; align-items: center; gap: 4px; translate: 0 -50%; color: var(--ai); font-size: 13px; font-weight: 700; cursor: help; }
.m-ai:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; border-radius: 4px; }
.m:not([data-b="up"]) :is(.m-o, .m-ai) { display: none; }
.m[data-b="up"]:has(.m-o) .m-n { max-width: calc(100% - 218px); }
.m[data-b="up"]:has(.m-ai) .m-n { max-width: calc(100% - 280px); }
/* One tooltip for the page, placed by app.js beside what it explains. */
.tipbox { position: fixed; z-index: 40; min-width: 200px; max-width: 280px; padding: 10px 12px; background: var(--stand-hi); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); font-size: 13px; pointer-events: none; }
.tip-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--ai); font-weight: 700; }
.tip-l { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; margin: 0; }
.tip-l dt { overflow: hidden; color: var(--mist); text-overflow: ellipsis; white-space: nowrap; }
.tip-l dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.tip-l .ai { color: var(--ai); }
.tip-l3 { grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; column-gap: 10px; }
/* The bookmaker beside its price: same size and baseline, only lighter. */
.tip-l .tip-bk { color: var(--mist); font-weight: 500; text-align: left; }
.tip-h.tip-n { color: var(--chalk); }
/* A form result: the outcome in its colour, the day on the right. */
.tip-r[data-r="W"] { color: var(--pitch); }
.tip-r[data-r="L"] { color: var(--alarm); }
.tip-r small { margin-left: auto; padding-left: 16px; color: var(--mist); font-size: 12px; font-weight: 500; }
/* The predicted score on the heading's line, its ink lined up with the chances below: the "%" sign
   ends a little short of its box, so the score stands 2px in. */
.tip-s { margin: 0 2px 0 auto; padding-left: 16px; color: var(--chalk); font-size: 15px; font-variant-numeric: tabular-nums; }
.tip-t { margin: 0; color: var(--mist); white-space: pre-line; }
/* A text tip's first line is its heading. */
.tip-t::first-line { color: var(--chalk); font-weight: 700; }
.tip-sub { margin-left: auto; padding-left: 16px; color: var(--mist); font-size: 11px; font-weight: 500; }
.tip-f { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--line); color: var(--mist); font-size: 11px; }
.tipbox:has(.tip-t) { min-width: 0; }
@media (max-width: 599px) {
	.m-o { gap: 3px; }
	.m-og > * { width: 34px; font-size: 12px; }
	.m-og > a::after { top: 2px; right: 2px; width: 7px; height: 7px; }
	.m-o small { font-size: 9px; }
	.m[data-b="up"]:has(.m-o) .m-n, .m[data-b="up"]:has(.m-ai) .m-n { max-width: calc(100% - 175px); }
	/* No room beside the pill on a phone. Where the row has a league line (the Time view), the predicted
	   score sits on it, right-aligned over the pill; elsewhere it is left out, the picks lit in the pill
	   saying it. The pill stays centred in the row. */
	.m-ai { top: 4px; right: calc(var(--edge) + 22px); width: 145px; justify-content: center; translate: none; font-size: 11px; line-height: 13px; gap: 3px; }
	.m-ai .ai-i { width: 10px; height: 10px; }
	.m[data-b="up"]:not(:has(.m-lg)) .m-ai { display: none; }
	.m[data-b="up"]:has(.m-ai) .m-lg { max-width: calc(100% - 56px); }
}
@media (max-width: 479px) {
	.m-og > :not(.ai), .m-og:not(:has(.ai)) { display: none; }
	.m-ai { width: 71px; }
	.m[data-b="up"]:has(.m-o) .m-n, .m[data-b="up"]:has(.m-ai) .m-n { max-width: calc(100% - 104px); }
	.m[data-b="up"]:not(:has(.m-og .ai)) .m-n { max-width: 100%; }
}
/* A finished row's FT takes the same spot; its kickoff stays in the time column. */
.m[data-b="fin"] .m-ft { position: absolute; top: 50%; right: calc(var(--edge) + 22px + 19px); translate: 0 -50%; font-size: 14px; }
.m[data-b="fin"] .m-t small { font-size: 13px; }
.m[data-b="fin"]:has(.m-ft) .m-n { max-width: calc(100% - 113px); }
/* A shoot-out's score carries its own count, "1 (4)", so the minute or FT steps left by that much. */
.m[data-b="live"]:has(.m-s.pen) .m-t, .m[data-b="fin"]:has(.m-s.pen) .m-ft { right: calc(var(--edge) + 22px + 19px + 44px); }
.m:is([data-b="live"], [data-b="fin"]):has(.m-s.pen) .m-n { max-width: calc(100% - 157px); }
.m[data-b="live"]:is([data-goal], [data-ng]):has(.m-s.pen) .m-n { max-width: calc(100% - 234px); }
@media (max-width: 599px) { .m[data-b="fin"]:has(.m-lg) .m-ft { top: calc(50% + 8px); } }
.m[data-b="live"]:is([data-goal], [data-ng]) .m-n { max-width: calc(100% - 190px); }
/* On a live row the attack dot sits just left of the minute, raised to the attacking side's line,
   so the score beside it never moves. */
.m[data-b="live"][data-att] .m-fx { display: none; }
.m[data-b="live"][data-att] .m-s { margin-left: auto; padding-left: 20px; }
.m[data-b="live"][data-att] .m-t::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--alarm);
	vertical-align: middle;
	animation: beacon 1.2s ease-out infinite;
}
.m[data-b="live"][data-att="h"] .m-t::before { translate: 0 -11px; }
.m[data-b="live"][data-att="a"] .m-t::before { translate: 0 11px; }

/* Red is only ever a moment: a pulsing dot beside the score on a dangerous attack, and on a goal
   "Goal!" and a red score box over a red wash that fades in, holds and fades out. A goal ruled out
   by VAR is the same moment in white: "No goal", and the corrected number on a white box.

   In the list the attack dot lives in .m-fx, an empty element each team line carries just before
   its score. On the match card it hangs off the big number. */
.m-fx { display: none; font-style: normal; }
[data-att="h"] [data-side="h"] .m-fx, [data-att="a"] [data-side="a"] .m-fx {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
}
[data-att="h"] [data-side="h"] .m-s, [data-att="a"] [data-side="a"] .m-s { margin-left: 0; padding-left: 12px; }
/* The badge outlives the attack dot; keeping the padding stops the score moving when the dot goes. */
[data-scored="h"] [data-side="h"] .m-s, [data-scored="a"] [data-side="a"] .m-s,
[data-ng="h"] [data-side="h"] .m-s, [data-ng="a"] [data-side="a"] .m-s { padding-left: 12px; }

/* The dot, for attacks only: a goal ends the attack, so the script clears it the moment one lands. */
[data-att="h"] [data-side="h"] .m-fx::after, [data-att="a"] [data-side="a"] .m-fx::after, .mh[data-att] .m-s::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--alarm);
	animation: beacon 1.2s ease-out infinite;
}
@keyframes beacon {
	0% { box-shadow: 0 0 0 0 rgba(255, 61, 82, .7); }
	100% { box-shadow: 0 0 0 5px rgba(255, 61, 82, 0); }
}

/* "Goal!" sits in the middle of the row, between the two team lines and just left of the scores:
   the red score box already says which side scored. It appears at once and fades out with the
   wash and the badge; nothing moves.
   On a live row it is written just before the minute, which keeps its place; zero line height
   keeps the bigger word from shifting the minute. Other rows have no minute there, so it takes
   the minute's spot. */
.m-x { position: relative; }
.m[data-b="live"]:is([data-goal], [data-ng]):not([data-att]) .m-t::before {
	content: "Goal!";
	margin-right: 10px;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 0;
	animation: goal-word 20s linear forwards;
}
.m[data-b="live"][data-ng]:not([data-att]) .m-t::before { content: "No goal"; }
.m:not([data-b="live"]):is([data-goal], [data-ng]) .m-x::after {
	content: "Goal!";
	position: absolute;
	top: 50%;
	right: calc(var(--edge) + 58px);
	margin-top: -12px;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 22px;
	animation: goal-word 20s linear forwards;
}
.m:not([data-b="live"])[data-ng] .m-x::after { content: "No goal"; }

/* The wash: the row, or the whole match card. It rides on the score box's marker and fades with
   it, so the red goes all at once. */
.m[data-scored], .mh[data-scored] { animation: goal-row 20s ease-in-out forwards; }
@keyframes goal-row {
	0%, 100% { background-color: transparent; }
	4%, 88% { background-color: rgba(255, 61, 82, .2); }
}
.mh[data-scored] { animation-name: goal-card; }
@keyframes goal-card {
	0%, 100% { background-color: var(--stand); }
	4%, 88% { background-color: #372234; }
}

/* The scoring side's number sits on a red badge for twenty seconds, fading with "Goal!" and the
   wash. It has its own marker (data-scored), which the wash shares. */
.m-s { isolation: isolate; }
[data-scored="h"] .m-s[data-s="h"], [data-scored="a"] .m-s[data-s="a"] { animation: goal-text 20s ease-out forwards; }
[data-ng="h"] .m-s[data-s="h"], [data-ng="a"] .m-s[data-s="a"] { animation: no-goal-text 20s ease-out forwards; }
[data-scored="h"] .m-s[data-s="h"]::before, [data-scored="a"] .m-s[data-s="a"]::before,
[data-ng="h"] .m-s[data-s="h"]::before, [data-ng="a"] .m-s[data-s="a"]::before {
	content: "";
	position: absolute;
	/* Set from the digit's ink, not its line: in the 18px line a figure stands 11px tall on the
	   baseline, 4px below the top, and starts after the 12px padding. That leaves 4px around it
	   left and right and 3.5px above and below. */
	inset: .5px -4px -.5px 8px;
	z-index: -1;
	border-radius: 4px;
	background: var(--alarm);
	animation: goal-badge 20s ease-out forwards;
}
/* Digits have no descenders but the font reserves room for them, so the line box sits high on
   the glyph. Nudging the badge down 0.06em centres it on the big number. */
.mh .m-s::before { inset: -6px -10px !important; border-radius: 10px !important; translate: 0 .06em; }
@keyframes goal-badge {
	0% { opacity: 0; transform: scale(.6); }
	3% { opacity: 1; transform: scale(1.12); }
	6% { transform: scale(1); }
	88% { opacity: 1; }
	100% { opacity: 0; transform: scale(1); }
}
/* The word keeps full strength while the wash holds, then goes with it. */
@keyframes goal-word {
	0%, 88% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes goal-text {
	0%, 90% { color: #fff; }
}
[data-ng] .m-s::before { background: var(--chalk) !important; }
@keyframes no-goal-text {
	0%, 90% { color: var(--night); }
}

/* Match card: the attack dot sits on the outer side of that team's number, and "Goal!" shows under
   the clock, which stays. It is placed out of the flow, so the card keeps its height. */
.mh .m-s { position: relative; }
.mh[data-att] .m-s::after { position: absolute; top: 50%; margin-top: -4px; display: none; }
.mh[data-att="h"] .m-s[data-s="h"]::after { display: block; right: calc(100% + 16px); }
.mh[data-att="a"] .m-s[data-s="a"]::after { display: block; left: calc(100% + 16px); }
.mh .m-t { position: relative; }
.mh:is([data-goal], [data-ng]) .m-t::after { content: "Goal!"; position: absolute; top: 100%; left: 50%; translate: -50% 0; margin-top: 2px; color: #fff; font-size: 20px; font-weight: 700; white-space: nowrap; animation: goal-word 20s linear forwards; }
.mh[data-ng] .m-t::after { content: "No goal"; }

/* The star is an SVG mask, centred exactly: font star glyphs sit off-centre in most typefaces. */
.star { display: grid; place-items: center; width: var(--c-star); height: 40px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--mist); }
.star::before {
	content: "";
	width: var(--star-icon);
	height: var(--star-icon);
	background: currentColor;
	-webkit-mask: var(--star-line) center / contain no-repeat;
	mask: var(--star-line) center / contain no-repeat;
}
.star:hover { color: var(--chalk); }
.star[aria-pressed="true"] { color: var(--gold); }
.star[aria-pressed="true"]::before { -webkit-mask-image: var(--star-fill); mask-image: var(--star-fill); }
:root {
	--star-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.25 1.03 6-5.38-2.83-5.38 2.83 1.03-6L3.3 9.6l6-.9z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
	--fold-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3.5l5 5 5-5M7 20.5l5-5 5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--fold-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8.5l5-5 5 5M7 15.5l5 5 5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7.5l4.3 3.1-1.6 5h-5.4l-1.6-5z'/%3E%3C/svg%3E");
	--info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.75' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='4.9' r='1'/%3E%3Crect x='7.25' y='6.9' width='1.5' height='4.6' rx='.75'/%3E%3C/svg%3E");
	--spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2l2.2 6.8L19 11l-6.8 2.2L10 20l-2.2-6.8L1 11l6.8-2.2zM19 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3C/svg%3E");
	--swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 20V5M3 9l4-4 4 4M17 4v15M13 15l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	/* A link that opens another site: an arrow out of a box. */
	--ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--star-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.25 1.03 6-5.38-2.83-5.38 2.83 1.03-6L3.3 9.6l6-.9z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.empty { padding: 48px 0; color: var(--mist); text-align: center; }

/* ---- Search: the filtered board, then other days in the same sheet style ---- */

/* While searching, the results replace whatever else the main column holds. */
.searching main > :not(#board, #sx, #sx-board, #empty) { display: none; }
.sx { display: grid; gap: 8px; }
#board:not([hidden]) ~ .sx:not(:empty) { margin-top: 24px; }
.sx-h { padding: 0 2px 8px; color: var(--mist); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sx .sx-list + .sx-h { margin-top: 16px; }
.sx-list { background: var(--stand); border-radius: var(--radius); overflow: hidden; }
/* A match in a list other than the live board: one line. When, then home and its score against
   score and away, then the competition where the list mixes them. Results drop the "FT". */
.sx-r { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 6px var(--edge); }
.sx-r + .sx-r::before { content: ""; position: absolute; top: 0; left: var(--edge); right: var(--edge); height: 1px; background: var(--line); }
.sx-r:hover, .sx-r:focus-visible { background: var(--stand-hi); outline: none; }
/* A list that names competitions gives them a fixed column, so the middle of every row lines up. */
.sx-list:has(.sx-l) .sx-r { grid-template-columns: 92px minmax(0, 1fr) 150px; }
.sx-d { display: flex; align-items: baseline; gap: 6px; color: var(--mist); font-size: 12px; white-space: nowrap; }
.sx-d b { color: var(--chalk); font-weight: 500; }
.sx-d .m-t { font-size: 12px; }
.sx-r[data-b="fin"] .sx-d .m-t { display: none; }
.sx-t { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6px; min-width: 0; }
.sx-t > span { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; line-height: 18px; }
.sx-t > span + span { flex-direction: row-reverse; justify-content: flex-end; }
.sx-t > span + span::after { content: "–"; color: var(--mist); }
.sx-t > span + span .m-s { margin-left: 0; padding-left: 0; }
.sx-t .m-s { min-width: 1ch; }
.sx-t b { font-weight: 700; }
.sx-t .lo { color: var(--mist); }
.sx-t .lo b { font-weight: 500; }
.sx-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-l { max-width: 100%; overflow: hidden; color: var(--mist); font-size: 11px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599px) {
	.sx-r, .sx-list:has(.sx-l) .sx-r { grid-template-columns: 58px minmax(0, 1fr); column-gap: 10px; }
	.sx-d { flex-direction: column; align-items: flex-start; gap: 0; }
	.sx-l { display: none; }
}
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sx-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--stand); font-size: 14px; font-weight: 700; }
.sx-chip:hover { background: var(--stand-hi); color: var(--pitch); }
.sx-chip .flag { width: 18px; height: 13px; }
.sx-chip .crest { width: 18px; height: 18px; object-fit: contain; }
/* A team's competitions, under its name. */
.pg-plays { margin: -12px 0 24px; }

/* Breadcrumb: where the page sits under the home page; the page itself last, cut short if long. */
.crumbs { margin: 0 0 12px; color: var(--mist); font-size: 12px; }
.crumbs ol { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.crumbs li { flex: none; white-space: nowrap; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: #4a5b75; }
.crumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--chalk); text-overflow: ellipsis; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Side panels: collapsible, any number open ---- */

.panel { margin-bottom: 16px; background: var(--stand); border-radius: var(--radius); }
.panel > summary { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 var(--edge); font-weight: 700; }
.panel > summary::after { margin-right: 4px; }
/* Panel contents sit in an ordinary box: a <details> element's own layout ignores grid gaps and
   lets margins escape, which is what left the last field touching the edge. */
.panel-body { display: grid; gap: var(--edge); padding: 0 var(--edge) var(--edge); }
.prefs label { display: grid; gap: 8px; color: var(--mist); font-size: 13px; }
/* klaklak's room fills the panel edge to edge (its own padding is 8-12px at this width). Its size lives
   here because the security policy allows no style attributes. */
.chat { overflow: hidden; }
/* 80% of the window tall, at most 500px. Drawn at 90% so more fits: the frame is laid out 1/0.9 as
   big, scaled down, and the space the scaling frees is taken back with the margin. */
.chat { --chat-h: min(80svh, 500px); }
.chat iframe { display: block; width: calc(100% / .9); height: calc(var(--chat-h) / .9); margin-bottom: calc(var(--chat-h) / .9 * -.1); border: 0; transform: scale(.9); transform-origin: 0 0; }
.prefs select { width: 100%; height: 36px; padding: 0 8px; background: var(--stand-hi); border: 1px solid var(--line); border-radius: 8px; color: var(--chalk); font-size: 14px; }

.jump { list-style: none; margin: 0; padding: 0 0 8px; }
.jump a { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px var(--edge); }
.jump a:hover { background: var(--stand-hi); }
.jump span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump small { color: var(--mist); font-size: 13px; }
@media (max-width: 899px) { .comps { display: none; } }

/* Desktop: the side column stays in view while the list scrolls, so the competitions list can jump
   from league to league; it scrolls on its own when taller than the window. */
@media (min-width: 900px) {
	/* Its scrollbar sits in the page margin, clear of the panels, which stay in line with the search box:
	   the gutter is always kept, and app.js measures it into --sb. */
	.side { position: sticky; top: var(--top); max-height: calc(100vh - var(--top)); overflow-y: auto; margin-right: -14px; padding-right: calc(14px - var(--sb, 0px)); scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
}
/* A league jumped to lands just under the sticky header. */
.lg { scroll-margin-top: var(--top); }

/* ---- Match page: one card, score in the middle, details along the bottom ---- */

.mh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 16px; padding: 8px var(--edge) 0; background: var(--stand); border-radius: var(--radius); overflow: hidden; }
.mh > .star { position: absolute; top: 0; right: 0; width: 44px; height: 44px; }
.mh-comp { grid-column: 1 / -1; padding: 0 44px; line-height: 36px; text-align: center; }
.mh-comp a { font-weight: 700; }
.mh-comp a:hover { color: var(--pitch); }
.mh-comp span { margin-left: 8px; color: var(--mist); }
.mh-team { display: grid; justify-items: center; gap: 8px; padding-top: 8px; text-align: center; font-size: 16px; font-weight: 700; }
.mh-team img, .mh-crest { width: 56px; height: 56px; }
.mh-crest { display: grid; place-items: center; border-radius: 50%; background: var(--stand-hi); color: var(--mist); font-size: 22px; }
.mh-team .m-n { white-space: normal; }
.mh-mid { display: grid; justify-items: center; gap: 8px; padding-top: 16px; }
.mh-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; font-size: 52px; font-weight: 700; line-height: 1; }
.mh-score .m-s { min-width: 0; margin: 0; padding: 0; font-size: inherit; }
.mh-score [data-s="h"] { text-align: right; }
.mh-score [data-s="a"] { text-align: left; }
.mh-score i { font-style: normal; font-weight: 500; color: var(--mist); }
.mh-mid .m-t { font-size: 15px; }
.mh[data-b="up"] .mh-score { display: none; }
.mh[data-b="up"] .m-t { color: var(--chalk); font-size: 32px; font-weight: 700; }
.mh-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin: 24px calc(-1 * var(--edge)) 0; padding: 16px var(--edge); border-top: 1px solid var(--line); color: var(--mist); font-size: 13px; }
.mh-facts b { margin-left: 6px; color: var(--chalk); font-weight: 500; }

/* ---- Expander: a match's details opened under its row in the list ---- */

/* The chevron in the row's left slot, on matches that have details to open. */
.m-c { display: none; position: absolute; top: 0; bottom: 0; left: 4px; width: calc(var(--edge) + var(--c-chev) - 4px); padding: 0; background: none; border: 0; cursor: pointer; }
.m.xpd .m-c { display: grid; place-items: center; }
.m-c::after { content: ""; width: 7px; height: 7px; border: solid var(--mist); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
.m-c:hover::after, .m-c:focus-visible::after { border-color: var(--chalk); }
.m.xp-on .m-c::after { transform: translateY(-2px) rotate(45deg); }

.m.xp-on { background: var(--stand-hi); }
.m.xp-on::after { display: none; }
.xp { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.xp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--edge) 0; color: var(--mist); font-size: 13px; }
.xp-facts { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-facts b { margin-left: 4px; color: var(--chalk); font-weight: 500; }
.xp-full { flex: none; font-weight: 700; }
.xp-full::after { content: " \2192"; }
.xp-full:hover { color: var(--chalk); }
.xp .dt { margin: 0; background: transparent; border-radius: 0; }
.xp .sx-list { margin: 0; }
.xp .dt-none { padding: 12px 0 16px; }
.ev-tm { display: none; }

/* The expander is a glance under its row, so everything in it sits tighter than on the match page. */
.xp-top { padding-top: 8px; font-size: 12px; }
.xp .dt-tabs { gap: 18px; height: 36px; }
.xp .dt-tabs button { font-size: 13px; }
.xp .dt-p { padding: 4px var(--edge) 10px; }
.xp .dt-none { padding: 8px 0 10px; font-size: 13px; }
.xp .ev { min-height: 30px; font-size: 13px; }
.xp .ev-t small { font-size: 11px; line-height: 13px; }
.xp .ev-div { margin: 4px 0; padding: 3px; font-size: 11px; }
.xp .st { gap: 8px; padding-top: 8px; }
.xp .st-row { row-gap: 3px; font-size: 13px; }
.xp .st-row > span:not(.st-bar) { font-size: 12px; }
.xp .fm-h { margin: 8px 0 4px; font-size: 13px; }
.xp .h2h-sum { margin: 4px 0 8px; }
.xp .h2h-sum b { font-size: 18px; }
.xp .tbl { font-size: 13px; }
.xp .tbl caption { padding: 6px var(--edge) 4px; }
.xp .tbl th { padding: 4px 6px; }
.xp .tbl td { padding: 3px 6px; }
.xp .lu-list { gap: 2px; }
.xp .lu-list li { font-size: 13px; }
.xp .lu-h { margin: 6px 0 6px; font-size: 14px; }
.xp .lu-sub { margin: 10px 0 4px; }
/* The pitch lies flatter under a row, and its players are a size smaller; the match page keeps the full one. */
@media (min-width: 600px) {
	.xp .pt-f { aspect-ratio: 21 / 10; }
	.xp .pt-s { width: 26px; height: 26px; font-size: 12px; }
	.xp .pt-p { gap: 2px; }
	.xp .pt-n { font-size: 11px; }
}

/* ---- Team and league pages ---- */

.pg-h { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.pg-h img, .pg-h .mh-crest { flex: none; width: 56px; height: 56px; }
.pg-h .flag { width: 40px; height: 30px; }
.pg-h h1 { font-size: 26px; line-height: 1.15; }
.pg-sub { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--mist); font-size: 14px; }
a.mh-team:hover .m-n, .tbl-team a:hover, .fm-h > a:hover { color: var(--pitch); }

/* Form: the last five results, oldest first, as small lettered squares. */
.form { display: inline-flex; gap: 4px; }
.form a { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; color: var(--night); font-size: 11px; font-weight: 700; }
.form a[data-r="W"] { background: var(--pitch); }
.form a[data-r="D"] { background: var(--mist); }
.form a[data-r="L"] { background: var(--alarm); color: #fff; }
.fm-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 8px; font-size: 15px; }
.fm-h > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-r { display: flex; flex: none; align-items: center; gap: 12px; }
/* Goals per match beside the form: words on wide screens, just the two figures on phones. */
.fm-avg { color: var(--mist); font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: help; }
.fm-avg b { color: var(--chalk); font-size: 13px; }
.fm-avg i::before { content: "\00a0\00b7\00a0"; font-style: normal; }
@media (max-width: 599px) { .fm-avg span { display: none; } .fm-avg i::before { content: "\00a0/\00a0"; } }
.fm .sx-list { border: 1px solid var(--line); }

/* League table */
.tbl-box { padding: 4px 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tbl caption { padding: 12px var(--edge) 6px; color: var(--mist); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.tbl th { padding: 8px 6px; color: var(--mist); font-size: 12px; font-weight: 700; text-align: right; }
.tbl td { padding: 7px 6px; border-top: 1px solid var(--line); text-align: right; }
.tbl th:first-child, .tbl td:first-child { width: 36px; padding-left: var(--edge); color: var(--mist); text-align: left; }
.tbl th:last-child, .tbl td:last-child { padding-right: var(--edge); }
.tbl .tbl-team { width: 100%; max-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.tbl tr[data-zone] td:first-child { box-shadow: inset 3px 0 0 var(--zone); }
.tbl tr[data-zone="up"] { --zone: var(--pitch); }
.tbl tr[data-zone="mid"] { --zone: #5b8def; }
.tbl tr[data-zone="down"] { --zone: var(--alarm); }
.tbl tr.tbl-on td { background: var(--stand-hi); font-weight: 700; }
.dt-p .tbl th:first-child, .dt-p .tbl td:first-child { padding-left: 4px; }
.dt-p .tbl th:last-child, .dt-p .tbl td:last-child { padding-right: 4px; }
@media (max-width: 599px) { .tbl-wdl { display: none; } }

/* Head-to-head: wins each side and draws, then the meetings. */
.h2h-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; text-align: center; }
.h2h-sum span { display: grid; gap: 2px; min-width: 0; color: var(--mist); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-sum b { color: var(--chalk); font-size: 24px; }
.dt-p > .sx-list { border: 1px solid var(--line); }

/* Odds: home, draw and away side by side. */
.od-best { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
@media (max-width: 599px) { .od-best { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.od-g { min-width: 0; }
.od-h { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 6px; color: var(--mist); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.od-h small { color: var(--chalk); font-size: 11px; }
.od-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.od-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.od-c { display: grid; gap: 1px; min-width: 0; padding: 7px 10px 6px; border-radius: 9px; background: var(--chip); box-shadow: var(--chip-edge); }
.od-c small { overflow: hidden; color: var(--mist); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.od-k b { margin-right: 2px; color: var(--chalk); }
.od-c .od-p { color: #fff; font-size: 18px; line-height: 22px; font-variant-numeric: tabular-nums; }
.od-c[href]:hover { background: var(--chip-hover); }
.od-c.ai { background: var(--chip-ai); box-shadow: var(--chip-ai-edge); }
.od-c[href]::after, .od-t th a::after, .od-t td a::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 5px; background: currentColor; -webkit-mask: var(--ext) center / contain no-repeat; mask: var(--ext) center / contain no-repeat; }
/* The card's arrow floats in its top right corner, as on a price elsewhere. */
.od-c[href] { position: relative; }
.od-c[href]::after { position: absolute; top: 7px; right: 8px; width: 11px; height: 11px; margin: 0; background: #c3cddb; }
.od-c[href]:hover::after { background: #fff; }
.od-c[href] .od-k { padding-right: 14px; }
.od-c.ai[href]::after { background: var(--ai); }
.od-t td a::after { position: absolute; top: 4px; right: 3px; width: 8px; height: 8px; margin: 0; background: #c3cddb; }
.od-t td a:hover::after, .od-t td a:focus-visible::after { background: #fff; }
.od-t td:has(a) { position: relative; }
.od-c.ai .od-k, .od-c.ai .od-k b { color: var(--ai); }
/* The prediction: its score large, then each chance as a chip with a bar, the picks lit. */
.od-ai { margin-top: 12px; padding: 10px 12px 12px; border: 1px solid rgba(108, 196, 255, .22); border-radius: 10px; background: linear-gradient(180deg, rgba(108, 196, 255, .09), rgba(108, 196, 255, .02)); }
.od-ai-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--ai); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.od-ai-s { margin-left: auto; color: #fff; font-size: 22px; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.od-ai-c { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 599px) { .od-ai-c { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.od-ch { display: grid; gap: 3px; min-width: 0; padding: 6px 8px 7px; border-radius: 8px; background: rgba(13, 21, 34, .55); }
.od-ch small { overflow: hidden; color: var(--mist); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.od-ch small b { margin-right: 2px; color: var(--chalk); }
.od-ch-p { color: var(--chalk); font-size: 16px; line-height: 20px; font-variant-numeric: tabular-nums; }
.od-ch .ai-bar { height: 3px; --bar: var(--mist); background: linear-gradient(to right, var(--bar) var(--h, 0%), var(--line) var(--h, 0%)); }
.od-ch.ai { box-shadow: inset 0 0 0 1px rgba(108, 196, 255, .45); }
.od-ch.ai small, .od-ch.ai small b, .od-ch.ai .od-ch-p { color: var(--ai); }
.od-ch.ai .ai-bar { --bar: var(--ai); }

/* Every bookmaker, by name, so a visitor finds their own; the best price in each column is a chip. */
.od-tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.od-t { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.od-t th, .od-t td { height: 28px; padding: 0 6px; text-align: center; white-space: nowrap; }
.od-t thead th { height: 26px; background: rgba(255, 255, 255, .03); color: var(--mist); font-size: 11px; font-weight: 700; }
.od-t thead th.ai { color: var(--ai); }
.od-t tbody tr + tr > * { border-top: 1px solid var(--line); }
.od-t tbody tr:hover { background: rgba(255, 255, 255, .03); }
.od-t th:first-child { width: 99%; padding-left: 12px; font-weight: 500; text-align: left; }
.od-t tbody th { color: var(--chalk); }
.od-t td { width: 56px; color: #b9c4d4; }
.od-t td:last-child, .od-t thead th:last-child { padding-right: 10px; }
.od-t :is(th, td):nth-child(5) { border-left: 1px solid var(--line); }
.od-t a { display: block; }
.od-t a:hover { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }
.od-t td.best { position: relative; z-index: 0; color: #fff; font-weight: 700; }
.od-t td.best::before { content: ""; position: absolute; inset: 3px 2px; z-index: -1; border-radius: 6px; background: var(--chip); box-shadow: var(--chip-edge); }
.od-note { margin-top: 10px; color: var(--mist); font-size: 11px; text-align: center; }

/* ---- Goal info on starred rows: an "i" right of the scores, a small list of the goals ---- */

.m-i { display: none; position: absolute; z-index: 1; top: 50%; right: calc(var(--edge) - 7px); width: 26px; height: 26px; margin-top: -13px; padding: 0; background: transparent; border: 0; border-radius: 50%; color: var(--mist); cursor: pointer; }
/* An SVG mask, like the star: an upright "i" that looks the same in every font and system. */
.m-i::before { content: ""; display: block; width: 14px; height: 14px; margin: auto; background: currentColor; -webkit-mask: var(--info) center / contain no-repeat; mask: var(--info) center / contain no-repeat; }
.m-i:hover, .m-i:focus-visible { color: var(--chalk); }
/* Starred matches with at least one goal. Every row keeps this column (see .m-x), so the scores
   line up whether the icon shows or not. */
.m.starred.has-goals .m-i { display: block; }

.gp { position: absolute; z-index: 30; min-width: 200px; max-width: 280px; padding: 10px 12px; background: var(--stand-hi); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); font-size: 13px; }
/* The minute right-aligned in a column just wide enough for "90+4'", so every scorer starts the
   same short way after it, and centred on the scorer and team lines together. */
.gp-g { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; padding: 4px 0; line-height: 16px; }
.gp-g b { grid-row: span 2; align-self: center; color: var(--pitch); text-align: right; font-variant-numeric: tabular-nums; }
.gp-g span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-g small { grid-column: 2; color: var(--mist); font-size: 11px; line-height: 13px; }
.gp-since, .gp-none { color: var(--mist); font-size: 12px; }
.gp-since { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.gp-g + .gp-none { margin-top: 6px; }
/* A goal VAR took back: struck through and quiet, the decision under it. */
.gp-no b, .gp-no span { color: var(--mist); text-decoration: line-through; }

/* ---- Red cards: beside the team name, in the list and on the match card ---- */

.rc { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; flex: none; color: var(--alarm); font-size: 11px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.rc::before { content: ""; width: 8px; height: 11px; border-radius: 1.5px; background: var(--alarm); }
.rc::after { content: attr(data-n); }
.rc[data-n="0"] { display: none; }
.rc[data-n="1"]::after { content: none; }

/* ---- Match details: Summary, Line-ups and Stats under the match card ---- */

#details:not(:empty) { margin-top: 16px; }
.dt { background: var(--stand); border-radius: var(--radius); overflow: hidden; }
.dt-tabs { display: flex; gap: 24px; height: 48px; padding: 0 var(--edge); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.dt-tabs button { position: relative; flex: none; padding: 0; background: none; border: 0; color: var(--mist); font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.dt-tabs button:hover, .dt-tabs button[aria-selected="true"] { color: var(--chalk); }
.dt-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--chalk); }
.dt-p { padding: 8px var(--edge) 16px; }
.dt-none { padding: 24px 0 8px; color: var(--mist); text-align: center; }

/* Summary: home events on the left, away on the right, the minute between them. */
.ev { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; min-height: 44px; }
.ev-m { grid-area: 1 / 2; color: var(--mist); font-size: 13px; text-align: center; }
.ev-b { grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ev-h .ev-b { grid-column: 1; flex-direction: row-reverse; text-align: right; }
.ev-a .ev-b { grid-column: 3; }
.ev-t { display: grid; min-width: 0; }
.ev-t b, .ev-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-t small { color: var(--mist); font-size: 12px; }
.ev-s { flex: none; padding: 2px 6px; border-radius: 4px; background: var(--stand-hi); font-size: 13px; font-weight: 700; }
.ev-i { flex: none; width: 16px; height: 16px; background: var(--chalk); -webkit-mask: var(--ball) center / contain no-repeat; mask: var(--ball) center / contain no-repeat; }
.ev[data-k="og"] .ev-i { background: var(--alarm); }
.ev[data-k="miss"] .ev-i { background: var(--mist); }
.ev[data-k="yc"] .ev-i, .ev[data-k="rc"] .ev-i, .ev[data-k="y2"] .ev-i { width: 11px; height: 15px; margin: 0 2px; border-radius: 2px; -webkit-mask: none; mask: none; }
.ev[data-k="yc"] .ev-i { background: var(--gold); }
.ev[data-k="rc"] .ev-i { background: var(--alarm); }
.ev[data-k="y2"] .ev-i { background: linear-gradient(135deg, var(--gold) 50%, var(--alarm) 50%); }
.ev[data-k="sub"] .ev-i { background: var(--pitch); -webkit-mask-image: var(--swap); mask-image: var(--swap); }
.ev[data-k="var"] .ev-i { width: auto; height: auto; padding: 1px 4px; border-radius: 3px; background: var(--stand-hi); -webkit-mask: none; mask: none; }
.ev[data-k="var"] .ev-i::before { content: "VAR"; color: var(--mist); font-size: 10px; font-style: normal; font-weight: 700; }
/* A goal VAR took back keeps its place, struck through and greyed, with the decision under it. */
.ev-no .ev-t b { color: var(--mist); text-decoration: line-through; }
.ev-no[data-k="goal"] .ev-i, .ev-no[data-k="og"] .ev-i { background: var(--mist); }
.ev-div { margin: 8px 0; padding: 6px; border-radius: 6px; background: var(--stand-hi); color: var(--mist); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.ev-div b { margin-left: 6px; color: var(--chalk); }

/* Line-ups: the two sides next to each other. */
.lu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.lu-h { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 12px; font-size: 15px; }
.lu-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-h small { color: var(--mist); font-size: 13px; font-weight: 500; }
.lu-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lu-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; font-size: 14px; }
.lu-n { color: var(--mist); text-align: right; }
.lu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-pos { color: var(--mist); font-size: 12px; }
.lu-sub { margin: 16px 0 8px; color: var(--mist); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.lu-coach { margin-top: 12px; color: var(--mist); font-size: 13px; }
.lu-coach b { margin-left: 4px; color: var(--chalk); font-weight: 500; }
.lu-on { margin-left: 8px; color: var(--pitch); font-size: 12px; }
.pt + .lu { margin-top: 16px; }

/* Line-ups on a pitch, as on Flashscore: lying down with the home side on the left, standing up on
   phones with the home side on top. Each half lists its keeper's line first and places from the
   team's left; the flex directions turn both to face the other half. */
.pt { --pt-line: rgba(237, 241, 247, .16); display: grid; grid-template-areas: "h a" "f f"; gap: 8px 16px; margin-top: 8px; }
.pt-lb { display: flex; gap: 8px; align-items: baseline; min-width: 0; margin: 0; font-size: 14px; font-weight: 700; }
.pt-lb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-lb b { flex: none; color: var(--mist); font-size: 13px; font-weight: 500; }
.pt-lh { grid-area: h; }
.pt-la { grid-area: a; justify-content: flex-end; }
.pt-f { grid-area: f; position: relative; display: flex; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--pt-line); border-radius: 8px;
	background: repeating-linear-gradient(90deg, #11291f 0 10%, #133022 10% 20%); }
.pt-f::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--pt-line); }
.pt-f::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18%; aspect-ratio: 1; translate: -50% -50%; border: 1px solid var(--pt-line); border-radius: 50%; }
.pt-t { --kit: #edf1f7; --kit-n: #0d1522; position: relative; display: flex; flex: 1; min-width: 0; }
.pt-a { --kit: #2f6fdf; --kit-n: #ffffff; flex-direction: row-reverse; }
/* The penalty area and the six-yard box at each goal. */
.pt-t::before, .pt-t::after { content: ""; position: absolute; top: 22%; bottom: 22%; width: 30%; border: 1px solid var(--pt-line); }
.pt-t::after { top: 38%; bottom: 38%; width: 10%; }
.pt-h::before, .pt-h::after { left: -1px; }
.pt-a::before, .pt-a::after { right: -1px; }
.pt-l { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; justify-content: space-around; align-items: center; min-width: 0; }
.pt-a .pt-l { flex-direction: column-reverse; }
.pt-p { display: grid; justify-items: center; gap: 3px; width: 100%; max-width: 92px; min-width: 0; }
.pt-s { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--kit); color: var(--kit-n);
	box-shadow: 0 0 0 2px rgba(13, 21, 34, .55); font-size: 13px; font-weight: 700; }
.gk .pt-s { background: var(--gk, var(--kit)); color: var(--gk-n, var(--kit-n)); }
.pt-n { max-width: 100%; overflow: hidden; color: var(--chalk); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
/* Marks around the shirt: goals top left, a card top right, going off bottom right. */
.pt-s i { position: absolute; }
.pt-g { top: -4px; left: -8px; width: 14px; height: 14px; border-radius: 50%; background: #fff; -webkit-mask: var(--ball) center / contain no-repeat; mask: var(--ball) center / contain no-repeat; }
.pt-g.og { top: auto; bottom: -4px; background: var(--alarm); }
.pt-g[data-n]::after { content: attr(data-n); position: absolute; left: -7px; top: 0; color: var(--chalk); font-size: 10px; font-style: normal; }
.pt-c { top: -4px; right: -5px; width: 9px; height: 12px; border-radius: 2px; background: var(--gold); }
.pt-c.rc { background: var(--alarm); }
.pt-o { right: -8px; bottom: -4px; width: 14px; height: 14px; background: var(--alarm); -webkit-mask: var(--swap) center / contain no-repeat; mask: var(--swap) center / contain no-repeat; }

/* Stats: the two values either side of the name, a bar split by the home side's share. */
.st { display: grid; gap: 14px; padding-top: 16px; }
.st-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; row-gap: 6px; font-size: 14px; }
.st-row > span:not(.st-bar) { color: var(--mist); font-size: 13px; text-align: center; }
.st-row > b:last-of-type { text-align: right; }
.st-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--chalk) var(--h, 50%), var(--line) var(--h, 50%)); }

@media (max-width: 599px) {
	.pt { grid-template-areas: "h" "f" "a"; }
	.pt-la { flex-direction: row-reverse; justify-content: flex-end; }
	.pt-f { flex-direction: column; aspect-ratio: 5 / 8; background: repeating-linear-gradient(180deg, #11291f 0 10%, #133022 10% 20%); }
	.pt-f::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px solid var(--pt-line); }
	.pt-f::after { width: 28%; }
	.pt-t { flex-direction: column; min-height: 0; }
	.pt-a { flex-direction: column-reverse; }
	.pt-t::before, .pt-t::after { top: auto; bottom: auto; left: 22%; right: 22%; width: auto; height: 30%; }
	.pt-t::after { left: 38%; right: 38%; height: 10%; }
	.pt-h::before, .pt-h::after { top: -1px; }
	.pt-a::before, .pt-a::after { bottom: -1px; }
	.pt-l { flex-direction: row-reverse; }
	.pt-a .pt-l { flex-direction: row; }
	.pt-p { max-width: 72px; }
	.pt-n { font-size: 11px; }
	.lu { gap: 12px; }
	.lu-list li { grid-template-columns: 18px minmax(0, 1fr); font-size: 13px; }
	.lu-pos { display: none; }
}
@media (max-width: 599px) {
	.mh { gap: 8px; }
	.mh-team { font-size: 14px; }
	.mh-team img, .mh-crest { width: 40px; height: 40px; }
	.mh-score { font-size: 40px; gap: 8px; }
}

/* ---- One column: the sheet, the match card and the panels run edge to edge, giving names and
   scores the room. Their rows keep their own inner padding, so text never touches the edge. ---- */

@media (max-width: 899px) {
	.sheet, .mh, .panel, .sx-list, .dt { margin-left: -16px; margin-right: -16px; border-radius: 0; }
	.lg-h { border-radius: 0; }
	main { padding-top: 8px; padding-bottom: 8px; }
	.side { padding-top: 0; }
	.panel { margin-bottom: 8px; }
}

@media (max-width: 599px) {
	.tabs { gap: 18px; font-size: 14px; }
}

/* ---- Development test page ---- */

.dev-note { max-width: 62ch; margin-bottom: 24px; color: var(--mist); line-height: 1.45; }
.dev-bar { position: relative; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--edge) 16px calc(var(--edge) - (var(--c-star) - var(--star-icon)) / 2 + var(--c-star) + var(--c-time)); }
.dev-bar::after { content: ""; position: absolute; left: var(--edge); right: var(--edge); bottom: 0; height: 1px; background: var(--line); }
.dev-bar:last-child::after { display: none; }
.dev-bar button { height: 28px; padding: 0 10px; background: var(--stand-hi); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; color: var(--mist); font-size: 12px; font-weight: 700; }
.dev-bar button:hover { border-color: var(--mist); color: var(--chalk); }
.dev-bar a { align-self: center; margin-left: 8px; color: var(--mist); font-size: 12px; font-weight: 700; }
.dev-bar a:hover { color: var(--chalk); }
.dev-h { margin: 32px 0 16px; color: var(--mist); font-size: 14px; font-weight: 700; }
.dev-bar-card { justify-content: center; padding: 16px 0 0; }
.dev-bar-card::after { display: none; }

/* Reduced motion drops movement (scaling, spreading rings, sliding chevrons) but keeps the blinks
   and colour flashes: they carry live state, and fading in place moves nothing. */
@media (prefers-reduced-motion: reduce) {
	[data-scored] .m-s::before, [data-ng] .m-s::before { animation-name: goal-badge-still; }
	.m-fx::after, .mh[data-att] .m-s::after, .m[data-att] .m-t::before { animation-name: beacon-still; }
	.m, .lg-h::after, .panel > summary::after, .m-c::after { transition: none; }
}
@keyframes beacon-still { 50% { opacity: .35; } }
@keyframes goal-badge-still {
	0%, 100% { opacity: 0; }
	3%, 88% { opacity: 1; }
}