/*
 * The website match centre (S6): the redesigned Matches pages and player
 * profiles. Loaded only by resources/views/site/mc/*, pushed through the
 * layout's @stack('head'), so site.css and today's pages never change.
 *
 * Everything is scoped under `.mc`, the class the site/mc/* views put on
 * their root <div>. site.css already owns a few of the same names (.card,
 * .btn, .chip, .tabs, .tab, .eyebrow, .countdown); the rules below restate
 * every property those set, so the boards' values win inside `.mc` and the
 * legacy pages outside it are untouched.
 *
 * The theme is html[data-theme="dark"], set by the layout's head script from
 * localStorage (lsc-web-theme) and its toggle; site.css keys its dark tokens
 * the same way and has no prefers-color-scheme branch, so neither does this.
 *
 * Values: plan "Mockup values", rows "Shared" (boards mc-web / pp-canvas).
 */

/* ============================ TOKENS ================================== */
.mc {
  --mc-home: #0A63F5;
  --mc-away: var(--text);
  --win: #4F7E6F;
  --draw: #94A2B4;
  --loss: #B3261E;
  --own: #EEF3FA;
  --own-border: #C9D6E8;
  --mc-shadow: 0 1px 2px rgba(14, 37, 71, 0.06), 0 4px 12px rgba(14, 37, 71, 0.07);

  font-family: var(--font);
  color: var(--text);
}
[data-theme="dark"] .mc {
  --mc-home: #4D8DF7;
  --own: rgba(74, 120, 181, 0.16);
  --own-border: rgba(106, 147, 201, 0.35);
  --mc-shadow: var(--shadow-raised);
}
.mc *, .mc *::before, .mc *::after { box-sizing: border-box; }
.mc .tnum { font-variant-numeric: tabular-nums; }
/* Minutes (45+4'), formations and 15/21-style figures read left to right in
   both languages. */
.mc .ltr { direction: ltr; unicode-bidi: isolate; }
/* Directional icons (arrow_back / arrow_forward / chevrons) mirror in RTL. */
[dir="rtl"] .mc .i-dir { transform: scaleX(-1); }

/* ============================ LAYOUT ================================== */
.mc .wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; width: 100%; }
.mc .cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.mc .stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ============================ CARDS =================================== */
.mc .card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--mc-shadow); padding: 0;
}
.mc .pad { padding: 20px; }
.mc .card__in { margin-top: 16px; }
.mc .sh { display: flex; align-items: center; gap: 12px; }
.mc .sh h2 {
  margin: 0; position: relative; padding-inline-start: 14px;
  font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--text);
}
.mc .sh h2::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 4px; bottom: 4px;
  width: 4px; border-radius: 3px; background: var(--primary);
}
.mc .sh .sp { flex: 1; }
.mc .chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 0; cursor: default;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--primary);
  background: var(--surface-2); border: 0; border-radius: 999px; padding: 3px 10px;
}
.mc .chip:hover { color: var(--primary); }
.mc .note { font-size: 12px; color: var(--text-muted); }

/* ============================ CONTROLS ================================ */
.mc .tabs {
  display: inline-flex; gap: 4px; flex-wrap: nowrap; margin: 0;
  background: var(--surface-2); border: 0; border-radius: 999px; padding: 4px;
}
.mc .tab {
  display: inline-flex; align-items: center; margin: 0; border: 0; border-radius: 999px;
  padding: 9px 20px; background: none; cursor: pointer; font-family: inherit;
  font-size: 14.5px; font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.mc .tab:hover { color: var(--primary); }
.mc .tab.on, .mc .tab.on:hover { background: var(--primary); color: #fff; }

.mc .sel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text);
}
.mc .sel .lab { font-size: 12px; font-weight: 500; color: var(--text-muted); }

.mc .chk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.mc .chk .b {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--primary);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none;
}
.mc .chk.on .b, .mc .chk input:checked + .b { background: var(--primary); }

.mc .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.mc .btn--filled { background: var(--primary); color: #fff; }
.mc .btn--tonal { background: var(--surface-2); color: var(--primary); }
.mc .btn--tonal:hover { background: var(--primary-tint); color: var(--primary); }
.mc .btn--ghost { background: transparent; color: var(--on-hero); border-color: rgba(234, 241, 249, 0.55); }
.mc .btn--light { background: #fff; color: #0E2547; }
.mc .btn--sm { min-height: 38px; padding: 0 16px; font-size: 13.5px; }

/* ============================ CREST DISC ============================== */
/* Treatment C: a white disc in both themes, so every crest keeps the ground
   it was drawn for. The partial sets size, ring and image size inline. */
.mc .disc {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 50%; background: #fff; overflow: hidden;
}
.mc .disc img { display: block; object-fit: contain; width: auto; }
.mc .disc__ini { font-weight: 700; color: #0E2547; letter-spacing: 0.3px; line-height: 1; }

/* ============================ SCORE =================================== */
/* Two runs (score.blade.php): the row follows the ambient direction. */
.mc .sc {
  display: inline-flex; align-items: center; gap: 8px; line-height: 1.1;
  font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.mc .sc i { font-style: normal; color: var(--text-faint); }

/* ============================ FORM ==================================== */
.mc .form { display: inline-flex; gap: 4px; align-items: center; }
.mc .fd {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; line-height: 1; color: #fff; text-decoration: none;
}
.mc .fs { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.mc .fr--w { background: var(--win); }
.mc .fr--d { background: var(--draw); }
.mc .fr--l { background: var(--loss); }
.mc a.fd:hover, .mc a.fs:hover { color: #fff; opacity: 0.85; }
.mc a.fd:focus-visible, .mc a.fs:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ============================ LIVE + EYEBROW ========================== */
.mc .tag-live {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 9px;
  background: var(--live); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
}
.mc .dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
  animation: mc-pulse 1.8s ease-in-out infinite;
}
@keyframes mc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.mc .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.10);
  color: var(--on-hero); border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
}
.mc .eyebrow--live { border-color: transparent; background: var(--live); color: #fff; }
/* site.css draws its own pulsing dot on .eyebrow--live; the match centre
   puts a .dot inside instead, so the legacy one is switched off here. */
.mc .eyebrow--live::before { content: none; }
[dir="rtl"] .mc .eyebrow, [dir="rtl"] .mc .caps { letter-spacing: 0; text-transform: none; }

/* ============================ COUNTDOWN =============================== */
/* countdown.blade.php keeps the legacy class names lscCountdown() ticks;
   these restate every property site.css sets on them. */
.mc .countdown--mc { margin-top: 0; }
.mc .countdown--mc .countdown__caption {
  display: block; margin-bottom: 8px; color: var(--on-hero-muted);
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
}
.mc .countdown--mc .countdown__units { display: flex; gap: 8px; }
.mc .countdown--mc .countdown__unit {
  flex: none; min-width: 64px; padding: 9px 6px 7px; text-align: center;
  background: rgba(10, 20, 32, 0.30); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px;
}
.mc .countdown--mc .countdown__num {
  display: block; font-size: 26px; font-weight: 700; line-height: 1.05;
  color: var(--on-hero); font-variant-numeric: tabular-nums;
}
.mc .countdown--mc .countdown__label {
  display: block; margin-top: 3px; color: var(--on-hero-muted);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase;
}
.mc .countdown--lg .countdown__unit { min-width: 84px; }
.mc .countdown--lg .countdown__num { font-size: 30px; }
[dir="rtl"] .mc .countdown--mc .countdown__caption,
[dir="rtl"] .mc .countdown--mc .countdown__label { letter-spacing: 0; text-transform: none; }
.mc .countdown--mc.countdown--live .countdown__caption,
.mc .countdown--mc.countdown--live .countdown__units { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mc .dot { animation: none; }
}

/* ============================ MATCHES LIST (W1/W2) ==================== */
/* Values: plan "Mockup values", row "Lists". */
.mc .mlh { padding: 44px 24px; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }

/* The hero's next-match card. */
.mc .nm {
  width: 600px; max-width: 100%; display: flex; flex-direction: column; gap: 14px;
  background: rgba(10, 20, 32, 0.28); border: 1px solid rgba(234, 241, 249, 0.18);
  border-radius: 22px; padding: 18px 22px 20px; color: var(--on-hero);
}
.mc .nm__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mc .nm__eyebrow { padding: 4px 12px; font-size: 11.5px; }
.mc .nm__line, .mc .nm__date, .mc .nm__venue { font-size: 12.5px; color: var(--on-hero-muted); }
.mc .nm__sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.mc .nm__side { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.mc .nm__name { font-size: 15px; font-weight: 600; text-align: center; }
.mc .nm__ko { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mc .nm__time {
  background: #fff; color: var(--text); border-radius: 12px; padding: 6px 14px;
  font-size: 22px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
[data-theme="dark"] .mc .nm__time { color: #0F1E33; }
.mc .nm__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mc .nm__acts { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; min-width: 0; }
.mc .nm__venue { display: flex; align-items: center; gap: 5px; }
.mc .nm__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.mc .nm__btns .btn { padding: 0 14px; }

/* Tabs, filters and the calendar line. */
.mc .mlbar { padding-top: 28px; }
.mc .mlbar__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mc .filt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.mc .filt__group { display: inline-flex; align-items: center; gap: 8px; }
.mc .filt__group .lab { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.mc .filt .lscsel__trigger, .mc .filt .select {
  min-height: 40px; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--border);
}
.mc .chk { position: relative; color: var(--text); }
.mc .chk__in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mc .chk .b svg { visibility: hidden; }
.mc .chk__in:checked + .b svg { visibility: visible; }
.mc .chk__in:focus-visible + .b { outline: 2px solid var(--primary); outline-offset: 2px; }
.mc .cal {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0;
  font-size: 13.5px; color: var(--text-muted);
}
.mc .cal a { font-weight: 600; color: var(--primary); text-decoration: none; }
.mc .cal a:hover { text-decoration: underline; }
.mc .cal__ic { color: var(--primary); }
.mc .cal__sub { font-size: 12.5px; }

.mc .mlbody { padding-top: 8px; padding-bottom: 56px; }
.mc .mllist { min-width: 0; }
.mc .ml-empty { margin-top: 18px; color: var(--text-muted); text-align: center; }
.mc .mlside { padding-top: 18px; }

/* Day heads and rows. */
.mc .day { display: flex; align-items: center; gap: 10px; padding: 18px 4px 8px; }
.mc .day b { font-size: 15px; font-weight: 700; }
.mc .mrow {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) 210px 20px;
  align-items: center; gap: 14px; padding: 14px 18px; margin-top: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--mc-shadow); color: inherit; text-decoration: none;
}
.mc .mrow:hover { border-color: var(--border-strong, var(--border)); color: inherit; }
.mc .mrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mc .mrow--own { background: var(--own); border-color: var(--own-border); }
.mc .mrow--live { border-inline-start: 4px solid var(--live); }
.mc .side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mc .side--h { justify-content: flex-end; text-align: end; }
.mc .side__n { font-size: 15px; font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc .side__n.is-strong { font-weight: 700; }
.mc .side__n.is-lose { color: var(--text-muted); }
.mc .ctr { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.mc .kt { font-size: 19px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.mc .ctr__sub { font-size: 11.5px; color: var(--text-muted); }
.mc .ctr__state { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.mc .clock { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--live); }
.mc [hidden] { display: none !important; }
.mc .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--text-muted); }
.mc .meta > span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mc .meta__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc .meta .tag-live .dot { width: 6px; height: 6px; }
.mc .mrow__chev { color: var(--text-faint); }

/* A result's goal lines, under its row. */
.mc .gl {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) 210px 20px;
  gap: 14px; margin-top: -4px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.mc .gl__c { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); min-width: 0; }
.mc .gl__c--home { text-align: end; }
.mc .gl__l { display: block; }
.mc .gl__c .m { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.mc .gl__ic { text-align: center; color: var(--text-faint); }

/* Tables. */
.mc .st__wrap { overflow-x: auto; }
.mc table.st { width: 100%; border-collapse: collapse; font-size: 14px; }
.mc table.st--compact { font-size: 13px; }
.mc table.st th {
  font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 10px 8px;
  text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.mc table.st td {
  padding: 9px 8px; text-align: center; border-bottom: 1px solid var(--surface-inset);
  font-variant-numeric: tabular-nums;
}
.mc table.st th.t, .mc table.st td.t { text-align: start; }
.mc table.st th abbr { text-decoration: none; cursor: help; }
/* Arabic: the compact table's nine columns fit the 400 px sidebar (T18). */
[dir="rtl"] .mc table.st--compact th, [dir="rtl"] .mc table.st--compact td { padding-inline: 5px; }
@media (max-width: 560px) {
  .mc table.st.st--compact th, .mc table.st.st--compact td { padding-inline: 3.5px; }
  .mc table.st--compact th { font-size: 11px; }
  .mc table.st--compact td { font-size: 12.5px; }
  .mc table.st--compact .st__pos { width: 30px; }
  .mc table.st--compact .pos { width: 22px; height: 22px; border-radius: 7px; font-size: 11.5px; }
  .mc table.st--compact .tc { gap: 6px; }
  .mc table.st--compact .form { gap: 3px; }
  .mc table.st--compact .tc__n { max-width: 92px; }
}
.mc table.st tr.own td { background: var(--own); font-weight: 700; }
.mc table.st tr.own td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
[dir="rtl"] .mc table.st tr.own td:first-child { box-shadow: inset -3px 0 0 var(--primary); }
.mc table.st tr.hl td { background: #F3F6FA; }
[data-theme="dark"] .mc table.st tr.hl td { background: var(--surface-1); }
.mc .st__pos { width: 42px; }
.mc .mltable--full .st__pos { width: 56px; }
.mc .pos {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 8px; background: var(--surface-inset); font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.mc .tc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mc .tc__n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.mc .mltable--full .tc__n { max-width: none; }
.mc .mltable--full table.st td { font-size: 14.5px; }
.mc .mltable--full table.st td.pts { font-size: 15px; }
.mc .pts { font-weight: 700; color: var(--primary); }
.mc .mltable { overflow: hidden; }
.mc .mltable--full { margin-top: 18px; }
.mc .mltable__head { padding-bottom: 6px; }
.mc .mltable__note { padding: 10px 16px 14px; }
.mc .btn--text { min-height: 32px; padding: 0 4px; font-size: 13.5px; color: var(--primary); background: none; }

/* The latest-result card. */
.mc .lr { display: flex; flex-direction: column; gap: 12px; }
.mc .lr .sh + * { margin-top: 0; }
.mc .lr__badge {
  font-size: 11.5px; font-weight: 700; border: 1px solid currentColor; padding: 1px 10px; border-radius: 999px;
}
.mc .lr__badge--win { color: var(--win); }
.mc .lr__badge--draw { color: var(--draw); }
.mc .lr__badge--loss { color: var(--loss); }
.mc .lr__match {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
}
.mc .lr__side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.mc .lr__name { font-size: 13.5px; font-weight: 500; }
.mc .lr__name.is-strong { font-weight: 700; }
.mc .lr__name.is-lose { color: var(--text-muted); }
.mc .lr__sc { font-size: 26px; }
.mc .lr__goals {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 8px;
  border-top: 1px dashed var(--border); padding-top: 10px;
}
.mc .lr__note { text-align: center; }

/* Results rows (boards W3/W4): the match on one grid, the goal lines on
   the same grid under a dashed rule, the club's result badge at the top. */
.mc .mrow--res { display: block; position: relative; }
.mc .mrow__main {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) 20px;
  align-items: center; gap: 14px;
}
.mc .side__n.is-win, .mc .side__n.is-own { font-weight: 700; }
.mc .side__n.is-loss { color: var(--text-muted); }
.mc .gl--res {
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) 20px;
  margin-top: 10px;
}
.mc .gl--res .gl__c--home { padding-inline-end: 52px; }
.mc .gl--res .gl__c--away { padding-inline-start: 52px; }
.mc .gl--res .gl__l { white-space: normal; overflow-wrap: anywhere; }
.mc .mrow__badge {
  position: absolute; top: 12px; inset-inline-end: 52px;
  font-size: 11.5px; font-weight: 700; line-height: 1.5; background: var(--surface);
  border: 1px solid currentColor; padding: 1px 10px; border-radius: 999px;
}
.mc .mrow__badge--win { color: var(--win); }
.mc .mrow__badge--draw { color: var(--draw); }
.mc .mrow__badge--loss { color: var(--loss); }
.mc .mrow__venue {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 10px; font-size: 12.5px; color: var(--text-muted);
}
.mc .mrow__venue > span { display: inline-flex; align-items: center; gap: 5px; }

/* The full table (board W5) and its legend. */
.mc .mltable--full .st__form { width: 170px; }
.mc .mltable--full .disc { flex: none; }
.mc .fleg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 12px 20px 16px; font-size: 12.5px; color: var(--text-muted);
}
.mc .fleg__i { display: inline-flex; align-items: center; gap: 6px; }
.mc .fleg .fd { width: 16px; height: 16px; font-size: 9px; }
.mc .mltable__caption { margin-top: 12px; font-size: 13px; color: var(--text-faint); }

/* ============================ RESPONSIVE ============================== */
@media (max-width: 960px) {
  .mc .cols { grid-template-columns: minmax(0, 1fr); }
  .mc .mlh { grid-template-columns: minmax(0, 1fr); }
  .mc .nm { width: 100%; }
}
@media (max-width: 720px) {
  /* Rows stack the meta under the match; the goal lines follow. */
  .mc .mrow { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); padding: 12px 14px; gap: 10px; }
  .mc .mrow .meta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
  .mc .mrow__chev { display: none; }
  .mc .gl { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); gap: 10px; }
  .mc .side__n { font-size: 14px; white-space: normal; }
  .mc .side { gap: 8px; }
  .mc .mrow__main, .mc .gl--res { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); gap: 10px; }
  .mc .gl--res .gl__c--home { padding-inline-end: 0; }
  .mc .gl--res .gl__c--away { padding-inline-start: 0; }
  .mc .mrow__badge { position: static; display: table; margin: 0 auto 8px; }
}
@media (max-width: 560px) {
  .mc .wrap { padding-inline: 16px; }
  .mc .countdown--mc .countdown__unit { flex: 1; min-width: 0; }
}

/* ============================ MATCH HERO (W6/W7) ====================== */
/* Values: plan "Mockup values", rows "Match hero" and "Shared". */
.mc .mch__in { display: block; padding: 24px 24px 34px; }
.mc .mch__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mc .mch__back {
  display: inline-flex; align-items: center; gap: 4px; flex: none; width: 160px;
  color: var(--on-hero); font-size: 15px; font-weight: 600; text-decoration: none;
}
.mc .mch__back:hover { color: #fff; text-decoration: underline; }
.mc .mch__spacer { flex: none; width: 160px; }
.mc .mch__top .eyebrow { min-width: 0; text-align: center; }
.mc .mch__sides {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 36px; margin-top: 22px;
}
.mc .mch__side { display: flex; align-items: center; gap: 18px; min-width: 0; }
.mc .mch__side--home { justify-content: flex-end; text-align: end; }
.mc .mch__side--away { justify-content: flex-start; }
.mc .mch__name { font-size: 30px; font-weight: 700; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.mc .mch__centre { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mc .mch__plate {
  background: #fff; color: var(--text); border-radius: 16px; padding: 8px 22px;
  font-size: 52px; font-weight: 800; gap: 14px;
}
[data-theme="dark"] .mc .mch__plate { color: #0F1E33; }
.mc .mch__plate i { color: #94A2B4; }
.mc .mch__ft {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: #0A1420; color: var(--on-hero); padding: 5px 12px; border-radius: 6px;
}
[dir="rtl"] .mc .mch__ft { letter-spacing: 0; }
.mc .mch__ht { font-size: 12.5px; color: var(--on-hero-muted); font-variant-numeric: tabular-nums; }
.mc .mch__live { font-variant-numeric: tabular-nums; }
.mc .mch__time {
  background: #fff; color: var(--text); border-radius: 16px; padding: 10px 20px;
  font-size: 32px; font-weight: 800; line-height: 1.1; white-space: nowrap;
}
[data-theme="dark"] .mc .mch__time { color: #0F1E33; }
.mc .mch__date { font-size: 13px; color: var(--on-hero-muted); }
.mc .mch__state { font-size: 17px; font-weight: 700; color: var(--on-hero-muted); text-align: center; }
.mc .mch__lines {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 16px;
  margin-top: 18px; font-size: 13.5px; color: var(--on-hero-muted);
}
.mc .mch__col--home { text-align: end; }
.mc .mch__line { display: block; }
.mc .mch__line a { color: inherit; text-decoration: none; }
.mc .mch__line a:hover { color: var(--on-hero); text-decoration: underline; }
.mc .mch__line .m { color: #8FA6C4; font-variant-numeric: tabular-nums; }
.mc .mch__ball { text-align: center; color: var(--on-hero); }
.mc .mch__meta {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; margin-top: 22px;
  color: var(--on-hero-muted); font-size: 14.5px;
}
.mc .mch__meta > span { display: inline-flex; align-items: center; gap: 7px; }
.mc .mch__cd { margin-top: 22px; display: flex; justify-content: center; text-align: center; }
.mc .mch__cd .countdown__units { justify-content: center; }

/* The anchor bar under the hero. */
.mc .anch { position: relative; background: var(--surface); border-bottom: 1px solid var(--border); }
.mc .anch__in {
  max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
.mc .anch__in::-webkit-scrollbar { display: none; }
.mc .anch a {
  flex: none; font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none;
  padding: 14px 14px 11px; border-bottom: 3px solid transparent; white-space: nowrap;
}
.mc .anch a:hover { color: var(--primary); }
.mc .anch a.on { color: var(--primary); border-bottom-color: var(--primary); }
.mc .anch__sp { flex: 1; }
.mc .anch__share {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.mc .anch__share:hover { color: var(--primary); }
.mc .anch__share:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.mc .mc-match__body { padding-top: 28px; padding-bottom: 56px; }
.mc .mc-match__body .stack:empty { display: none; }

@media (max-width: 720px) {
  .mc .mch__back, .mc .mch__spacer { width: auto; }
  .mc .mch__spacer { display: none; }
  .mc .mch__top { flex-direction: column; align-items: flex-start; }
  .mc .mch__top .eyebrow { align-self: center; }
  .mc .mch__sides { gap: 12px; }
  .mc .mch__side { flex-direction: column-reverse; gap: 10px; text-align: center; }
  .mc .mch__side--away { flex-direction: column; }
  .mc .mch__side--home { justify-content: center; text-align: center; }
  .mc .mch__side .disc { width: 64px !important; height: 64px !important; }
  .mc .mch__side .disc img { height: 47px !important; max-width: 51px !important; }
  .mc .mch__name { font-size: 17px; }
  .mc .mch__plate { font-size: 34px; padding: 6px 14px; gap: 10px; }
  .mc .mch__time { font-size: 22px; padding: 8px 14px; }
  .mc .mch__lines { gap: 8px; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); font-size: 12.5px; }
  .mc .mch__meta { gap: 6px 18px; font-size: 13.5px; }
}
@media (max-width: 560px) {
  .mc .mch__in { padding: 20px 16px 28px; }
  .mc .anch__in { padding: 0 16px; }
}

/* ============================ LINE-UPS (W6/W7) ======================== */
/* Values: plan "Mockup values", rows "Pitch" and "Shared". Every disc's
   place is --x (0 at the home goal line, 1 at the away one) and --y
   (across), set inline by pitch-player.blade.php: horizontal at ≥ 720 px,
   home on the start edge (so on the right in Arabic), upright below with
   home at the bottom. */
.mc .lu .card__in { display: flex; flex-direction: column; gap: 14px; }
.mc .lu-pitch, .mc .lu-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mc .lu-pitch[hidden], .mc .lu-list[hidden] { display: none; }

/* The Pitch/List segment. */
.mc .lu-seg { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.mc .lu-seg a {
  padding: 5px 14px; border-radius: 999px; text-decoration: none;
  font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text-muted);
}
.mc .lu-seg a:hover { color: var(--primary); }
.mc .lu-seg a.on { background: #fff; color: var(--primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .mc .lu-seg a.on { background: var(--surface); }

.mc .lu-own { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-muted); }

/* The legend: each side's kit dot, name and formation. */
.mc .lu-legend { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; }
.mc .lu-legend__side { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.mc .lu-legend__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc .lu-legend__fm { font-size: 13px; font-weight: 400; color: var(--text-muted); direction: ltr; unicode-bidi: isolate; flex: none; }
.mc .lu-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--kit); flex: none; }
.mc .lu-dot.is-light { box-shadow: inset 0 0 0 2px #111; }

/* The pitch and its markings. */
.mc .pitch {
  position: relative; width: 100%; aspect-ratio: 688 / 480; border-radius: 18px; overflow: hidden;
  background: repeating-linear-gradient(90deg, #1F7A4D 0 65px, #23854F 65px 130px);
  --line: rgba(255, 255, 255, 0.55);
}
.mc .pitch__box { position: absolute; inset: 12px; border: 2px solid var(--line); border-radius: 6px; }
.mc .pitch__half { position: absolute; top: 12px; bottom: 12px; left: 50%; width: 2px; transform: translateX(-50%); background: var(--line); }
.mc .pitch__circle {
  position: absolute; left: 50%; top: 50%; width: 15.12%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border: 2px solid var(--line); border-radius: 50%;
}
/* The boxes: 96×220 on the 688×480 pitch. */
.mc .pitch__area { position: absolute; top: 50%; width: 13.95%; height: 45.83%; transform: translateY(-50%); border: 2px solid var(--line); }
.mc .pitch__area--home { inset-inline-start: 12px; border-inline-start: 0; }
.mc .pitch__area--away { inset-inline-end: 12px; border-inline-end: 0; }

/* The half of a side whose line-up is not announced. */
.mc .pitch-na {
  position: absolute; top: 12px; bottom: 12px; width: calc(50% - 12px); z-index: 1;
  display: flex; align-items: center; justify-content: center; padding: 12px;
}
.mc .pitch-na--home { inset-inline-start: 12px; }
.mc .pitch-na--away { inset-inline-end: 12px; }
.mc .pitch-na span, .mc .pitch__pill {
  position: relative; background: rgba(10, 20, 32, 0.85); color: #fff; text-align: center;
  font-size: 13.5px; font-weight: 600; line-height: 1.4; padding: 8px 16px; border-radius: 999px;
}

/* A starter: disc, badges, name tag. */
.mc .pitch-pl {
  position: absolute; z-index: 2; width: 80px;
  inset-inline-start: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
[dir="rtl"] .mc .pitch-pl { transform: translate(50%, -50%); }
.mc .pitch-pl__d { position: relative; width: 50px; height: 50px; }
.mc .pitch-disc {
  width: 50px; height: 50px; border-radius: 50%; overflow: hidden;
  background: var(--kit); color: var(--ink);
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.35);
  display: flex; align-items: center; justify-content: center;
}
.mc .pitch-disc img { width: 50px; height: 63px; object-fit: cover; object-position: top; display: block; align-self: flex-start; }
.mc .pitch-disc__no { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mc .pitch-badge {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; white-space: nowrap; line-height: 1.3;
}
.mc .pitch-badge--num {
  bottom: -3px; inset-inline-start: -7px; min-width: 19px; height: 19px; padding: 0 3px;
  background: var(--kit); color: var(--ink); box-shadow: 0 0 0 1.5px #fff;
  font-size: 9.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.mc .pitch-badge--goal, .mc .pitch-badge--assist {
  top: -6px; gap: 1px; padding: 1px 5px; background: #fff; color: #0F1E33;
  font-size: 10px; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.mc .pitch-badge--goal { inset-inline-end: -12px; }
.mc .pitch-badge--assist { inset-inline-start: -12px; }
.mc .pitch-badge--goal .i { width: 11px; height: 11px; }
.mc .pitch-badge > span[dir] { display: inline-flex; align-items: center; gap: 1px; }
.mc .pitch-pl__end { position: absolute; bottom: -4px; inset-inline-end: -16px; display: flex; align-items: center; gap: 2px; }
.mc .pitch-pl__end .pitch-badge { position: static; }
.mc .pitch-badge--off { background: #B3261E; color: #fff; padding: 1px 5px; font-size: 9.5px; font-weight: 700; }
/* A red card is drawn as the card itself (the timeline's swatch). */
.mc .pitch-badge--red { width: 10px; height: 13px; border-radius: 2px; background: var(--card-red); box-shadow: 0 0 0 1.5px #fff; }
.mc .pitch-tag {
  background: rgba(10, 20, 32, 0.82); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1.4;
  padding: 2px 7px; border-radius: 6px; max-width: 80px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Before kick-off with no sheet: the empty pitch and the pill. */
.mc .pitch--pending {
  aspect-ratio: auto; height: 300px; border-radius: 16px; --line: rgba(255, 255, 255, 0.4);
  display: flex; align-items: center; justify-content: center; padding: 0 16px;
}
.mc .pitch--pending .pitch__circle { width: 92px; }

/* The bench. */
.mc .lu-bench { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mc .lu-bench__side { min-width: 0; }
.mc .lu-bench h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.mc .lu-bench ul { list-style: none; margin: 0; padding: 0; }
.mc .lu-bench__row {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
  padding: 6px 0; border-bottom: 1px solid var(--surface-inset);
}
.mc .lu-bench__no {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--kit); color: var(--ink); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.mc .lu-bench__no.is-light { box-shadow: inset 0 0 0 2px #111; }
.mc .lu-bench__nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc .lu-bench__mk { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 700; flex: none; }
.mc .lu-bench__mk .i { width: 14px; height: 14px; }
.mc .lu-bench__red { width: 10px; height: 13px; border-radius: 2px; background: var(--card-red); flex: none; }
.mc .lu-bench__on, .mc .lu-bench__off { font-size: 12px; font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.mc .lu-bench__on { color: var(--win); }
.mc .lu-bench__off { color: var(--loss); }
.mc .lu-bench__unused { font-size: 12px; color: var(--text-muted); flex: none; }

/* The List: today's sheet; the side switch sits above it. */
.mc .lu-list .tabs { align-self: flex-start; }
.mc .lu-list .lineup { margin-top: 0; }

/* Upright under 720 px: the home goal at the bottom, the stripes across. */
@media (max-width: 719.98px) {
  .mc .pitch:not(.pitch--pending) {
    aspect-ratio: 480 / 688;
    background: repeating-linear-gradient(0deg, #1F7A4D 0 65px, #23854F 65px 130px);
  }
  .mc .pitch:not(.pitch--pending) .pitch__half { top: 50%; bottom: auto; left: 12px; right: 12px; width: auto; height: 2px; transform: translateY(-50%); }
  .mc .pitch:not(.pitch--pending) .pitch__circle { width: 21.67%; }
  .mc .pitch:not(.pitch--pending) .pitch__area {
    top: auto; inset-inline: auto; left: 50%; width: 45.83%; height: 13.95%;
    transform: translateX(-50%); border: 2px solid var(--line);
  }
  .mc .pitch:not(.pitch--pending) .pitch__area--home { bottom: 12px; border-bottom: 0; }
  .mc .pitch:not(.pitch--pending) .pitch__area--away { top: 12px; border-top: 0; }
  .mc .pitch-na { width: auto; inset-inline: 12px; }
  .mc .pitch-na--home { top: 50%; bottom: 12px; }
  .mc .pitch-na--away { top: 12px; bottom: 50%; }
  .mc .pitch-pl { top: calc((1 - var(--x)) * 100%); inset-inline-start: calc(var(--y) * 100%); }
}
@media (max-width: 560px) {
  .mc .lu-bench { grid-template-columns: 1fr; gap: 18px; }
  /* Five across a phone's pitch: smaller discs and tags so they don't touch. */
  .mc .pitch-pl { width: 64px; gap: 2px; }
  .mc .pitch-pl__d, .mc .pitch-disc { width: 36px; height: 36px; }
  .mc .pitch-disc img { width: 36px; height: 45px; }
  .mc .pitch-disc__no { font-size: 13px; }
  .mc .pitch-tag { max-width: 60px; font-size: 9.5px; line-height: 1.3; padding: 1px 5px; }
  /* ...and badges pulled in, so an off minute never covers the next
     player's shirt number (T18: a back five at 390 px overlapped). */
  .mc .pitch-badge--num { min-width: 16px; height: 16px; font-size: 8.5px; bottom: -3px; inset-inline-start: -5px; padding: 0 2px; }
  .mc .pitch-pl__end { bottom: -4px; inset-inline-end: -8px; }
  .mc .pitch-badge--off { font-size: 8.5px; padding: 0 3px; }
  .mc .pitch-badge--goal, .mc .pitch-badge--assist { top: -6px; font-size: 9px; padding: 0 4px; }
  .mc .pitch-badge--goal { inset-inline-end: -7px; }
  .mc .pitch-badge--assist { inset-inline-start: -7px; }
  .mc .pitch-badge--goal .i { width: 10px; height: 10px; }
}

/* ============================ MATCH BODY (W6/W7) ====================== */
/* Values: plan "Mockup values", rows "Match body" and "Shared". */

/* Timeline. site.css styles the legacy page's .ev / .ev__pos; every
   property it sets is restated here so the board's values win. */
.mc .tl .sh { flex-wrap: wrap; }
.mc .tl__sides { margin-inline-start: auto; }
.mc .tl__list { display: flex; flex-direction: column; }
.mc .ev {
  display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: center;
  gap: 0; min-height: 58px; min-width: 0; padding: 0; position: relative;
  background: none; border: 0; border-radius: 0;
}
.mc .ev::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--surface-2);
}
.mc .ev__start, .mc .ev__end { display: flex; min-width: 0; padding-block: 4px; }
.mc .ev__start { padding-inline-end: 10px; }
.mc .ev__end { padding-inline-start: 10px; }
.mc .ev__m {
  position: relative; justify-self: center; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; padding: 3px 8px;
}
.mc .evc {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px;
}
.mc .ev__start .evc { flex-direction: row-reverse; text-align: end; }
.mc .evc__t { min-width: 0; }
.mc .evc b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.mc .evc small { display: block; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.mc .evc small.evc__team { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: none; letter-spacing: 0; }
.mc .evc small.evc__note { color: var(--text-faint); font-style: italic; margin-top: 2px; }
.mc .ev__pos { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.mc .evc .sc--in, .mc .divd .sc--in { font-size: inherit; font-weight: inherit; gap: 4px; line-height: inherit; }
.mc .evc .sc--in i, .mc .divd .sc--in i { color: inherit; }
.mc .evi {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.mc .evi--goal { background: #0F1E33; color: #fff; }
.mc .evi--miss { background: var(--surface-2); color: var(--loss); }
.mc .evi--sub { background: #E9EEF4; color: var(--win); }
[data-theme="dark"] .mc .evi--goal { background: #EAF1F9; color: #0F1E33; }
[data-theme="dark"] .mc .evi--sub { background: var(--surface-2); }
.mc .evi--other { background: var(--surface-2); }
.mc .sw { display: inline-block; flex: none; width: 10px; height: 13px; border-radius: 2px; background: var(--card-yellow); }
.mc .sw--red_card { background: var(--card-red); }
.mc .sw--second_yellow { background: linear-gradient(135deg, var(--card-yellow) 0 50%, var(--card-red) 50% 100%); }
.mc .divd { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.mc .divd::before, .mc .divd::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.mc .divd > span {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-2); padding: 4px 12px; border-radius: 999px;
}
[dir="rtl"] .mc .divd > span { letter-spacing: 0; text-transform: none; }
.mc .tl__legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 14px;
  font-size: 12px; color: var(--text-muted);
}
.mc .tl__legend > span { display: inline-flex; align-items: center; gap: 5px; }
.mc .tl__lg-i { display: inline-flex; }
.mc .tl__lg-i--sub { color: var(--win); }

/* Stats. */
.mc .mst .card__in { display: flex; flex-direction: column; gap: 6px; }
.mc .mst__poss { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.mc .mst__plab { text-align: center; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.mc .mst__pfig { display: flex; justify-content: space-between; align-items: baseline; }
.mc .mst__pfig span { font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mc .mst__h { color: var(--mc-home); }
.mc .mst__a { color: var(--mc-away); }
.mc .mst__pbar { display: flex; height: 12px; gap: 4px; border-radius: 999px; overflow: hidden; }
.mc .mst__pbar span { flex-basis: 0; }
.mc .mst__ph { background: var(--mc-home); }
.mc .mst__pa { background: var(--mc-away); }
.mc .mst__pnames { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-muted); }
.mc .mst__grp {
  margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint);
}
[dir="rtl"] .mc .mst__grp { letter-spacing: 0; text-transform: none; }
.mc .stat { padding: 9px 0; }
.mc .stat__r { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; }
.mc .stat__l { text-align: center; font-size: 13.5px; color: var(--text-muted); }
.mc .stat__v {
  font-size: 14px; font-weight: 700; padding: 2px 10px; border-radius: 999px; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.mc .stat__v--home { justify-self: start; }
.mc .stat__v--away { justify-self: end; }
.mc .stat__v--home.on { background: var(--mc-home); color: #fff; }
.mc .stat__v--away.on { background: var(--mc-away); color: var(--surface); }
.mc .stat__b { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.mc .stat__t { display: flex; height: 6px; border-radius: 999px; background: var(--surface-inset); overflow: hidden; }
/* The home fill grows from the centre outwards. */
.mc .stat__t--home { justify-content: flex-end; }
.mc .stat__t span { display: block; height: 100%; border-radius: 999px; }
.mc .stat__t--home span { background: var(--mc-home); }
.mc .stat__t--away span { background: var(--mc-away); }
.mc .mst__foot { margin: 6px 0 0; }

/* Head-to-head. */
.mc .h2c .card__in { display: flex; flex-direction: column; gap: 12px; }
.mc .h2c__first { margin: 0; font-size: 14px; color: var(--text-muted); }
.mc .h2c__figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mc .h2c__fig { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.mc .h2c__n { font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.mc .h2c__n--home { color: var(--mc-home); }
.mc .h2c__n--draw { color: var(--text-faint); }
.mc .h2c__bar { display: flex; height: 6px; gap: 3px; border-radius: 999px; overflow: hidden; }
.mc .h2c__seg { flex-basis: 0; }
.mc .h2c__seg--home { background: var(--mc-home); }
.mc .h2c__seg--draw { background: var(--draw); }
.mc .h2c__seg--away { background: var(--mc-away); }
.mc .h2c__prev { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.mc .h2c__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 10px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--surface-inset); font-size: 13.5px; color: var(--text); text-decoration: none;
}
.mc .h2c__row:hover .h2c__nm { color: var(--primary); }
.mc .h2c__side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mc .h2c__side--home { justify-content: flex-end; text-align: end; }
.mc .h2c__nm { min-width: 0; overflow-wrap: anywhere; }
.mc .h2c__sc { font-size: 15px; background: var(--surface-2); border-radius: 8px; padding: 3px 9px; gap: 5px; }
.mc .h2c__sc--state { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.mc .h2c__meta { grid-column: 1 / -1; text-align: center; }

/* Venue. */
.mc .ven .card__in { display: flex; flex-direction: column; gap: 14px; }
.mc .ven__id { display: flex; align-items: center; gap: 14px; }
.mc .ven__ic {
  width: 48px; height: 48px; border-radius: 14px; flex: none; background: var(--surface-2); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.mc .ven__n { font-size: 16px; font-weight: 600; }
.mc .ven__m { font-size: 13px; color: var(--text-muted); }
.mc .ven__acts { display: flex; gap: 10px; }
.mc .ven__acts .btn { flex: 1 1 0; min-width: 0; }

/* Form. */
.mc .frm__side { display: flex; flex-direction: column; gap: 6px; }
.mc .frm__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mc .frm__club { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 600; }
.mc .frm__div { height: 1px; background: var(--surface-inset); margin: 12px 0; }
.mc .frm__hint { margin: 14px 0 0; }

@media (max-width: 560px) {
  .mc .ev { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); }
  .mc .ev__start { padding-inline-end: 6px; }
  .mc .ev__end { padding-inline-start: 6px; }
  .mc .ev__m { font-size: 11.5px; padding: 2px 6px; }
  .mc .evc { gap: 8px; padding: 7px 9px; }
  .mc .evi { width: 24px; height: 24px; }
  .mc .evi svg { width: 14px; height: 14px; }
  .mc .tl__sides { margin-inline-start: 0; flex-basis: 100%; }
}

/* ===== PLAYER NAME LINKS (W-P4) =====
   A name that opens the player's profile keeps its colour; hover and
   keyboard focus underline it (offset 3px, 1.5px), focus adds the site's
   ring. On the pitch the whole disc + tag is the link, and only the tag's
   text underlines. */
.mc .lk { color: inherit; text-decoration: none; }
.mc .lk:hover, .mc .lk:focus-visible {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.mc .lk:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.mc .pitch-pl > .lk { display: flex; flex-direction: column; align-items: center; gap: inherit; }
.mc .pitch-pl > .lk:hover, .mc .pitch-pl > .lk:focus-visible { text-decoration: none; }
.mc .pitch-pl > .lk:hover .pitch-tag, .mc .pitch-pl > .lk:focus-visible .pitch-tag {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.mc .pitch-pl > .lk:focus-visible { border-radius: 10px; }

/* ============================ PLAYER PROFILE (W-P1..W-P3) ============= */
/* Values: plan "Mockup values", rows "Profile" and "Shared"; the phone
   hero (W-P3) under 720 px. */
.mc .sh__sub { margin: 2px 0 0; padding-inline-start: 14px; font-size: 13px; color: var(--text-muted); }
.mc .pp-stack { display: flex; flex-direction: column; gap: 16px; }
.mc .pp-stack--season { gap: 18px; }
.mc .pp-stack--tight { gap: 10px; }
.mc .mc-pp__body { padding-top: 28px; padding-bottom: 56px; }

/* Hero. */
.mc .pp-hero { position: relative; overflow: hidden; }
.mc .pp-hero__in {
  position: relative; max-width: 1200px; margin: 0 auto; padding: 22px 24px 0; min-height: 372px;
}
.mc .pp-num {
  position: absolute; inset-inline-end: 330px; top: 6px; pointer-events: none; user-select: none;
  font-size: 300px; font-weight: 700; line-height: 1; letter-spacing: -8px;
  color: rgba(255, 255, 255, 0.07); font-variant-numeric: tabular-nums;
}
.mc .pp-photo {
  position: absolute; inset-inline-end: 40px; bottom: 0; height: 332px; width: 300px;
  object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}
/* No photo: his club's shirt picture, or the drawn shirt, standing off the
   hero's bottom edge as the app's does. */
.mc .pp-kit {
  position: absolute; inset-inline-end: 80px; bottom: 40px; height: 240px; width: 220px;
  object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}
.mc .pp-back {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px;
  color: var(--on-hero); font-size: 15px; font-weight: 600; text-decoration: none;
}
.mc .pp-back:hover, .mc .pp-back:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mc .pp-back__sc { font-size: inherit; font-weight: inherit; gap: 2px; color: inherit; }
.mc .pp-back__sc i { color: inherit; }
.mc .pp-id {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  margin-top: 46px; max-width: min(620px, calc(100% - 340px)); padding-bottom: 32px;
}
.mc .pp-club { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--on-hero-muted); }
.mc .pp-name { margin: 0; display: flex; flex-direction: column; }
.mc .pp-first { font-size: 26px; font-weight: 300; line-height: 1.2; color: var(--on-hero); }
.mc .pp-last {
  font-size: 54px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.05; color: #fff; overflow-wrap: anywhere;
}
.mc .pp-latin { margin-top: 6px; font-size: 14px; font-weight: 400; color: var(--on-hero-muted); }
.mc .pp-tags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mc .pp-pos {
  display: inline-flex; align-items: center; background: #0A63F5; color: #fff;
  border-radius: 999px; padding: 6px 16px; font-size: 14px; font-weight: 600;
}
.mc .pp-shirt { font-size: 18px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* In this match. */
.mc .pp-res { font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 12px; }
.mc .pp-res--l { color: var(--loss); background: rgba(179, 38, 30, 0.10); }
.mc .pp-res--w { color: var(--win); background: rgba(79, 126, 111, 0.14); }
.mc .pp-res--d { color: var(--text-muted); background: var(--surface-2); }
.mc .pp-tm { display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; }
.mc .pp-tm:hover .pp-tm__score { text-decoration: underline; text-underline-offset: 3px; }
.mc .pp-tm__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mc .pp-tm__score { font-size: 17px; font-weight: 600; }
.mc .pp-tm__sc { display: inline-flex; font-size: inherit; font-weight: inherit; gap: 4px; }
.mc .pp-tm__meta { font-size: 13px; }
.mc .pp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mc .pp-chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 13px;
  font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--text);
}
.mc .pp-chip--goal { background: #E7F0FE; color: #0A63F5; }
[data-theme="dark"] .mc .pp-chip--goal { background: rgba(77, 141, 247, 0.16); color: #4D8DF7; }
.mc .pp-sw { width: 10px; height: 13px; border-radius: 2px; flex: none; display: inline-block; }
.mc .pp-sw--lg { width: 11px; height: 15px; }
.mc .pp-sw--yellow { background: var(--card-yellow, #F5C518); }
.mc .pp-sw--red { background: var(--card-red, #D93025); }
/* The box: hairlines between cells, none drawn over an empty slot. */
.mc .pp-box {
  display: grid; grid-template-columns: repeat(min(var(--n), 6), minmax(0, 1fr)); gap: 1px;
  border: 1px solid var(--surface-inset); border-radius: 14px; overflow: hidden; background: var(--surface);
}
.mc .pp-box__c {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 13px 14px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--surface-inset);
}
.mc .pp-box b { font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mc .pp-box span { font-size: 12.5px; color: var(--text-muted); }

/* Season. */
.mc .pp-season { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 12px; }
.mc .pp-season > div { display: flex; flex-direction: column; min-width: 0; }
.mc .pp-season b { font-size: 30px; font-weight: 700; line-height: 1.2; }
.mc .pp-season .pp-season__goals { color: var(--mc-home); }
.mc .pp-season span { font-size: 12.5px; color: var(--text-muted); }
.mc .pp-cards {
  display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 14px; border-top: 1px solid var(--surface-inset); font-size: 14px;
}
.mc .pp-cards > span { display: inline-flex; align-items: center; gap: 8px; }

/* Detailed stats. */
.mc .pp-det { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: -6px; }
.mc .pp-row { padding: 11px 0; border-top: 1px solid var(--surface-inset); font-size: 14px; }
.mc .pp-row__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mc .pp-row b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc .pp-bar { height: 8px; border-radius: 999px; background: var(--surface-inset); overflow: hidden; margin-top: 8px; }
.mc .pp-bar > div { height: 8px; border-radius: 999px; background: #0A63F5; }

/* Matches. */
.mc .pp-ms { margin-top: -2px; }
.mc .pp-mhead, .mc .pp-m {
  display: grid; grid-template-columns: 62px 30px minmax(0, 1fr) 54px 34px 40px 18px; align-items: center; gap: 12px;
}
[dir="rtl"] .mc .pp-mhead, [dir="rtl"] .mc .pp-m { grid-template-columns: 84px 30px minmax(0, 1fr) 54px 34px 40px 18px; }
.mc .pp-mhead { padding: 0 10px 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.mc .pp-mhead__opp { grid-column: span 2; }
.mc .pp-c { text-align: center; }
.mc .pp-e { text-align: end; }
.mc .pp-m {
  padding: 11px 10px; border-top: 1px solid var(--surface-inset); color: var(--text); text-decoration: none;
}
.mc .pp-m:hover { background: var(--surface-1); }
.mc .pp-m:hover .pp-m__o b { text-decoration: underline; text-underline-offset: 3px; }
.mc .pp-m:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: 12px; }
.mc .pp-m--this, .mc .pp-m--this:hover { background: var(--own); border-radius: 12px; border-top-color: transparent; }
.mc .pp-m--this + .pp-m { border-top-color: transparent; }
.mc .pp-m__d { font-size: 13px; white-space: nowrap; }
.mc .pp-m__o { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mc .pp-m__o b { font-size: 14.5px; font-weight: 600; }
.mc .pp-m__o small { font-size: 12.5px; color: var(--text-muted); }
.mc .pp-m__si { display: none; }
.mc .pp-m__s { text-align: center; }
.mc .pp-sc { font-size: 15px; font-weight: 700; gap: 0; }
.mc .pp-sc i { color: inherit; }
.mc .pp-m__end { display: contents; }
.mc .pp-wdl {
  display: inline-flex; align-items: center; justify-content: center; justify-self: center;
  width: 26px; height: 24px; border-radius: 7px; font-size: 12px; font-weight: 700;
}
.mc .pp-wdl--w { color: var(--win); background: rgba(79, 126, 111, 0.14); }
.mc .pp-wdl--d { color: var(--text-muted); background: var(--surface-2); }
.mc .pp-wdl--l { color: var(--loss); background: rgba(179, 38, 30, 0.10); }
.mc .pp-min { font-size: 13px; color: var(--text-muted); text-align: end; font-variant-numeric: tabular-nums; }
.mc .pp-m__chev { color: var(--text-faint); }
.mc .pp-this {
  display: inline-block; margin-inline-start: 6px; vertical-align: 2px; padding: 1px 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--primary);
  background: var(--surface); border: 1px solid var(--own-border); border-radius: 999px;
}
[dir="rtl"] .mc .pp-this { letter-spacing: 0; }

/* Facts, biography, earlier seasons. */
.mc .pp-kv { display: flex; flex-direction: column; margin-top: -8px; }
.mc .pp-kv > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--surface-inset); font-size: 14px;
}
.mc .pp-kv > div:first-child { border-top: 0; }
.mc .pp-kv span { color: var(--text-muted); }
.mc .pp-kv b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }
.mc .pp-bio__txt { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.mc table.pp-prev { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: -6px; }
.mc table.pp-prev th, .mc table.pp-prev td { padding: 10px 6px; text-align: center; font-variant-numeric: tabular-nums; }
.mc table.pp-prev thead th { padding: 8px 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.mc table.pp-prev td { font-weight: 700; }
.mc table.pp-prev th:first-child { text-align: start; }
.mc table.pp-prev tbody th { font-weight: 600; }
.mc .pp-prev__note { margin: 0; font-size: 12.5px; }

/* Other players in this match. */
.mc .pp-others { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mc .pp-others__side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mc .pp-others__head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.mc .pp-ply { display: flex; flex-wrap: wrap; gap: 6px; }
.mc .pp-ply__c {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none;
}
[dir="rtl"] .mc .pp-ply__c { padding: 3px 3px 3px 11px; }
.mc a.pp-ply__c:hover, .mc a.pp-ply__c:focus-visible { text-decoration: underline; text-underline-offset: 3px; border-color: var(--border-strong); }
.mc a.pp-ply__c:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mc .pp-ply__c.cur { background: var(--own); border-color: var(--own-border); font-weight: 700; }
.mc .pp-ply__c i {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 10.5px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(15, 30, 51, 0.12);
}
.mc .pp-ply__c em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--win); }
.mc .pp-ply__c em.off { color: var(--loss); }
.mc .pp-ply__viewing { font-size: 11px; font-weight: 700; color: var(--primary); }

@media (max-width: 960px) {
  /* One column, the facts (and biography) first (W-P3). */
  .mc-pp .cols { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .mc-pp .cols > .stack > * { min-width: 0; }
  .mc-pp .stack { display: contents; }
  .mc .pp-facts, .mc .pp-bio { order: -1; }
}
@media (max-width: 720px) {
  .mc .pp-hero__in { min-height: 0; height: 300px; padding: 16px; }
  .mc .pp-num { font-size: 190px; inset-inline-end: -8px; top: 30px; letter-spacing: -5px; }
  .mc .pp-photo { height: 224px; width: 170px; inset-inline-end: 4px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35)); }
  .mc .pp-kit { height: 150px; width: 140px; inset-inline-end: 16px; bottom: 30px; }
  .mc .pp-back { font-size: 14px; }
  .mc .pp-id {
    position: absolute; inset-inline-start: 16px; top: 86px; width: 196px; max-width: none;
    margin: 0; padding: 0; gap: 10px;
  }
  .mc .pp-club { font-size: 13.5px; gap: 8px; }
  .mc .pp-club .disc { width: 30px !important; height: 30px !important; }
  .mc .pp-club .disc img { height: 22px !important; max-width: 24px !important; }
  .mc .pp-first { font-size: 19px; }
  .mc .pp-last { font-size: 31px; letter-spacing: -0.3px; line-height: 1.1; }
  .mc .pp-latin { font-size: 12.5px; margin-top: 4px; }
  .mc .pp-pos { font-size: 13px; padding: 5px 12px; }
  .mc .pp-shirt { font-size: 15px; }

  .mc .pp-box { grid-template-columns: repeat(min(var(--n), 3), minmax(0, 1fr)); }
  .mc .pp-season { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc .pp-det { display: flex; flex-direction: column; }
  .mc .pp-det__col { display: contents; }
  .mc .pp-others { grid-template-columns: 1fr; }

  .mc .pp-mhead { display: none; }
  .mc .pp-m, [dir="rtl"] .mc .pp-m { grid-template-columns: 50px 26px minmax(0, 1fr) auto; gap: 10px; padding: 10px 6px; }
  .mc .pp-m__d { font-size: 12px; white-space: normal; }
  .mc .pp-m .disc { width: 26px !important; height: 26px !important; }
  .mc .pp-m .disc img { height: 19px !important; max-width: 21px !important; }
  .mc .pp-m__o b { font-size: 14px; }
  .mc .pp-m__o small { font-size: 12px; }
  .mc .pp-m__si { display: inline; }
  .mc .pp-m__si .pp-sc { font-size: inherit; font-weight: inherit; }
  .mc .pp-m__s, .mc .pp-m__chev { display: none; }
  .mc .pp-m__end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
  .mc .pp-min { font-size: 12px; }
}
@media (max-width: 560px) {
  .mc-pp .cols { gap: 16px; }
  .mc .mc-pp__body { padding-top: 16px; padding-bottom: 40px; }
}