/* ==========================================================================
   YAYIN KIT (yy-*) — canlı yayın / skor tabelası / HUD: интерфейс сделан из
   ПРЯМОГО ЭФИРА и ТАБЛО. Не корпус автомата (jeton), не сота (petek),
   не слоёное тесто (yufka), не варка сиропа (serbet), не упаковка (ambalaj),
   не бумажный коллаж: здесь всё — разметка поля, точечная матрица табло,
   эфирная плашка под кадром, бегущая строка результатов, игровой HUD,
   турнирная сетка, билетный корешок, кнопка геймпада, свет прожектора.
   Карточка — это ПЛАШКА ЭФИРА или ПАНЕЛЬ ТАБЛО.
   Геометрия партии — ПРЯМОУГОЛЬНИК КАДРА и КРУГ КНОПКИ/МЯЧА.

   Palette hooks (override in :root of the site):
   --yy-saha, --yy-cizgi, --yy-panel, --yy-ekran, --yy-led, --yy-canli,
   --yy-ahsap, --yy-kagit, --yy-ink, --yy-isik, --yy-acc, --yy-acc-2,
   --yy-bas-font, --yy-nokta-font, --yy-el-font

   КАНОН ПСЕВДОЭЛЕМЕНТОВ (чтобы ничего не наезжало друг на друга):
   * земля секции    → собственный background элемента (зерно первым слоем),
                       ::before НЕ занимает;
   * кромка секции   → ::before  (yy-serit-top | yy-cizgi-top | yy-led-top)
   * эффект секции   → ::after   (yy-tarama-fx | yy-isik-fx — НЕ вместе)
   * носитель        → ::before  (матрица/перфорация/подсветка)
   * метка-на-носителе (yy-canli, yy-dakika, yy-no, yy-sure) и блик
     yy-parlak → ::after, поэтому на одном носителе допустим
     только ОДИН из них;
   * высоты кромок — только в px (процент считается от высоты секции и на
     мобиле вырастает поверх заголовка);
   * тёмные носители (yy-ekran, yy-panel, yy-sayac) красят текст сами —
     своих цветов текста внутри них не задавать;
   * светлые носители (yy-kart, yy-bilet) красят текст тёмным — светлых
     цветов внутри них не задавать.
   ВАЖНО: кит НЕ красит содержимое носителей «одним цветом на всё». Цвет
   задаётся самому носителю и заголовкам/абзацам внутри; кнопки, чипы и
   элементы со своим фоном остаются при своих цветах.
   ========================================================================== */
:where(:root){
  --yy-saha:#14301F;    --yy-cizgi:#EEF4EE;
  --yy-panel:#0B0F16;   --yy-ekran:#0E1420;
  --yy-led:#FFB13B;     --yy-canli:#E8232A;
  --yy-ahsap:#C8A06A;   --yy-kagit:#F4F6F2;
  --yy-ink:#0C1118;     --yy-isik:#F2F6FA;
  --yy-acc:#3DDC84;     --yy-acc-2:#FFB13B;
  --yy-bas-font:"Arial Narrow","Helvetica Neue Condensed",Impact,"Arial Black",sans-serif;
  --yy-nokta-font:Consolas,"Courier New",ui-monospace,monospace;
  --yy-el-font:"Segoe Script","Bradley Hand","Comic Sans MS",cursive;
  /* строчная развёртка эфира: светлая (на тёмном) и тёмная (на светлом) */
  --yy-tarama:repeating-linear-gradient(to bottom,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);
  --yy-tarama-k:repeating-linear-gradient(to bottom,rgba(0,0,0,.06) 0 1px,transparent 1px 3px);
  /* точечная матрица табло: шаг держать кратным 6px, иначе муар на мобиле */
  --yy-matris:radial-gradient(circle .9px at 3px 3px,rgba(255,255,255,.16) 0 .9px,transparent 1.2px);
  /* зерно трансляции: слабое, это верхний слой земли */
  --yy-doku:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.11'/></svg>");
}

/* ==========================================================================
   1. ЗЕМЛЯ СЕКЦИИ — поверхность трансляции: поле с разметкой, табло,
   эфирный кадр, HUD, паркет корта, статистический бюллетень, трибуна.
   Класс на <section>/<main>/<footer>/<div>; на <header> тоже можно —
   position там НЕ переопределяется (иначе ломается sticky и fixed cookie).
   ========================================================================== */
.yy-saha-z,.yy-tabela-z,.yy-yayin-z,.yy-hud-z,.yy-kort-z,.yy-bulten-z,.yy-tribun-z{isolation:isolate}
:where(.yy-saha-z,.yy-tabela-z,.yy-yayin-z,.yy-hud-z,.yy-kort-z,.yy-bulten-z,.yy-tribun-z):not(header,.site-header,.header,[class*="drawer"]){position:relative;overflow:clip}
header.yy-saha-z,header.yy-tabela-z,header.yy-yayin-z,header.yy-hud-z,header.yy-kort-z,header.yy-bulten-z,header.yy-tribun-z{overflow:visible}

/* ПОЛЕ: полосы от газонокосилки, круг в центре, дуги штрафной (ТЁМНАЯ) */
.yy-saha-z.yy-saha-z.yy-saha-z{background:
  var(--yy-doku),
  radial-gradient(circle at 50% 50%,transparent 0 78px,color-mix(in srgb,var(--yy-cizgi) 26%,transparent) 78px 80px,transparent 81px),
  linear-gradient(90deg,transparent 0 calc(50% - 1px),color-mix(in srgb,var(--yy-cizgi) 20%,transparent) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
  repeating-linear-gradient(90deg,color-mix(in srgb,#fff 4%,transparent) 0 72px,transparent 72px 144px),
  linear-gradient(176deg,color-mix(in srgb,var(--yy-saha) 86%,#fff 6%),var(--yy-saha) 58%,color-mix(in srgb,var(--yy-saha) 80%,#000));
  background-size:160px 160px,auto,auto,auto,auto}

/* ТАБЛО: точечная матрица по тёмной панели, тёплое свечение диодов (ТЁМНАЯ) */
.yy-tabela-z.yy-tabela-z.yy-tabela-z{background:
  var(--yy-matris),
  radial-gradient(120% 90% at 50% 18%,color-mix(in srgb,var(--yy-acc-2) 12%,transparent),transparent 70%),
  linear-gradient(var(--yy-panel),color-mix(in srgb,var(--yy-panel) 88%,#000));
  background-size:6px 6px,auto,auto}

/* ЭФИРНЫЙ КАДР: развёртка, виньетка, полоски настроечной таблицы снизу (ТЁМНАЯ) */
.yy-yayin-z.yy-yayin-z.yy-yayin-z{background:
  var(--yy-doku),
  var(--yy-tarama),
  linear-gradient(90deg,
    color-mix(in srgb,var(--yy-cizgi) 22%,transparent) 0 12.5%,
    color-mix(in srgb,var(--yy-acc-2) 22%,transparent) 12.5% 25%,
    color-mix(in srgb,var(--yy-acc) 20%,transparent) 25% 37.5%,
    color-mix(in srgb,var(--yy-canli) 20%,transparent) 37.5% 50%,
    transparent 50%) bottom/100% 4px no-repeat,
  radial-gradient(135% 110% at 50% 46%,transparent 54%,rgba(0,0,0,.66) 100%),
  linear-gradient(var(--yy-ekran),color-mix(in srgb,var(--yy-ekran) 82%,#000));
  background-size:160px 160px,auto,100% 4px,auto,auto}

/* HUD: тонкая координатная сетка и свечение по нижней кромке (ТЁМНАЯ) */
.yy-hud-z.yy-hud-z.yy-hud-z{background:
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--yy-acc) 13%,transparent) 0 1px,transparent 1px 48px),
  repeating-linear-gradient(0deg,color-mix(in srgb,var(--yy-acc) 9%,transparent) 0 1px,transparent 1px 48px),
  radial-gradient(120% 70% at 50% 108%,color-mix(in srgb,var(--yy-acc) 18%,transparent),transparent 64%),
  linear-gradient(var(--yy-ekran),color-mix(in srgb,var(--yy-ekran) 88%,var(--yy-panel)))}

/* ПАРКЕТ КОРТА: тёплые доски и накрашенные линии разметки (СВЕТЛАЯ) */
.yy-kort-z.yy-kort-z.yy-kort-z{background:
  repeating-linear-gradient(0deg,color-mix(in srgb,var(--yy-ink) 7%,transparent) 0 1px,transparent 1px 46px),
  linear-gradient(90deg,transparent 0 58px,color-mix(in srgb,var(--yy-canli) 30%,transparent) 58px 61px,transparent 61px),
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--yy-ink) 5%,transparent) 0 2px,transparent 2px 118px),
  linear-gradient(168deg,color-mix(in srgb,var(--yy-ahsap) 32%,#fff),color-mix(in srgb,var(--yy-ahsap) 46%,#fff) 54%,color-mix(in srgb,var(--yy-ahsap) 34%,#fff))}

/* БЮЛЛЕТЕНЬ: миллиметровка статистики с полем для пометок (СВЕТЛАЯ) */
.yy-bulten-z.yy-bulten-z.yy-bulten-z{background:
  repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--yy-ink) 8%,transparent) 23px 24px),
  repeating-linear-gradient(90deg,transparent 0 23px,color-mix(in srgb,var(--yy-ink) 6%,transparent) 23px 24px),
  linear-gradient(90deg,transparent 0 52px,color-mix(in srgb,var(--yy-canli) 22%,transparent) 52px 53px,transparent 53px),
  linear-gradient(#FBFCF9,color-mix(in srgb,var(--yy-kagit) 94%,#fff))}

/* ТРИБУНА: мозаика кресел секторами (СВЕТЛАЯ) */
.yy-tribun-z.yy-tribun-z.yy-tribun-z{background:
  radial-gradient(circle 4px at 9px 8px,color-mix(in srgb,var(--yy-acc) 44%,transparent) 0 4px,transparent 5px),
  radial-gradient(circle 4px at 27px 22px,color-mix(in srgb,var(--yy-acc-2) 42%,transparent) 0 4px,transparent 5px),
  radial-gradient(circle 4px at 45px 8px,color-mix(in srgb,var(--yy-ink) 20%,transparent) 0 4px,transparent 5px),
  linear-gradient(172deg,#FAFBF8,color-mix(in srgb,var(--yy-kagit) 90%,var(--yy-ahsap) 6%));
  background-size:54px 36px,54px 36px,54px 36px,auto}

/* ==========================================================================
   2. КРОМКИ СЕКЦИЙ — ::before секции. Высоты строго в px.
   ========================================================================== */
.yy-serit-top::before,.yy-cizgi-top::before,.yy-led-top::before{
  content:"";position:absolute;inset:0 0 auto;pointer-events:none;z-index:1}

/* БЕГУЩАЯ СТРОКА РЕЗУЛЬТАТОВ: полоса с делениями счёта */
.yy-serit-top::before{height:14px;background:
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--yy-ink) 55%,transparent) 0 2px,transparent 2px 22px),
  linear-gradient(var(--yy-acc-2),color-mix(in srgb,var(--yy-acc-2) 76%,#000))}

/* ЛИНИЯ РАЗМЕТКИ: пунктир боковой линии поля */
.yy-cizgi-top::before{height:7px;background:
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--yy-cizgi) 72%,transparent) 0 26px,transparent 26px 44px)}

/* РЯД СВЕТОДИОДОВ ТАБЛО */
.yy-led-top::before{height:12px;background:
  radial-gradient(circle 3px at 11px 6px,color-mix(in srgb,var(--yy-acc) 85%,#fff) 0 3px,transparent 4px) repeat-x;
  background-size:26px 12px}

/* ==========================================================================
   3. НОСИТЕЛИ — эфирная плашка, панель табло, карточка статистики,
   билетный корешок, светодиодный счётчик, кнопка геймпада.
   ========================================================================== */
.yy-ekran,.yy-panel,.yy-kart,.yy-bilet,.yy-sayac{position:relative;isolation:isolate}

/* ЭФИРНАЯ ПЛАШКА (lower-third): тёмный кадр с цветной рейкой слева (ТЁМНЫЙ) */
.yy-ekran{
  background:linear-gradient(104deg,color-mix(in srgb,var(--yy-ekran) 97%,#000),color-mix(in srgb,var(--yy-ekran) 86%,var(--yy-panel)));
  color:var(--yy-isik);
  border:1px solid color-mix(in srgb,var(--yy-isik) 15%,transparent);
  border-left:4px solid var(--yy-acc);
  border-radius:2px;padding:20px 22px;
  box-shadow:0 10px 30px rgba(0,0,0,.34)}
.yy-ekran::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--yy-tarama);opacity:.5;border-radius:inherit}
.yy-ekran h1,.yy-ekran h2,.yy-ekran h3,.yy-ekran h4,.yy-ekran p,.yy-ekran li,.yy-ekran dt,.yy-ekran dd{color:var(--yy-isik)}
.yy-ekran small,.yy-ekran figcaption{color:color-mix(in srgb,var(--yy-isik) 72%,var(--yy-panel))}

/* ПАНЕЛЬ ТАБЛО: точечная матрица, тёплый диод (ТЁМНЫЙ) */
.yy-panel{
  background:var(--yy-matris),linear-gradient(var(--yy-panel),color-mix(in srgb,var(--yy-panel) 86%,#000));
  background-size:6px 6px,auto;
  color:var(--yy-isik);
  border:1px solid color-mix(in srgb,var(--yy-acc-2) 26%,transparent);
  border-radius:3px;padding:20px 22px}
.yy-panel h1,.yy-panel h2,.yy-panel h3,.yy-panel h4,.yy-panel p,.yy-panel li,.yy-panel dt,.yy-panel dd{color:var(--yy-isik)}
.yy-panel small,.yy-panel figcaption{color:color-mix(in srgb,var(--yy-isik) 70%,var(--yy-panel))}

/* КАРТОЧКА СТАТИСТИКИ: светлый лист сводки с линией сверху (СВЕТЛЫЙ) */
.yy-kart{
  background:linear-gradient(#FFF,color-mix(in srgb,var(--yy-kagit) 92%,#fff));
  color:var(--yy-ink);
  border:1px solid color-mix(in srgb,var(--yy-ink) 14%,transparent);
  border-top:3px solid var(--yy-acc);
  border-radius:2px;padding:20px 22px;
  box-shadow:0 6px 18px color-mix(in srgb,var(--yy-ink) 8%,transparent)}
.yy-kart h1,.yy-kart h2,.yy-kart h3,.yy-kart h4,.yy-kart p,.yy-kart li,.yy-kart dt,.yy-kart dd{color:var(--yy-ink)}
.yy-kart small,.yy-kart figcaption{color:color-mix(in srgb,var(--yy-ink) 68%,var(--yy-kagit))}

/* БИЛЕТНЫЙ КОРЕШОК: перфорация справа и оторванный край (СВЕТЛЫЙ) */
.yy-bilet{
  background:linear-gradient(92deg,color-mix(in srgb,var(--yy-kagit) 96%,#fff),#FFF);
  color:var(--yy-ink);
  border:1px dashed color-mix(in srgb,var(--yy-ink) 26%,transparent);
  border-radius:2px;padding:18px 44px 18px 20px}
.yy-bilet::before{content:"";position:absolute;top:8px;bottom:8px;right:30px;width:2px;pointer-events:none;
  background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--yy-ink) 34%,transparent) 0 4px,transparent 4px 10px)}
.yy-bilet h1,.yy-bilet h2,.yy-bilet h3,.yy-bilet h4,.yy-bilet p,.yy-bilet li{color:var(--yy-ink)}
.yy-bilet small{color:color-mix(in srgb,var(--yy-ink) 66%,var(--yy-kagit))}

/* СВЕТОДИОДНЫЙ СЧЁТЧИК: тёмная пилюля с тёплыми цифрами (ТЁМНЫЙ) */
.yy-sayac{
  display:inline-flex;align-items:center;gap:.4em;
  background:linear-gradient(var(--yy-panel),#000);
  color:var(--yy-acc-2);
  font-family:var(--yy-nokta-font);font-variant-numeric:tabular-nums;
  letter-spacing:.08em;font-weight:700;
  border:1px solid color-mix(in srgb,var(--yy-acc-2) 34%,transparent);
  border-radius:3px;padding:4px 10px;
  text-shadow:0 0 10px color-mix(in srgb,var(--yy-acc-2) 55%,transparent)}

/* КНОПКА ГЕЙМПАДА: круглая клавиша с буквенной меткой */
.yy-tus{
  display:inline-grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,color-mix(in srgb,#fff 48%,var(--yy-acc)),var(--yy-acc) 62%,color-mix(in srgb,var(--yy-acc) 62%,#000));
  color:var(--yy-ink);font-family:var(--yy-bas-font);font-weight:900;
  font-size:.92rem;line-height:1;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.28),0 2px 5px rgba(0,0,0,.3)}
.yy-tus--2{background:radial-gradient(circle at 36% 30%,color-mix(in srgb,#fff 48%,var(--yy-acc-2)),var(--yy-acc-2) 62%,color-mix(in srgb,var(--yy-acc-2) 62%,#000))}
.yy-tus--canli{background:radial-gradient(circle at 36% 30%,color-mix(in srgb,#fff 42%,var(--yy-canli)),var(--yy-canli) 62%,color-mix(in srgb,var(--yy-canli) 60%,#000));color:#FFF}

/* ==========================================================================
   4. РАСКЛАДКИ — расписание матчей, турнирная сетка, лента тикера.
   ========================================================================== */
/* ФИКСТУР: строки «команда — счёт — команда», разной высоты, со своей чередой */
.yy-fikstur{display:grid;gap:10px}
/* строке таблицы нужен собственный внутренний отступ: зебра рисуется по её
   рамке, и без padding текст упирается прямо в край полосы */
.yy-fikstur>*{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.yy-fikstur>*:not(.yy-ekran,.yy-panel,.yy-kart,.yy-bilet){padding:8px clamp(10px,1.4vw,16px)}
.yy-fikstur>*>*{min-width:0}
/* зебра — только для строк БЕЗ своего носителя, иначе она стирает плашку */
.yy-fikstur>*:nth-child(odd):not(.yy-ekran,.yy-panel,.yy-kart,.yy-bilet){
  background:color-mix(in srgb,var(--yy-ink) 4%,transparent)}
.yy-fikstur>*{transition:box-shadow .18s ease}
.yy-fikstur>*:hover{box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--yy-acc) 10%,transparent)}

/* ТУРНИРНАЯ СЕТКА: столбцы раундов со связующими линиями */
/* align-items НЕ трогать: колонки должны тянуться на полную высоту,
   иначе space-around не сводит пары к середине следующего раунда */
.yy-braket{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:26px}
.yy-braket>*{display:flex;flex-direction:column;justify-content:space-around;gap:14px}
.yy-braket>*>*{position:relative}
/* связка идёт currentColor: на тёмном HUD цвет --yy-ink был невидим */
.yy-braket>*:not(:last-child)>*::after{content:"";position:absolute;top:50%;left:100%;width:26px;height:1px;
  background:color-mix(in srgb,currentColor 42%,transparent)}

/* ЛЕНТА ТИКЕРА: карточки в один ряд, уезжают за правый край */
.yy-serit-dizi{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.yy-serit-dizi>*{flex:0 0 auto;min-width:188px}

/* ==========================================================================
   5. МЕТКИ ЭФИРА — LIVE, минута матча, форма команды, номер, тег, таймер.
   ========================================================================== */
.yy-canli,.yy-dakika,.yy-no,.yy-sure,.yy-etiket{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--yy-nokta-font);font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;white-space:nowrap}

/* LIVE: красная плашка с пульсирующей точкой */
.yy-canli{background:var(--yy-canli);color:#FFF}
.yy-canli::before{content:"";width:7px;height:7px;border-radius:50%;background:#FFF;
  animation:yy-nabiz 1.6s ease-in-out infinite}
@keyframes yy-nabiz{0%,100%{opacity:1}50%{opacity:.28}}

/* МИНУТА МАТЧА / ТАЙМЕР: тёмная пилюля с моноцифрами */
.yy-dakika,.yy-sure{background:color-mix(in srgb,var(--yy-ink) 88%,#000);color:var(--yy-acc-2);
  font-variant-numeric:tabular-nums}

/* ТЕГ ЖАНРА: контурный чип */
.yy-etiket{background:transparent;color:inherit;
  border:1px solid color-mix(in srgb,currentColor 38%,transparent)}

/* НОМЕР НА ФУТБОЛКЕ */
.yy-no{background:var(--yy-acc);color:var(--yy-ink);font-size:.82rem;
  font-family:var(--yy-bas-font);letter-spacing:.02em;
  min-width:1.9em;justify-content:center}

/* ФОРМА КОМАНДЫ: ряд квадратиков G/B/M (galibiyet/beraberlik/mağlubiyet) */
.yy-form{display:inline-flex;gap:3px}
.yy-form>*{display:grid;place-items:center;width:18px;height:18px;border-radius:2px;
  font-family:var(--yy-nokta-font);font-size:.62rem;font-weight:700;color:#FFF;
  background:color-mix(in srgb,var(--yy-ink) 52%,transparent)}
.yy-form>.g{background:var(--yy-acc);color:var(--yy-ink)}
.yy-form>.m{background:var(--yy-canli)}

/* ==========================================================================
   6. ТИПОГРАФИКА ЭФИРА — точечная матрица, счёт, моностатистика,
   плакатный капс, маркер тренера, штамп протокола.
   ========================================================================== */
/* ТОЧЕЧНАЯ МАТРИЦА: текст бегущей строки табло */
.yy-nokta{font-family:var(--yy-nokta-font);letter-spacing:.2em;text-transform:uppercase;
  font-size:.74rem;font-weight:700}

/* СЧЁТ: очень крупные табличные цифры */
.yy-skor{font-family:var(--yy-bas-font);font-weight:900;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  font-size:clamp(2.2rem,6vw,4.4rem);line-height:.9}

/* МОНОСТАТИСТИКА: колонки чисел */
.yy-kod{font-family:var(--yy-nokta-font);font-variant-numeric:tabular-nums;
  font-size:.86rem;letter-spacing:.02em}

/* ПЛАКАТНЫЙ КАПС: узкий крик анонса */
.yy-bagirt{font-family:var(--yy-bas-font);font-weight:900;text-transform:uppercase;
  letter-spacing:.01em;line-height:.94;text-wrap:balance}

/* МАРКЕР ТРЕНЕРА: пометка на тактической доске */
.yy-elyazi{font-family:var(--yy-el-font);font-size:1.02rem;transform:rotate(-2.2deg);
  display:inline-block;color:color-mix(in srgb,var(--yy-acc-2) 70%,#000)}
/* на тёмных землях маркер, наоборот, должен светиться */
.yy-saha-z .yy-elyazi,.yy-tabela-z .yy-elyazi,.yy-yayin-z .yy-elyazi,.yy-hud-z .yy-elyazi,
.yy-ekran .yy-elyazi,.yy-panel .yy-elyazi{color:var(--yy-acc-2)}

/* ШТАМП ПРОТОКОЛА: рамка с наклоном */
.yy-damga{display:inline-block;font-family:var(--yy-nokta-font);font-size:.64rem;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:4px 9px;border:1.5px solid currentColor;border-radius:2px;
  transform:rotate(-3deg);opacity:.86}

/* ==========================================================================
   7. ИСКРЫ ЭФИРА — пиксель, мяч, свисток, тактическая стрелка, засечка
   таймера, конфетти трибуны. Декор: aria-hidden, pointer-events:none.
   ========================================================================== */
.yy-kiv{position:absolute;pointer-events:none;z-index:0;opacity:.8}
/* в шапке и подвале искра обязана лежать ПОД ссылками: земля даёт
   isolation:isolate, поэтому -1 прячет её за контент, но не за фон */
:is(header,.site-header,.header,footer,.site-footer) .yy-kiv{z-index:-1}
.yy-kiv--piksel{width:8px;height:8px;background:var(--yy-acc)}
.yy-kiv--top{width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0 3px,var(--yy-cizgi) 4px,color-mix(in srgb,var(--yy-ink) 60%,var(--yy-cizgi)) 100%)}
.yy-kiv--dudup{width:18px;height:10px;border-radius:5px 5px 6px 6px;
  background:color-mix(in srgb,var(--yy-acc-2) 76%,#000);rotate:-14deg}
.yy-kiv--ok{width:34px;height:12px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 24'><path d='M2 12h52M46 4l10 8-10 8' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  opacity:.5}
.yy-kiv--cizik{width:3px;height:22px;background:color-mix(in srgb,currentColor 36%,transparent);rotate:9deg}
.yy-kiv--konfeti{width:7px;height:12px;background:var(--yy-acc-2);rotate:24deg}

/* ==========================================================================
   8. ЭФФЕКТЫ — свет прожектора за курсором, полоса повтора, бегущая лента.
   На одной секции допустим ТОЛЬКО ОДИН ::after-эффект.
   ========================================================================== */
.yy-isik-fx::after,.yy-tarama-fx::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}

/* СВЕТ ПРОЖЕКТОРА: пятно идёт за курсором (--mx/--my ставит main.js) */
.yy-isik-fx::after{background:radial-gradient(260px 200px at var(--mx,50%) var(--my,40%),
  color-mix(in srgb,var(--yy-acc) 16%,transparent),transparent 72%)}

/* ПОЛОСА ПОВТОРА: светлая развёртка сверху вниз */
.yy-tarama-fx::after{background:linear-gradient(to bottom,
  transparent 0 42%,color-mix(in srgb,var(--yy-isik) 12%,transparent) 48%,transparent 54% 100%);
  background-size:100% 260%;animation:yy-tarama 7.5s linear infinite}
@keyframes yy-tarama{0%{background-position:0 -160%}100%{background-position:0 160%}}

/* БЕГУЩАЯ ЛЕНТА: ряд уезжает влево; дублировать содержимое в разметке */
.yy-akis{display:flex;gap:28px;white-space:nowrap;animation:yy-akis 26s linear infinite}
@keyframes yy-akis{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.yy-akis-kutu{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.yy-akis-kutu:hover .yy-akis{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .yy-akis{animation:none}
  .yy-tarama-fx::after{animation:none}
  .yy-canli::before{animation:none}
}

/* ==========================================================================
   9. ФОТО, ПОДПИСИ, ССЫЛКИ, МОБИЛЬНЫЙ, КОНТРАСТ-БЕЗОПАСНОСТЬ
   ========================================================================== */
/* КАДР ТРАНСЛЯЦИИ: фото в рамке кадра с угловыми скобками */
.yy-kadr{position:relative;display:block}
.yy-kadr img{display:block;width:100%;height:auto}
.yy-kadr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--yy-acc) 0 18px,transparent 18px) top left/100% 2px no-repeat,
    linear-gradient(90deg,transparent calc(100% - 18px),var(--yy-acc) calc(100% - 18px)) bottom right/100% 2px no-repeat,
    linear-gradient(180deg,var(--yy-acc) 0 18px,transparent 18px) top left/2px 100% no-repeat,
    linear-gradient(180deg,transparent calc(100% - 18px),var(--yy-acc) calc(100% - 18px)) bottom right/2px 100% no-repeat}

/* ПОДПИСЬ ПОД КАДРОМ: как титр оператора */
.yy-altyazi{font-family:var(--yy-nokta-font);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;opacity:.85;margin-top:8px}

/* ССЫЛКА-ПЕРЕХОД: подчёркивание растёт от левого края */
.yy-bag{position:relative;text-decoration:none;color:inherit}
.yy-bag::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--yy-acc);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease}
.yy-bag:hover::after,.yy-bag:focus-visible::after{transform:scaleX(1)}

/* фокус виден всегда — кит ничего не прячет */
.yy-tus:focus-visible,.yy-bag:focus-visible,.yy-ekran a:focus-visible,.yy-kart a:focus-visible{
  outline:2px solid var(--yy-acc-2);outline-offset:2px}

/* КОНТРАСТ-БЕЗОПАСНОСТЬ.
   Тёмные земли красят ТОЛЬКО свой собственный текст (заголовки/абзацы),
   и НИКОГДА не трогают содержимое светлых носителей внутри себя —
   иначе светлая карточка на тёмной секции получает светлый текст. */
.yy-saha-z>:where(h1,h2,h3,h4,p,li),.yy-tabela-z>:where(h1,h2,h3,h4,p,li),
.yy-yayin-z>:where(h1,h2,h3,h4,p,li),.yy-hud-z>:where(h1,h2,h3,h4,p,li){color:var(--yy-isik)}
.yy-saha-z :where(.container,.wrap,.inner)>:where(h1,h2,h3,h4,p,li),
.yy-tabela-z :where(.container,.wrap,.inner)>:where(h1,h2,h3,h4,p,li),
.yy-yayin-z :where(.container,.wrap,.inner)>:where(h1,h2,h3,h4,p,li),
.yy-hud-z :where(.container,.wrap,.inner)>:where(h1,h2,h3,h4,p,li){color:var(--yy-isik)}
.yy-kort-z>:where(h1,h2,h3,h4,p,li),.yy-bulten-z>:where(h1,h2,h3,h4,p,li),
.yy-tribun-z>:where(h1,h2,h3,h4,p,li){color:var(--yy-ink)}
.yy-kort-z :where(.container,.wrap,.inner)>:where(h1,h2,h3,h4,p,li),
.yy-bulten-z :where(.container,.wrap,.inner)>:where(h1,h2,h3,h4,p,li),
.yy-tribun-z :where(.container,.wrap,.inner)>:where(h1,h2,h3,h4,p,li){color:var(--yy-ink)}

/* контент обязан быть ВЫШЕ кромки: ::before кромки держит z-index:1 и
   иначе накрывает первый заголовок секции */
:where(.yy-saha-z,.yy-tabela-z,.yy-yayin-z,.yy-hud-z,.yy-kort-z,.yy-bulten-z,.yy-tribun-z)
  >:where(.container,.wrap,.inner,.row,.section-inner){position:relative;z-index:2}
/* и запас сверху под саму кромку */
.yy-serit-top,.yy-led-top{padding-top:max(22px,var(--yy-pad-top,0px))}
.yy-cizgi-top{padding-top:max(16px,var(--yy-pad-top,0px))}

@media (max-width:719px){
  .yy-braket{grid-auto-flow:row;grid-auto-columns:auto}
  .yy-braket>*:not(:last-child)>*::after{display:none}
  .yy-fikstur>*{grid-template-columns:1fr auto;gap:8px}
  .yy-ekran,.yy-panel,.yy-kart{padding:16px 16px}
  .yy-bilet{padding:14px 36px 14px 16px}
  .yy-kiv{display:none}
}