/* Inter (SIL Open Font License, fonts/LICENSE.txt), served from our own server: no outside font service */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin.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: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-greek.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
/* Plus Jakarta Sans and Azeret Mono (SIL Open Font License, fonts/LICENSE-*.txt), served from our own server */
/* Xgoals public live board (Core D-C012, D-C015, D-C016, D-C023). Data: data/live.json and data/m/<id>.json (live,
   pushed), data/d/<day>.json, data/c/<league>/<year>.json, data/nav.json and data/f/<api id>.json (dates,
   competitions, the navigator, match facts), all written on the server. Panels side by side on wide screens, tabs on
   phones. */
:root {
  --sans: "Space Grotesk", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --bg: #eef1f5; --panel: #ffffff; --head: #f6f8fb; --line: #e2e7ee; --text: #0f172a; --muted: #5b6678; --faint: #98a2b3;
  --label: #0e7490; --live: #dc2626; --live-bg: #fee2e2; --brk: #b45309; --goal-bg: #fff2b8; --warn: #9a4a00;
  --warn-bg: #fef3c7; --accent: #0891b2; --star: #d99a00; --home: #2563eb; --away: #dc2626; --chip: #eef1f5;
  --kick: #0891b2; --good: #15803d; --sea: #e6edf5; --land: #cfd8e3; --land-on: #b5c3d4; --land-line: #ffffff;
  --shadow: 0 10px 40px rgba(0,0,0,.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #020610; --panel: #040a15; --head: #07101d; --line: #0f1828; --text: #e2e8f0; --muted: #8a94a7; --faint: #4d576a;
    --label: #d1fe17; --live: #ff5555; --live-bg: rgba(255,68,68,.12); --brk: #fbbf24; --goal-bg: #2a2107; --warn: #fbbf24;
    --warn-bg: #2a2107; --accent: #d1fe17; --star: #fbbf24; --home: #60a5fa; --away: #f87171; --chip: #0a1322;
    --kick: #d1fe17; --good: #4ade80; --sea: #030810; --land: rgba(255,255,255,.035); --land-on: rgba(255,255,255,.09); --land-line: rgba(255,255,255,.08);
    --shadow: 0 10px 40px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg: #020610; --panel: #040a15; --head: #07101d; --line: #0f1828; --text: #e2e8f0; --muted: #8a94a7; --faint: #4d576a;
  --label: #d1fe17; --live: #ff5555; --live-bg: rgba(255,68,68,.12); --brk: #fbbf24; --goal-bg: #2a2107; --warn: #fbbf24;
  --warn-bg: #2a2107; --accent: #d1fe17; --star: #fbbf24; --home: #60a5fa; --away: #f87171; --chip: #0a1322;
  --kick: #d1fe17; --good: #4ade80; --sea: #030810; --land: rgba(255,255,255,.035); --land-on: rgba(255,255,255,.09); --land-line: rgba(255,255,255,.08);
  --shadow: 0 10px 40px rgba(0,0,0,.6);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .dbody::-webkit-scrollbar { display: none; }
body { scrollbar-width: none; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  font: 14px/1.35 var(--sans);
  font-variant-numeric: tabular-nums;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.btn {
  height: 32px; min-width: 32px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { color: var(--text); }
.btn[aria-pressed="true"] { color: var(--text); }
#mapBtn[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* top bar */
header { position: sticky; top: 0; z-index: 10; background: var(--panel); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; max-width: 1480px; margin: 0 auto; }
.brand { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.brand b { color: var(--accent); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
  background: var(--live-bg); color: var(--live); font-weight: 600; font-size: 12px; white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
header .search { margin-left: auto; flex: 0 1 300px; min-width: 90px; width: auto; }
.stamp { color: var(--muted); font-size: 12px; white-space: nowrap; }
.tabs { display: none; gap: 4px; padding: 0 16px 8px; }
.tab {
  flex: 1; height: 34px; border-radius: 8px; background: var(--chip); color: var(--muted); font-weight: 600; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase;
}
.tab[aria-selected="true"] { background: var(--text); color: var(--panel); }
.notice { flex: none; width: calc(100% - 32px); max-width: 1448px; margin: 10px auto 0; padding: 9px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); }

/* panels */
.grid {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "map map" "live xg"; gap: 12px; align-items: start;
  width: 100%; max-width: 1560px; margin: 0 auto; padding: 12px 16px 0; flex: 1;
}
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  display: flex; flex-direction: column; overflow: clip;
}
#p-live { grid-area: live; } #p-xg { grid-area: xg; } #p-nav { grid-area: nav; } #p-map { grid-area: map; }
@media (min-width: 1360px) {
  .grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "map map" "live xg"; }
}
@media (min-width: 1640px) {
  .grid { max-width: 1880px; grid-template-columns: 250px minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "nav map map" "nav live xg"; }
  /* the navigator scrolls on its own beside the map and the panels */
  #p-nav { grid-row: 1 / span 2; align-self: start; position: sticky; top: 64px; max-height: calc(100vh - 76px); overflow-y: auto; scrollbar-width: none; }
  #p-nav .phead { top: 0; }
  .bar { max-width: 1880px; }
  #navBtn { display: none; }
}
/* below 1640px the navigator is a sheet from the left */
@media (max-width: 1639px) {
  #p-nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(330px, 88vw); z-index: 22; border-radius: 0; border-left: 0;
    transform: translateX(-105%); transition: transform .2s; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  #p-nav::-webkit-scrollbar { display: none; }
  body.nav-open #p-nav { transform: none; box-shadow: var(--shadow); }
  #p-nav .phead { top: 0; }
  #p-nav { padding-top: var(--navtop, var(--hh, 53px)); }   /* the blocks start just under the hamburger (.navx, set on opening) */
}
.navscrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 21; }
/* owner, 2026-10-30: the hamburger above the open sheet, on the header button's own spot; three lines that turn into an
   X while the sheet opens, and back into three lines while it closes (the shape of the old #i-menu icon, 15 px) */
.navx { position: fixed; z-index: 23; margin: 0; justify-content: center; }
.hb { position: relative; flex: none; width: 15px; height: 15px; }
.hb i { position: absolute; left: 2px; width: 11px; height: 1.6px; border-radius: 2px; background: currentColor;
  transition: top .22s ease, transform .22s ease, opacity .15s ease; }
.hb i:nth-child(1) { top: 3px; } .hb i:nth-child(2) { top: 6.7px; } .hb i:nth-child(3) { top: 10.4px; }
.x .hb i:nth-child(1) { top: 6.7px; transform: rotate(45deg); }
.x .hb i:nth-child(2) { opacity: 0; }
.x .hb i:nth-child(3) { top: 6.7px; transform: rotate(-45deg); }
.navx.x { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .hb i { transition: none; } }

/* navigator (D-C023) */
.nv-c { display: flex; width: 100%; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
.nv-c:hover, .nv-l:hover { background: var(--head); }
.nv-c .fl { flex: none; width: 20px; display: inline-flex; justify-content: center; }
/* icons (inline SVG) and round flags */
.i { width: 1em; height: 1em; flex: none; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i.fill { fill: currentColor; }
.btn .i { width: 15px; height: 15px; }
.flg { width: 1.15em; height: 1.15em; border-radius: 50%; vertical-align: -.2em; flex: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); }
.star { display: inline-flex; align-items: center; justify-content: center; } .star .i { width: 15px; height: 15px; }
.mcard .mr .star .i { width: 12px; height: 12px; }
.mzoom button { display: inline-flex; align-items: center; justify-content: center; } .mzoom .i { width: 14px; height: 14px; }
.nv-c .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.nv-c .k { color: var(--faint); font-size: 11px; }
.nv-c[aria-expanded="true"] .k { transform: rotate(90deg); }
.nv-l { display: block; width: 100%; text-align: left; padding: 6px 12px 6px 40px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-l.flat { padding-left: 12px; }
.nv-l[aria-current="true"] { color: var(--text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.nv-l .cup, .ctitle .cup { font-size: 10px; color: var(--faint); margin-left: 6px; text-transform: uppercase; letter-spacing: .06em; }
.nv-l .cn { color: var(--faint); }
/* the living navigator (D-C024): sorted by what is happening, not by the alphabet */
.nv-h { display: flex; align-items: center; gap: 6px; padding: 10px 12px 5px; font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nv-h .i { width: 12px; height: 12px; } .nv-h span { color: var(--faint); margin-left: auto; font-weight: 600; }
.nv-h.hot { color: var(--h3); } .nv-h.lv { color: var(--live); } .nv-h.nx { color: var(--kick); } .nv-h.me { color: var(--star); }
.nv-x { display: flex; width: 100%; align-items: center; gap: 8px; padding: 6px 12px; text-align: left; font-size: 12.5px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); position: relative; }
.nv-x:hover { background: var(--head); }
.nv-x .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.nv-x .nm small { display: block; font-weight: 500; font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.nv-x .bx { flex: none; display: flex; gap: 5px; align-items: center; font: 700 10.5px var(--mono); color: var(--faint); }
.nv-x .bx .lv { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.nv-x .bx .lv::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: pulse 1.6s infinite; }
.nv-x .bx .nx { color: var(--kick); }
.nv-x .nm small .g { margin-left: 6px; color: var(--warn); font-weight: 700; display: inline-flex; gap: 3px; align-items: center; } .nv-x .nm small .g .i { width: 10px; height: 10px; }
.nv-x .bx .fx { display: inline-flex; } .nv-x .bx .fx .i { width: 13px; height: 13px; }
.fx.b1 { color: var(--h1); } .fx.b2 { color: var(--h2); } .fx.b3 { color: var(--h3); } .fx.b4 { color: var(--h4); }
.nv-x .bx .d { width: 7px; height: 7px; border-radius: 50%; } .bx .d.b1 { background: var(--h1); } .bx .d.b2 { background: var(--h2); } .bx .d.b3, .bx .d.b4 { background: var(--h3); }
.nv-x .rm { flex: none; width: 20px; height: 20px; margin-left: -2px; border-radius: 4px; display: none; align-items: center; justify-content: center; color: var(--faint); }
.nv-x .rm:hover { color: var(--text); background: var(--line); } .nv-x .rm .i { width: 11px; height: 11px; }
.nv-x:hover .rm, .nv-x:focus-within .rm { display: inline-flex; }
@media (hover: none) { .nv-x .rm { display: inline-flex; } }

.nv-x[aria-current="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.nv-more { display: flex; width: 100%; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.nv-more:hover { color: var(--text); background: var(--head); } .nv-more .i { width: 12px; height: 12px; margin-left: auto; transition: transform .2s; } .nv-more[aria-expanded="true"] .i { transform: rotate(90deg); }
.nv-m { display: grid; grid-template-columns: 42px 1fr; gap: 6px; width: 100%; padding: 6px 12px; text-align: left; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.nv-m:hover { background: var(--head); } .nv-m .t { font: 700 10.5px var(--mono); color: var(--kick); } .nv-m .t.lv { color: var(--live); }
.nv-m small { grid-column: 2; color: var(--faint); font-size: 10.5px; }
.nv-q { padding: 4px 12px 8px; font-size: 11px; color: var(--faint); }
kbd { font: 700 10px var(--mono); padding: 1px 4px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }

/* the matches panel's bar: filters and dates, or a competition's title, season and tabs */
.vbar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.seg { display: inline-flex; background: var(--chip); border-radius: 8px; padding: 2px; gap: 2px; }
.seg button { height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.seg button .n { color: var(--faint); font-weight: 500; margin-left: 4px; }
.seg button.lv[aria-pressed="true"] { color: var(--live); }
.seg button .i.fill { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; color: var(--star); }
.dnav { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.dnav .btn { height: 28px; }
.dnav .day { min-width: 128px; justify-content: center; color: var(--text); font-weight: 600; }
.dnav input[type="date"] { height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; padding: 0 6px; }
.dnav .hidden-date { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ctitle { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctitle .cn { color: var(--muted); font-weight: 500; }
select.season { height: 28px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 12px; padding: 0 6px; }
#p-live .group h3 { position: static; display: flex; gap: 6px; }
#p-nav .search { width: auto; flex: 1; min-width: 0; }
.group h3.link { cursor: pointer; display: flex; gap: 6px; }
.group h3.link:hover span { text-decoration: underline; text-underline-offset: 2px; }
.group h3 .fl { flex: none; }
.group h3 .rd { margin-left: auto; color: var(--faint); font-weight: 500; }

/* standings */
.stt { width: 100%; border-collapse: collapse; font-size: 13px; }
.stt th { color: var(--faint); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-align: right; padding: 6px 5px; border-bottom: 1px solid var(--line); background: var(--head); }
.stt td { text-align: right; padding: 6px 5px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stt .tm { text-align: left; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.stt td.pos { width: 34px; text-align: center; font-weight: 700; color: var(--muted); }
.stt td.pts { font-weight: 700; }
.zones { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
.zones i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.asof { padding: 0 12px 12px; color: var(--faint); font-size: 11px; }
.phead {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--head); border-bottom: 1px solid var(--line);
}
.plabel { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--label); white-space: nowrap; }
.pcount { font-size: 11px; color: var(--faint); }
.search {
  margin-left: auto; width: min(260px, 50%); height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font: inherit; font-size: 13px;
}
.pbody { flex: 1; }
.phead { position: sticky; top: 52px; z-index: 2; min-height: 45px; }   /* one height for every panel: the sticky rows below sit at 97px */
.group h3 {
  margin: 0; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--head);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: sticky; top: 97px; z-index: 1;
}
.group:first-child h3 { border-top: 0; }
.group h3 span { color: var(--text); }
.group h3.fol { color: var(--star); }
#p-live .group h3 { box-shadow: inset 3px 0 0 var(--lc, var(--faint)); }
.row {
  display: grid; grid-template-columns: 26px 54px minmax(0, 1fr) 62px minmax(0, 1fr) 44px; align-items: center; gap: 6px;
  padding: 6px 10px 6px 4px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color 1.2s;
  box-shadow: inset 2px 0 0 transparent;
}
.row:hover { background: var(--head); }
.row.goal { background: var(--goal-bg); }
/* Pulse rows (D-C024): the left edge says the state, the bar on the right the heat */
/* no coloured left edge on live and half-time rows (owner, 2026-10-28: "too much noise"); the clock says it */
.row.goal { background: var(--goal-bg); }
.hbar { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--text) 5%, transparent); overflow: hidden; }
.hbar i { display: block; height: 100%; border-radius: 2px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: width .5s; }
.hbar.b1 i { background: var(--h1); } .hbar.b2 i { background: var(--h2); } .hbar.b3 i, .hbar.b4 i { background: var(--h3); }
.hbar.b4 i { animation: pulse 1.2s infinite; }

/* heat panel (D-C018): Xgoals Live's engine bands, warm to deep red */
:root { --h1: #ffbe4c; --h2: #ff4f03; --h3: #e72930; --h4: #b91c1c; }
.xgt { width: 100%; border-collapse: collapse; font-size: 12px; }
.xgt th { position: sticky; top: 97px; z-index: 1; background: var(--head); color: var(--faint); font-weight: 600; font-size: 10px;
  letter-spacing: .04em; text-align: right; padding: 5px 4px; border-bottom: 1px solid var(--line); }
.xgt th:first-child, .xgt td:first-child { text-align: left; padding-left: 10px; }
.xgt td { text-align: right; padding: 5px 4px; white-space: nowrap; }
.xgt td.tm { text-align: left; max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.xgt td.cur { font-weight: 800; }
.xgt td.live { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 700; }
.xgt td.tag { text-align: left; font-size: 11px; color: var(--muted); padding-right: 10px; }
.xgt tr.mh td { padding-top: 9px; color: var(--muted); font-size: 11px; text-align: left; border-top: 1px solid var(--line); cursor: pointer; }
.xgt tr.mh:first-child td { border-top: 0; }
.xgt tr.mh .clk { font-weight: 700; color: var(--live); margin-right: 8px; }
.xgt tr.mh .clk.brk { color: var(--brk); }
.xgt tr.tr { cursor: pointer; }
/* one light tint per alert level, so text stays readable on every one; the level's name sits in a solid chip */
.xgt tr.tr.b1 { background: color-mix(in srgb, var(--h1) 10%, transparent); }
.xgt tr.tr.b2 { background: color-mix(in srgb, var(--h2) 12%, transparent); }
.xgt tr.tr.b3 { background: color-mix(in srgb, var(--h3) 14%, transparent); }
.xgt tr.tr.b4 { background: color-mix(in srgb, var(--h4) 18%, transparent); }
.xgt tr.tr.b1 td:first-child { box-shadow: inset 4px 0 0 var(--h1); } .xgt tr.tr.b2 td:first-child { box-shadow: inset 4px 0 0 var(--h2); }
.xgt tr.tr.b3 td:first-child { box-shadow: inset 4px 0 0 var(--h3); } .xgt tr.tr.b4 td:first-child { box-shadow: inset 4px 0 0 var(--h4); }
.xgt .neg { color: var(--good); } .xgt .pos { color: var(--away); }
.xgt td, .xgt th { font-family: var(--mono); } .xgt td.tm, .xgt tr.mh td { font-family: var(--sans); }
.xgt th[data-xs] { cursor: pointer; user-select: none; } .xgt th[data-xs]:hover { color: var(--text); }
.xgt th.on { color: var(--text); }
.al { display: inline-block; padding: 1px 6px; border-radius: 4px; font: 700 10px var(--sans); letter-spacing: .03em; color: #fff; white-space: nowrap; }
.al.b1 { background: #ca8a04; } .al.b2 { background: #ea580c; } .al.b3 { background: var(--h3); } .al.b4 { background: var(--h4); }
.xgbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.xgscope { display: flex; gap: 8px; align-items: center; padding: 7px 12px; font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--accent) 7%, transparent); border-bottom: 1px solid var(--line); }
.xgscope b { color: var(--text); } .xgscope button { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 12px; }
.xghow { margin: 0; padding: 8px 12px; font-size: 11.5px; line-height: 1.5; color: var(--muted); border-bottom: 1px solid var(--line); }
.xghow summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.xghow[open] summary { margin-bottom: 4px; }
.xghow b { color: var(--text); font-weight: 600; } .xghow .i { width: 12px; height: 12px; vertical-align: -2px; }
.xghow .k { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 2px 0 6px; vertical-align: -1px; }
.k.b1 { background: var(--h1); } .k.b2 { background: var(--h2); } .k.b3 { background: var(--h3); } .k.b4 { background: var(--h4); }
/* the board's cards (D-C024 update): one live match each, its alert on the left edge, debt as a bar from the middle */
.xcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; padding: 10px 12px 12px; }
.xc { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px 9px 14px; cursor: pointer; background: var(--panel); box-shadow: inset 3px 0 0 var(--line); transition: border-color .2s; }
.xc:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.xc.b1 { box-shadow: inset 3px 0 0 var(--h1); } .xc.b2 { box-shadow: inset 3px 0 0 var(--h2); } .xc.b3 { box-shadow: inset 3px 0 0 var(--h3); } .xc.b4 { box-shadow: inset 3px 0 0 var(--h4); }
.xch { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; min-width: 0; }
.xch .clk { font: 700 11px var(--mono); color: var(--live); } .xch .clk.brk { color: var(--brk); }
.xch .fl { flex: none; display: inline-flex; } .xch .lg { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xch .lg span { color: var(--text); font-weight: 600; }
.xch .al, .xch .pen-var { flex: none; margin: 0; }
/* the card's table: the same columns in every card, so the eye finds a number in the same place */
.xct { display: grid; grid-template-columns: minmax(0, 1fr) 18px 34px 34px 50px 50px 36px; align-items: baseline; gap: 6px; padding: 2px 0; }
.xc.exp .xct { grid-template-columns: minmax(0, 1fr) 18px 34px 34px 50px 50px 30px 36px; }
.xct > span, .xct > b { text-align: right; white-space: nowrap; }
.xct .nm { text-align: left; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; font-weight: 600; }
.xct .tn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xct .bd { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.bd.b1 { background: var(--h1); } .bd.b2 { background: var(--h2); } .bd.b3 { background: var(--h3); } .bd.b4 { background: var(--h4); }
.xct .ic { flex: none; color: var(--faint); display: inline-flex; } .xct .ic .i { width: 12px; height: 12px; }
.xct .g { font: 700 14px var(--mono); text-align: center; }
.xct .v { font: 400 11.5px var(--mono); color: var(--muted); }
.xct .v i { font-style: normal; color: var(--faint); margin-left: 4px; }
.xct .v.now { color: var(--text); font-weight: 700; } .xct .v.now i { color: var(--muted); }
.xct .dv { font: 700 12px var(--mono); color: var(--muted); } .xct .dv.pos { color: var(--h2); } .xct .dv.neg { color: var(--good); }
.xct.xhd { padding: 0 0 2px; font-size: 9.5px; letter-spacing: .04em; color: var(--faint); text-transform: uppercase; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.xct.xhd > span:nth-child(2) { text-align: center; } .xct.xhd .now { color: var(--accent); font-weight: 700; }
.xcl { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.xcl b { color: var(--text); }
@media (max-width: 420px) { .xcards { grid-template-columns: 1fr; padding: 8px; } .xct { gap: 4px; grid-template-columns: minmax(0, 1fr) 16px 32px 32px 46px 46px 32px; } }
.pen-var { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: #facc15; color: #241a00; font-weight: 800; font-size: 10px; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; padding: 8px 12px; color: var(--faint); font-size: 11px; border-top: 1px solid var(--line); background: var(--head); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.star { width: 26px; height: 26px; border-radius: 6px; color: var(--faint); font-size: 16px; line-height: 26px; }
.star:hover { color: var(--star); }
.star[aria-pressed="true"] { color: var(--star); }
.clock { font-family: var(--mono); font-weight: 600; font-size: 11px; color: var(--live); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.clock.c-live::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--live); animation: pulse 1.4s infinite; }
.clock.c-ht { color: var(--brk); } .clock.c-ko { color: var(--kick); } .clock.c-end { color: var(--faint); font-weight: 500; }
.team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home { text-align: right; }
.scored { font-weight: 700; }
.team.l { color: var(--muted); } .team.w { font-weight: 700; color: var(--text); }
.score { text-align: center; }
.score b { display: flex; justify-content: center; gap: 6px; font-family: var(--mono); font-size: 14px; font-weight: 700; }
.score b i { font-style: normal; min-width: 12px; } .score b i.l { color: var(--faint); } .score b .dash { color: var(--faint); font-weight: 400; min-width: 0; }
.score small { display: block; font-family: var(--mono); font-size: 9px; color: var(--faint); white-space: nowrap; }
.score small.xg, .dsub .xg { color: var(--label); font-weight: 600; }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; }

/* goals feed */
.gl { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color 1.2s; }
.gl:hover { background: var(--head); }
.gl.new { background: var(--goal-bg); }
.gl .t { color: var(--faint); font-size: 12px; }
.gl .m { color: var(--live); font-weight: 700; font-size: 12px; }
.gl .ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl .ln b { font-weight: 700; }
.gl .sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl .ft { color: var(--faint); font-size: 11px; margin-left: 4px; }
.gl.cancel .ln { text-decoration: line-through; color: var(--muted); }

/* match facts drawer */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }
/* D-C055: the right column is a stack of standalone cards: the match card (a panel like Leagues), then Goal due */
#xcol { grid-area: xg; display: flex; flex-direction: column; gap: 12px; min-width: 0; align-self: start; }
#drawerRoot:empty { display: none; }
.dock-open .scrim { display: none; }
.dock-open .drawer { position: relative; inset: auto; width: auto; z-index: auto; }
/* the card takes the room it needs, no scrollbar of its own (owner: "consume as much space as it needs"); on wide screens
   the column is sticky like Leagues and scrolls on its own (owner: "xGoals should always be visible at right column
   like sticky and same does match info"): card, then Goal due; the whole card scrolls with the column (its head is
   not pinned: owner, "some parts of match info are sticky and not scrollable, fix") */
.dock #xcol { position: sticky; top: 64px; max-height: var(--colh, calc(100vh - 76px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dock #xcol > * { flex: none; }
.dock #p-xg > .phead { top: 0; }
.dock-open #p-xg > .phead { top: 0; }
.dock #xcol .xgt th { top: 45px; }            /* under Goal due's own head inside the column */
.dock-open .drawer { height: auto; max-height: none; }
.dock-open .dbody { flex: none; overflow: visible; }
.dock-open #xcol > * { flex: none; }
@media (max-width: 899px) { #xcol { grid-area: p; } #xcol:has(> #p-xg[hidden]) { display: none; } }
.dtop .dback { flex: none; gap: 4px; padding: 0 10px 0 6px; color: var(--accent); }
.row.sel { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(580px, 100vw); z-index: 21; background: var(--panel);
  box-shadow: var(--shadow); display: flex; flex-direction: column; border-left: 1px solid var(--line);
}
.dhead { padding: 12px 14px 0; border-bottom: 1px solid var(--line); background: var(--head); }
.dtop { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.dtop .comp { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dscore { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 14px 0 6px; }
.dscore .tm { font-weight: 700; font-size: 15px; }
.dscore .tm.h { text-align: right; }
.dscore .big { font-size: 28px; font-weight: 800; letter-spacing: .02em; text-align: center; line-height: 1; }
.dscore .big small { display: block; font-size: 12px; font-weight: 700; margin-top: 6px; color: var(--live); }
.dscore .big small.brk { color: var(--brk); }
.dsub { text-align: center; color: var(--muted); font-size: 12px; min-height: 16px; }
.dtabs { display: flex; gap: 2px; margin-top: 10px; }
.dtabs[aria-hidden] { height: 36px; }   /* its room while the match's details come (speed check, 2026-10-30) */
.dtab { flex: 1; padding: 9px 0; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; }
.dtab[aria-selected="true"] { color: var(--text); border-color: var(--label); }
/* H2H and the table in a match (D-C024) */
.subt { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 6px; }
.subt button { height: 30px; padding: 0 12px; border-radius: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--chip); color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subt button:hover { color: var(--text); }
.draw { padding: 6px 0 14px; }
.dnavb { display: flex; justify-content: space-between; padding: 8px 14px 4px; }
.dnavb .btn .i { width: 13px; height: 13px; }
.dscroll { overflow-x: auto; padding: 0 14px 6px; scroll-behavior: smooth; }
.drnd { display: flex; gap: 30px; margin: 6px 0 4px; }
.drnd span { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); text-align: center; padding: 6px 0; background: var(--head); border-radius: 6px; }
.dbox { position: relative; }
.dbox svg { position: absolute; inset: 0; fill: none; stroke: var(--line); stroke-width: 1.5; }
.dslot { position: absolute; width: 214px; }
.dcard { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 5px 9px; cursor: pointer; font-size: 12.5px; }
.dcard:hover { border-color: var(--accent); }
.dcard.lv { border-color: var(--live); box-shadow: 0 0 0 1px var(--live) inset; }
.dl { display: flex; justify-content: space-between; gap: 8px; line-height: 19px; }
.dl .dn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl .dg { font: 700 12.5px var(--mono); }
.dl .dg sup { font-size: 9px; color: var(--muted); margin-left: 2px; }
.dl.w { font-weight: 700; } .dl.l { color: var(--muted); }
.dl.me .dn { color: var(--accent); }
.dlegs { font-size: 10px; color: var(--faint); font-family: var(--mono); margin-top: 1px; }
.dother { display: flex; gap: 8px; align-items: center; margin: 16px 14px 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dother span { color: var(--faint); font-weight: 500; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 0 14px; }
.subt button[aria-pressed="true"] { background: var(--live); color: #fff; }
.hsec { margin: 10px 14px 0; padding: 8px 10px; border-radius: 6px; background: var(--head); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.hsec span { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--faint); }
.hrow { display: grid; grid-template-columns: 62px 58px minmax(0, 1fr) 30px 28px; align-items: center; gap: 6px; margin: 0 14px; padding: 6px 2px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.hrow:hover { background: var(--head); }
.hrow .dt { color: var(--muted); font: 700 11.5px var(--mono); }
.hrow .lg { display: flex; align-items: center; gap: 5px; font: 700 11px var(--mono); color: var(--text); min-width: 0; overflow: hidden; }
.hrow .tms, .hrow .scs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hrow .tms span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; max-width: 100%; padding: 0 5px; border-radius: 4px; }
.hrow .tms .w { font-weight: 700; } .hrow .tms .me { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.hrow .scs { text-align: center; font: 700 13px var(--mono); } .hrow .scs small { font: 700 9px var(--mono); color: var(--faint); }
.res { width: 22px; height: 22px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font: 800 11px var(--sans); color: #fff; }
.res.W { background: #16a34a; } .res.D { background: #e0a106; } .res.L { background: #dc2626; } .res.Q { background: var(--chip); color: var(--faint); }
.more { display: block; margin: 8px auto 4px; font-size: 12.5px; font-weight: 700; text-decoration: underline; color: var(--text); }
.hsum { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 8px 14px 2px; font-size: 12px; color: var(--muted); }
.hsum .bars { grid-column: 1 / -1; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--chip); }
.hsum .bars i:nth-child(1) { background: #16a34a; } .hsum .bars i:nth-child(2) { background: #e0a106; } .hsum .bars i:nth-child(3) { background: #2563eb; }
.hsum b { font: 700 16px var(--mono); color: var(--text); margin-right: 5px; } .hsum .c { text-align: center; } .hsum .r { text-align: right; }
.stt tr.me td { background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 700; }
.stt .frm { display: flex; gap: 3px; justify-content: flex-end; } .stt .frm .res { width: 17px; height: 17px; font-size: 9.5px; border-radius: 4px; }
.stt .mv { font-size: 9px; margin-left: 3px; } .stt .mv.up { color: #16a34a; } .stt .mv.dn { color: #dc2626; }
.stt .lvs { color: var(--live); font: 700 10.5px var(--mono); margin-left: 6px; }
.twrap { overflow-x: auto; scrollbar-width: thin; }
.stt th.hf, .stt td.hf { text-align: center; min-width: 30px; } .stt td.hf.z { color: var(--faint); }
.stt td.pl { text-align: left; font-weight: 600; } .stt td.pl small { display: block; font-weight: 500; font-size: 11px; color: var(--faint); }
.tnote { padding: 8px 14px; font-size: 11.5px; color: var(--faint); }
@media (max-width: 520px) { .dbody .stt .wdl, .dbody .stt .gfa { display: none; } .hrow { grid-template-columns: 54px 44px minmax(0, 1fr) 26px 24px; margin: 0 8px; } }
.dbody { overflow-y: auto; flex: 1; padding: 6px 0 24px; overscroll-behavior: contain; scrollbar-width: none; }
.ev { display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); align-items: center; padding: 7px 14px; border-bottom: 1px solid var(--line); }
.ev .min { text-align: center; color: var(--muted); font-weight: 700; font-size: 12px; }
.ev .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ev .h { justify-content: flex-end; text-align: right; }
.ev .who > span { min-width: 0; }
.ev .nm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .ds { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic { flex: none; width: 18px; text-align: center; font-size: 13px; }
.card { display: inline-block; width: 10px; height: 14px; border-radius: 2px; vertical-align: middle; }
.card.y { background: #facc15; } .card.r { background: #e72930; }
.on { color: var(--live); } .off { color: var(--away); }
.var { font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 1px 3px; border-radius: 3px; background: var(--chip); color: var(--muted); }
.ht-mark { text-align: center; color: var(--faint); font-size: 11px; letter-spacing: .1em; padding: 6px 0; border-bottom: 1px solid var(--line); }
.st { padding: 9px 14px; border-bottom: 1px solid var(--line); }
.st .lbl { display: grid; grid-template-columns: 48px 1fr 48px; font-size: 13px; margin-bottom: 5px; }
.st .lbl span:nth-child(2) { text-align: center; color: var(--muted); font-size: 12px; }
.st .lbl span:last-child { text-align: right; }
.st .bars { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.st .bar-h, .st .bar-a { height: 5px; border-radius: 3px; background: var(--chip); overflow: hidden; display: flex; }
.st .bar-h { justify-content: flex-end; }
.st .bar-h i { background: var(--home); } .st .bar-a i { background: var(--away); }
.st i { display: block; height: 100%; border-radius: 3px; }
.lu { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.lu > div { padding: 10px 14px; min-width: 0; }
.lu > div + div { border-left: 1px solid var(--line); }
.lu h4 { margin: 0 0 2px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu .fm { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.lu ol { list-style: none; margin: 0 0 10px; padding: 0; }
.lu li { display: flex; gap: 6px; padding: 2px 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu li b { flex: none; width: 22px; color: var(--muted); font-weight: 600; text-align: right; }
.lu li .nf { flex: none; width: 16px; display: inline-flex; align-items: center; } .lu li .nf .flg { width: 14px; height: 14px; margin: 0; }
.lu .cap { font-size: 11px; color: var(--label); letter-spacing: .1em; text-transform: uppercase; margin: 8px 0 4px; font-weight: 700; }
.chips { display: flex; gap: 6px; padding: 10px 14px 4px; }
.chip { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--text); color: var(--panel); border-color: var(--text); }
/* xG form in H2H (D-C027 draft): each side's latest matches with xG */
.xgw { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; }
.xgw button { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.xgw button[aria-pressed="true"] { background: var(--text); color: var(--panel); border-color: var(--text); }
.xgf { width: calc(100% - 28px); margin: 6px 14px 0; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.xgf th { padding: 6px 4px; font-size: 11px; font-weight: 700; color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xgf th:first-child { width: 44%; text-align: left; }
.xgf td { padding: 5px 4px; border-top: 1px solid var(--line); text-align: right; font-family: var(--mono); white-space: nowrap; }
.xgf td:first-child { text-align: left; font-family: var(--sans); color: var(--muted); white-space: normal; }
.xgf td:first-child small { display: block; font-size: 10.5px; color: var(--faint); }
.xgf td b { color: var(--text); } .xgf td i { font-style: normal; color: var(--faint); font-size: 11px; margin-left: 3px; }
.xgf .xrv.above { color: var(--good); } .xgf .xrv.below { color: #e0a106; } .xgf .xrv.honoured { color: var(--text); }
.xrb { width: 60px; height: 16px; vertical-align: middle; } .xrb rect { fill: var(--accent); }
.xgs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 14px 0; }
.xgs h5 { margin: 0 0 4px; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xgs svg { display: block; width: 100%; height: 58px; }
.xgs .f { fill: var(--accent); } .xgs .a { fill: var(--faint); } .xgs .W { fill: var(--good); } .xgs .D { fill: #e0a106; } .xgs .L { fill: var(--live); }
.xgk { margin: 6px 14px 0; font-size: 11px; color: var(--faint); } .xgk i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: -1px; margin: 0 4px 0 8px; }
/* the lineups on a pitch, from each starter's place ("row:col", row 1 = the goalkeeper) */
.pitch { display: block; width: calc(100% - 28px); max-width: 640px; margin: 12px auto 6px; }
.pitch .pf { fill: color-mix(in srgb, var(--good) 8%, var(--panel)); stroke: color-mix(in srgb, var(--good) 40%, transparent); stroke-width: 1.2; }
.pitch .pln { fill: none; stroke: color-mix(in srgb, var(--good) 40%, transparent); stroke-width: 1.2; }
.pitch .ph { fill: var(--home); } .pitch .pa { fill: var(--away); }
.pitch .pn { font: 700 10px var(--mono); fill: #0f1113; text-anchor: middle; letter-spacing: -.04em; }      /* the shirt number, dark on the lit circle */
.pitch .pt { font: 600 8.5px var(--sans); fill: var(--text); text-anchor: middle; }
/* the match's xG tab: the shared panel (D-C048) */
.xgp-host { display: block; }
.pitch .pk { font: 700 9px var(--sans); fill: var(--muted); }
.pnote { margin: 4px 14px 6px; color: var(--faint); font-size: 11px; }
.info { padding: 6px 14px; }
.info div { display: grid; grid-template-columns: 110px 1fr; padding: 8px 0; border-bottom: 1px solid var(--line); }
.info span:first-child { color: var(--muted); }

/* goal toast for followed matches */
.toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; max-width: calc(100vw - 32px);
  background: var(--text); color: var(--panel); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow);
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
/* owner, 2026-10-30 ("desktop notifications are ugly"): the toast as a dark card in the site's look */
#toastRoot .toast { color: var(--text); background: rgba(19,21,23,.97); border: 1px solid rgba(255,255,255,.1); padding: 0; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  white-space: normal; font: 500 14px/1.35 var(--ui); animation: t-in .28s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes t-in { from { opacity: 0; transform: translate(-50%, 14px) scale(.97); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
#toastRoot .t-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px;
  background: none; color: var(--muted); cursor: pointer; } #toastRoot .t-x:hover { color: var(--text); background: rgba(255,255,255,.07); }
#toastRoot .t-x .i { width: 14px; height: 14px; }
#toastRoot .t-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left;
  animation: t-bar var(--t-ms, 9000ms) linear both; opacity: .8; }
@keyframes t-bar { to { transform: scaleX(0); } }
#toastRoot .toast:hover .t-bar { animation-play-state: paused; }
#toastRoot .t-note { display: flex; align-items: center; gap: 10px; padding: 12px 44px 12px 14px; }
#toastRoot .t-note > .i { width: 16px; height: 16px; color: var(--accent); flex: none; }
#toastRoot .t-goal { width: min(460px, calc(100vw - 24px)); padding: 12px 16px 14px; border-left: 3px solid var(--accent); }
#toastRoot .t-goal.t-off { border-left-color: #b91c1c; }   /* owner, 2026-10-31: a cancelled goal in deep red */
#toastRoot .t-top { display: flex; align-items: center; gap: 10px; padding-right: 26px; margin-bottom: 10px; }
#toastRoot .t-tag { padding: 3px 9px 2px; border-radius: 6px; background: var(--accent); color: #111; font: 700 11px/1.2 "Space Grotesk", var(--ui);
  letter-spacing: .08em; text-transform: uppercase; transform: skewX(-8deg); white-space: nowrap; flex: none; }
#toastRoot .t-off .t-tag { background: #b91c1c; color: #fff; }
#toastRoot .t-off .t-bar { background: #b91c1c; }
#toastRoot .t-min { font: 700 13px var(--mono); color: var(--accent); }
#toastRoot .t-off .t-min { color: #ff5d5d; }
#toastRoot .t-lg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 11.5px var(--mono); color: var(--muted); }
#toastRoot .t-m { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
#toastRoot .t-h, #toastRoot .t-a { display: flex; align-items: center; gap: 8px; min-width: 0; }
#toastRoot .t-h { justify-content: flex-end; text-align: right; } #toastRoot .t-a { flex-direction: row-reverse; justify-content: flex-end; }
#toastRoot .t-h b, #toastRoot .t-a b { font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#toastRoot .t-m b.lit { color: var(--text); }
#toastRoot .t-m img.crest { width: 22px; height: 22px; flex: none; }
#toastRoot .t-sc { display: flex; align-items: center; gap: 6px; font: 700 22px/1 "Space Grotesk", var(--ui); color: var(--muted); }
#toastRoot .t-sc i { font-style: normal; opacity: .5; } #toastRoot .t-sc .lit { color: var(--accent); }
#toastRoot .t-off .t-sc .lit { color: #ff5d5d; }
@media (prefers-reduced-motion: reduce) { #toastRoot .toast { animation: none; } }
/* owner, 2026-11-07 ("notifications over light theme are dark"): in light the toast is a white card (its text, the minute,
   the score and the tag already take light's colours: ink, olive, white on olive) */
html.lt #toastRoot .toast { background: rgba(255,255,255,.98); color: var(--lt-ink); border-color: var(--lt-line);
  box-shadow: 0 18px 44px rgba(13,30,40,.18), 0 0 0 1px rgba(13,30,40,.05); }
html.lt #toastRoot .t-x:hover, html.lt #toastRoot .t-act.t-un .t-ic { background: var(--lt-box); }
footer {
  flex: none; width: 100%; max-width: 1480px; margin: 0 auto; padding: 7px 16px calc(7px + env(safe-area-inset-bottom));
  color: var(--faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 899px) {
  .tabs { display: flex; }
  .grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "p"; padding: 10px 0 0; gap: 0; }
  #p-live, #p-xg { grid-area: p; }
  .dnav { margin-left: 0; width: 100%; } .dnav .day { flex: 1; }
  /* the search takes its own row under the bar */
  .bar { flex-wrap: wrap; height: auto; min-height: 52px; padding-top: 10px; padding-bottom: 8px; row-gap: 8px; }
  header .search { order: 10; flex: 1 1 100%; margin-left: 0; }
  .stamp { margin-left: auto; }
  #tickBtn { display: none; }
  header .btn .txt { display: none; }
  .phead { top: 129px; }
  .group h3 { top: 174px; }
  .panel { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .panel[hidden] { display: none; }
  .search { width: 100%; margin: 0; }
  .phead { flex-wrap: wrap; }
  .stamp .long { display: none; }
}
@media (min-width: 900px) { .panel[hidden] { display: flex; } }
@media (max-width: 420px) {
  .row { grid-template-columns: 24px 44px minmax(0, 1fr) 54px minmax(0, 1fr) 22px; gap: 5px; font-size: 13px; padding-right: 8px; }
  .bar { gap: 8px; padding: 0 12px; }
  .btn .txt { display: none; }
  .stamp { display: none; }
  .stt .wdl { display: none; }
  .seg button { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .dot, .band.b4 { animation: none; } * { transition: none !important; } }

/* ticker (D-C024): every live match, hottest first, moving right to left; hover holds it */
.ticker { height: 28px; overflow: hidden; white-space: nowrap; background: color-mix(in srgb, var(--live) 4%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--live) 12%, var(--line)); font-family: var(--mono); font-size: 11px; }
.ticker .tk { display: inline-flex; height: 100%; align-items: center; animation: tick var(--dur, 120s) linear infinite; }
.ticker:hover .tk { animation-play-state: paused; }
.ticker .ti { display: inline-flex; gap: 6px; align-items: center; height: 100%; padding: 0 16px; border-right: 1px solid var(--line); cursor: pointer; color: var(--muted); }
.ticker .ti:hover { color: var(--text); }
.ticker .ti .mn { color: var(--live); font-weight: 700; font-size: 10px; } .ticker .ti .mn.ht { color: var(--brk); }
.ticker .ti b { color: var(--text); }
.ticker .ti .cc { color: var(--faint); font-size: 9px; }
.ticker .ti.hot .mn::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* header counts */
.stats { display: inline-flex; gap: 12px; font-size: 12px; color: var(--muted); }
.stats span { white-space: nowrap; }
.stats span + span::before { content: "·"; margin-right: 12px; color: var(--faint); }
.brand { font-family: var(--sans); }
.brand .cmd { font-family: var(--mono); font-size: 8px; letter-spacing: .2em; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 2px 5px; border-radius: 2px; margin-left: 6px; vertical-align: 3px; font-weight: 600; }

/* map (D-C024): where matches are, glowing where they are live; a click narrows the list */
#p-map { position: relative; }
.mapbox { position: relative; height: var(--map-h, 340px); background: var(--sea); overflow: hidden; touch-action: none; }
.mapbox > svg { display: block; width: 100%; height: 100%; cursor: grab; overflow: hidden; }
.mapbox > svg.drag { cursor: grabbing; }
.mapbox .cty { fill: var(--land); stroke: none; transition: fill .2s; }
/* coastlines a touch brighter than land borders, both a hair wide at any zoom */
.mapbox .coast, .mapbox .bord { fill: none; vector-effect: non-scaling-stroke; pointer-events: none; stroke-linejoin: round; }
.mapbox .coast { stroke: color-mix(in srgb, var(--accent) 30%, var(--land-line)); stroke-width: .7; }
.mapbox .bord { stroke: var(--land-line); stroke-width: .5; }
.mapbox .cty.on { fill: var(--land-on); cursor: pointer; }
.mapbox .cty.on:hover { fill: color-mix(in srgb, var(--accent) 18%, var(--land-on)); }
.mapbox .cty.sel { fill: color-mix(in srgb, var(--accent) 22%, var(--land-on)); stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mapbox .grat { fill: none; stroke: color-mix(in srgb, var(--text) 4%, transparent); stroke-width: .5; vector-effect: non-scaling-stroke; }
.mapbox .hs { cursor: pointer; }
.mapbox .hs .core { stroke: rgba(255,255,255,.35); vector-effect: non-scaling-stroke; }
.mapbox .hs .ring { fill: none; vector-effect: non-scaling-stroke; opacity: .5; }
.mapbox .hs.live .glow { animation: glow 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes glow { 50% { opacity: .35; transform: scale(1.25); } }
.mapbox .hs text { font-family: var(--mono); font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.mapbox .hs:hover .ring, .mapbox .hs.sel .ring { opacity: 1; }
.mtip { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); padding: 3px 8px; border-radius: 4px; font-family: var(--mono); font-size: 10px; font-weight: 600;
  background: rgba(0,0,0,.85); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.1); white-space: nowrap; z-index: 2; }
.mtip .lv { color: #ff6b6b; margin-left: 6px; }
.mctl { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.mcrumb { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted); }
.mcrumb button { color: var(--muted); } .mcrumb button:hover { color: var(--text); } .mcrumb .cur { color: var(--accent); } .mcrumb .sep { color: var(--faint); }
.mzoom { display: flex; flex-direction: column; gap: 2px; }
.mzoom button { width: 28px; height: 28px; border-radius: 5px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--text); font-family: var(--mono); font-size: 14px; }
.mregions { position: absolute; left: 10px; right: 70px; bottom: 8px; display: flex; gap: 3px; flex-wrap: wrap; z-index: 1; }
.mregions button { padding: 3px 8px; border-radius: 4px; font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(8px); color: var(--muted); display: inline-flex; gap: 5px; }
.mregions button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.mregions .lv { color: var(--live); font-weight: 700; } .mregions .n { color: var(--faint); }
.mzoomtxt { position: absolute; right: 10px; bottom: 10px; font-family: var(--mono); font-size: 9px; color: var(--faint); }
.mgrip { height: 8px; cursor: row-resize; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--line); background: var(--head); }
.mgrip::after { content: ""; width: 32px; height: 2px; border-radius: 1px; background: var(--faint); opacity: .6; }
.mregions { display: none; }
/* map tools (D-C024): layers, fly-to, a match card per country, goal ripples */
.mtools { display: flex; gap: 4px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; background: var(--head); }
.mtools button { flex: none; height: 24px; padding: 0 8px; border-radius: 5px; font-family: var(--mono); font-size: 10.5px; border: 1px solid var(--line); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.mtools button:hover { color: var(--text); }
.mtools button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.mtools .n { color: var(--faint); }
.mtools input { flex: 0 1 170px; min-width: 110px; height: 24px; margin-left: auto; padding: 0 8px; border-radius: 5px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 11px var(--mono); }
.mapbox .hs.b2 .glow { animation-duration: 1.3s; } .mapbox .hs.b3 .glow { animation-duration: .9s; } .mapbox .hs.b4 .glow { animation-duration: .6s; }
.mapbox .rip { fill: none; stroke: #ff4444; vector-effect: non-scaling-stroke; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: rip 1.6s ease-out 5 both; }
@keyframes rip { from { transform: scale(.3); opacity: 1; } to { transform: scale(3); opacity: 0; } }
.mapbox .gtag { animation: gtag 9s ease-out both; pointer-events: none; }
@keyframes gtag { 0% { opacity: 0; } 5%, 85% { opacity: 1; } 100% { opacity: 0; } }
.mapbox .gtag .ld { stroke: #ff4444; vector-effect: non-scaling-stroke; stroke-width: 1.2; stroke-dasharray: 3 2; }
.mapbox .gtag .pin { fill: #ff4444; }
.mapbox .gtag .bg { fill: rgba(10,14,24,.92); stroke: rgba(255,68,68,.7); vector-effect: non-scaling-stroke; stroke-width: 1; }
.mapbox .gtag .acc { fill: #ff4444; }
.mapbox .gtag text { font-family: var(--mono); font-weight: 700; fill: #fff; dominant-baseline: central; }
.mapbox .gtag .mn { fill: #ff6b6b; }
.mapbox .gtag .gb { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mapbox .gtag .lg { font-weight: 600; fill: rgba(255,255,255,.55); }
.mcard { position: absolute; z-index: 3; width: min(320px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow-y: auto; border-radius: 8px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,.45); font-size: 12px; }
.mcard .mch { display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 10px; border-bottom: 1px solid var(--line); font-weight: 700; position: sticky; top: 0; background: inherit; }
.mcard .mch .sub { color: var(--faint); font: 700 10px var(--mono); }
.mcard .mch button { margin-left: auto; width: 22px; height: 22px; border-radius: 4px; color: var(--muted); }
.mcard .mr { display: grid; grid-template-columns: 18px 40px 1fr auto 1fr 8px; gap: 6px; align-items: center; padding: 5px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); cursor: pointer; }
.mcard .mr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.mcard .mr .star { width: 18px; height: 18px; font-size: 12px; }
.mcard .mr .t { font: 700 10.5px var(--mono); color: var(--kick); } .mcard .mr .t.c-live { color: var(--live); } .mcard .mr .t.c-ht { color: var(--brk); } .mcard .mr .t.c-end { color: var(--faint); }
.mcard .mr .h { text-align: right; } .mcard .mr .h, .mcard .mr .a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard .mr .sc { font: 700 11.5px var(--mono); }
.mcard .mr .bd { width: 8px; height: 8px; border-radius: 50%; } .bd.b1 { background: #ffbe4c; } .bd.b2 { background: #ff4f03; } .bd.b3, .bd.b4 { background: #ff4444; }
.mcard .ml { padding: 4px 10px 2px; font: 700 9.5px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.mcard .mf { display: flex; justify-content: space-between; padding: 7px 10px; }
.mcard .mf button { color: var(--accent); font-weight: 600; }
.mcard .empty { padding: 12px; }
.mcard .mch .pinb { margin-left: auto; } .mcard .mch .pinb + button { margin-left: 0; }
.mcard .mch .pinb:hover, .mcard .mch .pinb[aria-pressed="true"] { color: var(--accent); }
.mcard .mch > button { flex: none; }
.mcard .mch .cn, .mcard .mch .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard .mch .flg, .mcard .mch > .i { flex: none; }
#pins .pin { overflow-x: hidden; }
#pins > .pin { position: fixed; z-index: 60; max-height: min(60vh, 460px); }
#pins .pin .mch { cursor: grab; touch-action: none; user-select: none; }
#pins .pin.drag { z-index: 70; box-shadow: 0 16px 40px rgba(0,0,0,.5); opacity: .95; } #pins .pin.drag .mch { cursor: grabbing; }
#pindock { position: fixed; right: 14px; bottom: 14px; z-index: 59; display: none; flex-direction: column; gap: 8px; width: min(320px, calc(100vw - 28px)); max-height: calc(100vh - 90px); overflow-y: auto; }
#pindock.has, #pindock.open { display: flex; }
#pindock.open { min-height: 60px; padding: 6px; border: 1.5px dashed var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
#pindock .pin { position: static; width: 100%; max-height: 300px; }
.pin .mch .pcomp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 11.5px; }
.pin .mch .star { width: 22px; height: 22px; margin-left: auto; color: var(--muted); } .pin .mch .star + button { margin-left: 0; }
.pin .mch .star .i { width: 12px; height: 12px; } .pin .mch .star[aria-pressed="true"] { color: var(--star); }
.pin .pm { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 10px 12px; cursor: pointer; }
.pin .pm:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pin .pm .h { text-align: right; font-weight: 700; } .pin .pm .a { font-weight: 700; }
.pin .pm .h, .pin .pm .a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.pin .pm .sc { font: 700 17px var(--mono); }
.pin .pm .t { grid-column: 1 / -1; text-align: center; font: 700 11px var(--mono); color: var(--kick); }
.pin .pm .t.c-live { color: var(--live); } .pin .pm .t.c-ht { color: var(--brk); } .pin .pm .t.c-end { color: var(--faint); }
.pin .pm .ps { grid-column: 1 / -1; text-align: center; font: 700 10px var(--mono); color: var(--faint); margin-top: -2px; }
.row { position: relative; }
.row .rpin { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 5px; display: none; place-items: center; color: var(--muted); background: var(--panel); border: 1px solid var(--line); }
.row .rpin .i { width: 12px; height: 12px; }
.row:hover .rpin, .row .rpin.on { display: grid; } .row .rpin.on { color: var(--accent); border-color: var(--accent); }
.row .rpin:hover { color: var(--accent); }
@media (hover: none) { .row .rpin:not(.on) { display: none; } }
#dPin[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.pingap { flex: none; border: 1.5px dashed var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* the day's timeline under the map: how many matches are being played through the day; drag it to see the map at any time */
.mtime { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--line); background: var(--head); }
.mtime[hidden] { display: none; }
.mtime > button { flex: none; height: 26px; min-width: 26px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); font: 700 10.5px var(--mono); display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.mtime > button:hover { color: var(--text); } .mtime > button[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mtime > button .i { width: 12px; height: 12px; }
.tlbox { position: relative; flex: 1; min-width: 120px; height: 38px; }
.tlbox svg { position: absolute; inset: 0 0 12px 0; width: 100%; height: calc(100% - 12px); }
.tlbox .bar { fill: color-mix(in srgb, var(--accent) 28%, transparent); } .tlbox .bar.at { fill: var(--accent); } .tlbox .bar.past { fill: color-mix(in srgb, var(--text) 14%, transparent); }
.tlbox .nowl { stroke: var(--live); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tlbox .hrs { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; display: flex; justify-content: space-between; font: 700 8.5px var(--mono); color: var(--faint); pointer-events: none; }
.tlbox input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; }
.tlbox input::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.tlbox input::-moz-range-track { height: 100%; background: transparent; }
.tlbox input::-webkit-slider-thumb { -webkit-appearance: none; width: 3px; height: 38px; background: var(--text); border-radius: 2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 18%, transparent); }
.tlbox input::-moz-range-thumb { width: 3px; height: 38px; border: 0; background: var(--text); border-radius: 2px; }
.tlbox input.now::-webkit-slider-thumb { background: var(--live); } .tlbox input.now::-moz-range-thumb { background: var(--live); }
/* D-C077 (owner: "should slider and its market be higher or not so bulky because it looks conflicting with graph bars"):
   ui.js's site-wide slider look (data-xs keeps it off) had laid its thick track and big handle across the bars. The
   Xgoals look stays, out of the bars' way: a thin track under the bars, filled up to the time; a smaller skewed handle
   on it; a 1 px line up through the bars marks the time. The browser's own handle is kept, invisible, for dragging. */
.tlbox { --tc: var(--accent); --xf: 0; --x: calc(7px + (100% - 14px) * var(--xf)); }
.tlbox.now { --tc: var(--live); }
.tlbox input#tlR { background: linear-gradient(var(--tc), var(--tc)) 0 26px / var(--x) 2px no-repeat,
  linear-gradient(color-mix(in srgb, var(--text) 14%, transparent), color-mix(in srgb, var(--text) 14%, transparent)) 0 26px / 100% 2px no-repeat; }
.tlbox input#tlR::-webkit-slider-thumb { width: 14px; height: 38px; background: transparent; box-shadow: none; }
.tlbox input#tlR::-moz-range-thumb { width: 14px; height: 38px; background: transparent; }
.tlh { position: absolute; top: 0; left: var(--x); width: 0; height: 100%; pointer-events: none; z-index: 1; }
.tlh::before { content: ""; position: absolute; left: -.5px; top: 0; width: 1px; height: 26px; background: var(--tc); }
.tlh::after { content: ""; position: absolute; left: -4px; top: 21px; width: 8px; height: 12px; border-radius: 2px; background: var(--tc);
  transform: skewX(-12deg); box-shadow: 0 0 0 2px var(--head); }
.tlbox input#tlR:focus-visible { outline: 0; } .tlbox:has(#tlR:focus-visible) .tlh::after { box-shadow: 0 0 0 2px var(--head), 0 0 0 3px var(--tc); }
.mtime .lbl { flex: none; min-width: 112px; text-align: right; font: 700 10.5px var(--mono); color: var(--muted); } .mtime .lbl b { color: var(--text); }
@media (max-width: 899px) { .mtime .lbl { min-width: 0; } .mtime #tlNow { display: none; } }
/* the region row replaces the map by default; the Map button brings the map back */
.rbar { display: flex; gap: 4px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.rbar button { flex: none; height: 26px; padding: 0 9px; border-radius: 5px; font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.rbar button:hover { color: var(--text); }
.rbar button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.rbar .lv { color: var(--text); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } .rbar .n { color: var(--faint); }
.rbar .lv::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.rbar .rkey { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--faint); white-space: nowrap; } .rbar .rkey .n { color: var(--faint); }
@media (min-width: 900px) { .rbar { flex-wrap: wrap; overflow: visible; } }
.nomap #p-map, .nomap .tab[data-p="map"] { display: none; }
@media (min-width: 900px) { .nomap .grid { grid-template-rows: auto; grid-template-areas: "live xg"; }
  .comp .grid { grid-template-areas: "map map" "live xg"; } .nomap.comp .grid { grid-template-areas: "live xg"; } }
@media (min-width: 1640px) { .nomap .grid { grid-template-areas: "nav live xg"; } .nomap #p-nav { grid-row: 1; }
  .comp .grid { grid-template-areas: "nav map map" "nav live xg"; } .nomap.comp .grid { grid-template-areas: "nav live xg"; } }
.mapchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 7px; font-size: 12px; font-weight: 600;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.mapchip button { width: 20px; height: 20px; border-radius: 4px; color: inherit; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 899px) { #p-map { grid-area: p; } .mapbox { height: 62vh; } .mgrip { display: none; } #p-map .phead .btn { display: none; } .stats { display: none; } }
@media (max-width: 520px) { .brand .cmd { display: none; } }
@media (prefers-reduced-motion: reduce) { .ticker .tk, .mapbox .hs.live .glow, .clock.c-live::before { animation: none; } }

/* ===== the Goal Markets look (D-C028): the home's palette, type and furniture on every inner page ===== */
:root { --ui: "Inter", system-ui, -apple-system, sans-serif; --cyd: rgba(209,254,23,.13); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1113; --panel: #131517; --head: #18191c; --line: rgba(255,255,255,0.101); --text: #f7f7f8; --muted: #a7a8ab; --faint: #94959a;
  --label: #d1fe17; --accent: #d1fe17; --kick: #d1fe17; --live: #ff005b; --live-bg: rgba(255,0,91,.07); --chip: #1c1e21;
  --sea: #0f1113; --land: rgba(255,255,255,0.043); --land-on: rgba(255,255,255,0.094); --land-line: rgba(255,255,255,0.072); --goal-bg: rgba(209,254,23,.10);
  --home: #d1fe17; --away: #9ce6f3; --shadow: 0 18px 50px rgba(0,0,0,.6); } }
:root[data-theme="dark"] {
  --bg: #0f1113; --panel: #131517; --head: #18191c; --line: rgba(255,255,255,0.101); --text: #f7f7f8; --muted: #a7a8ab; --faint: #94959a;
  --label: #d1fe17; --accent: #d1fe17; --kick: #d1fe17; --live: #ff005b; --live-bg: rgba(255,0,91,.07); --chip: #1c1e21;
  --sea: #0f1113; --land: rgba(255,255,255,0.043); --land-on: rgba(255,255,255,0.094); --land-line: rgba(255,255,255,0.072); --goal-bg: rgba(209,254,23,.10);
  --home: #d1fe17; --away: #9ce6f3; --shadow: 0 18px 50px rgba(0,0,0,.6);
}
body { font: 13.5px/1.4 var(--ui); -webkit-font-smoothing: antialiased; position: relative; }
html { background: var(--bg); }
:root:not([data-theme="light"]) body { background: transparent; }
:root:not([data-theme="light"]) body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(1100px 520px at 18% -12%, rgba(209,254,23,.10), transparent 62%), radial-gradient(900px 520px at 100% -5%, rgba(231,41,48,.06), transparent 60%),
    linear-gradient(rgba(255,255,255,0.029) 1px, transparent 1px) 0 0/100% 28px, linear-gradient(90deg, rgba(255,255,255,0.029) 1px, transparent 1px) 0 0/28px 100%;
  -webkit-mask-image: linear-gradient(#000 0, rgba(0,0,0,.35) 60%, transparent 100%); mask-image: linear-gradient(#000 0, rgba(0,0,0,.35) 60%, transparent 100%); }
/* header: the home's bar */
header { background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid var(--line); }
.bar { gap: 14px; }
.wm { display: flex; align-items: baseline; text-decoration: none; font: 700 21px/1 "Space Grotesk", var(--sans); letter-spacing: -.045em; color: var(--text); flex: none; }
.wm b { font-weight: 700; color: var(--accent); }
.wm sup { font: 700 9px/1 var(--mono); letter-spacing: .12em; color: var(--faint); margin-left: 8px; align-self: center; border: 1px solid var(--line); padding: 3px 5px 2px; border-radius: 4px; }
.mnav { display: flex; gap: 2px; flex: none; }
.mnav a { position: relative; text-decoration: none; font: 600 13px/1 "Space Grotesk", var(--sans); color: var(--muted); padding: 9px 12px; border-radius: 9px; transition: color .2s, background .2s; }
.mnav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.mnav a[aria-current="page"] { color: var(--text); }
.mnav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -9px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.btn { height: 32px; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in srgb, var(--head) 80%, transparent); font: 600 12px var(--ui); }
.btn:hover { border-color: color-mix(in srgb, var(--text) 24%, transparent); }
header .search, .search { border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--head) 80%, transparent); font: 500 13px var(--ui); transition: border-color .2s, box-shadow .2s; }
header .search { height: 34px; }
.search:focus { outline: 0; border-color: rgba(209,254,23,.5); box-shadow: 0 0 0 3px rgba(209,254,23,.12); }
.pill { font: 700 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--live) 30%, transparent); background: var(--live-bg); color: var(--text); }
.pill .dot { background: var(--live); box-shadow: 0 0 10px var(--live); }
.stats, .stamp { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; }
/* panels: the home's glass cards with mono labels */
.grid { gap: 16px; padding-top: 16px; }
.panel { border-radius: 14px; border-color: var(--line); }
:root:not([data-theme="light"]) .panel { background: linear-gradient(180deg, rgba(22,24,27,.94), rgba(19,21,23,.94)); }
.phead { background: color-mix(in srgb, var(--head) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); padding: 8px 14px; }
.plabel { display: inline-flex; align-items: center; gap: 10px; font: 700 10.5px/1 var(--mono); letter-spacing: .15em; color: var(--text); }
.plabel::before { content: ""; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 8px var(--accent); flex: none; }
.pcount { font: 400 10.5px var(--mono); letter-spacing: .08em; color: var(--faint); }
.group h3 { font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: color-mix(in srgb, var(--head) 94%, transparent); border-color: color-mix(in srgb, var(--line) 60%, transparent); }
.group h3 span { letter-spacing: .06em; }
.row { border-bottom-color: color-mix(in srgb, var(--line) 55%, transparent); }
.row:hover, .gl:hover, .nv-x:hover, .nv-c:hover, .nv-l:hover, .hrow:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.team.w { color: var(--text); }
.score b { font-size: 14.5px; letter-spacing: -.02em; }
.clock { font-size: 11px; letter-spacing: .02em; }
/* segmented controls and chips: dark wells, the pressed one lit like the home's filters */
.seg { background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.seg button { font: 700 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; }
.seg button[aria-pressed="true"] { background: var(--chip); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }
.rbar button, .mtools button, .mregions button, .mtime > button { border-radius: 7px; font-size: 10.5px; letter-spacing: .04em; }
.rbar button[aria-pressed="true"], .mtools button[aria-pressed="true"] { color: #0f1113; background: var(--accent); border-color: var(--accent); }
.rbar button[aria-pressed="true"] .n, .rbar button[aria-pressed="true"] .lv, .mtools button[aria-pressed="true"] .n { color: #0f1113; }
.rbar button[aria-pressed="true"] .lv::before { background: #0f1113; }
.chip, .xgw button, .subt button { font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; border-radius: 7px; }
.chip[aria-pressed="true"], .xgw button[aria-pressed="true"], .subt button[aria-pressed="true"] { background: var(--accent); color: #0f1113; border-color: var(--accent); }
.tab { font: 700 11px var(--mono); letter-spacing: .1em; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in srgb, var(--head) 80%, transparent); }
.tab[aria-selected="true"] { background: var(--accent); color: #0f1113; border-color: var(--accent); }
select.season { border-radius: 7px; font: 700 11px var(--mono); background: var(--head); }
.ctitle { font: 700 15px "Space Grotesk", var(--sans); letter-spacing: -.01em; }
/* the xG board and tables in mono, like the home's book */
.stt th, .xgt th, .xgf th { font: 700 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.stt td { font-family: var(--mono); font-size: 12.5px; } .stt .tm, .stt td.pl { font-family: var(--ui); }
.xc { border-radius: 12px; background: color-mix(in srgb, var(--head) 70%, transparent); }
.xc:hover { border-color: rgba(209,254,23,.5); }
.xch, .xct.xhd { font-family: var(--mono); }
/* the match drawer: the home's featured market */
.drawer { border-left: 1px solid var(--line); }
:root:not([data-theme="light"]) .drawer { background: linear-gradient(180deg, #18191c, #131517); }
.dhead { background: transparent; border-bottom: 1px solid var(--line); }
.dtop { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dscore .tm { font: 700 17px "Space Grotesk", var(--sans); letter-spacing: -.02em; }
.dscore .big { font: 400 40px/1 var(--mono); letter-spacing: -.05em; }
.dscore .big small { font: 700 12px var(--mono); letter-spacing: .02em; }
.dsub { font: 400 11px var(--mono); }
.dtab { font: 700 10.5px var(--mono); letter-spacing: .12em; }
.dtab[aria-selected="true"] { color: var(--text); border-color: var(--accent); box-shadow: 0 6px 12px -8px var(--accent); }
.hsec { font: 700 10px var(--mono); letter-spacing: .14em; background: color-mix(in srgb, var(--head) 80%, transparent); border: 1px solid var(--line); }
.st .lbl { font-family: var(--mono); font-size: 12.5px; } .st .lbl span:nth-child(2) { font-family: var(--ui); }
.ev .min { font-family: var(--mono); }
.info span:first-child { font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
/* ticker: the home's tape */
.ticker { height: 36px; font-size: 11.5px; background: color-mix(in srgb, var(--panel) 85%, transparent); border-bottom: 1px solid var(--line); }
.ticker .ti b { color: var(--text); font-weight: 700; }
/* navigator */
.nv-h { letter-spacing: .14em; }
.nv-l[aria-current="true"] { box-shadow: inset 2px 0 0 var(--accent); }
/* goals feed: a goal is lit cyan, as on the home's tape */
.gl.new { background: linear-gradient(90deg, rgba(209,254,23,.12), transparent 70%); }
.gl .m { font-family: var(--mono); }
footer { font: 400 10.5px var(--mono); letter-spacing: .04em; color: var(--faint); }
footer a { color: var(--accent); text-decoration: none; }
.toast { border-radius: 12px; font-family: var(--ui); }
@media (max-width: 899px) { .mnav { order: 3; } .mnav a { padding: 8px 9px; font-size: 12.5px; } .mnav a[aria-current="page"]::after { bottom: -5px; } }
@media (max-width: 520px) { .wm sup { display: none; } .mnav a { padding: 7px 7px; font-size: 12px; } }

/* phones: the home's bottom bar for the four places */
.bnav { display: none; }
@media (max-width: 760px) {
  .mnav { display: none; }
  .bnav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  .bnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; font: 600 10.5px "Space Grotesk", var(--sans); color: var(--muted); }
  .bnav a[aria-current="page"] { color: var(--accent); }
  .bnav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  #pindock { bottom: calc(74px + env(safe-area-inset-bottom)); } .toast { bottom: calc(74px + env(safe-area-inset-bottom)); }
}

.grid > .panel { min-width: 0; }
.vbar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .vbar .seg::-webkit-scrollbar { display: none; }
@media (max-width: 520px) { .seg button { letter-spacing: .02em; padding: 0 7px; } }
/* D-C064: a short name's full form beside it on its header (MLS · Major League Soccer) */
.ctitle .fulln { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--faint); text-transform: none; letter-spacing: 0; }
/* D-C066: the breadcrumb of a generated page, above its H1 */
.crumbs { margin: 0 0 6px; font: 400 11px/1.4 "Space Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #8b8d90; }
.crumbs a { color: #c8c8c8; text-decoration: none; } .crumbs a:hover { color: #d1fe17; }
.crumbs [aria-current] { color: #d1fe17; }
/* ===== D-C067: pinned matches in Xgoals' own look (owner: "pinned matches need a better UI ... more higgsfield compliant") ===== */
#pins .pin:has(.pm), #pindock .pin:has(.pm) { border: 0; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 70%), rgba(19,21,23,.94);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 18px 44px rgba(0,0,0,.5); }
#pins .pin:has(.pm.s-live), #pindock .pin:has(.pm.s-live) { box-shadow: 0 0 0 1px rgba(209,254,23,.45), 0 0 28px -8px rgba(209,254,23,.45), 0 18px 44px rgba(0,0,0,.5); }
.pin:has(.pm) .mch { gap: 8px; padding: 9px 10px 8px 12px; border-bottom: 1px solid rgba(255,255,255,.07); background: transparent;
  font: 700 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #8b8d90; }
.pin:has(.pm) .mch .pcomp { font-size: 10px; color: #c8c8c8; }
.pin:has(.pm) .mch button, .pin:has(.pm) .mch .star { width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center; color: #8b8d90;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pin:has(.pm) .mch button:hover { color: #fff; box-shadow: inset 0 0 0 1px #d1fe17; }
.pin:has(.pm) .mch .star[aria-pressed="true"] { color: #d1fe17; }
.pin .pm { gap: 8px 12px; padding: 14px 14px 12px; }
.pin .pm:hover { background: rgba(209,254,23,.04); }
.pin .pm .h, .pin .pm .a { font: 700 13.5px/1.2 "Space Grotesk", Inter, sans-serif; color: #f2f2f2; letter-spacing: -.01em; }
.pin .pm .sc { display: inline-flex; align-items: center; gap: 5px; font: 700 18px/1 "Space Mono", ui-monospace, monospace; }
.pin .pm .sc b { min-width: 28px; padding: 5px 7px 4px; text-align: center; border-radius: 6px; transform: skewX(-10deg); color: #fff;
  background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.pin .pm .sc i { font-style: normal; color: #8b8d90; font-size: 14px; } .pin .pm .sc i.v { font-size: 12px; letter-spacing: .08em; }
.pin .pm .t { justify-self: center; padding: 4px 8px 3px; border-radius: 4px; transform: skewX(-12deg); font: 700 10.5px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .06em; color: #c8c8c8; background: rgba(255,255,255,.05); }
#pins .pin .pm .t.c-live, #pindock .pin .pm .t.c-live { color: #111 !important; background: #d1fe17; box-shadow: 0 0 12px -2px rgba(209,254,23,.6); }
.pin .pm .ps { font: 400 10px/1.3 "Space Mono", ui-monospace, monospace; letter-spacing: .04em; color: #8b8d90; }
#pindock.open { border: 0; padding: 8px; border-radius: 16px; background: rgba(209,254,23,.05); box-shadow: inset 0 0 0 1.5px rgba(209,254,23,.45); }
/* D-C068: team page additions */
.tbox.tclub p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.06);
  font: 500 12px/1.35 Inter, sans-serif; } .tbox.tclub p:first-of-type { border-top: 0; }
.tbox.tclub p span { color: #8b8d90; } .tbox.tclub p b { color: #f2f2f2; font-weight: 600; text-align: right; }
.xgf td small { display: block; font-size: 10.5px; color: var(--faint); }
.tway { display: inline-block; padding: 3px 7px 2px; border-radius: 4px; transform: skewX(-12deg); font: 700 10px/1 "Space Mono", monospace; letter-spacing: .06em; }
.tway.in { background: #d1fe17; color: #111; } .tway.out { background: rgba(255,255,255,.08); color: #c8c8c8; }
/* D-C072: a competition's Summary and Archive */
.csum { margin: 8px 14px 4px; font-size: 13.5px; color: var(--muted); }
.csum b { color: var(--text, #f2f2f2); }
.tsc td small { color: var(--faint); font-size: 11px; }
.tarc td:first-child { white-space: nowrap; }
.tarc .faint { color: var(--faint); }
.xgf.tarc td { font-family: var(--sans); }   /* season, winner and runner-up are names, not figures: no mono (owner, 2026-11-06) */

/* ===== D-C077: the competition's header (owner: "breadcrumb, progress bar, starting-ending date or more?"): the way here,
   the competition with its pin, its season and a line of how far the season has gone ===== */
.chd { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 2px 0 4px; }
.crumb { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.crumb > .i { width: 11px; height: 11px; color: var(--faint); }
.crumb a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; white-space: nowrap; }
.crumb a:hover, .crumb a:focus-visible { color: var(--text); }
.crumb a .i { width: 14px; height: 14px; } .crumb a .flg { width: 14px; height: 14px; }
.crumb #backBtn { height: 26px; width: 26px; }
.chd-m { display: flex; gap: 14px; align-items: flex-start; }
.cbadge { flex: none; width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--line); background: var(--head); display: grid; place-items: center; overflow: hidden; }
.cbadge .flg { width: 32px; height: 32px; } .cbadge .i { width: 30px; height: 30px; color: var(--muted); }
.cbadge.txt { font: 700 17px "Space Grotesk", var(--sans); color: var(--muted); }
.chd-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.chd-t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chd .ctitle { flex: 0 1 auto; font: 700 20px/1.15 "Space Grotesk", var(--sans); letter-spacing: -.015em; }
.cpin { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--faint); }
.cpin .i { width: 17px; height: 17px; } .cpin:hover { color: var(--text); background: var(--chip); }
.cpin[aria-pressed="true"] { color: var(--accent); }
.chd-s { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.chd-s select.season, .chd-s .xsel { flex: none; }
.sline { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 5px; }
.sl-w { display: flex; align-items: center; gap: 8px; }
.sl-bar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.sl-bar > b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.sl-bar > i { position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.sl-st { width: 10px; height: 10px; background: var(--panel); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text) 25%, transparent); }
.sl-st.on { box-shadow: inset 0 0 0 2px var(--accent); }
.sl-now { width: 12px; height: 12px; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.sl-cup { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--chip); color: var(--faint); opacity: .55; }
.sl-cup .i { width: 14px; height: 14px; } .sl-cup.on { color: var(--star); opacity: 1; }
.sl-i { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--faint); }
.sl-i .i { width: 16px; height: 16px; } .sl-i:hover, .sl-i[aria-expanded="true"] { color: var(--text); }
.sl-d { display: flex; justify-content: space-between; gap: 10px; padding-right: 62px; font: 700 10.5px var(--mono); letter-spacing: .04em; color: var(--muted); }
.sl-d .sl-w2 { color: var(--text); text-align: center; }
.sl-x { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.nv-x .pnd { display: inline-flex; margin-left: 5px; color: var(--accent); vertical-align: -1px; } .nv-x .pnd .i { width: 11px; height: 11px; }
@media (max-width: 600px) { .cbadge { width: 44px; height: 44px; } .cbadge .flg { width: 26px; height: 26px; } .chd .ctitle { font-size: 17px; } .sline { min-width: 100%; } }
/* D-C077: the small map in the right column on inner pages (the big one is folded away there) */
#p-mini[hidden] { display: none; }
.minimap { display: block; width: 100%; padding: 6px 10px 10px; cursor: pointer; }
.minimap svg { display: block; width: 100%; height: auto; aspect-ratio: 930 / 410; }
.mn-coast { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: .6; vector-effect: non-scaling-stroke; }
.mn-hi { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--accent); stroke-width: .8; vector-effect: non-scaling-stroke; }
.mn-d { fill: #ff5555; }
.minimap:hover .mn-coast, .minimap:focus-visible .mn-coast { stroke: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .mn-g { animation: mnG 2.4s ease-in-out infinite; } }
@keyframes mnG { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (max-width: 899px) { #p-mini { display: none; } }
/* ===== D-C078 (owner: "All these headers do not look so nice, they are mixed with match data, isnt there a better
   higgsfield way to do these?"): a section's heading is a heading, not a box like a data row: white Space Grotesk capitals
   after a skewed lime bar, a hairline under it, room above; its link a small skewed lime-outlined chip ===== */
.hsec { margin: 26px 14px 10px; padding: 0 0 9px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  font: 700 15px/1 "Space Grotesk", var(--sans); letter-spacing: .01em; text-transform: uppercase; color: var(--text); gap: 10px; }
.hsec::before { content: ""; flex: none; width: 4px; height: 15px; background: var(--accent); transform: skewX(-14deg); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); }
.hsec span { font: 700 10.5px var(--mono); letter-spacing: .08em; color: var(--faint); }
/* the link: no border, the scores' soft light fill (fx.css D-C050), skewed as the heading's lime bar (owner: "slighly
   more skew degrees ... no border but a slight background instead like the one we use over scores") */
.hsec .more.in { padding: 6px 11px; border: 0; border-radius: 3px; transform: skewX(-14deg);
  background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent); }
.hsec .more.in:hover, .hsec .more.in:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* a group inside a section (a league's groups or conferences under Standings): a smaller heading, no bar */
.hsec.sub { margin-top: 14px; padding-bottom: 6px; font: 700 10.5px var(--mono); letter-spacing: .12em; color: var(--muted); border-bottom-style: dashed; }
.hsec.sub::before { display: none; }

/* ===== D-C079: the team's header (owner: "we shall create a nice header block area like we did for competitions"; the
   club's box "should not be there, be on top"): the way here, the club's square, its name and code, its facts ===== */
.crumb button { all: unset; cursor: pointer; white-space: nowrap; } .crumb button:hover, .crumb button:focus-visible { color: var(--text); }
.cbadge.tcb { transform: skewX(-11deg); border-radius: 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--head)), var(--head)); }
.cbadge.tcb b { transform: skewX(11deg); font: 700 17px "Space Grotesk", var(--sans); letter-spacing: .02em; color: var(--text); }
.tcode { flex: none; padding: 3px 7px; border-radius: 3px; transform: skewX(-11deg); background: color-mix(in srgb, var(--text) 8%, transparent); font: 700 10px var(--mono); letter-spacing: .12em; color: var(--muted); }
.tfacts { display: flex; flex-direction: column; gap: 4px; }
.tfacts p { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 12.5px; color: var(--muted); }
.tfacts b { color: var(--text); font-weight: 600; }

/* lists as Higgsfield's: a card, faint dividers, values as pills (lime for the highlight) */
.xgf.hl { width: calc(100% - 28px); border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 3.5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent); }
.xgf.hl td { padding: 9px 14px; border-top: 1px solid color-mix(in srgb, var(--text) 5%, transparent); vertical-align: middle; }
.xgf.hl tr:first-child td { border-top: 0; }
.xgf.hl th { padding: 9px 14px 4px; }
.xgf.hl td:first-child { color: var(--text); font-size: 13px; }
.xgf.hl.trec td:first-child { color: var(--muted); width: 38%; }
.xgf.hl td:last-child { white-space: normal; }
.pl { display: inline-block; min-width: 22px; margin-left: 6px; padding: 3px 7px; border-radius: 4px; text-align: center;
  font: 700 11.5px/1.1 var(--mono); background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--muted);
  transform: skewX(-11deg); }     /* D-C080: every small value or label tag is skewed -11° */
.pl.hi { background: var(--accent); color: #0f1113; }
.pl.w { background: color-mix(in srgb, var(--accent) 85%, transparent); color: #0f1113; }
.pl.d { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
.pl.l { background: transparent; color: #ff5c8f; box-shadow: inset 0 0 0 1.5px rgba(255,0,91,.6); }

/* D-C081: the season picker at the far right of the name line; the season line below gets the whole width */
.chd-sea { margin-left: auto; flex: none; }
.chd-t .ctitle { min-width: 0; }

/* ===== D-C082: standings zones in the Markets Goal book's look (owner: "check and save this look and feel of this area";
   "For each zone we should visualise these teams rows as in the attached"; "in tables we will use this ui at the left"):
   the row tinted from its left edge in the zone's colour, a 2 px bar in that colour at the edge, the place in a skewed
   soft pill (-11°, D-C080) in the zone's colour ===== */
/* only the place and the team (owner: "it shall apply and affect the # rank and team name"): one fade on the row that is
   gone by the end of the team's column (two fades, one per cell, showed a seam at the # column's edge, D-C083) */
.stt tr.zr { background: linear-gradient(90deg, color-mix(in srgb, var(--zc) 24%, transparent), transparent 42%); }
.stt tr.zr td.pos { box-shadow: inset 2px 0 0 var(--zc); }
.stt .zp { display: inline-block; min-width: 24px; padding: 3px 5px; border-radius: 4px; transform: skewX(-11deg);
  background: color-mix(in srgb, var(--text) 7%, transparent); color: color-mix(in srgb, var(--zc) 65%, var(--text)); font: 700 12px/1.1 var(--mono); }
.zones i { border-radius: 2px; transform: skewX(-11deg); }

/* ===== D-C083: the zone colours' lime (Champions League places), darker on the light theme where lime cannot be read;
   standings columns that order the table on a click, the chosen column lit ===== */
:root { --z-cl: #6f8f00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --z-cl: #d1fe17; } }
:root[data-theme="dark"] { --z-cl: #d1fe17; }
.stt th[data-sk] { cursor: pointer; user-select: none; }
.stt th[data-sk]:hover { color: var(--text); }
.stt th.sk { color: var(--accent); }
/* sortable column titles: the arrow at the LEFT of the title, its room kept on every sortable title (hidden until sorted),
   so neither the title nor the column moves when a column is picked (owner, 2026-11-06) */
.stt th[data-lrs]::before, .stt th[data-sk]:not([data-sk="0"])::before, .xgt th[data-xs]::before, .stt.plt th[data-plsort]::before { content: "▼"; visibility: hidden; margin-right: 3px; font-size: 7px; vertical-align: 1px; }
.stt th.sk[data-lrs]::before, .stt th.sk[data-sk]::before, .xgt th.on[data-xs]::before, .stt.plt th.on[data-plsort]::before { visibility: visible; }
.stt th.sk.up[data-lrs]::before, .stt th.sk.up[data-sk]::before, .xgt th.on.up[data-xs]::before, .stt.plt th.on.up[data-plsort]::before { content: "▲"; }
.stt td.sk { background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--text); }

/* ===== D-C084: the form's "?" is the team's next match: a small glass card on pointing or focus (Higgsfield's cards:
   dark glass, hairline, a lime mono kicker, a skewed Home/Away tag); a click opens the match ===== */
button.res.Q { border: 0; padding: 0; cursor: pointer; display: inline-grid; place-items: center; }
button.res.Q:hover, button.res.Q:focus-visible { color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; outline: 0; }
.nxtip { position: fixed; z-index: 60; min-width: 190px; max-width: 260px; padding: 10px 12px 11px; border-radius: 12px; pointer-events: none;
  background: color-mix(in srgb, var(--panel) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent), 0 14px 40px rgba(0,0,0,.45); }
.nxtip[hidden] { display: none; }
.nxtip p { margin: 0; }
.nx-k { font: 700 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px !important; }
.nx-t { font: 700 12px var(--mono); color: var(--muted); } .nx-t b { margin-left: 8px; color: var(--text); }
.nx-m { margin-top: 6px !important; font: 600 13.5px/1.3 var(--ui, Inter, sans-serif); color: var(--muted); }
.nx-m b { color: var(--text); }
.nx-ha { display: inline-block; margin-right: 7px; padding: 2px 6px; border-radius: 3px; transform: skewX(-11deg); vertical-align: 1px;
  background: color-mix(in srgb, var(--text) 9%, transparent); font: 700 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.nx-c { margin-top: 5px !important; font-size: 11.5px; color: var(--faint); }

/* ===== D-C093: a competition's Stats: the league's results split and when its goals come ===== */
.lres { display: flex; gap: 2px; margin: 8px 14px 4px; height: 30px; border-radius: 6px; overflow: hidden; }
.lres i { display: flex; align-items: center; justify-content: center; min-width: 54px; font: 700 11px var(--mono); font-style: normal; white-space: nowrap; }
.lres .h { background: var(--accent); color: #0f1113; } .lres .d { background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); }
.lres .a { background: #9ce6f3; color: #0f1113; }
.gbk { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 170px; margin: 10px 14px 0; }
.gbk div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.gbk b { display: block; width: 100%; min-height: 3px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.gbk span { font: 700 11px var(--mono); color: var(--text); order: -1; }
.gbk small { font: 700 10px var(--mono); color: var(--faint); }
/* D-C094: the coach's record in the team header; the team against its league */
.tfacts .crec { font-style: normal; font: 700 11px var(--mono); color: var(--faint); margin-left: 6px; }
.tfacts .crec em { font-style: normal; } .tfacts .crec .w { color: var(--accent); } .tfacts .crec .l { color: #ff5c8f; }
.xgf.hl.tvl td:first-child { width: 34%; } .xgf.hl.tvl th { text-align: right; }
/* D-C096: missing players on the match card */
.absn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 14px 0; }
.absn h4 { margin: 0 0 6px; font: 700 12px var(--sans); text-transform: uppercase; color: var(--text); }
.absn p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 6px; font-size: 13px; }
.absn p small { flex-basis: 100%; color: var(--faint); font-size: 11.5px; }
@media (max-width: 520px) { .absn { grid-template-columns: 1fr; } }

/* ===== D-C099: VAR (owner: "we also need an svg VAR icon"): the screen icon, the decision in plain words ===== */
.ev .ic.var-i { width: auto; display: inline-flex; align-items: center; } /* the 32px screen in a box its size: no text under it (owner, 2026-10-29) */
.ev .ic.var-i .i { width: 32px; height: 23px; stroke-width: 1.6; color: var(--text); }
.ev .vard { font-weight: 700; color: var(--text); } .ev .vard.no { color: #ff5c8f; }
.gl.gs.cancel .sub .i { width: 22px; height: 16px; }
/* D-C101: a club's country in an international competition, "Liverpool (ENG)" */
.tcc { margin-left: .3em; font-family: var(--mono); font-size: .78em; font-weight: 400; letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
.dscore .tm .tcc { display: block; margin: 2px 0 0; }
/* the page title block scrolls with the page (it took the sticky top bar's rule, being a <header> too) */
header.seo-hero { position: static; z-index: auto; background: none; border-bottom: 0; }
/* the match header (owner, 2026-10-28): three columns, each team centred in its own, the score, clock and half-time
   score stacked in the middle, each side's xG under its own team */
.dsc2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, auto) minmax(0, 1fr); align-items: start; gap: 8px; padding: 18px 0 14px; }
.dsc2 .dt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }
.dsc2 .dcb { width: 52px; height: 52px; cursor: pointer; }
.dsc2 .dcb b { font-size: 15px; }
.dsc2 .dn { font-size: 17px; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }   /* the face and colour: fx.css, as the old header */
.dsc2 .dn .tlink { font: inherit; color: inherit; }
.dsc2 .dcc { font: 700 11px var(--mono); letter-spacing: .08em; color: var(--muted); margin-top: -3px; }
.dsc2 .dx { margin-top: 2px; padding: 3px 9px 2px; border-radius: 6px; background: rgba(255,255,255,.05); font: 700 11px var(--mono); letter-spacing: .04em; color: var(--muted); }
.dsc2 .dx b { color: var(--accent); font-weight: 700; }
.dsc2 .dt.a .dx b { color: #67e8f9; }
.dsc2 .dm { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 6px; }
.dsc2 .big { display: flex; align-items: center; gap: 10px; font-size: 40px; line-height: 1; color: var(--text); white-space: nowrap; }
.dsc2 .big i { font-style: normal; color: var(--faint); font-size: 30px; }
.dsc2 .dclk { font: 700 13px var(--mono); color: var(--live); min-height: 19px; }
.dsc2 .dn { min-height: 17px; }   /* the name's and the clock's room before the match is known (speed check) */
.dsc2 .dclk.brk { color: var(--brk); }
.dsc2 .dht { font: 700 11px var(--mono); letter-spacing: .06em; color: var(--muted); }
@media (max-width: 760px) {
  .dtop .btn .bl { display: none; }                 /* phones: Pin, Follow and Close as icons, so the competition fits */
  .dtop .btn { padding: 0 9px; }
  .dsc2 { gap: 4px; padding: 14px 0 12px; }
  .dsc2 .dn { font-size: 15px; }
  .dsc2 .big { font-size: 36px; gap: 8px; }
  .dsc2 .dcb { width: 44px; height: 44px; }
}
.dtop .btn .bl { margin-left: 6px; }
/* the team header's facts: a row of cells, label over value (owner, 2026-10-28) */
.tfx { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 18px; margin: 14px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.tfx .tf { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-left: 10px; border-left: 2px solid rgba(209,254,23,.35); }
.tfx .tf.wide { grid-column: span 2; }
.tfx small { font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.tfx b { display: flex; align-items: center; gap: 6px; font: 600 14px/1.25 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.tfx b .flg, .tfx b .i { width: 16px; height: 16px; flex: none; }
.tfx i { font-style: normal; font: 400 11px/1.35 var(--mono); color: var(--muted); }
.tfx i em { font-style: normal; } .tfx i .w { color: var(--accent); } .tfx i .l { color: #ff5c8f; }
@media (max-width: 600px) { .tfx { grid-template-columns: 1fr 1fr; gap: 12px; } .tfx .tf.wide { grid-column: 1 / -1; } }
/* D-C108: team crests. In a square: the crest over the initials (the initials show when there is no crest); in rows
   and tables: a small crest before the name */
.cbadge { position: relative; }
.cbadge > img.crest { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.cbadge.tcb > img.crest { transform: skewX(11deg); }
.cbadge:has(> img.crest) { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.cbadge:has(> img.crest) > b { visibility: hidden; }
img.crest.rc { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 7px; flex: none; }
.stt td.tm img.crest.rc, .xgt td.tm img.crest.rc { vertical-align: -3px; }
/* D-C109: players' ratings after the match: a pill by band (8+, 7+, 6+, below), goals and assists, top performers */
.rt { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 18px; margin-left: auto; padding: 0 4px; border-radius: 4px;
  font: 700 10.5px/1 var(--mono); color: #111; transform: skewX(-11deg); }
.rt.r8 { background: #d1fe17; } .rt.r7 { background: #4ade80; } .rt.r6 { background: #f5b74a; } .rt.r5 { background: #ff6b81; }
.lu li { display: flex; align-items: center; gap: 6px; }
.lu li .pnm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu li .ga { flex: none; display: inline-flex; align-items: center; gap: 1px; font: 700 10px var(--mono); color: var(--text); }
.lu li .ga .i { width: 12px; height: 12px; } .lu li .ga.as { color: var(--muted); }
.lu li .ga + .rt, .lu li .pnm + .rt { margin-left: auto; }
.tops { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(209,254,23,.05); border: 1px solid rgba(209,254,23,.15); }
.tops .tk { font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tops .tp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tops .tp .rt { margin-left: 0; }
.tops .tp small { color: var(--faint); font-size: 11px; }
.pitch .prb.r8 { fill: #d1fe17; } .pitch .prb.r7 { fill: #4ade80; } .pitch .prb.r6 { fill: #f5b74a; } .pitch .prb.r5 { fill: #ff6b81; }
.pitch .prt { font: 700 7.5px var(--mono); fill: #111; text-anchor: middle; }
img.crest.rc.pr { margin: 0 0 0 7px; }                /* after the name, on the home side of a centred line */
/* D-C111: standings on phones. The five-result Form column (138 px, the widest, cut off at the screen's edge) gives way
   to W, D and L; the form stays, as five small marks under each team's name, newest first */
.stt .fdots { display: none; }
@media (max-width: 520px) {
  .stt th.fcol, .stt td.fcol { display: none; }
  html .dbody .stt .wdl, html .stt .wdl { display: table-cell; }
  .stt .fdots { display: flex; gap: 2px; margin-top: 4px; }
  .stt .fdots i { width: 11px; height: 3px; border-radius: 2px; background: var(--faint); }
  .stt .fdots i.W { background: #d1fe17; } .stt .fdots i.D { background: #f5b74a; } .stt .fdots i.L { background: #ff3d7f; }
  .stt td.tm { white-space: nowrap; }
  .stt th, .stt td { padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 520px) {
  .stt .mpc { display: none; }                       /* the xG table: matches played is in the standings next to it */
  .twrap .stt th.tm, .twrap .stt td.tm { position: sticky; left: 0; z-index: 1; background: var(--panel); }   /* HT/FT scrolls under the names */
}
@media (max-width: 520px) {
  /* Stats tables on phones: long column titles wrap onto two lines, so most views fit; a wider one scrolls inside its frame */
  .twrap .stt th { white-space: normal; line-height: 1.15; vertical-align: bottom; }
}
/* the region chips (All, the continents, Worldwide) on the map, in a glass holder in its bottom-left corner
   (owner, 2026-10-28); the row that held them above the match list is gone */
#rbar:empty { display: none; }
.mapbox .mregions { display: flex; position: absolute; left: 12px; bottom: 12px; right: auto; max-width: calc(100% - 110px); z-index: 3;
  flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 12px; background: rgba(15,17,19,.48); -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.35); }
.mapbox .mregions button { height: 26px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 7px;
  font: 700 10.5px var(--mono); letter-spacing: .03em; color: #d6d6d6; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.mapbox .mregions button:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.mapbox .mregions button[aria-pressed="true"] { color: #d1fe17; border-color: rgba(209,254,23,.5); background: rgba(209,254,23,.1); }
.mapbox .mregions .lv { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.mapbox .mregions .lv::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--live); }
.mapbox .mregions .n { color: #8b8d90; }
.mapbox .mregions .rkey { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; font: 400 9.5px var(--mono); color: #8b8d90; }
.mapbox .mregions .rkey .lv::before { margin-right: 0; }
@media (max-width: 899px) { .mapbox .mregions { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px; } .mapbox .mregions .rkey { display: none; } }

/* ===== D-C115: the phone layout (owner, 2026-10-28: "i agree to all"). Desktop unchanged =====
   one-row top bar; the views come from the bottom bar (app.js): Live (live matches only), Scores (the day), xG (the
   board), Following; pre-match odds on not-started rows; swipe a row right to follow, left to pin */
.qbtn, .rg18 { display: none; }
@media (min-width: 761px) { .row .od2, .row .od3 { visibility: hidden; } }
@media (max-width: 760px) {
  header .stats, header .stamp, header #mapBtn, header #tickBtn, header .tabs, header .mnav { display: none !important; }
  header .bar { flex-wrap: nowrap; gap: 8px; padding-top: 6px; padding-bottom: 6px; }
  header .search { display: none; }
  html.sopen header .bar { flex-wrap: wrap; }
  html.sopen header .search { display: block; order: 9; flex: 1 1 100%; }
  .qbtn { display: inline-flex; margin-left: auto; }
  .qbtn .i { width: 17px; height: 17px; }
  header.seo-hero { padding: 8px 0 0; }
  header.seo-hero h1 { font-size: 15px; letter-spacing: -.02em; }
  header.seo-hero h1 > span { display: none; }
  /* phones: Live and Favourites are places of the bottom bar: the list alone (the bar's day and filters are for Scores) */
  html[data-vf="live"] #vbar, html[data-vf="fol"] #vbar { display: none; }
  #vbar .seg [data-filter="live"], #vbar .seg [data-filter="fol"] { display: none; }
  .rg18 { display: block; margin: 0; padding: 6px 14px; font: 400 10.5px var(--mono); color: var(--faint); border-bottom: 1px solid var(--line); }
  /* swipe: right follows, left pins; the gap shows what letting go will do */
  .row.stk { position: relative; transition: transform .18s ease; touch-action: pan-y; }
  .row.stk.swp { transition: none; z-index: 2; background: var(--panel); }
  .row.stk[data-sw]::before { position: absolute; top: 0; bottom: 0; width: 120px; display: flex; align-items: center; justify-content: center;
    font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8b8d90; background: rgba(255,255,255,.04); }
  .row.stk[data-sw="r"]::before { content: "★ Follow"; right: 100%; }
  .row.stk[data-sw="l"]::before { content: "Pin ⌖"; left: 100%; }
  .row.stk.swgo[data-sw="r"]::before { background: #d1fe17; color: #111; }
  .row.stk.swgo[data-sw="l"]::before { background: #9ce6f3; color: #111; }
  /* owner, 2026-10-29: Scoreline rows swipe right to follow, the same way */
  .gl.gs[data-api] { position: relative; transition: transform .18s ease; touch-action: pan-y; }
  .gl.gs.swp { transition: none; z-index: 2; background: var(--panel); }
  .gl.gs[data-sw="r"]::before { content: "★ Follow"; position: absolute; top: 0; bottom: 0; right: 100%; width: 120px; display: flex; align-items: center; justify-content: center;
    font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8b8d90; background: rgba(255,255,255,.04); }
  .gl.gs.swgo[data-sw="r"]::before { background: #d1fe17; color: #111; }
}
@media (max-width: 760px) {
  .phead { top: var(--hh, 53px); }
  .group h3 { top: calc(var(--hh, 53px) + 45px); }
}
/* D-C116: every competition in the left column has its pin; Yours holds the pinned ones only, A–Z */
.nv-x .pnb { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border-radius: 6px; color: var(--faint); opacity: 0; transition: opacity .15s, color .15s, background .15s; }
.nv-x:hover .pnb, .nv-x .pnb:focus-visible { opacity: 1; }   /* owner, 2026-10-28: a pin, on or off, shows only on mouse over */
.nv-x .pnb:hover { color: var(--accent); background: rgba(209,254,23,.08); }
.nv-x .pnb.on { color: var(--accent); }
.nv-x.nv-me .pnb.on { opacity: 1; }   /* owner, 2026-10-29: in My Leagues the selected pin is always shown */
.nv-x .pnb .i { width: 13px; height: 13px; }
@media (hover: none) { .nv-x .pnb { opacity: .7; } }
.nv-hint { margin: 2px 12px 10px; font-size: 11.5px; line-height: 1.4; color: var(--faint); }
.nv-hint .i { width: 11px; height: 11px; vertical-align: -1px; color: var(--accent); }
.group h3 .gpin { display: inline-flex; margin-right: 6px; color: var(--accent); } .group h3 .gpin .i { width: 11px; height: 11px; }
/* D-C117: follow a team from its header; My Teams in the left column */
.chd-t .tfol { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; margin-left: 10px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--muted); font: 600 12px var(--sans); cursor: pointer; }
.chd-t .tfol:hover { color: var(--text); border-color: rgba(209,254,23,.5); }
.chd-t .tfol[aria-pressed="true"] { color: #d1fe17; border-color: rgba(209,254,23,.5); background: rgba(209,254,23,.08); }
.chd-t .tfol .i { width: 14px; height: 14px; }
.chd-t .tfol[aria-pressed="true"] .i { fill: currentColor; }
@media (max-width: 600px) { .chd-t .tfol span { display: none; } .chd-t .tfol { padding: 0 9px; } }
.nv-x[data-myteam] img.crest.rc, .nv-x[data-tms] img.crest.rc { margin-right: 8px; }
/* the server's copy of the page (for search engines): hidden while the app draws its view; the app replaces it */
.seo-wait { display: none; }
html.js #board .seo-copy { display: none; }
html.js #board .seo-wait { display: block; }
/* speed check (2026-10-30): the scripts load without holding the first paint; until the app has drawn its view (its first
   content that is not a loading line) the board stays invisible, so nothing seen moves when the team's or competition's head comes in above it */
html.js:not(.xg-drawn) #board:not(:has(> .sk)) { visibility: hidden; }   /* a day's skeleton shows (owner, 2026-10-31) */   /* livescore.js adds xg-drawn at the board's first real content (or after 8 s) */
/* the day control (owner, 2026-10-28): ‹ 📅 28/10 WE ›, one fixed width (it no longer changes with the day's name) */
.dnav { flex: none; }
.dnav .btn { width: 30px; height: 30px; padding: 0; justify-content: center; }
.dnav .btn.day { width: 112px; min-width: 112px; padding: 0 10px; gap: 7px; justify-content: center; font: 700 12.5px var(--mono); letter-spacing: .02em; color: var(--text); }
.dnav .btn.day .i { width: 15px; height: 15px; flex: none; color: var(--muted); }
.dnav .btn.day.today .i { color: var(--accent); }
@media (max-width: 899px) { .dnav { margin-left: auto; width: auto; } .dnav .day { flex: none; } }
.dnav .btn.day { white-space: nowrap; }
.dnav .btn.day::after { display: none !important; }
/* owner, 2026-10-28: no "TODAY" title row over the day's list (the day is in its pill); the competition and team
   views keep theirs */
html:not([data-vf="comp"]):not([data-vf="team"]) #p-live > .phead { display: none; }
/* the day pill: ‹ 📅 28/10 WE › in one */
.dnav .dpill { display: inline-flex; align-items: center; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); overflow: hidden; }
.dnav .dpill .btn { height: 30px; border: 0 !important; background: none !important; border-radius: 0; }
.dnav .dpill .btn.dar { width: 28px; color: var(--muted); }
.dnav .dpill .btn.dar:hover { color: var(--text); background: rgba(255,255,255,.05) !important; }
.dnav .dpill .btn.dar .i { width: 14px; height: 14px; }
.dnav .dpill .btn.day { width: 104px; min-width: 104px; padding: 0 4px; }
/* Scoreline: Live's own tool, beside it while Live is on */
.seg .scl { display: inline-flex; align-items: center; gap: 5px; }
.seg .scl .i { width: 13px; height: 13px; }
.seg .scl[aria-pressed="false"] { color: var(--muted); }
/* the Following block at the top of the left column */
.nv-h.fol { color: var(--accent); }
.nv-h.fol .i { fill: currentColor; }
.nv-h .nv-all { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--muted); font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.nv-h .nv-all:hover { color: var(--accent); }
.nv-h .nv-all .i { width: 11px; height: 11px; }
.nv-m.nv-fol .t.lv { color: var(--live); }
@media (max-width: 760px) {
  /* Live (and its Scoreline): the bar shows only the view switch (D-C126); Live and Favourites live in the bottom bar */
  html[data-vf="live"] #vbar, html[data-vf="score"] #vbar { display: flex; justify-content: flex-end; }
  html[data-vf="live"] #vbar .seg, html[data-vf="score"] #vbar .seg { display: none; }
}
/* the day pill's calendar: white (owner, 2026-10-28) */
.dnav .btn.day .i, .dnav .btn.day.today .i { color: #fff; }
/* Following: a button at the top of the left column; its own view in the main feed, without the tabs */
.nv-folbtn { display: flex; align-items: center; gap: 8px; width: calc(100% - 20px); margin: 10px 10px 4px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,190,76,.35); background: rgba(255,190,76,.06); color: var(--text); font: 600 13px var(--sans); cursor: pointer; text-align: left; }
.nv-folbtn:hover, .nv-folbtn[aria-pressed="true"] { border-color: #ffbe4c; background: rgba(255,190,76,.12); }
.nv-folbtn > .i:first-child { width: 15px; height: 15px; color: #ffbe4c; fill: #ffbe4c; }
.nv-folbtn span { flex: 1; }
.nv-folbtn b { font: 700 11px var(--mono); color: #ffbe4c; }
.nv-folbtn > .i:last-child { width: 13px; height: 13px; color: var(--muted); }
.folhead { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.folhead > .i { width: 16px; height: 16px; color: #ffbe4c; fill: #ffbe4c; }
.folhead b { font: 700 16px "Space Grotesk", var(--sans); text-transform: uppercase; letter-spacing: -.01em; }
.folhead span { color: var(--muted); font: 400 12px var(--mono); }
.folhead .folx { margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.folhead .folx:hover { color: var(--text); }
.folhead .folx .i { width: 14px; height: 14px; }
.folcta { margin: 22px auto 26px; max-width: 420px; text-align: center; padding: 0 16px; }
.folcta h3 { margin: 0 0 6px; font: 700 20px "Space Grotesk", var(--sans); letter-spacing: -.02em; }
.folcta p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }
.folsearch { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: #d1fe17; color: #111;
  font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.folsearch .i { width: 16px; height: 16px; }
.row.stk .s2 { padding-right: 6px; }          /* xG a little apart from the score beside it */
/* the pin's own strip at the row's right end stays clear; the score sits just before it (owner, 2026-10-28) */
@media (hover: hover) {
  #board .row.stk, .pbody .row.stk { padding-right: 48px; }       /* (fx.css, loaded after, sets the row's padding) */
  #board .row.stk .rpin, .pbody .row.stk .rpin { right: 12px; }
}

/* owner, 2026-10-28: competition bars: taller (closer to the rows), no coloured left border, the country quiet and the
   competition the readable part */
#p-live .group h3 { box-shadow: none; }
.group h3 { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 18px;
  background: linear-gradient(180deg, #202125, #1b1c1f); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(0,0,0,.35);
  font: 400 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #7d7f84; }
.group h3 .fl { display: inline-flex; align-items: center; }
.group h3 .fl img, .group h3 .fl svg { width: 18px; height: 18px; border-radius: 50%; }
.group h3 .cn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group h3 .cn > span { font: 700 12.5px/1 "Space Grotesk", sans-serif; letter-spacing: .05em; color: #f2f2f3; }
.group h3 .rd { color: #5d5f64; }
.group h3.link:hover { background: linear-gradient(180deg, #25262b, #1f2024); }
.group h3.link:hover span { text-decoration: none; } .group h3.link:hover .cn > span { color: var(--accent); }
@media (max-width: 760px) { .group h3 { min-height: 36px; padding: 0 12px; gap: 8px; } .group h3 .cn > span { font-size: 12px; } }
/* owner, 2026-10-28: the country bigger, the competition smaller and in its own capitals (each word capitalised,
   acronyms such as DFB kept), a pin next to each competition */
.group h3 .cn { display: flex; align-items: baseline; gap: 8px; }
.group h3 .cn > .co { font: 600 12.5px/1 Inter, sans-serif; letter-spacing: .01em; text-transform: none; color: #a3a5ab; }   /* D-C130/131: the competition's style, the country in its own capitals (owner) */
.group h3 .sep { font-style: normal; color: #55575c; }
.group h3 .cn > .cm { font: 600 12px/1 Inter, sans-serif; letter-spacing: .01em; text-transform: capitalize; color: #f2f2f3; }
.group h3.link:hover .cn > .cm { color: var(--accent); }
.group h3 .gpb { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: -2px; border-radius: 6px;
  color: #6b6d72; cursor: pointer; transition: color .15s, background .15s; }
.group h3 .gpb .i { width: 13px; height: 13px; }
.group h3 .gpb:hover, .group h3 .gpb:focus-visible { color: #d1fe17; background: rgba(209,254,23,.08); }
.group h3 .gpb.on { color: #d1fe17; }
@media (max-width: 760px) { .group h3 .cn > .co { font-size: 12px; } .group h3 .cn > .cm { font-size: 11.5px; } }
/* owner, 2026-10-28: the country and the competition are links (the country opens its competitions on the left, the
   competition its landing page) */
.group h3 a.co, .group h3 a.cm { text-decoration: none; transition: color .15s; }
.group h3 a.co:hover, .group h3 a.cm:hover { color: #d1fe17; }
.group h3.link:hover .cn > .cm:not(:hover) { color: #f2f2f3; }

/* owner, 2026-10-28: follow a team from the match card: a star on its crest, home top left, away top right */
.dsc2 .dcw { position: relative; display: inline-block; }
.dsc2 .dfs { position: absolute; top: -4px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px;
  background: none; color: #8a8c91; cursor: pointer; transition: color .15s, transform .15s; }
.dsc2 .dfs.h { left: -28px; } .dsc2 .dfs.a { right: -28px; }     /* clear of the crest (owner: "should not overlap or touch") */
.dsc2 .dfs .i { width: 15px; height: 15px; }
.dsc2 .dfs:hover { color: var(--star); transform: scale(1.1); }
.dsc2 .dfs.on { color: var(--star); }
/* owner, 2026-10-28: a cup's landing page shows its draw one stage at a time, < > travel the stages */
.dstage { padding-bottom: 6px; }
.dstg { display: flex; align-items: center; gap: 12px; margin: 10px 14px 12px; }
.dstg .dsn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.dstg .dsn b { font: 700 15px/1.1 "Space Grotesk", sans-serif; letter-spacing: .02em; color: #f2f2f3; }
.dstg .dsn small { font: 400 10.5px/1 "Space Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #7d7f84; }
.dstg .dsb { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #d1fe17; transform: skewX(-8deg); transition: background .15s; }
.dstg .dsb .i { width: 15px; height: 15px; transform: skewX(8deg); }
.dstg .dsb:hover:not(:disabled) { background: rgba(209,254,23,.1); }
.dstg .dsb:disabled { color: #4a4c50; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.dstage .dsall { display: flex; margin: 12px auto 0; }
/* owner, 2026-10-28: the pin on a country's competitions in the left column, at the right, on hover (always when pinned) */
.nv-l { display: flex; align-items: center; gap: 6px; padding-right: 8px; }
.nv-l .ln { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-l .pnb { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--faint); opacity: 0; transition: opacity .15s, color .15s, background .15s; }
.nv-l .pnb .i { width: 13px; height: 13px; }
.nv-l:hover .pnb, .nv-l .pnb:focus-visible { opacity: 1; }
.nv-l .pnb:hover { color: var(--accent); background: rgba(209,254,23,.08); }
.nv-l .pnb.on { color: var(--accent); }
@media (hover: none) { .nv-l .pnb { opacity: .45; } }
/* owner, 2026-10-28: the left column in separate blocks (My Leagues, My Teams, Hot now, Live, Countries), each a card
   with its own header, collapsed until opened */
.nv-blk { margin: 8px 8px 0; border-radius: 10px; background: linear-gradient(180deg, #1d1e22, #19191c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; }
.nv-bh { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 12px; border: 0; background: none; text-align: left;
  font: 700 11px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #c9cacd; }
.nv-bh > .i:first-child { width: 13px; height: 13px; color: #8a8c91; }
.nv-bh .t { flex: 1; min-width: 0; }
.nv-bh .n { font-weight: 500; color: #6b6d72; letter-spacing: .04em; }
.nv-bh > .i:last-child { width: 12px; height: 12px; color: #6b6d72; transition: transform .2s; }
.nv-blk.nv-open .nv-bh > .i:last-child { transform: rotate(180deg); }
.nv-bh:hover { color: #fff; } .nv-bh:hover > .i:last-child { color: #d1fe17; }
.nv-blk.nv-open .nv-bh { border-bottom: 1px solid rgba(255,255,255,.06); }
.nv-blk[class] .nv-bh .i { flex: none; }
.nv-bb { padding: 2px 0 4px; }
.nv-bb .nv-hint { margin: 8px 12px; }
.nv-blk:has([data-navblk="hot"]) .nv-bh > .i:first-child { color: #ff4f03; }
.nv-blk:has([data-navblk="lv"]) .nv-bh > .i:first-child { color: #d1fe17; }
.nv-blk:has([data-navblk="me"]) .nv-bh > .i:first-child, .nv-blk:has([data-navblk="tm"]) .nv-bh > .i:first-child { color: #d1fe17; }
.nv-q { margin-top: 10px; }
/* owner, 2026-10-28: the match's parts in the events: full time / extra time / shoot-out lines stand out a little more
   than half time; the shoot-out's middle column is the running score */
.ht-mark.pt { margin-top: 6px; padding: 9px 0 7px; border-top: 1px solid var(--line); color: #c8c8c8; font-weight: 700; }
.ht-mark.pt.so { margin-top: 0; border-top: 0; color: #d1fe17; }
.ev.so .min { font-weight: 700; color: #f2f2f3; }
/* D-C121: player pages; a line-up name with a player page is a quiet link */
.pnm.plink { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pnm.plink:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.xgf.plm tr[data-plm] { cursor: pointer; } .xgf.plm tr[data-plm]:hover td { background: rgba(209,254,23,.04); }
.xgf.plm td small, .xgf.pls td small { display: block; margin-top: 2px; color: var(--faint); font-size: 10.5px; }
.xgf.plm .me { color: var(--text); font-weight: 700; }
.xgf.pls td small .tlink { font-size: inherit; color: inherit; }
@media (max-width: 520px) { .xgf.pls .plmin { display: none; } }
.xgf.plm th:first-child { width: 64px; }
.xgf.plm th:nth-child(2) { width: auto; text-align: left; }
.xgf.plm th:nth-child(n+3) { width: 46px; }
.xgf.plm td:nth-child(2) { text-align: left; font-family: var(--sans); white-space: normal; color: var(--muted); }
@media (max-width: 520px) { .xgf.plm th:first-child { width: 48px; } .xgf.plm th:nth-child(n+3) { width: 34px; } }
.xgf.plm th:last-child { width: 60px; }

/* D-C125: Favourites: the feed's own tab, the link to My xGoals under it, the count on the header's My xGoals */
.seg button.fav .i { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; color: var(--star); fill: var(--star); }
.seg button.fav span { vertical-align: 0; }
.favman { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px; padding: 11px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.favman:hover { color: var(--text); border-color: var(--accent); }
.favman .i { width: 13px; height: 13px; }
.mnav a .favn { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 2px 6px 2px 4px; border-radius: 999px; background: color-mix(in srgb, var(--star) 14%, transparent); color: var(--star); font: 700 10.5px var(--mono); vertical-align: 1px; }
.mnav a .favn .i { width: 10px; height: 10px; fill: currentColor; }

/* D-C126: Live's view switch (matches / Scoreline), on the right where the day sits on the other tabs */
.vtog { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.vtog button { display: inline-grid; place-items: center; width: 34px; height: 28px; border-radius: 6px; color: var(--muted); }
.vtog button:hover { color: var(--text); }
.vtog button[aria-pressed="true"] { background: var(--panel); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.vtog .i { width: 17px; height: 17px; }
/* D-C126: the three prices in one column, 1 · X · 2 */
.row.stk .s2.o3 { gap: 1px; padding-right: 0; }
.row.stk .s2.o3 i { font-size: 10px; line-height: 1.12; }
.row.stk .s2.o3 i b { display: inline-block; width: 1.3em; color: #4a4c50; font-weight: 400; }
/* D-C126: the names and shares above a result bar */
.lresl { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 14px 0; font-size: 12px; color: var(--muted); }
.lresl span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lresl span i { flex: none; width: 9px; height: 9px; border-radius: 2px; }
.lresl .h i { background: var(--accent); } .lresl .d i { background: color-mix(in srgb, var(--text) 30%, transparent); } .lresl .a i { background: #9ce6f3; }
.lresl b { font: 700 11.5px var(--mono); color: var(--text); }
.lres { height: 12px; } .lres i { min-width: 0; }

/* D-C127: the competition's player tables: the player cell as the Markets page's bars (it was class "pl", which the
   result pills' .pl rule turned into a grey skewed box) */
/* the share is a track under the name and the team (D-C127c): it never crosses the text */
.stt.splr td.plc { text-align: left; font-family: var(--ui); padding-top: 8px; padding-bottom: 8px; min-width: 210px; }
.stt.splr td.plc .pw { display: flex; align-items: center; }
.stt.splr td.plc .nocr { flex: none; width: 20px; margin-right: 9px; }
.stt.splr td.plc .trk { display: block; width: 100%; min-width: 150px; height: 4px; margin-top: 2px; border-radius: 1px; transform: skewX(-20deg); background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
.stt.splr td.plc .trk i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), var(--accent)); }
.stt.splr td.plc .pw.top .trk i { box-shadow: 0 0 10px var(--accent); }
.stt.splr td.plc img.crest { position: relative; flex: none; width: 20px; height: 20px; margin-right: 9px; }
.stt.splr td.plc .pn { position: relative; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.stt.splr td.plc .pn b { font: 700 13.5px/1.1 "Space Grotesk", var(--ui); color: var(--text); letter-spacing: -.01em; white-space: nowrap; }
.stt.splr td.plc .tg { align-self: flex-start; padding: 2px 6px 1px; border-radius: 2px; transform: skewX(-11deg); background: color-mix(in srgb, var(--text) 7%, transparent);
  font: 700 9.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.stt.splr .rk { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 4px; border-radius: 3px; transform: skewX(-11deg); font: 700 11px var(--mono); color: var(--muted); }
.stt.splr .rk.r1 { background: var(--accent); color: #0f1113; box-shadow: 0 0 12px -2px color-mix(in srgb, var(--accent) 60%, transparent); }
.stt.splr .rk.r2, .stt.splr .rk.r3 { color: var(--text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.stt.splr tbody tr:hover td.plc .pn b { color: var(--accent); }

/* D-C127: Scoreline's moments: the moment named in a skewed tag; the end of a match in lime */
.gl.gs.mo .tl { color: var(--muted); }
.gl.gs .mk { display: inline-block; padding: 2px 6px 1px; border-radius: 2px; transform: skewX(-11deg); background: color-mix(in srgb, var(--text) 9%, transparent);
  font: 700 9.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.gl.gs .mk.end { background: var(--accent); color: #0f1113; }
.gl.gs.mo.k-ko .mk, .gl.gs.mo.k-2h .mk, .gl.gs.mo.k-et1 .mk, .gl.gs.mo.k-et2 .mk, .gl.gs.mo.k-res .mk { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 60%, transparent); }
.gl.gs.mo.k-pso .mk { background: #ffbe4c; color: #111; }

/* D-C127b: Scoreline's red cards, missed penalties and VAR decisions */
.gl.gs.mo.k-rc .mk { background: #e72930; color: #fff; }
.gl.gs.mo.k-mp .mk { box-shadow: inset 0 0 0 1px #ffbe4c; color: #ffbe4c; background: transparent; }
.gl.gs.mo.k-var .mk { background: #9ce6f3; color: #0f1113; }
.gl.gs.mo .tl.w { color: var(--text); font-weight: 700; }
/* D-C128: the header never squeezes its buttons (their labels used to run over the logo and each other): as the window
   narrows it drops the day's counts first, then the buttons' words (icons keep their titles), then the update time */
@media (min-width: 900px) {
  header .bar > .btn, header .bar > .pill, header .bar > a.hf-cta { flex-shrink: 0; }
  header .bar > .search { min-width: 150px; }
}
@media (min-width: 900px) and (max-width: 1720px) { header #stats { display: none; } }
@media (min-width: 900px) and (max-width: 1480px) { header .bar .btn .txt { display: none; } }
@media (min-width: 900px) and (max-width: 1180px) { header #stamp { display: none; } }
/* D-C129 (owner, 2026-10-29: "move slider below graph bars, let some space so they both stand clear and separate"):
   bars 0–28 px, a 9 px gap, the track at 37 px with its handle, then the hours */
.tlbox { height: 56px; }
.tlbox svg { inset: 0 0 auto 0; height: 28px; }
.tlbox .hrs { height: 11px; }
.tlbox input#tlR { background: linear-gradient(var(--tc), var(--tc)) 0 37px / var(--x) 2px no-repeat,
  linear-gradient(color-mix(in srgb, var(--text) 14%, transparent), color-mix(in srgb, var(--text) 14%, transparent)) 0 37px / 100% 2px no-repeat; }
.tlbox input#tlR::-webkit-slider-thumb { height: 56px; } .tlbox input#tlR::-moz-range-thumb { height: 56px; }
.tlh::before { height: 28px; }
.tlh::after { top: 32px; }
/* D-C130 (owner, 2026-10-29: "scoreline must follow live feed logic, xG at the left of score, scores at the right at the
   same distance from right edge like live"): Scoreline rows on the live rows' grid (fx.css .row.stk): the star's column
   left empty so the clocks line up, the teams, the alert column, xG, then the score at the same right edge */
#board .gl.gs { grid-template-columns: 26px 62px minmax(0, 1fr) 58px 52px 32px; grid-template-areas: ". ck tms . x2 scs" ". ck sub sub sub sub";
  gap: 4px 8px; padding: 9px 12px 9px 4px; }      /* "#board": fx.css loads after this file */
#board .gl.gs .s2 { padding-right: 6px; }
@media (max-width: 520px) { #board .gl.gs { grid-template-columns: 22px 46px minmax(0, 1fr) 50px 44px 28px; gap: 4px 6px; padding: 9px 12px 9px 4px; } }
/* the live rows keep a strip for their pin at the right on computers (48 px); Scoreline's score lines up with theirs */
@media (hover: hover) { #board .gl.gs { padding-right: 48px; } }

/* D-C132: the feeds' xG switch and the live rows' xG signs */
.xgsw { display: inline-flex; align-items: center; gap: 7px; height: 30px; margin-right: 8px; padding: 0 8px 0 10px; border-radius: 8px; background: color-mix(in srgb, var(--text) 6%, transparent);
  font: 700 11.5px var(--mono); color: var(--muted); }
.xgsw i { position: relative; width: 26px; height: 15px; border-radius: 8px; background: color-mix(in srgb, var(--text) 16%, transparent); transition: background .15s; }
.xgsw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #f2f2f3; transition: transform .15s; }
.xgsw[aria-checked="true"] { color: var(--accent); }
.xgsw[aria-checked="true"] i { background: var(--accent); } .xgsw[aria-checked="true"] i::after { transform: translateX(11px); background: #0f1113; }
.row.stk .tl .xdot { flex: none; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.row.stk .tl:has(.tn) { display: flex; align-items: center; } .row.stk .tl:has(.tn) > img { flex: none; }
.row.stk .tl .xtr { flex: none; display: inline-flex; margin-left: 6px; color: var(--faint); } .row.stk .tl .xtr .i { width: 13px; height: 13px; }
.row.stk .xgap { align-self: flex-start; margin-top: 1px; padding: 2px 6px 1px; border-radius: 2px; transform: skewX(-11deg); background: color-mix(in srgb, var(--accent) 12%, transparent);
  font: 700 9.5px/1.2 var(--mono); letter-spacing: .04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.row.stk .xgap b { color: var(--accent); font-weight: 700; }
@media (max-width: 760px) { .xgsw { margin-right: 6px; } }

/* D-C132: the squad's positions in colour, as the standings' zones (D-C082): the heading's slash, a 2 px bar and a fade at
   each row's left; goalkeepers amber, defenders cyan, midfielders lime, forwards pink */
.hsec.pz::before { background: var(--zc); box-shadow: 0 0 10px color-mix(in srgb, var(--zc) 45%, transparent); }
.xgf.tsq.pz tr:not(:first-child) { background: linear-gradient(90deg, color-mix(in srgb, var(--zc) 16%, transparent), transparent 40%); }
.xgf.tsq.pz tr:not(:first-child) td:first-child { box-shadow: inset 2px 0 0 var(--zc); padding-left: 10px; }
/* D-C132: a squad name that opens a player page reads brighter than one without a page */
.xgf.tsq .pnm.plink { color: var(--text); font-weight: 600; }
.xgf.tsq .pnm.plink:hover { color: var(--accent); }

/* D-C133 (owner, 2026-10-29: phones' "space stress"; "drop [8 LIVE] anyway, phones do not need fixtures/finished
   filters at all, All and live at bottom are enough"): on phones no live pill and no tabs (the bottom bar has Live,
   Scores and Favourites), the xG switch a chip in the top bar, a strip of days in place of the arrows and the day pill,
   a one-line odds note */
.dstrip, #xgChip, #oddsChip, .rg18 .sh { display: none; }
@media (max-width: 760px) {
  #livePill { display: none !important; }
  #vbar .seg, #vbar .xgsw, #vbar .dpill { display: none !important; }
  #xgChip, #oddsChip { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; font: 700 12px var(--mono); color: var(--muted); }
  #oddsChip { padding: 0 9px; }
  #xgChip[aria-checked="true"], #oddsChip[aria-checked="true"] { color: #0f1113; background: var(--accent) !important; border-color: var(--accent) !important; }
  #vbar { padding: 0; }
  #vbar .dnav { width: 100%; }
  .dstrip { display: flex; align-items: stretch; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .dstrip::-webkit-scrollbar { display: none; }
  .dsd { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 62px; padding: 9px 6px 8px; border-bottom: 2px solid transparent; scroll-snap-align: center; color: var(--muted); }
  .dsd b { font: 700 10px var(--mono); letter-spacing: .06em; } .dsd span { font: 400 12px var(--mono); }
  .dsd.td b { color: var(--text); }
  .dsd.on { color: var(--accent); border-bottom-color: var(--accent); } .dsd.on b { color: var(--accent); }
  .dsc { flex: none; display: grid; place-items: center; width: 48px; color: var(--muted); border-left: 1px solid var(--line); position: sticky; right: 0; background: var(--panel); }
  .dsc .i { width: 18px; height: 18px; }
  .rg18 .lg { display: none; } .rg18 .sh { display: inline; }
}

/* D-C135: red cards after the team's name: a solid portrait card (8 x 11), slightly rounded, skewed a little like the
   site's tags; from two cards it is a little wider and carries the count */
.rcard { flex: none; display: inline-grid; place-items: center; width: 8px; height: 11px; border-radius: 1.5px; background: #e72930;
  transform: skewX(-8deg); vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 6px rgba(231,41,48,.35);
  font: 700 8px/1 var(--mono); font-style: normal; color: #fff; }
.rcard.n { width: 10px; }

/* D-C136 (1): the result on xG: the tag (lime in line, amber won against the xG, pink draw against the xG; D-C138), the xG, the three
   chances (the result bars' look) and the likeliest score */
.dsv { margin: 4px 14px 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.dsv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dsv-tag { display: inline-block; padding: 5px 10px 4px; border-radius: 3px; transform: skewX(-11deg); font: 700 11px/1 "Space Grotesk", var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.dsv-tag.inline { background: var(--accent); color: #0f1113; box-shadow: 0 0 14px -4px var(--accent); }
.dsv-tag.wonvs { background: #ffbe4c; color: #111; }
.dsv-tag.drawvs { background: #ff5c8f; color: #111; }
.dsv-tag.close { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.dsv-x { font: 400 12px var(--mono); color: var(--muted); } .dsv-x b { color: #9ce6f3; font-weight: 700; }
.dsv .lresl { margin: 12px 0 0; } .dsv .lres { margin: 6px 0 0; }
.dsv-sc { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); } .dsv-sc b { margin: 0 6px; font: 700 13px var(--mono); color: var(--text); } .dsv-sc i { font: 400 11px var(--mono); color: var(--faint); font-style: normal; }

.row.stk .xgap.xv { text-transform: uppercase; font-weight: 700; letter-spacing: .06em; }
.row.stk .xgap.xv.wonvs { background: color-mix(in srgb, #ffbe4c 18%, transparent); color: #ffbe4c; }
.row.stk .xgap.xv.drawvs { background: color-mix(in srgb, #ff5c8f 18%, transparent); color: #ff5c8f; }

/* D-C136 (2): the xG table: four cards (amber points above xPts, pink below, lime goals above xG, grey below), the real place with its
   move, the ± as a skewed pill */
.lkg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 14px 4px; }
.lkc { padding: 11px 12px 9px; border-radius: 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 12%, transparent), transparent 60%), color-mix(in srgb, var(--text) 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc) 30%, var(--line)); --kc: var(--accent); }
.lkc.pabove { --kc: #ffbe4c; } .lkc.pbelow { --kc: #ff5c8f; } .lkc.gabove { --kc: var(--accent); } .lkc.gbelow { --kc: #9aa0a6; }
.lkc h3 { margin: 0 0 8px; display: flex; flex-direction: column; gap: 2px; font: 700 12px/1.1 "Space Grotesk", var(--ui); letter-spacing: .05em; text-transform: uppercase; color: var(--kc); }
.lkc h3 small { font: 400 10.5px var(--mono); letter-spacing: 0; text-transform: none; color: var(--faint); }
.lkc p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.lkc p .tm { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); cursor: pointer; }
.lkc p b { flex: none; font: 700 12px var(--mono); color: var(--kc); }
.stt.lkt td.rl { white-space: nowrap; font-family: var(--mono); color: var(--muted); }
.stt.lkt .mv { margin-left: 5px; font: 700 9.5px var(--mono); font-style: normal; } .stt.lkt .mv.up { color: #ffbe4c; } .stt.lkt .mv.dn { color: #ff5c8f; } .stt.lkt .mv.eq { color: var(--faint); }
.stt.lkt b.lk { display: inline-block; min-width: 44px; padding: 2px 6px 1px; border-radius: 3px; transform: skewX(-11deg); font: 700 11.5px var(--mono); text-align: center; color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); }
.stt.lkt b.lk.pabove { color: #111; background: #ffbe4c; } .stt.lkt b.lk.pbelow { color: #111; background: #ff5c8f; }
@media (max-width: 560px) { .lkg { grid-template-columns: minmax(0, 1fr); } }

/* D-C136 (3): the xG round-up: the matchday's header with its arrows, the story as cards (the verdict colours), every match */
.ruh { display: flex; align-items: center; gap: 12px; margin: 14px 14px 4px; }
.ruh > div { flex: 1; min-width: 0; text-align: center; } .ruh b { display: block; font: 700 17px "Space Grotesk", var(--ui); letter-spacing: -.01em; text-transform: uppercase; color: var(--text); }
.ruh small { display: block; margin-top: 4px; font: 400 11px var(--mono); color: var(--muted); }
.ruh .btn[disabled] { opacity: .3; pointer-events: none; }
.rug { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 14px 0; }
@media (max-width: 560px) { .rug { grid-template-columns: minmax(0, 1fr); } }
.ruc { --kc: var(--accent); padding: 11px 12px; border-radius: 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 12%, transparent), transparent 60%), color-mix(in srgb, var(--text) 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc) 30%, var(--line)); }
.ruc.drawvs { --kc: #ff5c8f; } .ruc.wonvs { --kc: #ffbe4c; } .ruc.inline { --kc: var(--accent); } .ruc.xg { --kc: #9ce6f3; } .ruc.one { --kc: #b9a7ff; } .ruc.gabove { --kc: var(--accent); } .ruc.gbelow { --kc: #9aa0a6; }
.ruc h3 { margin: 0 0 8px; font: 700 11.5px "Space Grotesk", var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--kc); }
.ruc .rum { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; } .ruc .rum b { font: 700 13px var(--mono); }
.ruc small { display: block; margin-top: 3px; font: 400 11px var(--mono); color: #9ce6f3; }
.ruc p { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.xgf.rut td { font-size: 12.5px; } .xgf.rut tr { cursor: pointer; } .xgf.rut td:first-child { text-align: left; } .xgf.rut td b { font-family: var(--mono); }
.xgf.rut .dsv-tag { font-size: 9.5px; padding: 3px 7px 2px; white-space: nowrap; }

/* D-C136 (4): the pre-match xG profile: last five as xG bars, the meetings in xG, the market beside the xG chances */
.x5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 14px 0; }
@media (max-width: 560px) { .x5 { grid-template-columns: minmax(0, 1fr); } }
.x5c h4 { margin: 0 0 6px; font: 700 11.5px "Space Grotesk", var(--ui); letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.x5r { display: grid; grid-template-columns: 20px minmax(0, 1fr) 70px 64px; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12px; }
.x5r .res { width: 18px; height: 18px; font-size: 9.5px !important; }
.x5o { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.x5b { display: flex; flex-direction: column; gap: 2px; } .x5b i { display: block; height: 4px; border-radius: 1px; transform: skewX(-20deg); }
.x5b .f { background: var(--accent); } .x5b .a { background: color-mix(in srgb, var(--text) 28%, transparent); }
.x5v { display: flex; flex-direction: column; align-items: flex-end; font: 400 10.5px/1.2 var(--mono); color: var(--faint); } .x5v b { color: var(--accent); font-weight: 700; }
.x5m { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 14px 0; font-size: 13px; color: var(--muted); }
.x5m b { font: 700 16px var(--mono); color: var(--text); } .x5m i { font: 400 10.5px var(--mono); font-style: normal; color: var(--faint); }
.xmk { display: grid; grid-template-columns: 54px repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; align-items: end; }
.xmk-h { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding-bottom: 6px; font: 700 10px/16px var(--mono); color: var(--faint); } .xmk-h span:first-child { color: var(--accent); }
.xmk > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 6px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.xmk small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; color: var(--muted); }
.xmk b { font: 700 13px/16px var(--mono); color: var(--accent); } .xmk i { font: 400 11.5px/16px var(--mono); font-style: normal; color: var(--text); }

/* D-C136 (5): the team's four xG tiles: the figure, what it is, its move against the 10 before (lime better, pink worse) */
.xtls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 14px 0; }
@media (max-width: 700px) { .xtls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xtl { --kc: var(--accent); position: relative; padding: 12px 12px 10px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 14%, transparent), transparent 65%), color-mix(in srgb, var(--text) 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc) 28%, var(--line)); }
.xtl.a { --kc: #9aa0a6; } .xtl.q { --kc: #9ce6f3; } .xtl.l { --kc: #ffbe4c; } .xtl.u { --kc: #ff5c8f; }
.xtl h4 { margin: 0; padding-right: 58px; min-height: 26px; font: 700 10.5px/1.25 "Space Grotesk", var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--kc); }
.xtl b { display: block; margin-top: 6px; font: 700 26px/1 var(--mono); letter-spacing: -.04em; color: var(--text); }
.xtl small { display: block; margin-top: 4px; font: 400 10.5px var(--mono); color: var(--faint); }
.xtl i { position: absolute; top: 11px; right: 10px; padding: 2px 5px 1px; border-radius: 2px; transform: skewX(-11deg); font: 700 9.5px var(--mono); font-style: normal; }
.xtl i.up { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .xtl i.dn { background: color-mix(in srgb, #ff5c8f 18%, transparent); color: #ff5c8f; }

/* D-C136 (7): xG leaders: the boards as the player tables (skewed rank, crest, name, league tag, share track) */
.lbseg { overflow-x: auto; scrollbar-width: none; } .lbseg::-webkit-scrollbar { display: none; }
.stt.lbt .tg { cursor: pointer; } .stt.lbt b.lbv, .xgf.rut b.lbv { font: 700 13px var(--mono); color: var(--text); }
.xgf.rut small { color: var(--faint); font-size: 11px; }
.nv-lb { display: flex; align-items: center; gap: 9px; width: calc(100% - 16px); margin: 8px 8px 0; padding: 10px 12px; border-radius: 10px; text-align: left;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, var(--line)); }
.nv-lb .i { width: 15px; height: 15px; color: var(--accent); flex: none; } .nv-lb span { font: 700 11.5px "Space Grotesk", var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.nv-lb small { flex: 1; font: 400 10px var(--mono); color: var(--faint); } .nv-lb > .i:last-child { width: 12px; height: 12px; color: var(--muted); }
.nv-lb:hover, .nv-lb[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--accent); }
.xtls.two .xtl b { font-size: 20px; }

/* D-C137: long surnames on the pitch a size smaller, so the whole name fits between the rows */
.pitch .pt.sm { font-size: 7.4px; letter-spacing: -.01em; }

/* D-C137 (#6): a team's seasons: the season chips, then the season's tiles and tables */
.tsys { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 14px 0; }
.tsys button { padding: 6px 10px 5px; border-radius: 3px; transform: skewX(-11deg); background: color-mix(in srgb, var(--text) 6%, transparent); font: 700 11px var(--mono); color: var(--muted); }
.tsys button[aria-pressed="true"] { background: var(--accent); color: #0f1113; }

/* D-C137 (#11): "This week in xG": three cards in the verdict colours, a link to each league's round-up */
#wkx { display: grid; gap: 8px; padding: 10px 12px 12px; }
.wkc { --kc: var(--accent); padding: 10px 12px; border-radius: 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 12%, transparent), transparent 60%), color-mix(in srgb, var(--text) 3%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc) 28%, var(--line)); }
.wkc.drawvs { --kc: #ff5c8f; } .wkc.wonvs { --kc: #ffbe4c; } .wkc.xg { --kc: #9ce6f3; }
.wkc h3 { margin: 0 0 6px; font: 700 11px "Space Grotesk", var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--kc); }
.wkm { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; font-size: 13px; color: var(--text); } .wkm b { font: 700 13px var(--mono); }
.wkc p { margin: 5px 0 0; font: 400 11px var(--mono); color: var(--muted); }
.wkl, .wkall { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font: 700 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--kc, var(--accent)); text-decoration: none; }
.wkl .i, .wkall .i { width: 11px; height: 11px; } .wkall { justify-self: end; --kc: var(--accent); }
.wkin { border-top: 1px solid var(--line); }
/* D-C137 (#13) xG fixture difficulty: lime easiest → grey → pink hardest, solid, no borders */
.stt.fdr { width: 100%; min-width: 640px; table-layout: fixed; } .stt.fdr td.fd { padding: 3px 2px; }
.stt.fdr th.tm { width: 150px; } .stt.fdr th:last-child { width: 40px; }
.stt.fdr td.tm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdc { display: inline-flex; align-items: center; gap: 4px; width: 100%; box-sizing: border-box; padding: 4px 6px; border-radius: 3px; cursor: pointer; background: var(--chip); color: var(--muted); font-size: 11.5px; line-height: 1.2; text-align: left; vertical-align: middle; }
.fdc b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11.5px var(--sans); letter-spacing: 0; text-transform: none; }
.fdc i { font: 700 9.5px var(--mono); font-style: normal; opacity: .75; }
.fdc .crest.rc { width: 14px; height: 14px; margin: 0; flex: none; }
.fdc.g1 { background: #d1fe17; color: #111; } .fdc.g2 { background: color-mix(in srgb, #d1fe17 38%, var(--chip)); color: var(--text); }
.fdc.g3 { background: color-mix(in srgb, var(--text) 10%, var(--chip)); color: var(--text); }
.fdc.g4 { background: color-mix(in srgb, #ff5c8f 40%, var(--chip)); color: var(--text); } .fdc.g5 { background: #ff5c8f; color: #111; }
.fdc:hover { filter: brightness(1.12); }
.stt.fdr td.fda { font: 700 12px var(--mono); color: var(--muted); }
.fdk { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0; }
.fdk .fdc { width: auto; cursor: default; padding: 3px 9px; }
.fdk .fdc:hover { filter: none; }
.subt.fdm { margin-top: 6px; }
.stt.fdr th.tm, .stt.fdr td.tm { position: sticky; left: 0; z-index: 1; background: var(--panel); }
@media (max-width: 600px) { .stt.fdr { min-width: 600px; } .stt.fdr th.tm { width: 118px; } }
/* the match header's live minute flashes as the feed's (owner, 2026-10-29): the same pulsing lime dot before it */
.dsc2 .dclk:not(.brk) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #d1fe17; }
.dsc2 .dclk:not(.brk)::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #d1fe17; box-shadow: 0 0 8px #d1fe17; animation: pulse 1.4s infinite; }
@media (prefers-reduced-motion: reduce) { .dsc2 .dclk::before { animation: none; } }
/* a national team's round flag in place of the provider's rectangular one (owner, 2026-10-29), ringed like the left column's */
img.crest.flc { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); }
/* D-C140: a match page: the match in the page's centre, in place of the list; no pop-over, no shadow, full width */
.mpage #board, .mpage #vbar, .mpage #rbar { display: none; }
.mpage #p-live > #drawerRoot .scrim { display: none; }
.mpage .drawer.mpage { position: relative; inset: auto; width: auto; height: auto; max-height: none; z-index: auto; box-shadow: none; border-left: 0; background: transparent; }
.mpage .drawer.mpage .dbody { flex: none; overflow: visible; }
.mpage .drawer.mpage .dhead { background: transparent; }
.dtop .dback#dClose { color: var(--accent); }
.dtop #dPage { text-decoration: none; }
/* a live team's trend (speed jump ↗ / cooling ↓) next to its name wherever the live match shows (owner, 2026-10-29) */
.xtr { display: inline-flex; align-items: center; flex: none; margin-left: 6px; color: var(--muted); vertical-align: -2px; }
.xtr .i { width: 13px; height: 13px; }
.dsc2 .dn .xtr { margin-left: 8px; vertical-align: -1px; } .dsc2 .dn .xtr .i { width: 16px; height: 16px; }
.pm .xtr, .mcard .xtr { margin: 0 4px; } .pm .xtr .i, .mcard .xtr .i { width: 11px; height: 11px; }
.ticker .ttr { display: inline-flex; align-items: center; justify-content: center; width: 12px; margin-left: 4px; color: var(--muted); vertical-align: -1px; }
.ticker .ttr .i { width: 11px; height: 11px; }
/* D-C143 the alert record */
.ard { display: flex; align-items: center; gap: 10px; padding: 6px 2px; } .ard b { font: 700 13px "Space Grotesk", var(--ui); min-width: 0; flex: 1; text-align: center; }
.arh .subt { margin-bottom: 4px; }
.ars .tbox small .are { margin-left: 2px; }
.are { display: inline-block; padding: 1px 6px 0; border-radius: 3px; transform: skewX(-11deg); font: 700 11px var(--mono); color: var(--muted); background: color-mix(in srgb, var(--text) 7%, transparent); }
.are.up { color: #111; background: var(--accent); } .are.dn { color: #111; background: #ff5c8f; }
.xgf.art td { font: 700 12px var(--mono); text-align: right; padding: 7px 8px; } .xgf.art td:first-child { text-align: left; font: 600 12.5px var(--ui); }
.arl { display: flex; flex-direction: column; }
.arr { display: grid; grid-template-columns: 58px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer; }
.arr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.art1 { display: flex; flex-direction: column; font: 700 11px var(--mono); color: var(--muted); } .art1 i { font-style: normal; color: var(--accent); font-weight: 700; }
.arp { padding: 2px 7px 1px; border-radius: 3px; transform: skewX(-11deg); font: 700 10px "Space Grotesk", var(--ui); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.arp.b3 { background: #e72930; } .arp.b4 { background: #b91c1c; } .arp.b1 { background: #ffbe4c; color: #111; } .arp.b2 { background: #ff4f03; }
.arm { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .arm b { font: 700 13px "Space Grotesk", var(--ui); } .arm small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arx { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .arx small { font: 400 10px var(--mono); color: var(--faint); }
.aro { padding: 2px 8px 1px; border-radius: 3px; transform: skewX(-11deg); font: 700 11px var(--mono); white-space: nowrap; }
.aro.hit { color: #111; background: var(--accent); } .aro.miss { color: var(--muted); background: color-mix(in srgb, var(--text) 7%, transparent); } .aro.pend { color: var(--live); box-shadow: inset 0 0 0 1px var(--live); }
.nv-lb.nv-ar { margin-top: 6px; }
@media (max-width: 600px) { .arr { grid-template-columns: 46px minmax(0, 1fr) auto; } .arr .arp { display: none; } }
.xgf.art th { padding: 6px 8px; font: 700 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); text-align: right; white-space: nowrap; }
.xgf.art tr.arth { background: none; cursor: default; }
@media (max-width: 600px) { .xgf.art th:nth-child(n+6), .xgf.art td:nth-child(n+6) { display: none; } }
/* every live minute's dot pulses with the page (livescore.js toggles html.lv-off every 0.7 s): feed, match header, xG board */
.xch .clk:not(.brk), tr.mh .clk:not(.brk) { display: inline-flex; align-items: center; gap: 5px; }
.xch .clk:not(.brk)::before, tr.mh .clk:not(.brk)::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #d1fe17; box-shadow: 0 0 8px #d1fe17; }
.clock.c-live::before, .dsc2 .dclk:not(.brk)::before, .xch .clk:not(.brk)::before, tr.mh .clk:not(.brk)::before { animation: none !important; transition: opacity .6s ease-in-out; }
html.lv-off .clock.c-live::before, html.lv-off .dsc2 .dclk:not(.brk)::before, html.lv-off .xch .clk:not(.brk)::before, html.lv-off tr.mh .clk:not(.brk)::before { opacity: .2; }
/* D-C144 the match's Preview */
.pvw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 14px 12px; }
@media (max-width: 560px) { .pvw { grid-template-columns: 1fr; } }
.pvc { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 3.5%, transparent); min-width: 0; }
.pvc h4 { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; font: 700 13px "Space Grotesk", var(--ui); }
.pvc h4 small { margin-left: auto; font: 700 10.5px var(--mono); color: var(--muted); }
.pvc .frm { display: flex; gap: 3px; } .res.nx { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
.pvg { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; align-items: center; margin: 10px 0 6px; font-size: 11px; color: var(--muted); }
.pvg span b { font: 700 13px var(--mono); color: var(--text); margin-right: 4px; }
.pvg i { display: block; height: 5px; border-radius: 1px; transform: skewX(-20deg); width: var(--w); min-width: 3px; grid-column: 2; }
.pvg span:first-child { grid-row: 1; } .pvg i.f { grid-row: 1; background: var(--accent); } .pvg i.a { grid-row: 2; background: #ff5c8f; } .pvg span:last-child { grid-row: 2; grid-column: 1; }
.pvs { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.pvr { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pvr span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 6px; background: color-mix(in srgb, var(--text) 5%, transparent); font-size: 11px; color: var(--muted); }
.pvr b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 4px; font: 700 11px var(--mono); color: #111; background: #9aa0a6; }
.pvr .up b { background: var(--accent); } .pvr .dn b { background: #ff5c8f; }
.pvk { display: grid; grid-template-columns: 46px 1fr; gap: 0 8px; align-items: center; margin: 0 0 6px; font-size: 12px; }
.pvk b { grid-row: span 2; display: flex; align-items: baseline; justify-content: center; gap: 1px; height: 30px; line-height: 30px; border-radius: 5px; font: 700 13px var(--mono); }
.pvk b small { font-size: 9px; color: inherit; opacity: .7; } .pvk.s b { color: #111; background: var(--accent); } .pvk.w b { color: #111; background: #ff5c8f; }
.pvk > small { color: var(--faint); font-size: 10.5px; }
.pvh { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 14px 0; }
.pvh div { padding: 8px; border-radius: 8px; text-align: center; background: color-mix(in srgb, var(--text) 3.5%, transparent); font-size: 11px; color: var(--muted); }
.pvh b { display: block; font: 700 18px var(--mono); color: var(--text); } .pvh small { display: block; font: 700 10px var(--mono); color: var(--faint); }
.pvhb { display: flex; gap: 2px; height: 6px; margin: 8px 14px 0; } .pvhb i { border-radius: 1px; } .pvhb .h { background: var(--accent); } .pvhb .d { background: #4a4d52; } .pvhb .a { background: #9ce6f3; }
.pvt { padding: 4px 14px 8px; }
.pvtr { display: grid; grid-template-columns: 44px 1fr auto 1fr 44px; align-items: center; gap: 8px; padding: 5px 0; font-size: 11.5px; }
.pvtr > b { font: 700 12px var(--mono); color: var(--muted); } .pvtr > b:last-child { text-align: right; } .pvtr > b.on { color: var(--text); }
.pvtr em { font-style: normal; color: var(--muted); text-align: center; white-space: nowrap; }
.pvtr span { display: flex; height: 4px; } .pvtr span.l { justify-content: flex-end; }
.pvtr span i { display: block; height: 100%; border-radius: 1px; background: color-mix(in srgb, var(--text) 18%, transparent); } .pvtr span i.on { background: var(--accent); }
.pvx { margin: 4px 14px 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.pvxh { display: flex; justify-content: space-between; align-items: baseline; } .pvxh em { font: 700 11px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .pvxh b { font: 700 18px var(--mono); }
.pvxb { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: 6px 0; font-size: 11.5px; color: var(--muted); }
.pvxb b { color: var(--text); font-family: var(--mono); }
.pvxb i { height: 6px; border-radius: 1px; background: linear-gradient(90deg, var(--accent) var(--w), #9ce6f3 var(--w)); }
.pvxc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pvxc > span { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.pvxc > span > span { display: inline-grid; place-items: center; min-width: 22px; height: 20px; border-radius: 4px; font: 700 10.5px var(--mono); color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); }
.pvxc > span > span.ov { color: #111; background: var(--accent); } .pvxc small { flex-basis: 100%; font: 400 10px var(--mono); color: var(--faint); }
.pvm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 7px; font-size: 12px; }
.pvm em { font-style: normal; font-size: 10.5px; color: var(--accent); } .pvm small { flex-basis: 100%; color: var(--faint); font-size: 10.5px; }
.xgf.pvst td, .xgf.pvst th { padding: 6px 10px; font: 700 12px var(--mono); text-align: right; } .xgf.pvst .tm { text-align: left; font-family: var(--ui); } .xgf.pvst th { font-size: 9.5px; color: var(--faint); }
/* D-C144: the last five under each crest of the match header; the Preview's section links */
.dsc2 .dl5 { display: inline-flex; gap: 3px; margin-top: 6px; min-height: 7px; } .dsc2 .dl5 i { width: 7px; height: 7px; border-radius: 2px; transform: skewX(-11deg); background: #4a4d52; }
.dsc2 .dl5 i.W { background: var(--accent); } .dsc2 .dl5 i.L { background: #ff5c8f; } .dsc2 .dl5 i.D { background: #9aa0a6; }
.pvnav { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 14px 6px; } .pvnav:empty { display: none; }
.pvnav button { padding: 4px 9px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--muted); font: 600 11px var(--ui); cursor: pointer; }
.pvnav button:hover { color: var(--text); }
#dbody .hsec { scroll-margin-top: 76px; }
.pvo { margin: 10px 14px 6px; font-size: 13px; line-height: 1.5; color: var(--text); }
/* D-C145 the Players tab */
.stt.plt { width: 100%; } .stt.plt th { cursor: pointer; white-space: nowrap; } .stt.plt th.on { color: var(--accent); }
.stt.plt td.tm { white-space: nowrap; } .stt.plt td.tm small { margin-left: 6px; font: 400 10px var(--mono); color: var(--faint); }
.stt.plt td small { color: var(--faint); font-size: 10px; } .stt.plt td.best { color: var(--accent); font-weight: 700; }
.stt.plt .pbest { margin-left: 5px; color: var(--accent); font-size: 11px; }
/* D-C146 xG momentum */
.mom { position: relative; margin: 2px 14px 14px; padding-bottom: 16px; }
.mom svg { display: block; width: 100%; height: 120px; }
.mom .ml { stroke: color-mix(in srgb, var(--text) 18%, transparent); stroke-width: .25; vector-effect: non-scaling-stroke; }
.mom .mh { stroke: color-mix(in srgb, var(--text) 25%, transparent); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.mom .bh { fill: var(--accent); } .mom .ba { fill: #9ce6f3; }
.mom .mg { position: absolute; width: 12px; height: 12px; margin-left: -6px; color: #f7f7f8; pointer-events: none; } .mom .mg .i { width: 12px; height: 12px; display: block; }
.mom .mg.up { top: -5px; } .mom .mg.dn { top: 111px; }
/* owner, 2026-10-29: a dashed line from each goal's ball to the chart's middle line (at 60px of the 120px chart) */
.mom .mg::after { content: ""; position: absolute; left: 50%; border-left: 1px dashed color-mix(in srgb, var(--text) 35%, transparent); }
.mom .mg.up::after { top: 100%; height: 53px; } .mom .mg.dn::after { bottom: 100%; height: 51px; }
.momx { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; } .momx span { position: absolute; transform: translateX(-50%); font: 400 9.5px var(--mono); color: var(--faint); }
/* D-C146: the price that came in; the side's average rating in the line-ups */
.oc.won { box-shadow: inset 0 0 0 1.5px var(--accent); } .oc.won span { color: var(--accent); } .ot td.won b { color: var(--accent); }
.lu h4 .rt, .lineups h4 .rt { margin-left: 8px; }
/* D-C147: the round-ups' matchday grid */
.rkg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 14px 10px; }
.rkg button { min-width: 30px; height: 26px; border: 0; border-radius: 5px; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--muted); font: 700 11px var(--mono); cursor: pointer; }
.rkg button[aria-pressed="true"] { background: var(--accent); color: #111; }
/* D-C148 the team's league season in numbers */
.tsn { margin: 6px 14px 10px; font-size: 13px; line-height: 1.55; color: var(--text); }
.tolw { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 0 14px 12px; }
.tolw > div { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.tolw h4 { display: flex; justify-content: space-between; margin: 0 0 8px; font: 700 12px "Space Grotesk", var(--ui); } .tolw h4 small { font: 400 10px var(--mono); color: var(--faint); }
.tol { display: grid; grid-template-columns: 74px 1fr 38px; align-items: center; gap: 8px; margin: 5px 0; font-size: 11.5px; color: var(--muted); }
.tol i { height: 5px; border-radius: 1px; background: color-mix(in srgb, var(--text) 8%, transparent); } .tol i b { display: block; height: 100%; border-radius: 1px; background: var(--accent); }
.tol em { font: 700 11.5px var(--mono); font-style: normal; color: var(--text); text-align: right; }
.tpr { display: block; width: calc(100% - 28px); height: 140px; margin: 0 14px; }
.tpr .pace { stroke: #8b8d90; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.tpr .me { fill: none; stroke: #d1fe17; stroke-width: 2; vector-effect: non-scaling-stroke; }
/* owner, 2026-10-30: the race fills its width; the dots are round marks over the stretched lines; a pointer shows the match */
.tprw { position: relative; margin: 0 14px; touch-action: pan-y; cursor: crosshair; } .tprw .tpr { width: 100%; margin: 0; }
.tprw .tpd { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; }
.tprw .tpd.W, .tprw .tpt i.W { background: #d1fe17; } .tprw .tpd.D, .tprw .tpt i.D { background: #9aa0a6; } .tprw .tpd.L, .tprw .tpt i.L { background: #ff5c8f; }
.tprw .tpc { position: absolute; top: 0; height: 140px; width: 2px; margin-left: -1px; background: color-mix(in srgb, var(--text) 18%, transparent); pointer-events: none; }
.tprw .tpt { position: absolute; top: 0; transform: translate(-50%, -100%); margin-top: -6px; z-index: 3; min-width: 170px; padding: 7px 10px; border-radius: 8px; background: var(--panel); box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(0,0,0,.45); font: 500 11.5px/1.45 var(--ui); color: var(--text); pointer-events: none; white-space: nowrap; }
.tprw .tpt .mt { display: block; font: 700 11px var(--mono); color: var(--muted); margin-bottom: 2px; }
.tprw .tpt p { margin: 0; display: flex; align-items: center; gap: 6px; } .tprw .tpt p b { font-family: var(--mono); } .tprw .tpt p > i { width: 8px; height: 8px; border-radius: 50%; }
.tprw [hidden] { display: none !important; }
/* D-C149 trends of the day */
.trn { margin: 8px 14px; font-size: 12.5px; color: var(--muted); }
.trg { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; padding: 4px 14px 12px; }
.trc { display: flex; flex-direction: column; gap: 7px; padding: 11px 13px; border: 0; border-radius: 12px; text-align: left; cursor: pointer; color: var(--text); background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.trc:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.trh { display: flex; gap: 8px; font-size: 11px; color: var(--muted); } .trt { font: 700 11px var(--mono); color: var(--accent); } .trl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trm { display: flex; align-items: center; gap: 6px; font: 700 13px "Space Grotesk", var(--ui); } .trm i { font-style: normal; color: var(--faint); font-weight: 500; } .trm b { font-weight: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk { display: flex; justify-content: space-between; align-items: center; padding: 7px 9px; border-radius: 7px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.trk b { font: 700 12.5px var(--ui); } .trk span { padding: 2px 8px 1px; border-radius: 3px; transform: skewX(-11deg); font: 700 12px var(--mono); color: #111; background: var(--accent); }
.trb { display: grid; grid-template-columns: minmax(0, 1fr) 90px 34px; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); }
.trb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trb i { height: 5px; border-radius: 1px; background: color-mix(in srgb, var(--text) 8%, transparent); } .trb i b { display: block; height: 100%; background: var(--accent); }
.trb em { font: 700 11px var(--mono); font-style: normal; color: var(--text); text-align: right; } .trc > small { font: 400 10px var(--mono); color: var(--faint); }
/* F1 (study, 2026-10-29): a match page's slim bar under the site header, shown once the score has scrolled away */
.dmini { display: none; }
.mpage.mmini .dmini { display: block; position: fixed; left: var(--mleft, 0); width: var(--mw, 100%); top: var(--mtop, 52px); z-index: 9; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); border-radius: 0 0 10px 10px; animation: dmin .18s ease-out; }
@keyframes dmin { from { opacity: 0; transform: translateY(-6px); } }
.dmini .dmi { display: grid; grid-template-columns: minmax(0, 1fr) 20px auto 20px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; max-width: 760px; margin: 0 auto; padding: 7px 16px; position: relative; border: 0; background: none; color: var(--text); font: 700 13px var(--ui); cursor: pointer; }
.dmini .n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dmini .n.h { text-align: right; }
.dmini img.crest { width: 20px; height: 20px; }
.dmini b { font: 700 15px var(--mono); white-space: nowrap; } .dmini b i { font-style: normal; margin: 0 3px; color: var(--muted); }
.dmini .dmc { display: inline-flex; align-items: center; gap: 5px; font: 700 11px var(--mono); color: #d1fe17; white-space: nowrap; }
.dmini .dmc.brk { color: var(--muted); }
.dmini .dmc:not(.brk)::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #d1fe17; box-shadow: 0 0 8px #d1fe17; transition: opacity .6s ease-in-out; }
html.lv-off .dmini .dmc:not(.brk)::before { opacity: .2; }
@media (max-width: 520px) { .dmini .dmi { gap: 6px; padding: 6px 10px; font-size: 12px; } .dmini b { font-size: 14px; } }
/* F6: the captain's and the goalkeepers' marks in the line-up lists */
.lu li .lum { flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; font: 700 9px/1 var(--mono); font-style: normal; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
/* F7: the side's league place and points under its name in the match header */
.dsc2 .dpl { margin-top: 2px; font: 700 10.5px var(--mono); letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
/* F8: from the Preview's statistics to each team's page */
.pvall { display: flex; justify-content: space-between; gap: 10px; margin: 6px 14px 10px; }
.pvall .tlink { font: 700 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent, #d1fe17); }
/* D-C155 (owner, 2026-10-29): no pinning on phones: no pin buttons, no pinned cards (they stay saved for wider screens) */
@media (max-width: 760px) { .row .rpin, button[data-mcard="pin"], #pins { display: none !important; } }
/* owner, 2026-10-29: the momentum chart under the pointer: the minute's column and its label */
.mom { touch-action: pan-y; cursor: crosshair; }
.mom .momc { position: absolute; top: 0; height: 120px; width: 1.4%; transform: translateX(-50%); background: color-mix(in srgb, var(--text) 9%, transparent); border-radius: 3px; pointer-events: none; }
.mom .momt { position: absolute; top: 0; transform: translate(-50%, -100%); margin-top: -6px; z-index: 3; min-width: 150px; max-width: 280px; padding: 7px 10px; border-radius: 8px; background: var(--panel); box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(0,0,0,.45); font: 500 11.5px/1.45 var(--ui); color: var(--text); pointer-events: none; white-space: nowrap; }
.mom .momt .mt { display: block; font: 700 11px var(--mono); color: var(--muted); margin-bottom: 2px; }
.mom .momt p { margin: 0; display: flex; align-items: center; gap: 6px; } .mom .momt p b { font-family: var(--mono); }
.mom .momt p > i { width: 8px; height: 8px; border-radius: 2px; } .mom .momt i.bh { background: var(--accent); } .mom .momt i.ba { background: #9ce6f3; }
.mom .momt .gg .i { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 5px; } .mom .momt p.gg { display: block; white-space: normal; margin-top: 2px; }
.mom [hidden] { display: none !important; }
/* owner, 2026-10-30 (study C8): a league's missing players of the next two days, match by match */
.cmis { margin: 0 14px 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.cmis h4 { margin: 0 0 6px; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .cmis h4 small { font: 400 11px var(--mono); color: var(--muted); }
.cmis p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text); } .cmis p b { display: block; font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.cmis p small { color: var(--muted); }
/* owner, 2026-10-30: "bottom, small fonts, as: Last updated dd/mm/yy hh:mm" */
.upd { margin: 6px 14px 10px; font: 400 10.5px var(--mono); letter-spacing: .02em; color: var(--faint); text-align: right; }
/* D-C167: the Players tab's Cards view (this match vs the player's last 5) */
.plc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin: 4px 0 8px; }
/* owner, 2026-10-30: article.plc only (a table's player cell is td.plc: the card's box had spread to the top scorers) */
article.plc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 11px; padding: 14px 14px 10px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, var(--head) 0, var(--panel) 140px); }
.plc-no { position: absolute; right: -4px; top: -18px; font: italic 700 128px/1 var(--sans); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--text) 20%, transparent); pointer-events: none; }
.plc-bg { position: absolute; right: -16px; top: -12px; width: 136px; height: 136px; object-fit: contain; opacity: .07; filter: grayscale(1); pointer-events: none; }
.plc-tags { display: flex; gap: 6px; position: relative; }
.plc-tag { font: 600 11px/1 var(--sans); padding: 5px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.plc-tag.st { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 9%, transparent); }
.plc-tag.sb { color: var(--brk); border-color: color-mix(in srgb, var(--brk) 40%, transparent); background: color-mix(in srgb, var(--brk) 9%, transparent); }
.plc-nm { position: relative; max-width: 70%; display: flex; flex-direction: column; text-transform: uppercase; }
.plc-nm span { font: 300 17px/1.05 var(--sans); color: var(--muted); }
.plc-nm b { font: 700 23px/1.05 var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.plc-tm { position: relative; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.plc-tm .crest { width: 16px; height: 16px; }
.plc-box { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 11px 8px 9px; background: color-mix(in srgb, var(--text) 2.5%, transparent); }
.plc-h { display: flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--sans); color: var(--muted); padding: 0 4px 11px; }
.plc-h i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.plc-h b { color: var(--text); font-weight: 600; }
.plc-g { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 12px; }
.plc-s { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: default; }
.plc-s svg { width: 17px; height: 17px; color: var(--muted); }
.plc-s b { font: 700 16px/1 var(--mono); color: var(--text); }
.plc-s b.up { color: var(--accent); }
.plc-s b.z { color: var(--faint); }
.plc-s span { font: 400 11.5px/1 var(--mono); color: var(--muted); }
.plc-s small { font: 500 9.5px/1 var(--sans); color: var(--faint); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.plc-rows { display: flex; flex-direction: column; gap: 8px; padding: 0 2px; }
.plc-r { display: grid; grid-template-columns: 62px 1fr 84px; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); }
.plc-t { position: relative; height: 7px; border-radius: 4px; background: var(--chip); }
.plc-t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--text); }
.plc-t i.up { background: var(--accent); }
.plc-t em { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--muted); }
.plc-n { font: 400 11.5px/1 var(--mono); text-align: right; }
.plc-n b { color: var(--text); }
.plc-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 9px; }
.plc-all { font: 600 12px/1 var(--sans); color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; }
.plc-all:hover { color: var(--accent); }
.plc-ft .plc-upd { margin: 0; }
@media (max-width: 640px) {
  .plc-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 4px -12px 8px; padding: 0 12px 4px; scrollbar-width: none; }
  .plc-grid::-webkit-scrollbar { display: none; }
  article.plc { flex: 0 0 86%; scroll-snap-align: center; }
}
/* D-C168: the player page's latest-match card, season statistics (totals / per 90) and card marks */
.plc-grid.plc-one { grid-template-columns: minmax(0, 400px); margin: 10px 14px 4px; }
@media (max-width: 640px) { .plc-grid.plc-one { display: grid; margin: 10px 12px 4px; padding: 0; } .plc-one article.plc { flex: none; } }
.subt.pss { padding-bottom: 0; }
.psg { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 8px 14px 4px; }
.psb { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 6px; background: color-mix(in srgb, var(--text) 2%, transparent); }
.psb h3 { margin: 0 0 6px; font: 700 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.psb p { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.psb p:first-of-type { border-top: 0; }
.psb p span { color: var(--muted); }
.psb p b { font: 700 13px/1 var(--mono); color: var(--text); }
.psb p b small { margin-left: 6px; font: 400 11px/1 var(--mono); color: var(--muted); }
.pcd { display: inline-block; width: 7px; height: 10px; border-radius: 1.5px; margin-left: 5px; vertical-align: -1px; }
.pcd.y { background: #fbbf24; } .pcd.r { background: #ef4444; }
@media (max-width: 640px) { .twrap > .xgf.plm, .twrap > .xgf.pls { min-width: 600px; } .twrap > .xgf.pls .plmin { display: table-cell; } }

/* D-C169 (owner, 2026-10-30): the search's results open under the box while typing (below 1640px the navigator is a closed sheet);
   Cancel ends the search; 16px text, so phones do not zoom the page into the box */
.qres { position: absolute; top: 100%; right: max(12px, calc((100vw - 1600px) / 2)); width: min(440px, calc(100vw - 24px)); max-height: min(70vh, 560px);
  overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 30; padding-bottom: 4px; }
.qres[hidden] { display: none; }
.qres .nv-h { position: sticky; top: 0; z-index: 1; }
.qres .nv-x, .qres .nv-m { padding-top: 9px; padding-bottom: 9px; }
.qx { display: none; flex: none; height: 34px; padding: 0 10px; border-radius: 10px; color: var(--text); font: 600 14px var(--ui); }
@media (max-width: 760px) {
  html.sopen header .qx { display: inline-flex; align-items: center; order: 10; }
  html.sopen header .search { flex: 1 1 calc(100% - 92px); min-width: 0; }
  .qres { left: 8px; right: 8px; width: auto; top: calc(100% + 4px); max-height: calc(100dvh - var(--hh, 100px) - 90px); }
}
@media (max-width: 760px), (pointer: coarse) { header .search, .search { font-size: 16px; } }

/* D-C170: the trends' track record; the calendar marks the days with a record and closes the days after the last */
.cal-g button.has { position: relative; }
.cal-g button.has::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #d1fe17; }
.cal-g button.sel.has::after { background: #1a1a1a; }
.cal-g button:disabled { opacity: .25; cursor: default; }
.subt.trtab { margin-bottom: 6px; }
.trr td:first-child { white-space: nowrap; text-align: left; }
@media (max-width: 640px) { .twrap > .trr { min-width: 560px; } }

/* owner, 2026-10-30: the country and competition in the bars lost the bottom of g, p, y (line height 1 in a clipped box) */
.group h3 .cn { line-height: 1.4; padding: 2px 0; }
.group h3 .cn > .co, .group h3 .cn > .cm, .group h3 .cn > span { line-height: 1.4; }
/* speed check (2026-10-30): a match page keeps a screen's height while its details come, so the footer never shows and jumps away */
.drawer.mpage { min-height: 100vh; }

/* owner, 2026-10-30: the column's own search field (was a "Press /" line at its foot); sticky at its top */
.nv-s { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 8px 6px;
  background: color-mix(in srgb, var(--panel) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nv-s .i { position: absolute; left: 20px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.nv-s input { flex: 1; min-width: 0; height: 38px; padding: 0 34px 0 36px; border-radius: 10px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--head) 80%, transparent); color: var(--text); font: 500 14px var(--ui); outline: none; -webkit-appearance: none; appearance: none; }
.nv-s input::-webkit-search-cancel-button { display: none; }
.nv-s input:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.nv-s button { position: absolute; right: 14px; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.nv-s button:hover { color: var(--text); background: rgba(255,255,255,.06); }
@media (max-width: 760px), (pointer: coarse) { .nv-s input { font-size: 16px; } }   /* no zoom on phones (D-C169) */
@media (max-width: 1639px) { .nv-s { position: relative; top: auto; } }   /* in the sheet it scrolls with the blocks, under the X */
.nv-x[data-tms]:not(:has(img)) .nm { margin-left: 32px; }   /* a team without a crest lines up with the others */

.daymore { height: 1px; }

/* owner, 2026-10-30: phones: the Leagues page (from the bottom bar), with a page for each country */
#lgRoot .lg { position: fixed; left: 0; right: 0; top: var(--hh, 53px); bottom: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bg, #0f1113); }
#lgRoot .lg-top { flex: none; padding: 12px 12px 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
#lgRoot .lg-t { margin: 0; font: 700 21px/1.1 "Space Grotesk", var(--ui); letter-spacing: -.03em; text-transform: uppercase; color: var(--text); }
#lgRoot .lg-s { position: relative; margin-top: 10px; }
#lgRoot .lg-s .i { position: absolute; left: 12px; top: 12px; width: 15px; height: 15px; color: var(--muted); }
#lgRoot .lg-s input { width: 100%; height: 40px; padding: 0 12px 0 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05);
  color: var(--text); font: 500 16px var(--ui); outline: none; -webkit-appearance: none; appearance: none; }
#lgRoot .lg-s input:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
#lgRoot .lg-bk { display: flex; align-items: center; gap: 10px; min-height: 40px; }
#lgRoot .lg-back { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--text); }
#lgRoot .lg-back .i { width: 18px; height: 18px; }
#lgRoot .lg-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(96px + env(safe-area-inset-bottom) * .5); animation: lg-in .22s ease-out both; }
#lgRoot.back .lg-list { animation-name: lg-back; }
@keyframes lg-in { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes lg-back { from { transform: translateX(-24px); opacity: .4; } to { transform: none; opacity: 1; } }
#lgRoot .lg-k { padding: 9px 14px 8px; background: rgba(255,255,255,.04); font: 600 11.5px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#lgRoot .lg-r { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 0; border-bottom: 1px solid rgba(255,255,255,.06);
  background: none; color: var(--text); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#lgRoot .lg-r:active { background: rgba(255,255,255,.05); }
#lgRoot .lg-r > .fl, #lgRoot .lg-r > img, #lgRoot .lg-r > .flag { flex: none; }
#lgRoot .lg-nf { width: 22px; flex: none; }
#lgRoot .lg-n { flex: 1; min-width: 0; display: grid; gap: 2px; }
#lgRoot .lg-n b { font: 600 15px/1.2 var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lgRoot .lg-n small { font: 500 11.5px var(--ui); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
#lgRoot .lg-c { display: flex; align-items: center; gap: 10px; font: 600 13px var(--ui); font-variant-numeric: tabular-nums; color: var(--muted); }
#lgRoot .lg-c em { font-style: normal; min-width: 26px; padding: 3px 7px; border-radius: 6px; background: #e5484d; color: #fff; text-align: center; }
#lgRoot .lg-c i { font-style: normal; }
#lgRoot .lg-co > .i:last-child { width: 15px; height: 15px; color: var(--muted); flex: none; }
#lgRoot .lg-list .nv-h, #lgRoot .lg-list .nv-x, #lgRoot .lg-list .nv-m { padding-left: 14px; padding-right: 14px; }
html.lg-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { #lgRoot .lg-list { animation: none; } }
#lgRoot .lg-s input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }

/* owner, 2026-10-31 (a reference's loading screen): a day's list starts as its skeleton, the day strip and the rows at
   their own sizes, a soft light sweeping over them, until the list is drawn in its place: no jump, no flash, no "Loading" */
div.sk, .sk-v { pointer-events: none; user-select: none; }
div.sk i, .sk-v i { display: block; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.15) 45%, rgba(255,255,255,.06) 90%) 0 0 / 300% 100%;
  animation: sk-sweep 1.4s ease-in-out infinite; }
@keyframes sk-sweep { from { background-position: 120% 0; } to { background-position: -40% 0; } }
.sk-v { display: flex; align-items: center; justify-content: space-around; height: 59px; padding: 0 8px; box-sizing: border-box; }
.sk-v span { display: grid; justify-items: center; gap: 7px; } .sk-v i:first-child { width: 28px; height: 8px; } .sk-v i:last-child { width: 40px; height: 11px; }
.sk-rg { display: none; }
.sk-h { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; box-sizing: border-box; background: rgba(255,255,255,.025); border-bottom: 1px solid var(--line); }
.sk-h .sk-f { width: 18px; height: 18px; border-radius: 50%; } .sk-h .w1 { width: 70px; } .sk-h .w2 { width: 96px; }
.sk-r { display: grid; grid-template-columns: 18px 42px minmax(0, 1fr) 16px; align-items: center; gap: 10px; height: 56px; padding: 0 14px; box-sizing: border-box; border-bottom: 1px solid var(--line); }
.sk-r .sk-s { width: 16px; height: 16px; border-radius: 4px; } .sk-r .sk-k { width: 36px; }
.sk-tm { display: grid; gap: 10px; } .sk-tm span { display: flex; align-items: center; gap: 8px; }
.sk-tm .sk-cr { width: 16px; height: 16px; flex: none; border-radius: 50%; } .sk-tm .w3 { width: 52%; } .sk-tm .w4 { width: 40%; }
.sk-r b { display: grid; gap: 12px; justify-items: end; } .sk-r b i { width: 10px; height: 12px; }
@media (min-width: 761px) and (max-width: 1050px) { .sk-v { height: 97px; } }
@media (max-width: 760px) {
  .sk-v { height: 47px; } .sk-v i:first-child { width: 26px; } .sk-v i:last-child { width: 36px; height: 12px; }
  .sk-rg { display: flex; align-items: center; height: 27px; padding: 0 14px; box-sizing: border-box; } .sk-rg i { width: 56%; height: 9px; }
  .sk-h { height: 36px; } .sk-r { height: 58px; grid-template-columns: 16px 36px minmax(0, 1fr) 14px; }
}
@media (prefers-reduced-motion: reduce) { div.sk i, .sk-v i { animation: none; } }

/* owner, 2026-10-31: every other wait (a view, a match's tab, a list) shows the same shimmering lines */
.sk-gen { min-height: 360px; }
.sk-l { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 48px; padding: 0 14px; box-sizing: border-box; border-bottom: 1px solid var(--line); }
.sk-l .w5 { width: 46%; } .sk-l .w6 { width: 16%; }
.sk-l:nth-child(3n) .w5 { width: 58%; } .sk-l:nth-child(3n+1) .w5 { width: 38%; }
.dbody .sk-gen .sk-h { background: none; }

/* owner, 2026-10-31: a match's tabs on phones, one line at their own width, swiped left and right */
@media (max-width: 760px) {
  .dtabs[role="tablist"] { overflow-x: auto; overflow-y: hidden; gap: 0; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding: 0 24px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .dtabs[role="tablist"]::-webkit-scrollbar { display: none; }
  .dtabs[role="tablist"].end { -webkit-mask-image: none; mask-image: none; }
  .dtab { flex: 0 0 auto; padding: 10px 14px; white-space: nowrap; }
}

/* owner, 2026-10-31 (xG leaders): the bar is the value against the first (full); the teams open their page; Team, the
   value and MP sort; the value and MP columns get room; the Team title stands over the names */
.stt.splr td.plc .lbar { display: block; width: 100%; min-width: 150px; height: 4px; margin-top: 2px; border-radius: 1px; transform: skewX(-20deg); background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.stt.splr td.plc .lbar i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), var(--accent)); }
.stt.lbt .pn b[data-team] { cursor: pointer; }
.stt.lbt th[data-lbs] { cursor: pointer; user-select: none; } .stt.lbt th[data-lbs]:hover { color: var(--text); }
.stt.lbt th.tm { text-align: left; padding-left: 34px; }
.stt.lbt th.lbx, .stt.lbt td.lbx { min-width: 64px; padding-right: 24px; }
.stt.lbt th.lbn, .stt.lbt td.lbn { min-width: 40px; padding-right: 18px; }
.lbseg { display: flex; flex-wrap: nowrap; } .lbseg button { flex: 0 0 auto; }
@media (max-width: 760px) {
  .stt.lbt th.tm { padding-left: 33px; }
  .twrap .stt.lbt th.tm { position: static; background: inherit; }
  .twrap .stt.lbt thead tr { background: var(--head); }
  .stt.lbt th.lbx, .stt.lbt td.lbx { min-width: 52px; padding-right: 14px; }
  .stt.lbt th.lbn, .stt.lbt td.lbn { min-width: 32px; padding-right: 12px; }
}

/* owner, 2026-10-31: "Rank 9 of 20 should use one line", on phones too */
.xgf.hl.tvl td:last-child, .xgf.hl.tvl .pl { white-space: nowrap; }
.xgf.hl.tvl th { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 760px) {
  .xgf.hl.tvl td, .xgf.hl.tvl th { padding-left: 5px; padding-right: 5px; } .xgf.hl.tvl td:first-child { width: auto; padding-left: 12px; }
  .xgf.hl.tvl td:last-child, .xgf.hl.tvl th:last-child { padding-right: 10px; }
  .xgf.hl.tvl th { letter-spacing: .04em; } .xgf.hl.tvl th:nth-child(2), .xgf.hl.tvl th:nth-child(3) { width: 60px; } .xgf.hl.tvl th:last-child { width: 80px; } .xgf.hl.tvl .pl { margin-left: 0; padding: 3px 5px; font-size: 12px; }
}

/* owner, 2026-10-31 ("Added to favourites popup must be wider, with fewer lines and a more distinctive look"): what
   happened on top, the match on one line under it, with the crests; the star (or pin) in its own lit square */
#toastRoot .t-act { width: min(460px, calc(100vw - 24px)); display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 44px 14px 12px; }
#toastRoot .t-act .t-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: #111; transform: skewX(-8deg); }
#toastRoot .t-act .t-ic .i { width: 18px; height: 18px; transform: skewX(8deg); }
#toastRoot .t-act.t-un .t-ic { background: rgba(255,255,255,.08); color: var(--muted); }
#toastRoot .t-act .t-tx { display: grid; gap: 5px; min-width: 0; }
#toastRoot .t-act .t-hd { font: 700 11px/1.2 "Space Grotesk", var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
#toastRoot .t-act.t-un .t-hd { color: var(--muted); }
#toastRoot .t-act .t-mt { display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 14px/1.2 var(--ui); color: var(--text); white-space: nowrap; }
#toastRoot .t-act .t-mt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#toastRoot .t-act .t-mt i { font-style: normal; color: var(--muted); flex: none; }
#toastRoot .t-act .t-mt img.crest { width: 18px; height: 18px; flex: none; }

/* owner, 2026-10-31: the match bar's score in the exact middle (the same room on both sides); the minute in a curved
   tab hanging under its middle, with the half-time score once the second half is on */
.dmini .dmi > b { text-align: center; }
.dmini .dmt { position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 3px 14px 5px;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); white-space: nowrap; }
.dmini .dmt::before, .dmini .dmt::after { content: ""; position: absolute; top: -1px; width: 10px; height: 10px; background: transparent; pointer-events: none; }
.dmini .dmt::before { right: 100%; border-top-right-radius: 10px; box-shadow: 4px -4px 0 0 color-mix(in srgb, var(--bg) 92%, transparent); }
.dmini .dmt::after { left: 100%; border-top-left-radius: 10px; box-shadow: -4px -4px 0 0 color-mix(in srgb, var(--bg) 92%, transparent); }
.dmini .dmh { font: 700 10.5px var(--mono); color: var(--muted); }

/* owner, 2026-10-31: favourite players, a small ☆ by a player's name (lineups, squads, player cards, Favourites) */
.pfs { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--faint); cursor: pointer; vertical-align: middle; }
.pfs .i { width: 13px; height: 13px; }
.pfs:hover { color: var(--text); background: rgba(255,255,255,.06); }
.pfs.on { color: var(--accent); } .pfs.on .i { fill: currentColor; }
.lu li .pfs { margin-left: auto; } .lu li .rt ~ .pfs { margin-left: 4px; }
.plc-tm .pfs { margin-left: auto; }
/* the away side mirrored: # flag name on the left side, name flag # on the right */
.lu > div + div { text-align: right; }
.lu > div + div li { flex-direction: row-reverse; }
.lu > div + div li b { text-align: left; }
.lu > div + div li .ga + .rt, .lu > div + div li .pnm + .rt { margin-left: 0; }
.lu > div + div li .pfs { margin-left: 0; margin-right: auto; } .lu > div + div li .rt ~ .pfs { margin-right: 4px; }
.lu > div + div li .rt:last-child { margin-right: auto; }
.lu > div + div h4 .rt { margin: 0 8px 0 0; }
.lu > div + div h4 { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; }
.lu .pnm.plink { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: inherit; }
.lu .pnm.plink:hover { color: var(--accent); }
.pitch .pgo { cursor: pointer; } .pitch .pgo:hover .pt { fill: var(--accent); }
.favpl .fpl-l { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 12px; }
.favpl .fpl { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.favpl .fpl .plink { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--text); font: 600 13px var(--ui); cursor: pointer; }
.favpl .fpl .plink:hover b { color: var(--accent); }
.favpl .fpl img.crest { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .lu > div { padding-left: 10px; padding-right: 10px; }
  .lu li { gap: 4px; } .lu li b { width: 19px; }
  .lu li .pfs { width: 16px; height: 20px; border-radius: 4px; } .lu li .pfs .i { width: 11px; height: 11px; }
  .lu li .rt ~ .pfs { margin-left: 2px; } .lu > div + div li .rt ~ .pfs { margin-right: 2px; }
}

/* owner, 2026-10-31 (a "CSS round tab" sample): the minute tab is part of the bar: the same glass, no line between
   them, lower, its top corners flaring out into the bar and its bottom corners round */
.mpage.mmini .dmini, .dmini.dpm .dmi { background: color-mix(in srgb, var(--bg) 97%, transparent); }
.dmini .dmt { top: 100%; padding: 1px 12px 3px; gap: 7px; border: 0; border-radius: 0 0 11px 11px; background: color-mix(in srgb, var(--bg) 97%, transparent);
  box-shadow: 0 1px 0 var(--line), 0 6px 12px -8px rgba(0,0,0,.6); }
.dmini .dmt::before, .dmini .dmt::after { top: 0; width: 12px; height: 12px; }
.dmini .dmt::before { border-top-right-radius: 12px; box-shadow: 5px -5px 0 0 color-mix(in srgb, var(--bg) 97%, transparent); }
.dmini .dmt::after { border-top-left-radius: 12px; box-shadow: -5px -5px 0 0 color-mix(in srgb, var(--bg) 97%, transparent); }
.dmini .dmc { font-size: 10.5px; } .dmini .dmh { font-size: 10px; }
/* desktop: the card in the right column keeps the match bar at the column's top once its score is out of sight */
.dmini.dpm { display: block; position: sticky; top: 0; z-index: 6; height: 0; }
.dmini.dpm .dmi { max-width: none; border-bottom: 1px solid var(--line); border-radius: 0 0 10px 10px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .15s ease-out, transform .15s ease-out; }
.dmini.dpm.on .dmi { opacity: 1; transform: none; pointer-events: auto; }
/* owner's screenshot, 2026-10-31: in the desktop card the away name took the card's centred text, far from its crest */
.dmini .n.a { text-align: left; } .dmini .n.h { text-align: right; }

/* owner, 2026-10-31 (trends' record): "clear distinctive colors to give the full picture at first sight": ✓ Hit on
   green, ✗ Miss on red (the word and the mark carry it too, never the colour alone); ● Live in the live colour; the
   countdown quiet; the score in the feed's own skewed boxes */
.aro.hit { color: #062b14; background: #2fd36b; }
.aro.miss { color: #fff; background: #e5484d; }
.aro.pend { color: var(--muted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }
.aro.pend.lv { color: var(--live); box-shadow: inset 0 0 0 1px var(--live); }
.arx { gap: 6px; }
.trw { display: inline-flex; align-items: center; gap: 8px; }
.trw small { font: 400 10px var(--mono); color: var(--faint); }
.trsc { display: inline-flex; gap: 4px; }
.trsc b { min-width: 22px; padding: 2px 5px 1px; border-radius: 3px; transform: skewX(-11deg); background: rgba(255,255,255,.08); text-align: center; font: 600 13px/1.15 Inter, sans-serif; color: #f7f7f8; }
@media (max-width: 600px) { .trw { flex-direction: column; align-items: flex-end; gap: 3px; } }
/* owner, 2026-10-31: "so soft, so Higgsfield unlike: more tense red and green, darker" */
.aro.hit { color: #fff; background: #00953a; box-shadow: 0 0 12px -3px rgba(0,190,75,.7); }
.aro.miss { color: #fff; background: #d4002e; box-shadow: 0 0 12px -3px rgba(255,0,60,.7); }
/* owner, 2026-10-31: no outlines: Live in the site's solid lime, to come (and settling, void) in its dark grey */
.aro.pend { color: var(--muted); background: color-mix(in srgb, var(--text) 9%, transparent); box-shadow: none; }
.aro.pend.lv { color: #0f1113; background: var(--accent); box-shadow: 0 0 12px -3px color-mix(in srgb, var(--accent) 70%, transparent); }
/* owner, 2026-10-31 ("yes try them bigger"): on wider screens the result pill as tall as the score boxes under it */
@media (min-width: 601px) { .arl .aro { padding: 2px 11px 1px; font-size: 12.5px; min-width: 52px; text-align: center; } .arl .trsc b { padding: 2px 6px 1px; font-size: 14px; min-width: 24px; } }
.ard .subt.trq { margin: 0 !important; flex: none; }   /* owner, 2026-10-31: Yesterday · Today in the record's date line */
.ard.trd { flex-basis: 100%; }

/* owner, 2026-10-31: the record's one picker (days, periods, calendar); its day list; "still to be decided" */
.ard.trd { justify-content: flex-start; flex-wrap: wrap; }
.ard.trd .subt.trq { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .ard.trd .subt.trq::-webkit-scrollbar { display: none; }
.ard.trd .subt.trq button { flex: none; white-space: nowrap; }
.trmore { margin: 10px 14px 4px; font-size: 12.5px; color: var(--muted); }
.trmore .lnk { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.trmore .lnk .i { width: 12px; height: 12px; }
.trdays .arr { grid-template-columns: 110px minmax(0, 1fr) auto; }
/* owner, 2026-10-31: "reduce by 1px font size of Hit and Miss pills" */
@media (min-width: 601px) { .arl .aro { font-size: 11.5px; } }
.arl .aro { font-size: 10px; }
@media (min-width: 601px) { .arl .aro { font-size: 11.5px; } }
.aro.pend.rate { color: var(--text); }
/* owner, 2026-10-31: Hit on the alerts' orange, Miss on their deep red, in the alert pills' own type (Space Grotesk 700
   10px, white); the other pills of the column take the same type */
.arl .aro, .arl .aro.hit, .arl .aro.miss { font: 700 10px/1.3 "Space Grotesk", sans-serif; letter-spacing: .04em; }
@media (min-width: 601px) { .arl .aro { font-size: 10px; padding: 3px 9px 2px; } }
.aro.hit { color: #fff; background: #ff4f03; box-shadow: 0 0 10px -2px rgba(255,79,3,.55); }
.aro.miss { color: #fff; background: #b91c1c; box-shadow: 0 0 8px rgba(185,28,28,.6); }

/* owner, 2026-10-31: each trend row starts with flag · country · league */
.trwh { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.trwh .flg { width: 14px; height: 14px; flex: none; margin: 0; }
.trwh span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arm .trwh { font-size: 11.5px; color: var(--muted); }
.trh .trl.trwh { flex: 1; }
/* the strength slider, the places button, the count (our own controls, D-C067) */
.trfb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; width: 100%; padding: 2px 2px 4px; }
.trsl { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 220px; max-width: 420px; padding: 6px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05); outline: none; }
.trsl:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.trsl-l { font: 600 12px Inter, sans-serif; color: var(--muted); }
.trsl-t { position: relative; flex: 1; height: 26px; cursor: pointer; touch-action: none; }
.trsl-t::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); }
.trsl-f { position: absolute; left: 0; top: 11px; height: 4px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px -2px var(--accent); }
.trsl-d { position: absolute; top: 10px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: rgba(255,255,255,.25); }
.trsl-d.on { background: transparent; }
.trsl-k { position: absolute; top: 4px; width: 18px; height: 18px; margin-left: -9px; border-radius: 6px; transform: skewX(-11deg); background: var(--accent); box-shadow: 0 0 0 3px rgba(209,254,23,.18), 0 2px 8px rgba(0,0,0,.5); transition: left .08s ease-out; }
.trsl-v { min-width: 46px; padding: 3px 8px 2px; border-radius: 4px; transform: skewX(-11deg); background: var(--accent); color: #0f1113; text-align: center; font: 700 12px/1.2 "Space Grotesk", sans-serif; }
.trpl { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.05); color: var(--text); font: 500 12.5px Inter, sans-serif; cursor: pointer; }
.trpl .i { width: 15px; height: 15px; } .trpl .chev { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s; }
.trpl[aria-expanded="true"] { border-color: rgba(209,254,23,.45); } .trpl[aria-expanded="true"] .chev { transform: rotate(180deg); }
.trcnt { font: 500 12px Inter, sans-serif; color: var(--muted); } .trcnt b { color: var(--text); font-weight: 700; }
/* the places panel */
.trpn { margin: 10px 14px 6px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.trpn-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.trpn-s { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; height: 38px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,.06); }
.trpn-s .i { width: 15px; height: 15px; color: var(--muted); flex: none; }
.trpn-s input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--text); font: 500 13px Inter, sans-serif; }
.trpn-s input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.trpn-my, .trpn-x { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 10px; border: 0; background: rgba(255,255,255,.06); color: var(--muted); font: 500 12.5px Inter, sans-serif; cursor: pointer; }
.trpn-my .i { width: 14px; height: 14px; } .trpn-my[aria-pressed="true"] { color: #0f1113; background: var(--accent); } .trpn-my[aria-pressed="true"] .i { fill: currentColor; }
.trpn-x:hover, .trpn-my:hover { color: var(--text); }
.trpn-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
.trpc { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-content: start; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid transparent; }
.trpc.on { border-color: rgba(209,254,23,.5); background: rgba(209,254,23,.07); } .trpc.part { border-color: rgba(209,254,23,.25); }
.trpc-b { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 4px 9px 10px; border: 0; background: none; color: var(--text); font: 500 13px Inter, sans-serif; text-align: left; cursor: pointer; }
.trpc-b .flg { width: 16px; height: 16px; margin: 0; flex: none; } .trpc-b span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trpc em, .trpc-l em { font: 700 11px var(--mono); font-style: normal; color: var(--muted); } .trpc.on .trpc-b em { color: var(--accent); }
.trpc-x { display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; }
.trpc-x .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s; } .trpc-x[aria-expanded="true"] .chev { transform: rotate(180deg); }
.trpc-l { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; padding: 0 6px 8px; }
.trpc-l button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 500 12.5px Inter, sans-serif; text-align: left; cursor: pointer; }
.trpc-l button[aria-pressed="true"] { color: var(--text); background: rgba(209,254,23,.1); } .trpc-l button[aria-pressed="true"] em { color: var(--accent); }
/* the chosen places, each removable */
.trchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 2px; }
.trchips button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(209,254,23,.4); background: rgba(209,254,23,.08); color: var(--text); font: 500 12px Inter, sans-serif; cursor: pointer; }
.trchips .flg { width: 14px; height: 14px; margin: 0; } .trchips .i { width: 11px; height: 11px; color: var(--muted); } .trchips button.on .i:first-child { color: var(--accent); fill: currentColor; }
.trchips button.clr { border-color: transparent; background: none; color: var(--muted); }
@media (max-width: 600px) { .trsl { max-width: none; flex-basis: 100%; } .trpn-l { grid-template-columns: 1fr; max-height: 50vh; } .trpn { margin: 8px 10px; } }
/* the market chips on one line, swiped (owner: never two lines) */
.subt.trmk { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .subt.trmk::-webkit-scrollbar { display: none; } .subt.trmk button { flex: none; }

/* owner, 2026-10-31 ("you must set one logic sitewide"): crest to name is 7 px everywhere, the main feed's gap, on
   either side. A small crest keeps 7 px on its name's side (img.crest.rc / .rc.pr); a flex box that spaces its items
   with a gap of its own takes that gap off the crest's margin, so the two never add up */
.wkm img.crest.rc, .trm img.crest.rc, .plc-tm img.crest.rc, #toastRoot .t-mt img.crest.rc, #toastRoot .t-m img.crest { margin: 0 1px 0 0; }
.wkm img.crest.rc.pr, .trm img.crest.rc.pr, #toastRoot .t-mt img.crest.rc.pr { margin: 0 0 0 1px; }
#toastRoot .t-h, #toastRoot .t-a { gap: 7px; }
.stt.splr td.plc img.crest { margin-right: 7px; }
.dmini .dmi { column-gap: 7px; }

/* owner, 2026-10-31: a day of the record is a row to open: a slow light sweeps across it (as the landing header's,
   slower), so it reads as clickable */
.trdays .arr { position: relative; overflow: hidden; }
.trdays .arr::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 22%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(209,254,23,.07), transparent); animation: tr-sweep 4.2s ease-in-out infinite; }
.trdays .arr:nth-child(2)::after { animation-delay: .7s; } .trdays .arr:nth-child(3)::after { animation-delay: 1.4s; } .trdays .arr:nth-child(4n)::after { animation-delay: 2.1s; }
.trdays .arr:hover { background: rgba(255,255,255,.04); } .trdays .arr .arx::after { content: "›"; margin-left: 10px; color: var(--muted); font: 600 18px/1 Inter, sans-serif; }
.trdays .arx { flex-direction: row; align-items: center; }
@keyframes tr-sweep { 0% { left: -30%; } 55%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .trdays .arr::after { animation: none; display: none; } }

/* the teams with their crests, and the reason in a soft blue */
.arm .trmt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arm .trmt i { font-style: normal; font-weight: 500; color: var(--faint); }
.arm .trmt img.crest.rc { width: 16px; height: 16px; }
.arm small.trwy { color: #8fc3f0; } .arm small.trwy b { color: #b9dcff; font-weight: 600; }

/* the places button at the right of the first row; the slider the whole next row, its count inside */
.trpl { margin-left: auto; height: 40px; }
.trfb { flex-basis: 100%; }
.trsl { flex: 1 1 100%; max-width: none; }
.trsl-t { margin: 0 10px; }
.trsl .trcnt { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
@media (max-width: 600px) { .trpl { margin-left: 0; } .trsl { gap: 8px; } .trsl-l { display: none; } }
.subt.trmk { flex: 0 1 auto; min-width: 0; } .trpl { flex: none; }
/* tabs, markets and places on one row (the markets give way, swiped); phones: as many rows as they need */
.trrow { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.trrow .subt { margin: 6px 0 !important; } .trrow .trtab { flex: none; }
@media (max-width: 600px) { .trrow { flex-wrap: wrap; gap: 0 8px; } .trrow .trmk { flex-basis: 100%; } }
@media (min-width: 601px) { .trrow .trmk { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); } }
.trdays .arr::after { background: linear-gradient(90deg, transparent, rgba(209,254,23,.11), transparent); }
/* owner, 2026-10-31: the slider row starts and ends exactly under the row above (fx.css's .subt margin outranked ours) */
#vbar .trrow .subt { margin: 6px 0 !important; }
#vbar .trfb { padding: 2px 0 4px; }
@media (max-width: 600px) { #vbar .trrow .trmk { max-width: 100% !important; width: 100% !important; } }

/* owner, 2026-10-31: kick-off windows (chips with their counts) and the order, one row under the slider; soonest
   first lists the cards under small kick-off headings */
#vbar .trtm { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 0 0 4px; }
#vbar .trtm .subt { margin: 0 !important; }
#vbar .trtc { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } #vbar .trtc::-webkit-scrollbar { display: none; }
#vbar .trtc button, #vbar .trord button { flex: none; white-space: nowrap; }
#vbar .trtc button em { margin-left: 6px; font: 700 10.5px var(--mono); font-style: normal; color: var(--muted); }
#vbar .trtc button[aria-pressed="true"] em { color: var(--accent); }
#vbar .trtc button.none { opacity: .4; }
#vbar .trord { flex: none; margin-left: auto !important; }
.trgh { display: flex; align-items: center; gap: 8px; padding: 12px 16px 2px; }
.trgh b { font: 700 11px "Space Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.trgh em { font: 700 10.5px var(--mono); font-style: normal; color: var(--muted); }
@media (max-width: 600px) { #vbar .trtm { flex-wrap: wrap; gap: 6px; } #vbar .trtc { flex-basis: 100%; max-width: 100% !important; width: 100% !important; } #vbar .trord { margin-left: 0 !important; } }
#vbar .trtc, #vbar .trrow .trmk { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
#vbar .trtc.end, #vbar .trrow .trmk.end { -webkit-mask-image: none; mask-image: none; }

/* owner, 2026-10-31: the trend's market as a skewed pill (OVER 2.5, BTTS-YES, OVER 9.5 CORNERS), in the reason's blue */
.trmp { display: inline-block; padding: 2px 7px 1px; border-radius: 3px; transform: skewX(-11deg); background: rgba(143,195,240,.16); box-shadow: inset 0 0 0 1px rgba(143,195,240,.22);
  color: #cfe6ff; font: 700 10px/1.3 "Space Grotesk", sans-serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; vertical-align: 1px; }
.arm small.trwy .trmp { margin-right: 4px; }
.trk .trmp { font-size: 11.5px; padding: 3px 9px 2px; color: #dcedff; }

/* owner, 2026-10-31: the match's trend, under the score on every tab: a slim strip, opened for the explanation */
.dtr { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 10px 12px 0; padding: 7px 10px; border: 1px solid rgba(143,195,240,.22); border-radius: 10px;
  background: linear-gradient(90deg, rgba(143,195,240,.10), rgba(143,195,240,.03)); color: var(--text); cursor: pointer; text-align: left; position: relative; overflow: hidden; }
.dtr::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 20%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(143,195,240,.12), transparent); animation: tr-sweep 5s ease-in-out infinite; }
.dtr:hover { border-color: rgba(143,195,240,.4); }
.dtr-k { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 700 10.5px "Space Grotesk", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8fc3f0; }
.dtr-k .i { width: 15px; height: 15px; }
.dtr-p { display: flex; flex-wrap: wrap; gap: 6px 10px; flex: 1; min-width: 0; }
.dtr-i { display: inline-flex; align-items: center; gap: 5px; } .dtr-i em { font: 700 11px var(--mono); font-style: normal; color: #cfe6ff; }
.dtr-i i { font-style: normal; font-weight: 800; font-size: 11px; } .dtr-i i.ok { color: #ff4f03; } .dtr-i i.no { color: #e5484d; }
.dtr .aro { flex: none; font: 700 10px/1.3 "Space Grotesk", sans-serif; letter-spacing: .04em; padding: 2px 8px 1px; }
.dtr .chev { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; color: var(--muted); transition: transform .15s; }
.dtr[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dtr-x { margin: 6px 12px 0; padding: 4px 12px 10px; border-radius: 10px; background: rgba(143,195,240,.05); border: 1px solid rgba(143,195,240,.12); }
.dtr-o { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); } .dtr-o:last-of-type { border-bottom: 0; }
.dtr-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .dtr-h > b:not(.aro) { font: 700 12px var(--mono); color: #cfe6ff; } .dtr-h .aro { margin-left: auto; }
.dtr-o p { margin: 2px 0 6px; font-size: 12.5px; line-height: 1.45; color: #b9dcff; }
.dtr-o small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.dtr-n { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); } .dtr-n a { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 600; text-decoration: none; } .dtr-n a .i { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .dtr::after { display: none; } }
/* the sweep only before kick-off: once the match is on, nothing moves beside the score but the minute */
.dtr:not(.pre)::after { display: none; }

/* owner, 2026-10-31 ("this top row seems bulky, mixed and messy"): one text, flag · country · league (opens the
   competition), then square icon buttons of one size: Pin, ☆ Favourite (lit when added), ⤢ Match page, × */
.dtop { gap: 6px; }
.dtop .comp { display: inline-flex; align-items: center; gap: 7px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; text-align: left;
  font: 600 12.5px Inter, sans-serif; letter-spacing: 0; text-transform: none; }
.dtop .comp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtop .comp .flg { width: 16px; height: 16px; flex: none; margin: 0; }
.dtop button.comp:hover { color: var(--text); }
.dtop .btn:not(.dback) { flex: none; width: 34px; height: 34px; padding: 0 !important; justify-content: center; }
.dtop .btn:not(.dback) .bl { display: none; }
.dtop .btn .i { width: 16px; height: 16px; } .dtop #dPage svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dtop #dFollow[aria-pressed="true"] { color: var(--accent); border-color: rgba(209,254,23,.45); background: rgba(209,254,23,.08); }
.dtop #dFollow[aria-pressed="true"] .i { fill: currentColor; }
.dtop #dPin[aria-pressed="true"] { color: var(--accent); border-color: rgba(209,254,23,.45); }

/* owner, 2026-10-31: swiping a followed match: "☆ Remove" on dark grey (lime "★ Follow" only to add) */
@media (max-width: 760px) {
  .row.stk.swun[data-sw="r"]::before, .gl.gs.swun[data-sw="r"]::before { content: "☆ Unfollow"; }
  .row.stk.swgo.swun[data-sw="r"]::before, .gl.gs.swgo.swun[data-sw="r"]::before { background: #3a3d42; color: #fff; }
  /* the one-time hint: the row slides right, shows Follow, slides back */
  .row.stk.swhint { position: relative; z-index: 2; background: var(--panel); animation: sw-hint 1.9s cubic-bezier(.45,0,.25,1) both; }
  @keyframes sw-hint { 0% { transform: none; } 30%, 62% { transform: translateX(84px); } 100% { transform: none; } }
}
/* owner, 2026-10-31 (approved): phones: the page bodies full width, no frame (the card colour stays); desktop keeps its frames */
@media (max-width: 760px) {
  html body .grid { padding-left: 0 !important; padding-right: 0 !important; }
  .fx-in .grid > .panel, .fx-in .drawer.mpage { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .fx-in .grid > .panel::before, .fx-in .grid > .panel::after { display: none !important; }
}
/* owner, 2026-10-31: the W/D/L tooltip's heading in the result's colour */
.nxtip .nx-k.rk-w { color: #d1fe17; } .nxtip .nx-k.rk-d { color: #ffbe4c; } .nxtip .nx-k.rk-l { color: #ff5c8f; }
.fdots i { cursor: help; } .stt thead th.wdl { cursor: help; }
/* owner, 2026-10-31: the tooltips a little wider, fewer lines */
.nxtip { min-width: 240px; max-width: min(340px, calc(100vw - 16px)); }
.nxtip .nx-k { display: flex; align-items: baseline; gap: 10px; }
.nxtip .nx-d { margin-left: auto; font: 700 11px var(--mono); letter-spacing: 0; text-transform: none; color: var(--muted); }
.nxtip .nx-d b { color: var(--text); }

/* owner, 2026-10-31: the live score in Live standings: the feed's two skewed boxes, the team's own goals first, coloured
   by how it stands (winning lime, drawing grey, losing pink); the live row lightly lit; a tooltip says who and what */
.stt .lvs { display: inline-flex; gap: 3px; margin-left: 9px; vertical-align: 1px; cursor: help; outline: none; font: inherit; }
.stt .lvs b { min-width: 17px; padding: 1px 4px 0; border-radius: 3px; transform: skewX(-11deg); text-align: center; font: 700 11.5px/1.35 "Space Mono", monospace; }
.stt .lvs.w b { background: #d1fe17; color: #111; box-shadow: 0 0 10px -3px rgba(209,254,23,.6); }
.stt .lvs.d b { background: rgba(255,255,255,.14); color: #f2f2f2; }
.stt .lvs.l b { background: #ff5c8f; color: #fff; box-shadow: 0 0 10px -3px rgba(255,92,143,.6); }
.stt .lvs:focus-visible b { box-shadow: 0 0 0 2px var(--accent); }
.stt tr:has(.lvs) td { background: rgba(209,254,23,.035); }
.nxtip .nx-k.rk-live { color: var(--live); }
/* owner, 2026-10-31 ("width based on the content, all in one row"): each tooltip as wide as its longest line, the match
   on one line, never wider than the screen */
.nxtip { width: max-content; min-width: 170px; max-width: calc(100vw - 16px); }
.nxtip .nx-m { white-space: nowrap; }
@media (max-width: 420px) { .nxtip .nx-m { white-space: normal; } }
/* a competition's table views on one line, swiped (owner: never two lines) */
.subt.tbsub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: calc(100% - 24px); } .subt.tbsub::-webkit-scrollbar { display: none; } .subt.tbsub button { flex: none; white-space: nowrap; }
/* owner, 2026-10-31: one skewed box for the whole live score, not one per side */
.stt .lvs { gap: 0; padding: 1px 7px 0; border-radius: 3px; transform: skewX(-11deg); font: 700 11.5px/1.35 "Space Mono", monospace; }
.stt .lvs b, .stt .lvs.w b, .stt .lvs.d b, .stt .lvs.l b { min-width: 0; padding: 0; background: none !important; box-shadow: none !important; transform: none; color: inherit; font: inherit; }
.stt .lvs i { font-style: normal; margin: 0 2px; opacity: .7; }
.stt .lvs.w { background: #d1fe17; color: #111; box-shadow: 0 0 10px -3px rgba(209,254,23,.6); }
.stt .lvs.d { background: rgba(255,255,255,.14); color: #f2f2f2; }
.stt .lvs.l { background: #ff5c8f; color: #fff; box-shadow: 0 0 10px -3px rgba(255,92,143,.6); }
.stt .lvs:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

/* owner, 2026-10-31 (doctrine): a feed league heading is ★ flag Country · League 📌. The star (favourite league) stands
   exactly over the match stars below it; the pin (pinned league) follows the league's name; the country is plain text */
.group h3 .gfv { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--faint); cursor: pointer; }
.group h3 .gfv .i { width: 15px; height: 15px; }
.group h3 .gfv:hover, .group h3 .gfv:focus-visible { color: #d1fe17; background: rgba(209,254,23,.08); }
.group h3 .gfv.on { color: #d1fe17; } .group h3 .gfv.on .i { fill: currentColor; }
.group h3 .gpb { color: var(--faint); } .group h3 .gpb.on { color: #d1fe17; }
.group h3 .gpb.on .i { fill: currentColor; fill-opacity: .25; }
.group h3 span.co { color: inherit; }
/* the left column: a pinned competition's pin always shows */
.nv-x .pnb.on, .nv-l .pnb.on { opacity: 1; }
.group h3 .gfv { margin-left: -14px; }           /* over the match stars (measured: the rows' star is 14 px further left) */
@media (max-width: 760px) { .group h3 .gfv { margin-left: -8px; } }
/* owner, 2026-10-31: the lit "Favourite leagues only" keeps its dark text on hover (it turned white on lime) */
.trpn-my[aria-pressed="true"]:hover { color: #0f1113; filter: brightness(1.06); }

/* owner, 2026-10-31: a country's page: a card per competition (★ name 📌 · Standings Results Fixtures; Recent, Upcoming) */
.cyg { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; padding: 12px 14px; }
.cyc { border-radius: 12px; background: color-mix(in srgb, var(--text) 3.5%, transparent); border: 1px solid rgba(255,255,255,.05); overflow: hidden; }
.cyc-h { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.cyc-h .gfv, .cyc-h .gpb { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--faint); cursor: pointer; }
.cyc-h .gfv .i { width: 15px; height: 15px; } .cyc-h .gpb .i { width: 13px; height: 13px; }
.cyc-h .gfv.on, .cyc-h .gpb.on { color: #d1fe17; } .cyc-h .gfv.on .i { fill: currentColor; }
.cyc-h .gfv:hover, .cyc-h .gpb:hover { color: #d1fe17; background: rgba(209,254,23,.08); }
.cyn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13.5px "Space Grotesk", sans-serif; color: var(--text); text-decoration: none; }
.cyn:hover { color: var(--accent); } .cyn .cup { margin-left: 6px; }
.cy-ks { display: flex; gap: 2px; margin-left: auto; flex: none; }
.cy-k { padding: 4px 7px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 500 11.5px Inter, sans-serif; cursor: pointer; }
.cy-k:hover { color: var(--text); background: rgba(255,255,255,.06); }
.cyb { padding: 4px 0 6px; } .cyb.sk { padding: 6px 0; }
.cy-l { padding: 6px 12px 2px; font: 700 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.cyr { display: grid; grid-template-columns: 40px minmax(0, 1fr) 46px minmax(0, 1fr); align-items: center; gap: 0; width: 100%; padding: 5px 12px; border: 0; background: none; color: var(--text); cursor: pointer; font: 500 12.5px Inter, sans-serif; text-align: left; }
.cyr:hover { background: rgba(255,255,255,.04); }
.cy-d { font: 700 10.5px var(--mono); color: var(--faint); }
.cy-h { display: flex; justify-content: flex-end; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; }
.cy-a { display: flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.cy-h, .cy-a { gap: 0; } .cyr img.crest.rc { width: 15px; height: 15px; flex: none; }
.cy-s { text-align: center; } .cy-s b { display: inline-block; min-width: 34px; padding: 1px 5px 0; border-radius: 3px; transform: skewX(-11deg); background: rgba(255,255,255,.08); font: 700 12px/1.4 "Space Mono", monospace; }
.cy-s b.cy-t { background: none; color: var(--muted); font-weight: 700; }
.cyr.live .cy-s b { background: #d1fe17; color: #111; } .cyr .cy-lv { grid-column: 1; grid-row: 1; font: 700 10.5px var(--mono); color: var(--live); }
.cyr.live .cy-d { display: none; }
.cyq { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 14px; }
.cyq a { padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--muted); font: 500 12px Inter, sans-serif; text-decoration: none; }
.cyq a:hover { color: var(--text); }
.nv-cty .nv-cyh { display: flex; align-items: center; gap: 8px; cursor: default; } .nv-cty .nv-cyh .flg { width: 16px; height: 16px; margin: 0; }
@media (max-width: 760px) { .cyg { grid-template-columns: 1fr; padding: 10px; } .cy-ks .cy-k { padding: 4px 5px; font-size: 11px; } }
.cyn { flex: 0 1 auto; } .cy-k { padding: 4px 5px; font-size: 11px; } .cyc-h { gap: 4px; }
/* owner, 2026-10-31: the alert dot after the team's name, not before its crest */
.row.stk .tl .xdot { margin-right: 0; margin-left: 7px; }
/* owner, 2026-10-31: country and league closer; only the league's name is a link in the feeds */
.group h3 .cn { gap: 5px; } .group h3 .sep { margin: 0 -1px; }
.group h3 .cn > .co { cursor: default; }
.group h3 a.cm[data-comp] { cursor: pointer; }
.group h3 .cn { gap: 3px; } .group h3 .sep { margin: 0; }
/* owner, 2026-10-31 (a finished match's bar read "FT HT 0-1" as one grey run): the status first and brighter, then a
   dot, then the half-time score quieter */
.dmini .dmt { gap: 0; }
.dmini .dmc.brk { color: var(--text); font-weight: 700; }
.dmini .dmh { color: var(--faint); font-weight: 500; }
.dmini .dmh::before { content: "·"; margin: 0 7px; color: var(--faint); }
/* owner, 2026-10-31: the back button and the breadcrumb no longer look alike: the back is a boxed arrow, the
   breadcrumb's steps are divided by a quiet slash */
.crumb #backBtn { width: 30px; height: 30px; margin-right: 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: var(--text); display: inline-grid; place-items: center; }
.crumb #backBtn .i { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crumb #backBtn:hover { border-color: rgba(209,254,23,.45); color: var(--accent); }
.crumb .csep { color: var(--faint); opacity: .7; font-weight: 400; }
/* owner, 2026-10-31: the chevron back between the steps (the back button is a boxed arrow now); the current step's
   flag spaced from its name, as the linked steps */
.crumb .cur { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text); }
.crumb .cur .flg, .crumb .cur .i { width: 14px; height: 14px; margin: 0; }
/* owner, 2026-10-31 ("left column ... some padding at its bottom to achieve geometry perfection"): the last block
   keeps the same 8px from the panel's edge at the bottom as on its sides */
#p-nav { padding-bottom: 8px; }

/* owner, 2026-10-31 ("smaller and squeezed cards, without tooltips", against mockup 5): at least 300px a card as the
   mockup (two a row in the livescore's middle column), the team and order chips, one-line footer, a pointer on figures */
.plc-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.plc-bar .subt button .rc { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }
.plc-s[data-pt] { cursor: help; border-radius: 8px; outline: none; }
.plc-s[data-pt]:hover, .plc-s[data-pt]:focus-visible { background: color-mix(in srgb, var(--text) 5%, transparent); }
.plc-ft > * { white-space: nowrap; }
.plc-ft .plc-upd { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* owner, 2026-11-01: the match header's score, each side's number on its own skewed plate, and the minute / status on
   one too (the site's skewed pill shape; the text itself stays upright) */
.dsc2 .big b.dsg { position: relative; display: inline-block; min-width: 1.15em; padding: 7px 12px 5px; font-weight: inherit; text-align: center; z-index: 0; }
.dsc2 .big b.dsg::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; transform: skewX(-11deg);
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.06); }
.dsc2 .dclk { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px 3px; z-index: 0; }
.dsc2 .dclk::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px; transform: skewX(-11deg);
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.dsc2 .dclk:empty { display: none; }
.dsc2 .dclk:not(.brk)::after { background: rgba(209,254,23,.08); box-shadow: inset 0 0 0 1px rgba(209,254,23,.16); }
/* mockup 7 preview (?preview=match): the round on the competition line, the line under the teams, the referee's record */
.drd { font-style: normal; color: var(--faint); }
/* owner, 2026-11-01: the line sits above the separator, close under the teams */
.dmeta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0 14px; padding: 4px 6px 12px; border-bottom: 1px solid var(--line);
  font: 500 13px/1.4 var(--sans); color: #b9b9b9; }
.dmeta span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dmeta b { font-weight: 500; }
.dmeta small { font-size: 12px; color: var(--faint); }
.dmeta svg { width: 14px; height: 14px; flex: none; fill: none; stroke: #8a8a8a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dmeta .dms { display: none; }
.dmeta .dmg { order: 3; }
@media (max-width: 560px) { .dmeta { font-size: 12px; gap: 3px 10px; } .dmeta .dml { display: none; } .dmeta .dms { display: inline; }
  .dmeta .dmg { flex-basis: 100%; justify-content: center; } }
.pvref { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pvref div { text-align: center; padding: 10px 6px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.pvref b { display: block; font: 700 22px var(--mono); letter-spacing: -.03em; color: var(--text); }
.pvref small { display: block; font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pvref em { display: block; margin-top: 2px; font: 400 11px var(--mono); font-style: normal; color: #9a9a9a; }
.pvs em.w { color: #d1fe17; font-style: normal; } .pvs em.d { color: var(--text); font-style: normal; } .pvs em.l { color: #ff5c8f; font-style: normal; }
/* owner, 2026-11-01 (preview 7): Lineups' SUBSTITUTED PLAYERS, as the squads: the minute, then who came on (▲) and
   who went off (▼); the away side mirrored */
.lsb .sbg { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; padding: 4px 0; border-top: 1px solid var(--line); }
.lsb .sbg:first-of-type { border-top: 0; }
.lsb > div + div .sbg { grid-template-columns: minmax(0, 1fr) 40px; }
.lsb > div + div .sbm { order: 2; text-align: right; }
.lsb .sbm { font: 700 12px var(--mono); color: var(--muted); padding-top: 4px; }
.lsb ol { margin: 0; }
.lsb li.sin::before, .lsb li.sout::before { flex: none; width: 10px; font-size: 10px; }
.lsb li.sin::before { content: "▲"; color: #d1fe17; } .lsb li.sout::before { content: "▼"; color: #ff5c8f; }
.lsb li.sout { opacity: .72; }
/* preview 7: the managers' team, its crest; the missing players with number and flag as in the squads */
.mgt { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.mgt .rc { width: 18px; height: 18px; }
.pvm7 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pvm7 .mno { flex: none; width: 22px; text-align: right; color: var(--muted); font-weight: 600; font-size: 13px; }
.pvm7 .nf { flex: none; width: 16px; display: inline-flex; align-items: center; } .pvm7 .nf .flg { width: 14px; height: 14px; margin: 0; }
.pvm7 .pnm { font-weight: 700; color: var(--text); }
.pvm7 small { flex-basis: 100%; padding-left: 50px; }
/* preview 7: the line-ups' markers as words (Goalkeeper, Captain, Goal, 2 assists…), and the pitch's substitution mark */
.lu li .lut { flex: none; padding: 1px 6px; border-radius: 4px; font: 600 10px/1.4 var(--sans); font-style: normal; letter-spacing: .02em;
  color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.lu li .lut.lgl { color: var(--text); background: rgba(209,254,23,.12); box-shadow: inset 0 0 0 1px rgba(209,254,23,.3); }
/* preview 7: the substitution icon (white), on the pitch and next to names in the lists, with the minute */
.subi { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pitch .pso circle { fill: #0f1113; stroke: rgba(255,255,255,.55); stroke-width: .7; }
.pitch .pso path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lu li .lsw { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px 1px 4px; border-radius: 4px; font-style: normal;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); }
.lu li .lsw em { font: 700 10px var(--mono); font-style: normal; color: var(--muted); }
.lu li .lsw .subi { stroke: #fff; }
/* owner, 2026-11-01: the alert record's columns are fixed; a wider pill (Deep red, Scored 90+4') never moves the others */
/* only the Alert record's list (.arec): the Trends lists reuse .arl/.arr with their own columns (owner, 2026-11-01:
   the first version applied to every .arr and broke the Trends page) */
.arec .arr { grid-template-columns: 58px 76px minmax(0, 1fr) 104px; }
.arec .arr .arp { justify-self: stretch; text-align: center; white-space: nowrap; }
.arec .arr .arx { min-width: 0; width: 100%; }
.arec .arr .aro { display: block; width: 100%; min-width: 0; box-sizing: border-box; text-align: center; }
@media (max-width: 600px) { .arec .arr { grid-template-columns: 46px minmax(0, 1fr) 92px; } }
/* owner, 2026-11-01: the left column's block headers in the same type as the column's lines and the feed's competition
   headers (Inter), not Space Mono capitals; the counts the same; the feed header's "·" in Inter too */
.nv-bh { font: 600 13px/1 Inter, system-ui, sans-serif; letter-spacing: normal; text-transform: none; color: #f2f2f3; }
.nv-bh .n { font: 500 12px/1 Inter, system-ui, sans-serif; letter-spacing: normal; color: #6b6d72; }
.group h3 .sep { font-family: Inter, system-ui, sans-serif; }
/* owner, 2026-11-01: the xG Board's competition line (Cards and List) in the feed's competition-header type, Inter: the
   country grey, the competition white; the minute keeps the clock's Space Mono like the feed */
.xch .lg { font: 600 12.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: .01em; color: #a3a5ab; }
.xch .lg span { font-size: 12px; font-weight: 600; color: #f2f2f3; }
.xgt tr.mh td { font: 600 12.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: .01em; color: #a3a5ab; }
.xgt tr.mh .clk { font: 700 11px var(--mono); }
.xgt tr.mh .lgc { font-size: 12px; color: #f2f2f3; }
/* owner, 2026-11-01: the xG Board's team names in the feed's type (Inter 500): Cards 14px like the feed, List 13px
   (a tight table; names are capped at 150px) */
.xct .tn { font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.xgt td.tm { font: 500 13px/1.3 Inter, system-ui, sans-serif; }
/* owner, 2026-11-01: on the livescore page, countries, competitions and team names all 12px in the left column, the
   feed and the xG Board ("make it all 12 px in all 3 places"); the feed's team names are in fx.css */
.nv-c, .nv-l, .nv-bh { font-size: 12px; }
.group h3 .cn > .co, .group h3 .cn > .cm { font-size: 12px; }
@media (max-width: 760px) { .group h3 .cn > .co, .group h3 .cn > .cm { font-size: 12px; } }
.xch .lg, .xch .lg span { font-size: 12px; }
.xct .tn { font-size: 12px; }
.xgt td.tm { font-size: 12px; }
.xgt tr.mh td, .xgt tr.mh .lgc { font-size: 12px; }
/* owner, 2026-11-01 (D-C265): "12px are locked over phones ... sync every other page of phones around that 12 px
   default of feed". Names in lists (teams, players, managers, competitions) are Inter 12px on phones, like the feed.
   The team names that were Space Grotesk (Alert record, Trends, xG leaders) are Inter on every width */
.arm b, .arm .trmt { font-family: Inter, system-ui, sans-serif; font-weight: 600; }
.arm .trmt i { font-family: Inter, system-ui, sans-serif; }
td.plc .pn b, .stt.splr td.plc .pn b { font-family: Inter, system-ui, sans-serif; font-weight: 600; letter-spacing: normal; }
@media (max-width: 760px) {
  .arm b, .arm .trmt { font-size: 12px; }
  td.plc .pn b, .stt.splr td.plc .pn b { font-size: 12px; }
  .ev .who .nm { font-size: 12px; }
  .pnm, .lu .pnm.plink { font-size: 12px; }
  p.mgt { font-size: 12px; }
  .stt td.tm { font-size: 12px; }
  .lg-r .lg-n b, #lgRoot .lg-n b { font-size: 12px; }
  .ogrid .oc > span:first-child { font-size: 12px; }
}
/* owner, 2026-11-01 (D-C265) "fix them all": (1) My Top Leagues lines: name 12px, country 11.5px (like the Trends
   country line); (2) Trends and Alert record team names 12px like the feed; (3) times stay Space Mono, at its real
   700 (600 does not exist in the font); (4) "mono is for numbers only": section subtitles (.hsec span) and panel
   notes (.pcount: "29 live", "by first-half xG ↓") in Inter 11.5px, grey; (5) the xG Board's minute and competition
   line on one baseline, the minute 12px */
.nv-x .nm { font-size: 12px; } .nv-x .nm small { font-size: 11.5px; }
.arm b, .arm .trmt { font-size: 12px; }
.art1 { font-weight: 700; }
.hsec span { font: 400 11.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: normal; text-transform: none; color: var(--muted); }
.pcount { font: 400 11.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: normal; text-transform: none; color: var(--muted); }
.xch { align-items: baseline; }
.xch .clk { font-size: 12px; align-self: baseline; }
.xch .fl { align-self: center; }
.xch .al, .xch .pen-var { align-self: center; }
.xgt tr.mh .clk { font-size: 12px; }
/* owner, 2026-11-01 (D-C265) "based on these treat xg-alerts": "mono is for numbers only" and the 12 / 11.5 sizes on
   the Alert record page (shared components, so wherever they appear) */
.arx small { font: 400 11px/1.3 Inter, system-ui, sans-serif; letter-spacing: normal; }
p.upd { font: 400 11px/1.4 Inter, system-ui, sans-serif; letter-spacing: normal; }
.arm small { font-size: 11.5px; }
.xgf.art td:first-child { font-size: 12px; }
.arp { font-weight: 700; }
.wkc h3 { font-weight: 700; }
.wkc .wkm { font-size: 12px; }
.wkc p { font: 400 11.5px/1.4 Inter, system-ui, sans-serif; letter-spacing: normal; }
a.wkl, a.wkall { font: 600 11.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: normal; text-transform: none; }
/* owner, 2026-11-01: one canonical breadcrumb on every page and card: Inter 600 11px capitals (page crumbs, the
   competition / team / country card crumbs, the match card's) */
nav.crumbs, nav.crumbs a, nav.crumbs span, .crumbs, .crumb, .crumb a, .crumb span, .mcrumb, .mcrumb button, .mcrumb span {
  font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }
.xgc .b button { font-family: Inter, system-ui, sans-serif; letter-spacing: .03em; }
/* owner, 2026-11-01 (xG Leaders): team names 12px like the feed on every width; the league · country line in Inter
   11.5px grey like the Trends country line (was Space Mono italic capitals on a chip); This week: the same table as
   the other boards, the score in mono, both crests, "xG each" and "xG" in their own columns */
.stt.splr td.plc .pn b, .stt.lbt td.plc .pn b { font-size: 12px; }
.stt.lbt td.plc .tg { align-self: flex-start; padding: 0; border-radius: 0; transform: none; background: none;
  font: 400 11.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: normal; text-transform: none; font-style: normal; color: var(--muted); }
.stt.lbt td.plc .tg:hover { color: var(--text); }
.lbw .lbmt { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.lbw .lbmt > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lbw .lbmt em { flex: none; font: 700 12px var(--mono); font-style: normal; color: var(--text); }
.lbw .lbmt img.crest.rc { flex: none; width: 16px; height: 16px; }
.lbw th.lbs, .lbw td.lbs { text-align: right; white-space: nowrap; }
.lbw td.lbs { font: 400 12px var(--mono); color: var(--muted); }
.lbw tbody tr { cursor: pointer; }
.lbw .pw { gap: 0; }
.lbw td.plc { width: 100%; max-width: 0; }      /* the match cell takes what is left; long names end in "…" */
.lbw .pw, .lbw .pn { min-width: 0; }
@media (max-width: 600px) { .lbw th.lbs, .lbw td.lbs { padding-left: 4px; padding-right: 4px; } .lbw td.lbs { font-size: 11px; } }
/* owner, 2026-11-01: section subtitles start with a capital ("Goals…"); "xG" stays "xG" */
.hsec > span:not(.xg):not(.xl)::first-letter { text-transform: uppercase; }
/* owner, 2026-11-01: keeper names (xG Leaders) and the league Players table's names open their player page */
td.plc .pn b.lbpl { cursor: pointer; } td.plc .pn b.lbpl:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* owner, 2026-11-01: team crests on the xG Board (Cards and List) */
.xct .nm { display: flex; align-items: center; min-width: 0; }
.xct .nm img.crest.rc { flex: none; width: 16px; height: 16px; margin-right: 7px; }
.xct .nm .tn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xgt td.tm img.crest.rc { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }
/* owner, 2026-11-01: an "xG" inside a section heading stays in the heading's type and place (the subtitle rules for
   .hsec span pushed it right and made it small grey Inter) */
.hsec > span.xg { margin-left: 0; font: inherit; color: inherit; letter-spacing: inherit; }
/* This week: the country's flag at the start of the league line, under the home crest */
.stt.lbw td.plc .tg { display: flex; align-items: center; gap: 0; }
.stt.lbw td.plc .tg img.flg { flex: none; width: 16px; height: 12px; margin: 0 10px 0 0; object-fit: cover; border-radius: 2px; }
/* owner, 2026-11-01: the same distance between crest and name for both teams (the crest's own 7px margin came on top
   of the line's gap on the home side only) */
.stt.lbw td.plc .lbmt img.crest.rc { margin: 0; }
.lbw .lbmt em { margin: 0 2px; }
/* owner, 2026-11-01: "enable skeleton everywhere in all pages sitewide": the match header, the left column and the
   xG Board start as skeletons (were "?" crests and "Loading…") */
.dsc2.dsk { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; padding: 18px 12px 14px; }
.dsk-t { display: grid; justify-items: center; gap: 10px; }
.dsk-t .c { width: 56px; height: 56px; border-radius: 14px; } .dsk-t .n { width: 112px; height: 14px; } .dsk-t .p { width: 70px; height: 9px; }
.dsk-m { display: grid; justify-items: center; gap: 12px; padding-top: 6px; }
.dsk-m .s { width: 116px; height: 46px; border-radius: 10px; } .dsk-m .k { width: 48px; height: 14px; }
@media (max-width: 600px) { .dsk-t .c { width: 46px; height: 46px; } .dsk-t .n { width: 84px; } .dsk-m .s { width: 92px; height: 40px; } }
.sk-nv { display: grid; gap: 8px; padding: 8px; }
.sk-nb { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 10px; box-sizing: border-box;
  background: linear-gradient(180deg, #1d1e22, #19191c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.sk-nb .f { width: 13px; height: 13px; border-radius: 50%; flex: none; } .sk-nb .w { width: 96px; } .sk-nb .n { width: 22px; margin-left: auto; }
.sk-xc { display: grid; gap: 10px; padding: 10px 12px; }
.sk-c { display: grid; gap: 12px; padding: 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.sk-c .h { display: flex; gap: 8px; } .sk-c .h .a { width: 26px; } .sk-c .h .b { width: 150px; }
.sk-c .r { display: flex; justify-content: space-between; } .sk-c .r .t { width: 46%; } .sk-c .r .t2 { width: 38%; } .sk-c .r .v { width: 30%; }
/* owner, 2026-11-01 (A-League page: "are these font families approved?"): words in Inter, mono only for numbers;
   Space Grotesk at its real 700 */
.sline .sl-d, .sline .sl-d span { font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: normal; }
.group > h3, .group > h3 .rd { font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .03em; }
.hsec button.more, .hsec button.more.in { font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 11.5px; font-style: normal; letter-spacing: normal; }
.xgap.xv, .row.stk .xgap { font-family: Inter, system-ui, sans-serif; font-weight: 700; letter-spacing: .04em; }
.ruh b, .ruc h3 { font-weight: 700; }
.ruh small { font-family: Inter, system-ui, sans-serif; font-weight: 400; font-size: 11.5px; letter-spacing: normal; }
.xgf.rut td, .xgf.rut td button.tlink { font-family: Inter, system-ui, sans-serif; font-size: 12px; }
td button.tlink, .xgf td button.tlink { font-family: Inter, system-ui, sans-serif; font-size: 12px; }
.stt.scr td.plc .tg { align-self: flex-start; padding: 0; border-radius: 0; transform: none; background: none;
  font: 400 11.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: normal; text-transform: none; font-style: normal; color: var(--muted); }
/* owner, 2026-11-01: "Last updated" right under its table / chart, bottom right, on the same line as the first line
   below (a promotion key, a note), on every page; the next section starts below both */
p.upd { float: right; clear: right; margin: 8px 5px 20px 16px; text-align: right; white-space: nowrap; }   /* owner, 2026-11-01: closer to the table's right edge; 20px below so the next section breathes when nothing sits under the table */
.hsec, .twrap + .hsec { clear: both; }
#board::after, .pbody::after, .dbody::after { content: ""; display: block; clear: both; }
.zones { overflow: visible; }
.upd + .tnote { margin-top: 0; padding-top: 8px; line-height: 1.4; }
/* owner, 2026-11-01 ("challenge this bulky font look of tooltips"): the tooltips in Inter, lighter: the label 700
   10px capitals in the result's colour, the date 500 11px grey, the match 600 12.5px (was 900 13.5px), no mono */
.nxtip .nx-k, .nx-k { font: 700 10px/1.3 Inter, system-ui, sans-serif; letter-spacing: .1em; }
.nxtip .nx-d { font: 500 11px/1.3 Inter, system-ui, sans-serif; letter-spacing: normal; text-transform: none; }
.nxtip .nx-m, .nx-m { font: 400 12.5px/1.35 Inter, system-ui, sans-serif; } .nxtip .nx-m b, .nx-m b { font-weight: 600; }
.nx-t { font: 500 11.5px Inter, system-ui, sans-serif; }
.nx-ha { font: 700 9.5px Inter, system-ui, sans-serif; letter-spacing: .08em; }
/* owner, 2026-11-01 ("fix table headings now"): every table heading row and the xG Board's column labels in Inter
   600 10.5px capitals .06em (the breadcrumb label), not Space Mono 9.5px .12em; the numbers below stay mono */
.stt th, .xgt th, .xgf th, .xgf.art th, .stt.splr th, .stt.lbt th, .ot th, table.stt thead th,
.xct.xhd, .xct.xhd span, .xgt thead th {
  font: 600 10.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.xct.xhd .xg, .stt th .xg, .xgt th .xg, .xgf th .xg { text-transform: none; }
/* owner, 2026-11-01 (".03"): small capital labels (breadcrumbs, table headings, list date headers) at .03em, was .06em */
/* owner, 2026-11-01: a table's two switches on one row: Overall / Home / Away left, the goal line or Last 5 / 10 right */
.tswr { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 14px 8px; }
.tswr .subt { margin: 0 !important; }
/* the goal-time bars grow from zero on load (the percentages count up with them, countUp) */
.gbk b { height: var(--h, 0); animation: gbk-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.gbk div:nth-child(2) b { animation-delay: .05s; } .gbk div:nth-child(3) b { animation-delay: .1s; } .gbk div:nth-child(4) b { animation-delay: .15s; }
.gbk div:nth-child(5) b { animation-delay: .2s; } .gbk div:nth-child(6) b { animation-delay: .25s; }
@keyframes gbk-grow { from { height: 0; } }
@media (prefers-reduced-motion: reduce) { .gbk b { animation: none; } }
/* owner, 2026-11-01 (league Stats → Players): the bars shaded by their share of the leader (q4 80%+ bright lime with a
   glow, q3 55%+, q2 30%+, q1 below); the team line in Inter grey like the other boards (was a Space Mono chip); the last
   column off the table's right edge */
.stt.splr td.plc .lbar i.q4 { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); }
.stt.splr td.plc .lbar i.q3 { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent) 80%, #2b2e33)); }
.stt.splr td.plc .lbar i.q2 { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 55%, #2b2e33)); }
.stt.splr td.plc .lbar i.q1 { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 35%, #2b2e33)); }
.stt.splr td.plc .tg { align-self: flex-start; padding: 0; border-radius: 0; transform: none; background: none;
  font: 400 11.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: normal; text-transform: none; font-style: normal; color: var(--muted); }
.stt th:last-child, .stt td:last-child { padding-right: 14px; }
/* owner, 2026-11-01: the team page's matches grouped by competition; each row's date over its time */
.row.stk .ck small.ckd { font: 500 10.5px/1.2 Inter, system-ui, sans-serif; color: var(--muted); white-space: nowrap; letter-spacing: normal; }
.tgrp + .tgrp { margin-top: 6px; }
.row.stk .ck small.ckd { overflow: hidden; text-overflow: clip; }
@media (max-width: 520px) { .tgrp .row.stk { grid-template-columns: 22px 58px minmax(0, 1fr) 44px 40px 26px; } }   /* room for "Wed 22.10" */
/* owner, 2026-11-01 ("show more matches struggles of space, it needs room"): the list's "Show more" as a real button
   with room around it (not an underlined line at the card's edge); the small ones in section headers keep their look */
button.more:not(.in) { display: flex; align-items: center; gap: 6px; width: max-content; margin: 18px auto 20px; padding: 9px 18px;
  border-radius: 10px; border: 0; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  font: 600 12.5px/1 Inter, system-ui, sans-serif; text-decoration: none; color: var(--text); cursor: pointer; }
button.more:not(.in):hover { color: var(--accent); background: rgba(209,254,23,.06); box-shadow: inset 0 0 0 1px rgba(209,254,23,.25); }
button.more:not(.in) .i { width: 13px; height: 13px; }
/* the team list's time cell: FT shows the date alone, centred between the teams; AET / Pen centred under the date */
.row.stk .ck.ckc { justify-content: center; }
.row.stk .ck.ckx { width: max-content; align-items: center; }
.row.stk .ck.ckx .clock { align-self: center; }
/* friendlies' lists: the time under the date in the same small type as the date */
.row.stk .ck .ckt { font: 600 11px/1.2 Inter, system-ui, sans-serif; color: var(--text); }
.row.stk .ck.ckx { align-items: center; }   /* owner, 2026-11-01: the time or status centred under the date */
.tgrp .row.stk .ck.ckx { align-items: center; }
.frl > .row:first-child { border-top: 0; }
@media (max-width: 520px) { .frl .row.stk { grid-template-columns: 22px 58px minmax(0, 1fr) 44px 40px 26px; } }
/* owner, 2026-11-01: a match to come: its kick-off time on the score plates ("21 : 45"), the colon as two soft dots */
.dsc2 .big b.dsg.kot { font-style: italic; }
.dsc2 .big i.kc { display: inline-flex; flex-direction: column; gap: 7px; font-size: 0; color: transparent; }
.dsc2 .big i.kc::before, .dsc2 .big i.kc::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.dsc2 .dclk.kod { color: var(--muted); font: 600 12px Inter, system-ui, sans-serif; min-height: 0; }
.dsc2 .dclk.kod:empty { display: none; }
/* owner, 2026-11-01: the page crumb hidden where the card has its own (kept for search and screen readers) */
header.seo-hero.ccr nav.crumbs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* HT/FT on phones (owner, 2026-11-02: cropped on an iPhone while scrolling sideways): the table fits the screen
   instead of scrolling, so no sticky name column; long names wrap onto a second line */
@media (max-width: 520px) {
  .stt.htf { table-layout: fixed; }
  .stt.htf th:first-child { width: 20px; }
  .stt.htf th:nth-child(3) { width: 24px; }
  .stt.htf th.hf { width: 23px; padding-left: 0; padding-right: 0; font-size: 9px; letter-spacing: -.02em; }
  .stt.htf td.hf { padding-left: 0; padding-right: 0; }
  .twrap .stt.htf th.tm, .twrap .stt.htf td.tm { position: static; white-space: normal; line-height: 1.25; }
  .stt.htf td.tm { overflow: visible; text-overflow: clip; }
  .stt.htf td.tm img.crest.rc { float: left; margin-top: 1px; }
  .stt.htf td.tm .tn { display: block; overflow: hidden; -webkit-hyphens: auto; hyphens: auto; }
}
/* the squad: each name with the player's country flag (owner, 2026-11-02) */
.xgf.tsq .nf { display: inline-flex; width: 16px; margin-right: 7px; vertical-align: -2px; } .xgf.tsq .nf .flg { width: 14px; height: 14px; margin: 0; }
/* the team Stats tab (owner 2026-11-02, mockup 8): words in Inter, numbers in Space Mono, the league's average as a
   white tick on each bar; lime = the team (for), pink = against */
.tsx { margin: 8px 14px 16px; }
.tsx .lab, .tskp .lab { display: block; font: 600 10.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--faint); margin-top: 12px; }
.tsg { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.tsg > div > .lab:first-child { margin-top: 4px; }
.tsf { display: grid; grid-template-columns: minmax(0, 1fr) 110px 54px; align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tsf.w { grid-template-columns: minmax(0, 1fr) auto; }
.tsf .l { font: 500 13px/1.3 Inter, system-ui, sans-serif; color: var(--text); }
.tsf .l small { display: block; font: 400 11.5px Inter, system-ui, sans-serif; color: var(--faint); }
.tsf .v { font: 700 13.5px var(--mono); text-align: right; white-space: nowrap; } .tsf .v i { font-style: normal; font-weight: 400; color: var(--faint); }
.tsf .lg { grid-column: 2 / 4; font: 400 11px Inter, system-ui, sans-serif; color: var(--faint); text-align: right; } .tsf .lg b { font: 400 11px var(--mono); color: var(--muted); }
.tsb { position: relative; height: 8px; border-radius: 2px; background: rgba(255,255,255,.05); }
.tsb u { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(209,254,23,.35), #d1fe17); }
.tsb.c u { background: linear-gradient(90deg, rgba(255,92,143,.3), #ff5c8f); }
.tsb s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(255,255,255,.75); border-radius: 1px; }
.tsk { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 4px; font: 500 11.5px Inter, system-ui, sans-serif; color: var(--faint); }
.tsk i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 6px; background: #d1fe17; } .tsk i.c { background: #ff5c8f; }
.tsk s { display: inline-block; width: 2px; height: 10px; margin-right: 6px; vertical-align: -1px; background: rgba(255,255,255,.75); }
.tst { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin: 8px 0 4px; }
.tst.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tst > div { padding: 10px 6px; border-radius: 9px; background: rgba(255,255,255,.035); text-align: center; }
.tst .lab { margin: 0; font-size: 10px; } .tst b { display: block; margin-top: 6px; font: 700 17px/1 var(--mono); }
.tst small { display: block; margin-top: 5px; font: 400 11px Inter, system-ui, sans-serif; color: var(--faint); } .tst small b { display: inline; margin: 0; font: 400 11px var(--mono); color: var(--muted); }
.tstop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 6px 14px 10px; font: 500 13px Inter, system-ui, sans-serif; color: var(--muted); }
.tstop b { font: 700 13px var(--mono); color: var(--text); } .tstop .hk { margin-left: auto; font: 600 10.5px Inter, system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.hm { color: #d1fe17; } .aw { color: #9ce6f3; }
.tskp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 14px 6px; border: 1px solid rgba(209,254,23,.28); border-radius: 12px; overflow: hidden; box-shadow: 0 0 40px -22px rgba(209,254,23,.45); }
.tskp > div { padding: 11px 12px; border-right: 1px solid var(--line); min-width: 0; } .tskp > div:nth-child(3n) { border-right: 0; } .tskp > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
.tskp .lab { margin: 0; } .tskp b { display: block; margin-top: 8px; font: italic 700 17px/1 var(--mono); white-space: nowrap; } .tskp b i { font-style: normal; font-weight: 400; color: var(--faint); margin: 0 5px; }
.tskp small { display: block; margin-top: 5px; font: 400 11.5px Inter, system-ui, sans-serif; color: var(--faint); }
.tshr { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.tshr.th { padding-top: 0; } .tshr.th .lab { margin: 0; text-align: right; }
.tshr .l { font: 500 13px Inter, system-ui, sans-serif; } .tshr .v { text-align: right; font: 700 13.5px var(--mono); } .tshr .v.hi { color: #d1fe17; }
.tshr .v small { display: block; font: 400 10.5px var(--mono); color: var(--faint); }
.tsn { margin: 8px 0 0; font: 400 11.5px Inter, system-ui, sans-serif; color: var(--faint); }
.tsp { display: flex; gap: 2px; height: 22px; margin: 8px 0 6px; border-radius: 4px; overflow: hidden; }
.tsp i { display: grid; place-items: center; min-width: 0; font: 700 11px var(--mono); font-style: normal; color: #111; }
.tsp .a { background: #d1fe17; } .tsp .b { background: #55575b; color: var(--text); } .tsp .c { background: #ff5c8f; } .tsp .d { background: #9ce6f3; }
.tsl { display: flex; justify-content: space-between; font: 500 11.5px Inter, system-ui, sans-serif; color: var(--faint); }
.tsm { display: grid; grid-template-columns: 74px repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.tsm div { padding: 9px 4px; border-radius: 5px; text-align: center; background: rgba(255,255,255,.035); font: 700 13.5px var(--mono); }
.tsm .k { background: none; display: flex; align-items: center; justify-content: center; font: 600 10.5px Inter, system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.tsm .z { color: var(--faint); font-weight: 400; }
.tsc svg { display: block; width: 100%; height: auto; } .tsc text { font: 500 10.5px Inter, system-ui, sans-serif; fill: var(--faint); }
.tsc text.n { font: 700 10.5px var(--mono); fill: var(--text); } .tsc text.f { fill: #d1fe17; } .tsc text.a { fill: #ff5c8f; }
.tsms { display: grid; grid-template-columns: 70px 20px minmax(0, 1fr) 44px 60px; gap: 0 10px; align-items: center; font-size: 13px; }
.tsms > span { padding: 6px 0; border-bottom: 1px solid var(--line); }
.tsms .d, .tsms .t { font: 400 12px var(--mono); color: var(--faint); } .tsms .t { text-align: right; } .tsms .s { font: 700 13px var(--mono); text-align: center; }
.tsms .m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .tsg { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .tskp { grid-template-columns: 1fr 1fr; } .tskp > div { border-bottom: 1px solid var(--line); } .tskp > div:nth-child(3) { border-right: 1px solid var(--line); } .tskp > div:nth-child(2n) { border-right: 0; } .tskp > div:nth-child(n+5) { border-bottom: 0; }
  .tsf { grid-template-columns: minmax(0, 1fr) 54px; } .tsf .tsb { grid-column: 1 / 3; grid-row: 2; } .tsf .lg { grid-column: 1 / 3; grid-row: 3; } .tsf .l { font-size: 12.5px; }
  .tst { gap: 4px; } .tst > div { padding: 9px 2px; } .tst b { font-size: 15px; } .tst small { font-size: 10px; } .tst small b { display: block; margin-top: 2px; font-size: 10.5px; } .tst .lab { font-size: 9.5px; }
  .tskp > div:nth-child(3n) { border-right: 1px solid var(--line); } .tshr { grid-template-columns: minmax(0, 1fr) 64px 64px; }
  .tstop .hk { margin-left: 0; } .tsms { grid-template-columns: 62px 20px minmax(0, 1fr) 40px; } .tsms .t { display: none; }
}
/* owner 2026-11-02: the Longest runs boxes skewed, as the site's plates (the text stays upright) */
.tst.four { gap: 8px; padding: 0 4px; }
.tst.four > div { --rc: #8b8d90; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 6px 9px;
  transform: skewX(-8deg); border-radius: 7px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 10%, transparent), rgba(255,255,255,.02));
  box-shadow: inset 0 2px 0 var(--rc), inset 0 0 0 1px rgba(255,255,255,.05); }
.tst.four > div > * { transform: skewX(8deg); }
.tst.four > div.g { --rc: #d1fe17; } .tst.four > div.r { --rc: #ff5c8f; } .tst.four > div.n { --rc: #b9bbbe; }
.tst.four .lab { min-height: 2.4em; display: flex; align-items: center; justify-content: center; line-height: 1.2; }
.tst.four b { margin-top: 4px; font: italic 700 24px/1 var(--mono); color: var(--rc); }
/* owner 2026-11-02: "Add to Favourites" at the far right of the team (and player) title line */
.chd-b { flex: 1 1 auto; min-width: 0; } .chd-t { width: 100%; } .chd-t .tfol { margin-left: auto; flex: none; }
/* D-C265 tenth change (owner 2026-11-02): names in the match tabs 12px on every width, like the feed; the Details
   second line (substitution, foul, missed penalty) 12px grey: the colour carries the hierarchy, not the size */
.dbody .ev .nm, .dbody .ev .ds { font-size: 12px; }
.dbody .pnm, .dbody .lu .pnm.plink, .dbody .lu h4, .dbody .lu li b, .dbody .tops .tp { font-size: 12px; }
.dbody .hrow .tms span, .dbody .x5m, .dbody .plc-tm, .dbody .pvc h4 { font-size: 12px; }
.dbody .info span:not(:first-child) { font-size: 12px; }
/* SEO step 1 (owner 2026-11-02): the row's teams are a link to the match page; it looks exactly as before */
.row.stk a.tms { color: inherit; text-decoration: none; }
/* owner 2026-11-03: names the app draws are real links now (livescore.js linkNames); they look as they did. Specificity of
   a bare "a", so every class rule for the old element still wins */
a:where([data-was], .lnk) { color: inherit; text-decoration: none; }
a:where([data-was="button"]) { display: inline-block; font: inherit; text-align: inherit; }
/* owner 2026-11-03 (competition stats, phase 1): the League part's views; the rest reuses the team Stats tab's parts */
.lsvt { flex-wrap: wrap; }
.lsg { display: grid; grid-template-columns: 34px repeat(6, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.lsg div { padding: 8px 2px; border-radius: 4px; text-align: center; background: rgba(255,255,255,.035); font: 700 12.5px var(--mono); }
.lsg .z { color: transparent; }
.lsg .k { background: none; font: 600 10.5px var(--mono); color: var(--faint); display: flex; align-items: center; justify-content: center; }
.lht td.tm { cursor: pointer; }
.lnkb { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* competition stats phase 2/3: the League part's xG bands and team rankings */
.lxb { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; height: 190px; margin: 10px 14px 0; }
.lxb > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.lxb .pair { display: flex; gap: 3px; align-items: flex-end; width: 100%; height: 100%; }
.lxb .pair b { display: block; flex: 1; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0; }
.lxb .pair .x { background: color-mix(in srgb, var(--accent) 70%, transparent); } .lxb .pair .g { background: #9ce6f3; }
.lxb .v { font: 700 11px var(--mono); } .lxb .v i { font-style: normal; color: #9ce6f3; margin-left: 4px; }
.lxb small { font: 600 10px var(--mono); color: var(--faint); }
.tsk i.g { background: #9ce6f3; }
.lrt th[data-lrs] { cursor: pointer; user-select: none; } .lrt th[data-lrs]:hover { color: var(--text); }
.lrt td.sk, .lrt th.sk { color: var(--text); font-weight: 700; }
.lrt td.tm { cursor: pointer; }
.lrt td.tm .flg { margin-right: 7px; }   /* the flag off the league name, as a crest off a team name (img.crest.rc: 7px) (owner, 2026-11-06) */
/* owner 2026-11-03: every bar grows from the ground like the goal-time bars (gbk-grow), its number counting up with it;
   longer charts keep the left-to-right stagger; the horizontal bars grow from the left; nothing moves for reduced motion */
.gbk div:nth-child(7) b { animation-delay: .3s; } .gbk div:nth-child(8) b { animation-delay: .35s; } .gbk div:nth-child(9) b { animation-delay: .4s; }
.lxb .pair b { animation: gbk-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.lxb > div:nth-child(2) b { animation-delay: .05s; } .lxb > div:nth-child(3) b { animation-delay: .1s; } .lxb > div:nth-child(4) b { animation-delay: .15s; }
.lxb > div:nth-child(5) b { animation-delay: .2s; } .lxb > div:nth-child(6) b { animation-delay: .25s; }
.tsb u { animation: tsb-grow .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tsb-grow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .lxb .pair b, .tsb u { animation: none; } }
/* competition stats, group 1 (owner 2026-11-03): counts that open their matches, the live strip, the fingerprint,
   positions after each round, season by season */
.lsqb { cursor: pointer; } .tsf.lsqb:hover .l, .tst .lsqb:hover .lab, .gbk .lsqb:hover small, .tsl .lsqb:hover { color: var(--accent); }
.tshr .v.lsqb:hover { text-decoration: underline; text-underline-offset: 3px; } .lsg div.lsqb:hover { outline: 1px solid var(--accent); }
.lsql { position: relative; margin: 6px 0 14px; border: 1px solid rgba(209,254,23,.28); border-radius: 12px; padding-bottom: 6px; }
.lsql .hsec { margin-top: 10px; padding-right: 44px; }
.lsqx { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; }
.lsqx svg { width: 14px; height: 14px; }
.lsql .tsms a { color: inherit; text-decoration: none; } .lsql .tsms a:hover { color: var(--accent); }
.lsls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 4px 14px 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255,92,143,.06); border: 1px solid rgba(255,92,143,.3); font: 500 12.5px Inter, system-ui, sans-serif; }
.lsls b { font: 700 13px var(--mono); } .lsls .lv { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #ff5c8f; }
.lsls .lv i { width: 7px; height: 7px; border-radius: 50%; background: #ff5c8f; box-shadow: 0 0 8px #ff5c8f; animation: pulse 1.4s infinite; }
.lsls .ms { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lsls .ms a { color: var(--muted); text-decoration: none; font-size: 12px; } .lsls .ms a:hover { color: var(--text); } .lsls .ms small { font: 400 11px var(--mono); color: var(--faint); }
.lfp { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.lfp > div { display: grid; grid-template-columns: minmax(0, 1fr) 54px 96px 90px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lfp .l { font: 500 13px Inter, system-ui, sans-serif; } .lfp .v { text-align: right; font: 700 13px var(--mono); }
.lfp .r { text-align: right; font: 600 12px Inter, system-ui, sans-serif; color: var(--text); } .lfp .r small { display: block; font: 400 10.5px var(--mono); color: var(--faint); }
.lrc svg, .lhc svg { display: block; width: 100%; height: auto; }
.lrc .ax, .lhc .ax { font: 500 10px var(--mono); fill: var(--faint); } .lhc .n { font: 700 10.5px var(--mono); fill: var(--text); }
.lrc .lrl { cursor: pointer; transition: stroke-width .15s; } .lrc .lrn { font: 500 10.5px Inter, system-ui, sans-serif; fill: var(--faint); cursor: pointer; } .lrc .lrn.on { fill: var(--text); font-weight: 600; }
.lrc .lrl, .lhc .lhl { stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: lr-draw 1.2s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes lr-draw { to { stroke-dashoffset: 0; } }
.lhg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; margin: 0 14px; }
@media (prefers-reduced-motion: reduce) { .lrc .lrl, .lhc .lhl { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } }
@media (max-width: 760px) { .lfp, .lhg { grid-template-columns: 1fr; } .lfp > div { grid-template-columns: minmax(0, 1fr) 46px 70px 74px; gap: 8px; } }
/* owner 2026-11-03: the History and Positions charts' hover card, as Live xG's chart (xgpanel.css .xgp-tp) */
.lhc, .lrc { position: relative; }
.lsx { stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.lsd { stroke: #0f1113; stroke-width: 2; pointer-events: none; } .lrc .lsd { fill: #d1fe17; }
.lstp { position: absolute; left: 0; top: 0; pointer-events: none; min-width: 180px; max-width: 240px; padding: 10px 12px; border-radius: 10px; background: rgba(12,16,23,.96);
  border: 1px solid rgba(255,255,255,.173); box-shadow: 0 18px 40px rgba(0,0,0,.5); font: 500 11.5px/1.6 var(--mono); opacity: 0; transition: opacity .12s; z-index: 5; }
.lstp.on { opacity: 1; }
.lstp .tm { font-weight: 700; color: #fff; margin-bottom: 4px; display: flex; justify-content: space-between; gap: 12px; }
.lstp .r { display: flex; justify-content: space-between; gap: 14px; color: #a7a8ab; } .lstp .r b { font-weight: 600; color: var(--text); }
.lstp .r.on { color: #d1fe17; } .lstp .r.on b { color: #d1fe17; }
.lstp .r span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Inter, system-ui, sans-serif; }
.tskp.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tskp.two > div:nth-child(-n+3) { border-bottom: 0; } .tskp.two > div:nth-child(2) { border-right: 0; }
/* owner 2026-11-03 ("xG, Positions, History graphs/bar have no animation"): a line draws over its own length (pathLength 1;
   the old dash of 2400 left it invisible for most of the time), its dots and labels come in as it arrives */
.lrc .lrl, .lhc .lhl { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lr-draw 1.3s cubic-bezier(.45, .05, .25, 1) forwards; }
.lhc circle:not(.lsd), .lhc text.n, .lrc text.lrn { animation: lr-fade .45s ease-out both; animation-delay: .9s; }
@keyframes lr-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lrc .lrl, .lhc .lhl { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; } .lhc circle, .lhc text.n, .lrc text.lrn { animation: none; } }
/* owner 2026-11-03 (team Stats tab): the goal-minute chart's bars grow from the centre line — scored up, conceded down —
   and their counts come in after them, like every other bar */
.tsc svg rect { transform-box: fill-box; animation: tsc-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.tsc svg rect[fill="#d1fe17"] { transform-origin: 50% 100%; } .tsc svg rect:not([fill="#d1fe17"]) { transform-origin: 50% 0; }
.tsc svg text.n { animation: lr-fade .4s ease-out both; animation-delay: .6s; }
@keyframes tsc-grow { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .tsc svg rect, .tsc svg text.n { animation: none; } }
/* owner 2026-11-03 (xG Stats hub): the xG table of every league, a link each */
.lxt { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 18px; margin: 4px 14px 14px; }
.lxt a { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font: 500 12.5px Inter, system-ui, sans-serif; min-width: 0; }
.lxt a:hover span { color: var(--accent); } .lxt a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lxt a small { margin-left: auto; color: var(--faint); font-size: 11px; white-space: nowrap; } .lxt .flg { width: 14px; height: 14px; flex: none; }
/* owner 2026-11-03 (xG Stats hub, option B): the tabs over the boards, the filters, the landing page */
.lbtab { margin-bottom: 6px; }
.lbfl { display: flex; flex-wrap: wrap; gap: 6px; }
.lbfl select { max-width: 220px; }
.lhub { margin: 0 14px; } .lhub .tsf .l b { font-weight: 600; cursor: pointer; } .lhub .tsf .l small { font-size: 11px; }
@media (max-width: 760px) { .lhub { grid-template-columns: 1fr; } }
/* owner 2026-11-03: "In the table" starts at the left: a narrow # column, the team takes the room (cut with "…", never
   under the numbers), MP / GD / Pts narrow at the right */
.xgf.pvst th:first-child, .xgf.pvst td:first-child { width: 34px; text-align: left; padding-left: 0; }
.xgf.pvst th:nth-child(n+3), .xgf.pvst td:nth-child(n+3) { width: 44px; }
.xgf.pvst th:last-child, .xgf.pvst td:last-child { padding-right: 0; }
.xgf.pvst td.tm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* owner 2026-11-03 ("crests out of position"): the link linkNames puts inside a team badge (match header) takes no box
   of its own, so the crest and initials sit in the badge as before */
.cbadge > a:where([data-was], .lnk) { display: contents; }
.cbadge > a > img.crest { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.cbadge.tcb > a > img.crest { transform: skewX(11deg); }
.cbadge:has(> a > img.crest) { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.cbadge:has(> a > img.crest) > a > b { visibility: hidden; }
/* owner 2026-11-03 ("scoreline broken"): a link around a block's several parts takes no box, the parts keep the grid */
a.lnkc { display: contents; }
/* owner 2026-11-04 ("lets try it, on phones only first", mockup 13): the phone's Live view as odds cards. Market chips
   over the list (xG keeps the usual rows); one card a live match: competition and ☆, the half and minute, the teams and
   score, a minute bar, the market's prices in boxes (the lowest lit), "+n" for the match's other markets */
.lochips { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.lochips::-webkit-scrollbar { display: none; }
.lochips button { flex: none; font: 500 13px var(--ui); color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 10px; padding: 8px 13px; white-space: nowrap; cursor: pointer; }
.lochips button.on { background: var(--accent); border-color: var(--accent); color: #0f1113; font-weight: 600; }
.rg18.lo18 { font-family: var(--ui); }
.ocards { display: flex; flex-direction: column; gap: 10px; padding: 12px 10px 16px; }
.ocd { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px 13px; cursor: pointer; }
.ocl { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font: 400 12px var(--ui); margin-bottom: 6px; min-height: 22px; }
.ocl .occ { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocl .occ img, .ocl .occ svg { width: 14px; height: 14px; flex: none; }
.ocl .star { flex: none; }
.ost { font: 600 12px var(--ui); color: var(--live); margin-bottom: 6px; display: flex; align-items: center; gap: 0; }
.ost.c-ht { color: var(--brk); }
.ost .clock { margin-left: 4px; font-size: 12px; }
.ost .clock.c-live::before { display: none; }
.otm { display: grid; grid-template-columns: minmax(0, 1fr) 26px; row-gap: 6px; align-items: center; }
.otm .otn { display: flex; align-items: center; gap: 9px; min-width: 0; font: 500 15px var(--ui); color: var(--text); }
.otm .otn > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otm .otn img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.otm b { font: 700 15px var(--mono); text-align: center; color: var(--accent); }
.ocd.s-ht .otm b { color: var(--brk); }
.opg { height: 2px; margin: 11px 0; border-radius: 1px; background: var(--line); overflow: hidden; }
.opg i { display: block; height: 100%; background: var(--accent); }
.ocd.s-ht .opg i { background: var(--brk); }
.opause { margin: -4px 0 6px; font: 600 11.5px var(--ui); color: var(--warn); }
.oob { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 7px; align-items: center; }
.oob.two { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.oob.nm { grid-template-columns: repeat(3, minmax(0, 1fr)); } .oob.two.nm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.obx { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 44px; padding: 0 11px; min-width: 0; border-radius: 9px; background: var(--chip); border: 1px solid var(--line); }
.obx .l { font: 500 12.5px var(--ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obx b { font: 700 14.5px var(--mono); color: var(--text); }
.obx.fav { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .obx.fav b { color: var(--accent); }
.obx.sus { opacity: .4; }
.obx.sk-b { position: relative; overflow: hidden; }
.obx.sk-b::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(127,127,127,.12), transparent); animation: fx-shim 1.4s infinite; }
.onone { grid-column: 1 / -2; display: grid; place-items: center; height: 44px; border: 1px dashed var(--line); border-radius: 9px; color: var(--faint); font: 400 12px var(--ui); }
.oob.nm .onone { grid-column: 1 / -1; }
.omore { all: unset; font: 700 12px var(--mono); color: var(--muted); padding: 12px 2px 12px 4px; cursor: pointer; white-space: nowrap; }
/* owner 2026-11-04 ("deploy same solution ... in Scores page too"): the day's matches to come (Bet365's pre-match prices,
   the kick-off time) and the finished ones (the result, no prices) as cards too */
.ocd.s-ko .ost { color: var(--kick); }
.ost .okt { font: 700 12px var(--mono); margin-left: 4px; }
.ost .obkn { margin-left: auto; font: 500 11px var(--ui); color: var(--faint); }
.ocd.s-end .ost { color: var(--faint); }
.ocd.s-end .otm b { color: var(--text); }
.ocd.s-end { padding-bottom: 11px; }
/* a card without prices says so in one quiet line, not a box */
.onone { grid-column: 1 / -1; height: auto; place-items: start; border: 0; padding: 2px 0 0; color: var(--faint); font: 400 12px var(--ui); }
.oob:has(> .onone) { grid-template-columns: 1fr; }
.ogap { height: 10px; }
/* owner 2026-11-04 ("find a way for xG to exist with odds ... it could be both"): the cards carry the list's xG: a column
   of each team's xG beside the score, the alert dot and trend arrow after the name, the heat pill, the xG Gap tag */
.otm.wx { grid-template-columns: minmax(0, 1fr) auto 26px; column-gap: 10px; row-gap: 5px; }
.otm .oxh { font: 700 9.5px var(--mono); letter-spacing: .08em; color: var(--faint); text-align: right; margin-bottom: -3px; }
.otm .oxg { font: 400 13px var(--mono); font-style: normal; color: var(--muted); text-align: right; min-width: 36px; }
.otm .otn .xdot { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-left: -3px; }
.otm .otn .xtr { flex: none; display: inline-flex; color: var(--accent); margin-left: -4px; }
.otm .otn .xtr .i { width: 14px; height: 14px; }
.ocd .ogp { display: inline-block; margin-top: 8px; padding: 2px 6px 1px; border-radius: 2px; transform: skewX(-11deg); font: 600 10.5px var(--ui); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ocd .ogp b { font-family: var(--mono); }
.ost .ohp { display: inline-block; padding: 3px 6px 2px; border-radius: 3px; transform: skewX(-11deg); font: 700 9.5px/1 var(--mono); color: #fff; text-transform: uppercase; }
.ost .ohp.b1 { background: #ffbe4c; color: #111; } .ost .ohp.b2 { background: #ff4f03; } .ost .ohp.b3 { background: #e72930; } .ost .ohp.b4 { background: #b91c1c; }
/* owner 2026-11-04 ("study referrence screenshot and use the same font sizes, you have accidentaly gone bigger"):
   measured on the bookmaker's screenshot (a 393 pt phone, against its status-bar clock): teams ~12 px regular,
   competition and status ~10.5 px, prices ~12 px, the box label ~11 px, "+n" ~9.5 px, chips ~13 px and 29 px tall,
   price boxes 30 px tall 7 px apart, cards 11 px apart with 11 px sides; no price is lit (owner: "do not highlight by
   default the favorite odd") */
.lochips { padding: 9px 12px; }
.lochips button { font-size: 13px; padding: 6px 12px; border-radius: 7px; }
.ocards { gap: 11px; padding: 11px 11px 14px; }
.ocd { padding: 12px 11px 11px; border-radius: 10px; }
.ocl { font-size: 10.5px; min-height: 18px; margin-bottom: 7px; }
.ocl .occ img, .ocl .occ svg { width: 12px; height: 12px; }
.ocl .star .i { width: 14px; height: 14px; }
.ost { font-size: 10.5px; margin-bottom: 7px; }
.ost .clock, .ost .okt { font-size: 10.5px; }
.ost .obkn { font-size: 10px; }
.ost .ohp { font-size: 8.5px; padding: 2px 5px 1px; }
.otm { row-gap: 7px; grid-template-columns: minmax(0, 1fr) 22px; }
.otm.wx { grid-template-columns: minmax(0, 1fr) auto 22px; column-gap: 9px; row-gap: 6px; }
.otm .otn { font-size: 12px; font-weight: 400; gap: 7px; }
.otm .otn img { width: 15px; height: 15px; }
.otm b { font-size: 12px; }
.otm .oxg { font-size: 11px; min-width: 30px; }
.otm .oxh { font-size: 8.5px; }
.ocd .ogp { font-size: 9.5px; margin-top: 7px; }
.opg { margin: 11px 0 12px; }
.ogap { height: 6px; }
.oob { gap: 7px; }
.obx { height: 30px; padding: 0 8px; border-radius: 4px; }
.obx .l { font-size: 11px; }
.obx b { font-size: 12px; }
.omore { font-size: 9.5px; padding: 9px 2px 9px 3px; }
.onone { font-size: 10.5px; }
.opause { font-size: 10px; }
.obx b { font-weight: 400; color: var(--text); }
.otm .oxh { margin-bottom: -5px; line-height: 1; }
/* owner 2026-11-04 (phone, Live view: "should list/scoreline buttons be better right aligned? ... a black space between
   LIVESCORE header area and gray bar ... remove dark grey background bar from icons and keep them as in black bg"):
   on phones the Live / Scoreline bar starts right under the top bar, on the page's own black, its two buttons right */
@media (max-width: 760px) {
  .grid:has(#vbar .vtog) { padding-top: 0; }
  #vbar:has(.vtog) { background: #0f1113; }
  #vbar:has(.vtog) .dnav { display: flex; justify-content: flex-end; padding: 6px 10px; }
}
/* owner 2026-11-04 ("try first this three small boxes in a row, a miniature of our price boxes (1 · X · 2)"): the
   top bar's Odds switch as an icon */
#oddsChip { padding: 0; min-width: 40px; }
#oddsChip .oddsi { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
/* owner 2026-11-04 ("three dots is not good, try 1·X·2. Also odds tabs text (Total goals etc) is large") */
#oddsChip { padding: 0 8px; }
#oddsChip .oddsi { width: auto; height: auto; font: 700 11.5px var(--mono); letter-spacing: -.02em; stroke: none; white-space: nowrap; }
#oddsChip .oddsi i { font-style: normal; opacity: .55; margin: 0 1px; }
.lochips { padding: 8px 12px; gap: 7px; }
.lochips button { font-size: 11.5px; padding: 5px 10px; border-radius: 6px; }
/* owner 2026-11-04 ("remove breaking space between 1 · X · 2, it wastes so much space"): the mono dots take a full
   letter's width; they are pulled in so 1·X·2 sits tight */
#oddsChip { padding: 0 9px; min-width: 40px; }
#oddsChip .oddsi { letter-spacing: 0; }
#oddsChip .oddsi i { margin: 0 -.22em; }
/* owner 2026-11-04 ("for each match card, remove border from odds tabs/buttons and remove border of the match card
   itself"): the card and its price boxes are set apart by their fills alone */
.ocd { border: 0; }
.obx { border: 0; }
/* owner 2026-11-04 ("when odds are on over phone user cannot swipe a match to add/remove it as follow/unfollow"): the
   odds cards swipe right to follow (or unfollow), as the rows: the card slides, "★ Follow" shows in the space it leaves */
@media (max-width: 760px) {
  .ocards { overflow-x: clip; }
  .ocd { position: relative; transition: transform .18s ease; touch-action: pan-y; }
  .ocd.swp { transition: none; z-index: 2; }
  .ocd[data-sw="r"]::before { content: "★ Follow"; position: absolute; top: 0; bottom: 0; right: calc(100% + 8px); width: 112px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8b8d90; background: rgba(255,255,255,.04); }
  .ocd.swgo[data-sw="r"]::before { background: #d1fe17; color: #111; }
  .ocd.swun[data-sw="r"]::before { content: "☆ Unfollow"; }
  .ocd.swgo.swun[data-sw="r"]::before { background: #3a3d42; color: #fff; }
  .ocd.swhint { z-index: 2; animation: sw-hint 1.9s cubic-bezier(.45,0,.25,1) both; }   /* owner 2026-11-05: the one-time hint, as the rows' */
}
/* owner 2026-11-04 ("yes": the odds cards take the list's score look): the rows' score tags: skewed soft boxes while
   live or at half-time (the loser's digit dimmer), a goal just now lit, plain upright digits when over; the rows' font */
.otm b.osc { display: block; min-width: 24px; padding: 2px 0 1px; border-radius: 3px; text-align: center;
  font: 600 13px/1.2 Inter, sans-serif !important; font-variant-numeric: tabular-nums; color: #f7f7f8 !important; }
.ocd.s-live .otm b.osc:not(:empty), .ocd.s-ht .otm b.osc:not(:empty) { transform: skewX(-11deg); background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); color: #fff !important; }
.ocd.s-ht .otm b.osc:not(:empty) { background: rgba(255,255,255,.06); box-shadow: none; color: #c8c8c8 !important; }
.ocd.s-live .otm b.osc.l, .ocd.s-ht .otm b.osc.l { color: #d0d0d0 !important; }
.ocd.s-end .otm b.osc.l { color: #6b6d70 !important; }
.otm b.osc.scored { background: #fff !important; color: #1a1a1a !important; box-shadow: 0 0 18px -2px rgba(255,255,255,.85) !important; }
.otm.wx { grid-template-columns: minmax(0, 1fr) auto 26px; }
.otm { grid-template-columns: minmax(0, 1fr) 26px; }
/* owner 2026-11-04 ("progress bar in each match card ... maybe should be grey instead of lime, it attracts too much
   attention"): the minute bar grey (half-time too) on a fainter track */
.opg { background: rgba(255,255,255,.06) !important; }
.opg i, .ocd.s-ht .opg i { background: rgba(255,255,255,.3) !important; box-shadow: none !important; }
/* owner 2026-11-04 ("Should First Half 7' come with not lime color but a regular status color or white or not so
   tensed?"): the cards' status line quiet: the half in muted grey, the minute in plain text colour (the ' still blinks);
   the score tags and the dot in the rows keep the live colour */
.ost, .ocd.s-ht .ost { color: var(--muted) !important; font-weight: 500 !important; }
.ost .clock, .ost .clock.c-live { color: var(--text) !important; text-shadow: none !important; }
/* owner 2026-11-04: the odds cards on desktop too (the Odds switch works as on phones): the 18+ line shows there as
   well; wide panels set the cards two by two */
.rg18.lo18 { display: block; margin: 0; padding: 6px 14px; font: 400 11px var(--ui); color: var(--faint); border-bottom: 1px solid var(--line); }
@media (min-width: 761px) {
  .lochips { flex-wrap: wrap; }
  .ocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); align-items: start; }
}
/* owner 2026-11-04 ("country acronyms used in international matches next to team names use Mono. Challenge and
   evaluate that"): letters, not numbers, so Inter (Space Mono is for numbers only), a touch smaller, spaced, muted */
.tcc { font-family: var(--ui, Inter, system-ui, sans-serif) !important; font-size: .74em; font-weight: 500; letter-spacing: .06em; }
.dsc2 .dcc { font-family: var(--ui, Inter, system-ui, sans-serif) !important; letter-spacing: .1em; }
/* owner 2026-11-04 ("change this to one match card per row"): desktop too, one card a row */
@media (min-width: 761px) { .ocards { display: flex; flex-direction: column; } }
@media (min-width: 761px) { .ocards { align-items: stretch; width: 100%; } .ocards > .ocd { width: 100%; box-sizing: border-box; } }
/* owner 2026-11-04 ("have you maybe used smaller league and status font size for desktop feed than supposed?"): yes, the
   phone sizes measured on the bookmaker's screenshot applied on desktop too (competition and status 10.5 px against
   the desktop list's 12 px, teams 12 px against its 13.5 px). On desktop the cards take the desktop list's sizes */
@media (min-width: 761px) {
  .ocl { font-size: 12px; min-height: 20px; }
  .ocl .occ img, .ocl .occ svg { width: 14px; height: 14px; }
  .ost, .ost .clock, .ost .okt { font-size: 12px; }
  .ost .obkn { font-size: 11px; }
  .ost .ohp { font-size: 9.5px; padding: 3px 6px 2px; }
  .otm .otn { font-size: 12px; gap: 8px; }   /* team names as in the rows without odds, 12px (owner, 2026-11-06: "no matter odds are on or off team names must use the size used in current odds off case") */
  .otm .otn img { width: 18px; height: 18px; }
  .otm b { font-size: 13.5px; }
  .otm .oxg { font-size: 12px; min-width: 34px; }
  .otm .oxh { font-size: 9px; }
  .otm.wx { grid-template-columns: minmax(0, 1fr) auto 26px; }
  .otm { grid-template-columns: minmax(0, 1fr) 26px; }
  .ocd .ogp { font-size: 10.5px; }
  .obx { height: 34px; }
  .obx .l { font-size: 12px; }
  .obx b { font-size: 13px; }
  .omore { font-size: 10.5px; }
  .onone { font-size: 12px; }
  .opause { font-size: 11px; }
  .lochips button { font-size: 12.5px; }
}
/* owner 2026-11-04 ("use a color for status and minutes, use a higgsfield color we use and it fits", with a reference
   in a soft green): on a card of a match being played (halves and half-time) the status and the minute take a soft
   lime, our lime toned down towards grey, not the full #d1fe17 (owner earlier: not the bright lime); kick-off and
   finished cards keep the muted grey */
.ocd.s-live .ost, .ocd.s-ht .ost, .ocd.s-live .ost .clock, .ocd.s-live .ost .clock.c-live, .ocd.s-ht .ost .clock { color: #b5d149 !important; }
/* owner 2026-11-04 ("scores is invisible over white pill"): the losing side's grey (#d0d0d0, a longer selector) won over
   the white "just scored" pill, so a goal by the side still behind showed a blank white tag; the pill's dark ink wins */
.ocd .otm b.osc.scored, .ocd.s-live .otm b.osc.scored.l, .ocd.s-ht .otm b.osc.scored.l, .ocd.s-end .otm b.osc.scored.l { color: #1a1a1a !important; }
/* light theme (phones): the same status in the theme's live olive, set here so light.css keeps its version */
html.lt .ocd.s-live .ost, html.lt .ocd.s-ht .ost, html.lt .ocd.s-live .ost .clock, html.lt .ocd.s-live .ost .clock.c-live, html.lt .ocd.s-ht .ost .clock { color: var(--lt-live) !important; }
html.lt .ocd .otm b.osc.scored, html.lt .ocd.s-live .otm b.osc.scored.l, html.lt .ocd.s-ht .otm b.osc.scored.l { color: var(--lt-ink) !important; }
/* owner 2026-11-04 ("add in trend match cards the add to fav star top right"): the star beside the card, at its top right */
.trcw { position: relative; display: flex; }
.trcw > .trc { flex: 1; min-width: 0; }
.trcw > .trc .trh { padding-right: 26px; }
.trcw > .star { position: absolute; top: 6px; right: 7px; }
/* owner 2026-11-04 ("So: Pill, xG, Values"): on a card with xG the row reads team · heat pill · "xG" · xG value · score;
   the pill and the "xG" mark take both team rows and sit at their middle */
.otm.wx, .otm.wx { grid-template-columns: minmax(0, 1fr) auto auto auto 26px; column-gap: 0; }
.otm.wx > .r1 { grid-row: 1; } .otm.wx > .r2 { grid-row: 2; }
.otm.wx > .otn { grid-column: 1; }
.otm.wx > .ohp { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-left: 10px; display: inline-block; padding: 3px 6px 2px; border-radius: 3px; transform: skewX(-11deg); font: 700 9.5px/1 var(--mono); color: #fff; text-transform: uppercase; }
.otm.wx > .ohp.b1 { background: #ffbe4c; color: #111; } .otm.wx > .ohp.b2 { background: #ff4f03; } .otm.wx > .ohp.b3 { background: #e72930; } .otm.wx > .ohp.b4 { background: #b91c1c; }
.otm.wx > .oxh { grid-column: 3; grid-row: 1 / 3; align-self: center; margin: 0 0 0 10px !important; line-height: 1; }
.otm.wx > .oxg { grid-column: 4; margin-left: 8px; }
.otm.wx > .osc { grid-column: 5; margin-left: 10px; }
@media (max-width: 760px) { .otm.wx > .ohp { font-size: 8.5px; padding: 2px 5px 1px; margin-left: 8px; } .otm.wx { grid-template-columns: minmax(0, 1fr) auto auto auto 22px; } }
/* owner 2026-11-04 ("odds toggle should be hidden too" on Scoreline) */
#oddsChip[hidden] { display: none !important; }
/* owner 2026-11-04 ("+9 does not have to be consuming an extra line, it shall stay on above line far right"): with no
   price for the market, the note and the "+n" share one line, the "+n" at the far right as under the price boxes */
.oob:has(> .onone) { grid-template-columns: minmax(0, 1fr) auto; }
.oob:has(> .onone) > .onone { grid-column: 1; align-self: center; padding: 0; }
.oob:has(> .onone) > .omore { grid-column: 2; }
.oob.nm:has(> .onone) { grid-template-columns: 1fr; }
/* owner 2026-11-04 (team Stats, "When the goals come": "this text is unreadable ... explanation? tooltip? both? bigger
   fonts"): the chart is drawn about its shown size, its words at reading size; a line explains it; a bar's tooltip */
.gmx { margin: 2px 14px 4px; font: 400 13px/1.5 var(--ui); color: var(--muted); }
.gmx b { font-weight: 600; } .gmx b.f { color: #d1fe17; } .gmx b.a { color: #ff5c8f; }
.tsc.gm { position: relative; touch-action: pan-y; }
.tsc.gm text { font: 500 11.5px var(--ui); fill: var(--muted); }
.tsc.gm text.n { font: 700 13px var(--mono); fill: var(--text); }
.tsc.gm text.bl { font: 500 11px var(--ui); fill: var(--muted); }
.tsc.gm .lstp { font: 400 12.5px var(--ui); }
html.lt .gmx b.f { color: var(--lt-olive); }
.tsc.gm.b10 text.bl { font-size: 9.5px; letter-spacing: -.01em; }
/* owner 2026-11-04 (duplicates #1b): the team's season is one dropdown, not a row of pills; Records: This season | All time */
.tsys { align-items: center; gap: 10px; flex-wrap: nowrap; }
.tsys .lab { font: 600 11px var(--ui); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.tswr.trsw { margin: 2px 0 10px; }
/* owner 2026-11-04: the Summary's Records picker (All time or one season) */
.tsys.trpk { margin: 4px 14px 10px; }
/* owner 2026-11-05 (phone screenshot): on phones the country · league bar has no grey band; plain black (dark theme only) */
@media (max-width: 760px) { html:not(.lt) .group > h3, html:not(.lt) .group > h3.link:hover { background: #000 !important; } }
/* owner 2026-11-05: the phone league bar 2 px taller (36 → 38 px), all themes */
@media (max-width: 760px) { .group > h3 { min-height: 38px; } }
/* owner 2026-11-05 (screenshots, light theme): the day picker and the pinned match card stayed dark (the picker's month
   title dark on dark); both in the light look. And a pinned match's team names wrap to a second line instead of being cut */
html.lt .cal { background: #ffffff !important; border-color: var(--lt-line) !important; box-shadow: 0 18px 44px rgba(16,20,24,.16) !important; }
html.lt .cal-h b { color: var(--lt-ink) !important; }
html.lt .cal-h button { background: var(--lt-box) !important; border-color: var(--lt-line) !important; color: var(--lt-ink2) !important; }
html.lt .cal-q { background: var(--lt-box) !important; border-color: var(--lt-line) !important; }
html.lt .cal-q button { color: var(--lt-muted) !important; }
html.lt .cal-q button:hover { background: rgba(16,20,24,.05) !important; color: var(--lt-ink) !important; }
html.lt .cal-q button.on { background: #ffffff !important; color: var(--lt-ink) !important; box-shadow: 0 1px 2px rgba(16,20,24,.12) !important; }
html.lt .cal-w span { color: var(--lt-faint) !important; }
html.lt .cal-g button { background: var(--lt-box) !important; border-color: transparent !important; color: var(--lt-ink2) !important; }
html.lt .cal-g button:hover { background: var(--lt-soft) !important; }
html.lt .cal-g button.now { border-color: var(--lt-olive) !important; color: var(--lt-olive) !important; }
html.lt .cal-g button.sel { background: var(--lt-lime) !important; border-color: var(--lt-lime) !important; color: var(--lt-ink) !important; box-shadow: none !important; }
html.lt .cal-g button.has::after { background: var(--lt-olive); }
html.lt #pins .pin:has(.pm), html.lt #pindock .pin:has(.pm) { background: #ffffff !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--lt-line), 0 18px 44px rgba(16,20,24,.16) !important; }
html.lt #pins .pin:has(.pm.s-live), html.lt #pindock .pin:has(.pm.s-live) { box-shadow: 0 0 0 1px rgba(75,115,0,.5), 0 18px 44px rgba(16,20,24,.16) !important; }
html.lt .pin:has(.pm) .mch { border-bottom-color: var(--lt-line) !important; color: var(--lt-muted) !important; }
html.lt .pin:has(.pm) .mch .pcomp { color: var(--lt-ink2) !important; }
html.lt .pin:has(.pm) .mch button, html.lt .pin:has(.pm) .mch .star { background: var(--lt-box) !important; box-shadow: inset 0 0 0 1px var(--lt-line) !important; color: var(--lt-muted) !important; }
html.lt .pin:has(.pm) .mch button:hover { color: var(--lt-ink) !important; box-shadow: inset 0 0 0 1px var(--lt-olive) !important; }
html.lt .pin:has(.pm) .mch .star[aria-pressed="true"] { color: var(--lt-olive) !important; }
html.lt .pin .pm:hover { background: rgba(75,115,0,.05) !important; }
html.lt .pin .pm .h, html.lt .pin .pm .a { color: var(--lt-ink) !important; }
html.lt .pin .pm .sc b { color: var(--lt-ink) !important; background: var(--lt-box) !important; box-shadow: inset 0 0 0 1px var(--lt-line) !important; }
html.lt .pin .pm .sc i { color: var(--lt-muted) !important; }
html.lt .pin .pm .t { color: var(--lt-ink2) !important; background: var(--lt-box) !important; }
html.lt .pin .pm .ps { color: var(--lt-muted) !important; }
.pin .pm .h, .pin .pm .a { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
/* ===== layout prototypes A and B (owner, 2026-11-05: "this is the 1M $ bet … Better build A & B"); B is the visitor's
   "Centred" page width (D-C274, the header switch, xg.lay); A only with ?layout=a for testing (html[data-lay]); phones
   keep their own layout ===== */
@media (min-width: 900px) {
  html[data-lay] .grid, html[data-lay] header .bar { max-width: 1360px; margin-left: auto; margin-right: auto; }
  html[data-lay] header.seo-hero { max-width: 1360px; margin: 0 auto; padding: 6px 12px 0; }
  html[data-lay] header.seo-hero h1 { font-size: 16px; letter-spacing: -.01em; }
  html[data-lay] header.seo-hero h1 > span { display: none; }
  /* the countries: the sheet from the left, opened by the header's button, at every width */
  html[data-lay] #navBtn { display: inline-flex; }
  html[data-lay] #p-nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(330px, 88vw); z-index: 22; border-radius: 0; border-left: 0;
    transform: translateX(-105%); transition: transform .2s; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; max-height: none; grid-row: auto;
    padding-top: var(--navtop, var(--hh, 53px)); }
  html[data-lay] body.nav-open #p-nav { transform: none; box-shadow: var(--shadow); }
  /* the affiliate banner's place (a prototype box) */
  html[data-lay] .lay-ad { display: grid; place-items: center; height: 120px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--muted); font-size: 12px; text-align: center; }
  html[data-lay] .lay-ad b { display: block; color: var(--accent); }
  html[data-lay] [data-lay-only] { display: grid; margin: 12px; }
}
/* A, "xG terminal": two panes. Left the list (520 px), right a wide pane: the xG board, or the opened match in its place */
@media (min-width: 900px) {
  html[data-lay="a"] .grid, html[data-lay="a"] body.nomap .grid { grid-template-columns: 520px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "map map" "live xg"; }
  html[data-lay="a"] body.nomap .grid { grid-template-rows: auto; grid-template-areas: "live xg"; }
  html[data-lay="a"] body.dock-open #p-xg, html[data-lay="a"] body.dock-open #p-mini { display: none; }
}
/* B, "feed + live strip": one wide list in the centre, the live xG strip on top (the ticker, always on), a match slides
   in from the right over the list (two thirds of the screen) */
@media (min-width: 900px) {
  html[data-lay="b"] .grid, html[data-lay="b"] body.nomap .grid { grid-template-columns: minmax(0, 1fr); max-width: 1040px; grid-template-rows: auto; grid-template-areas: "map" "live"; }
  html[data-lay="b"] body.nomap .grid { grid-template-areas: "live"; }
  html[data-lay="b"] #p-xg, html[data-lay="b"] #p-mini, html[data-lay="b"] #xcol { display: none; }
  html[data-lay="b"] .drawer { width: min(66vw, 1000px); }
  html[data-lay="b"] #tickBtn { display: none; }
}
/* B: the heading over the list, in the list's own 1,040 px frame (as on Live xG) */
@media (min-width: 900px) { html[data-lay="b"] header.seo-hero { max-width: 1040px; padding-left: 16px; padding-right: 16px; } }
/* B: the Leagues button in the list's filter row, not in the header (owner, 2026-11-05) */
@media (min-width: 900px) {
  html[data-lay="b"] #navBtn { display: none; }
  html[data-lay="b"] .lay-lg { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--line); background: var(--head); color: var(--text); font: 600 13px Inter, system-ui, sans-serif; cursor: pointer; }
  html[data-lay="b"] .lay-lg .hb { display: inline-flex; flex-direction: column; gap: 3px; } html[data-lay="b"] .lay-lg .hb i { display: block; width: 12px; height: 1.5px; background: currentColor; }
  html[data-lay="b"] .lay-lg:hover { border-color: var(--accent); }
}
/* B, Trends: two cards a row, under each market's heading (owner, 2026-11-05) */
@media (min-width: 900px) { html[data-lay="b"] .trg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* B, Trends: the market groups' bars stand out (owner, 2026-11-05: "make group bars more dominant, to create a visual
   separation and help user eye catch categories"): a full-width band, a lime skewed marker, larger capitals, the count
   as a plate, room above each group */
@media (min-width: 900px) {
  html[data-lay="b"] .trgh { margin: 22px 14px 10px; padding: 12px 16px; gap: 12px; border-radius: 10px; background: #000;
    box-shadow: inset 0 0 0 1px var(--line); }
  html[data-lay="b"] .trgh:first-of-type { margin-top: 10px; }
  html[data-lay="b"] .trgh::before { content: ""; flex: none; width: 6px; height: 20px; border-radius: 1px; transform: skewX(-12deg);
    background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
  html[data-lay="b"] .trgh b { font: 700 16px "Space Grotesk", sans-serif; letter-spacing: .04em; }
  html[data-lay="b"] .trgh em { margin-left: auto; padding: 3px 10px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent); font: 700 12px var(--mono); }
  html.lt[data-lay="b"] .trgh { background: var(--lt-navy, #0d1e28) !important; }
  html.lt[data-lay="b"] .trgh b { color: #ffffff !important; }
  html.lt[data-lay="b"] .trgh em { background: rgba(209,254,23,.18) !important; color: #d1fe17 !important; }
}

/* owner, 2026-11-06: "apply same family to main feed header (tabs, toggle buttons, calendar)" and "also in odds cards, text and
   values when odds are on": the feed's header (tabs, the xG and Odds switches, the day button, the phone's xG and 1x2 buttons,
   the calendar) and the odds cards, words and figures alike, in Inter */
.xgsw, .xgsw *, .dnav .btn.day, .dnav .btn.day *, #xgChip, #xgChip *, #oddsChip, #oddsChip *, #calRoot .cal, #calRoot .cal *, .ocd, .ocd * { font-family: var(--ui) !important; }
/* owner, 2026-11-06: "set these to use same size as team names" (the odds cards' league names, kick-off line, odds prices, xG values
   and the "+3" button): 12px at every width, as the cards' team names */
.ocd .ocl .occ, .ocd .ost, .ocd .ost .clock, .ocd .ost .okt, .ocd .otm .oxg, .ocd .obx b, .ocd .omore { font-size: 12px !important; }

/* owner, 2026-11-06 (LOCKED): one Back sitewide, the arrow alone in a small square (the competition page's): pages, the match
   page and card, the previous-match Back, the leagues sheet */
.xbk { flex: none; box-sizing: border-box !important; width: 32px !important; height: 32px !important; min-width: 0; padding: 0 !important; gap: 0; border-radius: 8px !important; border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.05) !important; color: var(--text) !important; display: inline-grid !important; place-items: center; cursor: pointer; }
.xbk .i { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xbk:hover { border-color: rgba(209,254,23,.45) !important; color: var(--accent) !important; }
/* owner, 2026-11-06: dragging a pinned card never selects text */
.pin { -webkit-user-select: none; user-select: none; }
html.pindrag, html.pindrag * { -webkit-user-select: none !important; user-select: none !important; cursor: grabbing !important; }
html.lt .xbk { background: var(--lt-box) !important; border-color: var(--lt-line) !important; color: var(--lt-ink2) !important; }   /* the light theme: its own box */

/* ===== the desktop search popup (owner, 2026-11-07: "replace it with the magnifier icon which will instantly open a popup
   ... results with fav star, pin icon ... closed by X or by clicking outside it"); phones keep their own search ===== */
@media (min-width: 761px) {
  header .bar > .search, header .bar > .qx { display: none !important; }
  header .bar > .qbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; padding: 0; }
  header .bar > .qbtn .i { width: 16px; height: 16px; }
}
.qpop { position: fixed; inset: 0; z-index: 60; display: grid; justify-items: center; align-items: start; padding: 9vh 16px 16px;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.qpop[hidden] { display: none; }
.qp-box { width: min(580px, 100%); max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.qp-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.qp-hd h2 { margin: 0; font: 700 18px var(--ui); letter-spacing: -.01em; color: var(--text); }
.qp-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.qp-x:hover { color: var(--text); background: rgba(255,255,255,.07); } .qp-x .i { width: 16px; height: 16px; }
.qp-in { padding: 16px 16px 8px; }
.qp-in .search { display: block !important; width: 100%; height: 44px; padding: 0 14px; font-size: 14px; }
.qp-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 10px; }
.qp-body .qres { position: static; width: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none; background: none; padding: 0; }
.qp-hint { margin: 6px 12px 10px; color: var(--muted); font: 500 13px/1.45 var(--ui); }
.qp-body .nv-x, .qp-body .nv-m { padding-top: 10px; padding-bottom: 10px; font-size: 13.5px; }
.qp-body .nv-x .nm small { font-size: 11px; margin-top: 2px; }
.qp-body .nv-x img.rc { width: 24px; height: 24px; }
/* a result and its star / pin (in the popup, on phones' results and in the column) */
.qrw { display: flex; align-items: center; gap: 2px; padding-right: 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.qrw:hover { background: var(--head); }
.qrw > .nv-x, .qrw > .nv-m { flex: 1; min-width: 0; border-bottom: 0; } .qrw > .nv-x:hover, .qrw > .nv-m:hover { background: none; }
.qa { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--faint); cursor: pointer; }
.qa:hover { color: var(--text); background: rgba(255,255,255,.06); } .qa.on { color: var(--star); } .qa.on[data-pinl], .qa.on[data-qpin] { color: var(--accent); }
.qa .i { width: 16px; height: 16px; }
html.lt .qpop { background: rgba(13,30,40,.35); }
html.lt .qp-box { box-shadow: 0 24px 70px rgba(13,30,40,.25); }
html.lt .qp-x:hover, html.lt .qa:hover { background: var(--lt-box); }
.qp-in .search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }   /* no browser control */
.qp-body .nv-x { min-height: 52px; }
.qp-body .nv-x > .nm:first-child { padding-left: 8px; }      /* a team without a crest stays in line with the others */
.qp-body .nv-x[data-pls] > .nm:first-child { padding-left: 0; }      /* players: none has a picture */
html.lt .nv-m .t.lv { color: var(--lt-red) !important; }      /* a live minute among the results: light's live red, never lime on white */
@media (max-width: 760px) { .qrw .qa { display: none; } .qrw { padding-right: 0; } }      /* phones: their search as before (locked) */

/* pinned match cards in their teams' colours (owner, 2026-11-08, a reference card going from one side's colour through
   black to the other's): the home side's colour from the left, black in the middle, the away side's from the right;
   --hcol / --acol are read from the crests (livescore.js crestColour), grey when a crest has no clear colour */
#pins .pin.pinm:has(.pm), #pindock .pin.pinm:has(.pm) {
  /* (owner, 2026-11-09: "slightly reduce black middle area", then "degrade is very hard/short ... start degrade from
     color to black earlier ... softer and developing in larger width area"): each colour fades in small steps from
     the edge (62, 50, 38, 26, 14, 5 % of the colour at 0, 10, 20, 30, 39, 45 % of the width), black only at 49-51 % */
  background: linear-gradient(90deg, color-mix(in srgb, var(--hcol, #6b7078) 62%, #0b0c0e) 0%, color-mix(in srgb, var(--hcol, #6b7078) 50%, #0b0c0e) 10%, color-mix(in srgb, var(--hcol, #6b7078) 38%, #0b0c0e) 20%, color-mix(in srgb, var(--hcol, #6b7078) 26%, #0b0c0e) 30%, color-mix(in srgb, var(--hcol, #6b7078) 14%, #0b0c0e) 39%, color-mix(in srgb, var(--hcol, #6b7078) 5%, #0b0c0e) 45%,
    #0b0c0e 49%, #0b0c0e 51%, color-mix(in srgb, var(--acol, #6b7078) 5%, #0b0c0e) 55%, color-mix(in srgb, var(--acol, #6b7078) 14%, #0b0c0e) 61%, color-mix(in srgb, var(--acol, #6b7078) 26%, #0b0c0e) 70%, color-mix(in srgb, var(--acol, #6b7078) 38%, #0b0c0e) 80%, color-mix(in srgb, var(--acol, #6b7078) 50%, #0b0c0e) 90%, color-mix(in srgb, var(--acol, #6b7078) 62%, #0b0c0e) 100%); }
#pins .pin.pinm .pm .h, #pins .pin.pinm .pm .a, #pindock .pin.pinm .pm .h, #pindock .pin.pinm .pm .a { text-shadow: 0 1px 2px rgba(0,0,0,.45); }
#pins .pin.pinm .mch, #pindock .pin.pinm .mch { border-bottom-color: rgba(255,255,255,.1); }
html.lt #pins .pin.pinm:has(.pm), html.lt #pindock .pin.pinm:has(.pm) {
  background: linear-gradient(90deg, color-mix(in srgb, var(--hcol, #8a9099) 26%, #fff) 0%, color-mix(in srgb, var(--hcol, #8a9099) 20%, #fff) 12%, color-mix(in srgb, var(--hcol, #8a9099) 13%, #fff) 24%, color-mix(in srgb, var(--hcol, #8a9099) 7%, #fff) 34%, color-mix(in srgb, var(--hcol, #8a9099) 2%, #fff) 42%, #fff 47%, #fff 53%, color-mix(in srgb, var(--acol, #8a9099) 2%, #fff) 58%, color-mix(in srgb, var(--acol, #8a9099) 7%, #fff) 66%, color-mix(in srgb, var(--acol, #8a9099) 13%, #fff) 76%, color-mix(in srgb, var(--acol, #8a9099) 20%, #fff) 88%, color-mix(in srgb, var(--acol, #8a9099) 26%, #fff) 100%) !important; }
html.lt #pins .pin.pinm .pm .h, html.lt #pins .pin.pinm .pm .a, html.lt #pindock .pin.pinm .pm .h, html.lt #pindock .pin.pinm .pm .a { text-shadow: none; }
/* the pinned match card as the reference (owner, 2026-11-08: "have our team names on one line, without consuming two
   lines"): names alone on the top row at the edges, crests and scores below them, the time between */
.pin .pm.pm2 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px 8px; padding: 12px 14px 12px; }
.pin .pm2 .pn { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
/* the team names as the livescore feed's (owner, 2026-11-08: "apply same font size in teams like the ones we use in
   livescore feed"): Inter 12 px, weight 500 */
.pin .pm2 .pn span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
  font: 500 12px/1.3 var(--ui); letter-spacing: normal; color: #f2f2f2; }
.pin .pm2 .pn span.a { text-align: right; }
.pin .pm2 .hs, .pin .pm2 .as { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pin .pm2 .hs { justify-self: start; } .pin .pm2 .as { justify-self: end; }
.pin .pm2 .hs img, .pin .pm2 .as img { width: 26px; height: 26px; flex: none; }
/* the score boxes as they were (owner, 2026-11-08: "keep the original shape and corner radius we had") */
.pin .pm2 .sb { min-width: 28px; padding: 5px 7px 4px; text-align: center; border-radius: 6px; transform: skewX(-10deg); color: #fff;
  font: 700 18px/1 "Space Mono", ui-monospace, monospace; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.pin .pm2 .t { grid-column: auto; align-self: center; }
.pin .pm2 .ps { grid-column: 1 / -1; }
html.lt .pin .pm2 .pn span { color: var(--lt-ink); }
html.lt .pin .pm2 .sb { color: var(--lt-ink); background: var(--lt-box); box-shadow: inset 0 0 0 1px var(--lt-line); }
/* slightly wider pinned match cards (owner, 2026-11-08): 360 px (were 320), the dock with them */
#pins > .pin.pinm { width: min(360px, calc(100vw - 28px)); }
#pindock { width: min(360px, calc(100vw - 28px)); }
/* owner, 2026-11-08 (light, the pinned cards' column: "there must be no background behind cards and or its area/territory
   and also each card needs a very thin border soft grey"): no shade around the cards (their large shadows, stacked,
   made a grey area behind the column) and nothing behind the column; each card one thin soft grey line, live or not */
html.lt #pins .pin, html.lt #pindock .pin, html.lt #pins .pin:has(.pm), html.lt #pindock .pin:has(.pm),
html.lt #pins .pin:has(.pm.s-live), html.lt #pindock .pin:has(.pm.s-live) { box-shadow: none !important; border: 1px solid #e3e6ea !important; }
html.lt #pindock, html.lt #pindock.has { background: none !important; box-shadow: none !important; }
/* owner, 2026-11-09 (Centred, Livescore beside Live xG: "fix this header [logo bar] misalignment in Centred view"): the
   header took Live xG's 1,360 px frame while the list is 1,040 px, and its buttons were not pushed right, so it lined up
   with nothing. In Centred the header has the list's width: the logo where the list starts, LIVE / search / Map / Get
   alerts pushed to where it ends (as Live xG's own header does), Light and the page width as icons (their tooltips name
   them) so all fits. Live xG's header keeps its 1,360 px with its own content */
@media (min-width: 900px) {
  html[data-lay="b"] header .bar { max-width: 1040px; }
  html[data-lay="b"] header .bar > #livePill { margin-left: auto; }
  html[data-lay="b"] #ltBtn, html[data-lay="b"] #layBtn { width: 32px; padding: 0; justify-content: center; }
  html[data-lay="b"] #ltBtn span, html[data-lay="b"] #layBtn span { display: none; }
  /* the title's line ends where the list ends (it took the padding's 16 px on each side too) */
  html[data-lay="b"] header.seo-hero { max-width: 1008px; width: calc(100% - 32px); padding-left: 0; padding-right: 0; }
}
.lay-lg { display: none; }      /* the Centred page's Leagues button: desktop Centred only (shown below) */
/* owner, 2026-11-09 (Centred, from xG Trends to Livescore by the header: "leagues slide in and slide out as skeleton and
   very fast"): the page's entrance (panels rise 10 px into place, fx.css hf-up) also moved the Leagues panel, which in
   Centred is a sheet parked off screen: for half a second it stood on screen, then slid away. In Centred it never takes
   part in the entrance */
html[data-lay] .fx-in .grid > #p-nav { animation: none !important; }