/* ==========================================================================
 * seo.css — static prediction/record pages, styled as the PLATFORM, not as a
 * generic content page.
 *
 * Rewritten 2026-08-19 (T-522). Matt: "the design of the page looks typical
 * like a claude creation which i hate... tailor more to the platform."
 *
 * What changed and why:
 *  · Every colour now comes from the LIVE product's own theme.css tokens
 *    (--page/--card/--purple/--muted/--green...). The previous file invented a
 *    "glass" aesthetic on an --hi #aab0f4 accent that the product does not use;
 *    the real accent is --purple #7C80EE on a #0e0e16 ground.
 *  · Type is the product's: TT Firs Neue for text, JetBrains Mono for figures.
 *  · border-radius: 0 everywhere (house rule). Note the live dashboard is NOT
 *    yet compliant (~1,974 non-zero radii) — that is a known defect, not a
 *    standard to copy here.
 *  · Dense and data-first, like the board: tiles and tables, no decorative hero.
 *  · Light mode rides theme.css's own [data-theme="light"] tokens, so these
 *    pages follow the product rather than defining a second opinion.
 *
 * theme.css is linked BEFORE this file and supplies the tokens. The fallbacks
 * in var() are the live values, so a page still renders if theme.css 404s.
 * ========================================================================== */

:root {
  /* The magic-link email button is a GRADIENT, not a flat colour. Taken verbatim
     from Email/build/magic-link.html. #7a1e86 is that email's LINK colour, and
     using it as the button read as flat pink. */
  --ipw-grad: linear-gradient(135deg, #c0228f 0%, #6a1f84 100%);
  --ipw-grad-a: #c0228f;
  --ipw-grad-b: #6a1f84;
  --ipw-standout-ink: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

html { -webkit-text-size-adjust: 100%; }

body.seo-body {
  margin: 0;
  background: var(--page, #0e0e16);
  color: var(--ink, #fff);
  font-family: var(--body, 'TT Firs Neue', system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* house scrollbar — never the OS default */
* { scrollbar-width: thin; scrollbar-color: var(--line3, rgba(255,255,255,.18)) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--card, #16161f); }
*::-webkit-scrollbar-thumb { background: var(--line3, rgba(255,255,255,.18)); border: 2px solid var(--card, #16161f); }
*::-webkit-scrollbar-thumb:hover { background: var(--muted, #8f97b0); }

.seo-wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px 72px; }

/* ---------- nav: mirrors the product's .ipw-nav ---------- */
.ipw-nav {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.07));
  background: var(--card, #16161f);
  position: sticky; top: 0; z-index: 20;
}
.ipw-brand { display: inline-flex; align-items: center; text-decoration: none; }
.ipw-logo-img { height: 26px; width: auto; display: block; }
.ipw-navlinks { display: flex; align-items: center; gap: 16px; }
.ipw-navlinks a,
a.ipw-navlinks {
  color: var(--muted, #8f97b0);
  text-decoration: none;
  font-size: 13px; font-weight: 600;
  letter-spacing: .01em;
}
.ipw-navlinks a:hover, a.ipw-navlinks:hover { color: var(--ink, #fff); }
.ipw-grow { flex: 1 1 auto; }

/* ---------- headings ---------- */
h1 {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.14; font-weight: 700; letter-spacing: -.015em;
  margin: 28px 0 8px; text-wrap: balance;
}
h2 {
  font-size: 17px; font-weight: 700; letter-spacing: -.005em;
  margin: 34px 0 10px; text-wrap: balance;
}
h3 { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
p { margin: 0 0 12px; max-width: 74ch; }
.lead { font-size: 16px; color: var(--muted, #8f97b0); max-width: 74ch; }
.muted { color: var(--muted, #8f97b0); }
.mono { font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace); font-variant-numeric: tabular-nums; }

a { color: var(--purple, #7C80EE); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--purple, #7C80EE); outline-offset: 2px; }

.crumbs { font-size: 12px; color: var(--muted, #8f97b0); margin: 18px 0 0; }
.crumbs a { color: var(--muted, #8f97b0); text-decoration: none; }
.crumbs a:hover { color: var(--ink, #fff); }

/* ---------- panel: the product's section container ---------- */
.panel {
  background: var(--card, #16161f);
  border: 1px solid var(--line, rgba(255,255,255,.07));
  margin: 0 0 18px;
}
.panel-h {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.07));
  background: var(--card-2, #1e1e2a);
}
.panel-title { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.panel-count {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px; color: var(--muted, #8f97b0);
  font-variant-numeric: tabular-nums;
}
.panel-body { padding: 14px; }
.panel-body > p:last-child { margin-bottom: 0; }

/* ---------- KPI tiles: the product's .mr-tiles grid, radius 0 ---------- */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px; background: var(--line, rgba(255,255,255,.07));
  border: 1px solid var(--line, rgba(255,255,255,.07));
}
.tile { background: var(--card, #16161f); padding: 13px 14px; }
.tile .v {
  display: block;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.12;
}
.tile .v.good { color: var(--green-tx, #B1E7C7); }
.tile .v.warn { color: var(--amber-tx, #F3D88B); }
.tile .k { display: block; font-size: 11.5px; color: var(--muted, #8f97b0); margin-top: 5px; line-height: 1.3; }
.tile .s {
  display: block; font-size: 10.5px; color: var(--dim, rgba(255,255,255,.26)); margin-top: 2px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
}

/* ---------- tables ---------- */
.tblwrap { overflow-x: auto; border: 1px solid var(--line, rgba(255,255,255,.07)); }
table.dt { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 13px; background: var(--card, #16161f); }
table.dt th, table.dt td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line, rgba(255,255,255,.07)); }
table.dt thead th {
  background: var(--card-2, #1e1e2a);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted, #8f97b0); font-weight: 700; white-space: nowrap;
}
table.dt tbody tr:last-child td { border-bottom: none; }
table.dt td.n {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap;
  /* 2026-08-20: was right, while every th was left - so no table on these pages
     lined up. Measured 32 right vs 16 left in one table and 54 vs 6 in another.
     Everything is left now; do not reintroduce a per-cell alignment. */
}
table.dt td.t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }

/* result markers — semantic, separate from the purple accent */
.res { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.res.w { color: var(--green-tx, #B1E7C7); }
.res.l { color: var(--red-tx, #FF8E8B); }

/* inline hit-rate bar */
.bar { display: block; height: 5px; background: var(--line2, rgba(255,255,255,.12)); min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--ipw-emph-grad, linear-gradient(135deg,#6443db,#2b1fd6)); }

/* ---------- day strip ---------- */
.daynav { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line, rgba(255,255,255,.07)); border: 1px solid var(--line, rgba(255,255,255,.07)); }
.daynav a, .daynav span {
  background: var(--card, #16161f); padding: 8px 11px;
  font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11.5px;
  text-decoration: none; color: var(--muted, #8f97b0); white-space: nowrap;
}
.daynav a:hover { background: var(--card-2, #1e1e2a); color: var(--ink, #fff); }
.daynav span.on { background: var(--card-2, #1e1e2a); color: var(--ink, #fff); font-weight: 700; }

/* ---------- FAQ ---------- */
.faq .qa { padding: 12px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.07)); }
.faq .qa:last-child { border-bottom: none; }
.faq .qa p { margin: 0; color: var(--muted, #8f97b0); font-size: 14px; }

/* ---------- internal links ---------- */
.ilinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.ilinks a {
  border: 1px solid var(--line2, rgba(255,255,255,.12));
  padding: 7px 12px; font-size: 12.5px; text-decoration: none;
  color: var(--ink, #fff); background: var(--card, #16161f);
}
.ilinks a:hover { border-color: var(--purple, #7C80EE); color: var(--purple, #7C80EE); }

/* ---------- responsible-gambling + footer ---------- */
.rg { font-size: 11.5px; color: var(--dim, rgba(255,255,255,.26)); margin: 10px 0 0; }
.age {
  display: inline-block; border: 1px solid var(--line2, rgba(255,255,255,.12));
  padding: 0 5px; font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10.5px; font-weight: 700; margin-right: 6px;
}
.seo-foot { border-top: 1px solid var(--line, rgba(255,255,255,.07)); margin-top: 42px; background: var(--card, #16161f); }
.seo-foot .seo { max-width: 1080px; margin: 0 auto; padding: 18px; }
.seo-foot p { font-size: 12px; color: var(--muted, #8f97b0); margin: 0 0 6px; max-width: none; }

@media (max-width: 560px) {
  .seo-wrap { padding: 0 13px 52px; }
  .tile .v { font-size: 19px; }
  h1 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- crests -------------------------------------------------------
 * Team and competition badges, served through the existing same-origin image
 * proxy. They are decorative next to a name that is already text, so they carry
 * empty alt and never become the only way to identify a side. Fixed box so a
 * missing crest leaves the row height unchanged rather than reflowing the table.
 * ------------------------------------------------------------------------- */
.crest {
  width: 22px; height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 8px;
  flex: 0 0 auto;
  background: transparent;
}
.crest-lg { width: 40px; height: 40px; margin-right: 12px; }
.crest-xl { width: 60px; height: 60px; margin-right: 14px; }
.teamline { display: flex; align-items: center; gap: 0; min-width: 0; }
.teamline > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h1line { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; min-width: 0; }
.vs {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 4px 0 10px;
}
.vs .side { display: flex; align-items: center; min-width: 0; }
.vs .sep { color: var(--muted, #8f97b0); font-size: 13px; letter-spacing: .08em; }


/* ---------- best-day hero ------------------------------------------------
 * The single most engaging number on the page, put where a reader lands rather
 * than buried in a table halfway down.
 * ------------------------------------------------------------------------- */
.hero {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--line2, rgba(255,255,255,.12));
  background: var(--card-2, #1e1e2a);
  padding: 20px 22px;
  margin: 18px 0;
}
.hero-k {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted, #8f97b0);
}
.hero-v {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: clamp(38px, 7vw, 56px); font-weight: 700; line-height: 1.02;
  letter-spacing: -.03em; color: var(--green-tx, #B1E7C7);
  font-variant-numeric: tabular-nums;
}
.hero-sub { font-size: 14.5px; color: var(--ink, #fff); }
.hero-ago { color: var(--muted, #8f97b0); }

/* ---------- calls to action ---------------------------------------------- */
.cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 16px 0 24px;
}
.cta-btn {
  display: inline-block;
  background: var(--ipw-grad, linear-gradient(135deg,#c0228f,#6a1f84));
  color: var(--ipw-standout-ink, #fff);
  font-weight: 700; font-size: 14px;
  padding: 12px 20px;
  text-decoration: none;
  border: 1px solid var(--ipw-grad-b, #6a1f84);
}
.cta-btn:hover { background: none; background-color: transparent; color: var(--ipw-grad-a, #c0228f); }
.cta-note { font-size: 12.5px; color: var(--muted, #8f97b0); }

/* ---------- top scorers --------------------------------------------------
 * Player portraits come from the same same-origin proxy as the crests and are
 * decorative beside a name that is already text, so empty alt and a fixed box.
 * Many players have no portrait at all; the cell simply has no image rather
 * than a placeholder silhouette standing in for a person.
 * ------------------------------------------------------------------------- */
.pline { display: flex; align-items: center; gap: 0; min-width: 0; }
.pline > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfa {
  width: 28px; height: 28px;
  object-fit: cover;
  margin-right: 9px;
  flex: 0 0 auto;
  background: var(--card-2, #1e1e2a);
}

/* ---------- competition grid on the hub ----------------------------------
 * The 24 leagues people actually search for, as targets big enough to be the
 * first thing a reader or a crawler meets at /predictions/. Below them the long
 * tail stays as plain text links, because 368 cards would bury these.
 * ------------------------------------------------------------------------- */
.cgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 1px;
  background: var(--line, rgba(255,255,255,.07));
  border: 1px solid var(--line, rgba(255,255,255,.07));
  margin: 12px 0 0;
}
.ccard {
  display: flex; align-items: center; gap: 0;
  padding: 13px 14px;
  background: var(--card, #16161f);
  text-decoration: none;
  color: var(--ink, #fff);
  min-width: 0;
}
.ccard:hover { background: var(--card-2, #1e1e2a); }
.ccard-n {
  font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1 1 auto;
}
.ccard-s {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px; color: var(--muted, #8f97b0);
  margin-left: 10px; flex: 0 0 auto; white-space: nowrap;
}

/* ==========================================================================
 * MOTION AND EMPHASIS  (rewritten after Matt's 2026-08-19 review)
 *
 * THE FLAME IS THE EDGE MODEL, NOT THE CHIP BLOB. Matt: "the flame animations
 * in the slugs IS NOT what i used in the pattern buttons". The first cut here
 * repeated T-471's exact mistake: it ported the ipwFlick radial blob and shrank
 * it into a corner. The flame Matt tuned in his studio and assigned himself is
 * the EDGE model that beta.css T-475 ported verbatim for `.bld-gen` and the
 * model-feed hosts: a full-height gradient licking in from the right edge,
 * `ipwEdgeDance`, reach ladder 100/72/44%, overhang cropped by the host,
 * blur(.4px) saturate(1.25), screen blend. Ported here 1:1 from beta.css lines
 * 3815-3868, geometry variables and all - measured against the LIVE dashboard
 * (.bld-gen computes ipwEdgeDance, .75s, reach 78%, --fl-1 #6443db), not
 * inferred from prose.
 *
 * THE EMPHASIS PALETTE IS THE DARK PATTERN-BUTTON PALETTE, NOT THE PINK
 * GRADIENT. Matt: "the colour scheme is tooo pink look at the dark mode
 * pattern buttons". The crazy tier he recoloured to the brand blues in his
 * 2026-08-17 studio export is what theme.css now resolves live:
 * #6443db / #0b8ee0 / #2b1fd6. Data emphasis (standout plates, lead rows,
 * bars, the hero rule) wears that; the magic-link pink gradient stays ONLY on
 * the CTA buttons, which is the surface Matt himself fixed to it in T-530.
 *
 * The budget rules stand: a flame is three animated layers, spent on one
 * number per block, tier derived from the measured figure only.
 * ========================================================================== */

:root {
  /* the emphasis gradient: the crazy tier's indigo->deep-indigo band. Fallbacks
     are the values theme.css resolves LIVE in dark (the 557-block, which wins),
     not the superseded 428-block ones. */
  --ipw-emph-1: var(--flame-crazy-1, #6443db);
  --ipw-emph-2: var(--flame-crazy-2, #0b8ee0);
  --ipw-emph-3: var(--flame-crazy-3, #2b1fd6);
  --ipw-emph-grad: linear-gradient(135deg, var(--ipw-emph-1) 0%, var(--ipw-emph-3) 100%);
}

/* ---------- the flame: the edge model, verbatim ---------- */
.flamehost { position: relative; overflow: hidden; isolation: isolate; }
.ipw-flame {
  position: absolute; inset: 0; width: auto; height: auto;
  transform: none; overflow: hidden;
  pointer-events: none; z-index: -1;
  filter: blur(.4px) saturate(1.25);
  --fl-dur: 1.7s; --fl-reach: 46%; --fl-over: 90%; --fl-dir: 270deg;
  --fl-1: var(--flame-hot-1, #ffd89a);
  --fl-2: var(--flame-hot-2, #f09a3e);
  --fl-3: var(--flame-hot-3, #a34a1c);
  opacity: .9;
}
/* the shapes are taller than the host and pushed past both edges, so the host's
   own overflow:hidden crops the silhouette away and leaves only the dancing
   middle - exactly as on .bld-gen and the model-feed rows */
.ipw-flame i {
  position: absolute; left: -6%; right: -6%;
  top: calc(var(--fl-over) * -1); bottom: calc(var(--fl-over) * -1);
  border-radius: 0; transform-origin: 50% 50%;
  mix-blend-mode: screen;
  animation: ipwEdgeDance var(--fl-dur) ease-in-out infinite;
}
.ipw-flame i:nth-child(1) {
  background: linear-gradient(var(--fl-dir), var(--fl-3) 0, rgba(0,0,0,0) var(--fl-reach));
}
.ipw-flame i:nth-child(2) {
  background: linear-gradient(var(--fl-dir), var(--fl-2) 0, rgba(0,0,0,0) calc(var(--fl-reach) * .72));
  animation-delay: calc(var(--fl-dur) * -.37);
}
.ipw-flame i:nth-child(3) {
  background: linear-gradient(var(--fl-dir), var(--fl-1) 0, rgba(0,0,0,0) calc(var(--fl-reach) * .44));
  animation-delay: calc(var(--fl-dur) * -.71);
}
@keyframes ipwEdgeDance {
  0%   { transform: translateY(0)    scaleX(1);    opacity: .82 }
  22%  { transform: translateY(-7%)  scaleX(1.10); opacity: 1 }
  41%  { transform: translateY(2%)   scaleX(.94);  opacity: .78 }
  63%  { transform: translateY(-10%) scaleX(1.14); opacity: 1 }
  81%  { transform: translateY(-2%)  scaleX(1.02); opacity: .86 }
  100% { transform: translateY(0)    scaleX(1);    opacity: .82 }
}
.ipw-flame[data-flame="crazy"] {
  --fl-dur: .75s;
  --fl-1: var(--flame-crazy-1, #6443db);
  --fl-2: var(--flame-crazy-2, #0b8ee0);
  --fl-3: var(--flame-crazy-3, #2b1fd6);
}
.ipw-flame[data-flame="rising"] {
  --fl-dur: 3s;
  --fl-1: var(--flame-rise-1, #ffe9b0);
  --fl-2: var(--flame-rise-2, #cf913f);
  --fl-3: var(--flame-rise-3, #7C80EE);
}
/* screen lightens toward the backdrop, so on paper it resolves to white and the
   flame vanishes; the product's answer on every host is normal + softer filter */
html[data-theme="light"] .ipw-flame i { mix-blend-mode: normal; }
html[data-theme="light"] .ipw-flame { filter: blur(.4px) saturate(1.06); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .ipw-flame i { animation: none; } }

/* ---------- the strongest numbers ----------
 * Emphasis is a ladder: every figure in a table is mono and aligned, .big is
 * the column that carries the story, and .lead is the single top value, which
 * is also the only one that burns.
 */
table.dt td .big {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 700;
  color: var(--ink, #fff);
  letter-spacing: -.01em;
}
table.dt tr.lead td { background: rgba(124,128,238,.06); }
table.dt tr.lead td:first-child { position: relative; }
table.dt tr.lead td:first-child::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ipw-emph-grad, linear-gradient(135deg,#6443db,#2b1fd6));
}
table.dt tr.lead td .big { font-size: 18px; }

/* The standout figure in prose: a plate in the crazy tier's indigo band with
 * white ink. Gradient-filled TEXT stays banned (1.96:1 on the old gradient's
 * dark stop); a plate with white ink is how both the magic-link email and the
 * product's own flame chips carry colour. White on #6443db and on #2b1fd6 both
 * clear 5:1 (verified by computed style on the live page).
 */
.standout {
  display: inline-block;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums;
  font-size: 1.3em; font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
  background: var(--ipw-emph-grad, linear-gradient(135deg,#6443db,#2b1fd6));
  background-size: 220% 100%;
  color: var(--ipw-standout-ink, #fff);
  padding: 2px 10px;
  border: 1px solid var(--ipw-emph-3, #2b1fd6);
  animation: ipw-flow 9s ease-in-out infinite alternate;
  vertical-align: baseline;
}
@keyframes ipw-flow { to { background-position: 100% 0; } }

/* The best-day number stays white (highest contrast on the ground) with the
 * emphasis band as a rule beneath it. */
.hero-v { color: var(--ink, #fff); }
.hero-v::after {
  content: ""; display: block;
  width: 2.2em; height: 5px; margin-top: 8px;
  background: var(--ipw-emph-grad, linear-gradient(135deg,#6443db,#2b1fd6));
  background-size: 220% 100%;
  animation: ipw-flow 11s ease-in-out infinite alternate;
}

/* ---------- entry lift ----------
 * fill-mode stays none, so the resting computed style is the visible one: a
 * stalled or unsupported animation leaves the content on screen rather than at
 * opacity 0.
 */
@keyframes ipw-up { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.tiles, .hero, .cgrid { animation: ipw-up .42s cubic-bezier(.22,.61,.36,1); }
.tiles { animation-delay: .04s; }
.cgrid { animation-delay: .08s; }

/* ---------- the sheen on the CTA ----------
 * The CTA keeps the magic-link gradient: that surface is the one Matt himself
 * corrected TO it (T-530, "the buttons and seekers"). Data emphasis moved to
 * the pattern-button palette; the conversion button stays the email's.
 */
.cta-btn { position: relative; overflow: hidden; isolation: isolate; }
.cta-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-160%);
  pointer-events: none;
}
.cta-btn:hover::after { animation: ipw-sheen .85s ease-out; }
@keyframes ipw-sheen { 0% { transform: translateX(-160%); } 55%, 100% { transform: translateX(300%); } }

/* the probability and strength bars wear the emphasis band, not the pink */
.bar > i {
  background: var(--ipw-emph-grad, linear-gradient(135deg,#6443db,#2b1fd6));
  background-size: 220% 100%;
  animation: ipw-flow 8s ease-in-out infinite alternate;
}

/* The lead KPI tile: the emphasis plate at tile scale, and the edge flame
 * washes in from the tile's right, exactly like the Generate button. */
.tile .v.standout {
  display: inline-block;
  background: var(--ipw-emph-grad, linear-gradient(135deg,#6443db,#2b1fd6));
  background-size: 220% 100%;
  color: var(--ipw-standout-ink, #fff);
  border: 1px solid var(--ipw-emph-3, #2b1fd6);
  padding: 3px 11px;
  font-size: 24px;
  animation: ipw-flow 9s ease-in-out infinite alternate;
}
.tile.flamehost { position: relative; overflow: hidden; isolation: isolate; }


/* ---------- last-5 form markers (league table) ---------- */
/* Squares, not circles: border-radius stays 0 on these pages. Colour carries the
   result and the letter carries it again, so it survives colour-blindness and a
   greyscale print. An empty marker means NO MATCH ON RECORD - never a draw. */
.f5wrap { display: inline-flex; gap: 3px; align-items: center; }
.dt td.f5cell { white-space: nowrap; }
.f5 {
  width: 16px; height: 16px; border-radius: 0; display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9.5px; font-weight: 800; font-style: normal; line-height: 1;
  letter-spacing: 0; color: #0e0e16;
}
.f5w { background: var(--green-tx, #B1E7C7); }
.f5d { background: var(--muted, #8f97b0); }
.f5l { background: var(--red-tx, #FF8E8B); }
.f5n { background: transparent; border: 1px solid var(--line, rgba(255,255,255,.14)); }

/* league table legibility */
.dt tbody tr:hover td { background: rgba(255,255,255,.028); }
.dt td.t a.teamline { display: inline-flex; align-items: center; gap: 8px; }
.dt td.n b { color: var(--ink, #fff); }

@media (max-width: 560px) {
  /* GF/GA/GD are the first to go on a phone - P W D L Pts and the form carry the story */
  .dt.tbl-standings th:nth-child(7), .dt.tbl-standings td:nth-child(7),
  .dt.tbl-standings th:nth-child(8), .dt.tbl-standings td:nth-child(8) { display: none; }
}


/* ---------- team category badge ---------- */
/* 36% of the team book is women's or youth and the source DB has no flag for it,
   so the label is derived from the name and stated plainly rather than left to a
   "(w)" suffix the reader has to decode. Radius stays 0. */
.tcat {
  display: inline-block; margin-left: 10px; padding: 4px 9px; border-radius: 0;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid var(--line, rgba(255,255,255,.14)); color: var(--muted, #8f97b0);
  vertical-align: middle; white-space: nowrap;
}
.tcat-women   { border-color: rgba(192,34,143,.55); color: #E7A8D4; }
.tcat-youth   { border-color: rgba(124,128,238,.55); color: #A9ACF5; }
.tcat-reserve { border-color: rgba(255,255,255,.18); color: var(--muted, #8f97b0); }
.tcat-men     { border-color: rgba(255,255,255,.14); color: var(--muted, #8f97b0); }
.h1line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dt a.complink { color: var(--muted, #8f97b0); text-decoration: none; }
.dt a.complink:hover { color: var(--ink, #fff); text-decoration: underline; }


/* ---------- PitchAPI shot-map / xG viz (pa-*) ---------- */
.pa-pad{ padding:0 !important; }
.pa-tiles{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line,rgba(255,255,255,.08)); }
.pa-trow{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  background:var(--card,#16161f); padding:11px 15px; }
.pa-trow .lab{ font-family:var(--mono,'JetBrains Mono',monospace); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted,#8f97b0); text-align:center; }
.pa-trow .hv,.pa-trow .av{ font-family:var(--mono,'JetBrains Mono',monospace); font-weight:700; font-size:19px;
  font-variant-numeric:tabular-nums; }
.pa-trow .hv{ text-align:right; color:#7C80EE; }
.pa-trow .av{ text-align:left; color:#35C4B5; }
.pa-trow.pa-head{ background:var(--card-2,#1e1e2a); }
.pa-trow.pa-head .hv,.pa-trow.pa-head .av{ font-family:var(--body,'TT Firs Neue',sans-serif); font-weight:700; font-size:14px; }
.pa-bar{ grid-column:1/4; height:5px; margin-top:2px; background:var(--line,rgba(255,255,255,.08)); display:flex; }
.pa-bar i{ display:block; height:100%; }
.pa-pitch,.pa-race{ display:block; width:100%; height:auto; }
.pa-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:12px; color:var(--muted,#8f97b0); }
.pa-legend .k{ display:inline-flex; align-items:center; gap:7px; }
.pa-dot{ width:11px; height:11px; display:inline-block; }
.pa-dot.h{ background:#7C80EE; } .pa-dot.a{ background:#35C4B5; }
.pa-dot.o{ background:transparent; border:1.5px solid var(--muted,#8f97b0); }
.pa-dot.g{ background:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.pa-cap{ color:var(--muted,#8f97b0); font-size:12.5px; margin:12px 0 0; }
.pa-hn{ color:#7C80EE; } .pa-an{ color:#35C4B5; }