/*
 * The final — match centre.
 *
 * Light, dense and professional, in the register of a sports-data product
 * rather than a poster. People will have this open on a phone for ninety
 * minutes in daylight; the job is legibility at a glance and a hierarchy that
 * survives being looked at thirty times.
 *
 * Two clubs need two colours that are unmistakable at thumbnail size and on a
 * cheap screen, so they are assigned by position and never read from the clubs'
 * own registered colours: ultramarine is the home side everywhere on this page,
 * vermilion the away side, slate the draw. Green is reserved for one thing
 * only — the match being live — so a green pixel anywhere on this page always
 * means the same thing.
 *
 * Loaded only on the final's page, in its own file, so none of it can reach the
 * rest of the site and nothing here has to win a specificity argument.
 */

.fcm-final-page {
  --page: #EEF1F6;
  --card: #FFFFFF;
  --sunk: #F5F7FA;
  --line: #E2E7EF;
  --line-2: #CFD6E2;

  --ink: #111827;
  --ink-2: #434E63;
  --mute: #6B7688;

  --home: #2347CE;
  --home-soft: #E8EDFC;
  --away: #D62B32;
  --away-soft: #FCEAEA;
  --draw: #7A8699;
  --draw-soft: #EDF0F5;

  --live: #0C8A4D;
  --live-soft: #E4F4EC;

  --f: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 12px;
  --lift: 0 1px 2px rgba(17, 24, 39, .05), 0 6px 18px rgba(17, 24, 39, .05);

  background: var(--page);
  color: var(--ink);
}

/*
 * Light even for somebody whose saved choice is dark. The variables above are
 * declared on the page's own class, so a `data-theme="dark"` on the root cannot
 * reach them — but the theme's own base rules still paint the body, so the
 * background is restated here and wins by being more specific.
 */
[data-theme='dark'] .fcm-final-page,
.fcm-final-page { background: var(--page); color: var(--ink); }

[data-theme='dark'] .fcm-final-page .site-head { background: var(--card); border-color: var(--line); }
[data-theme='dark'] .fcm-final-page .tabbar { background: var(--card); border-color: var(--line); }
[data-theme='dark'] .fcm-final-page .tabbar__item { color: var(--mute); }
[data-theme='dark'] .fcm-final-page .site-foot { color: var(--mute); border-color: var(--line); }

.fcm-final-page .site-head {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

/*
 * No dark mode here, and no switch offering one.
 *
 * This page is a scoreboard read in daylight by people standing at a ground.
 * The rest of the site keeps its light/dark choice; the final is light, and
 * the toggle is removed rather than left to produce a version nobody asked for.
 */
.fcm-final-page .themer { display: none; }

.fcm-final-page .nav a { color: var(--mute); font-weight: 600; }
.fcm-final-page .nav a:hover,
.fcm-final-page .nav a:focus { color: var(--ink); }
.fcm-final-page .nav a[aria-current='page'] { color: var(--home); }

.fcm-final-page .tabbar {
  background: var(--card);
  border-top: 1px solid var(--line);
}

.fcm-final-page .tabbar__item { color: var(--mute); }
.fcm-final-page .tabbar__item[aria-current='page'] { color: var(--home); }
.fcm-final-page .site-foot { border-top: 1px solid var(--line); color: var(--mute); }

.fin {
  font-family: var(--f);
  font-variant-numeric: tabular-nums;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 14px 96px;
  display: grid;
  gap: 14px;
}

/* ---- Cards -------------------------------------------------------------- */

/*
 * Secondary cards carry a border and nothing else. Giving every card the same
 * shadow makes five things of equal weight and leaves the page with no hero —
 * the match card below is the one that lifts off the page, and it earns that by
 * being the only one.
 */
.c {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.c.mc { box-shadow: var(--lift); border-color: var(--line-2); }

.c__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 0;
}

.c__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
}

.c__body { padding: 14px 16px 16px; }

/* ---- The match card ----------------------------------------------------- */

.mc__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--sunk);
  font-size: 12.5px;
  color: var(--mute);
  font-weight: 600;
}

.mc__comp {
  color: var(--ink-2);
  /* One line. A competition name that wraps pushes the status chip off the
     row and the card starts its life looking broken. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--draw-soft);
  color: var(--ink-2);
  white-space: nowrap;
}

.chip--live { background: var(--live-soft); color: var(--live); }
.chip--ft { background: var(--draw-soft); color: var(--ink-2); }

.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: finPulse 1.7s ease-out infinite;
}

@keyframes finPulse {
  0% { box-shadow: 0 0 0 0 rgba(12, 138, 77, .5); }
  70% { box-shadow: 0 0 0 9px rgba(12, 138, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(12, 138, 77, 0); }
}

/*
 * Three columns, not flex: the centre column is a fixed width so the two club
 * names get identical space whatever the score is. With flex, "0–0" and "10–0"
 * move the names, and on a page somebody is refreshing every minute the names
 * must not shift under their eye.
 */
/*
 * A faint duotone wash across the tie: the home club's colour entering from the
 * left, the away club's from the right, white through the middle where the
 * score sits. It is the one piece of decoration on the page, and it says the
 * thing the page is about — two sides, meeting — before a word is read.
 */
.mc__stage {
  background:
    linear-gradient(100deg,
      var(--home-soft) 0%,
      rgba(255, 255, 255, 0) 34%,
      rgba(255, 255, 255, 0) 66%,
      var(--away-soft) 100%);
}

.mc__tie {
  display: grid;
  grid-template-columns: 1fr 122px 1fr;
  align-items: start;
  gap: 8px;
  padding: 22px 12px 14px;
}

.side {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-width: 0;
}

.badge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  border: 2px solid currentColor;
}

.side--home .badge { color: var(--home); background: var(--home-soft); }
.side--away .badge { color: var(--away); background: var(--away-soft); }

.badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.side__name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}

.side__city {
  font-size: 12px;
  color: var(--mute);
  font-weight: 500;
  text-align: center;
}

/*
 * `align-content: start` matters more than it looks. Without it the grid row
 * stretches this column to match the taller club blocks and spreads the score
 * and the minute to opposite ends of it, leaving a hole down the middle of the
 * card.
 */
.mid {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  padding-top: 6px;
}

/*
 * A paragraph's default margin is one em, and at a 48px score that is 48px of
 * air above and below — which pushed the minute almost to the foot of the card
 * and left a hole down its middle.
 */
.mid > p { margin: 0; }

.mid__score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}

.mid__score i { font-style: normal; color: var(--line-2); font-weight: 600; }
.mid__score b:first-of-type { color: var(--home); font-weight: 800; }
.mid__score b:last-of-type { color: var(--away); font-weight: 800; }

.mid__clock {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.mid__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mute);
  text-align: center;
}

.mid__min { font-size: 13px; font-weight: 700; color: var(--live); }

.mc__where {
  padding: 0 16px 16px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--mute);
  font-weight: 500;
}

.mc__where b { color: var(--ink-2); font-weight: 600; }
.mc__tz { color: var(--mute); font-weight: 500; }

/*
 * The reader's own time, set quieter than the ground's. The ground's time is
 * the fact; this is the translation, and it should not compete with it.
 */
.mc__yours {
  margin: -8px 0 0;
  padding: 0 16px 16px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--home);
}

/*
 * The one signature element: the crowd's split, as a hairline the full width of
 * the card. It sits at the bottom edge of the match card so the question the
 * page exists to ask — who does everyone think wins? — is answered in the same
 * glance as the score, without a second card to scroll to.
 */
.momentum {
  display: flex;
  height: 5px;
  background: var(--sunk);
}

.momentum span {
  display: block;
  transition: width .5s cubic-bezier(.2, .8, .3, 1);
}

.momentum .m--home { background: var(--home); }
.momentum .m--draw { background: var(--draw); }
.momentum .m--away { background: var(--away); }

/* ---- Odds --------------------------------------------------------------- */

.odds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.odd {
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 12px 6px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sunk);
  min-width: 0;
}

.odd--pick { border-color: currentColor; }
.odd--home.odd--pick { color: var(--home); background: var(--home-soft); }
.odd--draw.odd--pick { color: var(--draw); background: var(--draw-soft); }
.odd--away.odd--pick { color: var(--away); background: var(--away-soft); }

.odd__who {
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
  text-transform: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.odd--pick .odd__who { color: inherit; }

.odd__num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
}

.odd--pick .odd__num { color: inherit; }

.odd__pct { font-size: 11.5px; font-weight: 600; color: var(--mute); }

.note {
  margin: 13px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mute);
}

.note b { color: var(--ink-2); font-weight: 600; }

/* ---- Predicted scores --------------------------------------------------- */

.scores { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.sc {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  gap: 11px;
}

.sc__n { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.sc--home .sc__n { color: var(--home); }
.sc--draw .sc__n { color: var(--draw); }
.sc--away .sc__n { color: var(--away); }

.sc__bar { height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.sc__bar span { display: block; height: 100%; border-radius: 4px; }
.sc--home .sc__bar span { background: var(--home); }
.sc--draw .sc__bar span { background: var(--draw); }
.sc--away .sc__bar span { background: var(--away); }

.sc__p { font-size: 12px; color: var(--mute); text-align: right; font-weight: 600; }

/* ---- Call to action ----------------------------------------------------- */

.cta {
  display: block;
  padding: 14px 20px;
  border-radius: 10px;
  background: var(--home);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background .16s ease;
}

.cta:hover, .cta:focus { background: #1A37A8; }

.cta--ghost {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-2);
}

.cta--ghost:hover, .cta--ghost:focus { background: var(--sunk); color: var(--ink); }

/* ---- Timeline ----------------------------------------------------------- */

.flow { list-style: none; margin: 0; padding: 0; }

.ev {
  display: grid;
  grid-template-columns: 42px 24px 1fr;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.ev:last-child { border-bottom: 0; }
.ev--away { direction: rtl; }
.ev--away > * { direction: ltr; }

.ev__min { font-size: 12.5px; font-weight: 700; color: var(--mute); }
.ev__ico { font-size: 15px; text-align: center; }
.ev__who { font-size: 14px; font-weight: 600; }
.ev--home .ev__who { color: var(--home); }
.ev--away .ev__who { color: var(--away); text-align: right; }
.ev__kind { font-size: 12.5px; color: var(--mute); font-weight: 500; }

/* ---- Goal announcement -------------------------------------------------- */

.shout {
  position: fixed;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 60;
  max-width: 440px;
  margin-inline: auto;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--draw);
  box-shadow: 0 10px 34px rgba(17, 24, 39, .16);
  font-family: var(--f);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  animation: finDrop .3s cubic-bezier(.2, .9, .3, 1) both;
  transition: opacity .35s ease, transform .35s ease;
}

.shout--home { border-left-color: var(--home); }
.shout--away { border-left-color: var(--away); }
.shout.is-going { opacity: 0; transform: translateY(-10px); }

@keyframes finDrop {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}

.sound-pill {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--lift);
  color: var(--ink-2);
  font-family: var(--f);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.sound-pill[aria-pressed='true'] { color: var(--live); border-color: var(--live); }
.sound-pill span { font-size: 9px; line-height: 1; }

@media (max-width: 759px) {
  .sound-pill { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---- Small screens and wide ones --------------------------------------- */

@media (max-width: 380px) {
  .mc__tie { grid-template-columns: 1fr 96px 1fr; padding-inline: 6px; }
  .mid__score { font-size: 33px; }
  .mid__clock { font-size: 19px; }
  .badge { width: 46px; height: 46px; font-size: 14px; }
  .side__name { font-size: 14px; }
  .odd__num { font-size: 22px; }
}

@media (min-width: 620px) {
  .fin { padding-inline: 20px; }
  .mc__tie { grid-template-columns: 1fr 180px 1fr; padding: 28px 20px 22px; }
  .badge { width: 64px; height: 64px; font-size: 18px; }
  .side__name { font-size: 18px; }
  .mid__score { font-size: 48px; }
  .mid__clock { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse, .shout { animation: none; }
  .momentum span, .cta { transition: none; }
  .shout.is-going { transform: none; }
}

.fcm-final-page a:focus-visible,
.fcm-final-page button:focus-visible {
  outline: 2px solid var(--home);
  outline-offset: 2px;
  border-radius: 6px;
}

@media print {
  .sound-pill, .cta, .tabbar { display: none; }
  .c { box-shadow: none; }
}

/*
 * The practice-match banner.
 *
 * The one element on this page allowed to shout. Somebody opening a link while
 * a rehearsal is running sees a real-looking scoreline between the two real
 * finalists; if they have to read carefully to learn it is not the final, this
 * banner has failed. So: amber, full width, above everything, and worded as a
 * statement rather than a label.
 *
 * Amber and not red — nothing is wrong, it is simply not real.
 */
.rehearse {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #FFF6E3;
  border: 1px solid #F0C97A;
  border-left: 5px solid #C77C14;
}

.rehearse__tag {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #8A5505;
  margin-bottom: 3px;
}

.rehearse__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6B4A12;
}

/* The striped edge reads as "not the real thing" before a word is read.
   Hung on a body class rather than :has(), which older Safari does not know
   and which would have left the cue off exactly the phones most likely to be
   in the stand. */
.fcm-rehearsal-page .mc {
  box-shadow: inset 4px 0 0 #C77C14;
}

@media (prefers-reduced-motion: no-preference) {
  .rehearse { animation: rehearseIn 320ms ease-out both; }
}

@keyframes rehearseIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- the teams */

/*
 * Both elevens side by side on anything wider than a phone, stacked below it.
 * The page could only ever show the score, so a supporter arriving at kick-off
 * had no way to find out who was playing.
 */
.xis { display: grid; gap: 22px; }

@media (min-width: 620px) {
  .xis { grid-template-columns: 1fr 1fr; gap: 28px; }
}

.xi__club {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* The same positional colours as everywhere else on this page. */
.xi--home .xi__club { color: var(--home); }
.xi--away .xi__club { color: var(--away); }

/*
 * The shape, beside the club. Set in the figure face the scoreline uses, so a
 * supporter reads "4-4-2" as a number rather than as a word.
 */
.xi__shape {
  font-family: var(--f);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
  letter-spacing: .02em;
  margin-left: 6px;
}

.xi__label {
  margin: 14px 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mute);
}

/* The lines of a team sheet sit closer together than its two headings do. */
.xi__label + .xi__list + .xi__label { margin-top: 10px; }

/*
 * The eleven, on grass.
 *
 * A list of names says who is playing; it does not say the shape, which is what
 * people open a lineup for. The stripes are two greens a hair apart — enough to
 * read as a pitch, not enough to compete with the shirts on it.
 */
.pitch {
  display: grid;
  gap: 14px;
  padding: 16px 10px;
  margin: 0 0 14px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(
      to bottom,
      #1C7A4A 0 14.2857%,
      #1A7246 14.2857% 28.5714%
    );
  /* The halfway line, so the picture reads as half a pitch. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

.pitch__line {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 4px;
}

/* Keeper nearest the viewer: a team reads out from its own goal. */
.pitch--home { direction: ltr; }

.pitch__p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 0;
}

.pitch__no {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #0E3F26;
  background: #F4F7F4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}

.pitch__nm {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.15;
  color: #FFFFFF;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

@media (min-width: 620px) {
  .pitch { gap: 18px; padding: 20px 12px; }
  .pitch__no { width: 30px; height: 30px; font-size: 12.5px; }
  .pitch__nm { font-size: 11px; }
}

.xi__list { margin: 0; padding: 0; list-style: none; }

.xi__list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 14.5px;
  border-bottom: 1px solid var(--line);
}

.xi__list li:last-child { border-bottom: 0; }

.xi__no {
  flex: none;
  width: 22px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--mute);
}

/* ------------------------------------------------------------------ cards */

/*
 * A card drawn as a card. Every booking and sending-off used the same black
 * rectangle, so the colour — the only thing that matters at a glance — was
 * missing from the one place supporters look.
 */
.card {
  display: inline-block;
  width: 11px;
  height: 15px;
  border-radius: 2px;
  transform: rotate(8deg);
}

.card--y { background: #F5C518; box-shadow: 0 0 0 1px rgba(170,130,0,.35); }
.card--r { background: #D7263D; box-shadow: 0 0 0 1px rgba(150,20,40,.35); }

/* Two cards, because a second yellow is one offence shown twice. */
.card--2 {
  background: linear-gradient(105deg, #F5C518 0 52%, #D7263D 52% 100%);
  box-shadow: 0 0 0 1px rgba(150,20,40,.3);
}

.ev__for { color: var(--mute); font-weight: 400; }

/*
 * What happened to a name on a team sheet.
 *
 * The sheet showed the eleven that started and nothing else, so at seventy
 * minutes it was a team sheet of the first minute — no substitutions, and no
 * sign that a side was down to ten.
 */
.xi__list li { gap: 8px; }
.xi__nm { min-width: 0; }

.xi__off, .xi__on {
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.xi__off { color: var(--away); }
.xi__on { color: var(--live); }

/* A dismissal is the one thing on a team sheet that changes the match. */
.xi__gone .xi__nm { text-decoration: line-through; color: var(--mute); }
.xi__gone .xi__no { opacity: .6; }

.xi__short {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #FFFFFF;
  background: var(--away);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* On the pitch, a red corner on the shirt rather than a word. */
.pitch__p[data-off="true"] { opacity: .5; }
.pitch__no { position: relative; }

.pitch__red {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 7px;
  height: 10px;
  border-radius: 1.5px;
  background: #D7263D;
  box-shadow: 0 0 0 1.5px #FFFFFF;
}

/*
 * The run of play, in the feed.
 *
 * A throw-in is worth recording and not worth announcing, so it sits at the
 * same indent as a goal and a step quieter. Without this distinction a feed
 * carrying every restart is unreadable; without the restarts at all it is four
 * lines in ninety minutes.
 */
.ev--quiet { opacity: .74; }
.ev--quiet .ev__text { font-weight: 500; }
.ev__ico--quiet { color: var(--mute); font-size: 11px; }

.ev__text { font-size: 13px; line-height: 1.4; }

/*
 * The penalty shootout, for the stand.
 *
 * One row per side so it is never in doubt which team is kicking; a tick or a
 * cross per kick in the order taken; the side to kick next outlined. The score
 * it made is on each marker, and every kick is written out underneath, because
 * markers cannot carry a name and a shootout is read back by name.
 */
.pk__status {
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink-2);
}

.pk__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid transparent;
}

/* Whose turn it is. At the one moment it matters, it is not in doubt. */
.pk__row--next {
  border-color: var(--live);
  background: var(--live-soft);
}

.pk__club {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pk__marks { display: flex; gap: 5px; flex-wrap: wrap; flex: none; }

.pk__m {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  border: 2px solid var(--line-2);
  color: var(--mute);
  background: var(--card);
}

.pk__m[data-scored="true"] {
  background: var(--live);
  border-color: var(--live);
  color: #FFFFFF;
}

.pk__n {
  flex: none;
  width: 26px;
  text-align: right;
  font-family: var(--f);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pk__flow { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }

/*
 * The shootout, under the result inside the scoreboard.
 *
 * 1-1 is what happened; 3-2 is what settled it. Two thirds the size of the
 * score so the hierarchy states which is which without a word, each number in
 * its own side's colour, and the winning one carrying the weight.
 */
.mid__pens {
  margin: 2px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mid__pen {
  font-family: var(--f);
  font-size: 22px;
  font-weight: 700;
  color: var(--mute);
}

.mid__pen--home[data-won="true"] { color: var(--home); font-weight: 800; }
.mid__pen--away[data-won="true"] { color: var(--away); font-weight: 800; }

.mid__pens i {
  font-style: normal;
  font-size: 15px;
  color: var(--line-2);
  padding: 0 1px;
}

.mid__pens-l {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}

/*
 * The winner, on the badge.
 *
 * At 1-1 with 3-2 beneath it, who won is arithmetic the reader should not have
 * to do. A ring the colour of that side and one word under the name settle it
 * before anything else is read.
 */
.side[data-won="true"] .badge {
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px currentColor;
}

.side--home[data-won="true"] { color: var(--home); }
.side--away[data-won="true"] { color: var(--away); }

.side__won {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: currentColor;
  border-radius: 999px;
  padding: 2px 8px;
}

/* The pill's text is white on the side's own colour. */
.side--home[data-won="true"] .side__won { background: var(--home); color: #FFFFFF; }
.side--away[data-won="true"] .side__won { background: var(--away); color: #FFFFFF; }

/*
 * A named list is not an eleven, and must not be dressed as one.
 *
 * Before a club picks its team there are twenty names and no starters, so the
 * section says what it is holding rather than implying a lineup that nobody has
 * chosen yet.
 */
.xi__note {
  margin: 0 0 8px;
  font-size: 11.5px;
  color: var(--mute);
}

.xi__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
  margin-left: 6px;
}

/*
 * What a player did, on the shirt.
 *
 * The pitch could mark a dismissal and nothing else — so the formation showed
 * who had been sent off and not who had scored. Each mark sits on the corner of
 * the number, small enough that eleven of them do not crowd a phone.
 */
.pm {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  box-shadow: 0 0 0 1.5px #FFFFFF;
}

.pm--goal { top: -3px; right: -4px; background: #0E3F26; color: #FFFFFF; }
.pm--own { top: -3px; right: -4px; background: #8A6A1F; color: #FFFFFF; }
.pm--yellow { top: -3px; left: -4px; background: #F5C518; border-radius: 2px; width: 7px; height: 10px; }
.pm--red { top: -3px; left: -4px; background: #D7263D; border-radius: 2px; width: 7px; height: 10px; }
.pm--off { bottom: -3px; left: -4px; background: #D62B32; color: #FFFFFF; }
.pm--on { bottom: -3px; right: -4px; background: #0C8A4D; color: #FFFFFF; }

.xi__goal { font-size: 11px; }
.xi__owngoal { font-size: 10px; color: var(--mute); font-weight: 700; }

/*
 * Folding, so two full squads do not push the feed below three screens.
 *
 * `<details>` rather than a scripted toggle: it works before the script runs,
 * it is keyboard operable and announced without help, and find-in-page opens
 * the section it lands in by itself.
 */
.xi summary.xi__club,
.fold__t {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.xi summary.xi__club::-webkit-details-marker,
.fold__t::-webkit-details-marker { display: none; }

.xi summary.xi__club::after,
.fold__t::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-right: 2px solid var(--mute);
  border-bottom: 2px solid var(--mute);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}

.xi[open] > summary.xi__club::after,
.fold[open] > .fold__t::after { transform: rotate(-135deg) translateY(-2px); }

.fold { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }

.fold__t {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mute);
  padding: 2px 0;
}

@media (prefers-reduced-motion: reduce) {
  .xi summary.xi__club::after, .fold__t::after { transition: none; }
}