/* Xgoals xG panel (D-C048): the look of xgpanel.js, the same on Goal Markets and in the match card. Self-contained: its own
   colours and fonts, every class xgp-, so neither page's styles reach in and it reaches into neither. It follows its own
   width (container queries), not the window's: wide on Markets, narrow in the card. Values are Markets' panel as it was
   (index.html + fx.css), merged. */
.xgp { container-type: inline-size; --xgp-h: #d1fe17; --xgp-a: #9ce6f3; --xgp-tx: #f7f7f8; --xgp-mu: #a7a8ab; --xgp-dim: #8d8e92;
  --xgp-ln: rgba(255,255,255,.054); --xgp-ln2: rgba(255,255,255,.101); --xgp-ln3: rgba(255,255,255,.173);
  --xgp-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --xgp-disp: "Space Grotesk", system-ui, sans-serif; --xgp-ui: "Inter", system-ui, -apple-system, sans-serif;
  display: block; color: var(--xgp-tx); font: 13px/1.45 var(--xgp-ui); text-align: left; -webkit-font-smoothing: antialiased; }
.xgp *, .xgp *::before, .xgp *::after { box-sizing: border-box; }
.xgp h3, .xgp p { margin: 0; padding: 0; }
.xgp button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; margin: 0; }
.xgp a { color: inherit; }
.xgp-dim { color: var(--xgp-dim); }
.xgp-num { font-family: "Space Mono", monospace; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* head */
.xgp-fx { padding: 16px 20px 0; }
.xgp-top { display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--xgp-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--xgp-mu); flex-wrap: wrap; }
.xgp-top .flag, .xgp-top .flg, .xgp-top img { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.xgp-tag { margin-left: 6px; padding: 4px 8px 3px; border-radius: 2px; transform: skewX(-11deg); border: 1px solid transparent;
  font: 700 10px/1 "Space Grotesk", sans-serif; letter-spacing: .04em; background: rgba(255,255,255,.08); color: #f7f7f8; }
.xgp-tag.hot { color: #1a1a1a; background: #d1fe17; border-color: #d1fe17; }
.xgp .xgp-open { margin-left: 10px; color: #d1fe17; text-decoration: none; font: 600 10px var(--xgp-mono); letter-spacing: .1em; transition: opacity .1s; }
.xgp .xgp-open:hover { opacity: .6; }
.xgp-min { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 6px 9px 5px; border-radius: 3px; transform: skewX(-18deg);
  font: 600 13px var(--xgp-mono); letter-spacing: .02em; color: #ffbe4c; box-shadow: inset 0 0 0 1.5px rgba(255,190,76,.5); }
.xgp-min.lv { color: #d1fe17; box-shadow: inset 0 0 0 1.5px rgba(209,254,23,.55); }
.xgp-min.lv > i { width: 7px; height: 7px; border-radius: 50%; background: #d1fe17; box-shadow: 0 0 8px rgba(209,254,23,.7); animation: xgp-blink 1.4s steps(2,start) infinite; }
@keyframes xgp-blink { 50% { opacity: .25; } }

/* teams, score, owed */
.xgp-main { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center; padding: 16px 0 18px; }
.xgp-teams { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 18px; }
.xgp-team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.xgp-team.r { flex-direction: row-reverse; text-align: right; }
.xgp-nm { font: 700 26px/1.1 "Space Grotesk", sans-serif; letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, #fff, #999); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xgp-sub { font: 700 11.5px/1.45 "Space Mono", monospace; letter-spacing: -.04em; color: var(--xgp-mu); margin-top: 5px; }
.xgp-score { display: flex; align-items: center; gap: 12px; font: 700 50px/1 "Space Mono", monospace; letter-spacing: -.04em; color: #fff; }
.xgp-score span { padding: 4px 14px; border-radius: 6px; transform: skewX(-8deg); background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.xgp-score i { font-style: normal; color: var(--xgp-dim); font-size: 30px; }
.xgp-cr { display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 15px; font: 800 15px/1 var(--xgp-disp); letter-spacing: .01em; color: #fff;
  background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 45%, #0f1113)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 26px -6px color-mix(in srgb, var(--c) 55%, transparent); }
.xgp-owed { border-left: 1px solid var(--xgp-ln2); padding-left: 24px; min-width: 230px; }
.xgp-owed .lbl { font: 600 9.5px/1 var(--xgp-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--xgp-mu); }
.xgp-owed .big { position: relative; overflow: hidden; display: inline-block; margin: 8px 0 10px -6px; padding: 2px 6px; border-radius: 10px;
  font: 700 46px/1 "Space Mono", monospace; letter-spacing: -.04em; text-shadow: 0 0 22px rgba(209,254,23,.35), 0 0 2px rgba(255,255,255,.4);
  background: linear-gradient(180deg, rgba(209,254,23,.12), rgba(209,254,23,.03)); 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); }
.xgp-owed .big::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: xgp-glint 7s ease-in-out infinite; }
@keyframes xgp-glint { 0%, 70% { left: -40%; } 100% { left: 130%; } }
.xgp-owed .rw { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; }
.xgp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 4px; border-radius: 3px; transform: skewX(-18deg); white-space: nowrap; text-transform: uppercase;
  font: 700 10px/1 "Space Grotesk", sans-serif; letter-spacing: .04em; color: #1a1a1a; background: var(--hc); border: 1px solid var(--hc); box-shadow: 0 0 10px -3px var(--hc); }
.xgp-chip.calm { background: rgba(255,255,255,.08); color: #a8a8a8; border-color: transparent; box-shadow: none; }
.xgp-chip.deep { color: #fff; }
.xgp-jmp { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px 4px; border-radius: 3px; transform: skewX(-18deg); white-space: nowrap;
  font: 700 10px/1 "Space Grotesk", sans-serif; letter-spacing: .04em; color: #1a1a1a; background: #9ce6f3; border: 1px solid #9ce6f3; }
.xgp-jmp svg { width: 10px; height: 10px; }

/* the six figures */
.xgp-stats { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); border-top: 1px solid var(--xgp-ln); border-bottom: 1px solid var(--xgp-ln); margin: 0 -20px; }
.xgp-stats > div { padding: 10px 16px; border-right: 1px solid var(--xgp-ln); min-width: 0; }
.xgp-stats > div:last-child { border-right: 0; }
/* D-C052: pressure now and the ordinary chance, a row under the figures */
.xgp-ctx { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,2fr); border-bottom: 1px solid var(--xgp-ln); margin: 0 -20px; }
.xgp-ctx > div { padding: 10px 16px; border-right: 1px solid var(--xgp-ln); min-width: 0; } .xgp-ctx > div:last-child { border-right: 0; }
.xgp-ctx > div > span { display: block; font: 600 9px/1 var(--xgp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--xgp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xgp-ctx b { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; margin-top: 7px; font: 600 14px/1 var(--xgp-mono); letter-spacing: -.02em; }
.xgp-ctx b .h { color: var(--xgp-h); } .xgp-ctx b .a { color: var(--xgp-a); } .xgp-ctx b em { font-style: normal; margin-left: 8px; }
.xgp-ctx b i { font-style: normal; color: var(--xgp-dim); font-weight: 400; font-size: 11px; }
.xgp-stats > div > span { display: block; font: 600 9px/1 var(--xgp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--xgp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xgp-stats b { display: flex; gap: 6px; align-items: baseline; margin-top: 7px; font: 600 14px/1 var(--xgp-mono); letter-spacing: -.02em; white-space: nowrap; }
.xgp-stats b .h { color: var(--xgp-h); } .xgp-stats b .a { color: var(--xgp-a); } .xgp-stats b i { font-style: normal; color: var(--xgp-dim); font-weight: 400; }

/* chart */
.xgp-cbar { display: flex; align-items: center; gap: 14px; padding: 12px 20px 4px; flex-wrap: wrap; }
.xgp-seg { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05); }
.xgp-seg button { height: 32px; padding: 0 12px; border-radius: 8px; color: #a8a8a8; font: 500 12px/1 "Inter", sans-serif; transition: opacity .1s ease-out; }
.xgp-seg button:hover { opacity: .6; }
.xgp-seg button[aria-pressed="true"] { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 2px 3px rgba(255,255,255,.03), 0 0 0 1px rgba(255,255,255,.05); }
.xgp-lgd { display: flex; gap: 16px; margin-left: auto; font: 500 11px var(--xgp-mono); color: var(--xgp-mu); flex-wrap: wrap; }
.xgp-lgd span { display: flex; align-items: center; gap: 7px; }
.xgp-lgd i { display: inline-block; width: 18px; height: 2px; border-radius: 2px; }
.xgp-lgd i.d { height: 0; border-top: 2px dashed; }
.xgp-lgd i.hh { width: 12px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(135deg, rgba(231,41,48,.55) 0 2px, rgba(231,41,48,.12) 2px 5px); }
.xgp-chart { position: relative; padding: 0 6px 8px; touch-action: pan-y; }
.xgp-chart svg { display: block; width: 100%; }
.xgp-ax { font: 500 10px var(--xgp-mono); fill: var(--xgp-dim); }
.xgp-axl { font: 600 9px var(--xgp-mono); letter-spacing: .14em; fill: var(--xgp-dim); }
.xgp-tp { position: absolute; pointer-events: none; min-width: 168px; padding: 10px 12px; border-radius: 10px; background: rgba(12,16,23,.96); border: 1px solid var(--xgp-ln3);
  box-shadow: 0 18px 40px rgba(0,0,0,.5); font: 500 11.5px/1.6 var(--xgp-mono); opacity: 0; transition: opacity .12s; z-index: 5; }
.xgp-tp.on { opacity: 1; }
.xgp-tp .tm { font-weight: 700; color: #fff; margin-bottom: 4px; display: flex; justify-content: space-between; gap: 12px; }
.xgp-tp .r { display: flex; justify-content: space-between; gap: 14px; color: var(--xgp-mu); }
.xgp-tp .r b { font-weight: 600; }
.xgp-pulse { animation: xgp-pdot 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes xgp-pdot { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
.xgp-src { padding: 2px 20px 12px; font: 500 10.5px var(--xgp-mono); color: var(--xgp-dim); letter-spacing: .03em; }
.xgp-empty { padding: 46px 20px 50px; text-align: center; color: var(--xgp-mu); font: 500 13px/1.6 var(--xgp-ui); }
.xgp-empty b { display: block; font: 700 20px/1.2 "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: -.04em; margin-bottom: 6px;
  background: linear-gradient(180deg, #fff, #999); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xgp .xgp-empty a { color: #d1fe17; font-weight: 600; }

/* a value that changed: up (more xG), down, a goal */
.xgp-fl-up { animation: xgp-flu 1.1s ease-out; } .xgp-fl-dn { animation: xgp-fld 1.1s ease-out; } .xgp-fl-goal { animation: xgp-flg 1.6s ease-out; }
@keyframes xgp-flu { 0% { background: rgba(255,79,3,.42); color: #fff; } 100% { background: transparent; } }
@keyframes xgp-fld { 0% { background: rgba(209,254,23,.38); color: #fff; } 100% { background: transparent; } }
@keyframes xgp-flg { 0%, 30% { background: #d1fe17; color: #0f1113; box-shadow: 0 0 30px rgba(209,254,23,.6); } 100% { background: transparent; box-shadow: none; } }

/* narrower panels: three figures a row, then the phone layout (Markets' own steps, measured by the panel's width) */
@container (max-width: 922px) {
  .xgp-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .xgp-stats > div:nth-child(3) { border-right: 0; }
  .xgp-stats > div:nth-child(-n+3) { border-bottom: 1px solid var(--xgp-ln); }
}
@container (max-width: 700px) {
  .xgp-ctx { margin: 0 -14px; grid-template-columns: minmax(0,1fr); } .xgp-ctx > div { border-right: 0; } .xgp-ctx > div + div { border-top: 1px solid var(--xgp-ln); }
  .xgp-main { grid-template-columns: minmax(0,1fr); }
  .xgp-owed { border-left: 0; padding-left: 0; border-top: 1px solid var(--xgp-ln); padding-top: 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; min-width: 0; }
  .xgp-owed .lbl { grid-column: 1 / -1; }
  .xgp-owed .big { margin-bottom: 0; font-size: 36px; }
  .xgp-fx { padding: 14px 14px 0; }
  .xgp-teams { gap: 10px; }
  .xgp-team { flex-direction: column; align-items: flex-start; gap: 8px; }
  .xgp-team.r { flex-direction: column; align-items: flex-end; }
  .xgp-cr { width: 40px; height: 40px; border-radius: 12px; font-size: 12px; }
  .xgp-nm { white-space: normal; }
  .xgp-score { font-size: 38px; gap: 6px; }
  .xgp-score i { font-size: 22px; }
  .xgp-stats { margin: 0 -14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .xgp-stats > div { padding: 9px 14px; border-bottom: 1px solid var(--xgp-ln); }
  .xgp-stats > div:nth-child(3) { border-right: 1px solid var(--xgp-ln); }
  .xgp-stats > div:nth-child(2n) { border-right: 0; }
  .xgp-stats > div:nth-last-child(-n+2) { border-bottom: 0; }
  .xgp-cbar { padding: 12px 14px 2px; }
  .xgp-lgd { margin-left: 0; gap: 12px; font-size: 10px; }
  .xgp-chart { padding: 0 0 6px; }
}
@media (prefers-reduced-motion: reduce) { .xgp *, .xgp *::before, .xgp *::after { animation: none !important; transition: none !important; } }
/* the chosen period's own numbers (1H, 2H, last 15'): each line counts from the period's start */
.xgp-per { margin: 2px 0 8px; font: 500 11px var(--xgp-mono); letter-spacing: .03em; color: var(--xgp-mu); }
.xgp-per b { color: #f2f2f2; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-right: 6px; }
.xgp-per i { font-style: normal; opacity: .4; margin: 0 6px; }
/* in the match card the card's own header shows the competition, teams and score: the panel starts at the xG Gap */
.xgp-in-card .xgp-top, .xgp-in-card .xgp-teams { display: none; }
.xgp-in-card .xgp-main { padding-top: 6px; }
/* the half chosen on the chart: its tile outlined in lime */
.xgp-stats > div.sel { box-shadow: inset 0 0 0 1px rgba(209,254,23,.7); background: rgba(209,254,23,.05); }
.xgp-per { padding: 0 20px; }
@media (max-width: 700px) { .xgp-per { padding: 0 14px; } }
/* a team's own crest in place of the initials badge (ctx.crest; owner, 2026-10-29) */
img.xgp-cr { background: none; box-shadow: none; border-radius: 0; object-fit: contain; }
img.xgp-cr.flc { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }

/* owner, 2026-10-31 (phones: "PORTSMOUTH" ran under the score): the names sized to their column beside the score, one
   line, "…" only past it; the score a little smaller */
@media (max-width: 560px) {
  .xgp-teams { gap: 8px; }
  .xgp-team { min-width: 0; max-width: 100%; }
  .xgp-team > div { width: 100%; min-width: 0; }
  .xgp-nm { font-size: 17px; letter-spacing: -.02em; white-space: normal; overflow-wrap: normal; max-width: 100%; text-overflow: clip;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .xgp-score { font-size: 32px; gap: 4px; }
  .xgp-score span { padding: 4px 9px; }
  .xgp-score i { font-size: 18px; }
}
/* each team's restart named under Current xG (owner, 2026-10-31) */
.xgp-since { display: block; margin-top: 4px; font: 500 10.5px/1.3 Inter, sans-serif; letter-spacing: 0; text-transform: none; color: var(--xgp-mu); white-space: normal; }

/* owner, 2026-10-31: "xG", never "XG", in labels set in capitals; the Current xG cell with the slow light sweep of the
   Trends Record's day rows (it changes all the time, so it reads as live) */
.xgp .xg { text-transform: none; }
.xgp-cur { position: relative; overflow: hidden; }
.xgp-cur::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,.08), transparent); animation: xgp-sweep 4.2s ease-in-out infinite; }
@keyframes xgp-sweep { 0% { left: -30%; } 55%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .xgp-cur::after { animation: none; display: none; } }
/* D-C265 (owner 2026-11-02): words in the stat row (over, not yet, starts again when play restarts) are not numbers:
   Inter 12px, and they wrap instead of being cut */
.xgp-stats b i.w { font: 400 12px/1.3 Inter, system-ui, sans-serif; letter-spacing: 0; white-space: normal; color: var(--xgp-dim); }
/* D-C265 (owner 2026-11-02): the chart's note under it is a sentence, not numbers: Inter, like the site's other notes */
.xgp-src { font: 400 11.5px/1.5 Inter, system-ui, sans-serif; letter-spacing: 0; }

/* owner, 2026-11-08 ("this big and small tooltips in graph needs a restyling over light theme"): in light the hover box
   was dark with light's dark text (its values unreadable) and the gap label a black box; now a white box with dark ink,
   the teams' names in light's own shades of their colours (lime and pale cyan are unreadable on white) */
html.lt .xgp-tp { background: rgba(255,255,255,.98); border-color: #e3e6ea; box-shadow: 0 14px 34px rgba(13,30,40,.18); color: #3c434b; }
html.lt .xgp-tp .tm, html.lt .xgp-tp .r b { color: #101418; }
html.lt .xgp-tp .r { color: #5f6670; }
html.lt .xgp-tp .r span[style*="--xgp-h"] { color: #4b7300 !important; }
html.lt .xgp-tp .r span[style*="--xgp-a"] { color: #0b7285 !important; }
html.lt rect.xgp-gl { fill: #ffffff; }
html.lt text.xgp-gl { fill: #101418 !important; }