/* =========================================================================
   Football Career — interface
   Football Manager × FotMob × RPG dashboard. Dark, data-first, card-based:
   the game has no 3D football to sell, so what it sells is legibility and the
   speed of a decision. No images, no web fonts, no framework.

   Everything below is one of thirteen components — StatCard, PlayerCard,
   DecisionCard, EventCard, MatchEvent, RelationshipMeter, ProgressBar,
   StatusBadge, NewsCard, OfferCard, CompetitionTable, BottomSheet, SidePanel —
   plus the shell that holds them.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------- surfaces
     A ramp, not two greys. Panels sit on panels without a border doing all
     the work, which is most of what stopped the old screens looking built. */
  --bg: #080B11;
  --card: #151D2B;
  --card-2: #1D2635;
  --card-3: #27313F;
  --line: #212B3B;
  --line-2: #2E3A4C;
  --star-off: #75869E;                    /* 5.3:1 on the ground, 4.6:1 on a card */
  --edge: rgba(255,255,255,.06);          /* the lit top edge of a panel */

  /* ------------------------------------------------- interaction states
     A hover that is 1.16:1 against its resting colour is not a hover — it
     was measured and it read as no change at all. Each step below has to be
     visible on its own, not only when sat next to its neighbour:
       --hov      1.69:1 against --card-2, 1.88:1 against --card
       --hov-soft 1.60:1 against --card-2, 1.78:1 against --card
       --act      darker than either surface, and carries an inset shadow so
                  the press reads even where the luminance step is small */
  --hov: #3A4A63;
  --hov-soft: #374660;
  --hov-line: #5A6E8E;
  --act: #10161F;
  --act-in: inset 0 2px 7px rgba(0,0,0,.55);

  /* ink */
  --ink: #EFF3F9;
  --muted: #9CABBF;
  /* Measured against every surface it is used on, not just the darkest. At
     #8697AB it was 4.40:1 on --card-3, which fails AA by a hair — and --card-3
     is exactly where the small print sits (a contract's "175% pay", an honour's
     goal tally). At #99AABD it is 5.5:1 there and better everywhere else. */
  --dim: #99AABD;

  /* the game's colour, and the four status colours */
  --pri: #3DDC84;
  --pri-ink: #04220F;
  --pos: #3DDC84;
  --warn: #FFB02E;
  --neg: #FF5A5F;
  --info: #5CB3FF;
  --special: #C05FF0;

  /* ------------------------------------------------------- club accent
     Set from JS to the player's club primary colour, so the whole app is
     tinted by who he plays for. Falls back to the game's purple. */
  --club: #C05FF0;
  --club-ink: #F6E6FD;

  --r: 14px;
  --r-sm: 9px;
  --gut: clamp(12px, 2vw, 20px);
  --rail: 232px;
  --shadow: 0 14px 38px -20px #000;
  --shadow-lg: 0 22px 50px -22px #000;
  --spring: cubic-bezier(.2,.9,.25,1.1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 Inter, "Noto Sans Thai", ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, Arial, sans-serif;
  /* stats must not jitter as they change */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* A very slow wash in the club's colour. It is the difference between a
   dark page and a dark room with the lights on somewhere. Never distracting:
   34 seconds a cycle, and switched off entirely for reduced motion. */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 40% at 18% 8%, color-mix(in srgb, var(--club) 13%, transparent), transparent 62%),
    radial-gradient(44% 38% at 88% 88%, color-mix(in srgb, var(--info) 10%, transparent), transparent 62%);
  animation: bg-drift 34s ease-in-out infinite alternate;
}
@keyframes bg-drift { to { transform: translate3d(2.5%, -2%, 0) scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.011em; }
button, input, select { font: inherit; }
/* A <button> defaults to the UA's `buttontext`, which is black. Every rule that
   styled one remembered `font: inherit` and forgot `color`, so any button
   without its own colour rendered black on a dark card — 1.4:1, unreadable.
   Inheriting is the right default here; every button that wants its own colour
   already sets one and still wins on specificity. */
button { color: inherit; }

.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 10px; top: -48px; z-index: 60;
  background: var(--pri); color: var(--pri-ink);
  padding: 9px 14px; border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { top: 10px; }
:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

.kicker {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pri);
}
.note { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.dim { color: var(--dim); }

/* =============================================================== buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card-2); color: var(--ink);
  font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .13s, border-color .13s, transform .1s var(--spring);
}
.btn:hover:not(:disabled) {
  background: var(--hov); border-color: var(--hov-line); color: #fff;
}
.btn:active:not(:disabled) { background: var(--act); border-color: var(--line-2); transform: scale(.985); box-shadow: var(--act-in); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--pri {
  background: linear-gradient(180deg, #4FF09A, var(--pri));
  border-color: transparent; color: var(--pri-ink); font-weight: 800;
  box-shadow: 0 8px 22px -8px rgba(61,220,132,.7);
  transition: transform .18s var(--spring), box-shadow .18s var(--spring);
}
.btn--pri:hover:not(:disabled) {
  background: linear-gradient(180deg, #7CFFBC, #4FF09A);
  transform: translateY(-2px); box-shadow: 0 13px 28px -8px rgba(61,220,132,.85);
}
.btn--pri:active:not(:disabled) {
  background: linear-gradient(180deg, var(--pri), #2BB86B);
  transform: translateY(0) scale(.97); box-shadow: 0 4px 12px -6px rgba(61,220,132,.9);
}
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 16px; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn--ghost:hover:not(:disabled) { background: var(--hov); border-color: var(--hov-line); color: #fff; }
.btn--neg { border-color: #5A2830; color: #FFB3B9; background: transparent; }
.btn--neg:hover:not(:disabled) { background: #4A1C24; border-color: #A54E5B; color: #FFE2E4; }
.btn--neg:active:not(:disabled) { background: #200D11; box-shadow: var(--act-in); }
.btn--wide { width: 100%; }
.btn--file { position: relative; }

.iconbtn {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent; color: var(--muted);
  cursor: pointer;
}
.iconbtn { transition: background .13s, color .13s, border-color .13s, transform .1s var(--spring); }
.iconbtn:hover { background: var(--hov); border-color: var(--hov-line); color: #fff; }
.iconbtn:active { background: var(--act); transform: scale(.93); box-shadow: var(--act-in); }

/* One visible focus ring for everything reachable by keyboard. */
.btn:focus-visible, .iconbtn:focus-visible, .chip:focus-visible, .tab:focus-visible,
.option:focus-visible, .ev:focus-visible, .posbtn:focus-visible, .rail__btn:focus-visible,
.bottombar__btn:focus-visible {
  outline: 2px solid var(--pri); outline-offset: 2px;
}
.pip {
  position: absolute; top: 9px; right: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--neg); border: 2px solid var(--bg);
}

.pill {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border-radius: 999px; background: var(--card-3); border: 1px solid var(--line-2);
  font-size: 11px; font-weight: 700; color: var(--pri); vertical-align: 1px;
}

/* StatusBadge */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--card-3); border: 1px solid var(--line-2); color: var(--muted);
}
.badge--pos { color: var(--pos); border-color: #2C4A36; background: #101C15; }
.badge--warn { color: var(--warn); border-color: #4A3E20; background: #1B1710; }
.badge--neg { color: var(--neg); border-color: #4A2429; background: #1C1113; }
.badge--info { color: var(--info); border-color: #1F3D53; background: #101A22; }
.badge--special { color: var(--special); border-color: #3A2F55; background: #16121F; }

/* =============================================================== landing */

.landing { display: grid; place-items: center; min-height: 100vh; padding: var(--gut); }
.landing__inner { width: 100%; max-width: 560px; }
.landing__title {
  font-size: clamp(38px, 9vw, 62px); line-height: .96; margin: 10px 0 6px;
  letter-spacing: -0.03em;
}
.landing__title span { display: block; color: var(--pri); }
.landing__tag { margin: 0 0 26px; color: var(--muted); font-size: 16px; }
.landing__actions { display: grid; gap: 9px; }
.landing__save {
  margin-top: 16px; padding: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
}
.landing__save b { display: block; font-size: 16px; }
.landing__save span { color: var(--muted); font-size: 13px; }
.landing__points { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.landing__points li {
  position: relative; padding-left: 18px; color: var(--dim); font-size: 13px;
}
.landing__points li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pri);
}
/* Landing feature highlights — what the game actually is, as small cards rather
   than a generic bullet list. */
.landing__features {
  margin: 30px 0 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.lf {
  padding: 14px 15px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); border-left: 3px solid var(--pri);
}
.lf b { display: block; margin-bottom: 4px; font-size: 14px; color: var(--text); }
.lf span { color: var(--dim); font-size: 12.5px; line-height: 1.5; }

/* ================================================================ wizard */

.wizard { max-width: 1120px; margin: 0 auto; padding: var(--gut); }
.wizard__head { margin-bottom: 18px; }
.wizard__title { font-size: clamp(22px, 4vw, 30px); margin-bottom: 14px; }
.stepper { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.stepper li {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--dim);
}
.stepper li[data-state="now"] { border-color: var(--pri); color: var(--ink); }
.stepper li[data-state="done"] { color: var(--pri); }
.stepper .num {
  display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--card-3); font-size: 10.5px;
}
.stepper li[data-state="now"] .num { background: var(--pri); color: var(--pri-ink); }

.wizard__body { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .wizard__body { grid-template-columns: 1fr 280px; align-items: start; } }
.wizard__form {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(16px, 3vw, 26px);
}
.wizard__preview { position: sticky; top: var(--gut); }
.wizard__foot {
  display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.wizard__foot .btn--ghost { margin-left: auto; }
.step__title { font-size: 19px; margin-bottom: 4px; }
.step__sub { font-size: 13px; margin: 22px 0 2px; color: var(--muted); }

.fields { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.field { display: grid; gap: 6px; flex: 1 1 150px; }
.field--wide { flex: 2 1 260px; }
.field__label { font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); }
.field__row { display: flex; gap: 7px; }
.field__row .input { flex: 1; }
.input {
  min-height: 44px; padding: 0 12px; width: 100%;
  background: #0E161E; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
}

/* a select that sits inside a card header rather than in a form */
.input--inline { width: auto; min-width: 150px; max-width: 100%; font-size: .92rem; }

.driftlog { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.driftlog li {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px;
  padding: 8px 10px; background: var(--card); border-radius: var(--r-sm);
  font-size: .86rem; align-items: baseline;
}
.driftlog li > span:last-child { min-width: 0; overflow-wrap: break-word; }

.demands { display: grid; gap: 7px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.demands .option { min-height: 56px; }
.demands .option[disabled] { opacity: 1; background: var(--card); cursor: default; }
.demands .option[disabled] .option__label { color: var(--dim); }
.demands .option[disabled]:hover { border-color: var(--line-2); background: var(--card); }
.offer__acts { display: flex; gap: 7px; flex-wrap: wrap; }
.chipopt.is-locked .chipopt__box { opacity: 1; background: var(--card); color: var(--dim); }
.badge--good { background: #16311F; color: var(--pri); }
.badge--warn { background: #33280F; color: var(--warn); }
.badge--bad { background: #33191D; color: var(--neg); }

/* the feed, and the record of what you have said */
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* ================================================= editorial article
   The match written up as prose (see js/reporter.js). v3's editorial language:
   a club-colour kicker, a serif headline with the emphasised clause in italic,
   a byline rule, a serif lead and body, and the manager's verdict as a pulled
   quote. Measured column so lines do not run too long to read. */
.article { max-width: 62ch; }
.article__k {
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--club-ink); margin: 0 0 10px;
}
.article__head {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 400; font-size: clamp(22px, 3.2vw, 31px); line-height: 1.14;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 11px;
}
.article__head em { font-style: italic; color: var(--club-ink); }
.article__meta {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin: 0 0 16px;
}
.article__lead, .article__p {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  line-height: 1.75; color: #dde5f0; margin: 0 0 14px;
}
.article__lead { font-size: clamp(16px, 1.8vw, 18.5px); color: #fff; }
.article__p { font-size: clamp(14.5px, 1.6vw, 16px); }
.article__quote {
  margin: 18px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--club);
  font-family: Georgia, "Iowan Old Style", serif; font-style: italic;
  font-size: clamp(16px, 1.8vw, 19px); line-height: 1.5; color: var(--ink);
}
.article__quote cite {
  display: block; margin-top: 8px; font-style: normal; font-family: var(--font, inherit);
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
/* a divider between the write-up and the box score below it in the report */
.article + .rscoreline { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }

/* regional/group standings on the Competitions screen: two side-by-side tables
   for a two-region competition, a responsive grid of small tables for a group
   stage. Each keeps its own qualifying line. */
/* auto-fit, not fixed breakpoints: place as many whole tables as the width
   holds and wrap the rest, so eight groups never run off the right edge. The
   min() guard lets a track fall below its ideal on a narrow screen instead of
   overflowing. */
.stand-grid { display: grid; gap: 14px 18px; }
.stand-grid--regions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.stand-grid--groups { grid-template-columns: repeat(auto-fit, minmax(min(100%, 358px), 1fr)); }
/* a group table carries four clubs, so it can lose the width a full league
   table needs and let more sit side by side. */
.ctable--group { min-width: 340px; font-size: 12.5px; }
.ctable--group thead th, .ctable--group td { padding: 8px 6px; }
.ctable--group .num { width: 40px; }
.ctable--group th:first-child, .ctable--group td:first-child { width: 34px; }
.stand__h {
  margin: 0 0 6px; font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--club-ink);
}

/* FM-style squad list badges: a position tag by line, a rating badge by tier. */
.pospill { display: inline-block; min-width: 30px; text-align: center; padding: 2px 6px;
  border-radius: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  background: var(--card-3); color: var(--muted); }
.pospill--GK { background: #3a2e12; color: #ffd479; }
.pospill--DF { background: #12293f; color: #8fc6ff; }
.pospill--MF { background: #14311f; color: #74e4a2; }
.pospill--FW { background: #3a1420; color: #ff9db0; }
.pospill--2 { background: transparent; color: var(--dim); margin-left: 2px;
  font-size: 10px; min-width: 0; padding: 2px 3px; }
.ratepill { display: inline-block; min-width: 30px; text-align: center; padding: 2px 7px;
  border-radius: 6px; font-size: 12px; font-weight: 800; }
.ratepill--a { background: #14311f; color: #6ff0a3; box-shadow: inset 0 0 0 1px #2e6b45; }
.ratepill--b { background: #172a1d; color: #74e4a2; }
.ratepill--c { background: var(--card-3); color: var(--muted); }
.ratepill--d { background: #2a1418; color: #ff9db0; }

/* The substitutes bar under the match pitch. */
.msubs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.msubs__k { font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-right: 2px; }
.msub { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--muted); }
.msub--me { border-color: var(--pri); color: var(--ink);
  background: color-mix(in srgb, var(--pri) 16%, var(--card-2)); }
.msub__pos { font-size: 9px; font-weight: 800; letter-spacing: .04em;
  color: var(--dim); }
.msub--me .msub__pos { color: var(--pri); }

/* Attribute trend arrows — what has moved since pre-season. */
.trend { font-size: 8px; margin-left: 5px; vertical-align: 1px; }
.trend--up { color: var(--pri); }
.trend--down { color: var(--neg); }

/* Recent club form as W/D/L pills. */
.formpills { display: flex; align-items: center; gap: 5px; margin: 0 0 14px; }
.formpills__k { font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-right: 3px; }
.fp { display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 6px; font-size: 11px; font-weight: 800; color: #061; }
.fp--W { background: var(--pri); color: var(--pri-ink); }
.fp--D { background: var(--line-2); color: var(--ink); }
.fp--L { background: var(--neg); color: #2a0d10; }

/* FM-style star ratings and the coach's report. */
.stars { display: inline-flex; gap: 1px; white-space: nowrap; }
/* An unlit star was --line-2 on the page ground: 1.7:1, which is not a dim
   star, it is an invisible one. A rating you can only half read is a rating you
   cannot read, so the empty half clears the 3:1 that a meaningful graphic
   needs. */
.star { font-size: 15px; line-height: 1; color: var(--star-off); }
.star.is-full { color: var(--warn); }
.star.is-half { position: relative; color: var(--star-off); }
.star.is-half::before { content: "★"; position: absolute; left: 0; top: 0;
  width: 50%; overflow: hidden; color: var(--warn); }
.crstars { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; }
.crstars > div { display: grid; gap: 3px; }
.crstars__k { font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); }
.crreco { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.crcols { display: grid; gap: 14px 20px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .crcols { grid-template-columns: 1fr 1fr; } }
.crcol__h { display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.crcol__h--pro { color: var(--pri); }
.crcol__h--con { color: var(--neg); }
.crcol__n { display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 800;
  background: var(--card-3); color: var(--muted); letter-spacing: 0; }
.crcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.crcol li { padding: 7px 10px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 13px; }
.crcol__h--pro + ul li { border-left: 2px solid var(--pri); }
.crcol__h--con + ul li { border-left: 2px solid var(--neg); }

/* Radar / spider chart — a shape at a glance, in the game's accent. */
.radar { width: 100%; max-width: 344px; height: auto; display: block; margin: 2px auto 0; }
.radar__ring { fill: none; stroke: var(--line-2); stroke-width: .5; }
.radar__spoke { stroke: var(--line-2); stroke-width: .5; }
.radar__area {
  fill: color-mix(in srgb, var(--pri) 20%, transparent);
  stroke: var(--pri); stroke-width: 1.6; stroke-linejoin: round;
}
.radar__dot { fill: var(--pri); }
.radar__label { fill: var(--muted); font-size: 9px; font-weight: 700;
  font-family: inherit; letter-spacing: .01em; }
.radar__val { fill: var(--ink); font-weight: 800; }

/* Tournament results on the National screen: who won, every group's final
   table, and the knockout bracket round by round. */
/* The out-of-contract gate on the home screen: he cannot play on until he
   re-signs, moves, or retires. */
.fagate { display: grid; gap: 4px; }
.fagate__head {
  margin: 0; font-size: 15px; font-weight: 800; color: var(--warn);
}
.fagate__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fagate__acts .btn { flex: 1 1 auto; }

.champ {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 10px;
  padding: 12px 14px; background: var(--card-2); border: 1px solid var(--line-2);
  border-left: 3px solid var(--warn); border-radius: var(--r);
}
.champ--me { border-left-color: var(--pri); background: #101C15; }
.champ__cup { font-size: 26px; line-height: 1; }
.champ__txt { display: grid; gap: 2px; min-width: 0; }
.champ__txt b { font-size: 16px; }
.champ__sub { font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.natgroups, .kobrackets {
  display: grid; gap: 12px 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.ntable { min-width: 0; font-size: 12.5px; }
.ntable thead th, .ntable td { padding: 7px 6px; }
.ntable .num { width: 38px; }
.ntable th:first-child, .ntable td:first-child { width: 26px; }
.ntable td:nth-child(2) { max-width: 0; width: 60%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.koround .results { margin-top: 4px; }
.fullres { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.fullres > summary {
  cursor: pointer; list-style: none; padding: 6px 0;
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--club-ink);
}
.fullres > summary::-webkit-details-marker { display: none; }
.fullres > summary::after { content: " ▸"; color: var(--muted); }
.fullres[open] > summary::after { content: " ▾"; }
.fullres > summary:focus-visible { outline: 2px solid var(--pri); outline-offset: 3px; border-radius: 4px; }

/* the lead story on the News page: the latest report in full, given the size and
   the drop cap of a front page. The earlier reports keep the compact archive
   styling below it. */
.lead .article { max-width: 74ch; }
.lead .article__head { font-size: clamp(26px, 4.2vw, 40px); line-height: 1.08; margin-bottom: 13px; }
.lead .article__lead { font-size: clamp(17px, 2vw, 20px); }
.lead .article__lead::first-letter {
  float: left; font-family: Georgia, "Iowan Old Style", serif; font-weight: 600;
  font-size: 3.1em; line-height: .82; padding: 6px 10px 0 0; color: var(--club-ink);
}
.pressmore {
  margin: 26px 0 6px; padding-top: 16px; border-top: 2px solid var(--line);
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}

/* the press archive on the Career page: headline + lead, tap to expand */
.presslist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.presslist li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.presslist li:last-child { border-bottom: 0; }
.presslist li:first-child { padding-top: 2px; }
/* each report expands to its full write-up; the summary is the kicker,
   headline and lead, and it is keyboard-operable */
.presslist summary { cursor: pointer; list-style: none; }
.presslist summary::-webkit-details-marker { display: none; }
.presslist summary::marker { content: ""; }
.presslist summary:focus-visible { outline: 2px solid var(--pri); outline-offset: 4px; border-radius: 4px; }
.presslist summary .article__lead::after {
  content: " ▸ Read"; color: var(--club-ink); font-family: var(--font, inherit);
  font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .1em;
}
.presslist details[open] summary .article__lead::after { content: " ▾ Close"; }
.article--body { margin-top: 2px; }

/* The press feed is short quotes, not articles — so it takes v3's `.quote`
   treatment (a pulled quote), not the full serif-headline article layout,
   which would be faking article length onto a one-liner. Who-said-it is the
   kicker, the quote itself is serif italic behind a club-coloured rule. */
.post {
  display: grid; gap: 7px; padding: 6px 0 16px 18px; min-width: 0;
  border-left: 2px solid var(--club);
}
.post + .post { margin-top: 4px; }
/* the voice still tints the rule, but in press colours */
.post--fan { border-left-color: var(--pri); }
.post--pundit { border-left-color: var(--warn); }
.post--journalist { border-left-color: var(--info); }
.post__who {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .2em;
  color: var(--club-ink);
}
.post--fan .post__who { color: var(--pri); }
.post--pundit .post__who { color: var(--warn); }
.post--journalist .post__who { color: var(--info); }
.post__text {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-style: italic; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.5;
  color: var(--ink); overflow-wrap: break-word;
}
.post__when { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

.memlog li.is-faded .mem__what { color: var(--dim); }
.mem__what { display: block; font-weight: 650; font-size: .9rem; }
.mem__said { display: block; font-size: .85rem; color: var(--muted); }
.mem__when { display: block; font-size: .76rem; color: var(--dim); }

.weakspot { display: grid; gap: 5px; margin-top: 14px; }
.weakspot .bar { display: block; height: 7px; }
.card__sub {
  margin: 16px 0 7px; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dim);
}
.injlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.injlog li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px;
  padding: 7px 10px; background: var(--card); border-radius: var(--r-sm);
  font-size: .86rem; align-items: baseline;
}
.injlog li > span:nth-child(2) { min-width: 0; overflow-wrap: break-word; }

.formbox { display: grid; gap: 6px; margin-bottom: 12px; }
.formstrip { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; flex-wrap: wrap; }
.formstrip li {
  flex: 0 0 auto; min-width: 40px; padding: 5px 0; text-align: center;
  font-variant-numeric: tabular-nums; font-size: .84rem; font-weight: 650;
  background: var(--card-3); border-radius: var(--r-sm); color: var(--muted);
}
.formstrip li.is-hot { background: #16311F; color: var(--pri); }
.formstrip li.is-cold { background: #33191D; color: var(--neg); }
.note.pos { color: var(--pri); }
.note.neg { color: var(--neg); }

/* awards */
.aw__world {
  padding: 14px 16px; border-radius: var(--r-sm); background: var(--card-2);
  border-left: 3px solid var(--special); margin-bottom: 12px;
}
.aw__world.is-me { border-left-color: var(--pri); background: var(--card-3); }
.aw__label {
  margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim);
}
.aw__name { margin: 3px 0 2px; font-size: 1.15rem; font-weight: 700; }
.aw__meta { margin: 0; font-size: .85rem; color: var(--muted); }
.aw__league { margin-bottom: 12px; min-width: 0; }
.aw__lg {
  margin: 0 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dim);
}
.aw__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.aw__list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
  padding: 8px 11px; background: var(--card); border-radius: var(--r-sm);
  border-left: 3px solid transparent; font-size: .88rem; align-items: baseline;
}
@media (max-width: 560px) {
  .aw__list li { grid-template-columns: 1fr; gap: 2px; }
}
.aw__list li.is-me { border-left-color: var(--pri); background: var(--card-3); }
.aw__what { color: var(--muted); min-width: 0; overflow-wrap: break-word; }
.aw__who { font-weight: 650; min-width: 0; overflow-wrap: break-word; }
.aw__who em { display: block; font-style: normal; font-weight: 400; font-size: .8rem; color: var(--dim); }

.verdictbox {
  display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--card-2); border-left: 3px solid var(--line-2); min-width: 0;
}
.verdictbox--good { border-left-color: var(--pri); }
.verdictbox--bad { border-left-color: var(--neg); }
.verdictbox--info { border-left-color: var(--info); }
.verdictbox__who {
  margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim);
}
.verdictbox__text { margin: 0; font-size: .95rem; line-height: 1.5; }

.stylelist {
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.style {
  display: grid; gap: 4px; padding: 11px 12px; min-width: 0;
  background: var(--card-2); border-radius: var(--r-sm);
  border-left: 3px solid var(--line-2);
}
.style--has { border-left-color: var(--pri); background: var(--card-3); }
.style b { font-size: .95rem; }
.style span { font-size: .85rem; color: var(--muted); }
.style em { font-size: .78rem; color: var(--dim); font-style: normal; }
.style--has em { color: var(--pri); }
.style .bar { display: block; height: 5px; margin-top: 3px; }

.loadbox { display: grid; gap: 5px; margin-bottom: 12px; }
.loadbox .bar { display: block; height: 8px; }
.loadbox .neg { color: var(--neg); }
.chipopt__load {
  display: block; font-size: .76rem; color: var(--dim); font-style: normal;
  margin-top: 2px;
}
/* A selected chip is a green block, so the dim grey that reads well on a dark
   card measures 2.4:1 on it. The sub-line has to darken with the chip. */
.chipopt input:checked + .chipopt__box .chipopt__load { color: #0B2916; }

.ladder { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 3px; }
.ladder li {
  display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px;
  background: var(--card); border-radius: var(--r-sm); font-size: .88rem;
  border-left: 3px solid transparent; min-width: 0;
}
.ladder li > span:first-child { min-width: 0; overflow-wrap: break-word; }
.ladder li > span:last-child { white-space: nowrap; }
.ladder li.is-me {
  background: var(--card-3); border-left-color: var(--pri); font-weight: 650;
}

/* the page behind a full-screen match must not scroll away under it */
body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------ match screen */
/* A match is the one screen that should feel like nothing else in the game:
   full height, one decision at a time, and a clock that only goes forwards. */
.matchscreen {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  /* wide enough for two columns; v3's match view is not a phone sheet */
  width: 100%; max-width: 1180px; min-width: 0;
  /* the whole point of this screen is that it does not scroll as a page: the
     header and the decision stay put and only the timeline moves */
  height: 100dvh; max-height: 100dvh; overflow: hidden;
  margin: 0 auto; background: var(--bg);
}
@supports not (height: 100dvh) {
  .matchscreen { height: 100vh; max-height: 100vh; }
}

.mhead {
  position: relative; overflow: hidden;
  padding: 0 0 12px; background: var(--card);
  border-bottom: 1px solid var(--line-2); display: grid; gap: 10px;
}

/* the scoreboard — each side washed in its own club's colour, meeting in the
   middle where the clock is. `--rival` is set from the opponent in openMatch. */
.sb {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(6px, 2vw, 12px);
  padding: clamp(11px, 2vw, 16px) clamp(10px, 2vw, 14px) 4px;
}
/* Same rule as the momentum bar: the wash follows the side, not the end of
   the header. `.sb--mine-left` is set in openMatch when the player's team is
   the home team, which is the side the scoreboard prints first. */
.sb::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--rival) 30%, transparent), transparent 42%,
    transparent 58%, color-mix(in srgb, var(--club) 30%, transparent));
}
.sb--mine-left::before {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--club) 30%, transparent), transparent 42%,
    transparent 58%, color-mix(in srgb, var(--rival) 30%, transparent));
}
.sb > * { position: relative; min-width: 0; }
.sb__c {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  font-weight: 700; font-size: clamp(12px, 1.3vw, 14.5px);
}
.sb__c em {
  font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb__c--r { flex-direction: row-reverse; text-align: right; }

/* the clock ring: the match is running and you can see it running */
.tick {
  position: relative; display: grid; place-items: center;
  width: clamp(72px, 12vw, 88px); height: clamp(72px, 12vw, 88px);
}
.tick svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tick__bg { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 3; }
.tick__fg {
  fill: none; stroke: var(--pri); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 239; stroke-dashoffset: 239;
  filter: drop-shadow(0 0 5px var(--pri));
  transition: stroke-dashoffset .6s linear;
}
.tick__in { position: relative; text-align: center; line-height: 1; }
.tick__s {
  display: block; font-variant-numeric: tabular-nums;
  font-size: clamp(20px, 2.6vw, 27px); font-weight: 900; letter-spacing: -.045em;
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
}
.tick__m {
  display: block; margin-top: 3px; font-variant-numeric: tabular-nums;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--pri);
}

.mhead__meta {
  margin: 0; padding: 0 14px; text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--dim);
}

/* momentum — two sides of one bar, each in its club's colour, so which way it
   is going is readable without reading the number */
.mom { padding: 0 14px; }
.mom__t {
  display: flex; height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--card-3);
}
.mom__t i { display: block; height: 100%; transition: width 1.1s var(--spring); }
/* --side-l / --side-r are written by setMomentum from which side is the
   player's, so the colours do not depend on which end of the bar he is at */
.mom__t i:first-child {
  background: linear-gradient(90deg, color-mix(in srgb, var(--side-l, var(--rival)) 65%, #000), var(--side-l, var(--rival)));
  box-shadow: 0 0 14px var(--side-l, var(--rival));
}
.mom__t i:last-child {
  background: linear-gradient(90deg, var(--side-r, var(--club)), color-mix(in srgb, var(--side-r, var(--club)) 62%, #fff));
  box-shadow: 0 0 14px var(--side-r, var(--club));
}
.mom__l {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim);
}
.bar--split { background: #3A1E24; }
.bar--split > i { background: var(--pri); display: block; height: 100%; }

/* ---------------------------------------------------------- match grid
   v3's `.mgrid`. Left column is the match as a picture, right column is the
   match as a conversation. One column below 1040, which is every phone and
   most tablets. The grid is the only scrolling row: the scoreboard above it
   and the buttons below it never move, which is the property the old
   single-column screen had and is worth keeping. */
.mgrid {
  overflow-y: auto; min-height: 0;
  display: grid; gap: 14px; align-content: start;
  grid-template-columns: 1fr;
  padding: 14px 16px;
}
@media (min-width: 1040px) {
  .mgrid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr); align-items: start; }
}
.mcol { display: grid; gap: 14px; align-content: start; min-width: 0; }

/* a panel inside the match screen — same language as `.card`, its own class
   because the match screen is an overlay and does not use the page grid */
.mpanel {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card) 88%, transparent),
    color-mix(in srgb, #101622 92%, transparent));
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 1px 0 var(--edge) inset, var(--shadow);
  overflow: hidden; min-width: 0;
}
.mpanel__h {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent);
}
.mpanel__t {
  font-size: 9.5px; font-weight: 800; letter-spacing: .17em;
  text-transform: uppercase; color: var(--muted);
}
.mpanel__note { margin-left: auto; font-size: 11px; color: var(--dim); }
.mpanel__b { padding: 14px; }

.mbody {
  /* the timeline scrolls inside its own panel, newest at the bottom */
  max-height: 34vh; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
}
@media (min-width: 1040px) { .mbody { max-height: 42vh; } }
.mbody__empty { margin: 0; color: var(--dim); font-size: .9rem; text-align: center; }
/* v3's `.ev`: flat rows, a thin divider between them, no box per line — the
   panel is the container, the rows are just rows. Goals and the player's own
   moments tint their minute rather than growing a coloured slab. */
.mtimeline { list-style: none; margin: 0; padding: 0; display: grid; }
.mtimeline li {
  display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start;
  padding: 9px 0; border-bottom: 1px solid var(--line); min-width: 0;
}
.mtimeline li:last-child { border-bottom: 0; }
.mtimeline .tmin {
  font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px;
  font-weight: 800; padding-top: 1px;
}
.mtimeline .ttext { min-width: 0; overflow-wrap: break-word; font-size: 13px; }
.mtimeline li.is-goal-us .tmin, .mtimeline li.is-good .tmin { color: var(--pri); }
.mtimeline li.is-goal-us .ttext, .mtimeline li.is-good .ttext { color: var(--pri); font-weight: 600; }
.mtimeline li.is-goal-them .tmin { color: var(--neg); }
.mtimeline li.is-goal-them .ttext { color: var(--neg); font-weight: 600; }
.mtimeline li.is-bad .tmin { color: var(--warn); }
.mtimeline .tchoice {
  display: block; color: var(--dim); font-size: 12px; margin-top: 2px;
}

/* a new event drops in and flashes the club colour once. Only the node that
   was just appended carries `is-new`, so re-rendering the list never replays
   the whole timeline. */
.mtimeline li.is-new { animation: m-arrive .5s var(--spring) both; }
/* the latest event stays in --info until the next one lands, so the eye can
   find "what just happened" without re-reading the list */
.mtimeline li.is-now, .mtimeline li.is-now .tmin { color: var(--info); }
@keyframes m-arrive {
  from { opacity: 0; transform: translateY(-9px);
         background: color-mix(in srgb, var(--club) 24%, transparent); }
}

/* The footer is an `auto` row against the body's `minmax(0,1fr)`, so a five
   option decision simply took the whole screen and the timeline, the score and
   the momentum bar went with it — measured at 5 options, the body was squeezed
   to nothing. Cap it and let the options scroll inside instead. The breathing
   shadow is drawn on this element and points upward, so `overflow` does not
   clip it. */
/* The footer holds the two buttons and nothing else now — the decision moved
   into the right column where v3 has it. It no longer needs the 58dvh cap that
   stopped a five-option decision eating the whole screen. */
.mfoot {
  padding: 12px 16px 16px; background: var(--card); border-top: 1px solid var(--line);
}
.mcard { display: grid; gap: 10px; }
/* ------------------------------------------------------- the pitch
   Our goal at the bottom, attacking upward. One SVG; JS swaps the viewBox
   between the full pitch and the attacking half so the narrow column gets a
   crop rather than a postage stamp. v3 needed two SVGs for this and had to
   fight a specificity bug to stop both drawing; one element cannot. */
.pitch { border-radius: 10px; overflow: hidden; }
.pitch svg { display: block; width: 100%; height: auto; margin-inline: auto; }
/* the static formation diagram on the Squad page: a full pitch, capped so the
   tall 100x128 frame does not dominate its card */
.pitch--squad svg { max-width: 360px; }
/* Cap by HEIGHT, not width. A 100x128 box at 380px wide is 486px tall, which
   in a 494px column is the "pitch becomes the whole page" failure v3's own
   comment warns about — measured here at 1400x709 before this rule existed.
   The divisors are the two viewBox aspect ratios. */
/* one crop at every width now (aspect 100:66). Capped by height so the pitch
   never grows into "the whole column" — the trap v3's own comment warns of. */
.pitch svg.is-crop { max-width: min(470px, calc(40vh / 0.66)); }
/* the Line-ups pitch is the full 100x128 frame; cap by height so its tall shape
   stays a reference panel and does not grow into the whole column */
#m-lineup { max-width: min(330px, calc(58vh / 1.28)); }
/* the round caption above each preserved qualifying table (#137) */
.camp-round { margin: 14px 0 5px; font-size: 12px; font-weight: 600;
  color: var(--muted); letter-spacing: .01em; }
.camp-round:first-child { margin-top: 4px; }
.pitch__note { margin: 9px 0 0; font-size: 11.5px; color: var(--dim); text-align: center; }
/* The two ends, named. Small, permanent, and outside the SVG so the crop can
   never take them away. */
.pitch__end {
  margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; text-align: center; color: var(--dim);
}
.pitch__end--them { margin-bottom: 5px; color: var(--neg); opacity: .82; }
.pitch__end--us { margin-top: 5px; opacity: .7; }
/* Where the ball is, on the option card: your number against his, and a plain
   sentence saying which way it leans. The percentage is still never shown. */
.option__vs {
  position: relative; display: flex; align-items: center; gap: 6px;
  margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--dim);
}
.option__vs b { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.option__vslab {
  font-size: 8.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap;
}
.option__vs i { font-style: normal; opacity: .5; font-size: 10px; }
.option__vs .w { font-weight: 600; }
.option__vs--pos .w, .option__vs--pos b:first-of-type { color: var(--pri); }
.option__vs--neg .w, .option__vs--neg b:last-of-type { color: var(--neg); }
.option__vs--warn .w { color: var(--warn); }
/* What the analyst you are paying for was able to add. Set apart from the
   matchup, because it is the one thing on this card you bought. */
.option__read {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 42%, var(--line));
  background: color-mix(in srgb, var(--info) 10%, transparent);
}
/* the player's own marker breathes, and throws a ring, so the eye finds him */
.pl-you { animation: pl-you 2.6s ease-in-out infinite; }
@keyframes pl-you { 0%, 100% { r: 6.4; } 50% { r: 7.1; } }
.pl-halo { animation: pl-halo 2.6s ease-out infinite; }
@keyframes pl-halo { 0% { r: 7; opacity: .75; } 100% { r: 13; opacity: 0; } }
/* the ball's path to goal, drawn dashed and crawling, like v3's `.ballpath` */
.pl-ballpath { stroke-dasharray: 3 2.4; animation: pl-ballpath 1.1s linear infinite; }
@keyframes pl-ballpath { to { stroke-dashoffset: -5.4; } }
@media (prefers-reduced-motion: reduce) {
  .pl-you, .pl-halo, .pl-ballpath { animation: none; }
  .pl-halo { opacity: 0; }
}

/* the player's own numbers under the pitch. These are HIS counters — the
   engine keeps no per-side shot count, so there is no us-v-them bar to draw
   and none is faked. */
/* the shots bar: a number each end, a two-tone bar between, v3's `.mstat` */
/* It was one row — shots, and only shots, because the engine counted nothing
   else per side. It counts everything now, so this is the panel every match
   screen in the world has: a number each end, the label between them, and a bar
   under it. Rebuilt live and never saved. */
.mstat { display: grid; gap: 10px; }
.mstat__r { display: grid; grid-template-columns: 38px 1fr 38px; gap: 8px 10px;
  align-items: center; }
.mstat__r > span:first-of-type { text-align: center; font-size: 11px;
  font-weight: 700; letter-spacing: .03em; color: var(--muted); }
.mstat__r .mbar { grid-column: 1 / -1; }
.mstat b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mstat__r b:last-of-type { text-align: right; }
.mstat--report { margin: 4px 0 14px; }
.mtimeline li.is-card .tmin { color: var(--warn); }
.mtimeline li.is-near .ttext { color: var(--muted); }
.mbar { height: 6px; border-radius: 999px; display: flex; overflow: hidden; background: var(--card-3); }
.mbar i { display: block; height: 100%; transition: width 1s var(--spring); }

/* --------------------------------------------------- the decision panel */
.dec {
  border-color: color-mix(in srgb, var(--club) 44%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--club) 15%, transparent),
              0 22px 50px -22px color-mix(in srgb, var(--club) 70%, transparent),
              0 1px 0 var(--edge) inset;
  animation: dec-breathe 3.6s ease-in-out infinite;
}
@keyframes dec-breathe {
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--club) 28%, transparent),
                    0 26px 60px -22px color-mix(in srgb, var(--club) 85%, transparent),
                    0 1px 0 var(--edge) inset; }
}
@media (prefers-reduced-motion: reduce) { .dec { animation: none; } }
.dec .mpanel__h {
  background: linear-gradient(90deg, color-mix(in srgb, var(--club) 32%, transparent), transparent);
}
.dec .mpanel__t { color: var(--club-ink); }
.dec__t { margin: 0; font-size: clamp(13px, 1.4vw, 14.5px); line-height: 1.55; }

/* ------------------------------------------------- match option rows
   v3's `.o`: full-width row, the club colour sliding in from the left edge on
   hover, what it will be judged on underneath, and the risk as a pip meter
   rather than a word. */
.options--match { display: grid; }
.options--match .option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
  align-items: center; position: relative; overflow: hidden;
  padding: 11px 14px; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; background: none; min-height: 56px;
}
.options--match .option::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--club); transition: width .16s var(--spring);
}
.options--match .option:hover:not([disabled]) {
  /* the generic `.option:hover` turns the whole border green and adds a green
     ring — on a match row whose only border is a hairline top divider that
     drew a green line above and below each option. Keep the divider its own
     colour and kill the ring; the sliding club edge (::before) is the hover
     signal here. */
  background: var(--card-3); padding-left: 19px;
  border-top-color: var(--line); box-shadow: none;
}
.options--match .option:hover:not([disabled])::before { width: 3px; }
.options--match .option:active:not([disabled]) { transform: scale(.988); box-shadow: none; }
.option__label { position: relative; font-size: 13.5px; font-weight: 650; }
.option__uses { position: relative; display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--dim); }
.option__risk {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  flex: none;
  font-size: 9.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
/* The caption. Without it the pips and the word are a scale with no unit, and
   "HIGH" reads to a lot of people as "this option is good". */
.option__risklab {
  font-size: 8.5px; font-weight: 700; letter-spacing: .07em;
  color: var(--dim); text-transform: uppercase; white-space: nowrap;
}
.option__riskv { display: flex; align-items: center; gap: 7px; }
/* five pips; how many are lit is the risk level, and the colour repeats it */
.pips { display: flex; gap: 2px; }
.pips i { width: 4px; height: 12px; border-radius: 1px; background: var(--card-3); }
.option__risk--neg { color: var(--neg); }
.option__risk--neg .pips i:nth-child(-n+5) { background: var(--neg); box-shadow: 0 0 8px var(--neg); }
.option__risk--warn { color: var(--warn); }
.option__risk--warn .pips i:nth-child(-n+3) { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.option__risk--pos { color: var(--pri); }
.option__risk--pos .pips i:nth-child(-n+2) { background: var(--pri); box-shadow: 0 0 8px var(--pri); }
.option__risk--pos.is-none .pips i:nth-child(-n+2) { background: var(--card-3); box-shadow: none; }
.option__risk--pos.is-none .pips i:first-child { background: var(--pri); box-shadow: 0 0 8px var(--pri); }
/* On a narrow screen the word goes and the caption stays: the caption is the
   half that carries the meaning, and the colour repeats the level anyway. */
@media (max-width: 440px) {
  .option__risk .w { display: none; }
  .option__risklab { font-size: 8px; letter-spacing: .04em; }
}
.mactions { display: flex; gap: 9px; flex-wrap: wrap; }
.mactions .btn--lg { flex: 1 1 200px; }

@media (max-width: 520px) {
  .mtimeline li { grid-template-columns: 36px 1fr; }
  .sb__c { font-size: 12px; }
  .sb__c .crest { width: 20px; height: 20px; }
}

/* the pitch you pick a position on */
.pitchpick { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 760px) { .pitchpick { grid-template-columns: 300px 1fr; } }
.pitchpick__pitch {
  display: grid; gap: 7px; padding: 14px 12px;
  background:
    linear-gradient(180deg, #10201A 0%, #0D1A16 100%);
  border: 1px solid #1E3A2C; border-radius: var(--r);
}
.pitchpick__row { display: flex; justify-content: center; gap: 7px; }
.posbtn {
  min-width: 52px; min-height: 44px; padding: 0 8px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: #0E1A16; color: var(--muted);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.posbtn { transition: background .13s, color .13s, border-color .13s, transform .1s var(--spring); }
.posbtn:hover { color: #fff; border-color: var(--pri); background: #1B4033; }
.posbtn:active { background: #0B1512; transform: scale(.96); box-shadow: var(--act-in); }
.posbtn[aria-checked="true"] { background: var(--pri); border-color: var(--pri); color: var(--pri-ink); }
.posdetail b { font-size: 17px; }
.posdetail .keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }

/* creation choice cards */
.picks { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 10px; }
.pick { position: relative; display: block; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.pick__box {
  display: grid; gap: 6px; height: 100%; padding: 13px;
  background: var(--card-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  cursor: pointer;
}
.pick input:checked + .pick__box { border-color: var(--pri); background: #10201A; }
.pick input:focus-visible + .pick__box { outline: 2px solid var(--pri); outline-offset: 2px; }
.pick__name { font-size: 14px; font-weight: 700; }
.pick input:checked + .pick__box .pick__name { color: var(--pri); }
.pick__blurb { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.pick__list { display: grid; gap: 3px; margin-top: 3px; }
.pick__list span { font-size: 11.5px; color: var(--dim); padding-left: 12px; position: relative; }
.pick__list span::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--line-2);
}

.clubpick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 7px; max-height: 250px; overflow-y: auto; padding: 4px; margin-top: 10px;
  background: #0E161E; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.clubopt { position: relative; display: block; }
.clubopt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.clubopt__box {
  display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 9px;
  background: var(--card-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  cursor: pointer; font-size: 12.5px; font-weight: 700;
}
.clubopt input:checked + .clubopt__box { border-color: var(--pri); background: #10201A; }
.clubopt__box em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--dim); }
.review { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 10px; }

/* ============================================================= app shell */

.app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'top' 'main';
  /* Both rows were implicit `auto`. Under min-height:100vh the leftover
     height is split evenly between auto rows, so on a short page (Career
     with an empty inbox) the topbar row grew to 235px and floated the
     header down the screen. `1fr` on main takes the slack instead. */
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}
@media (min-width: 900px) {
  .app {
    grid-template-columns: var(--rail) 1fr;
    grid-template-areas: 'rail top' 'rail main';
  }
}

.topbar {
  grid-area: top;
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--gut);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar__brand {
  display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 10px;
  background: transparent; border: 0; color: var(--ink);
  font-weight: 800; letter-spacing: .06em; cursor: pointer;
}
@media (min-width: 900px) { .topbar__brand { display: none; } }
/* inline-block, not inline: a width and a height do nothing to an inline span */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--pri); }
.topbar__when { margin: 0 auto 0 0; display: grid; line-height: 1.25; }
.topbar__when b { font-size: 13px; }
.topbar__when span { font-size: 11.5px; color: var(--dim); }

.chip {
  display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 4px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); cursor: pointer; max-width: 250px;
}
.chip { transition: background .13s, border-color .13s, transform .1s var(--spring); }
.chip:hover { border-color: var(--pri); background: var(--hov-soft); }
.chip:active { background: var(--act); transform: scale(.985); box-shadow: var(--act-in); }
.chip__text { display: grid; min-width: 0; text-align: left; line-height: 1.25; }
.chip__text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip__text span { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip__ovr {
  display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px;
  border-radius: var(--r-sm); background: var(--pri); color: var(--pri-ink);
  font-size: 14px; font-weight: 800;
}
.crest { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 5px; border: 1px solid #ffffff20; }
.crest--sm { width: 18px; height: 18px; border-radius: 4px; }
.crest--lg { width: 34px; height: 34px; border-radius: 7px; }

/* notifications panel — SidePanel on desktop, sheet-ish on mobile */
.notif {
  position: fixed; z-index: 30; right: var(--gut); top: 62px;
  width: min(340px, calc(100vw - 2 * var(--gut)));
  max-height: 60vh; overflow-y: auto; padding: 14px;
  background: var(--card-2); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.notif__title { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .09em; }
.notif__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.notif__list li {
  padding: 9px 10px; border-radius: var(--r-sm); background: var(--card);
  border: 1px solid var(--line); font-size: 12.5px;
}

/* the rail */
.rail { grid-area: rail; display: none; }
@media (min-width: 900px) {
  .rail {
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: 0; align-self: start; height: 100vh;
    padding: 14px 10px; border-right: 1px solid var(--line);
    background: #0D141C;
  }
  .rail__brand {
    display: flex; align-items: center; gap: 9px; padding: 6px 10px 18px;
    font-weight: 800; letter-spacing: .04em; font-size: 15px;
  }
  .rail__btn {
    display: flex; align-items: center; gap: 11px;
    min-height: 44px; padding: 0 12px; width: 100%;
    border: 0; border-radius: var(--r-sm); background: transparent;
    color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer;
    text-align: left;
  }
  .rail__btn { position: relative; transition: background .15s var(--spring), color .15s; }
  .rail__btn:hover { background: var(--hov-soft); color: #fff; }
  .rail__btn:active { background: var(--act); box-shadow: var(--act-in); }
  .rail__btn[aria-current="page"] {
    color: #fff; font-weight: 700;
    background: linear-gradient(90deg, color-mix(in srgb, var(--club) 26%, transparent), transparent);
  }
  .rail__btn[aria-current="page"]::before {
    content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--club); box-shadow: 0 0 14px var(--club);
  }
  .rail__btn[aria-current="page"] .ico { color: var(--club); }
  .rail__btn .count {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 999px;
    background: var(--neg); color: #150406; font-size: 11px; font-weight: 800;
  }
}

/* bottom bar */
.bottombar { display: none; }
@media (max-width: 899px) {
  .bottombar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 25;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottombar__btn {
    position: relative; display: grid; justify-items: center; gap: 3px;
    min-height: 56px; padding: 8px 2px;
    border: 0; background: transparent; color: var(--dim);
    font-size: 10.5px; font-weight: 600; cursor: pointer;
  }
  .bottombar__btn { border-radius: 10px; transition: transform .18s var(--spring), background .18s; }
  .bottombar__btn:active { transform: scale(.93); }
  .bottombar__btn[aria-current="page"] {
    color: #fff; background: color-mix(in srgb, var(--club) 20%, transparent);
  }
  .bottombar__btn[aria-current="page"] .ico { color: var(--club); }
  .bottombar__btn .count {
    position: absolute; top: 5px; right: 50%; transform: translateX(16px);
    min-width: 16px; height: 16px; padding: 0 4px;
    display: grid; place-items: center; border-radius: 999px;
    background: var(--neg); color: #150406; font-size: 10px; font-weight: 800;
  }
}

/* min-width: 0 or a grid item grows to its own min-content and takes the page
   with it — one wide table then pushes the whole phone layout sideways */
.app > * { min-width: 0; }
#main { grid-area: main; padding: var(--gut); padding-bottom: 90px; min-width: 0; }
@media (min-width: 900px) { #main { padding-bottom: var(--gut); max-width: 1440px; } }

.pagehead { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.pagehead__title { font-size: clamp(20px, 3vw, 26px); }
.tabs { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; min-height: 40px; padding: 0 14px;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--dim);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.tab { transition: background .13s, color .13s, border-color .13s; }
.tab:hover { color: #fff; background: var(--hov-soft); border-color: var(--line-2); }
.tab:active { background: var(--act); box-shadow: var(--act-in); }
.tab[aria-selected="true"] { background: var(--card-2); border-color: var(--line-2); color: var(--ink); }

/* ================================================================= cards */

.grid { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
.grid > *, .table-wrap { min-width: 0; }
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--span2, .card--span3 { grid-column: span 2; }
}
@media (min-width: 1180px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card--span2 { grid-column: span 2; }
  .card--span3 { grid-column: span 3; }
  .card--lead { grid-column: span 2; }
}

/* A panel, not a box. The inset highlight along the top edge and the deep,
   soft shadow are what make it read as a surface with a light above it —
   one rule, and every screen in the game gets it. */
/* A panel, not a padded box. This is v3's `.pnl` — a header strip with its own
   lit gradient and a hairline under it, then a separately padded body. The
   header is what makes it read as a built object with layers; a title floating
   inside one flat rectangle is what made every screen look like a form.

   Every `<article class="card">` in index.html carries `.card__h` + `.card__b`
   for this. There is no version that works without them. */
.card {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card) 88%, transparent),
    color-mix(in srgb, #101622 92%, transparent));
  backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 1px 0 var(--edge) inset, var(--shadow);
  overflow: hidden;
}
.card__h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent);
}
.card__b { padding: 14px; }
.card--flush .card__b { padding: 11px; }
/* the label type v3 uses for every panel heading: smaller, wider, quieter */
.card__title {
  margin: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .17em;
  text-transform: uppercase; color: var(--muted);
}
/* a `card__head` was a title plus something on the right; inside the strip
   that is just justify-between */
.card__h:has(.pill), .card__h--split { justify-content: space-between; }
/* .card__title outside a strip — the hero uses it — keeps its own spacing */
.hero .card__title { margin-bottom: 11px; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; }

/* StatCard */
.stats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
.stat {
  padding: 10px 11px; border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--card-2), color-mix(in srgb, var(--card) 88%, #000));
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--edge) inset;
}
.stat__k { font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); }
.stat__v { font-size: 17px; font-weight: 700; margin-top: 2px; }
.stat__v small { font-size: 12px; color: var(--muted); font-weight: 600; }
.stat--pos .stat__v { color: var(--pos); }
.stat--neg .stat__v { color: var(--neg); }
.stat--warn .stat__v { color: var(--warn); }

/* ProgressBar.
   display:block matters: .bar is a <span>, and height on an inline element does
   nothing. Inside .attr__row or .coach__row it is a flex/grid item and gets
   blockified for free, which is exactly why the bug only showed up in the one
   place a bar sits in a plain div. */
.bar { display: block; height: 7px; border-radius: 999px; background: #0D161E;
  border: 1px solid var(--line); overflow: hidden; position: relative; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--pri); }
.bar--info i { background: var(--info); }
.bar--warn i { background: var(--warn); }
.bar--neg i { background: var(--neg); }
.bar--special i { background: var(--special); }
.bar__cap { position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: #ffffffa8; border-radius: 1px; transform: translateX(-1px); }

.meters { display: grid; gap: 11px; }
.meter__top { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; margin-bottom: 5px; }
.meter__top span { color: var(--muted); }
.meter__top b { font-weight: 700; }

/* RelationshipMeter */
/* A full-width card grid rather than one tall scrolling column, so the dressing
   room fills the desktop like the Home dashboard does. */
.meterlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); }
.meterlist li {
  display: grid; grid-template-columns: 1fr 74px 32px; gap: 9px; align-items: center;
  padding: 10px 12px; background: var(--card-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12.5px;
}
.meterlist b { text-align: right; font-size: 12.5px; }
.mname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mname em { font-style: normal; color: var(--dim); font-size: 10.5px; margin-left: 6px; }

/* attributes */
.attrs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.attrgroup { display: grid; gap: 9px; align-content: start; }
.attrgroup__title { font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pri); }
.attr__top { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; margin-bottom: 5px; }
.attr__top span { color: var(--muted); }
.attr__top b { font-weight: 700; }
.attr__row { display: flex; align-items: center; gap: 8px; }
.attr__row .bar { flex: 1; }
.attr__cost { font-size: 10.5px; color: var(--dim); min-width: 32px; text-align: right; }
.attr__buy {
  min-width: 34px; min-height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--card-2);
  color: var(--pri); font-weight: 800; cursor: pointer; line-height: 1;
}
.attr__buy:hover:not(:disabled) { background: var(--pri); color: var(--pri-ink); }
.attr__buy:disabled { opacity: .3; color: var(--dim); cursor: not-allowed; }

/* PlayerCard */
.pcard {
  display: grid; gap: 12px; padding: 15px;
  background: linear-gradient(160deg, var(--card-3) 0%, var(--card) 62%);
  border: 1px solid var(--line-2); border-radius: var(--r);
}
.pcard__top { display: flex; align-items: center; gap: 12px; }
.pcard__ovr {
  display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 auto;
  border-radius: var(--r-sm); background: var(--pri); color: var(--pri-ink);
  font-size: 26px; font-weight: 800; line-height: 1;
}
.pcard__ovr small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.pcard__id { min-width: 0; }
.pcard__name { display: block; font-size: 17px; font-weight: 700; }
.pcard__meta { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pcard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pcard__stat {
  padding: 8px; text-align: center; background: #0E161E;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.pcard__stat b { display: block; font-size: 17px; font-weight: 700; }
.pcard__stat span { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--dim); }

/* fixture */
.fixture {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 15px 12px; margin-bottom: 12px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.fixture__side { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.fixture__side:last-of-type { justify-content: flex-end; text-align: right; }
.fixture__vs { font-size: 11px; font-weight: 800; color: var(--pri); letter-spacing: .1em; }
.fixture__meta { grid-column: 1 / -1; text-align: center; color: var(--dim);
  font-size: 11.5px; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--line); }

/* this-week list */
.week { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.week li {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 12.5px;
}
.week__day { width: 30px; font-size: 10.5px; font-weight: 700; color: var(--dim); }
.week__what { flex: 1; min-width: 0; }
.week li.is-match { border-color: #2C4A36; background: #101C15; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips--stack { display: grid; gap: 7px; }
.chipopt { position: relative; display: inline-block; }
.chips--stack .chipopt { display: block; }
.chipopt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.chipopt__box {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px;
  background: var(--card-2); border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.chips--stack .chipopt__box {
  justify-content: flex-start; border-radius: var(--r-sm);
  /* a two-line chip has to be able to be two lines tall */
  display: block; padding: 9px 13px; min-width: 0;
}
.chipopt input:checked + .chipopt__box {
  background: var(--pri); border-color: var(--pri); color: var(--pri-ink);
}
.chipopt input:focus-visible + .chipopt__box { outline: 2px solid var(--pri); outline-offset: 2px; }

.preview { margin-top: 12px; padding: 12px; background: var(--card-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); }
.preview__row { display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 3px 0; }
.preview__row span { color: var(--muted); }

/* NewsCard */
.news { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  max-height: 300px; overflow-y: auto; }
.news li {
  display: grid; gap: 3px; padding: 10px 11px; border-left: 3px solid var(--line-2);
  background: var(--card-2); border-radius: var(--r-sm); font-size: 13px;
}
.news li.good { border-left-color: var(--pos); }
.news li.bad { border-left-color: var(--neg); }
.news li.transfer { border-left-color: var(--info); }
/* full width on Home, so the news strip fills its row instead of leaving two
   empty columns beside it */
@media (min-width: 700px) {
  .news--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 260px; }
}
@media (min-width: 1180px) {
  .news--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.news__when { font-size: 10px; font-weight: 700; letter-spacing: .07em; color: var(--dim); }
.news__body { color: var(--muted); font-size: 12.5px; }

/* EventCard */
.evlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px;
  max-height: 420px; overflow-y: auto; }
.ev {
  display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center;
  width: 100%; padding: 12px; text-align: left;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); cursor: pointer;
}
.ev { transition: background .13s, border-color .13s, transform .1s var(--spring); }
.ev:hover { border-color: var(--hov-line); background: var(--hov-soft); }
.ev:active { background: var(--act); transform: scale(.995); box-shadow: var(--act-in); }
.ev--need { border-left: 3px solid var(--warn); }
.ev--done { background: #0F1720; }
.ev__urgency { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); }
.ev--done .ev__urgency { background: var(--line-2); }
.ev__main { min-width: 0; }
/* All three are spans, and all three are laid out as blocks — so they need
   saying so. This is the third time this exact mistake has been found in this
   file: `.bar` was a span with a height, `.pcard__name` was a span with a
   margin-top, and these were spans with `margin-top` *and* `text-overflow`.
   Vertical margins and text-overflow are both no-ops on an inline element, so the
   one-line-with-an-ellipsis preview never truncated — it just ran off the side of
   the card and got clipped mid-word by the button's edge. */
.ev__from { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); }
.ev__title { display: block; font-size: 13.5px; font-weight: 600; margin-top: 1px; }
.ev__sub { display: block; font-size: 12px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev__when { font-size: 11px; color: var(--dim); white-space: nowrap; }

/* calendar */
/* A two-column card grid on desktop so the season does not run down a narrow
   strip. International windows span the full width as dividers. */
.cal { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.cal li {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 12.5px;
}
.cal li.cal--window { grid-column: 1 / -1; background: var(--card); }
.cal li.cal--month {
  grid-column: 1 / -1; background: transparent; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: 14px 2px 2px; margin-top: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--club-ink);
}
.cal li.cal--month:first-child { border-top: 0; margin-top: 0; padding-top: 2px; }
.cal li.is-now { border-color: var(--pri); background: #101C15; }
.cal li.is-past { background: #0F1720; border-color: #1B2833; }
.cal__wk { font-size: 10.5px; font-weight: 700; color: var(--dim); }
.cal__match { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cal__match .crest { flex: 0 0 auto; }
.cal__opp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* depth chart */
.depth { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.depth li {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 13px;
}
.depth li.starter { border-color: #2C4A36; background: #101C15; }
.depth li.is-me { border-color: var(--pri); }
.depth__rank { width: 20px; font-size: 11.5px; font-weight: 700; color: var(--dim); }
.depth__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depth__name em { font-style: normal; color: var(--dim); font-size: 10.5px; margin-left: 6px; }
.depth__ovr { font-weight: 800; }
.depth__tag { min-width: 46px; text-align: right; font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.depth li.starter .depth__tag { color: var(--pri); }

/* coach */
.coach__traits { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.coach__reads { display: grid; gap: 9px; }
/* 42px, not 32px: the national pane puts a percentage in this column, and "100%"
   needs 39px. At 32 it overflowed the column silently — no wrap, no ellipsis, just
   a digit sitting outside its cell. The coach rows only ever hold two digits,
   which is why it went unseen until a player's call-up odds reached 100. */
.coach__row { display: grid; grid-template-columns: 1fr 74px 42px; gap: 9px;
  align-items: center; font-size: 12.5px; }
.coach__row span:first-child { color: var(--muted); }
.coach__row b { text-align: right; font-size: 12.5px; }

.trustlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px;
  max-height: 360px; overflow-y: auto; }
.trustlog li {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 10px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 12.5px;
}
.trustlog .d { font-weight: 800; text-align: right; }
.trustlog .d.up { color: var(--pos); }
.trustlog .d.down { color: var(--neg); }
.trustlog .w { font-size: 10.5px; color: var(--dim); }

.devlog, .memlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.devlog li, .memlog li {
  padding: 9px 10px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 12.5px; color: var(--muted);
}
.devlog b, .memlog b { color: var(--ink); }

/* CompetitionTable */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ctable { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 440px; }
.ctable thead th {
  position: sticky; top: 0; z-index: 1; background: #0E161E;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dim); text-align: left; padding: 10px 8px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ctable td { padding: 9px 8px; border-bottom: 1px solid #16202B; }
.ctable tbody tr:last-child td { border-bottom: 0; }
.ctable .num { text-align: right; width: 54px; }
/* the five-column table on Home has no need of the wide minimum, so it fits a
   phone without sideways scrolling */
.ctable--mini { min-width: 0; }
.ctable--mini .num { width: 46px; }
.ctable th:first-child, .ctable td:first-child { width: 42px; }
.ctable tbody tr.is-me { background: #101C15; }
.ctable tbody tr.is-me td { font-weight: 700; }
/* The club column carries the club's name now, not its three-letter code. A
   table of BOU / BRE / BHA reads like a spreadsheet and needs decoding; a table
   of Bournemouth / Brentford / Brighton reads like football. The column is given
   room and the name is allowed to ellipsis on a narrow phone rather than
   wrapping the row. */
.tclub { display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  min-width: 0; max-width: 100%; }
.tclub__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctable td:nth-child(2) { max-width: 0; width: 42%; }
tr.z-ucl td:first-child { box-shadow: inset 3px 0 0 var(--info); }
tr.z-promo td:first-child { box-shadow: inset 3px 0 0 var(--pri); }
tr.z-po td:first-child { box-shadow: inset 3px 0 0 var(--special); }
tr.z-rel td:first-child { box-shadow: inset 3px 0 0 var(--neg); }


/* minmax(0, 1fr): a single implicit grid column is `auto`, which sizes to the
   widest row's max-content — so one long fixture ("Sepahan 1–8 Kawasaki
   Frontale") blew the whole list past the card's right edge and clipped the
   away crest. minmax(0,1fr) caps the column at the container width, and the
   rows' flex children (which already carry min-width:0) shrink and ellipsis
   instead. `.badges` sets its own columns below, so it is unaffected. */
.scorers, .results, .badges {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr);
}
.scorers li, .results li {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 12.5px;
}
.sname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgoals { font-weight: 800; }
.scorers li.is-me, .results li.mine { border-color: var(--pri); background: #101C15; }
.rscore { margin: 0 8px; font-weight: 800; flex: 0 0 auto; }
/* Home name pushed right, away name left, score in the middle — the shape a
   results list has in a newspaper, and the only way full club names fit on one
   line without the score drifting. */
.cupblock { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.cupblock:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.rname { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: right; }
.rname--away { text-align: left; }

.badges { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.badges li {
  padding: 10px 11px; background: var(--card-2); border: 1px solid var(--line);
  border-left: 3px solid var(--line-2); border-radius: var(--r-sm); font-size: 12.5px;
}
.badges li.trophy { border-left-color: var(--warn); color: var(--warn); font-weight: 600; }

/* OfferCard */
.offer {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 13px; margin-bottom: 9px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.offer__club { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 8px; }
.offer__terms { display: flex; flex-wrap: wrap; gap: 6px; }
.offer__terms span {
  padding: 5px 9px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 11.5px; color: var(--muted);
}
.offer__terms b { color: var(--ink); }
/* Interested clubs as a card grid, filling the width like the Home news grid. */
#interest { display: grid; gap: 9px; grid-template-columns: 1fr; }
#interest .irow {
  padding: 10px 12px; background: var(--card-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
#interest .irow--hot { border-color: color-mix(in srgb, var(--pri) 40%, var(--line)); }
/* Offers and loans two-up on desktop instead of one long column. */
#offers, #loans { display: grid; gap: 10px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 366px), 1fr)); }
.irow { display: grid; grid-template-columns: 24px 1fr 84px 30px; gap: 9px;
  align-items: center; margin-bottom: 7px; font-size: 12.5px; }
.irow b { text-align: right; font-size: 12.5px; }
/* The interest rows carry an action now, so the button and the "asked for" tag
   wrap onto their own line under the bar rather than squeezing the club name. */
#interest .irow { grid-template-columns: 24px 1fr 56px 108px; }
.irow__tag {
  justify-self: start; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--pri);
  border: 1px solid color-mix(in srgb, var(--pri) 45%, var(--line));
  border-radius: 999px; padding: 3px 9px;
}
#interest .irow--want { border-color: color-mix(in srgb, var(--pri) 62%, var(--line)); }
.btn--sm { min-height: 34px; padding: 0 12px; font-size: 12px; }

/* The conversation with your agent. Laid out as a conversation — who is
   speaking, then what they said — because that is what it is. */
.talk {
  grid-column: 1 / -1; padding: 15px 16px 13px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.talk__line + .talk__line { margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--line); }
.talk__who {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pri);
}
.talk__say { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.talk__line--no .talk__who { color: var(--warn); }
.talk__line--new .talk__say { color: #fff; }
.talk__opts { margin-top: 14px; display: grid; gap: 8px; }

/* ------------------------------------------------------------ club picker
   Two hundred and twenty clubs in a list that has to stay usable on a phone.
   The search box is a real label plus a real input, the league filter is a
   pressed-state button group rather than a row of divs, and a chosen club
   expands in place to a confirm strip — the call is one a season and a
   fat-fingered tap must not spend it. */
.pickr { margin: 2px 0 6px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card-2); overflow: hidden; }
.pickr__bar { display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 8px 10px; padding: 10px 11px 9px; border-bottom: 1px solid var(--line); }
.pickr__lab { grid-column: 1 / -1; font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pickr__q { width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); }
.pickr__q:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
.pickr__count { font-size: 11.5px; white-space: nowrap; }
.pickr__lgs { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 11px;
  border-bottom: 1px solid var(--line); }
.pickr__lg { padding: 5px 9px; font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--muted); background: var(--card); border: 1px solid var(--line-2);
  border-radius: 999px; cursor: pointer; }
.pickr__lg:hover { background: var(--hov-soft); color: var(--ink); }
.pickr__lg:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.pickr__lg.is-on { background: var(--pri); border-color: var(--pri); color: var(--pri-ink); }
.pickr__lg--mine::after { content: ' \2022'; color: var(--club); }
.pickr__lg.is-on.pickr__lg--mine::after { color: var(--pri-ink); }
.pickr__list { max-height: min(52vh, 420px); overflow: auto; overscroll-behavior: contain; }
.pickr__list > .note { margin: 14px 12px; }
.prow { border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: 0; }
.prow__b { display: grid; grid-template-columns: 22px 1fr auto; align-items: center;
  gap: 10px; width: 100%; padding: 9px 11px; text-align: left; font: inherit;
  color: var(--ink); background: none; border: 0; cursor: pointer; }
.prow__b:hover { background: var(--hov-soft); }
.prow__b:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.prow--sel .prow__b { background: var(--card-3); }
.prow__n { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.prow__n em { display: block; font-style: normal; font-size: 11px; color: var(--dim);
  font-weight: 500; }
.prow__r { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; text-align: right; max-width: 8.5em; line-height: 1.25; }
.prow__r--yes { color: var(--pri); }
.prow__r--mid { color: var(--muted); }
.prow__r--no { color: var(--dim); }
.prow__ask { padding: 2px 11px 11px; background: var(--card-3); }
.prow__ask p { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.prow__btns { display: flex; flex-wrap: wrap; gap: 7px; }
.option--neg { border-color: color-mix(in srgb, var(--neg) 35%, var(--line)); }
.option--pos { border-color: color-mix(in srgb, var(--pri) 32%, var(--line)); }
.note--flag { margin: 12px 0 0; grid-column: 1 / -1; }
.irows { grid-column: 1 / -1; display: grid; gap: 9px; margin-top: 4px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); }
#interest .irows .irow { padding: 10px 12px; background: var(--card-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); }
#interest .irow b { font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); text-align: right; }
#interest .irow--hot b { color: var(--pri); }

.nation__head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.nation__code {
  font-size: 20px; font-weight: 800; letter-spacing: .04em; padding: 9px 12px;
  border-radius: var(--r-sm); background: var(--info); color: #04121A;
}
.nation__name { font-size: 16px; font-weight: 700; }
.nation__name span { display: block; color: var(--dim); font-size: 12px; font-weight: 500; }

/* ============================================ BottomSheet / SidePanel */

.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end;
  background: #000000b8; }
.sheet__box {
  width: 100%; max-height: 82vh; overflow-y: auto; padding: 10px var(--gut) 20px;
  background: var(--card-2); border-top: 1px solid var(--line-2);
  border-radius: 16px 16px 0 0;
}
@media (min-width: 700px) {
  .sheet { align-items: center; justify-content: center; padding: var(--gut); }
  .sheet__box { max-width: 420px; border-radius: var(--r); border: 1px solid var(--line-2); }
}
.sheet__grip { width: 42px; height: 4px; border-radius: 999px; background: var(--line-2);
  margin: 4px auto 12px; }
.sheet__title { font-size: 12px; color: var(--dim); text-transform: uppercase;
  letter-spacing: .09em; margin-bottom: 10px; }
.sheetnav { display: grid; gap: 6px; margin-bottom: 14px; }
.sheetnav button {
  display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left;
}
.sheetnav button .ico { color: var(--pri); }

/* DecisionCard */
/* Editorial scrollbars — thin, muted, and club-tinted on hover, so they read as
   part of the type rather than an OS default bar across the page. */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 999px;
  border: 3px solid var(--bg); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--club); }
::-webkit-scrollbar-corner { background: transparent; }

.overlay {
  position: fixed; inset: 0; z-index: 55; display: grid; place-items: center;
  /* Solid, not translucent: a popup should stand on its own surface, not let the
     table and the pitch behind it bleed through the type. */
  padding: var(--gut); background: var(--bg);
}
.overlay__box {
  width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; padding: 20px;
  background: var(--card-2); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.overlay__from { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pri); }
.overlay__title { font-size: 19px; margin: 6px 0 10px; }
.overlay__body { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.options { display: grid; gap: 8px; }
.option {
  display: grid; gap: 5px; width: 100%; padding: 13px; text-align: left;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--ink); cursor: pointer;
}
.option { transition: background .13s, border-color .13s, box-shadow .13s, transform .1s var(--spring); }
.option:hover:not([disabled]) {
  border-color: var(--pri); background: var(--hov-soft);
  box-shadow: 0 0 0 1px var(--pri), 0 8px 20px -14px var(--pri);
}
.option:active:not([disabled]) { background: var(--act); transform: scale(.995); box-shadow: var(--act-in), 0 0 0 1px var(--pri); }
.option__label { font-size: 14px; font-weight: 600; }
.option__hint { font-size: 12px; color: var(--dim); }
.outcome { display: grid; gap: 6px; margin-top: 14px; }
.outcome__line {
  padding: 9px 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 12.5px; color: var(--muted);
}

/* post-match, full screen */
.overlay--full { padding: 0; align-items: stretch; justify-items: stretch; }
.report {
  width: 100%; max-width: 560px; margin: auto; padding: var(--gut);
  display: grid; gap: 14px; align-content: start; overflow-y: auto; max-height: 100vh;
}
/* The report is a page, not a phone column. On a wide screen the write-up keeps
   a readable measure on the left and the box score, rating, manager's word and
   attribute gains sit in a facts rail beside it, so the desktop width is used
   instead of a narrow strip down the middle. Everything stacks below 900px. */
.report__grid { display: grid; gap: 14px; align-content: start; min-width: 0; }
.report__side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.report__lead { min-width: 0; }
.report__lead:empty { display: none; }
.report__grid--nolead { max-width: 620px; margin: 0 auto; }
@media (min-width: 900px) {
  .overlay--full .report:has(.report__grid:not(.report__grid--nolead)) { max-width: 1060px; }
  .report__grid:not(.report__grid--nolead) {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 36px; align-items: start;
  }
  .report__lead .article { max-width: 62ch; }
  /* the rating is the rail's hero on desktop — let it breathe */
  .report__side .rrating { padding: 20px; }
}
.rscoreline { text-align: center; padding: 8px 0 4px; }
.rscoreline .big { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.rscoreline .who { color: var(--muted); font-size: 13px; margin-top: 8px; }
.verdict { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; margin: 0; }
.verdict.win { color: var(--pos); }
.verdict.draw { color: var(--muted); }
.verdict.loss { color: var(--neg); }
.rrating { display: grid; place-items: center; gap: 2px; padding: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.rrating b { font-size: 38px; font-weight: 800; line-height: 1; }
.rrating.hot { border-color: var(--pri); background: #101C15; }
.rrating.hot b { color: var(--pri); }
.rrating.cold { border-color: #4A2429; background: #1C1113; }
.rrating.cold b { color: var(--neg); }
.rrating span { font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); }

/* MatchEvent */
.mevlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mev { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center;
  padding: 9px 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 12.5px; }
.mev__min { font-size: 11px; font-weight: 700; color: var(--dim); }
.mev--card { border-left-color: var(--neg); }
.mev--goal { border-color: #2C4A36; background: #101C15; }
.mev--card { border-left-color: var(--neg); }
.mev--goal .mev__min { color: var(--pri); }
.mev--bad { border-color: #4A2429; }

/* --- Editorial match report -------------------------------------------------
   The report opens with a serif write-up (.article, club-accented) and then
   shows the box score, the rating, the manager's line and the week's attribute
   gains. Left to their defaults those lower widgets fire the game's neon-green
   HUD accent (--pri) — a glowing rating frame, a bright bar on the verdict, and
   a whole grid of green numbers when several attributes rise at once — which
   reads as a different page from the article above it. Scoped to .report, the
   accent drops to the article's own club tone (club-ink for text, club for a
   rule), the glows and coloured fills become quiet ruled cards, and the gains
   become a restrained from → to ledger rather than green tiles. Red stays for
   losses and conceded goals; it belongs on an editorial page as much as in
   print. The rest of the app (Home, the HUD) keeps the neon language. */
.report .verdict.win { color: var(--club-ink); }
.report .rrating { background: var(--card-2); border-color: var(--line); }
.report .rrating.hot {
  background: var(--card-2);
  border-color: color-mix(in srgb, var(--club) 45%, var(--line));
}
.report .rrating.hot b { color: var(--club-ink); }
.report .rrating.cold { background: var(--card-2); border-color: #3B2A30; }
.report .rrating.cold b { color: #E7A6AA; }
.report .mev--goal { background: var(--card-2); border-color: var(--line-2); }
.report .mev--goal .mev__min { color: var(--club-ink); }
.report .verdictbox--good { border-left-color: var(--club); }
.report .mtimeline li.is-goal-us .tmin, .report .mtimeline li.is-good .tmin,
.report .mtimeline li.is-goal-us .ttext, .report .mtimeline li.is-good .ttext {
  color: var(--club-ink);
}

/* the attribute gains: an ink figure the eye scans down, a dim starting value
   and a quiet arrow, so a dozen of them read as a development ledger rather
   than a wall of neon. */
.report .stat--pos .stat__v { color: var(--ink); }
.report .delta { display: inline-flex; align-items: baseline; gap: 6px; }
.report .delta__from { color: var(--dim); font-weight: 600; }
.report .delta__arw { color: var(--muted); font-weight: 700; }
.report .delta__to { color: var(--club-ink); font-weight: 700; }

/* the one action on the page: still clearly primary, but a dark editorial face
   with a club-tinted rule rather than a glowing green slab — legible whatever
   the club colour, because the label is always ink on a dark surface. */
.report .btn--pri {
  background: var(--card-3);
  border: 1px solid color-mix(in srgb, var(--club) 42%, var(--line-2));
  color: var(--ink); font-weight: 700;
  box-shadow: 0 1px 0 var(--edge) inset;
}
.report .btn--pri:hover:not(:disabled) {
  background: var(--hov); border-color: var(--hov-line); color: #fff;
  transform: none; box-shadow: 0 1px 0 var(--edge) inset;
}
.report .btn--pri:active:not(:disabled) {
  background: var(--act); box-shadow: var(--act-in); transform: scale(.99);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------------ legacy */
/* The verdict is the one thing on this screen somebody would screenshot, so it
   gets the size. Everything below it is a record: dense rows, no decoration. */
.lg__verdict { text-align: left; }
.lg__title { font-size: 1.4rem; font-weight: 700; margin: 4px 0 2px; }
.lg__h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dim); margin: 18px 0 8px;
}
.lg__spells { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lg__spells li {
  display: grid; grid-template-columns: 1fr auto 74px 74px; gap: 10px;
  align-items: baseline; padding: 8px 10px; background: var(--card-2);
  border-radius: var(--r-sm); font-size: 12.5px; min-width: 0;
}
.lg__spells li > span:nth-child(3), .lg__spells li > span:nth-child(4) {
  text-align: right; color: var(--muted);
}
.lg__club { font-weight: 650; min-width: 0; overflow-wrap: break-word; }
.lg__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lg__notes li {
  display: grid; grid-template-columns: minmax(0, 180px) 1fr; gap: 12px;
  padding: 8px 10px; background: var(--card-2); border-radius: var(--r-sm);
  font-size: 12.5px; min-width: 0;
}
.lg__notes li > span { min-width: 0; overflow-wrap: break-word; }

@media (max-width: 560px) {
  /* Four columns of numbers do not fit a phone; the club name takes the row and
     the figures sit under it. */
  .lg__spells li { grid-template-columns: 1fr auto; }
  .lg__spells li > span:nth-child(3), .lg__spells li > span:nth-child(4) {
    text-align: left; }
  .lg__notes li { grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------------------------------------- training

   The week is a hundred points split across sessions. The bar is the split at a
   glance; the units below are where it is changed.

   `.trainbar__seg` is a flex child with `flex: <percent>`, so the bar is the
   allocation — there is no second source of truth to drift out of step. */

.trainbar { display: flex; height: 30px; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--card-2); margin-bottom: 14px; }
.trainbar__seg { display: flex; align-items: center; justify-content: center;
  min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #08120B; }
.trainbar__seg.t0 { background: var(--pri); }
.trainbar__seg.t1 { background: var(--info); }
.trainbar__seg.t2 { background: var(--special); }
.trainbar__seg.t3 { background: var(--warn); }
.trainbar__seg.t4 { background: var(--neg); color: #fff; }
.trainbar__seg.t5 { background: #4A5A6A; color: #fff; }

.units { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.unit { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card-2); opacity: .62; }
.unit.is-on { opacity: 1; border-color: var(--line-2); }
.unit__head { display: flex; align-items: baseline; gap: 8px; }
/* `display:block` on the spans that ellipsise — a plain inline span ignores both
   text-overflow and margin, which has now been the cause of four separate
   clipped-text bugs in this interface. */
.unit__name { display: block; flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13px; }
.unit__want { display: block; font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.unit__want.is-off { color: var(--warn); }
.unit__row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.unit__btn { width: 30px; height: 30px; flex: none; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 800; cursor: pointer; }
.unit__btn:disabled { opacity: .3; cursor: default; }
.unit__val { display: block; min-width: 44px; text-align: center;
  font-weight: 800; font-size: 14px; }
.unit__load { display: block; flex: 1; text-align: right; font-size: 10.5px;
  color: var(--dim); white-space: nowrap; }
.unit__hint { margin: 6px 0 0; font-size: 11.5px; color: var(--dim); line-height: 1.45; }

.trainfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; }
.trainfoot .note { display: block; flex: 1; min-width: 200px; margin: 0; }


/* ------------------------------------------------------------- the moment

   A trophy overlay that is deliberately not the decision overlay: bigger type, a
   glow behind it, and an entrance. Winning a league and answering a press question
   should not feel like the same event, and before this they used the same box. */

.trophy { align-items: center; justify-content: center; }
.trophy__box {
  position: relative; overflow: hidden;
  width: min(420px, calc(100vw - 32px));
  padding: 34px 26px 22px; text-align: center;
  background: linear-gradient(180deg, #14251A 0%, var(--card) 62%);
  border: 1px solid #2C6B3F; border-radius: var(--r-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(122,214,150,.12);
  animation: trophyIn .42s cubic-bezier(.2,.9,.3,1.2) both;
}
/* A slow sweep behind the plate. `prefers-reduced-motion` turns both off — an
   award screen that cannot be dismissed without watching an animation is a
   worse award screen. */
.trophy__glow {
  position: absolute; inset: -40% -20% auto; height: 220px;
  background: radial-gradient(ellipse at 50% 0%, rgba(122,214,150,.30), transparent 70%);
  pointer-events: none; animation: trophyGlow 3.2s ease-in-out infinite alternate;
}
.trophy__icon { display: block; font-size: 52px; line-height: 1; margin-bottom: 10px; }
.trophy__kind {
  display: block; margin: 0 0 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pri);
}
.trophy__title {
  margin: 0 0 8px; font-size: 26px; line-height: 1.15; font-weight: 800;
  letter-spacing: -.01em;
}
.trophy__detail { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ink); }
.trophy__sub { margin: 0 0 4px; font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.trophy__count {
  display: block; margin: 10px 0 0; font-size: 11px; color: var(--dim);
}
.trophy__box .btn { margin-top: 18px; }

.trophy--award .trophy__box { border-color: #6B5A2C;
  background: linear-gradient(180deg, #252014 0%, var(--card) 62%); }
.trophy--award .trophy__kind { color: var(--warn); }
.trophy--award .trophy__glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(240,200,90,.30), transparent 70%); }
.trophy--europe .trophy__box { border-color: #2C4A6B;
  background: linear-gradient(180deg, #14202E 0%, var(--card) 62%); }
.trophy--europe .trophy__kind { color: var(--info); }
.trophy--international .trophy__box { border-color: #5A2C6B;
  background: linear-gradient(180deg, #211428 0%, var(--card) 62%); }
.trophy--international .trophy__kind { color: var(--special); }

@keyframes trophyIn {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes trophyGlow {
  from { opacity: .55; } to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .trophy__box { animation: none; }
  .trophy__glow { animation: none; opacity: .7; }
}


/* --------------------------------------------------------- national squad

   Grouped by the position in the coach's shape, because that is how a squad is
   announced and it is the only way the reader can see that the country is four
   deep at centre back and two thin at left back. */

.squad { display: grid; gap: 14px; margin-top: 12px; }
.squadgrp__head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
}
.squadgrp__n { display: block; margin-left: auto; font-weight: 700; }
.sq { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sq li {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 12.5px;
}
.sq li.is-me { border-color: var(--pri); background: #101C15; }
.sq li.is-spare { opacity: .78; border-style: dashed; }
.sq__n {
  display: block; flex: none; width: 22px; text-align: center;
  font-size: 11px; font-weight: 800; color: var(--dim);
}
/* display:block on the ellipsising span — an inline span ignores text-overflow,
   which has now caused five separate clipped-text bugs in this interface. */
.sq__name { display: block; flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* Wider, because it carries the club's name and the league's now rather than
   two three-letter codes. */
.sq__club { display: block; font-size: 11px; color: var(--dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex: 0 1 46%; min-width: 0; }
.pref--club { font-size: 11px; color: var(--dim); }
.pref--club:hover { color: var(--text); }
.sq__ovr { display: block; flex: none; font-weight: 800; min-width: 26px;
  text-align: right; }
.sq__age { display: block; flex: none; width: 26px; text-align: right;
  font-size: 11px; color: var(--dim); }
.squadmiss { margin: 10px 0 0; }

/* A level the player has aged out of is still shown — the side exists whether or
   not he could be in it — but it should not read as something he can reach. */
.chipopt.is-past .chipopt__box { opacity: .6; }


/* --------------------------------------------------------- a player's card

   `.pref` is a name rendered inside a sentence — in a situation, in an option, in
   a squad list. It has to read as a name first and a control second, so it is
   underlined rather than boxed. */

.pref {
  display: inline; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px; text-decoration-color: var(--dim);
}
.pref:hover, .pref:focus-visible { text-decoration-color: var(--pri); color: var(--pri); }

.pcardbox__box { width: min(380px, calc(100vw - 32px)); }
/* the competition-detail modal is wider (it carries group tables and a bracket)
   and scrolls when the bracket runs long */
.compbox__box { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; text-align: left; }
.comp__title { margin: 0 0 12px; font-size: 18px; }
/* a competition name rendered as a table cell — underline it so it reads clickable */
.pref--comp { font-weight: 600; }
.pchead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pchead__ovr {
  display: flex; flex: none; width: 52px; height: 52px;
  align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--pri); color: var(--pri-ink);
  font-size: 22px; font-weight: 800;
}
.pchead__id { min-width: 0; }
.pchead__name { display: block; font-size: 17px; font-weight: 800; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; }
.pchead__meta { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; }
.pcrows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; }
.pcrow { display: flex; align-items: baseline; gap: 10px; padding: 8px 11px;
  background: var(--card-2); font-size: 12.5px; }
.pcrow > span { display: block; color: var(--dim); }
.pcrow > b { display: block; margin-left: auto; text-align: right; }
.pcnote { margin: 12px 0 0; font-size: 11.5px; color: var(--dim); line-height: 1.5; }

/* The player card is opened *from inside* other overlays — from a name in a
   match decision, from a squad list, from a report — so it has to sit above all
   of them. Every other overlay is 55; the match screen is one of them, and the
   card opened underneath it. */
#pcardbox { z-index: 70; }
/* Same reason: a trophy is shown while the report overlay is still on screen. */
#trophy { z-index: 65; }

/* The line across a league that splits. Korea plays thirty-three matches and
   then cuts itself in half; without a rule drawn across the table there is
   nothing on the screen to say that seventh place can no longer reach sixth. */
.ctable tbody tr.is-split > td { border-top: 2px solid var(--line-strong, #666); }

/* ==================================================== home: the match hero
   The next match is the only thing on Home you always act on, so it stops
   being a card among cards and takes the full width with the club's colour
   behind it. The markup that fills #next-fixture is unchanged — every branch
   of renderHome still writes the same three spans — only the frame moved. */

.hero {
  position: relative; overflow: hidden;
  margin-bottom: 12px; padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--card);
  box-shadow: 0 1px 0 var(--edge) inset, var(--shadow-lg);
}
/* the club wash: strong at the left edge, gone by the middle */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--club) 30%, transparent),
                            color-mix(in srgb, var(--club) 7%, transparent) 46%,
                            transparent 68%),
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--club) 22%, transparent), transparent 60%);
}
/* a lit rule along the top, in the club's colour, so the band has an edge */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--club), color-mix(in srgb, var(--club) 30%, transparent) 40%, transparent 75%);
}
.hero > * { position: relative; }
.hero__title { color: color-mix(in srgb, var(--club) 62%, var(--ink)); }

/* the fixture itself, inside the hero: bigger, unboxed, meta lifted to a
   kicker above the two sides rather than a footnote under them */
.hero .fixture {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 4px 0 14px; margin-bottom: 14px;
  background: none; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0;
}
.hero .fixture__meta {
  order: -1; flex: 1 0 100%;
  text-align: left; padding: 0; margin: 0 0 2px; border: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.hero .fixture__side {
  flex: 1 1 200px; gap: 10px;
  font-size: clamp(16px, 2.2vw, 21px); font-weight: 800; letter-spacing: -.02em;
}
.hero .fixture__side:last-of-type { justify-content: flex-end; text-align: right; }
.hero .fixture__side .crest { width: 26px; height: 26px; border-radius: 7px; }
.hero .fixture__vs {
  flex: 0 0 auto; font-size: 11px; font-weight: 900; letter-spacing: .16em;
  color: var(--dim);
}
.hero .note { margin-top: 11px; }
/* the retired / season-over branches write a <p> straight into #next-fixture */
.hero .fixture > .note { flex: 1 0 100%; margin: 0; }

@media (max-width: 560px) {
  .hero .fixture { gap: 8px; }
  .hero .fixture__side { flex: 1 1 100%; }
  .hero .fixture__side:last-of-type { justify-content: flex-start; text-align: left; }
  .hero .fixture__vs { flex: 1 0 100%; }
  .hero .actions .btn { flex: 1 1 100%; }
}

/* ================================================ home: the player's card
   Bronze / silver / gold, from OVR. The bands are measured against the
   world the game actually ships: across every named squad, OVR 65 is the
   9th percentile and OVR 75 the 51st — so bronze is "not in one of those
   squads yet", silver is "in one", gold is "in the better half of one".
   One block of rules; the tier only swaps the six colour variables. */

.pc {
  position: relative; padding: 1.5px; border-radius: 17px;
  background: linear-gradient(160deg, var(--t1), var(--t2) 42%, var(--t-deep) 62%, var(--t1));
  box-shadow: 0 20px 48px -22px var(--t-cast);
  transition: transform .3s var(--spring), box-shadow .3s var(--spring);
}
.pc:hover { transform: translateY(-3px); box-shadow: 0 26px 56px -22px var(--t-cast); }
.pc--bronze {
  --t1:#E0A970; --t2:#8A5A2B; --t-deep:#2D2114; --t-mid:#15110B; --t-dark:#0D0A06;
  --t-ink:#A37E50; --t-cast:rgba(224,169,112,.55);
}
.pc--silver {
  --t1:#DCE6F2; --t2:#7C8CA0; --t-deep:#232B36; --t-mid:#141920; --t-dark:#0B0E13;
  --t-ink:#9CADC1; --t-cast:rgba(220,230,242,.42);
}
.pc--gold {
  --t1:#FFD873; --t2:#B07E14; --t-deep:#33280E; --t-mid:#1A1508; --t-dark:#0E0B04;
  --t-ink:#C9A44C; --t-cast:rgba(255,216,115,.55);
}
.pc__in {
  position: relative; overflow: hidden; border-radius: 15.5px;
  background: linear-gradient(168deg, var(--t-deep), var(--t-mid) 58%, var(--t-dark));
}
/* the sheen sweeps across every few seconds — the one piece of motion that
   makes it read as a collectible rather than a table with a border */
.pc__in::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.13), transparent);
  animation: pc-sheen 5.5s ease-in-out infinite; pointer-events: none;
}
@keyframes pc-sheen { 0%, 72% { left: -60%; } 100% { left: 130%; } }
.pc__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--t1) 20%, transparent), transparent 65%);
}
.pc__b { position: relative; padding: 18px; }
.pc__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.pc__r { text-align: center; line-height: 1; }
.pc__r b {
  display: block; font-size: clamp(36px, 4vw, 44px); font-weight: 900; letter-spacing: -.05em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--t1) 55%, #fff), var(--t1));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pc__r span {
  display: block; margin-top: 3px;
  font-size: 9.5px; font-weight: 900; letter-spacing: .2em; color: var(--t-ink);
}
.pc__who h4 { margin: 0; font-size: clamp(16px, 1.7vw, 19px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.15; color: #fff; }
.pc__who p { margin: 5px 0 0; font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--t-ink); }
.pc__pos {
  align-self: start;
  background: color-mix(in srgb, var(--t1) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--t1) 34%, transparent);
  color: var(--t1); font-size: 11px; font-weight: 900; letter-spacing: .09em;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap;
}
.pc__six {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 16px;
  background: color-mix(in srgb, var(--t1) 17%, transparent);
  border-radius: 9px; overflow: hidden;
}
.pc__six > div {
  background: linear-gradient(180deg, color-mix(in srgb, var(--t-deep) 62%, #000), var(--t-mid));
  padding: 11px 6px; text-align: center; transition: background .2s;
}
.pc__six > div:hover { background: var(--t-deep); }
.pc__six b { display: block; font-size: clamp(17px, 1.8vw, 19px); font-weight: 900;
  letter-spacing: -.03em; color: #fff; }
.pc__six span { font-size: 9px; font-weight: 800; letter-spacing: .14em; color: var(--t-ink); }
.pc__six .is-best b { color: var(--pri); text-shadow: 0 0 14px rgba(61,220,132,.45); }
.pc__ft {
  position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px;
  padding: 11px 18px; border-top: 1px solid color-mix(in srgb, var(--t1) 17%, transparent);
  font-size: 11px; color: var(--t-ink);
}
.pc__ft b { color: color-mix(in srgb, var(--t1) 70%, #fff); font-weight: 800; }
.pc__tier { font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--t1); }

@media (prefers-reduced-motion: reduce) {
  .pc__in::after { animation: none; left: -60%; }
  .pc, .pc:hover { transition: none; transform: none; }
}

/* ============================================================== home grid
   Home is laid out on twelve columns at desktop, and the markup is written in
   phone order — needs-an-answer, match, card, week, table, news. Nothing here
   reorders source; it only places. That is why the phone gets the match and
   its green button first for free.

     >=1180   [ needs an answer ................................ ]
              [ match panel (8) ............ ][ card (4) ....... ]
              [ this week (4) ][ league (8) .................... ]
              [ latest ......................................... ]

   `#moment-card` is `hidden` most of the time. A hidden element is
   `display:none`, so it is not a grid item at all — no empty track, no stray
   gap, and the match panel simply becomes row one. */
.grid--home { grid-template-columns: 1fr; }
.grid--home > * { grid-column: 1 / -1; }

@media (min-width: 700px) {
  .grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--home > .g-card { grid-column: 1 / 2; }
  .grid--home > .g-week { grid-column: 2 / 3; }
}
@media (min-width: 1180px) {
  .grid--home { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grid--home > .g-moment,
  .grid--home > .g-news   { grid-column: 1 / -1; }
  .grid--home > .g-hero   { grid-column: 1 / 9; }
  .grid--home > .g-card   { grid-column: 9 / 13; }
  .grid--home > .g-week   { grid-column: 1 / 5; }
  .grid--home > .g-league { grid-column: 5 / 13; }
}

/* the readiness strip inside the match panel: the old Condition card's four
   meters, two up, sitting between the pecking-order note and the button */
.ready {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px;
  margin: 13px 0 15px; padding-top: 13px; border-top: 1px solid var(--line-2);
}
@media (max-width: 560px) { .ready { grid-template-columns: 1fr; } }

/* the card's second footer — the season's four numbers, which used to be a
   stat grid on a card of their own */
.pc__ft--season { font-variant-numeric: tabular-nums; }


/* ============================================================== the money

   Rows of a payslip, a shortlist of people you pay for, and the record. Kept
   deliberately plain: this screen is arithmetic and its job is to be read, not
   admired. */
.mrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.mrow:last-of-type { border-bottom: 0; }
.mrow__k { font-size: 13px; color: var(--muted); }
.mrow__v { font-size: 15px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.mrow__v small { font-size: 11px; font-weight: 600; color: var(--dim); }
.mrow--neg .mrow__v { color: var(--warn); }
.mrow--strong .mrow__v { font-size: 19px; color: #fff; }
.mrow--bad .mrow__v { font-size: 19px; color: var(--neg); }
.mrule { height: 1px; background: var(--line-2); margin: 6px 0; }
.msub { margin: 16px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); }
.note--bad { color: var(--neg); }

/* `font: inherit` was set and `color` was not, so every one of these buttons
   rendered in the UA's `buttontext` — black — on a #1D2635 card. That measures
   1.38:1, which is not a contrast problem so much as text you cannot read, and
   it was every option on the Difficulty picker and every choice on the old
   Spending screen. */
.chipopt--btn { display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0; margin-bottom: 7px; font: inherit;
  color: inherit; }
.chipopt--btn .chipopt__box { display: block; }
.chipopt--btn.is-on .chipopt__box {
  border-color: color-mix(in srgb, var(--pri) 55%, var(--line));
  background: color-mix(in srgb, var(--pri) 9%, var(--card-2));
}

.staff { padding: 13px 0; border-bottom: 1px solid var(--line); }
.staff:last-child { border-bottom: 0; }
.staff__h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.staff__h b { font-size: 14.5px; }
.staff__h .dim { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; }
.staff__blurb { margin: 4px 0 9px; font-size: 12.5px; color: var(--muted); }
.staff__tiers { display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.staff__tiers .option { align-items: center; }
.staff__price { flex: none; font-size: 13.5px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.staff__price small { font-size: 10px; font-weight: 600; color: var(--dim); }

.mtable { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mtable__h, .mtable__r {
  display: grid; gap: 8px; align-items: baseline;
  grid-template-columns: 1.3fr repeat(4, 1fr) 1.1fr;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.mtable__h { font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); border-bottom-color: var(--line-2); }
.mtable__h span:not(:first-child), .mtable__r span:not(:first-child),
.mtable__r b { text-align: right; }
.mtable__r .neg { color: var(--warn); }
.mtable__r b { color: #fff; }
@media (max-width: 640px) {
  .mtable__h, .mtable__r { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .mtable__h span:nth-child(4), .mtable__r span:nth-child(4),
  .mtable__h span:nth-child(3), .mtable__r span:nth-child(3) { display: none; }
}

/* The two sides of a lifestyle choice, said out loud on the card. A cost with
   no upside is a tax; both halves have to be visible for it to be a decision. */
.chipopt__good, .chipopt__bad {
  display: block; margin-top: 4px; font-size: 11.5px; font-style: normal;
  line-height: 1.4;
}
.chipopt__good { color: var(--pri); }
.chipopt__good::before { content: '+ '; font-weight: 800; }
.chipopt__bad { color: var(--warn); }
.chipopt__bad::before { content: '\2212 '; font-weight: 800; }

/* ------------------------------------------------------------------- life
   The money screens. A section heading inside a card was borrowing `.msub`,
   which is the little position chip from the squad list — so every heading on
   the page rendered as a pill. These are headings. */
h4.msub {
  display: block; margin: 18px 0 8px; padding: 0; border: 0; background: none;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim);
}
.option__good, .option__bad {
  display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35;
}
.option__good { color: var(--pri); }
.option__bad { color: var(--warn); }
.btn--warn { border-color: var(--warn); color: var(--warn); }

/* What you own. One card each, because each one is a place, a price and a
   decision, and a table row cannot hold a decision. */
.owns { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.own { padding: 12px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); display: grid; gap: 10px; align-content: start; }
.own--here { border-color: color-mix(in srgb, var(--pri) 42%, var(--line)); }
.own__h { display: flex; align-items: flex-start; gap: 9px; }
.own__t b { display: block; font-size: 14px; }
.own__t em { display: block; font-style: normal; font-size: 11.5px;
  color: var(--dim); margin-top: 2px; line-height: 1.35; }
.own__n { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.own__n span { font-size: 13px; font-weight: 700; }
.own__n em { display: block; font-style: normal; font-size: 10px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.own__n b.pos { color: var(--pri); }
.own__n b.neg { color: var(--neg); }
.own .btn { justify-self: start; }

/* Mode effects are statements of fact, not benefits — no green tick. */
.chipopt__eff {
  display: block; margin-top: 3px; font-size: 12px; line-height: 1.4;
  color: var(--muted);
}
.chipopt__eff::before { content: '\00b7  '; color: var(--dim); }
.chipopt input:checked + .chipopt__box .chipopt__eff,
.chipopt--btn.is-on .chipopt__eff { color: inherit; opacity: .85; }

/* A choice you are currently paying for. It used to be the word "— paying for
   this" appended to the label in the same colour as the label, which is not a
   state, it is a sentence. */
.option--on {
  border-color: var(--pri);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pri) 13%, transparent), transparent 62%),
    var(--card-2);
  box-shadow: inset 3px 0 0 var(--pri);
}
.option--on .option__label { color: var(--pri); }
.option__on {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--pri-ink); background: var(--pri); border-radius: 999px;
  vertical-align: 1px;
}

/* Money rows are a definition list now; the browser's default dl/dd margins
   would otherwise push every value off its label. */
.mrows { margin: 0; }
.mrow__v { margin: 0; }

/* A single-choice set is a fieldset with a legend. The legend is the group's
   name for a screen reader and a heading for everybody else, so the old
   `h4.msub` above a loose row of buttons is gone. */
.fset { margin: 0 0 20px; padding: 0; border: 0; }
.fset:last-child { margin-bottom: 0; }
.fset__t {
  padding: 0; margin: 0 0 8px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--dim);
}
.fset > .note { margin-top: 0; }
.fset > .note + .chips { margin-top: 8px; }

/* ------------------------------------------------------------ endorsements */
.spons { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.spon { padding: 13px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); display: grid; gap: 8px; align-content: start; }
.spon--signed { border-color: color-mix(in srgb, var(--pri) 45%, var(--line)); }
.spon--offered { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.spon--locked { opacity: .72; }
.spon__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.spon__h b { font-size: 14.5px; }
.spon__st { font-size: 9.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap; }
.spon__st--yes { color: var(--pri); }
.spon__st--mid { color: var(--muted); }
.spon__st--no { color: var(--dim); }
.spon__say { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.spon__take { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.spon__fx { margin: 0; font-size: 11.5px; color: var(--dim); }
.spon__n { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.spon__n span { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.spon__n em { display: block; font-style: normal; font-size: 10px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.spon .note { margin: 0; }

.spon__fx .fx--up { color: var(--pri); }
.spon__fx .fx--dn { color: var(--warn); }

/* The chosen row on the Spending screen.
   The shared `.chipopt` checked style is a solid green fill with the label in
   near-black, which turns the dim price grey-on-green and hides the good/bad
   lines entirely — unreadable, and it was the worst thing on the screen. Here
   it is a tint with a left bar and a word, so the state survives being read,
   being colour-blind, and being printed. */
#life-choices .chipopt input:checked + .chipopt__box {
  color: var(--ink);
  border-color: var(--pri);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pri) 15%, transparent), transparent 62%),
    var(--card-2);
  box-shadow: inset 3px 0 0 var(--pri);
}
#life-choices .chipopt input:checked + .chipopt__box .chipopt__load { color: var(--muted); }
#life-choices .chipopt input:focus-visible + .chipopt__box {
  outline: 2px solid var(--pri); outline-offset: 2px;
}
.chipopt__cur {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--pri-ink); background: var(--pri); border-radius: 999px;
  vertical-align: 1px;
}

/* --------------------------------------------------------------- penalties */
.pens { margin: 4px 0 14px; padding: 12px; border-radius: var(--r-sm);
  background: var(--card-2); border: 1px solid var(--line); display: grid; gap: 7px; }
.pens--won { border-color: color-mix(in srgb, var(--pri) 48%, var(--line)); }
.pens--lost { border-color: color-mix(in srgb, var(--neg) 42%, var(--line)); }
.pens__head { margin: 0; font-size: 13.5px; color: var(--muted); }
.pens__head b { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pens--won .pens__head b { color: var(--pri); }
.pens--lost .pens__head b { color: var(--neg); }
.pens__row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pens__who { width: 46px; font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); }
.pk { font-size: 15px; line-height: 1; }
.pk--in { color: var(--pri); }
.pk--out { color: var(--neg); }
.pens__key { margin: 0; font-size: 11.5px; color: var(--dim); }

/* The tournament banner on the next-fixture card. A World Cup quarter-final and
   a Tuesday in the league used to look identical, and in June the card said
   "season complete" while the button played a World Cup tie. */
.fixture__tag {
  grid-column: 1 / -1; justify-self: center; margin-bottom: 6px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--special); background: color-mix(in srgb, var(--special) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--special) 42%, transparent);
  text-align: center;
}

/* ----------------------------------------------------------- public pages */
.site-links, .public-links {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
}
.site-links { justify-content: center; margin: 30px auto 0; padding: 18px 0 4px;
  border-top: 1px solid var(--line); }
.public-links { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.site-links a, .public-links a, .public-doc a:not(.btn) { color: var(--info); text-underline-offset: 3px; }
.public-doc {
  width: min(100%, 820px); margin: 0 auto; padding: clamp(22px, 5vw, 60px) clamp(18px, 4vw, 42px) 44px;
}
.public-doc__brand { display: inline-block; margin-bottom: 30px; color: var(--ink) !important;
  font-size: 14px; font-weight: 900; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.public-doc__brand span { color: var(--pri); }
.public-doc h1 { margin: 4px 0 12px; font-size: clamp(32px, 7vw, 48px); line-height: 1.08; }
.public-doc__lead { max-width: 66ch; margin: 0 0 28px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.public-doc section { margin: 22px 0; padding: clamp(16px, 3vw, 24px); border: 1px solid var(--line);
  border-radius: var(--r); background: var(--card); }
.public-doc section h2 { margin-bottom: 9px; font-size: 18px; }
.public-doc section p { margin: 8px 0 0; color: var(--muted); line-height: 1.65; }
.public-doc section p:first-of-type { margin-top: 0; }
.public-doc strong { color: var(--ink); }
.public-doc .kicker { margin-bottom: 7px; }
.public-doc .public-links a:first-child { color: var(--pri); }

/* Career guidance and recoverable save failures. */
.save-warning { position: sticky; top: 0; z-index: 100; padding: 14px 20px; background: #412d18; color: #fff; border: 1px solid #efbc6b; }
.save-warning[hidden] { display: none; }
.save-warning .btn { margin: 5px 0; }
.career-guidance { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.career-guidance .btn { margin-top: 5px; }
.clubopt__name { min-width: 0; overflow-wrap: anywhere; }
.clubopt__box em { flex-shrink: 0; }

.clubpick { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }