/* Тема «Эфир» (матчи с 2000 года): нижние блоки страницы матча, продолжение доски «Трансляция».
   Перенос утверждённого макета output/match-page/m1-efir. Токены взяты у .bc (match-lineups.css):
   фон эфира, панели, янтарь; цвета команд приходят из шаблона в style корня (--home, --away) и кромками (--tc).
   Oswald - подписи «нижней трети», Big Shoulders Display - только цифры и латиница (в нём нет кириллицы);
   оба шрифта объявлены в match-lineups.css, Manrope - шрифт сайта. Все селекторы под .mx: сайт красит
   заголовки правилом body.page :where(h1…h6), поэтому одного класса мало. Адаптив - контейнерные запросы по обёртке. */

.mx{
  --bg:#0d1420; --panel:#14142b; --panel-2:#1a1f3c; --amber:#ffcf4d; --fg:#f4f4f4;
  --mut:rgba(244,244,244,.76); --dim:rgba(244,244,244,.6); --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.18);
  --ink:#14142b; --home:#e2403a; --away:#4c8fd6;
  --fd:'Oswald','Arial Narrow',sans-serif; --fs:'Big Shoulders Display','Oswald',sans-serif; --ft:Manrope,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  background:#f4f4f4; padding:8px 0 48px; color:var(--fg);
  font:400 15px/1.5 var(--ft); font-variant-numeric:tabular-nums;
}
.mx *,.mx *::before,.mx *::after{box-sizing:border-box}
.mx :where(h2,h3,h4,p,ul,ol,dl,dd,figure,table,caption){margin:0;padding:0}
.mx :where(h2,h3,h4){color:var(--fg)}
.mx :where(a){color:inherit}
.mx :where(button){font:inherit;color:inherit}
.mx img{max-width:100%}
.mx [hidden]{display:none!important}
.mx :focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.mx .mx__wrap{container:mx/inline-size;max-width:1520px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.mx .mx__wrap>*{min-width:0}
/* края плит совпадают с доской: у контейнера сайта 40 px, на телефоне 16 px (match-lineups.css, max-width:600px) */
@media (max-width:600px){.mx .mx__wrap{padding:0 16px}}

/* длинные имена (латиница, клубы) переносятся, а не вылетают */
.mx .mx-tt span,.mx .mx-xg__team span,.mx .mx-gauge__side small,.mx .mx-ft__team b,.mx .mx-gt__team span,.mx .mx-gm__t span,
.mx .mx-fp__m span,.mx .mx-h2h__tot dt,.mx .mx-h2h__tm span,.mx .mx-pr__o span,.mx .mx-sc__n,.mx .mx-cr a,.mx .mx-cr span,
.mx .mx-gch__n,.mx .mx-pl__tx b,.mx .mx-scr__lt b,.mx .mx-tags__end span,.mx .mx-lt__t,.mx .mx-lt__s{overflow-wrap:anywhere}

/* ---------- эфирная плита ---------- */
.mx .mx-sec{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);border-radius:18px;padding:22px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;scroll-margin-top:130px}
.mx .mx-sec>*{min-width:0}
.mx .mx-sec::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(55% 70% at 0% 0%,color-mix(in srgb,var(--home) 9%,transparent),transparent 70%),
             radial-gradient(45% 60% at 100% 100%,color-mix(in srgb,var(--away) 10%,transparent),transparent 70%)}

.mx .mx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
.mx .mx-head>*{min-width:0}
.mx .mx-head__note{color:var(--mut);font-size:13.5px;max-width:56ch}

/* «нижняя треть»: заголовок на панели с янтарной кромкой + янтарная строка */
.mx .mx-lt{display:grid;justify-items:start;min-width:0}
.mx .mx-lt__t{font:600 26px/1.1 var(--fd);text-transform:uppercase;letter-spacing:.035em;color:var(--fg);background:var(--panel);border-left:4px solid var(--amber);padding:10px 22px 9px 14px;box-shadow:0 12px 24px -16px rgba(0,0,0,.7)}
.mx .mx-lt__s{font:600 12px/1.25 var(--fd);text-transform:uppercase;letter-spacing:.09em;color:var(--ink);background:var(--amber);padding:5px 14px 5px 18px}

/* пометка «скоро» и подпись заглушки (оформление «пример» из макета): пунктир янтарём */
.mx .mx-ex{display:inline-flex;align-items:center;font:600 11px/1 var(--fd);text-transform:uppercase;letter-spacing:.1em;color:var(--amber);border:1px dashed rgba(255,207,77,.75);border-radius:999px;padding:5px 10px;white-space:nowrap}
.mx .mx-ex--l{white-space:normal;line-height:1.35;font-size:12px;letter-spacing:.06em;border-radius:8px;padding:8px 12px;max-width:46ch}
.mx .mx-ex--s{font-size:10px;padding:3px 7px}

/* плашка команды: флаг + имя, кромка цветом команды */
.mx .mx-tt{display:inline-flex;align-items:center;gap:8px;max-width:100%;background:var(--panel);border-left:4px solid var(--tc);padding:6px 12px 6px 8px;font:600 14px/1.1 var(--fd);text-transform:uppercase;letter-spacing:.04em;color:var(--fg)}
.mx .mx-tt span{min-width:0}
.mx .mx-tt img{width:24px;height:16px;object-fit:cover;flex:none;border-radius:2px}
.mx .mx-tt--s{font-size:12px;padding:4px 10px 4px 6px;border-left-width:3px;background:rgba(255,255,255,.04)}
.mx .mx-tt--s img{width:18px;height:12px}
.mx .mx-legend{display:flex;flex-wrap:wrap;gap:8px;min-width:0}

/* общие кнопки-стрелки */
.mx .mx-arr{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--fg);cursor:pointer;display:grid;place-items:center;flex:none;transition:background-color .2s,border-color .2s,transform .15s var(--ease)}
.mx .mx-arr::before{content:"";width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:-4px}
.mx .mx-arr--prev::before{transform:rotate(-135deg);margin-left:4px}
.mx .mx-arr:hover{background:rgba(255,255,255,.1);border-color:var(--amber)}
.mx .mx-arr:active{transform:scale(.95)}
.mx .mx-arrows{display:flex;gap:6px}

/* ---------- 1. Статистика ---------- */
.mx .mx-num{font:900 64px/.86 var(--fs);letter-spacing:.01em;color:var(--fg)}
.mx .mx-num--m{font-size:46px}
.mx .mx-keys{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
.mx .mx-keys--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mx .mx-keys--n1{grid-template-columns:minmax(0,1fr)}
.mx .mx-keys--n1>.mx-key{width:min(100%,560px)}
.mx .mx-key{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px 18px;display:grid;gap:14px;align-content:start;min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.mx .mx-key__h{font:600 13px/1.25 var(--fd);text-transform:uppercase;letter-spacing:.09em;color:var(--mut)}
.mx .mx-key__note{font-size:12px;line-height:1.9;color:var(--mut)}
.mx .mx-lg{display:inline-block;white-space:nowrap;margin-right:14px}
.mx .mx-lg:last-child{margin-right:0}
.mx .mx-sw{display:inline-block;width:14px;height:8px;border-radius:2px;margin-right:6px;vertical-align:1px}
.mx .mx-sw--bar{background:var(--fg);opacity:.8}
.mx .mx-sw--ball{width:10px;height:10px;border-radius:50%;background:var(--amber)}
.mx .mx-sw--on{background:var(--fg)}
.mx .mx-sw--off{background:rgba(244,244,244,.45)}
.mx .mx-sw--bl{background:repeating-linear-gradient(135deg,rgba(244,244,244,.5) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px rgba(244,244,244,.5)}

/* владение: полукруглая шкала со свечением (glowing-finance) */
.mx .mx-gauge{display:grid;justify-items:center}
.mx .mx-gauge svg{width:100%;max-width:310px;height:auto;overflow:visible}
.mx .mx-gauge path{fill:none;stroke-width:14;stroke-linecap:butt;stroke-dasharray:var(--d) 100}
.mx .mx-gauge .mx-gauge__trk{stroke:rgba(255,255,255,.06);stroke-dasharray:none}
.mx .mx-gauge .mx-gauge__glow{stroke-width:20;opacity:.55;filter:url(#mxGlow)}
.mx .mx-gauge__knob{fill:var(--fg);stroke:var(--panel);stroke-width:4}
.mx .mx-gauge__v{display:grid;grid-template-columns:1fr 1fr;align-items:end;width:100%;max-width:330px;margin-top:-46px}
.mx .mx-gauge__side{display:grid;justify-items:start;gap:6px;min-width:0}
.mx .mx-gauge__side--a{justify-items:end;text-align:right}
.mx .mx-gauge__side small{font:600 12px/1.1 var(--fd);text-transform:uppercase;letter-spacing:.06em;color:var(--mut);border-bottom:3px solid var(--tc);padding-bottom:3px;max-width:100%}
.mx .mx-gauge__side .mx-num i{font-style:normal;font-size:.42em;margin-left:2px;color:var(--mut)}
/* на узкой плитке цифры заходят на концы дуги (так в макете): обводка цветом панели держит их читаемыми при любом цвете команды */
.mx .mx-gauge__side .mx-num{position:relative;text-shadow:2px 0 0 var(--panel),-2px 0 0 var(--panel),0 2px 0 var(--panel),0 -2px 0 var(--panel),2px 2px 0 var(--panel),-2px -2px 0 var(--panel),2px -2px 0 var(--panel),-2px 2px 0 var(--panel)}

/* xG и забитые */
.mx .mx-xg{display:grid;gap:18px}
.mx .mx-xg__row{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"team team" "num scale" "num g";column-gap:16px;row-gap:4px;align-items:end}
.mx .mx-xg__team{grid-area:team;display:flex;align-items:center;gap:8px;min-width:0;font:600 12px var(--fd);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.mx .mx-xg__team img{width:21px;height:14px;object-fit:cover;border-radius:2px;flex:none}
.mx .mx-xg__row .mx-num{grid-area:num;min-width:2.6ch;align-self:center;border-left:4px solid var(--tc);padding-left:10px}
.mx .mx-xg__scale{grid-area:scale;position:relative;height:26px;border-bottom:1px solid var(--line-2)}
.mx .mx-xg__bar{position:absolute;left:0;bottom:0;height:8px;width:var(--w);background:var(--tc);border-radius:0 3px 3px 0;box-shadow:0 0 16px color-mix(in srgb,var(--tc) 65%,transparent);transform-origin:left}
.mx .mx-xg__scale i{position:absolute;bottom:12px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 2px var(--panel),0 0 10px rgba(255,207,77,.6)}
.mx .mx-xg__g{grid-area:g;font-size:12.5px;color:var(--mut)}

/* удары: двухцветные столбики (neon-finance) */
.mx .mx-shots{display:grid;gap:14px}
.mx .mx-shots__row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
.mx .mx-shots__row .mx-num{min-width:2.1ch;font-size:54px;border-left:4px solid var(--tc);padding-left:10px}
.mx .mx-shots__acc{margin-top:2px;padding-top:12px;border-top:1px solid var(--line)}
.mx .mx-sb{display:flex;width:var(--w);height:38px;gap:2px;transform-origin:left;min-width:0}
.mx .mx-sb__seg{display:flex;align-items:center;justify-content:center;min-width:24px;background:var(--tc);color:var(--ti,#fff);font:900 20px/1 var(--fs)}
.mx .mx-sb__seg:first-child{border-radius:4px 0 0 4px}
.mx .mx-sb__seg:last-child{border-radius:0 4px 4px 0}
.mx .mx-sb__seg--off{background:color-mix(in srgb,var(--tc) 48%,var(--panel));color:#fff}
.mx .mx-sb__seg--bl{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--tc) 38%,var(--panel)) 0 4px,var(--panel) 4px 8px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 70%,transparent);color:#fff}

/* ход матча: тёмный график с подсвеченными точками (arounda) */
.mx .mx-flow{gap:12px}
.mx .mx-flow__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.mx .mx-flow__plot{position:relative;padding:30px 14px 28px 32px}
.mx .mx-flow__in{position:relative;height:230px}
.mx .mx-flow__gy{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(255,255,255,.07)}
.mx .mx-flow__gy em{position:absolute;left:-28px;top:-8px;width:18px;text-align:right;font:900 15px/1 var(--fs);font-style:normal;color:var(--dim)}
.mx .mx-flow__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mx .mx-flow__svg path{fill:none;stroke:var(--tc);stroke-width:3;stroke-linejoin:round}
.mx .mx-flow__svg--area path{stroke:none}
.mx .mx-flow__svg--h{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--home) 75%,transparent))}
.mx .mx-flow__svg--a{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--away) 70%,transparent))}
.mx .mx-flow__ht{position:absolute;top:-22px;bottom:0;width:0;border-left:1px dashed rgba(255,207,77,.5)}
.mx .mx-flow__ht em{position:absolute;top:0;left:8px;font:600 11px/1 var(--fd);font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:var(--amber);white-space:nowrap}
.mx .mx-flow__ht--et{border-left-color:rgba(255,255,255,.28)}
.mx .mx-flow__ht--et em{color:var(--mut)}
.mx .mx-flow__pt{position:absolute;z-index:2;width:14px;height:14px;margin:0 0 -7px -7px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 3px var(--tc),0 0 16px var(--tc);transition:transform .2s var(--ease)}
.mx .mx-flow__pt b{position:absolute;right:13px;bottom:11px;font:900 19px/1 var(--fs);color:var(--fg);white-space:nowrap}
.mx .mx-flow__pt.is-hot{transform:scale(1.35)}
.mx .mx-flow__pt.is-hot b{color:var(--amber)}
.mx .mx-flow__var{position:absolute;z-index:2;width:13px;height:13px;margin:0 0 -6.5px -6.5px;border-radius:50%;border:2px dashed var(--tc);background:var(--bg)}
.mx .mx-flow__var b{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font:600 11px/1 var(--fd);letter-spacing:.08em;color:var(--mut)}
.mx .mx-flow__x{position:absolute;left:32px;right:14px;bottom:4px;height:16px}
.mx .mx-flow__x span{position:absolute;transform:translateX(-50%);font:900 14px/1 var(--fs);color:var(--dim)}
.mx .mx-flow__note{font-size:13px;color:var(--mut)}

.mx .mx-goals{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.mx .mx-goals>li{min-width:0;max-width:100%}
.mx .mx-gch{display:inline-flex;align-items:center;gap:10px;max-width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--tc);border-radius:6px;padding:6px 12px;text-decoration:none;color:var(--fg);transition:background-color .2s,border-color .2s}
.mx a.mx-gch:hover,.mx .mx-gch.is-hot{background:rgba(255,255,255,.09);border-color:var(--line-2)}
.mx .mx-gch__m{font:900 21px/1 var(--fs);color:var(--amber);white-space:nowrap}
.mx .mx-gch__n{display:grid;min-width:0;font:600 13px/1.2 var(--fd);text-transform:uppercase;letter-spacing:.03em}
.mx .mx-gch__n small{font:500 11.5px/1.3 var(--ft);text-transform:none;letter-spacing:0;color:var(--mut)}
.mx .mx-gch__s{font:900 19px/1 var(--fs);color:var(--fg);padding-left:10px;border-left:1px solid var(--line-2);white-space:nowrap}
.mx .mx-gch--var{background:transparent;border-style:dashed;box-shadow:none}
.mx .mx-gch--var .mx-gch__m{color:var(--mut)}
.mx .mx-gch--pen{background:rgba(255,207,77,.08);border-color:rgba(255,207,77,.45);box-shadow:none}
.mx .mx-gch--pen .mx-gch__s{color:var(--amber);border-left-color:rgba(255,207,77,.45)}

/* остальные цифры: сравнение полосами от центра */
.mx .mx-cls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mx .mx-cls--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mx .mx-cls--n1{grid-template-columns:minmax(0,1fr)}
.mx .mx-cl{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px 16px;min-width:0}
.mx .mx-cl__h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px;font:600 14px/1.2 var(--fd);text-transform:uppercase;letter-spacing:.08em;color:var(--fg)}
.mx .mx-cl__h span{font-size:12px;color:var(--dim);letter-spacing:.06em;text-align:right}
.mx .mx-cl__list{list-style:none;display:grid;gap:14px}
.mx .mx-cmp{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1fr) 52px;row-gap:7px;align-items:end}
.mx .mx-cmp__v{font:900 25px/1 var(--fs);color:var(--dim);white-space:nowrap}
.mx .mx-cmp__v--h{grid-column:1;grid-row:1}
.mx .mx-cmp__v--a{grid-column:4;grid-row:1;text-align:right}
.mx .mx-cmp[data-lead=h] .mx-cmp__v--h,.mx .mx-cmp[data-lead=a] .mx-cmp__v--a,.mx .mx-cmp[data-lead=""] .mx-cmp__v{color:var(--fg)}
.mx .mx-cmp__l{grid-column:2/4;grid-row:1;text-align:center;font-size:13px;line-height:1.25;color:var(--mut);padding:0 4px}
.mx .mx-cmp__bar{grid-row:2;height:6px;display:flex}
.mx .mx-cmp__bar--h{grid-column:1/3;justify-content:flex-end;padding-right:2px}
.mx .mx-cmp__bar--a{grid-column:3/5;padding-left:2px}
.mx .mx-cmp__bar i{display:block;height:100%;width:var(--w);border-radius:3px}
.mx .mx-cmp__bar--h i{background:var(--home);transform-origin:right}
.mx .mx-cmp__bar--a i{background:var(--away);transform-origin:left}

/* ---------- 2. Видео: экран + плейлист, плеер вставляется по нажатию ---------- */
.mx .mx-vid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:16px;align-items:stretch}
.mx .mx-vid--one{grid-template-columns:minmax(0,1fr)}
.mx .mx-vid--one .mx-scr{width:100%;max-width:1040px;justify-self:center}
.mx .mx-scr{position:relative;isolation:isolate;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0f3a26;box-shadow:0 0 0 1px var(--line),0 24px 44px -26px rgba(0,0,0,.8)}
.mx .mx-scr::before{content:"";position:absolute;inset:0;z-index:-2;background:repeating-linear-gradient(90deg,#1c6b45 0 8.333%,#17593a 8.333% 16.666%)}
.mx .mx-scr::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(85% 80% at 50% 45%,rgba(13,20,32,.35),rgba(13,20,32,.9) 100%),
             repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.mx .mx-scr.has-img::after{background:linear-gradient(180deg,rgba(13,20,32,.35),transparent 28%,transparent 52%,rgba(13,20,32,.82)),
             repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.mx .mx-scr__pitch{position:absolute;inset:7% 6%;width:88%;height:86%;z-index:-1;fill:none;stroke:rgba(255,255,255,.4)}
.mx .mx-scr__pitch *{vector-effect:non-scaling-stroke;stroke-width:1.5}
.mx .mx-scr__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;object-fit:cover}
.mx .mx-scr.has-img .mx-scr__pitch,.mx .mx-scr.has-img .mx-scr__wm{display:none}
.mx .mx-scr__wm{position:absolute;z-index:1;right:3%;bottom:-5%;font:900 clamp(110px,20cqw,290px)/.8 var(--fs);color:transparent;-webkit-text-stroke:2px rgba(255,207,77,.4);pointer-events:none;white-space:nowrap}
.mx .mx-scr__bug{position:absolute;z-index:2;top:5%;left:3.5%;display:flex;align-items:stretch;background:var(--panel);border-radius:6px;overflow:hidden;font:600 15px/1 var(--fd);text-transform:uppercase;letter-spacing:.05em;box-shadow:0 8px 18px -10px rgba(0,0,0,.8)}
.mx .mx-scr__bt{display:flex;align-items:center;padding:6px 10px;box-shadow:inset 0 -3px 0 var(--tc)}
.mx .mx-scr__bug b{display:flex;align-items:center;background:var(--amber);color:var(--ink);font:900 21px/1 var(--fs);padding:5px 10px}
.mx .mx-scr__bug em{display:flex;align-items:center;font:900 18px/1 var(--fs);font-style:normal;color:var(--amber);padding:5px 10px;border-left:1px solid var(--line-2)}
.mx .mx-scr__bug em:empty{display:none}
.mx .mx-scr__play{position:absolute;z-index:2;left:50%;top:44%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;display:grid;place-items:center;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px rgba(0,0,0,.35);transition:transform .2s var(--ease),background-color .2s}
.mx .mx-scr__play i{width:0;height:0;border-left:25px solid var(--fg);border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:7px}
.mx .mx-scr__play:hover{background:rgba(255,255,255,.22);transform:scale(1.05)}
.mx .mx-scr__play:active{transform:scale(.97)}
.mx .mx-scr__ext{position:absolute;z-index:3;left:50%;top:calc(44% + 54px);transform:translateX(-50%);width:max-content;max-width:84%;background:var(--panel);color:var(--fg);font:600 12px/1.3 var(--fd);text-transform:uppercase;letter-spacing:.06em;padding:7px 12px;border-radius:8px;border-left:3px solid var(--amber);text-align:center}
.mx .mx-scr__lt{position:absolute;z-index:2;left:3.5%;bottom:7%;display:grid;justify-items:start;max-width:82%}
.mx .mx-scr__lt b{font:600 clamp(16px,2.1cqw,28px)/1.1 var(--fd);text-transform:uppercase;letter-spacing:.04em;background:var(--panel);border-left:5px solid var(--tc);padding:8px 18px 8px 12px;color:var(--fg)}
.mx .mx-scr__lt span{font:600 clamp(11px,1.05cqw,14px)/1.2 var(--fd);text-transform:uppercase;letter-spacing:.06em;background:var(--amber);color:var(--ink);padding:5px 12px 5px 17px}
.mx .mx-scr__frame{position:absolute;inset:0;z-index:6;width:100%;height:100%;border:0;background:#000}
.mx .mx-scr.is-playing .mx-scr__play,.mx .mx-scr.is-playing .mx-scr__ext{display:none}

.mx .mx-pl{contain:size;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.mx .mx-pl__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 0 6px}
.mx .mx-pl__h{font:600 15px/1 var(--fd);text-transform:uppercase;letter-spacing:.08em;color:var(--fg)}
.mx .mx-pl__h span{margin-left:8px;font-size:13px;color:var(--dim);letter-spacing:.04em}
.mx .mx-pl__h span b{font:900 17px var(--fs);color:var(--amber)}
.mx .mx-pl__list{list-style:none;display:grid;align-content:start;gap:6px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;padding:2px 4px 2px 2px}
.mx .mx-pl__list>li{scroll-snap-align:start;min-width:0}
.mx .mx-pl__list{-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.mx .mx-pl__it{width:100%;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:12px;padding:6px;border-radius:8px;border:1px solid transparent;background:transparent;text-align:left;cursor:pointer;transition:background-color .2s,border-color .2s}
.mx .mx-pl__it:hover{background:rgba(255,255,255,.05)}
.mx .mx-pl__it[aria-pressed=true]{background:rgba(255,207,77,.08);border-color:rgba(255,207,77,.5)}
.mx .mx-pl__it:focus-visible{outline-offset:-2px}
.mx .mx-pl__th{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;display:grid;place-items:center;background:repeating-linear-gradient(90deg,#1c6b45 0 12.5%,#17593a 12.5% 25%);box-shadow:inset 0 -3px 0 var(--tc)}
.mx .mx-pl__th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mx .mx-pl__th::after{content:"";position:absolute;inset:0;background:rgba(13,20,32,.58);box-shadow:inset 0 -3px 0 var(--tc)}
.mx .mx-pl__th.has-img::after{background:linear-gradient(180deg,transparent 40%,rgba(13,20,32,.75))}
.mx .mx-pl__th b{position:relative;z-index:1;font:900 25px/1 var(--fs);color:var(--amber);white-space:nowrap}
.mx .mx-pl__th.has-img b{align-self:end;justify-self:start;margin:0 0 6px 7px;font-size:17px}
.mx .mx-pl__tx{display:grid;gap:2px;min-width:0}
.mx .mx-pl__tx b{font:600 14px/1.2 var(--fd);text-transform:uppercase;letter-spacing:.03em;color:var(--fg)}
.mx .mx-pl__tx span{font-size:12.5px;line-height:1.35;color:var(--mut)}

/* заглушка видео: экран без кнопки воспроизведения, карточки «что появится» не нажимаются */
.mx .mx-ex--scr{position:absolute;z-index:2;top:5%;right:3.5%;background:rgba(13,20,32,.72)}
.mx .mx-scr__soon{position:absolute;z-index:2;left:50%;top:44%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1px dashed rgba(255,207,77,.6);background:rgba(13,20,32,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.mx .mx-scr__soon svg{width:38px;height:38px;fill:none;stroke:var(--amber);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mx .mx-pl__it--soon{grid-template-columns:96px minmax(0,1fr) auto;cursor:default}
.mx .mx-pl__it--soon:hover{background:transparent}
.mx .mx-pl__it--soon .mx-pl__th{opacity:.85}
.mx .mx-pl__list:focus-visible{outline-offset:-2px}

/* заглушка фото: три пустых стеклянных кадра дугой, как у карусели */
.mx .mx-ph0{display:flex;justify-content:center;align-items:center;padding:18px 0 30px;min-width:0}
.mx .mx-ph0__card{flex:0 0 min(400px,33%);padding:8px;border-radius:20px;min-width:0;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06) 45%,rgba(255,255,255,.09));
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.mx .mx-ph0__card.is-c{position:relative;z-index:2;flex-basis:min(480px,38%)}
.mx .mx-ph0__card.is-l{transform:perspective(1400px) translateX(6%) translateZ(-110px) rotateY(-26deg);opacity:.62}
.mx .mx-ph0__card.is-r{transform:perspective(1400px) translateX(-6%) translateZ(-110px) rotateY(26deg);opacity:.62}
.mx .mx-ph0__fr{display:grid;place-items:center;align-content:center;gap:12px;aspect-ratio:16/10;border-radius:14px;border:1px dashed rgba(255,255,255,.16);
  background:radial-gradient(70% 70% at 50% 40%,rgba(255,255,255,.06),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),#121a2b}
.mx .mx-ph0__fr svg{width:52px;height:52px;fill:none;stroke:rgba(244,244,244,.5);stroke-width:1.4;stroke-linejoin:round}
.mx .mx-ph0__card.is-c .mx-ph0__fr svg{stroke:var(--amber)}

/* ---------- 3. Группа: турнирная графика ---------- */
.mx .mx-group__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.mx .mx-gt-wrap,.mx .mx-gms{background:var(--panel);border:1px solid var(--line);border-radius:12px;min-width:0}
.mx .mx-gt-wrap{padding:6px 12px 10px}
.mx .mx-gt{width:100%;border-collapse:separate;border-spacing:0 6px}
.mx .mx-gt th,.mx .mx-gt td{padding:0 8px;height:54px;text-align:center;font:500 15px/1 var(--ft);color:var(--mut);white-space:nowrap}
.mx .mx-gt thead th{height:28px;font:600 12px/1 var(--fd);text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.mx .mx-gt__cap{caption-side:bottom;padding:4px 4px 2px;text-align:left;font-size:12px;color:var(--dim)}
.mx .mx-gt abbr{text-decoration:none;cursor:help}
.mx .mx-gt tbody td,.mx .mx-gt tbody th{background:rgba(255,255,255,.03)}
.mx .mx-gt tbody tr.is-hot td,.mx .mx-gt tbody tr.is-hot th{background:rgba(255,255,255,.085);color:var(--fg)}
.mx .mx-gt tbody td:first-child{border-radius:8px 0 0 8px;box-shadow:inset 4px 0 0 var(--tc)}
.mx .mx-gt tbody td:last-child{border-radius:0 8px 8px 0}
.mx .mx-gt__pos b{font:900 27px/1 var(--fs);color:var(--fg)}
.mx .mx-gt .mx-gt__team{text-align:left;width:100%;white-space:normal}
.mx .mx-gt__team a,.mx .mx-gt__tn{display:inline-flex;align-items:center;gap:10px;max-width:100%;font:600 17px/1.1 var(--fd);text-transform:uppercase;letter-spacing:.03em;color:var(--fg);text-decoration:none}
.mx .mx-gt__team span{min-width:0}
.mx .mx-gt__team img{width:28px;height:19px;object-fit:cover;border-radius:2px;flex:none}
.mx .mx-gt__team a:hover span{color:var(--amber)}
.mx .mx-gt__pts b{display:inline-grid;place-items:center;min-width:44px;height:36px;border-radius:6px;background:rgba(255,255,255,.06);font:900 27px/1 var(--fs);color:var(--amber)}
.mx .mx-gt tr.is-hot .mx-gt__pts b{background:rgba(255,207,77,.16)}

.mx .mx-gms{padding:14px 16px 12px}
.mx .mx-gm__list{list-style:none;display:grid;gap:4px}
.mx .mx-gm{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;column-gap:8px}
.mx .mx-gm__d{font:600 12px/1.2 var(--fd);text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.mx .mx-gm__row{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;padding:7px 10px;border-radius:8px;text-decoration:none;color:var(--mut);transition:background-color .2s}
.mx a.mx-gm__row:hover{background:rgba(255,255,255,.06)}
.mx .mx-gm__t{display:flex;align-items:center;gap:8px;font:500 14px/1.2 var(--ft);min-width:0}
.mx .mx-gm__t span{min-width:0}
.mx .mx-gm__t--h{justify-content:flex-end;text-align:right}
.mx .mx-gm__t img{width:21px;height:14px;object-fit:cover;border-radius:2px;flex:none}
.mx .mx-gm__t.is-our{color:var(--fg);font-weight:700}
.mx .mx-gm__s{min-width:54px;text-align:center;padding:5px 8px;border-radius:5px;background:rgba(255,255,255,.06);font:900 22px/1 var(--fs);color:var(--fg)}
.mx .mx-gm.is-cur .mx-gm__row{background:rgba(255,207,77,.09);box-shadow:inset 0 0 0 1px rgba(255,207,77,.55)}
.mx .mx-gm.is-cur .mx-gm__s{background:var(--amber);color:var(--ink)}
.mx .mx-gm__here{grid-column:2;justify-self:center;margin:2px 0 4px;font:600 10.5px/1 var(--fd);text-transform:uppercase;letter-spacing:.12em;color:var(--amber)}

/* ---------- 3б. Путь команд в плей-офф: та же графика, что форма ---------- */
.mx .mx-path__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.mx .mx-pt{display:grid;gap:12px;align-content:start;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px 18px;box-shadow:inset 4px 0 0 var(--tc)}
.mx .mx-pr__list{list-style:none;display:grid;gap:4px}
.mx .mx-pr{min-width:0}
.mx .mx-pr__row{display:grid;grid-template-columns:minmax(0,104px) 32px minmax(52px,auto) minmax(0,1fr);align-items:center;gap:10px;padding:6px 8px;border-radius:8px;text-decoration:none;color:var(--mut);transition:background-color .2s}
.mx a.mx-pr__row:hover{background:rgba(255,255,255,.06)}
.mx .mx-pr__st{display:grid;gap:2px;min-width:0;font:600 12px/1.15 var(--fd);text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.mx .mx-pr__st small{font:500 11px/1.2 var(--ft);text-transform:none;letter-spacing:0;color:var(--dim)}
.mx .mx-pr .mx-fp__r{width:32px;height:32px;border-radius:5px;font-size:16px}
.mx .mx-pr__s{display:flex;align-items:baseline;gap:4px;font:900 22px/1 var(--fs);color:var(--fg);white-space:nowrap}
.mx .mx-pr__s small{font:600 10px/1 var(--fd);text-transform:uppercase;letter-spacing:.04em;color:var(--amber)}
.mx .mx-pr__o{display:flex;align-items:center;gap:7px;min-width:0;font:500 14px/1.2 var(--ft);color:var(--fg)}
.mx .mx-pr__o img{width:21px;height:14px;object-fit:cover;border-radius:2px;flex:none}
.mx .mx-pr.is-cur .mx-pr__row{background:rgba(255,207,77,.09);box-shadow:inset 0 0 0 1px rgba(255,207,77,.55)}
.mx .mx-pr.is-cur .mx-pr__st{color:var(--amber)}
.mx .mx-pr__here{background:transparent;box-shadow:inset 0 0 0 2px var(--amber)}
.mx .mx-pr__here::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--amber)}

/* ---------- 4. Форма и личные встречи ---------- */
.mx .mx-form__grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px;align-items:stretch}
.mx .mx-form__teams{display:grid;gap:12px;align-content:start;min-width:0}
.mx .mx-ft{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px 14px 18px;box-shadow:inset 4px 0 0 var(--tc)}
.mx .mx-ft__team{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:3px;align-items:center;min-width:0}
.mx .mx-ft__team img{grid-row:span 2;width:30px;height:20px;object-fit:cover;border-radius:2px}
.mx .mx-ft__team b{font:600 19px/1.1 var(--fd);text-transform:uppercase;letter-spacing:.03em;color:var(--fg)}
.mx .mx-ft__team span{font-size:12.5px;line-height:1.3;color:var(--mut)}
.mx .mx-ft__row{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.mx .mx-fp{min-width:0}
.mx .mx-fp a,.mx .mx-fp__in{position:relative;display:grid;justify-items:center;gap:6px;padding:8px 4px;border-radius:8px;border:1px solid transparent;text-decoration:none;color:var(--fg);text-align:center;transition:background-color .2s,border-color .2s}
.mx .mx-fp a:hover{background:rgba(255,255,255,.05);border-color:var(--line-2)}
.mx .mx-fp__r{display:grid;place-items:center;width:46px;height:46px;border-radius:6px;font:600 22px/1 var(--fd)}
.mx .mx-fp--w .mx-fp__r,.mx .mx-form__key .mx-fp--w b{background:var(--amber);color:var(--ink)}
.mx .mx-fp--d .mx-fp__r,.mx .mx-form__key .mx-fp--d b{background:#3b4262;color:var(--fg)}
.mx .mx-fp--l .mx-fp__r,.mx .mx-form__key .mx-fp--l b{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px rgba(244,244,244,.6)}
.mx .mx-fp--n .mx-fp__r{background:rgba(255,255,255,.06);color:var(--mut)}
.mx .mx-fp.is-last .mx-fp__r{outline:2px solid var(--fg);outline-offset:3px}
.mx .mx-fp__m{display:grid;justify-items:center;gap:3px;min-width:0;max-width:100%}
.mx .mx-fp__m b{font:900 21px/1 var(--fs)}
.mx .mx-fp__m b small{margin-left:4px;font:600 10px/1 var(--fd);text-transform:uppercase;letter-spacing:.04em;color:var(--amber)}
.mx .mx-fp__m span{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 5px;max-width:100%;font-size:12px;line-height:1.2;color:var(--mut)}
.mx .mx-fp__m img{width:18px;height:12px;object-fit:cover;border-radius:1px}
.mx .mx-fp__d{font-size:11px;color:var(--dim)}
.mx .mx-fp-note{grid-column:2/-1;align-self:center;padding:8px 0 8px 14px;border-left:1px dashed var(--line-2);font-size:13px;line-height:1.4;color:var(--mut)}
.mx .mx-fp-note--all{grid-column:1/-1}
.mx .mx-form__key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:2px 4px;font-size:12.5px;color:var(--mut)}
.mx .mx-form__key span{display:inline-flex;align-items:center;gap:6px}
.mx .mx-form__key b{display:grid;place-items:center;width:22px;height:22px;border-radius:4px;font:600 13px/1 var(--fd)}
.mx .mx-form__dir{margin-left:auto}

.mx .mx-h2h{position:relative;overflow:hidden;display:grid;gap:14px;align-content:center;justify-items:center;text-align:center;padding:24px 20px;border-radius:12px;border:1px solid var(--line-2);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.08);min-width:0}
.mx .mx-h2h__flags{display:flex;align-items:center;gap:18px}
.mx .mx-h2h__flags img{width:60px;height:40px;object-fit:cover;border-radius:4px;box-shadow:0 0 0 2px var(--tc),0 0 26px color-mix(in srgb,var(--tc) 55%,transparent)}
.mx .mx-h2h__flags b{font:900 42px/1 var(--fs);color:var(--amber)}
.mx .mx-h2h__t{font:600 30px/1.05 var(--fd);text-transform:uppercase;letter-spacing:.03em;color:var(--fg);max-width:15ch}
.mx .mx-h2h__p{max-width:36ch;font-size:14px;color:var(--mut)}
.mx .mx-h2h__tot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.mx .mx-h2h__tot div{display:grid;gap:6px;padding:10px 6px 12px;border-radius:8px;background:var(--panel);box-shadow:inset 0 -3px 0 var(--tc);min-width:0}
.mx .mx-h2h__tot dt{font:600 11px/1.2 var(--fd);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.mx .mx-h2h__tot dd{font:900 40px/1 var(--fs);color:var(--fg)}
.mx .mx-h2h__n{font-size:12px;color:var(--dim)}
.mx .mx-h2h__list{list-style:none;display:grid;gap:4px;width:100%;padding-top:12px;border-top:1px solid var(--line)}
.mx .mx-h2h__list a,.mx .mx-h2h__row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"d d d" "h s a";align-items:center;gap:4px 8px;padding:7px 8px;border-radius:8px;background:var(--panel);text-decoration:none;color:var(--mut);transition:background-color .2s}
.mx .mx-h2h__list a:hover{background:var(--panel-2)}
.mx .mx-h2h__d{grid-area:d;font:600 11px/1 var(--fd);letter-spacing:.06em;color:var(--dim)}
.mx .mx-h2h__tm{grid-area:a;display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;line-height:1.2;text-align:left}
.mx .mx-h2h__tm--h{grid-area:h;justify-content:flex-end;text-align:right}
.mx .mx-h2h__tm img{width:18px;height:12px;object-fit:cover;border-radius:1px;flex:none}
.mx .mx-h2h__tm span{min-width:0}
.mx .mx-h2h__s{grid-area:s;display:flex;align-items:baseline;gap:4px;font:900 20px/1 var(--fs);color:var(--fg);white-space:nowrap}
.mx .mx-h2h__s small{font:600 10px/1 var(--fd);text-transform:uppercase;color:var(--amber)}

/* ---------- 5. Фото: стеклянная карусель (code.xr, concepts/2026-10-10-glass-carousel) ---------- */
.mx .mx-photo{padding-bottom:20px}
.mx .mx-cf__amb{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mx .mx-cf__amb i{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(60px) saturate(1.2);opacity:0;transition:opacity .3s ease}
.mx .mx-cf__amb i.on{opacity:.34}
.mx .mx-cf__amb::after{content:"";position:absolute;inset:0;background:radial-gradient(75% 70% at 50% 50%,rgba(13,20,32,.15),rgba(13,20,32,.8) 100%)}
.mx .mx-cf{position:relative;display:grid;gap:12px}
.mx .mx-cf::before{content:"";position:absolute;left:50%;bottom:44px;width:min(900px,100%);height:110px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.1),transparent 70%);pointer-events:none}
.mx .mx-cf__track{--cw:min(540px,62cqw);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);position:relative;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;padding:22px calc(50% - var(--cw) / 2) 30px;scrollbar-width:none;border-radius:14px}
.mx .mx-cf--one .mx-cf__track{-webkit-mask-image:none;mask-image:none}
.mx .mx-cf__track::-webkit-scrollbar{display:none}
.mx .mx-cf__track:focus-visible{outline-offset:-2px}
.mx .mx-cf__card{position:relative;flex:0 0 var(--cw);margin:0;scroll-snap-align:center;padding:8px;border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.1) 45%,rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 60px -28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  transform:perspective(1400px) translateX(var(--tx,0px)) translateZ(var(--tz,0px)) rotateY(var(--ry,0deg));opacity:var(--op,1);
  transition:transform .18s var(--ease),opacity .18s,border-color .2s}
.mx .mx-cf__card.is-center{border-color:rgba(255,255,255,.3)}
.mx .mx-cf__ph{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;border-radius:14px;overflow:hidden;background:#15161b;cursor:pointer}
.mx .mx-cf__card.is-center .mx-cf__ph{cursor:zoom-in}
.mx .mx-cf__ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.mx .mx-cf__card.is-center .mx-cf__ph:hover img{transform:scale(1.04)}
.mx .mx-cf__ph:focus-visible{outline-offset:-3px}
.mx .mx-cf__cap{display:grid;gap:4px;padding:12px 8px 6px;transition:opacity .2s}
.mx .mx-cf__card:not(.is-center) .mx-cf__cap{opacity:.55}
.mx .mx-cf__t{font:600 16px/1.25 var(--fd);text-transform:uppercase;letter-spacing:.02em;color:var(--fg)}
.mx .mx-cf__cr{font-size:12.5px;line-height:1.4;color:var(--mut);overflow-wrap:anywhere}
.mx .mx-cf__cr a{color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.mx .mx-cf__dock{justify-self:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:100%;padding:6px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 30px -18px rgba(0,0,0,.8)}
.mx .mx-cf__dots{display:flex;gap:7px;padding:0 6px}
.mx .mx-cf__dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);transition:background-color .2s,transform .2s var(--ease)}
.mx .mx-cf__dots i.on{background:var(--amber);transform:scale(1.3)}
.mx .mx-cf__pos,.mx .mx-lb__pos{font:600 13px/1 var(--fd);letter-spacing:.06em;color:var(--mut);padding:0 6px;white-space:nowrap}
.mx .mx-cf__pos b,.mx .mx-lb__pos b{font:900 19px/1 var(--fs);color:var(--fg)}
.mx .mx-cf__open{height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--amber);color:var(--ink);font:600 13px/1 var(--fd);text-transform:uppercase;letter-spacing:.07em;cursor:pointer;transition:transform .15s var(--ease),filter .2s}
.mx .mx-cf__open:hover{filter:brightness(1.08)}
.mx .mx-cf__open:active{transform:scale(.97)}

/* фото крупно */
.mx .mx-lb{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--fg);font:400 15px/1.5 var(--ft)}
.mx .mx-lb::backdrop{background:rgba(5,8,14,.94)}
.mx .mx-lb__box{position:relative;width:min(1280px,calc(100vw - 32px));height:100%;margin:0 auto;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:60px 0 18px}
.mx .mx-lb__stage{min-height:0;display:grid}
.mx .mx-lb__img{width:100%;height:100%;min-height:0;object-fit:contain}
.mx .mx-lb__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:12px 16px;border-radius:12px;background:var(--panel);border-left:4px solid var(--amber)}
.mx .mx-lb__cap{display:grid;gap:4px;min-width:0;font:600 16px/1.3 var(--fd);text-transform:uppercase;letter-spacing:.02em}
.mx .mx-lb__cr{font:400 13px/1.45 var(--ft);text-transform:none;letter-spacing:0;color:var(--mut);overflow-wrap:anywhere}
.mx .mx-lb__cr a{color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.mx .mx-lb__ctl{display:flex;align-items:center;gap:8px}
.mx .mx-lb__x{position:absolute;top:10px;right:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--panel);cursor:pointer}
.mx .mx-lb__x::before,.mx .mx-lb__x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;background:var(--fg);transform:translate(-50%,-50%) rotate(45deg)}
.mx .mx-lb__x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.mx .mx-lb__x:hover{border-color:var(--amber)}

/* ---------- 6. Турнир ---------- */
.mx .mx-cup__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.mx .mx-cup__grid--one{grid-template-columns:minmax(0,1fr)}
.mx .mx-scs,.mx .mx-yrs{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px 16px;min-width:0}
.mx .mx-sc__list{list-style:none;display:grid;gap:6px}
.mx .mx-sc{display:grid;grid-template-columns:28px 44px minmax(0,1fr) minmax(60px,1.1fr) 44px;align-items:center;gap:12px;padding:6px 10px 6px 6px;border-radius:8px;background:rgba(255,255,255,.03)}
.mx .mx-sc:first-child{background:rgba(255,207,77,.08)}
.mx .mx-sc__i{font:900 25px/1 var(--fs);color:var(--dim);text-align:center}
.mx .mx-sc__ava{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#22305a;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.mx .mx-sc__ava img{width:100%;height:100%;object-fit:cover}
.mx .mx-sc__ava.no-img::before{content:attr(data-ini);font:600 15px/1 var(--fd);color:var(--fg)}
.mx .mx-sc__n{font:600 16px/1.2 var(--fd);text-transform:uppercase;letter-spacing:.02em;color:var(--fg);text-decoration:none;min-width:0}
.mx a.mx-sc__n:hover{color:var(--amber)}
.mx .mx-sc__bar{position:relative;height:6px}
.mx .mx-sc__bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:3px;background:linear-gradient(90deg,rgba(255,207,77,.25),var(--amber));box-shadow:0 0 12px rgba(255,207,77,.35);transform-origin:left}
.mx .mx-sc__g{font:900 31px/1 var(--fs);color:var(--amber);text-align:right}
.mx .mx-yr__list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px}
.mx .mx-yr__list--long{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.mx .mx-yr{display:grid;place-items:center;height:42px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.035);font:900 21px/1 var(--fs);color:var(--mut);text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
.mx a.mx-yr:hover{color:var(--fg);border-color:var(--line-2);background:rgba(255,255,255,.08)}
.mx .mx-yr.is-cur{background:var(--amber);border-color:var(--amber);color:var(--ink)}

/* ---------- 7. Статьи о матче ---------- */
.mx .mx-arts{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px}
.mx .mx-arts--n1{grid-template-columns:minmax(0,1fr)}
.mx .mx-arts--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mx .mx-art{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);min-width:0;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:12px;transition:border-color .2s}
.mx .mx-art:hover{border-color:var(--line-2)}
.mx .mx-art--lead{grid-row:span 2;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(230px,1fr) auto}
.mx .mx-arts--n1 .mx-art--lead{grid-row:auto}
.mx .mx-art__cv{position:relative;display:grid;place-items:center;min-height:160px;overflow:hidden;
  background:radial-gradient(80% 90% at 25% 15%,color-mix(in srgb,var(--tc) 38%,transparent),transparent 70%),
             repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),#10172a}
.mx .mx-art__cv img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.mx .mx-art__cv b{font:900 clamp(52px,6cqw,96px)/.9 var(--fs);letter-spacing:.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:2px var(--amber)}
.mx .mx-art--lead .mx-art__cv b{font-size:clamp(96px,13cqw,200px);color:var(--amber);-webkit-text-stroke:0;text-shadow:0 0 44px rgba(255,207,77,.35)}
.mx .mx-art__b{display:grid;gap:8px;align-content:start;padding:16px 18px 18px;min-width:0}
.mx .mx-art__k{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:600 12px/1 var(--fd);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
.mx .mx-art__t{font:600 21px/1.15 var(--fd);text-transform:uppercase;letter-spacing:.02em;color:var(--fg);overflow-wrap:anywhere}
.mx .mx-art__t a{text-decoration:none}
.mx .mx-art__t a::after{content:"";position:absolute;inset:0;z-index:1}
.mx .mx-art__t a:hover{color:var(--amber)}
.mx .mx-art--lead .mx-art__t{font-size:28px}
/* заглушка статей: темы будущих статей, без ссылок; обложки - контурные значки темы */
.mx .mx-art--soon:hover{border-color:var(--line)}
.mx .mx-art__cv svg{position:relative;width:clamp(64px,7cqw,104px);height:auto;fill:none;stroke:var(--amber);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 14px rgba(255,207,77,.25))}
.mx .mx-art__l{font-size:14px;color:var(--mut)}

/* ---------- 8. Теги: лента титров ---------- */
.mx .mx-crs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows,4),auto);grid-auto-flow:column;column-gap:48px;padding:6px 0}
.mx .mx-cr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:20px;align-items:baseline;padding:11px 0;min-width:0}
.mx .mx-cr dt{text-align:right;font:600 13px/1.4 var(--fd);text-transform:uppercase;letter-spacing:.14em;color:var(--dim)}
.mx .mx-cr dd{min-width:0}
.mx .mx-cr dd ul{list-style:none;display:grid;gap:5px}
.mx .mx-cr a,.mx .mx-cr span{font:600 18px/1.3 var(--fd);text-transform:uppercase;letter-spacing:.03em}
.mx .mx-cr a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(255,207,77,.45);text-decoration-thickness:1px;text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
.mx .mx-cr a:hover{color:var(--amber);text-decoration-color:var(--amber)}
.mx .mx-cr span{color:var(--mut)}
.mx .mx-tags__end{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;padding-top:14px;border-top:1px solid var(--line);font:600 14px/1 var(--fd);text-transform:uppercase;letter-spacing:.12em;color:var(--dim);text-align:center}
.mx .mx-tags__end b{font:900 32px/1 var(--fs);color:var(--amber)}

/* ---------- появление (сдержанное, 100-300 мс) ---------- */
@media (prefers-reduced-motion:no-preference){
  .mx.js-anim [data-mx-reveal]{opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .mx.js-anim [data-mx-reveal].is-in{opacity:1;transform:none}
  .mx.js-anim .mx-lt[data-mx-reveal]{opacity:1;transform:none}
  .mx.js-anim .mx-lt .mx-lt__t{clip-path:inset(0 100% 0 0);transition:clip-path .3s var(--ease)}
  .mx.js-anim .mx-lt .mx-lt__s{clip-path:inset(0 100% 0 0);transition:clip-path .22s var(--ease) .12s}
  .mx.js-anim .mx-lt.is-in .mx-lt__t,.mx.js-anim .mx-lt.is-in .mx-lt__s{clip-path:inset(0)}
  .mx.js-anim .mx-cmp__bar i,.mx.js-anim .mx-xg__bar,.mx.js-anim .mx-sb,.mx.js-anim .mx-sc__bar::before{transform:scaleX(0);transition:transform .3s var(--ease) .1s}
  .mx.js-anim .is-in .mx-cmp__bar i,.mx.js-anim .is-in .mx-xg__bar,.mx.js-anim .is-in .mx-sb,.mx.js-anim .is-in .mx-sc__bar::before{transform:none}
  .mx.js-anim .mx-gauge__arc,.mx.js-anim .mx-gauge__glow{stroke-dashoffset:var(--d);transition:stroke-dashoffset .3s var(--ease) .1s}
  .mx.js-anim .is-in .mx-gauge__arc,.mx.js-anim .is-in .mx-gauge__glow{stroke-dashoffset:0}
  .mx.js-anim .mx-flow__svg{clip-path:inset(0 100% 0 0);transition:clip-path .3s var(--ease) .1s}
  .mx.js-anim .mx-flow.is-in .mx-flow__svg{clip-path:inset(-20px -20px -20px -20px)}
  .mx .mx-scr__lt.is-swap b{animation:mxWipe .25s var(--ease)}
  .mx .mx-scr__lt.is-swap span{animation:mxWipe .22s var(--ease) .08s backwards}
}
@keyframes mxWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){
  .mx *,.mx *::before,.mx *::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .mx .mx-cf__track{scroll-behavior:auto}
}
@media (prefers-reduced-transparency:reduce){
  .mx .mx-cf__card,.mx .mx-cf__dock,.mx .mx-scr__play,.mx .mx-scr__soon,.mx .mx-ph0__card{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--panel-2)}
}

/* ---------- адаптив: по ширине обёртки, как у доски ---------- */
@container mx (max-width:1100px){
  .mx .mx-num{font-size:56px}
  .mx .mx-num--m{font-size:40px}
  .mx .mx-shots__row .mx-num{font-size:46px}
  .mx .mx-ft{grid-template-columns:150px minmax(0,1fr)}
  .mx .mx-sc{grid-template-columns:26px 40px minmax(0,1fr) minmax(40px,.8fr) 40px;gap:10px}
  .mx .mx-group__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
  .mx .mx-gm{grid-template-columns:54px minmax(0,1fr);column-gap:4px}
  .mx .mx-gm__row{gap:8px;padding:7px 6px}
  .mx .mx-gm__t{font-size:13.5px;gap:6px}
  .mx .mx-pl__it{grid-template-columns:84px minmax(0,1fr)}
  .mx .mx-pl__it--soon{grid-template-columns:84px minmax(0,1fr);row-gap:5px}
  .mx .mx-pl__it--soon .mx-pl__th{grid-row:span 2}
  .mx .mx-pl__it--soon .mx-ex{grid-column:2;justify-self:start}
  .mx .mx-pr__row{grid-template-columns:minmax(0,88px) 30px minmax(48px,auto) minmax(0,1fr);gap:8px}
}
@container mx (max-width:900px){
  .mx .mx-keys,.mx .mx-keys--n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx .mx-keys--n1{grid-template-columns:minmax(0,1fr)}
  .mx .mx-keys--n3 .mx-key--shots{grid-column:1/-1}
  .mx .mx-cls,.mx .mx-cls--n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx .mx-cls--n1{grid-template-columns:minmax(0,1fr)}
  .mx .mx-cls--n3 .mx-cl:last-child{grid-column:1/-1}
  .mx .mx-vid,.mx .mx-group__grid,.mx .mx-form__grid,.mx .mx-cup__grid,.mx .mx-path__grid{grid-template-columns:minmax(0,1fr)}
  .mx .mx-pl{contain:none}
  .mx .mx-pl__list{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:8px;padding:2px 2px 8px}
  .mx .mx-pl__list>li{flex:0 0 min(300px,78%);scroll-snap-align:start}
  .mx .mx-pl__list{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .mx .mx-pl__it{height:100%}
  .mx .mx-ft{grid-template-columns:minmax(0,1fr)}
  .mx .mx-crs{column-gap:24px}
}
@container mx (max-width:700px){
  .mx .mx-keys,.mx .mx-keys--n2,.mx .mx-keys--n3,.mx .mx-cls,.mx .mx-cls--n2,.mx .mx-cls--n3,.mx .mx-arts,.mx .mx-arts--n2{grid-template-columns:minmax(0,1fr)}
  .mx .mx-keys--n3 .mx-key--shots,.mx .mx-cls--n3 .mx-cl:last-child{grid-column:auto}
  .mx .mx-art--lead{grid-row:auto}
  .mx .mx-crs{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  /* пустые кадры фото: лента со свайпом вместо дуги */
  .mx .mx-ph0{justify-content:flex-start;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:10px 2px 16px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .mx .mx-ph0::-webkit-scrollbar{display:none}
  .mx .mx-ph0__card,.mx .mx-ph0__card.is-c{flex:0 0 74%;transform:none;opacity:1;scroll-snap-align:start}
}
@container mx (max-width:560px){
  .mx .mx-sec{padding:12px;border-radius:12px;gap:14px}
  .mx .mx-lt__t{font-size:20px;padding:8px 16px 7px 12px}
  .mx .mx-lt__s{font-size:11px}
  .mx .mx-head__note{font-size:13px}
  .mx .mx-key{padding:14px}
  .mx .mx-num{font-size:52px}
  .mx .mx-legend--head{display:none}
  .mx .mx-flow__plot{padding:30px 6px 26px 26px}
  .mx .mx-flow__in{height:180px}
  .mx .mx-flow__gy em{left:-24px}
  .mx .mx-flow__x{left:26px;right:6px}
  .mx .mx-flow__x span{font-size:12px}
  .mx .mx-flow__ht--et em{display:none}
  .mx .mx-flow__pt b{right:auto;left:50%;bottom:13px;transform:translateX(-50%);font-size:15px}
  .mx .mx-flow__pt--end b{left:auto;right:-4px;transform:none}
  .mx .mx-cl{padding:12px 14px 14px}
  .mx .mx-scr__play{width:60px;height:60px;margin:-30px 0 0 -30px}
  .mx .mx-scr__play i{border-left-width:19px;border-top-width:11px;border-bottom-width:11px;margin-left:5px}
  .mx .mx-scr__ext{top:auto;bottom:38%;font-size:11px}
  .mx .mx-scr__bug{font-size:12px}
  .mx .mx-scr__bug b{font-size:17px;padding:4px 8px}
  .mx .mx-scr__bt{padding:5px 7px}
  .mx .mx-scr__lt{max-width:92%}
  .mx .mx-scr__lt b{font-size:14px;padding:6px 12px 6px 9px;border-left-width:4px}
  .mx .mx-scr__lt span{font-size:10.5px}
  .mx .mx-pl__it{grid-template-columns:80px minmax(0,1fr)}
  .mx .mx-pl__it--soon{grid-template-columns:80px minmax(0,1fr)}
  .mx .mx-scr__soon{width:60px;height:60px;margin:-30px 0 0 -30px}
  .mx .mx-scr__soon svg{width:28px;height:28px}
  .mx .mx-ex--l{font-size:11px;padding:7px 10px}
  .mx .mx-ph0__card,.mx .mx-ph0__card.is-c{flex-basis:82%;padding:6px;border-radius:16px}
  .mx .mx-gt-wrap{padding:4px 8px 8px}
  .mx .mx-gt th,.mx .mx-gt td{padding:0 4px;height:48px;font-size:14px}
  .mx .mx-gt th:nth-child(4),.mx .mx-gt td:nth-child(4),.mx .mx-gt th:nth-child(5),.mx .mx-gt td:nth-child(5),.mx .mx-gt th:nth-child(6),.mx .mx-gt td:nth-child(6){display:none}
  .mx .mx-gt__pos b,.mx .mx-gt__pts b{font-size:22px}
  .mx .mx-gt__pts b{min-width:34px;height:32px}
  .mx .mx-gt__team a,.mx .mx-gt__tn{gap:7px;font-size:14px}
  .mx .mx-gt__team img{width:22px;height:15px}
  .mx .mx-gms{padding:12px 10px 10px}
  .mx .mx-gm{grid-template-columns:minmax(0,1fr)}
  .mx .mx-gm__d{padding:6px 0 0 4px}
  .mx .mx-gm__d:empty{display:none}
  .mx .mx-gm__row,.mx .mx-gm__here{grid-column:1}
  .mx .mx-gm__row{gap:8px;padding:7px 6px}
  .mx .mx-gm__t{font-size:13px;gap:6px}
  .mx .mx-gm__s{min-width:46px;font-size:19px}
  .mx .mx-pt{padding:12px 10px 10px 14px}
  .mx .mx-pr__row{grid-template-columns:30px minmax(44px,auto) minmax(0,1fr);grid-template-areas:"st st st" "r s o";row-gap:6px;padding:7px 6px}
  .mx .mx-pr__st{grid-area:st;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
  .mx .mx-pr .mx-fp__r{grid-area:r;width:30px;height:30px;font-size:15px}
  .mx .mx-pr__s{grid-area:s;font-size:20px}
  .mx .mx-pr__o{grid-area:o;font-size:13px}
  .mx .mx-ft{padding:12px 10px 12px 14px;gap:10px}
  .mx .mx-ft__row{gap:4px}
  /* длинные имена соперников (клубы) в пяти колонках рвались бы посреди слова: три колонки, два ряда */
  .mx .mx-ft--long .mx-ft__row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:6px}
  .mx .mx-ft--long .mx-fp-note{grid-column:1/-1;border-left:0;border-top:1px dashed var(--line-2);padding:8px 0 0}
  .mx .mx-fp a,.mx .mx-fp__in{padding:6px 2px}
  .mx .mx-fp__r{width:40px;height:40px;font-size:19px}
  .mx .mx-fp__m b{font-size:18px}
  .mx .mx-fp__m b small{display:block;margin:2px 0 0}
  .mx .mx-fp__m span{font-size:11px}
  .mx .mx-fp__d{display:none}
  .mx .mx-fp-note{font-size:12px;padding-left:10px}
  .mx .mx-form__dir{margin-left:0}
  .mx .mx-h2h{padding:18px 14px}
  .mx .mx-h2h__t{font-size:24px}
  .mx .mx-h2h__tot dd{font-size:34px}
  .mx .mx-cf__track{--cw:76cqw;padding:16px calc(50% - var(--cw) / 2) 22px}
  .mx .mx-cf__t{font-size:14px}
  .mx .mx-cf__cr{font-size:12px}
  .mx .mx-cf__dock{gap:4px;padding:4px;flex-wrap:nowrap}
  .mx .mx-cf__dots{display:none}
  .mx .mx-cf__open{padding:0 14px;font-size:12px;height:44px}
  .mx .mx-arr{width:44px;height:44px}
  .mx .mx-scs,.mx .mx-yrs{padding:12px}
  .mx .mx-sc{grid-template-columns:24px 40px minmax(0,1fr) 34px;grid-template-areas:"i a n g" "i a b g";column-gap:10px;row-gap:6px;padding:6px 8px 6px 4px}
  .mx .mx-sc__i{grid-area:i}
  .mx .mx-sc__ava{grid-area:a;width:40px;height:40px}
  .mx .mx-sc__n{grid-area:n;font-size:14px}
  .mx .mx-sc__bar{grid-area:b}
  .mx .mx-sc__g{grid-area:g;font-size:27px}
  .mx .mx-yr__list{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}
  .mx .mx-yr__list--long{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))}
  .mx .mx-yr{height:38px;font-size:19px}
  .mx .mx-art{grid-template-columns:minmax(0,1fr)}
  .mx .mx-art--lead{grid-template-rows:auto auto}
  .mx .mx-art__cv{min-height:120px}
  .mx .mx-art--lead .mx-art__cv{min-height:170px}
  .mx .mx-art__t{font-size:18px}
  .mx .mx-art--lead .mx-art__t{font-size:21px}
  .mx .mx-cr{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:9px 0}
  .mx .mx-cr dt{font-size:11.5px;letter-spacing:.1em}
  .mx .mx-cr a,.mx .mx-cr span{font-size:15.5px}
}

/* =====================================================================
   Первый экран «Эфира» для матчей 2010-2017: «Выход команд» (efir-hero.blade.php).
   Перенос утверждённого макета output/match-page/e10-efir-hero (вариант Б). Все правила лежат под
   .mx--efir.mx-hero (вложенность CSS), нижние блоки и доску не трогают; подменю перекрашено через body:has(...).
   Токены те же, что у нижних блоков: #0d1420, #14142b, янтарь #ffcf4d, Oswald и Big Shoulders Display (только цифры).
   Цвета команд приходят из шаблона в style корня: --home/--away (светлые), --hf/--af (заливка плит), --ac (акцент розыгрыша).
   ===================================================================== */
.mx--efir.mx-hero{
  --bg:#0a101b; --panel:#14142b; --panel-2:#1a1f3c; --amber:#ffcf4d; --fg:#f4f4f4;
  --mut:rgba(244,244,244,.8); --dim:rgba(244,244,244,.64); --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.2); --ink:#14142b;
  --home:#e2403a; --away:#4c8fd6; --hf:#8a1f24; --af:#1f4f86; --ac:#ffcf4d;
  --fd:'Oswald','Arial Narrow',sans-serif; --fs:'Big Shoulders Display','Oswald',sans-serif; --ft:Manrope,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  container:mxh/inline-size; position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg); color:var(--fg); padding:0; margin:0;
  font:400 15px/1.5 var(--ft); font-variant-numeric:tabular-nums;

  *,*::before,*::after{box-sizing:border-box}
  :where(h1,p,ul,ol,dl,dd,figure){margin:0;padding:0}
  :where(a){color:inherit;text-decoration:none}
  :where(img){max-width:100%}
  :focus-visible{outline:2px solid var(--amber);outline-offset:3px}
  .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;clip-path:inset(50%);white-space:nowrap;border:0}

  /* ---------- фон: стадион в эфире ---------- */
  .mxh__fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  .mxh__fx>*{position:absolute;display:block}
  .mxh__glow{inset:0;
    background:radial-gradient(60% 95% at 0% 45%,color-mix(in srgb,var(--home) 30%,transparent),transparent 72%),
               radial-gradient(60% 95% at 100% 45%,color-mix(in srgb,var(--away) 30%,transparent),transparent 72%),
               radial-gradient(40% 50% at 50% 0%,rgba(120,150,210,.16),transparent 75%)}
  .mxh__scan{inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}

  /* полоса розыгрыша: цвета страны-хозяйки или янтарь «Эфира» */
  .mxh__stripe{position:absolute;left:0;right:0;top:0;height:5px;display:flex;z-index:2}
  .mxh__stripe i{flex:1;background:var(--c)}

  .mxh__wrap{position:relative;z-index:1;max-width:1520px;margin:0 auto;padding:22px 40px 30px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
  .mxh__wrap>*{min-width:0}

  /* ---------- верх: крошки, «нижняя треть» розыгрыша, статус ---------- */
  .mxh__crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:2px 0;font:600 12.5px/1.3 var(--ft);color:var(--dim)}
  .mxh__crumbs li{display:flex;align-items:center}
  .mxh__crumbs li+li::before{content:"";width:5px;height:5px;margin:0 10px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.7}
  .mxh__crumbs a{padding:6px 0;transition:color .2s var(--ease)}
  .mxh__crumbs a:hover{color:var(--amber)}

  .mxh__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
  .mxh__lt{display:grid;justify-items:start;min-width:0}
  .mxh__lt-t{font:600 24px/1.1 var(--fd);text-transform:uppercase;letter-spacing:.04em;color:var(--fg);background:var(--panel);border-left:4px solid var(--ac);padding:10px 22px 9px 14px;box-shadow:0 12px 24px -16px rgba(0,0,0,.8);transition:background .2s var(--ease)}
  .mxh__lt-s{font:600 12.5px/1.25 var(--fd);text-transform:uppercase;letter-spacing:.09em;color:var(--ink);background:var(--ac);padding:5px 14px 5px 18px;transition:filter .2s var(--ease)}
  .mxh__lt:hover .mxh__lt-t{background:var(--panel-2)}
  .mxh__lt:hover .mxh__lt-s{filter:brightness(1.08)}
  .mxh__status{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--fd);text-transform:uppercase;letter-spacing:.12em;color:var(--fg);border:1px solid var(--line-2);border-radius:999px;padding:8px 14px 7px;background:rgba(10,16,27,.55)}
  .mxh__status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}

  /* ---------- сцена: команды, счёт, авторы голов ---------- */
  .mxh__stage{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"hn sc an" "hs mk as";column-gap:0;align-items:stretch;position:relative}
  .mxh__h1{display:contents;font:inherit}
  .mxh__team--home{grid-area:hn} .mxh__team--away{grid-area:an}
  .mxh__score{grid-area:sc} .mxh__marks{grid-area:mk}
  .mxh__sc--home{grid-area:hs} .mxh__sc--away{grid-area:as}
  .mxh__team{display:grid;align-items:center;gap:6px 20px;min-width:0;color:var(--fg)}
  .mxh__flag{display:block;width:80px;height:53px;object-fit:cover;border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 10px 22px -6px rgba(0,0,0,.7)}
  .mxh__name{display:block;font:600 clamp(24px,3.1cqi,54px)/1.04 var(--fd);text-transform:uppercase;letter-spacing:.03em;overflow-wrap:break-word;min-width:0;text-shadow:0 2px 14px rgba(0,0,0,.45)}

  .mxh__score{display:grid;justify-items:center;align-content:center;gap:0}
  .mxh__digits{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4cqi,20px);font:900 var(--dsz,clamp(88px,12cqi,176px))/.84 var(--fs);letter-spacing:.01em}
  .mxh__digits .d{display:block;animation:mxhRise .8s var(--ease) both}
  .mxh__digits .d--a{animation-delay:.12s}
  .mxh__digits .c{display:grid;gap:.12em;animation:mxhRise .8s var(--ease) .06s both}
  .mxh__digits .c::before,.mxh__digits .c::after{content:"";width:.11em;height:.11em;border-radius:50%;background:currentColor;opacity:.9}

  .mxh__marks{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:6px;padding-top:12px;width:0;min-width:100%}
  .mxh__mark{font:600 11.5px/1 var(--fd);text-transform:uppercase;letter-spacing:.1em;color:var(--fg);background:rgba(26,31,60,.92);border:1px solid var(--line-2);border-radius:999px;padding:6px 11px 5px;white-space:nowrap}
  .mxh__mark b{font-weight:700;color:var(--amber);margin-left:.4em;letter-spacing:.06em}

  /* авторы голов: плашки нижней трети, кромка цветом команды */
  .mxh__sc{list-style:none;display:flex;flex-direction:column;gap:5px;padding-top:12px;min-width:0}
  .mxh__sc li{display:flex;max-width:100%}
  .mxh__sc a,.mxh__sc .mxh__who{display:inline-flex;align-items:baseline;gap:10px;max-width:100%;background:rgba(20,20,43,.9);color:var(--fg);padding:6px 14px 5px 10px;font:600 15px/1.25 var(--ft);border-left:4px solid var(--home);transition:background .2s var(--ease),transform .2s var(--ease)}
  .mxh__sc--away li{justify-content:flex-end}
  .mxh__sc--away a,.mxh__sc--away .mxh__who{flex-direction:row-reverse;text-align:right;border-left:0;border-right:4px solid var(--away);padding:6px 10px 5px 14px}
  .mxh__sc a:hover{background:var(--panel-2)}
  .mxh__sc a:active{transform:scale(.97)}
  .mxh__sc .n{min-width:0;overflow-wrap:anywhere;font-weight:700}
  .mxh__sc .m{font:600 14px/1.2 var(--fd);letter-spacing:.04em;color:var(--amber);white-space:nowrap}
  .mxh__sc .m em{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-left:.15em}
  .mxh__sc .is-hot,.mxh__sc li.is-hot a{background:var(--panel-2);box-shadow:0 0 0 1px var(--amber) inset}

  /* ---------- нижняя строка: дата, стадион, судья ---------- */
  .mxh__info{display:flex;flex-wrap:wrap;gap:8px}
  .mxh__info>div{display:grid;gap:2px;min-width:0;background:rgba(20,20,43,.82);border-left:3px solid var(--amber);padding:9px 18px 9px 14px}
  .mxh__info dt{font:600 10.5px/1.2 var(--fd);text-transform:uppercase;letter-spacing:.16em;color:var(--amber)}
  .mxh__info dd{font:600 15px/1.3 var(--ft);overflow-wrap:anywhere}
  .mxh__info a{border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .2s var(--ease),color .2s var(--ease)}
  .mxh__info a:hover{color:var(--amber);border-color:var(--amber)}
  .mxh__info .c{color:var(--dim);font-weight:500}

  /* =====================================================================
     Первый экран «Выход команд»: косые плиты цветов команд, неоновый счёт, нить матча
     ===================================================================== */
  &.mx-hero{
    --bg:#070b13;
    .mxh__glow{background:radial-gradient(45% 80% at 50% 40%,rgba(255,207,77,.07),transparent 75%),
                           radial-gradient(70% 60% at 50% 100%,rgba(70,110,190,.14),transparent 80%)}
    .mxh__slab{position:absolute;top:0;bottom:0;--half:290px;--sk:84px}
    .mxh__slab--h{left:0;width:calc(50% - var(--half) + var(--sk));
      background:linear-gradient(100deg,var(--hf) 0,color-mix(in srgb,var(--hf) 62%,#0a0f19) 100%);
      clip-path:polygon(0 0,100% 0,calc(100% - var(--sk)) 100%,0 100%)}
    .mxh__slab--a{right:0;width:calc(50% - var(--half) + var(--sk));
      background:linear-gradient(260deg,var(--af) 0,color-mix(in srgb,var(--af) 62%,#0a0f19) 100%);
      clip-path:polygon(var(--sk) 0,100% 0,100% 100%,0 100%)}
    .mxh__slab::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-72deg,rgba(255,255,255,.07) 0 2px,transparent 2px 26px),linear-gradient(180deg,rgba(255,255,255,.1),transparent 40%)}
    /* светящиеся кромки косых плит */
    .mxh__edge{position:absolute;top:0;bottom:0;width:var(--sk);--sk:84px;--half:290px;filter:drop-shadow(0 0 7px currentColor);
      clip-path:polygon(calc(100% - 3px) 0,100% 0,3px 100%,0 100%);background:currentColor}
    .mxh__edge--h{left:calc(50% - var(--half));color:var(--home)}
    .mxh__edge--a{left:calc(50% + var(--half) - var(--sk));color:var(--away)}
    .mxh__slab--h{animation:mxhSlabL .9s var(--ease) both}
    .mxh__slab--a{animation:mxhSlabR .9s var(--ease) both}

    .mxh__wrap{padding-top:16px;padding-bottom:18px;gap:10px}
    .mxh__top{justify-content:center;position:relative}
    .mxh__crumbs{position:absolute;left:40px;top:14px;z-index:3}
        .mxh__crumbs a,.mxh__crumbs ol{text-shadow:0 1px 8px rgba(0,0,0,.7)}
    .mxh__crumbs ol{color:rgba(244,244,244,.82)}
    .mxh__lt{justify-items:center}
    .mxh__lt-t,.mxh__lt-s{text-align:center}
    .mxh__status{position:absolute;right:0;top:0}

    .mxh__stage{grid-template-areas:"hn sc an" "hs mk as"}
    .mxh__team{justify-items:start;align-content:center;gap:12px;padding:0 0 0 6px}
    .mxh__team--away{justify-items:end;text-align:right;padding:0 6px 0 0}
    .mxh__name{font-size:clamp(26px,3.7cqi,62px);font-weight:700;letter-spacing:.02em;line-height:1;text-shadow:0 3px 18px rgba(0,0,0,.55)}
    .mxh__flag{width:96px;height:64px;border-radius:6px}
    .mxh__score{min-width:min(100%,330px);padding:0 10px;position:relative}
    .mxh__digits{--dsz:clamp(100px,12.2cqi,196px);color:#fff}
    .mxh__digits .d--h{text-shadow:0 0 30px var(--home),0 0 8px color-mix(in srgb,var(--home) 70%,#fff)}
    .mxh__digits .d--a{text-shadow:0 0 30px var(--away),0 0 8px color-mix(in srgb,var(--away) 70%,#fff)}
    .mxh__digits .c{color:var(--amber);filter:drop-shadow(0 0 8px var(--amber))}
    .mxh__sc{padding-top:12px}
    .mxh__sc--home{padding-left:6px} .mxh__sc--away{padding-right:6px}
    .mxh__sc a,.mxh__sc .mxh__who{background:rgba(7,11,19,.78);border-left-color:#fff}
    .mxh__sc--away a,.mxh__sc--away .mxh__who{border-right-color:#fff}
    .mxh__sc a:hover{background:rgba(7,11,19,.95)}
    .mxh__sc .m{color:var(--amber)}
    .mxh__info>div{flex:1 1 220px;background:#0d1420}

    /* нить матча: светящаяся линия, голы точками по минутам */
    .mxh__tl{position:relative;margin:0}
    .mxh__tl-box{position:relative;height:68px;margin:0 14px}
    .mxh__tl-line{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:linear-gradient(90deg,var(--home),color-mix(in srgb,var(--home) 50%,var(--away)),var(--away));
      box-shadow:0 0 14px color-mix(in srgb,var(--home) 70%,transparent),0 0 14px color-mix(in srgb,var(--away) 70%,transparent);transform-origin:0 50%;animation:mxhGrow 1.1s var(--ease) .2s both}
    .mxh__tl-tick{position:absolute;top:50%;width:0;height:0;z-index:1}
    .mxh__tl-tick.is-ht::before{content:"";position:absolute;left:0;top:-28px;height:56px;border-left:1px dashed rgba(255,255,255,.28)}
    .mxh__tl-tick span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:600 11px/1 var(--fd);letter-spacing:.08em;color:var(--fg);background:#0d1420;border:1px solid var(--line-2);border-radius:999px;padding:4px 8px 3px;white-space:nowrap}
    .mxh__tl-goal{position:absolute;z-index:2;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--tc),0 0 16px var(--tc);animation:mxhPop .5s var(--ease) both;animation-delay:calc(.5s + var(--i,0)*.12s);transition:transform .2s var(--ease)}
    .mxh__tl-goal--h{--tc:var(--home)} .mxh__tl-goal--a{--tc:var(--away)}
    .mxh__tl-goal b{position:absolute;left:50%;transform:translateX(-50%);font:600 13px/1 var(--fd);letter-spacing:.04em;color:var(--fg);white-space:nowrap;text-shadow:0 1px 6px #000}
    .mxh__tl-goal--h b{bottom:calc(100% + 3px + var(--l,0)*14px)}
    .mxh__tl-goal--a b{top:calc(100% + 3px + var(--l,0)*14px)}
    .mxh__tl-goal.is-hot{transform:scale(1.35);background:var(--amber)}
    .mxh__tl-goal.is-hot b{color:var(--amber)}
    .mxh__tl-end{position:absolute;top:50%;width:0}
  }
}

@keyframes mxhRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes mxhWipeL{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes mxhWipeR{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes mxhSlabL{from{transform:translateX(-14%);opacity:.2}to{transform:none;opacity:1}}
@keyframes mxhSlabR{from{transform:translateX(14%);opacity:.2}to{transform:none;opacity:1}}
@keyframes mxhGrow{from{transform:scaleX(0)}to{transform:none}}
@keyframes mxhPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}


/* контейнерные запросы нельзя писать про сам контейнер, поэтому правила для внутренностей вынесены отдельно */
@container mxh (max-width:900px){
  .mx--efir.mx-hero .mxh__flag{width:64px;height:42px}
  .mx--efir.mx-hero .mxh__team{gap:6px 14px}
  .mx--efir.mx-hero.mx-hero .mxh__flag{width:72px;height:48px}
  .mx--efir.mx-hero.mx-hero .mxh__slab{--half:230px;--sk:60px}
  .mx--efir.mx-hero.mx-hero .mxh__edge{--half:230px;--sk:60px}
}
@container mxh (max-width:640px){
  .mx--efir.mx-hero .mxh__wrap{padding:16px 16px 22px;gap:14px}
  .mx--efir.mx-hero .mxh__lt-t{font-size:19px;padding:8px 16px 7px 12px}
  .mx--efir.mx-hero .mxh__lt-s{font-size:11.5px;padding:4px 12px 4px 14px}
  .mx--efir.mx-hero .mxh__stage{grid-template-areas:"hn sc an" "hs mk as"}
  .mx--efir.mx-hero .mxh__team{grid-template-columns:minmax(0,1fr)!important;justify-items:center;text-align:center;align-content:center;gap:8px;padding:12px 8px}
  .mx--efir.mx-hero .mxh__team--away .mxh__flag{order:0}
  .mx--efir.mx-hero .mxh__flag{width:48px;height:32px;border-radius:4px}
  .mx--efir.mx-hero .mxh__name{font-size:clamp(14px,4.4cqi,19px);line-height:1.08;letter-spacing:0;hyphens:manual}
  .mx--efir.mx-hero .mxh__digits{--dsz:64px;gap:5px}
  .mx--efir.mx-hero .mxh__marks{padding-top:10px;gap:5px}
  .mx--efir.mx-hero .mxh__mark{font-size:10.5px;padding:5px 9px 4px;white-space:normal;text-align:center;border-radius:8px}
  .mx--efir.mx-hero .mxh__sc{padding-top:10px;gap:4px}
  .mx--efir.mx-hero .mxh__sc a,.mx--efir.mx-hero .mxh__sc .mxh__who{font-size:13px;gap:6px;padding:5px 9px 4px 8px;flex-wrap:wrap}
  .mx--efir.mx-hero .mxh__sc--away a,.mx--efir.mx-hero .mxh__sc--away .mxh__who{padding:5px 8px 4px 9px}
  .mx--efir.mx-hero .mxh__sc .m{font-size:12.5px}
  .mx--efir.mx-hero .mxh__info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .mx--efir.mx-hero .mxh__info>div{padding:8px 12px 8px 11px}
  .mx--efir.mx-hero .mxh__info dd{font-size:13.5px}
  .mx--efir.mx-hero .mxh__info>div:first-child:nth-last-child(odd){grid-column:1/-1}
  .mx--efir.mx-hero .mxh__status{padding:6px 11px 5px;font-size:10.5px}
  /* А: плиты команд - углы поменьше, счёт по центру */
  /* Б: плиты уже, счёт крупнее на фоне стыка */
  .mx--efir.mx-hero.mx-hero .mxh__slab{--half:70px;--sk:30px}
  .mx--efir.mx-hero.mx-hero .mxh__edge{--half:70px;--sk:30px}
  .mx--efir.mx-hero.mx-hero .mxh__team,.mx--efir.mx-hero.mx-hero .mxh__team--away{padding:6px 6px 0;justify-items:center}
  .mx--efir.mx-hero.mx-hero .mxh__flag{width:56px;height:37px}
  .mx--efir.mx-hero.mx-hero .mxh__name{font-size:clamp(14px,4.4cqi,18px);font-weight:700}
  .mx--efir.mx-hero.mx-hero .mxh__score{min-width:0;padding:0 4px}
  .mx--efir.mx-hero.mx-hero .mxh__digits{--dsz:88px;gap:4px}
  .mx--efir.mx-hero.mx-hero .mxh__slab img{display:none}
  .mx--efir.mx-hero.mx-hero .mxh__status{position:static}
  .mx--efir.mx-hero.mx-hero .mxh__top{flex-direction:column;align-items:center;gap:10px}
  .mx--efir.mx-hero.mx-hero .mxh__tl-box{height:46px;margin:0 8px}
  .mx--efir.mx-hero.mx-hero .mxh__tl-tick:not(.is-ht) span{display:none}
  .mx--efir.mx-hero.mx-hero .mxh__tl-tick.is-ht::before{top:-14px;height:28px}
  .mx--efir.mx-hero.mx-hero .mxh__crumbs{position:static}
  .mx--efir.mx-hero.mx-hero .mxh__stage{column-gap:12px}
  .mx--efir.mx-hero.mx-hero .mxh__tl-goal b{font-size:11px;--l:0}
}

/* ---------- меню страницы: подменю в цвет эфира (только при этом первом экране) ---------- */
body:has(.mx--efir.mx-hero) .rd-subnav-wrap{background:#0d1420;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 14px 28px -20px rgba(0,0,0,.6)}
body:has(.mx--efir.mx-hero) .rd-subnav{flex-wrap:nowrap;scrollbar-width:none}
body:has(.mx--efir.mx-hero) .rd-subnav::-webkit-scrollbar{display:none}
body:has(.mx--efir.mx-hero) .rd-subnav a{flex:none;font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;font-size:14px;letter-spacing:.1em;color:rgba(244,244,244,.72);border-bottom:3px solid transparent;transition:color .2s cubic-bezier(.16,1,.3,1),border-color .2s cubic-bezier(.16,1,.3,1)}
body:has(.mx--efir.mx-hero) .rd-subnav a:hover{color:#fff}
body:has(.mx--efir.mx-hero) .rd-subnav a.is-active{color:#ffcf4d;border-bottom-color:#ffcf4d}

@media (prefers-reduced-motion:reduce){
  .mx--efir.mx-hero *,.mx--efir.mx-hero *::before,.mx--efir.mx-hero *::after{animation:none!important;transition:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .mx--efir.mx-hero .mxh__scan{display:none}
}