/* Xgoals fx layer (D-C029): the polish shared by every page, after the Higgsfield study (style only, our own code).
   White low-alpha borders and a top-edge highlight, glass panels, a rotating cyan border on the featured match, alert
   washes on tiles, skewed alert badges, hover sheen, loading shimmer, "LCD" numbers and a faint moving grain.
   Dark theme only where it matters; everything stops under prefers-reduced-motion. */
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* 1. borders: white at low alpha, never grey; a highlight along each panel's top inside edge */
:root { --fx-l1: rgba(255,255,255,.05); --fx-l2: rgba(255,255,255,.09); --fx-l3: rgba(255,255,255,.18);
  --fx-hi: inset 0 1px 0 rgba(255,255,255,.06), inset 0 2px 3px rgba(255,255,255,.03), 0 6px 28px -10px rgba(0,0,0,.55); }
/* Goal Markets (home) */
body.fx-home { --ln: var(--fx-l1); --ln2: var(--fx-l2); --ln3: var(--fx-l3); }
/* scores and Mine, dark */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.fx-in { --line: var(--fx-l2); } }
:root[data-theme="dark"] body.fx-in { --line: var(--fx-l2); }

/* 2. glass: a soft white gradient over the dark, blurred, with the top highlight */
.fx-home .pnl, .fx-home .idx-st,
:root:not([data-theme="light"]) .fx-in .panel, :root:not([data-theme="light"]) .fx-in .box, :root:not([data-theme="light"]) .fx-in .list {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 82%, rgba(255,255,255,.03)), rgba(19,21,23,.86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--fx-hi); }
:root:not([data-theme="light"]) .fx-in .drawer {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 60%), rgba(19,21,23,.94);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 1px 0 0 rgba(255,255,255,.06), -24px 0 60px rgba(0,0,0,.55); }
/* D-C055: the docked match card is a standalone card, the same as the other panels */
:root:not([data-theme="light"]) .fx-in .drawer.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 82%, rgba(255,255,255,.03)), rgba(19,21,23,.86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--fx-hi); }

/* 3. the featured match: a cyan light slowly running around its border */
.fx-run { position: relative; }
.fx-run::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--fx-a), rgba(209,254,23,.85), rgba(255,255,255,.06) 22%, rgba(255,255,255,.06) 78%, rgba(209,254,23,.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fx-spin 5s linear infinite; }
@keyframes fx-spin { to { --fx-a: 360deg; } }

/* 4. each market tile washed from the top in its colour (warm → deep red; grey when calm) */
.fx-home .tile { background: linear-gradient(180deg, color-mix(in srgb, var(--hc) 16%, transparent), transparent 46%), var(--p); }
.fx-home .tile.lv-deep { background: linear-gradient(180deg, rgba(185,28,28,.30), transparent 55%), var(--p); }
.fx-in .xc.b1 { background: linear-gradient(180deg, color-mix(in srgb, var(--h1) 14%, transparent), transparent 50%), var(--panel); }
.fx-in .xc.b2 { background: linear-gradient(180deg, color-mix(in srgb, var(--h2) 16%, transparent), transparent 50%), var(--panel); }
.fx-in .xc.b3 { background: linear-gradient(180deg, color-mix(in srgb, var(--h3) 18%, transparent), transparent 50%), var(--panel); }
.fx-in .xc.b4 { background: linear-gradient(180deg, color-mix(in srgb, var(--h4) 30%, transparent), transparent 55%), var(--panel); }

/* 5. alert badges: skewed tags instead of round chips */
.fx-home .chip, .fx-home .jmp, .fx-in .al, .al.b1, .al.b2, .al.b3, .al.b4 {
  border-radius: 2px; transform: skewX(-11deg); font-family: "Space Grotesk", var(--disp, sans-serif); font-weight: 800; letter-spacing: .08em; }
.fx-home .chip::before { border-radius: 1px; }
.fx-home .tag { border-radius: 2px; transform: skewX(-11deg); }

/* 6. a light sheen across tiles and rows on hover; shimmer while loading */
.fx-home .tile, .fx-home .br, .fx-in .row, .fx-in .xc, .fx-in .hrow, .fx-in .sr, .fx-in .yc { position: relative; }
.fx-home .tile::after, .fx-home .br::after, .fx-in .row::after, .fx-in .xc::after, .fx-in .sr::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .15s ease-out;
  background: linear-gradient(130deg, rgba(255,255,255,.075) 11%, rgba(255,255,255,0) 46%); }
.fx-home .tile:hover::after, .fx-home .br:hover::after, .fx-in .row:hover::after, .fx-in .xc:hover::after, .fx-in .sr:hover::after { opacity: 1; }
.fx-skel { position: relative; overflow: hidden; }
.fx-skel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: fx-shim 1.4s ease-in-out infinite; }
@keyframes fx-shim { to { transform: translateX(100%); } }
.fx-skelrow { height: 132px; background: var(--p, var(--panel)); }
.fx-in .empty.load { background: linear-gradient(90deg, var(--muted) 0, var(--text) 50%, var(--muted) 100%) 0 0/200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fx-txt 2.2s linear infinite; }
@keyframes fx-txt { to { background-position: -200% 0; } }

/* 7. "LCD" numbers: the index, the owed number, the drawer's score glow, with a glint now and then */
.fx-home .idx-n, .fx-home .fx-owed .big { text-shadow: 0 0 22px rgba(209,254,23,.35), 0 0 2px rgba(255,255,255,.4); }
.fx-lcd { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(209,254,23,.10), rgba(209,254,23,.03)); box-shadow: inset 0 0 0 1px rgba(209,254,23,.22), inset 0 1px 0 rgba(255,255,255,.08); border-radius: 10px; }
.fx-lcd::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); animation: fx-glint 7s ease-in-out infinite; }
@keyframes fx-glint { 0%, 70% { left: -40%; } 100% { left: 130%; } }
:root:not([data-theme="light"]) .fx-in .dscore .big, :root:not([data-theme="light"]) .fx-in .dsc2 .big { text-shadow: 0 0 20px rgba(209,254,23,.28); }

/* 8. a faint, moving film grain over everything (our own noise, no image file) */
.fx-grain { position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fx-grain 1.2s steps(5) infinite; }
@keyframes fx-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 2%); } 100% { transform: translate(0, 0); } }
:root[data-theme="light"] .fx-grain { display: none; }

/* thin outline icons, as in the study (1.5–1.7 stroke) */
.fx-in .i { stroke-width: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .fx-run::after, .fx-skel::before, .fx-lcd::after, .fx-grain, .fx-in .empty { animation: none !important; }
  .fx-grain { display: none; }
}

/* ===================== Higgsfield look, replicated in our own CSS (D-C030) =====================
   flat near-black, white hairlines, one lime accent, Space Grotesk uppercase display, Inter UI, Space Mono numbers,
   lime CTA, pill segmented tabs, skewed badges, gradient headlines, glass, grain, glows, fade-in-up. */
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url(fonts/space-grotesk-300-700-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: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url(fonts/space-grotesk-300-700-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: "Space Mono"; font-weight: 400; font-display: swap; src: url(fonts/space-mono-400-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: "Space Mono"; font-weight: 400; font-display: swap; src: url(fonts/space-mono-400-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: "Space Mono"; font-weight: 700; font-display: swap; src: url(fonts/space-mono-700-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: "Space Mono"; font-weight: 700; font-display: swap; src: url(fonts/space-mono-700-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; }

:root { --hf-lime: #d1fe17; --hf-ink: #1a1a1a; --hf-t2: #a8a8a8; --hf-t3: #94959a; --hf-pink: #ff005b; --hf-sky: #9ce6f3;
  --hf-s1: #131517; --hf-s2: #18191c; --hf-s3: #1c1e21; --hf-s4: #23262a; }
/* flat page: no grid, no glow behind */
.fx-home::before, :root:not([data-theme="light"]) .fx-in::before { display: none !important; }
html, body.fx-home { background: #0f1113; }
body.fx-home, body.fx-in { font-family: Inter, system-ui, -apple-system, sans-serif; }
::selection { background: rgba(209,254,23,.85); color: var(--hf-ink); }

/* header: one dense row, grey links, the active one lime, a lime call to action on the right */
.fx-home .hdr, .fx-in header { background: rgba(15,17,19,.82); border-bottom: 1px solid rgba(255,255,255,.05); }
.fx-home .hdr { position: sticky; overflow-x: clip; overflow-y: visible; }   /* the sweep stays inside; menus hang below (owner, 2026-10-30: Insights was cut off) */
.fx-home .hdr::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 20%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent); animation: hf-sweep 1.6s .3s ease-out both; }
@keyframes hf-sweep { from { left: -30%; } to { left: 130%; } }
.wm, .brand { font-family: "Space Grotesk", sans-serif !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: -.04em !important; }
.wm b, .brand b { color: var(--hf-lime) !important; }
/* the wordmark "xGOALS" (owner, 2026-11-06: "make x lower case and make G same color as X"): the x in lowercase, the G in
   the x's colour, OALS lime. Done here once for every page: the markup X<b>goals</b> stays as it is. */
.wm, .brand, .sf-wm { text-transform: lowercase !important; }
.wm > *, .brand > *, .sf-wm > * { text-transform: uppercase; }
.wm > .x { text-transform: lowercase; }
.wm b, .brand b, .sf-wm b { display: inline-block; }
/* the G in the x's white; in the light theme the header's wordmark is all ink already, and light.css inks the footer's G */
html:not(.lt) .wm b::first-letter, html:not(.lt) .brand b::first-letter, .sf-wm b::first-letter { color: #f7f7f8; }
.fx-home .nav a, .mnav a, .fx-in nav.places a { font: 500 14px/1 Inter, sans-serif !important; letter-spacing: .1px !important; color: var(--hf-t2) !important; background: none !important; transition: opacity .1s ease-out !important; display: inline-flex; align-items: center; gap: 6px; }
.fx-home .nav a:hover, .mnav a:hover, .fx-in nav.places a:hover { opacity: .6; }
.fx-home .nav a[aria-current], .mnav a[aria-current="page"], .fx-in nav.places a[aria-current="page"] { color: var(--hf-lime) !important; }
.fx-home .nav a[aria-current]::after, .mnav a[aria-current="page"]::after, .fx-in nav.places a[aria-current="page"]::after { display: none !important; }
.hf-new { font: 700 9px/1 "Space Grotesk", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--hf-ink); background: var(--hf-lime); padding: 3px 5px 2px; border-radius: 2px; transform: skewX(-11deg); }
.hf-cta { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--hf-lime); color: var(--hf-ink) !important;
  font: 600 14px/1 Inter, sans-serif; text-decoration: none; transition: opacity .1s ease-out; box-shadow: 0 0 0 1px rgba(209,254,23,.4), 0 6px 24px -6px rgba(209,254,23,.45); }
.hf-cta:hover { opacity: .85; }
.fx-home .livect, .fx-in .pill { background: rgba(209,254,23,.08) !important; border: 1px solid rgba(209,254,23,.18) !important; color: var(--hf-lime) !important; border-radius: 10px !important; height: 36px; padding: 0 12px !important; font: 700 12px/1 "Space Mono", monospace !important; box-shadow: inset 0 2px 3px rgba(255,255,255,.03); }
.fx-home .ldot, .fx-in .pill .dot { background: var(--hf-pink) !important; box-shadow: 0 0 10px var(--hf-pink) !important; }
.fx-home .ldot::after { background: var(--hf-pink) !important; }
.fx-home .srch, .fx-in header .search, .fx-in .sbox input { height: 36px !important; border-radius: 10px !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.05) !important; }
.fx-home .srch:focus-within, .fx-in header .search:focus, .fx-in .sbox input:focus { border-color: rgba(209,254,23,.45) !important; box-shadow: 0 0 0 3px rgba(209,254,23,.10) !important; }
.fx-in header .btn, .fx-in .ibtn { height: 36px; border-radius: 10px; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.05); color: var(--hf-t2); }
.fx-in header .btn:hover, .fx-in .ibtn:hover { opacity: .6; color: #fff; }
@media (max-width: 760px) { .hf-cta { display: none; } .hf-new { display: none; } }

/* cards: 16px corners, white hairline, glass; titles in Space Grotesk uppercase */
.fx-home .pnl, .fx-home .idx-st, .fx-in .panel, .fx-in .box, .fx-in .list { border-radius: 16px !important; border: 1px solid rgba(255,255,255,.05) !important; }
.fx-home .pnl-h, .fx-in .phead { border-bottom: 1px solid rgba(255,255,255,.05) !important; }
.fx-home .pnl-h .t, .fx-in .plabel, .fx-in .box h3 { font: 700 13px/1 "Space Grotesk", sans-serif !important; letter-spacing: -.01em !important; text-transform: uppercase; color: #f7f7f8 !important; }
.fx-home .pnl-h .sq, .fx-in .plabel::before, .fx-in .box h3::before { background: var(--hf-lime) !important; box-shadow: 0 0 10px rgba(209,254,23,.6) !important; border-radius: 1px; }
.fx-home .pnl-h, .fx-home .idx-k, .fx-home .pnl-h .rt, .fx-in .pcount { color: var(--hf-t3) !important; }
.fx-home .idx-k .tk { color: var(--hf-ink) !important; background: var(--hf-lime); border-color: var(--hf-lime) !important; border-radius: 2px !important; transform: skewX(-11deg); font-weight: 700; }

/* headlines: white → grey gradient, Space Grotesk uppercase */
.fx-home .fx-nm, .fx-in .dscore .tm, .fx-in .dsc2 .dn, .fx-in .dbar h1, .fx-in .ctitle, .fx-home .fx-empty b {
  font-family: "Space Grotesk", sans-serif !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: -.04em !important;
  background: linear-gradient(180deg, #fff, #999); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.fx-in .ctitle .cn { -webkit-text-fill-color: #898a8b; }
.fx-home .fx-nm { font-size: 26px !important; }
.fx-home .t-row .nm, .fx-home .br .bn { font-family: Inter, sans-serif !important; font-weight: 600 !important; }

/* numbers in Space Mono */
.fx-home .num, .fx-home .idx-n, .fx-home .fx-score, .fx-home .big, .fx-home .t-row .sc, .fx-home .t-bot .ow, .fx-home .bo, .fx-in .score b, .fx-in .dscore .big, .fx-in .dsc2 .big, .fx-in .xct .g { font-family: "Space Mono", monospace !important; font-weight: 700 !important; letter-spacing: -.04em !important; }
.fx-home .idx-n { color: var(--hf-lime) !important; text-shadow: 0 0 24px rgba(209,254,23,.45), 0 0 2px rgba(255,255,255,.5) !important; }
.fx-lcd { background: linear-gradient(180deg, rgba(209,254,23,.12), rgba(209,254,23,.03)) !important; box-shadow: inset 0 0 0 1px rgba(209,254,23,.28), inset 0 1px 0 rgba(255,255,255,.08), 0 0 30px -8px rgba(209,254,23,.35) !important; }

/* segmented pill tabs: white-5% well, 12px corners, the active item lifted */
.fx-home .seg, .fx-home .flt, .fx-in .seg, .fx-in .rbar, .fx-in .xgw, .fx-in .subt, .fx-in .chips, .fx-in .flt, .fx-home .sort select {
  background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.05) !important; border-radius: 12px !important; padding: 4px !important; gap: 2px !important; }
.fx-in .rbar, .fx-in .xgw, .fx-in .subt, .fx-in .chips { margin: 8px 12px !important; width: fit-content; max-width: calc(100% - 24px); }
.fx-home .sort select { padding: 0 26px 0 10px !important; height: 34px; }
.fx-home .seg button, .fx-home .flt button, .fx-in .seg button, .fx-in .rbar button, .fx-in .xgw button, .fx-in .subt button, .fx-in .chip, .fx-in .flt button {
  height: 32px !important; padding: 0 12px !important; border-radius: 8px !important; border: 0 !important; background: none !important; color: var(--hf-t2) !important;
  font: 500 12px/1 Inter, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; transition: opacity .1s ease-out; }
.fx-home .seg button:hover, .fx-home .flt button:hover, .fx-in .seg button:hover, .fx-in .rbar button:hover, .fx-in .xgw button:hover, .fx-in .subt button:hover, .fx-in .chip:hover { opacity: .6; }
.fx-home .seg button[aria-pressed="true"], .fx-home .flt button[aria-pressed="true"], .fx-in .seg button[aria-pressed="true"], .fx-in .rbar button[aria-pressed="true"],
.fx-in .xgw button[aria-pressed="true"], .fx-in .subt button[aria-pressed="true"], .fx-in .chip[aria-pressed="true"], .fx-in .flt button[aria-pressed="true"] {
  background: rgba(255,255,255,.08) !important; color: #fff !important; box-shadow: inset 0 2px 3px rgba(255,255,255,.03), 0 0 0 1px rgba(255,255,255,.05) !important; }
.fx-in .rbar button[aria-pressed="true"] .n, .fx-in .rbar button[aria-pressed="true"] .lv, .fx-home .flt button[aria-pressed="true"] em { color: var(--hf-t2) !important; }
.fx-in .rbar button[aria-pressed="true"] .lv::before { background: var(--hf-pink) !important; }
.fx-in .tab { border-radius: 10px !important; font: 600 13px Inter, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.05) !important; color: var(--hf-t2) !important; }
.fx-in .tab[aria-selected="true"] { background: var(--hf-lime) !important; color: var(--hf-ink) !important; }
.fx-in .dtab { font: 500 13px Inter, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
.fx-in .dtab[aria-selected="true"] { border-color: #fff !important; box-shadow: none !important; }

/* market tiles: separate cards with 16px corners, a wash in their alert colour */
.fx-home .tiles { gap: 12px !important; padding: 12px !important; background: none !important; }
.fx-home .tile { border-radius: 16px; border: 1px solid rgba(255,255,255,.05); overflow: hidden; transition: transform .1s ease-out, border-color .1s ease-out; }
.fx-home .tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.12); }
.fx-home .tile::before { width: 100% !important; height: 2px; bottom: auto !important; }
.fx-home .tile.sel { box-shadow: 0 0 0 1px var(--hf-lime), 0 0 30px -10px rgba(209,254,23,.6) !important; }
.fx-skelrow { border-radius: 16px; }
.fx-in .xc { border-radius: 16px !important; border-color: rgba(255,255,255,.05) !important; }

/* badges: skewed, Space Grotesk; live in pink, as their sale tags */
.fx-home .chip, .fx-home .jmp, .fx-in .al, .fx-home .tag { font: 700 10px/1 "Space Grotesk", sans-serif !important; letter-spacing: .04em !important; }
.fx-home .tag.hot, .fx-home .tag { color: var(--hf-ink) !important; background: var(--hf-pink) !important; border-color: var(--hf-pink) !important; }
.fx-home .tag:not(.hot) { background: rgba(255,255,255,.08) !important; color: #f7f7f8 !important; border-color: transparent !important; }
.fx-home .chip { color: var(--hf-ink) !important; background: var(--hc) !important; border-color: var(--hc) !important; }
.fx-home .chip::before { background: var(--hf-ink) !important; box-shadow: none !important; }
.fx-home .chip.calm { background: rgba(255,255,255,.08) !important; color: var(--hf-t2) !important; border-color: transparent !important; }
.fx-home .chip.calm::before { background: var(--hf-t3) !important; }
.fx-home .chip.deep { color: #fff !important; } .fx-home .chip.deep::before { background: #fff !important; }
.fx-home .jmp { color: var(--hf-ink) !important; background: var(--hf-sky) !important; border-color: var(--hf-sky) !important; }
.fx-in .al.b1 { color: var(--hf-ink) !important; background: #ffbe4c !important; } .fx-in .al.b2 { background: #ff4f03 !important; }
.fx-home .fx-min.lv i, .fx-home .t-top .mn.lv::before { background: var(--hf-pink) !important; box-shadow: 0 0 8px var(--hf-pink) !important; }

/* links and footers: grey, hover by opacity */
.fx-home .foot a, .fx-in footer a, .fx-in .proto a, .fx-home .fx-open, .fx-home .fx-empty a { color: var(--hf-lime) !important; transition: opacity .1s; }
.fx-home .foot a:hover, .fx-in footer a:hover, .fx-home .fx-open:hover { opacity: .6; }

/* motion: cards fade up as the page opens */
.fx-home .idx, .fx-home .main .pnl, .fx-in .grid > .panel, .fx-in .cards2 > .box { animation: hf-up .5s cubic-bezier(.2,.8,.2,1) both; }
.fx-home .main .col:first-child .pnl:nth-child(2), .fx-in .grid > .panel:nth-child(2) { animation-delay: .06s; }
.fx-home .side .pnl:nth-child(1), .fx-in .grid > .panel:nth-child(3) { animation-delay: .1s; }
.fx-home .side .pnl:nth-child(2), .fx-in .grid > .panel:nth-child(4) { animation-delay: .14s; }
.fx-home .side .pnl:nth-child(3) { animation-delay: .18s; }
@keyframes hf-up { from { opacity: 0; transform: translateY(10px); } }
/* the running border, in lime */
.fx-run::after { background: conic-gradient(from var(--fx-a), rgba(209,254,23,.9), rgba(255,255,255,.06) 22%, rgba(255,255,255,.06) 78%, rgba(209,254,23,.9)) !important; }
.fx-grain { opacity: .06; }
.fx-home .i, .fx-in .i { stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .fx-home .hdr::after, .fx-in header::after, .fx-home .idx, .fx-home .main .pnl, .fx-in .grid > .panel, .fx-in .cards2 > .box { animation: none !important; } }

/* dark only since D-C030: the theme switch is gone */
#themeBtn { display: none !important; }

/* ===== SEO structure (D-C032): the H1 line, headings that keep their old look, the site footer ===== */
.seo-hero { padding: 26px 0 0; }
.seo-hero h1 { margin: 0; font: 700 clamp(26px, 3.6vw, 44px)/1.02 "Space Grotesk", sans-serif; letter-spacing: -.045em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff, #999); -webkit-background-clip: text; background-clip: text; color: transparent; }
.seo-hero h1 > span { background: none; -webkit-text-fill-color: #d1fe17; color: #d1fe17; text-shadow: 0 0 28px rgba(209,254,23,.35); }
.seo-hero p { margin: 8px 0 0; max-width: 720px; color: #898a8b; font: 400 14px/1.5 Inter, sans-serif; }
.seo-in { width: 100%; max-width: 1880px; margin: 0 auto; padding: 18px 16px 0; }
.seo-in h1 { font-size: clamp(22px, 2.6vw, 32px); }
.seo-in h1 > span { -webkit-text-fill-color: #898a8b; color: #898a8b; text-shadow: none; text-transform: none; letter-spacing: -.01em; font-weight: 500; font-size: .55em; }
h2.t, h2.plabel { margin: 0; }
.side-k h3 { margin: 0; font: inherit; letter-spacing: inherit; }
h3.fx-nm { margin: 0; }
.dsub2 { flex-basis: 100%; margin: 4px 0 0; font: 400 14px/1.4 Inter, sans-serif; color: #898a8b; }
.fx-in .dbar { flex-wrap: wrap; }

/* the site footer: what Xgoals is, the places, the competitions, xG explained */
footer.sf { flex: none; width: 100%; max-width: none; margin: 40px 0 0; padding: 0; white-space: normal; overflow: visible; text-overflow: clip;
  border-top: 1px solid rgba(255,255,255,.05); background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%); color: #898a8b; font: 400 13px/1.55 Inter, sans-serif; letter-spacing: 0; }
.sf-in { max-width: 1480px; margin: 0 auto; padding: 36px 20px 20px; display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)); gap: 28px; }
.sf-wm { display: inline-block; font: 700 22px/1 "Space Grotesk", sans-serif; letter-spacing: -.04em; text-transform: uppercase; color: #f7f7f8; text-decoration: none; }
.sf-wm b { color: #d1fe17; font-weight: 700; }
.sf h2 { margin: 14px 0 8px; font: 700 15px/1.2 "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: -.01em; color: #f7f7f8; }
.sf h3 { margin: 0 0 13px; font: 700 12px/1 "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: .02em; color: #f7f7f8; }
.sf p { margin: 0; max-width: 560px; } .sf p b { color: #d0d0d0; font-weight: 600; }
.sf-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }   /* links 25px tall to tap (speed check, 2026-10-30): same spacing as before */
.sf-col a { padding: 4px 0; color: #a8a8a8 !important; text-decoration: none; font: 500 13px/1.3 Inter, sans-serif; transition: opacity .1s ease-out; }
.sf-col a:hover { opacity: .6; color: #d1fe17 !important; }
.sf-xg p { font-size: 12.5px; }
.sf-note { max-width: 1480px !important; margin: 0 auto !important; padding: 0 20px 10px; font-size: 12px; color: #7e7e7e; }
.sf-note .i { width: 12px; height: 12px; vertical-align: -1px; }
.sf-bot { max-width: 1480px; margin: 0 auto; padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.05); font: 400 11.5px/1.5 Inter, system-ui, sans-serif; color: #7e7e7e; }   /* owner, 2026-11-01 (D-C265): Inter, was Space Mono */
@media (max-width: 1100px) { .sf-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .sf-in { grid-template-columns: minmax(0, 1fr); gap: 22px; } .seo-hero p { font-size: 13px; } }

/* xG keeps its case inside capitalised labels (fx.js, D-C033) */
.xg { text-transform: none !important; }
.fx-home .sort select { text-transform: none !important; }

/* ===== odds (D-C034) and the form badges, Higgsfield style ===== */
.team .od { display: block; margin-top: 2px; font: 400 10.5px/1 "Space Mono", monospace; color: #7e7e7e; letter-spacing: -.02em; }
.score .od { display: block; margin-top: 3px; font: 400 10px/1 "Space Mono", monospace; color: #7e7e7e; }
.od.fav { color: #d1fe17 !important; }
.row.s-ko { padding-top: 7px; padding-bottom: 7px; }
.ohd { display: flex; align-items: center; gap: 10px; margin: 14px 14px 4px; font: 500 12px Inter, sans-serif; color: #898a8b; }
.obk { font: 700 10px/1 "Space Grotesk", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #f7f7f8; background: rgba(255,255,255,.08); padding: 5px 7px 4px; border-radius: 2px; transform: skewX(-11deg); }
.om { margin: 12px 14px 0; }
.om h3 { margin: 0 0 8px; font: 700 12px/1 "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: .01em; color: #f7f7f8; }
.ogrid { display: grid; gap: 6px; } .ogrid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ogrid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); min-width: 0; }
.oc span { font: 500 11.5px Inter, sans-serif; color: #898a8b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc b { font: 700 20px/1 "Space Mono", monospace; letter-spacing: -.04em; color: #f7f7f8; }
.oc small { font: 400 10.5px "Space Mono", monospace; color: #7e7e7e; }
.oc.fav { background: linear-gradient(180deg, rgba(209,254,23,.12), rgba(209,254,23,.03)); border-color: rgba(209,254,23,.35); }
.oc.fav b { color: #d1fe17; text-shadow: 0 0 18px rgba(209,254,23,.35); } .oc.fav small { color: #a8a8a8; }
.ot { width: 100%; border-collapse: separate; border-spacing: 0 4px; font: 400 12px "Space Mono", monospace; }
.ot th { font: 600 10.5px/1.2 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .03em;   /* owner, 2026-11-01: the table heading label */ color: #7e7e7e; text-align: left; padding: 0 12px; }
.ot td { padding: 7px 12px; background: rgba(255,255,255,.04); color: #a8a8a8; } .ot td:first-child { border-radius: 10px 0 0 10px; color: #f7f7f8; } .ot td:last-child { border-radius: 0 10px 10px 0; }
.ot td b { color: #f7f7f8; font-size: 14px; margin-right: 8px; } .ot td small { color: #7e7e7e; }
.ot tr.main td { background: rgba(209,254,23,.08); } .ot tr.main td b { color: #d1fe17; }
.onote { margin: 14px 14px 6px; font: 400 11px/1.5 Inter, sans-serif; color: #7e7e7e; }
/* W / D / L: skewed tags, lime win, grey draw, pink-outline loss, "?" the next match */
.res { width: 20px; height: 20px; border-radius: 3px; transform: skewX(-11deg); font: 700 10px/1 "Space Grotesk", sans-serif !important; letter-spacing: 0; }
.res.W { background: #d1fe17 !important; color: #1a1a1a !important; box-shadow: 0 0 10px -2px rgba(209,254,23,.5); }
.res.D { background: rgba(255,255,255,.10) !important; color: #c8c8c8 !important; }
.res.L { background: transparent !important; color: #ff5c8f !important; box-shadow: inset 0 0 0 1.5px rgba(255,0,91,.6); }
.res.Q { background: transparent !important; color: #7e7e7e !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.stt .frm { gap: 4px; } .stt .frm .res { width: 18px; height: 18px; font-size: 9.5px !important; }
.xgs .W { fill: #d1fe17; } .xgs .D { fill: #6b6d70; } .xgs .L { fill: #ff005b; }
.hsum .bars i:nth-child(1) { background: #d1fe17; } .hsum .bars i:nth-child(2) { background: #6b6d70; } .hsum .bars i:nth-child(3) { background: #9ce6f3; }

/* ===== D-C035: form tags all filled; the same skewed tag on the home's market blocks ===== */
.res.D { background: #ffbe4c !important; color: #1a1a1a !important; box-shadow: 0 0 10px -3px rgba(255,190,76,.5) !important; }
.res.L { background: #ff005b !important; color: #fff !important; box-shadow: 0 0 10px -3px rgba(255,0,91,.55) !important; }
.xgs .D { fill: #ffbe4c; } .xgs .L { fill: #ff005b; }
.hsum .bars i:nth-child(2) { background: #ffbe4c; }
/* one tag shape: 3px corners, skewed, Space Grotesk / Space Mono, solid fill */
.fx-home .t-row .sc, .fx-home .ti .sc, .fx-home .t-top .mn, .fx-home .chip, .fx-home .jmp, .fx-home .t-bot .ow, .fx-home .fx-min, .fx-home .bo {
  border-radius: 3px !important; transform: skewX(-11deg); }
.fx-home .t-row .sc { min-width: 24px; padding: 3px 6px !important; text-align: center; background: rgba(255,255,255,.10); color: #f7f7f8 !important; font: 700 13px/1 "Space Mono", monospace !important; }
.fx-home .ti .sc { background: rgba(255,255,255,.10) !important; color: #f7f7f8 !important; font-weight: 700; }
.fx-home .t-top .mn { padding: 4px 6px 3px; font: 700 10px/1 "Space Mono", monospace !important; color: #ff5c8f !important; box-shadow: inset 0 0 0 1.5px rgba(255,0,91,.55); }
.fx-home .t-top .mn:not(.lv) { color: #ffbe4c !important; box-shadow: inset 0 0 0 1.5px rgba(255,190,76,.5); }
.fx-home .t-top .mn.lv::before { display: none; }
.fx-home .chip { padding: 5px 8px 4px !important; font: 700 10px/1 "Space Grotesk", sans-serif !important; letter-spacing: .04em !important; box-shadow: 0 0 10px -3px var(--hc); }
.fx-home .chip::before { display: none !important; }
.fx-home .chip.calm { box-shadow: none; }
.fx-home .jmp { padding: 5px 7px 4px !important; }
.fx-home .t-bot .ow { padding: 4px 7px 3px !important; margin-left: 0 !important; background: rgba(255,255,255,.06); }
.fx-home .t-bot .ow small { margin-right: 6px; }
.fx-home .fx-min { padding: 6px 9px 5px; box-shadow: inset 0 0 0 1.5px rgba(255,0,91,.55); color: #ff5c8f !important; }
.fx-home .fx-min:not(.lv) { box-shadow: inset 0 0 0 1.5px rgba(255,190,76,.5); color: #ffbe4c !important; }
.fx-home .bo { padding: 4px 6px !important; background: rgba(255,255,255,.06); }
/* the featured score as two skewed tags */
.fx-home .fx-score span { transform: skewX(-8deg); background: rgba(255,255,255,.06); border-radius: 6px; padding: 4px 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }

/* ===== the day picker (D-C036) ===== */
.cal { position: fixed; z-index: 40; width: 304px; padding: 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), rgba(19,21,23,.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); animation: hf-up .18s ease-out both; }
.cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-h b { font: 700 14px/1 "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: -.01em; color: #f7f7f8; }
.cal-h button { width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05); color: #a8a8a8; display: grid; place-items: center; transition: opacity .1s; }
.cal-h button:hover { opacity: .6; } .cal-h .i { width: 14px; height: 14px; }
.cal-q { display: flex; gap: 2px; padding: 4px; margin-bottom: 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05); }
.cal-q button { flex: 1; height: 30px; border-radius: 8px; font: 500 12px Inter, sans-serif; color: #a8a8a8; }
.cal-q button:hover { background: rgba(255,255,255,.06); color: #fff; } .cal-q button.on { background: rgba(255,255,255,.08); color: #fff; }
.cal-w, .cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-w span { text-align: center; padding: 4px 0; font: 700 10px "Space Mono", monospace; text-transform: uppercase; color: #7e7e7e; }
.cal-g button { height: 34px; border-radius: 9px; font: 700 13px "Space Mono", monospace; color: #d0d0d0; background: rgba(255,255,255,.03); border: 1px solid transparent; transition: background .1s; }
.cal-g button:hover { background: rgba(255,255,255,.09); }
.cal-g button.now { border-color: rgba(209,254,23,.55); color: #d1fe17; }
.cal-g button.sel { background: #d1fe17; color: #1a1a1a; border-color: #d1fe17; transform: skewX(-8deg); box-shadow: 0 0 16px -4px rgba(209,254,23,.6); }
.dnav .day::after { content: "▾"; margin-left: 8px; font-size: 10px; color: #7e7e7e; }

/* ===== in-play odds (D-C037) ===== */
.oseg { margin: 14px 14px 0 !important; }
.obk.lv { color: #1a1a1a; background: #ff005b; color: #fff; }
.opause { color: #ffbe4c; font-weight: 600; }
.oc.sus { opacity: .45; } .oc.sus b { color: #7e7e7e; }
.om .ogrid + .ogrid { margin-top: 6px; }

/* ===== stacked match rows (D-C038 draft; on when <html data-rows="stacked">) ===== */
.row.stk { grid-template-columns: 26px 62px minmax(0, 1fr) 58px 52px 32px; gap: 8px; padding: 9px 12px 9px 4px; align-items: center; }   /* owner, 2026-10-28: … heat bar, xG, score at the far right */
.row.stk .ck { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.row.stk .ck .clock { display: inline-flex; align-self: flex-start; }
.row.stk .ck small { font: 400 9.5px "Space Mono", monospace; color: #7e7e7e; white-space: nowrap; }
.row.stk .tms { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.row.stk .tl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 12px/1.15 Inter, sans-serif;   /* owner, 2026-11-01: 12px (was 14px) */ color: #d6d6d6; }
.row.stk .tl.w { color: #fff; font-weight: 700; } .row.stk .tl.l { color: #898a8b; }
.row.stk .tl.scored { color: #d1fe17; }
.row.stk .scs { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.row.stk .scs b { display: block; text-align: center; padding: 2px 0 1px; border-radius: 3px; transform: skewX(-11deg); background: rgba(255,255,255,.08); font: 700 13px/1.15 "Space Mono", monospace; color: #f7f7f8; }
.row.stk .scs b.l { color: #898a8b; background: rgba(255,255,255,.04); }
.row.stk .scs b.scored { background: #d1fe17; color: #1a1a1a; }
.row.stk.s-live .scs b { box-shadow: inset 0 0 0 1px rgba(255,0,91,.35); }
.row.stk .s2, .row.stk .s3 { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; min-width: 0; }
.row.stk .s2 i, .row.stk .s3 i { font: 400 11px/1.2 "Space Mono", monospace; font-style: normal; color: #7e7e7e; white-space: nowrap; }
.row.stk .x2 i { color: #9ce6f3; } .row.stk .x2 i::before { content: "xG "; color: #4a4c50; font-size: 9px; }
.row.stk .od2 i, .row.stk .od3 i { color: #898a8b; } .row.stk i.fav { color: #d1fe17 !important; }
.row.stk .s3 .hbar { width: 52px; }
/* owner, 2026-10-28: the alert band as a skewed pill in its colour (D-C080 tag look) */
.row.stk .s3:has(.hp) { justify-content: center; }
.row.stk .hp { display: inline-block; padding: 3px 6px 2px; border-radius: 3px; transform: skewX(-11deg); font: 700 9.5px/1 "Space Mono", monospace;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.row.stk .hp.b1 { background: #ffbe4c; color: #111; } .row.stk .hp.b2 { background: #ff4f03; } .row.stk .hp.b3 { background: #e72930; }
.row.stk .hp.b4 { background: #b91c1c; box-shadow: 0 0 8px rgba(185,28,28,.6); }
/* owner, 2026-10-28: Scoreline's "Against xG" mark in the main feed, outlined so it never reads as the Warm alert pill */
.row.stk .vsx { flex: none; margin-left: 7px; padding: 2px 5px 1px; border: 1px solid #ffbe4c; border-radius: 3px; transform: skewX(-11deg);
  font: 700 8.5px/1 "Space Grotesk", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #ffbe4c; white-space: nowrap; }
.row.stk .tl:has(.vsx) { display: flex; align-items: center; } .row.stk .tl .tn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row.stk .tl:has(.vsx) > img { flex: none; }
@media (max-width: 520px) { .row.stk .hp { padding: 3px 4px 2px; font-size: 8.5px; letter-spacing: 0; } }
.row.stk .clock.c-ko { font-size: 12px; }
@media (max-width: 520px) { .row.stk { grid-template-columns: 22px 46px minmax(0, 1fr) 50px 44px 28px; gap: 6px; } .row.stk .tl { font-size: 13.5px; } .row.stk .s2 i, .row.stk .s3 i { font-size: 10px; } }

/* stacked rows, round 2 (D-C038): brighter minute and status; the skew means "live" only */
.row.stk .clock { font: 700 12.5px/1 "Space Mono", monospace !important; letter-spacing: -.02em; }
.row.stk .clock.c-live { color: #ff2e74 !important; text-shadow: 0 0 12px rgba(255,0,91,.45); }
.row.stk .clock.c-live::before { background: #ff2e74 !important; box-shadow: 0 0 8px #ff2e74; }
.row.stk .clock.c-ht { color: #ffbe4c !important; text-shadow: 0 0 10px rgba(255,190,76,.35); }
.row.stk .clock.c-ko { color: #d1fe17 !important; }
.row.stk .clock.c-end { color: #c8c8c8 !important; font-weight: 700 !important; }
/* finished: plain upright numbers, no box; 13 px as the live scores and the prices (owner, 2026-11-05: "are final score
   digits maybe larger than supposed?": they were 14) */
.row.stk .scs b, .row.stk .scs b.l { transform: none; background: none !important; box-shadow: none !important; padding: 0; font: 700 13px/1.15 "Space Mono", monospace; color: #f7f7f8; }
.row.stk .scs b.l { color: #6b6d70; }
/* live and half-time: skewed tags that glow */
.row.stk.s-live .scs b, .row.stk.s-ht .scs b { transform: skewX(-11deg); padding: 2px 0 1px; border-radius: 3px; color: #fff; }
.row.stk.s-live .scs b { background: rgba(255,0,91,.16) !important; box-shadow: inset 0 0 0 1.5px rgba(255,46,116,.7), 0 0 12px -4px rgba(255,0,91,.6) !important; }
/* half time: the same quiet boxes as any score, the text a little dimmer (paused); the amber "HT" clock says the rest
   (owner, 2026-10-28: the amber boxes were noise) */
.row.stk.s-ht .scs b { background: rgba(255,255,255,.06) !important; box-shadow: none !important; color: #c8c8c8 !important; }
.row.stk.s-live .scs b.l, .row.stk.s-ht .scs b.l { color: #d0d0d0; }
.row.stk .scs b.scored { background: #d1fe17 !important; color: #1a1a1a !important; box-shadow: 0 0 16px -2px rgba(209,254,23,.7) !important; }

/* stacked rows, round 3 (D-C038): live minute in lime, kick-off times grey like FT, finished scores one colour */
.row.stk .clock.c-live { color: #d1fe17 !important; text-shadow: 0 0 12px rgba(209,254,23,.45); }
.row.stk .clock.c-live::before { background: #d1fe17 !important; box-shadow: 0 0 8px #d1fe17; }
.row.stk .clock.c-ko { color: #c8c8c8 !important; }
.row.stk.s-end .scs b, .row.stk.s-end .scs b.l { color: #f7f7f8; }

/* ===== D-C042: Goal Markets, strong skew (owner, 2026-10-26: "make also these as skew (strong skew angles)") =====
   the market cards are parallelograms; their content stands upright; the tags inside and the filter buttons lean harder */
.fx-home .tiles { padding: 14px 26px !important; gap: 14px 20px !important; }
.fx-home .tile { transform: skewX(-12deg); border-radius: 8px; }
.fx-home .tile:hover { transform: skewX(-12deg) translateY(-2px); }
.fx-home .tile > * { transform: skewX(12deg); }
.fx-home .t-row .sc, .fx-home .ti .sc, .fx-home .t-top .mn, .fx-home .chip, .fx-home .jmp, .fx-home .t-bot .ow, .fx-home .fx-min, .fx-home .bo { transform: skewX(-18deg); }
.fx-home .flt { transform: skewX(-18deg); border-radius: 6px !important; }
.fx-home .flt button { transform: none; border-radius: 4px !important; }
@media (max-width: 560px) { .fx-home .tiles { padding: 12px 20px !important; } .fx-home .tile, .fx-home .tile:hover { transform: skewX(-8deg); } .fx-home .tile > * { transform: skewX(8deg); } }

/* ===== D-C044: live is lime everywhere (owner, 2026-10-26: "replace all pink like colors in minutes and live match status
   with the default we defined for main feed"); kick-off times grey, as in the feed, so they never read as live ===== */
html:root { --live: #d1fe17 !important; --live-bg: rgba(209,254,23,.08) !important; --kick: #c8c8c8 !important; }
.fx-home .ldot, .fx-in .pill .dot, .fx-home .ldot::after, .fx-in .rbar button[aria-pressed="true"] .lv::before,
.fx-home .fx-min.lv i, .fx-home .t-top .mn.lv::before { background: #d1fe17 !important; box-shadow: 0 0 8px rgba(209,254,23,.7) !important; }
.fx-home .t-top .mn.lv, .fx-home .ti .mn.lv, .fx-home .fx-min.lv { color: #d1fe17 !important; box-shadow: inset 0 0 0 1.5px rgba(209,254,23,.55) !important; }
.fx-home .t-top .mn:not(.lv), .fx-home .fx-min:not(.lv) { color: #ffbe4c !important; box-shadow: inset 0 0 0 1.5px rgba(255,190,76,.5) !important; }
.fx-in .pill { color: #d1fe17 !important; border-color: rgba(209,254,23,.3) !important; }
.subt button[aria-pressed="true"] { color: #1a1a1a !important; }
.obk.lv { background: #d1fe17 !important; color: #1a1a1a !important; }
.dscore .big small, .clock.c-live, .mcard .mr .t.c-live, .pin .pm .t.c-live, .nv-m .t.lv { color: #d1fe17 !important; }

/* ===== D-C044: a goal on Markets — wherever the match shows (slanted card, featured panel, owed list, tape, feed),
   for 60 s: a lime frame that pulses, a GOAL tag, the scoring side lit ===== */
@keyframes xgGoal { 0%, 100% { box-shadow: 0 0 0 2px #d1fe17, 0 0 36px -6px rgba(209,254,23,.85); } 50% { box-shadow: 0 0 0 2px #d1fe17, 0 0 12px -6px rgba(209,254,23,.4); } }
.fx-home .xg-goal { animation: xgGoal 1.1s ease-in-out 6; box-shadow: 0 0 0 2px #d1fe17, 0 0 30px -8px rgba(209,254,23,.7) !important;
  background-image: linear-gradient(180deg, rgba(209,254,23,.14), transparent 60%) !important; }
.fx-home .xg-goal::before { background: #d1fe17 !important; opacity: 1 !important; }
/* the GOAL tag: on the card's top line, the featured panel's top line, after the name in the owed list */
.fx-home .tile.xg-goal .t-top::after, .fx-home .pnl.xg-goal .xgp-top::after, .fx-home .br.xg-goal-me .bn::after, .fx-home .ti.xg-goal .sy::after {
  content: "GOAL"; display: inline-block; margin-left: 8px; padding: 3px 6px 2px; transform: skewX(-18deg); border-radius: 3px;
  background: #d1fe17; color: #1a1a1a; font: 700 10px/1 "Space Grotesk", sans-serif; letter-spacing: .08em; box-shadow: 0 0 14px -2px rgba(209,254,23,.8); }
.fx-home .tile.xg-goal .t-top::after { order: 9; flex: none; }
/* D-C074: on the ticker the GOAL tag sits over the item, so it does not widen it (a wider item moved the whole strip) */
.fx-home .ti.xg-goal .sy::after { position: absolute; top: 3px; right: 8px; margin: 0; padding: 2px 5px 1px; font-size: 9px; }
/* the scoring side: its score tag filled lime, its name lime */
.fx-home .tile.xg-goal-h .t-row:nth-child(1) .sc, .fx-home .tile.xg-goal-a .t-row:nth-child(2) .sc,
.fx-home .pnl.xg-goal-h .xgp-score span:first-child, .fx-home .pnl.xg-goal-a .xgp-score span:last-of-type {
  background: #d1fe17 !important; color: #1a1a1a !important; box-shadow: 0 0 18px -2px rgba(209,254,23,.8) !important; }
.fx-home .tile.xg-goal-h .t-row:nth-child(1) .nm, .fx-home .tile.xg-goal-a .t-row:nth-child(2) .nm,
.fx-home .pnl.xg-goal-h .xgp-team:not(.r) .xgp-nm, .fx-home .pnl.xg-goal-a .xgp-team.r .xgp-nm, .fx-home .br.xg-goal-me .bn { color: #d1fe17 !important; }
.fx-home .br.xg-goal:not(.xg-goal-me) { animation: none; box-shadow: inset 2px 0 0 #d1fe17 !important; }
/* the new number itself (0-0 → 1-0: the 1) flashes slowly for ~13 s, then stays lit (D-C050) */
@keyframes xgScoreFlash { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }
.fx-home .br.xg-goal-h .bx .gh, .fx-home .br.xg-goal-a .bx .ga, .fx-home .ti.xg-goal-h .sc .gh, .fx-home .ti.xg-goal-a .sc .ga {
  background: #d1fe17; color: #1a1a1a; }
.fx-home .tile.xg-goal-h .t-row:nth-child(1) .sc, .fx-home .tile.xg-goal-a .t-row:nth-child(2) .sc,
.fx-home .pnl.xg-goal-h .xgp-score span:first-child, .fx-home .pnl.xg-goal-a .xgp-score span:last-of-type,
.fx-home .br.xg-goal-h .bx .gh, .fx-home .br.xg-goal-a .bx .ga, .fx-home .ti.xg-goal-h .sc .gh, .fx-home .ti.xg-goal-a .sc .ga {
  animation: xgScoreFlash 1.8s ease-in-out 7; }
.fx-home .br .bx b, .fx-home .ti .sc b { font-weight: inherit; padding: 0 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .fx-home .xg-goal, .fx-home .xg-goal-h *, .fx-home .xg-goal-a * { animation: none !important; } }

/* ===== D-C044 round 2 (owner: "yes" to lime for the live score tags and the "Most owed now" label) =====
   live score tags in the feed rows: lime outline and glow; a goal now flashes white so it still stands out; HT stays amber */
.row.stk.s-live .scs b { background: rgba(209,254,23,.10) !important; box-shadow: inset 0 0 0 1.5px rgba(209,254,23,.65), 0 0 12px -4px rgba(209,254,23,.55) !important; }
.row.stk .scs b.scored { background: #fff !important; color: #1a1a1a !important; box-shadow: 0 0 18px -2px rgba(255,255,255,.85) !important; }
.fx-home .tag.hot, .fx-home .tag { color: #1a1a1a !important; background: #d1fe17 !important; border-color: #d1fe17 !important; }

/* ===== D-C050 (supersedes D-C044 round 2's lime outline; owner: "score numbers does not need that lime border ... they
   should only have the same background score in Markets have"): live score numbers in the feed look like Markets'
   score (a soft light fill, no outline, no glow); a goal just now still lights white ===== */
.row.stk.s-live .scs b:not(.scored) { background: rgba(255,255,255,.08) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; color: #fff; }

/* ===== D-C045: Scoreline, one goal a row in the feed's stacked look ===== */
.gl.gs { grid-template-columns: 52px minmax(0, 1fr) 30px 52px; grid-template-areas: "ck tms scs x2" "ck sub sub sub"; gap: 4px 10px; align-items: center; padding: 10px 14px; }
.gl.gs .ck { grid-area: ck; display: flex; flex-direction: column; gap: 4px; align-self: start; padding-top: 2px; }
.gl.gs .ck .m { font: 700 12.5px/1 "Space Mono", monospace; color: #d1fe17; text-shadow: 0 0 12px rgba(209,254,23,.4); }
.gl.gs .ck .t { font: 400 11px/1 "Space Mono", monospace; color: #c8c8c8; }
.gl.gs .tms { grid-area: tms; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gl.gs .tl { font-size: 14.5px; line-height: 1.2; color: #a8a8a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl.gs .tl.w { color: #f7f7f8; font-weight: 700; }
.gl.gs .scs { grid-area: scs; display: flex; flex-direction: column; gap: 5px; }
.gl.gs .scs b { display: block; text-align: center; padding: 2px 0 1px; border-radius: 3px; transform: skewX(-11deg); font: 700 13px/1.15 "Space Mono", monospace; color: #d0d0d0; background: rgba(255,255,255,.06); }
.gl.gs .scs b.scored { background: #d1fe17; color: #1a1a1a; box-shadow: 0 0 14px -3px rgba(209,254,23,.7); }
.gl.gs .s2 { grid-area: x2; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.gl.gs .s2 i { font: 400 11px/1.2 "Space Mono", monospace; font-style: normal; color: #7e7e7e; }
.gl.gs .s2 i.me { color: #a8a8a8; }
.gl.gs .sub { grid-area: sub; font-size: 12px; color: #898a8b; display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl.gs .sub .i { width: 13px; height: 13px; flex: none; }
.gl.gs .vs { flex: none; margin-right: 6px; padding: 3px 6px 2px; border-radius: 3px; transform: skewX(-18deg); background: #ffbe4c; color: #1a1a1a; font: 700 9.5px/1 "Space Grotesk", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.gl.gs.new { background: linear-gradient(90deg, rgba(209,254,23,.10), transparent 70%); }
.gl.gs.cancel .tl.w, .gl.gs.cancel .scs b { opacity: .5; }
@media (max-width: 520px) { .gl.gs { grid-template-columns: 46px minmax(0, 1fr) 28px 44px; gap: 4px 8px; padding: 10px; } .gl.gs .tl { font-size: 13.5px; } }

/* ===== D-C051: team pages (#tm=<team id>/<tab>) and team links ===== */
.tlink { all: unset; cursor: pointer; border-radius: 3px; }
.tlink:hover, .tlink:focus-visible { text-decoration: underline; text-underline-offset: 3px; color: #d1fe17; }
.stt td.tm[data-team] { cursor: pointer; } .stt td.tm[data-team]:hover { color: #d1fe17; }
.ctitle .tcrest { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 8px; transform: skewX(-8deg);
  background: linear-gradient(135deg, rgba(209,254,23,.22), rgba(255,255,255,.06)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  font: 700 11px/1 "Space Grotesk", sans-serif; letter-spacing: .04em; color: #fff; vertical-align: middle; }
.ctitle .tnm { font: 700 18px/1.1 "Space Grotesk", sans-serif; letter-spacing: -.01em; text-transform: uppercase; vertical-align: middle; }
.tsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 14px 4px; }
.tbox { padding: 12px 14px; border-radius: 8px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); min-width: 0; }
.tbox h2 { margin: 0 0 8px; font: 600 10.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: .03em;   /* owner, 2026-11-01: the label style */ text-transform: uppercase; color: #8b8d90; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbox small { display: block; margin-top: 6px; font: 400 11.5px/1.4 Inter, system-ui, sans-serif; color: #8b8d90;   /* owner, 2026-11-01 (D-C265): words in Inter, mono only for numbers */ }
.tbig { font: 700 26px/1 "Space Mono", monospace; letter-spacing: -.04em; color: #fff; } .tbig small { display: inline; margin: 0; font-size: 12px; }
.tform { display: flex; gap: 5px; }
.hsec .more.in { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font: 700 10px "Space Mono", monospace; letter-spacing: .08em; text-decoration: none; color: #d1fe17; }
.xgs.one { grid-template-columns: 1fr; }

/* ===== D-C052: xG table, team xG extras, xG preview, the ordinary chance ===== */
.stt td.up { color: #d1fe17; } .stt td.dn { color: #ff5c8f; }
.tflag { margin: 10px 14px 0; padding: 10px 12px; border-radius: 8px; font: 500 12.5px/1.45 Inter, sans-serif; color: #d6d6d6;
  background: rgba(255,255,255,.04); box-shadow: inset 3px 0 0 #d1fe17; } .tflag.cold { box-shadow: inset 3px 0 0 #ff5c8f; }
.tflag b { color: #fff; }
.ttrend, .tgt { display: block; width: calc(100% - 28px); margin: 8px 14px 0; height: 120px; }
.ttrend .f { stroke: #d1fe17; } .ttrend .a { stroke: #8b8d90; } .ttrend .g { stroke: rgba(255,255,255,.08); }
.ttrend text, .tgt text { font: 400 9px "Space Mono", monospace; fill: #8b8d90; }
.tgt .f { fill: #d1fe17; } .tgt .a { fill: #ff5c8f; }
.tgtx { display: grid; grid-template-columns: repeat(6, 1fr); margin: 2px 14px 0; font: 400 10px "Space Mono", monospace; color: #8b8d90; text-align: center; }
.tgtx b { margin-left: 6px; color: #d1fe17; font-weight: 700; } .tgtx i { margin-left: 4px; font-style: normal; color: #ff5c8f; }
.xprev { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px 12px; align-items: center; margin: 10px 14px 0; text-align: center; }
.xprev .big { font: 700 28px/1 "Space Mono", monospace; color: #fff; } .xprev small { display: block; font: 400 10.5px "Space Mono", monospace; color: #8b8d90; }
.xpb { grid-column: 1 / -1; display: flex; gap: 3px; height: 30px; margin-top: 6px; }
.xpb span { display: flex; align-items: center; justify-content: center; min-width: 0; border-radius: 4px; transform: skewX(-12deg);
  font: 700 12px/1 "Space Mono", monospace; color: #1a1a1a; white-space: nowrap; overflow: hidden; }
.xpb .h { background: #d1fe17; box-shadow: 0 0 14px -4px rgba(209,254,23,.6); } .xpb .d { background: #4a4d52; color: #f2f2f2; } .xpb .a { background: #8fd3ff; }
.xpl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin-top: 8px;
  font: 400 11px/1.3 Inter, sans-serif; color: #8b8d90; text-align: left; }
.xpl span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .xpl b { color: #fff; font: 700 11px "Space Mono", monospace; }
.xpl i { width: 9px; height: 9px; border-radius: 2px; transform: skewX(-12deg); } .xpl i.h { background: #d1fe17; } .xpl i.d { background: #4a4d52; } .xpl i.a { background: #8fd3ff; }
/* ===== D-C054: a match being played blinks the ' of its minute and the : / – of its score, once a second (the page
   toggles .blk-off on <html> every half second) ===== */
i.blk { font-style: normal; transition: opacity .2s ease-in-out; }
.blk-off i.blk { opacity: .15; }
/* owner 2026-11-03 (revised the same day): the live minute's ' flashes on a 1-second cycle (the page tick every 0.5 s)
   only where no dot pulses beside the minute; next to a pulsing dot (match lists, match header and its docked copy,
   xG board, xG panel) the ' stays still */
:is(.clock.c-live, .dsc2 .dclk, .dmini .dmc, .xch .clk, tr.mh .clk, .xgp-min.lv) i.blk { opacity: 1 !important; transition: none; }

/* ===== D-C067: the Markets ticker's live minute without the outline (owner: "minutes come with a border which is ugly");
   lime text and the blinking ' stay ===== */
.fx-home .ti .mn.lv { box-shadow: none !important; padding: 0 !important; background: none !important; }

/* owner 2026-10-28: a penalty shootout being played ("Pen") flashes, wherever its status shows; owner: "slower, make it
   intervals of 2 sec": a 2-second cycle, 1 s shown, 1 s dimmed */
/* owner: "flash is jump cut, i prefer a slow fading like the circle dot in minutes": a smooth fade to a quarter and
   back, as the live minute's dot (livescore.css .clock.c-live::before), over the owner's 2 s */
@keyframes penL { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pen-l { animation: penL 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pen-l { animation: none; } }
/* owner, 2026-10-29: a status in Scoreline's minute place, only its colour differs, as the feed's: a break amber, an end light grey */
.gl.gs .ck .m.mst-b { color: #ffbe4c; text-shadow: 0 0 10px rgba(255,190,76,.35); }
.gl.gs .ck .m.mst-e { color: #c8c8c8; text-shadow: none; }
/* the shootout's score next to "Shootout over" in Scoreline */
.gl.gs .sub .pso { font: 700 11.5px "Space Mono", monospace; color: #f7f7f8; }

/* owner, 2026-10-30 (three references): phones read small and crisp: one clean font (Inter) at regular weights for names,
   times, scores and days instead of the bold mono; no logo and no calendar icon in the bar; a gutter at the sides */
@media (max-width: 760px) {
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  header .bar > a.wm { display: none !important; }
  .dstrip .dsc { display: none !important; }
  .grid { padding-left: 10px !important; padding-right: 10px !important; }
  .dsd b { font: 600 9.5px/1 Inter, sans-serif !important; letter-spacing: .03em; }   /* owner, 2026-11-02: smaller on phones */
  .dsd span { font: 500 11.5px/1 Inter, sans-serif !important; font-variant-numeric: tabular-nums; }
  .dsd { min-width: 54px; padding: 8px 5px 7px; }
  .row.stk .tl { font: 400 12px/1.2 Inter, sans-serif; color: #e6e6e6; }   /* owner, 2026-10-31: 1 px smaller; 2026-11-01: 12px */
  .row.stk .tl.w { font-weight: 600; color: #fff; }
  .row.stk .tl.l { color: #98999b; }
  .row.stk .clock { font: 600 11px/1 Inter, sans-serif !important; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .row.stk .scs b, .row.stk .scs b.l, .row.stk .scs b.w { font: 600 13px/1.2 Inter, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0; }   /* both scores (b.l had kept the mono) */
  .row.stk .s2 i, .row.stk .s3 i { font: 400 11px/1.2 Inter, sans-serif; font-variant-numeric: tabular-nums; }
  .group h3 { font-family: Inter, sans-serif; }
  .group h3 .co { font: 400 13px Inter, sans-serif; } .group h3 .cm { font: 600 13px Inter, sans-serif; }
  .rg18 { font-family: Inter, sans-serif !important; font-size: 11px !important; }
  /* the page's heading: the top bar names the section (app.js); a heading that only repeats it is kept for search but hidden */
  header.seo-hero { padding: 10px 12px 2px !important; }
  header.seo-hero h1 { font-size: 22px !important; letter-spacing: -.03em !important; }
  header.seo-hero.dup { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; padding: 0 !important; }
}

/* D-C115/D-C186: the phones' bottom bar, the title (SECTION ▾) and the "Go to" sheet: here, so they are drawn with the page's first
   frame (owner, 2026-10-30: "on initial load on phone there is a flash, an instant jump"); app.js only makes them work */
.tsw { display: none; }
html.xgs-open { overflow: hidden; }
.xgs-sc { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.55); }
.xgs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 121; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; background: #0e1012;
  border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); transform: translateY(100%);
  transition: transform .26s cubic-bezier(.2,.9,.3,1); padding-bottom: env(safe-area-inset-bottom); font-family: Inter, system-ui, sans-serif; }
.xgs.in { transform: none; }
@media (min-width: 761px) { .xgs { left: 50%; right: auto; width: 440px; margin-left: -220px; } }
.xgs-h { position: relative; display: flex; align-items: center; justify-content: center; height: 60px; flex: none; }
.xgs-h b { font: 600 17px Inter, system-ui, sans-serif; color: #f7f7f8; }
.xgs-x { position: absolute; right: 12px; top: 10px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: #f7f7f8; cursor: pointer; }
.xgs svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xgs-x svg { width: 18px; height: 18px; stroke-width: 2.2; }
.xgs-b { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
.xgs-k { padding: 9px 16px 8px; background: rgba(255,255,255,.04); font: 600 11.5px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8b8d90; }
.xgs-i { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,.06); color: #f2f2f2;
  text-decoration: none; -webkit-tap-highlight-color: transparent; }
.xgs-i:active { background: rgba(255,255,255,.05); }
.xgs-i > svg { color: #8b8d90; }
.xgs-t { display: grid; gap: 2px; min-width: 0; flex: 1; } .xgs-t b { font: 600 15.5px/1.2 Inter, sans-serif; } .xgs-t small { font: 400 12.5px/1.2 Inter, sans-serif; color: #8b8d90; }
.xgs-i.on { background: rgba(209,254,23,.06); } .xgs-i.on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #d1fe17; }
.xgs-i.on > svg, .xgs-i.on .xgs-t b { color: #d1fe17; }
.xgs-n { font: 600 12px Inter, sans-serif; font-style: normal; padding: 3px 8px; border-radius: 6px; background: #e5484d; color: #fff; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .xgs { transition: none; } }
.xgn { display: none; }
@media (max-width: 760px) {
  .bnav { display: none !important; }
  /* owner, 2026-10-30: the bar floats over the content as glass: in from the sides and above the home indicator, rounded,
     see-through with a strong blur; the current section in its own darker pill */
  .xgn { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; position: fixed; left: 12px; right: 12px; z-index: 90;
    bottom: max(8px, calc(env(safe-area-inset-bottom) * .5)); height: 62px; padding: 5px; border-radius: 26px;   /* owner, 2026-10-30: as low as the references */
    background: rgba(19,21,23,.62); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
  .xgn > * { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none;
    border-radius: 21px; color: #8b8d90; font: 600 10.5px "Space Grotesk", Inter, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s;
    touch-action: manipulation; user-select: none; -webkit-user-select: none; }
  .xgn > *.press { background: rgba(255,255,255,.08); }
  .xgn > *[aria-current="page"] { color: #d1fe17; background: rgba(0,0,0,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .xgn { background: #131517; } }
  .xgn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .xgn .xgt { font: 700 14px/21px "Space Grotesk", sans-serif; letter-spacing: -.03em; height: 21px; }
  .xgn .bd { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff3d6e;
    color: #fff; font: 700 9.5px/16px "Space Mono", monospace; text-align: center; }
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom) * .5); }
  html body .toast { bottom: calc(80px + env(safe-area-inset-bottom) * .5); }
  /* owner, 2026-10-30: on phones no logo and no hamburger; the page's section is the title (SECTION ▾) */
  header .wm, header .brand, #navBtn { display: none !important; }
  body > header nav[aria-label="Main"], header.hdr > .nav { display: none !important; }   /* the title opens the sections */
  .tsw .xg { text-transform: none; }
  body > header > .tsw { margin: 10px 0 10px 16px; }     /* the pages whose header has no inner padding (the guide, How we measure...) */
  .tsw { display: inline-flex !important; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; margin: 0 auto 0 0; padding: 4px 2px; border: 0; background: none;
    color: #f7f7f8; font: 700 21px/1 "Space Grotesk", Inter, sans-serif; letter-spacing: -.03em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tsw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tsw svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
}
.xgn > a { text-decoration: none; }
/* owner, 2026-10-30 ("Phone needs a dedicated back button especially during Leagues navigation"): left of the title,
   shown when there is somewhere to go back to (app.js) */
.tbk { display: none; }
@media (max-width: 760px) {
  .tbk { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin: 0 4px 0 0; padding: 0; border-radius: 9px;   /* owner, 2026-11-06 (LOCKED): one Back, the arrow in a square */
    border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #f7f7f8; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .tbk[hidden] { display: none !important; }
  .tbk:active { background: rgba(255,255,255,.12); }
  .tbk svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  body > header > .tbk { margin: 10px 0 10px 12px; }
  body > header > .tbk:not([hidden]) + .tsw { margin-left: 4px; }
  /* the heading that would repeat the title, hidden from the first paint (livescore.html's head; livescore.js decides after) */
  html.hdup header.seo-hero { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; padding: 0 !important; }
}

/* owner, 2026-10-31: the footer on phones, folded. The about text stays; each link group opens under its heading (ui.js) */
@media (max-width: 760px) {
  .sf-in { gap: 0 !important; padding: 26px 16px 6px !important; }
  .sf-about { margin-bottom: 16px; }
  .sf-col { border-top: 1px solid rgba(255,255,255,.07); }
  .sf-col:last-child { border-bottom: 1px solid rgba(255,255,255,.07); }
  .sf-col > h3 { display: flex; align-items: center; justify-content: space-between; min-height: 46px; margin: 0 !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .sf-col > h3::after { content: ""; width: 7px; height: 7px; margin: 0 4px 4px 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .2s ease-out; }
  .sf-col.open > h3::after { transform: translateY(4px) rotate(-135deg); }
  .sf-col:not(.open) > a, .sf-col:not(.open) > p { display: none; }
  .sf-col.open { padding-bottom: 12px; }
  .sf-note { display: none; }
  .sf-bot { font-size: 11px; }
}
/* owner 2026-11-03 ("activate animation in all horizontal bars as well, sitewide"): every bar drawn with an inline width
   in % grows from the left, like the goal-time bars grow from the ground (gbk-grow); layout boxes sized in px are not
   matched; nothing moves for reduced motion */
:is(i, b, u, span, em)[style^="width:"][style*="%"] { animation: xg-hgrow .85s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes xg-hgrow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { :is(i, b, u, span, em)[style^="width:"][style*="%"] { animation: none; } }
/* a bar redrawn as the visitor types or drags (the xG Guide's calculators) stays still: it would restart at every change */
#xcL :is(i, b, u, span, em)[style^="width:"], #xcR :is(i, b, u, span, em)[style^="width:"], #xcG :is(i, b, u, span, em)[style^="width:"], #xpR :is(i, b, u, span, em)[style^="width:"] { animation: none; }
/* owner 2026-11-03: a split bar (home / draw / away, in line / close / against, leading / level / behind…) opens from the left */
.tsp { animation: xg-split .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes xg-split { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .tsp { animation: none; } }
/* owner 2026-11-04 ("Should this menu have smaller font size to comply with the entire phone style?"): the Go to sheet
   one step smaller, in the phone's scale (rows 12-13 px, chips 11.5 px), its rows still 48+ px to tap */
.xgs-t b { font-size: 14px; } .xgs-t small { font-size: 11.5px; }
.xgs-i { min-height: 50px; gap: 13px; } .xgs-i > svg { width: 20px; height: 20px; }
.xgs-k { font-size: 10.5px; padding: 8px 16px 7px; } .xgs-h b { font-size: 16px; }
/* owner, 2026-11-05 ("should final scores and live scores font family be the same as the one we use for team names ...
   keep the mono only for xG landing page graphs and charts", then "do step 1"): scores, match minutes and kick-off
   times in Inter, as the team names, at every width (phones had them already), with figures of one width so the
   columns still line up; Space Mono stays for xG, stats, prices and the charts (step 2, to decide). The match header's
   big score keeps Space Mono (owner, same day: "should have not changed, roll back") */
.row.stk .scs b, .row.stk .clock, .gl.gs .scs b, .gl.gs .ck .m, .gl.gs .ck .t, .otm b.osc, .ost .okt, .ost .clock,
.dsc2 .dclk, .dsc2 .dht, .dmini .dmc, .hrow .scs, .hrow .scs small,
.nv-m .t, .xch .clk, .xgt tr.mh .clk, .clock, .fx-in .score b, .fx-home .t-row .sc, .fx-home .fx-score {
  font-family: Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; font-variant-numeric: tabular-nums; }
/* Inter's figures stand taller than Space Mono's at the same size (owner, 2026-11-05: "score numbers are big, looks
   strange compared to surround"): the lists' scores and minutes as on phones, one step lighter */
.row.stk .scs b, .row.stk .scs b.l, .row.stk .scs b.w, .gl.gs .scs b, .otm b.osc { font-size: 12.5px !important; font-weight: 600 !important; }
.row.stk .clock, .gl.gs .ck .m { font-size: 12px !important; font-weight: 600 !important; }
/* fonts step 2, row 2 (owner, 2026-11-05: "i want the odds prices moved to Inter"): every odds price in Inter, like the
   scores; the 1 / X / 2 labels with them. Tabular figures keep the columns lined up */
.row.stk .s2.o3 i, .gl.gs .s2.o3 i, .s2.od2 i, small.od, .team .od, .score .od, .oc b, .oc small, .obx b {
  font-family: Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; font-variant-numeric: tabular-nums; }
.oc b { font-weight: 600 !important; font-size: 18px !important; }
/* layout prototype B (owner, 2026-11-05: "make live xg width compatible to rest of b"): Live xG in B's frame: the header
   in the same 1,360 px frame as Livescore B, the content centred at B's 1,040 px (the side column 340 px) */
@media (min-width: 1120px) {
  html[data-lay="b"] .fx-home .hdr { padding-left: max(24px, calc((100vw - 1360px) / 2 + 16px)); padding-right: max(24px, calc((100vw - 1360px) / 2 + 16px)); }
  html[data-lay="b"] .fx-home .seo-hero { padding-top: 10px; }
  html[data-lay="b"] .fx-home .seo-hero h1 { font-size: 16px; letter-spacing: -.01em; }
  /* owner, 2026-11-05 ("main card's elements are not comfortable in this space … i cant afford loosing right column
     elements"): Live xG, a dashboard, takes the whole of B's 1,360 px frame (the header's edges); the lists stay at 1,040 */
  html[data-lay="b"] .fx-home .wrap { max-width: 1360px; padding-left: 16px; padding-right: 16px; }
  html[data-lay="b"] .fx-home .main { grid-template-columns: minmax(0, 1fr) 340px; }
}