/* Дополнительные блоки страницы матча (app/match_extra.php): расстановка, текстовая трансляция, таблица, видео.
   Только токены из app.css; собственные — цвета поля (светлая и тёмная тема). */
:root {
  --mx-grass: #2f8a4c; --mx-grass-2: #2b8046; --mx-line: rgba(255, 255, 255, .55); --mx-on-grass: #ffffff;
  --mx-yc: #f5c400; --mx-pitch-h: 340px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --mx-grass: #1d5634; --mx-grass-2: #1a4e2f; --mx-line: rgba(255, 255, 255, .32); --mx-on-grass: #eef1f8; }
}
:root[data-theme="dark"] { --mx-grass: #1d5634; --mx-grass-2: #1a4e2f; --mx-line: rgba(255, 255, 255, .32); --mx-on-grass: #eef1f8; }

/* ---------- 1. Поле: на широком экране — горизонтально (хозяева слева), на телефоне — вертикально (хозяева сверху) ---------- */
.mx-pitch { position: relative; display: flex; min-height: var(--mx-pitch-h); border: 2px solid var(--mx-line); border-radius: var(--r-lg); overflow: hidden; color: var(--mx-on-grass);
  background: repeating-linear-gradient(90deg, var(--mx-grass) 0 10%, var(--mx-grass-2) 10% 20%); box-shadow: var(--e-1); }
.mx-pitch::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--mx-line); }
.mx-pitch::after { content: ""; position: absolute; top: 50%; left: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border: 2px solid var(--mx-line); border-radius: 50%; }
.mx-half { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; padding: var(--sp-2) var(--sp-2) var(--sp-3); }
/* штрафная площадь у своих ворот */
.mx-half::before { content: ""; position: absolute; z-index: -1; top: 26%; bottom: 26%; width: 14%; border: 2px solid var(--mx-line); }
.mx-home::before { left: -2px; } .mx-away::before { right: -2px; }
.mx-cap { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; margin: 0 0 var(--sp-2); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); }
.mx-away .mx-cap { flex-direction: row-reverse; }
.mx-cap-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-f { flex: none; padding: 1px 8px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .22); font-variant-numeric: tabular-nums; }
.mx-lines { display: flex; flex: 1; align-items: stretch; }
.mx-away .mx-lines { flex-direction: row-reverse; }
.mx-ln { display: flex; flex-direction: column; justify-content: space-around; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.mx-away .mx-ln { flex-direction: column-reverse; }   /* левый край гостей — внизу экрана */
.mx-p { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: var(--sp-1) 0; text-align: center; }
.mx-no { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: var(--fw-bold) var(--fs-xs)/1 var(--font-display); font-variant-numeric: tabular-nums;
  background: var(--c-surface); color: var(--c-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.mx-away .mx-no { background: var(--c-text); color: var(--c-surface); }
.mx-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-2xs); line-height: var(--lh-2xs); font-weight: var(--fw-semibold); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.mx-n a { color: inherit; }
.mx-n a:hover { text-decoration: underline; }
.mx-out { padding: 0 5px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .28); font-size: var(--fs-2xs); line-height: var(--lh-2xs); font-variant-numeric: tabular-nums; }
.mx-out::before { content: "↓ "; color: #ff9db8; }
/* значки событий на кружке игрока */
.mx-no .mx-b { position: absolute; top: -3px; right: -5px; }
.mx-no .mx-b + .mx-b { right: 5px; }
.mx-no .mx-b + .mx-b + .mx-b { right: 15px; }
.mx-b { display: inline-block; flex: none; vertical-align: middle; }
.mx-b-g, .mx-b-og { width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #0f1526; }
.mx-b-og { box-shadow: inset 0 0 0 2px var(--c-live); }
.mx-b-yc, .mx-b-rc { width: 8px; height: 11px; border-radius: 2px; background: var(--mx-yc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.mx-b-rc { background: var(--c-live); }
.mx-b-n { position: absolute; bottom: -4px; right: -8px; font-style: normal; font-size: 10px; }

/* Замены и запасные под полем */
.mx-subs { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
@media (min-width: 720px) { .mx-subs { grid-template-columns: 1fr 1fr; } }
.mx-sb { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--e-1); }
.mx-sb-h { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-bold); }
.mx-sb-h span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-sl { margin: 0; padding: 0; list-style: none; }
.mx-sl li { display: grid; grid-template-columns: 40px 24px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); padding: 6px 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.mx-sl li + li { border-top: 1px solid var(--c-border); }
.mx-sl-m { font-weight: var(--fw-bold); color: var(--c-success); font-variant-numeric: tabular-nums; }
.mx-sl-m::before { content: "↑ "; }
.mx-sl-no { color: var(--c-text-3); text-align: right; font-variant-numeric: tabular-nums; }
.mx-sl-n { min-width: 0; overflow-wrap: anywhere; }
.mx-sl-n b { font-weight: var(--fw-semibold); }
.mx-sl-n b a { color: inherit; }
.mx-sl-n b a:hover { color: var(--c-brand); }
.mx-sl-n > span { color: var(--c-text-3); font-size: var(--fs-xs); }
.mx-sl .mx-b { margin-left: 2px; }
.mx-sl .mx-b-g { box-shadow: inset 0 0 0 2px var(--c-text); background: var(--c-surface); }
.mx-bench { margin: var(--sp-2) 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--c-border); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--c-text-2); text-wrap: pretty; }
.mx-bench span { font-weight: var(--fw-semibold); color: var(--c-text-3); }

@media (max-width: 640px) {
  .mx-pitch { flex-direction: column; min-height: 0; background: repeating-linear-gradient(180deg, var(--mx-grass) 0 10%, var(--mx-grass-2) 10% 20%); }
  .mx-pitch::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 2px; margin: -1px 0 0; }
  .mx-pitch::after { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .mx-half { padding: var(--sp-2) var(--sp-1); }
  .mx-half::before { top: auto; bottom: auto; left: 24%; right: 24%; width: auto; height: 11%; }
  .mx-home::before { top: -2px; } .mx-away::before { bottom: -2px; }
  .mx-away { flex-direction: column-reverse; }
  .mx-away .mx-cap { flex-direction: row; margin: var(--sp-2) 0 0; }
  .mx-cap { padding: 0 var(--sp-2); }
  .mx-lines { flex-direction: column; }
  .mx-away .mx-lines { flex-direction: column-reverse; }
  .mx-ln { flex-direction: row-reverse; justify-content: space-around; padding: var(--sp-1) 0; }   /* хозяева смотрят вниз: их левый край справа */
  .mx-away .mx-ln { flex-direction: row; }
  .mx-p { flex: 1 1 0; max-width: 72px; }
}

/* ---------- 2. Текстовая трансляция ---------- */
.mx-cm { margin: 0; padding: 0; list-style: none; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--e-1); overflow: hidden; }
.mx-c { display: grid; grid-template-columns: 52px 20px minmax(0, 1fr); align-items: start; gap: var(--sp-3); padding: 10px var(--sp-4); }
.mx-c + .mx-c { border-top: 1px solid var(--c-border); }
.mx-c-m { padding-top: 1px; font-weight: var(--fw-bold); font-size: var(--fs-xs); line-height: var(--lh-sm); color: var(--c-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-c-t { margin: 0; min-width: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--c-text-2); text-wrap: pretty; overflow-wrap: anywhere; }
.mx-c-t b, .mx-c-t strong { color: var(--c-text); font-weight: var(--fw-semibold); }
.mx-c-t strong { font-weight: var(--fw-bold); }
.mx-c-i { width: 16px; height: 16px; margin: 1px 2px 0; border-radius: 50%; background: var(--c-surface-3); }
.mx-c-shot .mx-c-i { box-shadow: inset 0 0 0 4px var(--c-surface-3); background: var(--c-text-3); }
.mx-c-corner .mx-c-i { border-radius: 2px; width: 3px; margin-left: 8px; background: var(--c-text-3); }
.mx-c-g { background: color-mix(in srgb, var(--c-brand-soft) 50%, transparent); }
.mx-c-g .mx-c-i { background: var(--c-text); box-shadow: inset 0 0 0 4px var(--c-surface), inset 0 0 0 6px var(--c-text); }
.mx-c-g .mx-c-t { color: var(--c-text); }
.mx-c-yc .mx-c-i, .mx-c-rc .mx-c-i { width: 12px; height: 16px; margin-left: 4px; border-radius: 2px; background: var(--mx-yc); }
.mx-c-rc .mx-c-i { background: var(--c-live); }
.mx-c-sub .mx-c-i { background: none; position: relative; }
.mx-c-sub .mx-c-i::before { content: "⇄"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-success); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.mx-c-pen .mx-c-i { border-radius: 2px; background: none; box-shadow: inset 0 0 0 2px var(--c-text-2); }
.mx-c-var .mx-c-i { border-radius: var(--r-xs); background: var(--c-brand-soft); box-shadow: inset 0 0 0 2px var(--c-brand); }
.mx-c-per { background: var(--c-surface-2); }
.mx-c-per .mx-c-i { background: none; }
.mx-c-per .mx-c-t { font-weight: var(--fw-semibold); color: var(--c-text); }
.mx-more { margin-top: var(--sp-3); }
.mx-more > summary { display: flex; align-items: center; justify-content: center; height: var(--h-md); padding: 0 var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
  color: var(--c-brand); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.mx-more > summary::-webkit-details-marker { display: none; }
.mx-more > summary:hover { border-color: var(--c-brand); background: var(--c-brand-soft); }
.mx-more[open] > summary { margin-bottom: var(--sp-3); }
@media (max-width: 560px) {
  .mx-c { grid-template-columns: 44px 16px minmax(0, 1fr); gap: var(--sp-2); padding: 10px var(--sp-3); }
  .mx-c-i { width: 14px; height: 14px; margin: 2px 1px 0; }
}

/* ---------- 3. Таблица: строки команд матча ---------- */
.mx-tbl tr.mx-me td { background: var(--c-brand-soft); }
.mx-tbl tr.mx-me td:first-child { box-shadow: inset 3px 0 0 var(--c-brand); color: var(--c-brand); font-weight: var(--fw-bold); }
.mx-tbl tr.mx-me td.l b { font-weight: var(--fw-bold); }
.mx-tbl tr.mx-me td.l b a { color: var(--c-text); }
.mx-tbl tr.mx-gap td { padding: 2px var(--sp-2); color: var(--c-text-3); text-align: center; line-height: 1; }
.mx-tbl tbody tr.mx-gap:hover td { background: none; }
@media (max-width: 560px) {
  .mx-tbl td.l { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .mx-tbl th, .mx-tbl td { padding-left: 6px; padding-right: 6px; }
}

/* ---------- 4. Видео ---------- */
.mx-vd { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .mx-vd { grid-template-columns: 1fr 1fr; } }
.mx-vd a { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--h-lg); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
  font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); color: var(--c-text); transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.mx-vd a:hover { border-color: var(--c-brand); background: var(--c-brand-soft); }
.mx-vd-i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c-brand-soft); }
.mx-vd-i::after { content: ""; position: absolute; top: 9px; left: 11px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--c-brand); }
.mx-vd-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-vd-d { flex: none; color: var(--c-text-3); font-weight: var(--fw-medium); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .mx-vd a { transition: none; } }