/* ---------- ШРИФТЫ ---------- */
/* Наборный текст: Akzidenz Grotesk Pro Regular */
@font-face{
  font-family:'Akzidenz Grotesk Pro';
  src:url('../Fonts/AkzidenzGroteskPro-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Akzidenz Grotesk Pro';
  src:url('../Fonts/AkzidenzGroteskPro-Md.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Akzidenz Grotesk Pro';
  src:url('../Fonts/AkzidenzGroteskPro-Bold.woff2') format('woff2');
  font-weight:600 700;font-style:normal;font-display:swap;
}

/* Заголовки: широкое расширенное начертание.
   Веса 700 и 900 отдаёт Bold Extended — им набраны все заголовки,
   кнопки и крупные цифры. Лёгкие расширенные оставлены для 300 и 500,
   чтобы не синтезировать начертания браузером. */
@font-face{
  font-family:'Akzidenz Grotesk Pro Ext';
  src:url('../Fonts/AkzidenzGroteskPro-LightEx.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Akzidenz Grotesk Pro Ext';
  src:url('../Fonts/AkzidenzGroteskPro-Ext.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Akzidenz Grotesk Pro Ext';
  src:url('../Fonts/AkzidenzGroteskPro-MdEx.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Akzidenz Grotesk Pro Ext';
  src:url('../Fonts/AkzidenzGroteskPro-BoldEx.woff2') format('woff2');
  font-weight:700 900;font-style:normal;font-display:swap;
}

:root{
  --black:#050505;
  --white:#f2f2f0;
  --acid:#c8f11c;        /* лаймовый как в лого */
  --line:rgba(255,255,255,.18);
  --grey:rgba(242,242,240,.55);
  /* боковой отступ всех секций: контейнеры идут от края до края */
  --gutter:clamp(20px,3.5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--acid);color:var(--black);}

/* ---------- GRAIN ---------- */
/* Шум — отдельный композитный слой (анимация transform) поверх всей страницы.
   Растеризуется в половинном разрешении: блок вдвое меньше и растянут scale(2)
   от левого верхнего угла, плитка 150px = прежние 300px на экране. Запас 30px —
   ровно на максимальный сдвиг анимации (было 100px). */
.grain{
  position:fixed;left:-30px;top:-30px;width:calc(50vw + 30px);height:calc(50vh + 30px);
  transform-origin:0 0;transform:scale(2);background-size:150px 150px;
  z-index:60;pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift{
  /* translate после scale(2) — в координатах блока, на экране вдвое больше */
  0%{transform:scale(2) translate(0,0)}25%{transform:scale(2) translate(-15px,10px)}
  50%{transform:scale(2) translate(10px,-12.5px)}75%{transform:scale(2) translate(-7.5px,-5px)}100%{transform:scale(2) translate(0,0)}
}

/* ---------- ШАПКА (фикс) ---------- */
/* три колонки: пустая | логотип по центру | кнопка справа — логотип точно по центру
   независимо от ширины кнопки */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px var(--gutter);
  mix-blend-mode:difference; /* читается и на светлых кадрах видео */
}
/* ============================================================
   БЕГУЩАЯ СТРОКА над шапкой — объявление о сбое. Сейчас на страницах её нет:
   стоял 8 октября (сбой Yandex Cloud), снят, когда облако починили. Вернуть —
   вставить перед .topbar в index.html и battle.html блок из коммита b685d58.
   Шапка сдвигается сама: сдвиг завязан на body:has(.ticker), классов на body нет.
   Движение — только transform, в композиторе: главный поток не трогает.
   ============================================================ */
:root{--ticker-h:30px;}
.ticker{
  position:fixed;top:0;left:0;right:0;z-index:41;   /* над шапкой (40), под модалкой (70) */
  height:var(--ticker-h);overflow:hidden;
  background:var(--acid);color:var(--black);
  display:flex;align-items:center;
}
.ticker-track{display:flex;width:max-content;animation:ticker 60s linear infinite;will-change:transform;}
.ticker-track span{
  flex:none;padding:0 28px;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
/* между повторами — короткий разделитель */
.ticker-track span::after{content:'///';margin-left:56px;opacity:.45;}
@keyframes ticker{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
/* на десктопе — пауза под курсором, чтобы дочитать */
@media(hover:hover){.ticker:hover .ticker-track{animation-play-state:paused;}}
/* текст для скринридеров — один раз, без повторов дорожки */
.ticker-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.ticker-static{display:none;}
/* шапка встаёт под строку */
body:has(.ticker) .topbar{top:var(--ticker-h);}
body:has(.ticker) :is(#disciplines,#rules,#prizes,#entry){scroll-margin-top:calc(96px + var(--ticker-h));}
@media(max-width:699px){
  :root{--ticker-h:26px;}
  .ticker-track span{font-size:11px;padding:0 20px;}
  .ticker-track span::after{margin-left:40px;}
}
/* без движения: одна неподвижная строка по центру */
@media(prefers-reduced-motion:reduce){
  .ticker{justify-content:center;padding:0 var(--gutter);}
  .ticker-track{display:none;}
  .ticker-static{
    display:block;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  }
}

.topbar .logo{
  grid-column:2;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;font-size:18px;
  letter-spacing:.08em;color:#fff;text-decoration:none;
}
.btn-reg{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.5);
  padding:12px 26px;border-radius:16px 0 16px 0;
  cursor:pointer;transition:color .35s cubic-bezier(.16,1,.3,1);
}
.topbar .btn-reg{grid-column:3;justify-self:end;}
/* телефон: логотип к левому краю, кнопка справа; на десктопе лого по центру */
@media(max-width:699px){.topbar .logo{grid-column:1;justify-self:start}}

/* ---------- ЭКРАН 1: ВИДЕО ---------- */
.intro{
  position:relative;height:100vh;overflow:hidden;
  /* Чернота кадра героя — чистый #000, а фон страницы #050505.
     Без этого при contain на вертикальном экране видна горизонтальная граница
     между картинкой и фоном. Виньетка ниже уводит низ секции обратно в #050505. */
  background:#000;
}
/* фолбек-шар: виден, пока/если видео не загрузилось */
.orb-wrap{
  position:absolute;z-index:1;
  width:min(72vh,72vw);height:min(72vh,72vw);
  left:50%;top:50%;transform:translate(-50%,-50%);
  filter:contrast(1.15) saturate(1.2);
}
.orb{
  position:absolute;inset:0;
  border-radius:48% 52% 55% 45% / 50% 46% 54% 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(200,241,28,.28), transparent 42%),
    radial-gradient(circle at 72% 70%, rgba(200,241,28,.30), transparent 40%),
    radial-gradient(circle at 55% 40%, rgba(51,60,20,.9), rgba(0,0,0,.95) 75%);
  box-shadow:
    inset 0 0 90px rgba(200,241,28,.25),
    inset -30px -40px 120px rgba(0,0,0,.9),
    inset 25px 30px 90px rgba(200,241,28,.12),
    0 0 140px rgba(200,241,28,.14);
  animation:morph 14s ease-in-out infinite alternate, spin 60s linear infinite;
}
@keyframes morph{
  0%{border-radius:48% 52% 55% 45% / 50% 46% 54% 50%;}
  50%{border-radius:55% 45% 46% 54% / 44% 56% 48% 52%;}
  100%{border-radius:45% 55% 52% 48% / 55% 45% 52% 48%;}
}
@keyframes spin{to{transform:rotate(360deg);}}

/* только прямые дети .intro (фоновое видео/картинка героя), не спрей-лого в стопке */
.intro > video,.intro > img{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
/* фон героя battle: тот же слой, что у видео — под виньеткой (.intro::after, z-index 3) */
.intro .cosmic-bg{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;
  display:block;pointer-events:none;
}
/* Пока в интро статичная картинка, фолбек-шар не нужен: он существует на случай,
   когда видео не отдало кадры. Прячем ещё до первой отрисовки, чтобы не мигал.
   Логика шара для <video> не тронута и заработает, когда вернём ролик. */
.intro:has(> img) .orb-wrap{display:none;}
/* единственное исключение: картинка не отдалась — возвращаем фолбек,
   иначе первый экран остался бы пустым (класс вешает js) */
.intro.hero-failed .orb-wrap{display:block;}
/* Кадр героя 2:1, «10» занимает 48% его ширины. При cover цифра влезает целиком,
   только пока соотношение экрана шире ~1:1; на телефоне (примерно 1:2) она
   срезается с обеих сторон и перестаёт читаться. Поэтому на вертикальных экранах
   contain: цифра видна целиком, а полей не видно — фон картинки и фон страницы
   один и тот же чёрный. */
@media (max-aspect-ratio: 5/4){
  .intro img{object-fit:contain;}
}
/* Усиленная виньетка для героя с туманностью тоже снята — остаётся общая,
   та же, что у видео. Вернуть — раскомментировать.
.intro:has(.cosmic-bg)::after{
  background:
    linear-gradient(180deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.42) 13%, transparent 30%, transparent 66%, #050505 100%),
    radial-gradient(ellipse 118% 88% at 50% 45%, transparent 40%, rgba(5,5,5,.82) 100%);
}
*/
/* виньетка поверх видео: края в чёрный, чтобы шов со следующей секцией был бесшовным */
.intro::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    /* низ без затемнения в #050505: переход в экран даты делает его верхний градиент (.date-screen::before) */
    linear-gradient(180deg, rgba(5,5,5,.55) 0%, transparent 22%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 60%, rgba(5,5,5,.7) 100%);
}
.intro .scroll-hint{
  position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);z-index:5;
  font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--grey);
  text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-hint::after{
  content:'';width:1px;height:40px;background:linear-gradient(var(--acid),transparent);
  animation:dropline 1.8s ease-in-out infinite;
}
@keyframes dropline{0%{transform:scaleY(0);transform-origin:top;}60%{transform:scaleY(1);}100%{transform:scaleY(0);transform-origin:bottom;}}

/* =================================================================
   TUNNEL v5 — hero главной, перенесён из tunnel-hero.html как есть.
   Стены покрыты мелкой КВАДРАТНОЙ сеткой, одинаковой на всех стенах;
   заполнена только часть ячеек; камера всегда прямо, параллакса нет.
   На .ring и .wall НЕ ставить opacity и filter: они сплющивают
   preserve-3d, и коридор разваливается на плоские картинки.
   ================================================================= */
/* без собственного фона: под тоннелем чёрный .intro, а слой с перспективой, которому нечего
   рисовать, не занимает память */
.tunnel{--p:941px;position:absolute;inset:0;overflow:hidden;perspective:var(--p);perspective-origin:50% 50%}
/* сцена построена в половинном разрешении (K = .5 в main.js) и растянута обратно.
   Именно scale3d, а не scale(2): scale(2) не масштабирует Z, и коридор стал бы вдвое мельче */
.tunnel-scene{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:scale3d(2,2,2);
  /* движение коридора: сдвиг на K·SEG за цикл (--loop и --loop-dur задаёт main.js) —
     анимация transform идёт в композиторе, без JS в кадре */
  animation:tunnel-run var(--loop-dur,4.6s) linear infinite}
@keyframes tunnel-run{
  from{transform:scale3d(2,2,2) translateZ(0)}
  to{transform:scale3d(2,2,2) translateZ(var(--loop,0px))}
}
/* герой вне экрана — пауза (класс ставит IntersectionObserver); reduced motion — стоит всегда */
.tunnel.is-paused .tunnel-scene{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.tunnel-scene{animation-play-state:paused}}
.ring{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;will-change:transform}

.wall{
  position:absolute;left:0;top:0;background-color:#070806;
  /* сетка: линии по ячейкам, шаг = --cell на всех стенах, поэтому сходятся в углах.
     .75px в сцене половинного разрешения = 1.5px на экране */
  background-image:
    linear-gradient(rgba(255,255,255,.22) .75px,transparent .75px),
    linear-gradient(90deg,rgba(255,255,255,.22) .75px,transparent .75px);
  background-size:var(--cell) var(--cell);
  background-position:0 0;
  backface-visibility:hidden;
}
/* дальние кольца в четверть разрешения (main.js): линия .375px ×4 = те же 1.5px на экране */
.ring-far .wall{background-image:linear-gradient(rgba(255,255,255,.22) .375px,transparent .375px),linear-gradient(90deg,rgba(255,255,255,.22) .375px,transparent .375px)}
/* заполненная ячейка */
.cell{position:absolute;width:var(--cell);height:var(--cell)}
.cell.c-white{background:var(--white)}
.cell.c-acid{background:var(--acid)}
.cell.c-dark{background:#1a1f0c}
.cell.c-grey{background:#2a2c26}
.cell.w2{width:calc(var(--cell) * 2)}   /* иногда — двойная ширина, как в референсе */
/* ячейка с фото (массив TUNNEL_IMAGES в main.js), cover обрежет; тёмная подложка — пока фото грузится */
.cell.c-img{background-color:#1a1f0c;background-size:cover;background-position:center;background-repeat:no-repeat}
/* Туман — неподвижный оверлей. Дальние кольца сходятся к центру экрана, поэтому
   затемнение от центра к краям даёт ту же глубину, что прежняя плёнка на каждом
   кольце, но стены при этом никогда не перерисовываются. Центр глухой: там
   появляется кольцо, перенесённое в хвост. Радиусы — доли полуширины/полувысоты.
   --fog-core — радиус глухого центра. Его же читает main.js (visibleRings): кольца,
   целиком ушедшие в глухой центр, не строятся. Больше центр — меньше колец и памяти.
   На десктопе 20%: там и так ~90% темноты от .hero-fog под «10». */
.tunnel{--fog-core:.2}
/* затемнение сверху и снизу (было отдельным ::before) — первым слоем фона того же ::after:
   один экранный оверлей вместо двух */
.tunnel::after{content:'';position:absolute;left:0;top:0;width:50%;height:50%;pointer-events:none;z-index:2;
  transform-origin:0 0;transform:scale(2);   /* экранный градиент в половинном разрешении: плавный, потерь не видно */
  background:linear-gradient(180deg,rgba(5,5,5,.5) 0%,transparent 14%,transparent 86%,#050505 100%),
    radial-gradient(50% 50% at 50% 50%,var(--black) 0%,var(--black) calc(var(--fog-core)*100%),
    rgba(5,5,5,.6) calc(var(--fog-core)*100% + 4%),rgba(5,5,5,.3) calc(var(--fog-core)*100% + 9%),
    rgba(5,5,5,.12) calc(var(--fog-core)*100% + 17%),rgba(5,5,5,.03) calc(var(--fog-core)*100% + 32%),transparent 75%)}
/* узкий экран: ячейка мелкая, хвост ближе и крупнее */
@media(max-width:699px){
  .tunnel{--fog-core:.22}
  .tunnel::after{background:linear-gradient(180deg,rgba(5,5,5,.5) 0%,transparent 14%,transparent 86%,#050505 100%),
    radial-gradient(50% 50% at 50% 50%,var(--black) 0%,var(--black) calc(var(--fog-core)*100%),
    rgba(5,5,5,.6) calc(var(--fog-core)*100% + 6%),rgba(5,5,5,.3) calc(var(--fog-core)*100% + 14%),
    rgba(5,5,5,.12) calc(var(--fog-core)*100% + 28%),rgba(5,5,5,.03) calc(var(--fog-core)*100% + 48%),transparent 90%)}
}

/* по размеру цифры, а не на весь экран: блок поверх 3D-тоннеля — всегда отдельный слой,
   и во весь экран он занимал 1905×2160 */
/* z-index 4 — над виньеткой героя (.intro::after, 3): стопка выше и ниже прежней «10», и «лет» уходил в затемнение низа */
.hero-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:4}
/* туман под «10»: мягкое тёмное пятно. Только градиент — без backdrop-filter:
   размытие 3D-коридора под ним Safari пересчитывал каждый кадр. Прежняя маска
   (затухание 40% → 70%) заложена в стоп на 55% */
.hero-fog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  --fog-w:70vw;--fog-h:100vh;   /* под всей стопкой: лого и «10 лет» — вектор высокий, туман по высоте экрана */
  width:var(--fog-w,64vw);height:var(--fog-h,58vh);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(5,5,5,var(--fog-a,.96)) 0%,rgba(5,5,5,calc(var(--fog-a,.96)*.75)) 38%,rgba(5,5,5,calc(var(--fog-a,.96)*.18)) 55%,rgba(5,5,5,0) 70%)}
/* ---- стопка героя: спрей-лого + «10 лет» вектором, по одной вертикальной оси ---- */
.hero-stack{position:relative;display:flex;flex-direction:column;align-items:center;gap:0}
/* вся композиция — один вектор 813×619 («10», напыление BRITVA, «ЛЕТ»).
   Ширина как раньше ограничена и высотой экрана: вектор широкий, но лежит поверх тоннеля */
.hero-mark{
  --c1:#C8F11C; --c2:#F2F2F0; --c3:#C8F11C; --c4:#6E8A00;
  --angle:135deg; --dur:7s;
  position:relative;display:block;width:min(clamp(320px,44vw,820px),calc(60vh * 813 / 619));aspect-ratio:813/619;
}
/* три совмещённых слоя одного размера: тень → «10» → напыление и «ЛЕТ» */
.hero-mark > *{position:absolute;inset:0;width:100%;height:100%}
.hero-mark g{transform-box:fill-box;transform-origin:center}
/* «10»: тот же бегущий градиент, что был на прежнем векторе (gradient-10let.html),
   маска — сами цифры в координатах композиции. transform-origin — центр «10», а не бокса,
   иначе появление тянуло бы цифры к середине кадра */
.hero-g-ten{
  transform-origin:43.5% 35.4%;
  background:linear-gradient(var(--angle), var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));
  background-size:300% 300%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 813 619%22%3E%3Cpath d=%22M288.8 431.4H198.2V120C175.4 133.2 154 143.2 134 150V64.2C170.4 60.2 196 41.4 210.8 7.80001H288.8V431.4Z%22/%3E%3Cpath d=%22M574.475 119.4V319.8C574.475 361 564.475 391.2 544.475 410.4C524.475 429.2 491.275 438.6 444.875 438.6C403.675 438.6 371.675 430.4 348.875 414C326.075 397.6 314.675 367.6 314.675 324V120.6C314.675 97 317.875 77 324.275 60.6C331.075 44.2 340.675 31.8 353.075 23.4C365.475 14.6 378.875 8.60001 393.275 5.4C408.075 1.8 424.875 0 443.675 0C484.475 0 516.475 8.8 539.675 26.4C562.875 44 574.475 75 574.475 119.4ZM476.675 328.8V119.4C476.675 91.8 465.875 78 444.275 78C422.675 78 411.875 91.4 411.875 118.2V327.6C411.875 340.4 413.875 350.2 417.875 357C422.275 363.4 431.075 366.6 444.275 366.6C451.875 366.6 457.875 365.6 462.275 363.6C467.075 361.2 470.475 357.8 472.475 353.4C474.475 349 475.675 345.2 476.075 342C476.475 338.4 476.675 334 476.675 328.8Z%22/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 813 619%22%3E%3Cpath d=%22M288.8 431.4H198.2V120C175.4 133.2 154 143.2 134 150V64.2C170.4 60.2 196 41.4 210.8 7.80001H288.8V431.4Z%22/%3E%3Cpath d=%22M574.475 119.4V319.8C574.475 361 564.475 391.2 544.475 410.4C524.475 429.2 491.275 438.6 444.875 438.6C403.675 438.6 371.675 430.4 348.875 414C326.075 397.6 314.675 367.6 314.675 324V120.6C314.675 97 317.875 77 324.275 60.6C331.075 44.2 340.675 31.8 353.075 23.4C365.475 14.6 378.875 8.60001 393.275 5.4C408.075 1.8 424.875 0 443.675 0C484.475 0 516.475 8.8 539.675 26.4C562.875 44 574.475 75 574.475 119.4ZM476.675 328.8V119.4C476.675 91.8 465.875 78 444.275 78C422.675 78 411.875 91.4 411.875 118.2V327.6C411.875 340.4 413.875 350.2 417.875 357C422.275 363.4 431.075 366.6 444.275 366.6C451.875 366.6 457.875 365.6 462.275 363.6C467.075 361.2 470.475 357.8 472.475 353.4C474.475 349 475.675 345.2 476.075 342C476.475 338.4 476.675 334 476.675 328.8Z%22/%3E%3C/svg%3E") center/contain no-repeat;
  animation:gflow var(--dur) ease-in-out infinite alternate;   /* dir-alt: туда-обратно */
}
@keyframes gflow{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@media(max-width:699px){
  .hero-mark{width:min(88vw,calc(46vh * 813 / 619))}
  /* на телефоне вектор шире — туман шире экрана, иначе бока «10» вне плотной зоны */
  .hero-fog{--fog-w:130vw;--fog-h:90vh}
}
/* кнопка регистрации под стопкой. Отступ — общий для .btn-cta (5vh): у вектора снизу
   свой запас, напыление кончается на 574 из 619. .hero-center не ловит клики — возвращаем
   их кнопке. Селектор с .hero-stack: правила .btn-cta идут ниже по файлу и иначе перебьют */
.hero-stack .hero-cta{pointer-events:auto}
/* на телефоне кнопка не должна быть шире самого напыления BRITVA */
@media(max-width:699px){.hero-stack .hero-cta{padding:17px 42px;font-size:13px}}

/* появление по очереди, один раз: класс .is-in ставит main.js, когда лого загружено */
.js .hero-g-shadow,.js .hero-g-spray,.js .hero-g-ten,.js .hero-g-years,.js .hero-cta{opacity:0}
.hero-stack.is-in .hero-g-shadow,
.hero-stack.is-in .hero-g-spray{animation:heroLogoIn .6s cubic-bezier(.16,1,.3,1) both}
/* появление по группам вектора: напыление → «10» → «ЛЕТ» */
.hero-stack.is-in .hero-g-ten{animation:heroTenIn .7s cubic-bezier(.16,1,.3,1) .35s both, gflow var(--dur) ease-in-out infinite alternate}
.hero-stack.is-in .hero-g-years{animation:heroYearsIn .5s cubic-bezier(.16,1,.3,1) .8s both}
.hero-stack.is-in .hero-cta{animation:heroYearsIn .5s cubic-bezier(.16,1,.3,1) 1.15s both}
@keyframes heroLogoIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes heroTenIn{from{opacity:0;transform:translateY(30px) scale(.92)}to{opacity:1;transform:none}}
@keyframes heroYearsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .js .hero-g-shadow,.js .hero-g-spray,.js .hero-g-ten,.js .hero-g-years,.js .hero-cta,.hero-stack.is-in *{opacity:1!important;animation:none!important}
  .hero-g-ten{background-position:50% 50%}   /* статичный градиент: середина, видны все цвета */
}

/* ---------- ЭКРАН 2: 11.11 + ОТСЧЁТ ---------- */
/* секция = манифест сверху + экран 11.11 высотой в экран снизу; фон и холсты шара — на всю высоту */
.date-screen{
  position:relative;
  overflow:hidden;
}
/* верхняя кромка: лучи и зайчики не упираются в границу героя, а уходят в чёрный.
   z-index 3 — над холстами (#spots 1, #ball 2), под манифестом и 11.11 (4) */
.date-screen::before{
  /* выше и плотнее: верх манифеста глухой, лучи проступают только к низу манифеста; к 60vh сходит на нет — до 11.11 (70vh) */
  content:'';position:absolute;top:0;left:0;right:0;height:60vh;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,#050505 0%,#050505 30%,rgba(5,5,5,.88) 50%,rgba(5,5,5,.5) 75%,transparent 100%);
}
/* =================================================================
   DISCO — перенесено из disco-ball.html. Два слоя:
   1) canvas #spots — «зайчики» от шара: мягкие белые мазки ползут по фону
   2) canvas #ball  — сам шар, Three.js, тысячи зеркальных плиток
   В демо .disco был fixed на весь экран; здесь он внутри секции.
   ================================================================= */
.disco{position:absolute;inset:0;background:var(--black)}
.disco canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#spots{z-index:1}
/* размер и положение #ball задаёт js/disco.js — прямоугольник вокруг шара */
#ball{z-index:2;right:auto;bottom:auto}
/* виньетка под шапку/низ */
.disco::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,.5) 0%,transparent 16%,transparent 84%,#050505 100%)}

.date-content{
  position:relative;z-index:4;
  min-height:100vh;justify-content:center;   /* 11.11 по центру экрана, когда до него доскроллили */
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 20px;pointer-events:none;
  text-shadow:0 2px 24px rgba(0,0,0,.7);   /* читается поверх зайчиков */
}
.date-content .btn-cta{pointer-events:auto;}

/* ---------- МАНИФЕСТ: верх экрана даты ---------- */
.manifesto{
  position:relative;z-index:4;
  min-height:70vh;display:flex;align-items:center;
  padding:clamp(80px,12vh,160px) var(--gutter);
  overflow:hidden;
}
.manifesto > *{position:relative;z-index:1}
.manifesto-label,.manifesto p{max-width:1180px;text-align:center}
.manifesto-label{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:11px;letter-spacing:.25em;color:var(--acid);margin-bottom:28px;
}
.manifesto p{
  /* Regular Extended: AkzidenzGroteskPro-Ext.woff2 — @font-face 'Akzidenz Grotesk Pro Ext', 400 */
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:400;
  font-size:clamp(24px,2.6vw,46px);line-height:1.3;color:var(--white);
  text-shadow:0 2px 24px rgba(0,0,0,.7);   /* как у 11.11: читается поверх лучей */
}
.manifesto p em{font-style:normal;color:var(--acid)}
.manifesto p + p{margin-top:.6em}
/* колонка: лейбл над текстом, всё по центру */
.manifesto{flex-direction:column;justify-content:center;align-items:center}
/* едва заметный дрейф света. Только transform: блок вдвое меньше и растянут scale(2) —
   плавный градиент в половинном разрешении, слой не перерисовывается */
.manifesto::before{
  content:'';position:absolute;left:-10%;top:-10%;width:60%;height:60%;z-index:0;pointer-events:none;
  transform-origin:0 0;transform:scale(2);
  background:radial-gradient(ellipse 60% 50% at 30% 50%,rgba(255,255,255,.035),transparent 70%);
  animation:manifestoDrift 40s linear infinite;
}
/* круг из восьми точек; translate после scale(2) — в координатах блока, на экране вдвое больше */
@keyframes manifestoDrift{
  0%{transform:scale(2) translate(2.5%,0)}
  12.5%{transform:scale(2) translate(1.77%,1.77%)}
  25%{transform:scale(2) translate(0,2.5%)}
  37.5%{transform:scale(2) translate(-1.77%,1.77%)}
  50%{transform:scale(2) translate(-2.5%,0)}
  62.5%{transform:scale(2) translate(-1.77%,-1.77%)}
  75%{transform:scale(2) translate(0,-2.5%)}
  87.5%{transform:scale(2) translate(1.77%,-1.77%)}
  100%{transform:scale(2) translate(2.5%,0)}
}
@media(prefers-reduced-motion:reduce){.manifesto::before{animation:none}}
/* 11.11 — вектор (assets/img/11-11.svg, заинлайнен), заливка currentColor = var(--acid); без тени (у .date-content она для текста) */
.date-big{display:block;width:clamp(280px,40vw,900px);height:auto;aspect-ratio:434/345;color:var(--acid)}
.date-screen h2{
  margin-top:3vh;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(22px,3vw,48px);line-height:1.1;
  text-transform:uppercase;color:var(--white);
}
.date-screen h2 em{font-style:normal;color:var(--acid);}


/* .countdown удалён вместе с блоком отсчёта на экране даты;
   классы .cd-* остались как база для прилипшей панели */
.cd-item{min-width:70px;}
.cd-num{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(28px,4.5vw,56px);
  color:var(--white);
  font-variant-numeric:tabular-nums;
}
.cd-label{
  margin-top:6px;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);
}
.cd-sep{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:300;
  font-size:clamp(24px,4vw,48px);color:var(--acid);
  align-self:flex-start;line-height:1.3;
  animation:blink 1s steps(2) infinite;
}
@keyframes blink{50%{opacity:.25;}}

/* «Когда / Где» столбиком по центру */
.date-meta{
  margin-top:5vh;
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.date-meta b{
  display:block;margin-bottom:6px;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:500;
  font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--acid);
}
.date-meta span{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(16px,1.6vw,24px);text-transform:uppercase;color:var(--white);
}

.btn-cta{
  margin-top:5vh;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--black);background:var(--acid);
  border:0;padding:20px 58px;cursor:pointer;
  border-radius:20px 0 20px 0;
}
/* ---- hover кнопок (.btn-cta, .submit, .btn-reg): заливка белым слева направо ----
   Без тени и подъёма. ::before под текстом — isolation + z-index −1; overflow:hidden
   режет заливку по тем же срезанным углам (border-radius), что и саму кнопку. */
.btn-cta,.submit,.btn-reg{position:relative;overflow:hidden;isolation:isolate}
.btn-cta::before,.submit::before,.btn-reg::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:#fff;transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.btn-cta:not(:disabled):focus-visible::before,.submit:not(:disabled):focus-visible::before,.btn-reg:focus-visible::before{transform:scaleX(1)}
@media(hover:hover){
  .btn-cta:not(:disabled):hover::before,.submit:not(:disabled):hover::before,.btn-reg:hover::before{transform:scaleX(1)}
  .btn-reg:hover{color:#000}   /* обводочная кнопка: текст чернеет на белой заливке */
}

/* ---- отправка заявки: состояние кнопки ----
   Вместо спиннера — та же белая заливка ::before, что и на hover, но её ведёт
   анимация: за 1,4 с до 0.9, дальше медленно ползёт к 0.97, пока не пришёл ответ.
   Ответ доводит заливку до 1 (ок) или откатывает в 0 (ошибка). Долю, на которой
   застала анимация, js снимает с псевдоэлемента и кладёт в --send-fill: без неё
   заливка при снятии анимации прыгала бы в ноль. Всё на transform, раскладка не
   трогается — заливка идёт в композиторе и не зависит от занятости главного потока. */
.btn-cta.is-sending::before,.submit.is-sending::before{animation:btnSend 20s forwards;}
@keyframes btnSend{
  0%  {transform:scaleX(0);   animation-timing-function:cubic-bezier(.16,1,.3,1);}
  7%  {transform:scaleX(.9);  animation-timing-function:linear;}   /* 7% от 20 с = 1,4 с */
  100%{transform:scaleX(.97);}
}
.btn-cta.is-sent::before,.submit.is-sent::before{
  animation:none;transform:scaleX(var(--send-fill,1));transition:transform .15s linear;
}
.btn-cta.is-failed::before,.submit.is-failed::before{
  animation:none;transform:scaleX(var(--send-fill,0));transition:transform .25s cubic-bezier(.16,1,.3,1);
}
/* Кнопка на время отправки выключена, чтобы не отправить дважды, но выглядеть
   «серой неактивной» она не должна: возвращаем ей обычный вид поверх :disabled */
.submit.is-sending:disabled,.submit.is-sent:disabled,
.cta-form-slot .btn-cta.is-sending:disabled,.cta-form-slot .btn-cta.is-sent:disabled,
.cta-cosmic .cta-form-slot .btn-cta.is-sending:disabled,
.cta-cosmic .cta-form-slot .btn-cta.is-sent:disabled{
  background:var(--acid);color:var(--black);box-shadow:none;cursor:default;
}
@media(prefers-reduced-motion:reduce){
  /* без движения: только смена текста на кнопке */
  .btn-cta.is-sending::before,.submit.is-sending::before,
  .btn-cta.is-sent::before,.submit.is-sent::before,
  .btn-cta.is-failed::before,.submit.is-failed::before{animation:none;transform:scaleX(0);transition:none;}
}

/* ---------- ЭКРАН 3: ПРОГРАММА (квадратные карточки с ASCII-сценами) ---------- */
.program{
  position:relative;
  padding:14vh var(--gutter) 16vh;
  display:flex;flex-direction:column;align-items:center;
}
.program h2{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(32px,4vw,72px);line-height:1.1;text-transform:uppercase;
  text-align:center;
}
.program h2 em{font-style:normal;color:var(--acid);}
.program .program-sub{
  margin-top:14px;font-size:13px;letter-spacing:.35em;text-transform:uppercase;color:var(--grey);
}
/* «Что будет» на главной — подзаголовок обычной строкой */
#program .program-sub{
  font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;font-weight:400;
  font-size:clamp(18px,1.6vw,26px);letter-spacing:0;text-transform:none;color:var(--grey);
}
/* квадратные карточки: 4 в ряд на широком, 2×2 до 640px, одна колонка ниже */
/* HUD-сетка программы: 4 в ряд на широком, 2×2 до 640px, одна колонка ниже.
   Плитки впритык, линии между ними — фон сетки в 1px-зазоре (как у судей на battle) */
.cards-wrap{margin-top:7vh;width:100%;max-width:none}
.cards-panel{background:#070806}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.card{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:#070806;
}
/* hover — заливка слева направо, как у кнопок; на плитке едва заметная, под сценой и текстом */
.card::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:rgba(255,255,255,.06);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.card:hover::before{transform:scaleX(1)}}
/* текст по центру, сверху */
.card-text{position:absolute;left:0;right:0;top:clamp(20px,2vw,34px);padding:0 clamp(14px,1.4vw,26px);z-index:2;text-align:center}
.card h3{font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;font-size:clamp(22px,2.1vw,36px);line-height:1.15;text-transform:uppercase}
.card p{margin-top:.6em;color:var(--grey);font-size:clamp(15px,1.2vw,20px);line-height:1.45}
/* холст на всю плитку; сцена рисуется квадратом во всю ширину, прижатым к низу (main.js) —
   плитка 4:5, и над сценой остаётся полоса под текст */
.card canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* затемнение под текстом: верхняя полоса над сценой глухая, дальше плавно в сцену */
.card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#070806 0%,rgba(7,8,6,.92) 30%,rgba(7,8,6,.6) 42%,transparent 58%)}
/* ASCII-портрет: общий слой канваса (battle). Карточки главной не затрагивает. */
.ascii-portrait{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;display:block;
}

.program .btn-cta{margin-top:8vh;}

/* узкая плитка (4 в ряд на 1401–1700px): заголовок в три строки опускает текст почти до середины —
   сцену сдвигаем ниже, затемнение тянем следом */
.card{container-type:inline-size}
@container (max-width:400px){
  .card canvas{transform:translateY(12%)}
  .card::after{background:linear-gradient(180deg,#070806 0%,rgba(7,8,6,.92) 40%,rgba(7,8,6,.6) 52%,transparent 66%)}
}
@media(max-width:1400px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .cards{grid-template-columns:1fr}
  /* одна колонка: плитка широкая, 4:5 давала пустоту между подзаголовком и сценой (сцена у низа,
     да ещё сдвиг 12% из правила узких плиток выше). Квадрат: сцена во всю плитку, по центру */
  .card{aspect-ratio:1/1}
  .card canvas{transform:none}
  .card::after{background:linear-gradient(180deg,#070806 0%,rgba(7,8,6,.9) 22%,rgba(7,8,6,.45) 34%,transparent 46%)}
}

/* ---------- ПОП-АП РЕГИСТРАЦИИ ---------- */
.modal{
  position:fixed;inset:0;z-index:70;
  display:flex;align-items:flex-start;justify-content:center;
  padding:20px;
  overflow-y:auto;            /* высокая форма (заявка на баттл) должна прокручиваться */
  opacity:0;visibility:hidden;
  transition:opacity .35s ease, visibility .35s;
}
.modal.open{opacity:1;visibility:visible;}
.modal-backdrop{
  position:absolute;inset:0;
  background:rgba(5,5,5,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#smoke{
  position:absolute;inset:0;
  width:100%;height:100%;
  filter:blur(2px);pointer-events:none;
}
.form-card{
  position:relative;width:100%;max-width:520px;
  margin:auto;                /* центрируем, пока влезает; дальше — обычная прокрутка */
  padding:clamp(30px,3vw,50px);
  border:1px solid var(--line);
  border-radius:32px 0 32px 0;
  background:linear-gradient(150deg, rgba(20,22,18,.92), rgba(10,12,9,.94) 55%, rgba(27,30,14,.92));
  box-shadow:0 0 90px rgba(200,241,28,.10), 0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
  text-align:left;
  transform:translateY(26px) scale(.97);
  transition:transform .4s cubic-bezier(.2,.9,.3,1.1);
}
.modal.open .form-card{transform:translateY(0) scale(1);}
.form-card::before{
  content:'РЕГИСТРАЦИЯ';
  position:absolute;top:-11px;left:36px;
  background:var(--black);padding:0 12px;
  font-size:11px;letter-spacing:.4em;color:var(--acid);
}
.modal-close{
  position:absolute;top:16px;right:20px;
  background:none;border:0;color:var(--grey);
  font-size:26px;line-height:1;cursor:pointer;
  transition:color .2s, transform .2s;
}
.modal-close:hover{color:var(--acid);transform:rotate(90deg);}
.form-title{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;font-size:20px;
  text-transform:uppercase;margin-bottom:28px;
}
.form-title em{font-style:normal;color:var(--acid);}
.field{position:relative;margin-bottom:34px;}
.field input{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:12px 2px;color:var(--white);
  font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;font-size:16px;
  outline:none;transition:border-color .3s;
}
.field input:focus{border-color:var(--acid);}
/* поле, на которое указала причина отказа с бэкенда: подсветка снимается
   первой же правкой (обработчик в js/main.js) */
.field.is-error input,.field.is-error select,.role-dep.is-error input{border-bottom-color:#ff5a4a;}
.field label{
  position:absolute;left:2px;top:12px;
  color:var(--grey);font-size:15px;pointer-events:none;
  transition:all .25s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:-12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acid);
}
/* ---- выбор роли и зависимые поля (форма праздника) ---- */
/* select под стиль полей: своя стрелка, системный список открывается как обычно —
   на iOS это родное колесо, на Android — нижний лист */
.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:12px 22px 12px 2px;color:var(--white);
  font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;font-size:16px;
  outline:none;transition:border-color .3s;cursor:pointer;
  appearance:none;-webkit-appearance:none;border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C8F11C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;
}
.field select:focus{border-color:var(--acid);}
/* выпадающий список рисует система — задаём хотя бы цвета, иначе белым по белому */
.field select option{background:#0d0d0d;color:var(--white);}
/* пока не выбрано, select пуст и невалиден — лейбл стоит как placeholder, потом уезжает вверх */
.field select:focus + label,
.field select:valid + label{
  top:-12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acid);
}
/* ---- HUD-списки (js/hud-select.js): кастомная выпадашка вместо нативной ----
   Нативный select оставлен в разметке ради значения и валидации, но не виден:
   не display:none — иначе браузер считает поле нефокусируемым и молча не показывает
   сообщение о незаполненном обязательном поле */
.hud-native{
  position:absolute;left:0;top:0;width:100%;height:100%;
  opacity:0;pointer-events:none;
}
.hud-field{position:relative;}
/* кнопка-поле: та же нижняя линия и шеврон, что у select до подмены */
.hud-btn{
  width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:12px 22px 12px 2px;color:var(--white);
  font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;font-size:16px;line-height:1.4;
  outline:none;cursor:pointer;transition:border-color .3s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C8F11C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;
}
.hud-btn-text{display:block;min-height:1.4em;}
.hud-btn:focus-visible,.hud-field.is-open .hud-btn{border-color:var(--acid);}
.hud-field.is-open .hud-btn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M11 7l-5-5-5 5' fill='none' stroke='%23C8F11C' stroke-width='1.5'/%3E%3C/svg%3E");}
/* плавающий лейбл: класс ставит компонент, когда значение выбрано */
.hud-field.is-filled label,
.hud-field.is-open label,
.hud-field-combo input:focus + label,
.hud-field-combo input:not(:placeholder-shown) + label{
  top:-12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acid);
}
/* сам список: HUD-панель со срезанными углами */
.hud-pop{
  position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:8px;
  list-style:none;padding:6px 0;max-height:min(300px,50vh);overflow-y:auto;overscroll-behavior:contain;
  background:#070806;border:1px solid var(--line);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:0 24px 60px rgba(0,0,0,.7);
  opacity:0;transform:translateY(-8px);
  transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);
}
.hud-pop.is-on{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.hud-pop{transition:none;}}
.hud-opt{
  position:relative;padding:14px 16px;cursor:pointer;
  font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;font-size:15px;line-height:1.3;
  color:rgba(242,242,240,.75);transition:color .18s,background .18s;
}
/* наведение и клавиатура — одно состояние: кислотная полоса слева, текст белый */
.hud-opt::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acid);
  transform:scaleY(0);transform-origin:center;transition:transform .18s;
}
.hud-opt.is-active,.hud-opt:hover{color:var(--white);background:rgba(200,241,28,.06);}
.hud-opt.is-active::before,.hud-opt:hover::before{transform:scaleY(1);}
.hud-opt[aria-selected="true"]{color:var(--acid);}
.hud-pop::-webkit-scrollbar{width:8px;}
.hud-pop::-webkit-scrollbar-thumb{background:rgba(242,242,240,.18);}

/* появление зависимого поля — тем же движением, что у .rv */
.role-dep{opacity:0;transform:translateY(10px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);}
.role-dep.is-on{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .role-dep{transition:none;opacity:1;transform:none;}
}
/* сеть франчайзи — две кнопки-радио, как дисциплины на battle */
.role-net{margin-bottom:34px;}
.net-title{
  margin-bottom:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acid);
}
.net-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.net-pick{position:relative;display:block;}
.net-pick input{position:absolute;opacity:0;width:0;height:0;}
.net-pick span{
  display:block;padding:15px 12px;text-align:center;cursor:pointer;
  border:1px solid var(--line);border-radius:14px 0 14px 0;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:500;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  transition:border-color .25s, color .25s, background .25s;
}
.net-pick span:hover{border-color:rgba(200,241,28,.5);color:var(--white);}
.net-pick input:checked + span{background:var(--acid);border-color:var(--acid);color:var(--black);}
.net-pick input:focus-visible + span{border-color:var(--acid);}
.submit{
  width:100%;margin-top:6px;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--black);background:var(--acid);
  border:0;padding:20px;cursor:pointer;
  border-radius:20px 0 20px 0;
}
.form-note{margin-top:18px;font-size:12px;color:var(--grey);line-height:1.6;}
/* ошибка отправки — под кнопкой */
.form-error{margin-top:14px;font-size:14px;line-height:1.5;color:#ff6b5a;}
.form-error a{color:inherit;white-space:nowrap}
.form-error p{margin:0;}
/* «Попробовать ещё раз» под сообщением «сервер недоступен»: повтор той же формы */
.form-retry{
  display:inline-block;margin-top:12px;padding:9px 16px;cursor:pointer;
  font:inherit;font-size:13px;letter-spacing:.06em;
  color:var(--acid);background:none;border:1px solid var(--acid);border-radius:12px 0 12px 0;
}
.form-retry:hover{background:var(--acid);color:var(--black);}
/* основная отправка упала, а резерв заявку сохранил — это не ошибка: спокойный цвет */
.form-error.is-saved,.cta-cosmic .form-error.is-saved{color:var(--white);}
/* ---------- два обязательных согласия в формах ---------- */
.consents{display:grid;gap:12px;margin:22px 0 18px;text-align:left}
.consent{position:relative;display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;cursor:pointer;
  font-size:13px;line-height:1.45;color:var(--grey)}
.consent input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.consent .box{width:20px;height:20px;margin-top:-1px;border:1px solid rgba(200,241,28,.45);display:grid;place-items:center;transition:background .15s,border-color .15s}
.consent .box::after{content:'';width:10px;height:5px;border-left:2px solid var(--black);border-bottom:2px solid var(--black);
  transform:translateY(-1px) rotate(-45deg);opacity:0;transition:opacity .15s}
.consent input:checked + .box{background:var(--acid);border-color:var(--acid)}
.consent input:checked + .box::after{opacity:1}
.consent input:focus-visible + .box{outline:2px solid var(--acid);outline-offset:2px}
.consent:hover .box{border-color:var(--acid)}
.consent a{color:var(--acid);text-decoration:underline;text-underline-offset:3px}
.consent a:hover{text-decoration-thickness:2px}
.consent.is-error .box{border-color:#ff5a4a}
.consent-err{grid-column:2;font-size:12px;color:#ff5a4a;margin-top:-4px}
.consent-err[hidden]{display:none}
/* на чёрной подложке финальной формы battle текст кислотный, как вся форма */
.cta-cosmic .consent{color:rgba(200,241,28,.7)}

/* honeypot: вне экрана, но не display:none — иначе часть ботов его пропускает */
.hp-field{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-success{display:none;text-align:center;padding:50px 0;}
.form-success .ok{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;font-size:26px;color:var(--acid);
  text-transform:uppercase;margin-bottom:16px;
}
.form-success p{color:var(--grey);}

footer{
  border-top:1px solid var(--line);
  padding:26px var(--gutter);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--grey);
}
footer b{font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;color:var(--acid);letter-spacing:.1em;}
/* документы в подвале: обязательные ссылки, тем же кеглем, что и подпись */
.foot-docs{display:flex;flex-wrap:wrap;gap:6px 22px;}
.foot-docs a{color:var(--grey);text-decoration:none;}
.foot-docs a:hover{color:var(--acid);}
/* телефон: по центру, в столбик; снизу место под прилипшую панель отсчёта — иначе футер под ней */
@media(max-width:699px){
  footer{flex-direction:column;gap:10px;text-align:center;padding-bottom:110px}
  .foot-docs{justify-content:center;}
}


/* ============================================================
   BATTLE.HTML — только то, чего нет в компонентах главной.
   Палитра, шрифты и все базовые блоки переиспользуются как есть.
   ============================================================ */

/* .btn-reg как ссылка ведёт себя как кнопка */
a.btn-reg{display:inline-block;text-decoration:none;}


/* ---------- прилипший отсчёт (обе страницы) ---------- */
/* Сплошная кислотная плашка вместо стекла: без backdrop-filter, матовости и зерна.
   Срезанные углы — тот же clip-path в 7px, что у подложки CTA */
.cd-bar{
  position:fixed;left:50%;bottom:16px;z-index:30;
  padding:10px 22px;
  background:var(--acid);
  clip-path:polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  opacity:0;transform:translateX(-50%) translateY(12px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;   /* панель ничего не ловит: ни кнопку героя, ни кнопки секций */
}
.cd-bar.is-visible{opacity:1;transform:translateX(-50%) translateY(0);}
.cd-bar .cd{
  position:relative;z-index:1;
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(10px,2vw,22px);
}
.cd-bar .cd-item{min-width:0;text-align:center;}
.cd-bar .cd-num{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(16px,2vw,24px);line-height:1.1;
  font-variant-numeric:tabular-nums;color:#050505;
}
.cd-bar .cd-label{
  margin-top:2px;
  font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:#050505;
}
.cd-bar .cd-sep{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:300;
  font-size:clamp(14px,1.8vw,20px);line-height:1.2;color:#050505;
  align-self:flex-start;
  animation:blink 1s steps(2) infinite;
}
@media(max-width:600px){
  .cd-bar{padding:8px 14px;max-width:calc(100% - 20px);}
}
@media(prefers-reduced-motion:reduce){
  .cd-bar{transition:none;}
  .cd-bar .cd-sep{animation:none;}
}

/* ---------- ЭКРАН 1: текст поверх видео ---------- */
.hero-content{
  position:absolute;z-index:5;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:max-content;max-width:min(860px, calc(100% - 40px));
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:clamp(28px,4vw,52px) clamp(32px,6vw,80px);
  pointer-events:none;
}
/* контент — над матовостью и зерном стекла */
.hero-content > *{position:relative;z-index:1;}
.hero-content .btn-cta{pointer-events:auto;}
/* на светлом стекле текст тёмный */
.hero-content h1,.hero-content .hero-prize{color:#050505;}
.hero-content .hero-kicker,.hero-content .hero-sub{color:rgba(5,5,5,.6);}
/* Затемнение под текстом героя снято по просьбе: нужно видеть настоящие цвета
   туманности. Вернуть — раскомментировать блок ниже.
.hero-content::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 72% 58% at 50% 50%,
    rgba(5,5,5,.86) 0%, rgba(5,5,5,.74) 40%, rgba(5,5,5,.38) 62%, rgba(5,5,5,0) 80%);
}
*/
/* Тени с текста героя сняты по просьбе: читаемость потом решится стеклянной
   подложкой. Вернуть — раскомментировать. Третья строка — тень под кнопкой,
   а не на тексте; убрана заодно, как часть той же правки на читаемость.
.hero-content h1,.hero-content .hero-prize{text-shadow:0 2px 26px rgba(0,0,0,.75);}
.hero-content .hero-kicker,.hero-content .hero-sub{text-shadow:0 1px 14px rgba(0,0,0,.9);}
.hero-content .btn-cta{box-shadow:0 10px 40px rgba(0,0,0,.6);}
*/
.hero-kicker{
  font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--grey);
  margin-bottom:22px;
}
.hero-content h1{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:900;
  font-size:clamp(26px,5.6vw,78px);line-height:1.02;text-transform:uppercase;
  max-width:14em;
}
.hero-prize{
  margin-top:26px;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(17px,2.6vw,34px);letter-spacing:.04em;text-transform:uppercase;
  color:var(--acid);
}
.hero-sub{
  margin-top:18px;
  font-size:clamp(13px,1.4vw,17px);letter-spacing:.06em;color:var(--grey);
}
.hero-content .btn-cta{margin-top:4vh;}

/* секции battle идут стопкой — подрезаем вертикальный ритм .program */
.program.tight{padding:9vh var(--gutter) 9vh;}

/* ---------- ЭКРАН 5: УЧАСТИЕ ---------- */
.entry-list{
  margin-top:6vh;width:100%;max-width:720px;list-style:none;
}
.entry-list li{
  padding:20px 0;border-bottom:1px solid var(--line);
  font-size:clamp(14px,1.5vw,17px);line-height:1.6;color:var(--grey);
}
.entry-list li:first-child{border-top:1px solid var(--line);}
.entry-list b{color:var(--white);font-weight:600;}
.entry-list a{color:var(--acid);text-decoration:none;border-bottom:1px solid rgba(200,241,28,.4);}
.entry-list a:hover{border-bottom-color:var(--acid);}

/* ---------- МОДАЛКА ЗАЯВКИ: чекбоксы дисциплин ---------- */
.modal-battle .form-card::before{content:'ЗАЯВКА НА БАТТЛ';}
.disc-label{
  margin-bottom:14px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acid);
}
.disc-list{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;
}
.disc-pick{position:relative;display:block;}
.disc-pick input{position:absolute;opacity:0;width:0;height:0;}
.disc-pick span{
  display:block;padding:15px 12px;text-align:center;cursor:pointer;
  border:1px solid var(--line);border-radius:14px 0 14px 0;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:500;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  transition:border-color .25s, color .25s, background .25s;
}
.disc-pick span:hover{border-color:rgba(200,241,28,.5);color:var(--white);}
.disc-pick input:checked + span{background:var(--acid);border-color:var(--acid);color:var(--black);}
.disc-pick input:focus-visible + span{border-color:var(--acid);}
.disc-total{
  margin-bottom:26px;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;font-size:14px;
  color:var(--acid);min-height:1.2em;
}
.submit:disabled{
  background:rgba(242,242,240,.15);color:var(--grey);cursor:not-allowed;
}

/* якорные переходы: заголовок не должен уезжать под фикс-шапку */
#disciplines,#rules,#prizes,#entry{scroll-margin-top:96px;}

/* ---------- адаптив battle ---------- */
@media(max-width:860px){

}
/* шапка на телефоне: логотип и кнопка — ужимаем */
@media(max-width:560px){
  .topbar{padding:16px var(--gutter);}
  .topbar .logo{font-size:15px;}
  .btn-reg{font-size:10px;letter-spacing:.12em;padding:10px 14px;}
  /* только кнопки battle — на главной тексты короткие и правки не нужны */
  .hero-content .btn-cta,#entry .btn-cta{padding:18px 26px;font-size:13px;letter-spacing:.14em;}
}
@media(max-width:420px){
  /* логотип по центру: кнопке остаётся треть ширины — ужимаем, иначе упирается в логотип */
  .topbar .btn-reg{letter-spacing:.06em;padding:9px 10px;}
  .disc-list{grid-template-columns:1fr;}
  .countdown{gap:10px;}
  .cd-item{min-width:56px;}
  .cd-num{font-size:26px;}
  .cd-sep{font-size:20px;}
}
@media(max-width:380px){
  .topbar .logo{font-size:13px;letter-spacing:.04em;}
  .topbar .btn-reg{font-size:9px;letter-spacing:.03em;padding:8px 8px;}
}

/* =================================================================
   BATTLE HERO — versus-экран (battle.html). Перенесено из battle-hero/index.html
   как есть; отличия только интеграционные:
   - все правила заведены под .vs: имена вроде .logo, .btn, .center слишком общие
     для общей таблицы двух страниц;
   - шрифты демо (Unbounded/Manrope) заменены на шрифты сайта;
   - туманности и стеклянной подложки прежнего hero здесь нет.

   Всё держится на transform и opacity, filter в кадре нет: свечения — статичные
   радиальные градиенты, у них анимируется только opacity и scale.
   ================================================================= */
.vs{position:relative;height:100vh;min-height:640px;overflow:hidden;background:var(--black);--lilac:#B388FF}

/* --- фон: тонкая сетка + пол --- */
.vs .vs-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:120px 120px;
  -webkit-mask:radial-gradient(ellipse 70% 60% at 50% 55%,#000 30%,transparent 100%);mask:radial-gradient(ellipse 70% 60% at 50% 55%,#000 30%,transparent 100%)}
.vs .vs-floor{position:absolute;left:0;right:0;bottom:0;height:34vh;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.035));
  -webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.vs .vs-floor::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}

/* --- свечения за бойцами --- */
/* Появление — на внешнем слое, дыхание — на внутреннем. Если повесить и то и другое
   на transform одного элемента, браузер отказывается отдавать анимацию компоновщику
   и считает её на главном потоке: каждый кадр стоит пересчёта стиля всей страницы. */
.vs .glow{position:absolute;bottom:-10vh;width:70vw;height:110vh;pointer-events:none;opacity:0;transform:scale(.8);
  transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.vs .glow i{position:absolute;inset:0;display:block}
.vs .glow--l{left:-24vw}
.vs .glow--r{right:-24vw}
.vs .glow--l i{background:radial-gradient(ellipse 45% 55% at 50% 60%,rgba(179,136,255,.20),rgba(179,136,255,.06) 45%,transparent 70%)}
.vs .glow--r i{background:radial-gradient(ellipse 45% 55% at 50% 60%,rgba(200,241,28,.18),rgba(200,241,28,.05) 45%,transparent 70%)}
/* в покое чуть притушены: иначе «ярче при наведении» упирается в потолок — opacity больше 1 не бывает */
.vs.is-in .glow{opacity:.85;transform:scale(1)}
/* дыхание */
.vs.is-in .glow--l i{animation:breatheL 5.5s 1.2s ease-in-out infinite alternate}
.vs.is-in .glow--r i{animation:breatheR 6.5s 1.4s ease-in-out infinite alternate}
/* scale3d и translateZ здесь не украшение: слой свечения размером в экран с плоским
   scale браузер считает на главном потоке, и каждый кадр стоит пересчёта стиля */
@keyframes breatheL{from{transform:translateZ(0) scale3d(1,1,1)}to{transform:translateZ(0) scale3d(1.06,1.06,1)}}
@keyframes breatheR{from{transform:translateZ(0) scale3d(1,1,1)}to{transform:translateZ(0) scale3d(1.07,1.07,1)}}

/* --- бойцы --- */
.vs .fighter{position:absolute;bottom:0;height:min(92vh,1000px);pointer-events:none;
  will-change:transform;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .6s ease;opacity:0}
.vs .fighter img{height:100%;width:auto;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.vs .fighter--l{left:clamp(-6vw,2vw,6vw);transform:translateX(-30vw)}
.vs .fighter--r{right:clamp(-6vw,2vw,6vw);transform:translateX(30vw)}
.vs.is-in .fighter{opacity:1;transform:translateX(0)}
/* idle: едва заметное покачивание в стойке */
.vs.is-in .fighter--l img{animation:idleL 3.2s 1.1s ease-in-out infinite alternate}
.vs.is-in .fighter--r img{animation:idleR 3.6s 1.3s ease-in-out infinite alternate}
@keyframes idleL{from{transform:translateY(0) rotate(0)}to{transform:translateY(-6px) rotate(-.4deg)}}
@keyframes idleR{from{transform:translateY(0) rotate(0)}to{transform:translateY(-6px) rotate(.4deg)}}
/* Наведение ловят не сами картинки, а две невидимые зоны по краям: у png бойца
   прямоугольник шириной почти в половину экрана, и курсор «не уходил» с него даже
   в центре — состояние залипало. Зоны лежат под лого и кнопкой, клики им не мешают. */
.vs .zone{position:absolute;top:0;bottom:0;width:34vw;z-index:2}
.vs .zone--l{left:0}
.vs .zone--r{right:0}
/* hover: шаг навстречу + свечение ярче */
.vs:has(.zone--l:hover) .fighter--l{transform:translateX(2.5vw)}
.vs:has(.zone--r:hover) .fighter--r{transform:translateX(-2.5vw)}
.vs:has(.zone--l:hover) .glow--l{opacity:1}
.vs:has(.zone--r:hover) .glow--r{opacity:1}
/* когда один наведён — второй чуть отступает */
.vs:has(.zone--l:hover) .fighter--r{transform:translateX(1.5vw)}
.vs:has(.zone--r:hover) .fighter--l{transform:translateX(-1.5vw)}

/* --- лого-стопка --- */
.vs .logo{position:absolute;left:50%;top:clamp(40px,7vh,90px);transform:translateX(-50%);width:min(38vw,540px);z-index:3;pointer-events:none}
.vs .logo img{display:block;width:100%;height:auto}
.vs .logo .l-barber{margin-top:-4%}
/* «battle» — крупно, по шву между строками, чуть под наклоном исходника */
.vs .logo .l-battle{position:absolute;left:8%;top:14%;width:84%;z-index:2;display:block}
/* III — вдвое шире прежнего и ниже BARBER: на 56% ширины цифра терялась.
   Шире самого блока лого, поэтому left отрицательный — так она остаётся по центру. */
.vs .logo .l-iii{position:absolute;left:-6%;top:82%;width:112%;z-index:1}
/* появление по частям */
.vs .logo > *{opacity:0}
.vs.is-in .l-britva{animation:slamL .55s .35s cubic-bezier(.16,1,.3,1) forwards}
.vs.is-in .l-barber{animation:slamR .55s .5s cubic-bezier(.16,1,.3,1) forwards}
.vs.is-in .l-iii{animation:rise .6s 1.1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes slamL{from{opacity:0;transform:translateX(-40px) scale(1.15)}to{opacity:1;transform:none}}
@keyframes slamR{from{opacity:0;transform:translateX(40px) scale(1.15)}to{opacity:1;transform:none}}
@keyframes swoosh{from{opacity:0;transform:translateX(-60px) skewX(-12deg)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
/* после появления — тонкое мерцание «battle», как у неона */
/* въезд — на обёртке, мерцание — на самой картинке: два эффекта на opacity одного
   элемента опять вернули бы анимацию на главный поток */
.vs.is-in .l-battle{animation:swoosh .6s .9s cubic-bezier(.16,1,.3,1) forwards}
.vs.is-in .l-battle img{animation:flicker 7s 2s linear infinite}
/* без steps: ступенчатые анимации браузер не выносит в композитор. Ступени собраны
   парами соседних кадров — на глаз тот же рваный неон, но считает их компоновщик */
@keyframes flicker{
  0%,93.4%{opacity:1}
  93.5%,93.9%{opacity:.55}
  94%,96.9%{opacity:1}
  97%,97.4%{opacity:.7}
  97.5%,100%{opacity:1}
}

/* --- центр: приз + кнопка --- */
.vs .center{position:absolute;left:50%;bottom:clamp(40px,8vh,90px);transform:translateX(-50%);z-index:4;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px}
.vs .prize{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;font-size:clamp(15px,1.6vw,22px);
  letter-spacing:.1em;text-transform:uppercase;color:var(--white);
  text-shadow:0 2px 24px rgba(0,0,0,.8);opacity:0;transform:translateY(16px);transition:opacity .6s 1.4s,transform .6s 1.4s cubic-bezier(.16,1,.3,1)}
.vs .prize em{font-style:normal;color:var(--acid)}
.vs .btn{position:relative;overflow:hidden;display:inline-block;border:0;cursor:pointer;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.2em;text-transform:uppercase;color:#050505;background:var(--acid);
  padding:20px 54px;text-decoration:none;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  opacity:0;transform:translateY(16px);transition:opacity .6s 1.6s,transform .6s 1.6s cubic-bezier(.16,1,.3,1)}
.vs .btn::before{content:'';position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.vs .btn:hover::before{transform:scaleX(1)}
.vs .btn span{position:relative}
.vs.is-in .prize,.vs.is-in .btn{opacity:1;transform:none}
.vs .meta{font:11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.3em;color:var(--grey);opacity:0;transition:opacity .6s 1.9s}
.vs.is-in .meta{opacity:1}

/* --- виньетка снизу --- */
.vs::after{content:'';position:absolute;left:0;right:0;bottom:0;height:16vh;z-index:5;pointer-events:none;background:linear-gradient(180deg,transparent,#050505)}

@media(max-width:900px){
  .vs .fighter{height:min(60vh,560px)}
  .vs .fighter--l{left:-14vw}
  .vs .fighter--r{right:-14vw}
  .vs .logo{width:min(78vw,400px);top:clamp(60px,9vh,110px)}
  .vs .btn{padding:16px 36px;font-size:12px}
  .vs .center{bottom:clamp(24px,5vh,60px)}
}
/* очень широкие экраны: бойцы упёрлись в потолок высоты и разъехались к краям,
   центр пустеет — поднимаем лого. Исходник лого 1400px, так что до 760 без мыла */
@media(min-width:2000px){
  .vs .logo{width:min(34vw,760px)}
}
/* телефон: бойцы расходятся сильнее, иначе сходятся в центре и перекрывают приз */
@media(max-width:560px){
  .vs .fighter{height:min(52vh,460px)}
  .vs .fighter--l{left:-20vw}
  .vs .fighter--r{right:-20vw}
  .vs .zone{width:40vw}
  .vs .logo{width:min(72vw,360px)}
}
@media (prefers-reduced-motion:reduce){
  .vs *{animation:none!important;transition:none!important}
  .vs .fighter,.vs .glow,.vs .logo>*,.vs .prize,.vs .btn,.vs .meta{opacity:1;transform:none}
}

/* ============================================================
   СУДЬИ — HUD-панель (battle.html). Только CSS, без JS.
   Скругления, свечения и стекло здесь не используются:
   язык секции — плоские линии и прямые углы.
   ============================================================ */
/* шапка секции: монокод-лейбл слева от заголовка (судьи, FAQ) */
.hud-head{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:8px 18px;
}
.hud-label{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:11px;letter-spacing:.2em;color:var(--acid);
  white-space:nowrap;
}
.jury .program-sub{margin-top:12px;}
/* Подзаголовок дисциплин — не разрядка капсом, как у остальных секций,
   а обычная строка Regular Extended, тем же начертанием, что манифест главной. */
#disciplines .program-sub,
#rules .program-sub{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:400;
  font-size:clamp(15px,1.2vw,20px);letter-spacing:0;text-transform:none;
  color:var(--grey);
}
/* внутри подзаголовка сетки выделены цифры и места — тем же начертанием, светлее */
#rules .program-sub b{font-weight:400;color:var(--white);}
/* На узком экране строка переносится, и вторая часть повисает слева —
   выключаем по центру. Выше строка одна, и правило ничего не меняет. */
@media(max-width:600px){
  #disciplines .program-sub,
  #rules .program-sub{text-align:center;}
}

.jury-wrap{margin-top:6vh;width:100%;max-width:none;}

/* рамка прицела вокруг всей сетки */
/* ---------- общая рамка-прицел HUD (судьи и дисциплины) ---------- */
.hud-frame{
  position:relative;
  border:1px solid var(--line);
  padding:2px;
}
/* уголки-скобки 18x18: восемь градиентов на одном псевдоэлементе — четыре буквы «г» */
.hud-frame::before{
  content:'';position:absolute;inset:-1px;pointer-events:none;z-index:3;
  background:
    linear-gradient(var(--acid),var(--acid)) 0 0/18px 1px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 0 0/1px 18px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 100% 0/18px 1px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 100% 0/1px 18px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 0 100%/18px 1px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 0 100%/1px 18px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 100% 100%/18px 1px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 100% 100%/1px 18px no-repeat;
}
/* ============================================================
   СУДЬИ на battle — экран выбора персонажа: сверху ростер из шести
   плиток, под ним досье выбранного. Наполняет js/main.js по
   assets/data/judges.json. Прежние плитки-досье и их сканеры убраны.
   ============================================================ */
/* рамку рисует общий .hud-frame; отступа внутри нет — ростер идёт от края до края */
.jury .hud-frame{padding:0;}

/* ---- ростер ---- */
.jury .roster{display:grid;grid-template-columns:repeat(6,1fr);}
.jury .tile{
  position:relative;aspect-ratio:4/5;overflow:hidden;cursor:pointer;
  background:#000;border-right:1px solid var(--line);
}
.jury .tile:last-child{border-right:0;}
/* Шесть плиток в ряд ниже ~1150px — это меньше 170px на судью: длинные
   фамилии («Медарисов», «Ласточкин») перестают помещаться под фото,
   а лицо превращается в значок. Ломаем на две строки по три. */
@media(max-width:1150px){
  .jury .roster{grid-template-columns:repeat(3,1fr);}
  .jury .tile:nth-child(3n){border-right:0;}
  .jury .tile:nth-child(-n+3){border-bottom:1px solid var(--line);}
}
.jury .tile img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  filter:grayscale(1) contrast(1.1) brightness(.55);
  transition:filter .3s ease;
  -webkit-mask:linear-gradient(180deg,#000 55%,transparent 100%);
          mask:linear-gradient(180deg,#000 55%,transparent 100%);
}
.jury .tile .empty{
  position:absolute;inset:0;background:#070806;
  display:flex;align-items:center;justify-content:center;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(32px,4vw,64px);color:rgba(255,255,255,.08);
}
/* сканлайны поверх фото */
.jury .tile::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.3) 3px 4px);
}
.jury .tile .t{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
}
.jury .tile .t b{
  display:block;margin-top:4px;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(18px,1.5vw,26px);line-height:1.1;
  letter-spacing:.02em;text-transform:none;color:var(--white);
}
.jury .tile.is-active img{filter:grayscale(0) contrast(1.05) brightness(1);}
@media (hover:hover){
  .jury .tile:hover img{filter:grayscale(1) contrast(1.1) brightness(.85);}
  .jury .tile.is-active:hover img{filter:grayscale(0) contrast(1.05) brightness(1);}
}

/* смена судьи: кислотная полоса проходит по фото снизу вверх */
.jury .tile .sweep{
  position:absolute;left:0;right:0;top:0;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,transparent 0%,rgba(200,241,28,0) 40%,rgba(200,241,28,.28) 49%,var(--acid) 50%,rgba(200,241,28,.28) 51%,transparent 60%);
  transform:translate3d(0,60%,0);opacity:0;
}
.jury .tile.is-swap .sweep{animation:jurySweep .7s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes jurySweep{
  0%  {transform:translate3d(0,60%,0); opacity:1;}
  100%{transform:translate3d(0,-60%,0);opacity:1;}
}

/* Курсор-рамка выбора: четыре уголка фоном, без периметра.
   Пульс идёт только через transform — анимация inset/width заставляла бы
   каждый кадр пересчитывать раскладку, из-за неё рамка и мерцала. */
.jury .tile.is-active::before{
  content:'';position:absolute;inset:8px;z-index:3;pointer-events:none;
  --l:22px;--w:2px;
  background:
    linear-gradient(var(--acid),var(--acid)) top left/var(--l) var(--w) no-repeat,
    linear-gradient(var(--acid),var(--acid)) top left/var(--w) var(--l) no-repeat,
    linear-gradient(var(--acid),var(--acid)) top right/var(--l) var(--w) no-repeat,
    linear-gradient(var(--acid),var(--acid)) top right/var(--w) var(--l) no-repeat,
    linear-gradient(var(--acid),var(--acid)) bottom left/var(--l) var(--w) no-repeat,
    linear-gradient(var(--acid),var(--acid)) bottom left/var(--w) var(--l) no-repeat,
    linear-gradient(var(--acid),var(--acid)) bottom right/var(--l) var(--w) no-repeat,
    linear-gradient(var(--acid),var(--acid)) bottom right/var(--w) var(--l) no-repeat;
  animation:juryPulse 1.4s ease-in-out infinite alternate;
}
@keyframes juryPulse{from{transform:scale(1);}to{transform:scale(.965);}}

/* полоса автолистания под активной плиткой */
.jury .tile .bar{
  position:absolute;left:0;bottom:0;z-index:3;
  width:100%;height:2px;background:var(--acid);
  transform:scaleX(0);transform-origin:left;
}
.jury .tile.is-active .bar{animation:juryFill var(--auto,6s) linear forwards;}
.jury.is-paused .tile.is-active .bar{animation-play-state:paused;}
@keyframes juryFill{to{transform:scaleX(1);}}

/* ---- досье под ростером ---- */
/* Высоту держит самый длинный судья — её считает measure() в main.js
   и кладёт в --dh, иначе блок прыгал бы при каждой смене. */
.jury .panel{background:#070806;border-top:1px solid var(--line);}
.jury .dossier{
  padding:clamp(30px,3.5vw,56px) clamp(26px,4vw,80px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  min-height:var(--dh,0px);
}
.jury .num{
  margin-bottom:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:11px;letter-spacing:.25em;color:var(--acid);
}
.jury .num::before{
  content:'';display:inline-block;width:5px;height:5px;
  margin-right:8px;vertical-align:middle;background:var(--acid);
  animation:juryBlink 1.4s linear infinite;
}
/* Мигание — парой соседних кадров, а не steps(): ступенчатые анимации
   браузер не отдаёт компоновщику и считает на главном потоке. */
@keyframes juryBlink{0%,49.9%{opacity:1;}50%,100%{opacity:.25;}}
.jury .name{
  min-height:1em;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(30px,3.6vw,64px);line-height:1;text-transform:uppercase;color:var(--white);
}
.jury .name .cur{
  display:inline-block;width:.5em;height:.9em;
  margin-left:6px;vertical-align:-.1em;background:var(--acid);
  animation:juryBlink 1s linear infinite;
}
.jury .role{
  margin-top:16px;max-width:70ch;
  font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;
  font-size:clamp(14px,1.1vw,17px);line-height:1.55;color:var(--white);
}
.jury .groups{
  margin-top:34px;width:100%;max-width:1100px;text-align:left;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px 48px;
}
/* судья без регалий: строка вместо пустого места под досье */
.jury .groups .soon{
  grid-column:1/-1;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
}
.jury .group b{
  display:block;margin-bottom:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--acid);
}
.jury .group ul{list-style:none;}
.jury .group li{
  padding:6px 0;border-top:1px solid rgba(255,255,255,.08);
  font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;
  font-size:13px;line-height:1.5;color:var(--grey);
}
.jury .group li strong{color:var(--white);font-weight:500;}
.jury .panel.is-swap .dossier>*{animation:juryFade .35s cubic-bezier(.16,1,.3,1);}
@keyframes juryFade{
  from{opacity:0;transform:translate3d(0,8px,0);}
  to  {opacity:1;transform:none;}
}

/* ---- телеметрия под панелью ---- */
.hud-telemetry{
  margin-top:12px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:10px;letter-spacing:.15em;color:var(--grey);
}

/* Лента портретов существует только на мобиле; на десктопе её в раскладке нет.
   Единственное правило блока вне медиазапроса — само скрытие. */
.jury .jury-stage{display:none;}

/* ============================================================
   СУДЬИ НА МОБИЛЕ (до 600px) — большой портрет и ростер-переключатель.
   Ростер из шести плиток по 55px на телефоне нечитаем, поэтому активный
   судья показывается портретом во всю ширину, а плитки остаются кнопками.
   ============================================================ */
@media(max-width:600px){
  .jury .jury-stage{display:block;position:relative;}

  /* лента: по слайду на судью, снап по краю, свой скролл без полосы */
  .jury .jury-track{
    display:flex;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .jury .jury-track::-webkit-scrollbar{display:none;}
  .jury .jury-pic{
    position:relative;flex:0 0 100%;scroll-snap-align:start;
    aspect-ratio:4/5;overflow:hidden;background:#070806;
  }
  .jury .jury-pic img{
    display:block;width:100%;height:100%;
    object-fit:cover;object-position:center top;
  }
  /* сканлайны и затемнение снизу — под имя */
  .jury .jury-pic::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:
      repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.22) 3px 4px),
      linear-gradient(180deg,transparent 45%,rgba(5,5,5,.55) 70%,#050505 100%);
  }
  .jury .jury-ov{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;}
  .jury .jury-num{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
    font-size:10px;letter-spacing:.25em;color:var(--acid);
  }
  .jury .jury-num::before{
    content:'';display:inline-block;width:5px;height:5px;
    margin-right:8px;vertical-align:middle;background:var(--acid);
  }
  .jury .jury-nm{
    margin-top:10px;
    font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
    /* «МЕДАРИСОВ» на 360px влезает в строку без переноса и обрезки */
    font-size:clamp(26px,8.4vw,36px);line-height:.95;text-transform:uppercase;color:var(--white);
  }
  .jury .jury-soon{
    position:absolute;inset:0;display:grid;place-items:center;
    font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
    font-size:140px;color:rgba(255,255,255,.07);
  }

  /* уголки-прицел по верхним углам сцены */
  .jury .jury-stage::before{
    content:'';position:absolute;inset:8px;z-index:3;pointer-events:none;
    --l:22px;--w:2px;
    background:
      linear-gradient(var(--acid),var(--acid)) top left/var(--l) var(--w) no-repeat,
      linear-gradient(var(--acid),var(--acid)) top left/var(--w) var(--l) no-repeat,
      linear-gradient(var(--acid),var(--acid)) top right/var(--l) var(--w) no-repeat,
      linear-gradient(var(--acid),var(--acid)) top right/var(--w) var(--l) no-repeat;
  }
  .jury .jury-arrows{
    position:absolute;top:50%;left:0;right:0;z-index:4;
    display:flex;justify-content:space-between;
    transform:translateY(-50%);pointer-events:none;
  }
  .jury .jury-arrows button{
    pointer-events:auto;width:40px;height:56px;
    display:grid;place-items:center;
    font:inherit;font-size:22px;color:var(--acid);
    background:rgba(5,5,5,.45);border:0;cursor:pointer;
  }
  .jury .jury-arrows button:disabled{opacity:0;}

  /* ---- ростер: квадратные миниатюры-переключатели ---- */
  .jury .roster{grid-template-columns:repeat(6,1fr);gap:5px;margin-top:10px;}
  /* строка из шести миниатюр: рамок на всю ширину нет, границы рисует gap */
  .jury .tile:nth-child(3n){border-right:1px solid var(--line);}
  .jury .tile:nth-child(-n+3){border-bottom:1px solid var(--line);}
  .jury .tile{
    aspect-ratio:1;border:1px solid var(--line);border-right:1px solid var(--line);
    transition:border-color .2s;
  }
  .jury .tile:last-child{border-right:1px solid var(--line);}
  .jury .tile img{
    object-position:center 15%;
    filter:grayscale(1) brightness(.55);
    -webkit-mask:none;mask:none;                 /* растворение низа тут ни к чему */
  }
  .jury .tile.is-active{border-color:var(--acid);}
  .jury .tile.is-active img{filter:none;}
  .jury .tile .empty{font-size:22px;color:rgba(255,255,255,.18);}
  /* полосу автолистания гасим: листания на мобиле нет. Сам элемент оставляем
     под отметку активной плитки — отдельный узел ради этого не нужен. */
  .jury .tile .bar{
    height:3px;animation:none!important;
    transform:scaleX(0);transition:transform .3s;
  }
  .jury .tile.is-active .bar{transform:scaleX(1);}
  .jury .tile .sweep{display:none;}
  .jury .tile.is-active::before{display:none;}   /* угловая рамка — только на десктопе */

  /* ---- досье ---- */
  .jury .panel{border-top:0;background:transparent;}
  .jury .dossier{
    padding:24px 20px 0;min-height:0;
    display:block;text-align:left;
  }
  /* номер и имя уже есть на портрете */
  .jury .num,.jury .name{display:none;}
  .jury .role{margin-top:0;max-width:none;font-size:15px;line-height:1.55;color:var(--white);}

  /* ---- регалии аккордеоном ---- */
  .jury .groups{
    display:block;margin-top:22px;max-width:none;
    border-top:1px solid var(--line);
  }
  .jury .groups details{border-bottom:1px solid var(--line);}
  .jury .groups summary{
    list-style:none;display:flex;align-items:center;justify-content:space-between;
    padding:14px 0;cursor:pointer;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--acid);
  }
  .jury .groups summary::-webkit-details-marker{display:none;}
  .jury .groups summary span{flex:1;}
  .jury .groups summary i{
    font-style:normal;letter-spacing:0;
    font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;font-size:13px;color:var(--grey);
  }
  .jury .groups summary::after{
    content:'+';margin-left:12px;
    font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;font-size:20px;line-height:1;color:var(--acid);
  }
  .jury .groups details[open] summary::after{content:'−';}
  .jury .groups ul{list-style:none;padding-bottom:12px;}
  .jury .groups li{
    padding:7px 0;border-top:1px solid rgba(255,255,255,.06);
    font-size:14px;line-height:1.45;color:var(--grey);
  }
  .jury .groups li:first-child{border-top:0;}
  .jury .groups li strong{color:var(--white);font-weight:400;}
}

/* на узком досье в одну колонку; подписи на плитках держатся до мобильного
   ростера: ниже 1000px плиток три в ряд, и места под имя хватает */
@media(max-width:900px){
  .jury .groups{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .jury .tile .t{display:none;}
  .hud-telemetry{justify-content:center;}
  .jury .tile.is-active::before{inset:4px;--l:14px;}
}
@media(prefers-reduced-motion:reduce){
  .jury .tile.is-active::before{animation:none;}
  .jury .tile .bar{animation:none;opacity:0;}
  .jury .tile.is-swap .sweep{animation:none;}
  .jury .num::before,.jury .name .cur{animation:none;}
  .jury .panel.is-swap .dossier>*{animation:none;}
}

/* ============================================================
   ДИСЦИПЛИНЫ на battle — досье 2x2. Карточка горизонтальная:
   слева квадратный портрет, справа текст и шкала баллов.
   Карточки главной (.card) живут отдельно и не затронуты.
   ============================================================ */
.disc-wrap{margin-top:7vh;width:100%;max-width:none;}
/* Четыре плитки в ряд впритык: зазора нет, а разделяют их собственные рамки в 1px.
   Соседи наезжают друг на друга на этот же пиксель, поэтому линия между плитками
   остаётся волосяной, а не удваивается. */
.disc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}

/* «рамка» в 1px: внешний слой красится фоном, внутренний накрывает его,
   отступив на 1px. Оба с одинаковым срезом углов, скруглений нет. */
.disc{
  position:relative;
  margin:-1px 0 0 -1px;
  background:var(--line);
  padding:1px;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition:background-color .35s ease;
}
.disc-inner{
  position:relative;
  height:100%;
  display:flex;flex-direction:column;
  background:#070806;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
/* уголки-скобки 12px по углам плитки: в покое внутри, на hover отъезжают на 3px */
.disc-inner::after{
  content:'';position:absolute;inset:5px;pointer-events:none;z-index:3;
  opacity:.75;
  transition:inset .4s ease, opacity .4s ease;
  background:
    linear-gradient(var(--acid),var(--acid)) 0 0/12px 1px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 100% 0/12px 1px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 100% 0/1px 12px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 0 100%/12px 1px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 0 100%/1px 12px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 100% 100%/12px 1px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 100% 100%/1px 12px no-repeat;
}

/* ---- портрет ---- */
.disc-frame{
  position:relative;overflow:hidden;
  aspect-ratio:1/1;width:100%;
}
.disc-frame::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.6;
  background-image:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.35) 3px 4px);
}

/* ---- подпись под портретом ---- */
.disc-body{
  padding:22px 24px 26px;
  border-top:1px solid var(--line);
  text-align:left;
}
.disc-name{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(18px,1.6vw,26px);line-height:1.15;
  text-transform:uppercase;color:var(--white);
}
.disc-role{
  margin-top:10px;
  font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;
  font-size:14px;line-height:1.5;color:var(--grey);
}

@media (hover:hover){
  .disc:hover{background:var(--acid);}
  .disc:hover .disc-inner::after{inset:2px;opacity:1;}
}

/* 2×2, дальше одна колонка */
@media(max-width:1000px){
  .disc-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .disc-grid{grid-template-columns:1fr;}
  .disc-body{padding:20px 20px 24px;}
}

/* ============================================================
   ПРИЗЫ на battle — HUD. Главный приз с анимацией купюр на canvas,
   ниже три плитки под иллюстрации. Прямые углы, срез через clip-path.
   ============================================================ */
.prize-wrap{margin-top:6vh;width:100%;max-width:none;}

/* ---------- главный приз ---------- */
.prize-main{
  display:flex;
  /* выше прежних 380: купюры стали крупнее */
  height:clamp(460px,38vw,560px);
  background:var(--line);
  padding:1px;
  clip-path:polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.prize-main-inner{
  position:relative;flex:1;overflow:hidden;
  background:#070806;
  clip-path:polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
/* сумма стоит в верхней трети: ниже растёт стопка */
.prize-center{
  position:absolute;left:0;right:0;top:18%;z-index:5;
  text-align:center;pointer-events:none;
}
.prize-counter{
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:900;
  font-size:clamp(64px,9vw,140px);line-height:1;
  color:var(--acid);
  font-variant-numeric:tabular-nums;
  transform-origin:50% 50%;
  /* тень отрывает цифры от купюр, которые проходят под ними */
  text-shadow:0 0 40px rgba(7,8,6,.9),0 0 12px rgba(7,8,6,.9);
}
.prize-counter.is-done{animation:prizeFlash .6s ease;}
@keyframes prizeFlash{
  0%{transform:scale(1);}
  30%{transform:scale(1.06);text-shadow:0 0 40px rgba(200,241,28,.55);}
  100%{transform:scale(1);}
}
.prize-main-label{
  margin-top:16px;
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);
}
.prize-hud{
  position:absolute;z-index:6;pointer-events:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:10px;letter-spacing:.15em;color:var(--grey);
}
.prize-hud.tl{top:14px;left:16px;}
.prize-hud.tr{top:14px;right:16px;}
.prize-hud.bl{bottom:14px;left:16px;}
.prize-hud.br{bottom:14px;right:16px;}

/* ---------- «Пересчёт»: купюры по одной залетают в стопку ---------- */
.prize-stage{position:absolute;inset:0;z-index:3;perspective:1400px;pointer-events:none;}
.prize-bill{
  position:absolute;left:0;top:0;
  width:clamp(240px,24vw,380px);aspect-ratio:800/349;
  transform-style:preserve-3d;will-change:transform;
}
.prize-bill i{
  position:absolute;inset:0;background-size:cover;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.18);   /* тень у каждой едва заметная */
}
.prize-bill i.f{background-image:url(../assets/img/prizes/bill-5000-front.jpg);}
.prize-bill i.b{background-image:url(../assets/img/prizes/bill-5000-back.jpg);transform:rotateY(180deg);}
/* одна общая мягкая тень под стопкой вместо двадцати накопленных */
.prize-stack-shadow{
  position:absolute;height:26px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);
  filter:blur(4px);opacity:0;transition:opacity .4s;
}

/* ---------- подзаголовок ---------- */
.prize-sub-title{
  margin-top:7vh;
  font-size:12px;letter-spacing:.35em;text-transform:uppercase;color:var(--grey);
  text-align:center;
}

/* ---------- плитки призов ---------- */
.prize-grid{
  margin-top:24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.prize-card{
  display:flex;
  background:var(--line);
  padding:1px;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition:background-color .35s ease;
}
.prize-card-inner{
  flex:1;display:flex;flex-direction:column;
  background:#070806;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.prize-art{
  position:relative;overflow:hidden;
  aspect-ratio:3/2;width:100%;
  background:#050605;
  display:flex;align-items:center;justify-content:center;
}
/* Сетка-заглушка осталась для плитки без картинки; там, где фотография,
   вместо неё сканлайны — те же, что на портретах судей и дисциплин. */
.prize-art::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.15;
  background-image:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 24px);
}
.prize-art:has(img)::before{
  opacity:.5;
  background-image:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.35) 3px 4px);
}
/* уголки-скобки: в покое внутрь, на hover на край */
.prize-art::after{
  content:'';position:absolute;inset:3px;z-index:2;pointer-events:none;
  opacity:.75;
  transition:inset .4s ease, opacity .4s ease;
  background:
    linear-gradient(var(--acid),var(--acid)) 0 0/12px 1px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 100% 0/12px 1px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 100% 0/1px 12px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 0 100%/12px 1px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 0 100%/1px 12px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 100% 100%/12px 1px no-repeat,
    linear-gradient(var(--acid),var(--acid)) 100% 100%/1px 12px no-repeat;
}
/* Фотографии полнокадровые, со своим тёмным фоном: cover без полей.
   contain с отступом был рассчитан на иллюстрацию-объект на прозрачном. */
.prize-art img{
  position:relative;z-index:1;
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.prize-pending{
  position:relative;z-index:1;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:10px;letter-spacing:.25em;color:var(--grey);
  transition:transform .4s ease;
}
.prize-meta{padding:16px 18px;border-top:1px solid var(--line);}
.prize-id{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:10px;letter-spacing:.25em;color:var(--acid);
}
.prize-name{
  margin-top:12px;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:14px;line-height:1.25;text-transform:uppercase;color:var(--white);
}

@media (hover:hover){
  .prize-card:hover{background:var(--acid);}
  .prize-card:hover .prize-art::after{inset:0;opacity:1;}
  /* картинку наезжаем, а не сдвигаем: от сдвига у полнокадрового фото
     открывалась бы полоса фона снизу */
  .prize-card:hover .prize-art img{transform:scale(1.05);}
  .prize-card:hover .prize-pending{transform:translateY(-4px);}
}

@media(max-width:700px){
  .prize-grid{grid-template-columns:1fr;}
}
/* Панель главного приза — 699, как порог NARROW в анимации пересчёта */
@media(max-width:699px){
  .prize-main{height:430px;}
  .prize-center{top:16%;}
  /* на узком экране 64px из clamp не влезают: «100 000 ₽» переносится на две строки */
  .prize-counter{font-size:clamp(38px,11vw,64px);}
  .prize-bill{width:74vw;}
  .prize-hud{font-size:9px;letter-spacing:.1em;}
  .prize-hud.tl,.prize-hud.bl{top:auto;}
  .prize-hud.tl{top:10px;}
  .prize-hud.bl{bottom:10px;}
  /* правые подписи наезжали бы на левые — на узком их не показываем */
  .prize-hud.tr,.prize-hud.br{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .prize-counter.is-done{animation:none;}
  .prize-stack-shadow{transition:none;}
}

/* ============================================================
   ФИНАЛЬНЫЙ CTA — на обеих страницах, перед футером.
   Слева форма (клон формы модалки), справа персонаж: два ролика
   idle → up и обратно, переключение по hover/фокусу на форме.
   ============================================================ */
.cta-final{
  position:relative;overflow:hidden;
  min-height:100vh;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);   /* minmax: форма не распирает колонку персонажа */
  padding:0 var(--gutter);
  background:#050505;
}
.cta-form{
  align-self:center;justify-self:start;
  width:100%;max-width:520px;
  padding-block:12vh 96px;   /* нижний отступ >=90px: под прилипшую панель отсчёта */
}
.cta-final .hud-label{letter-spacing:.25em;}
.cta-final h2{
  margin-top:18px;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:900;
  /* clamp из ТЗ, но не шире колонки: «РЕГИСТРИРУЙСЯ» в Akzidenz Extended занимает ~12 кеглей,
     при 80px на 1920 последняя буква уходила под видео */
  font-size:min(clamp(40px,4.5vw,80px), calc((50vw - var(--gutter)) / 12));line-height:.95;
  text-transform:uppercase;color:var(--white);
}
.cta-sub{
  margin-top:18px;
  font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;
  font-size:15px;line-height:1.5;color:var(--grey);
}
.cta-form-slot{margin-top:48px;}
/* кнопка отправки клона: .btn-cta на всю ширину формы */
.cta-form-slot .btn-cta{width:100%;margin-top:6px;}
.cta-form-slot .btn-cta:disabled{
  background:rgba(242,242,240,.15);color:var(--grey);cursor:not-allowed;
}
.cta-form-slot .form-success{text-align:left;padding:20px 0;}
/* место и время под формой — как .date-meta, но по левому краю */
/* «Мы ждём тебя» — в одну строку: кегль и так рассчитан на ~12 знаков в колонке */
.cta-final h2.one-line{white-space:nowrap}
.cta-meta{margin-top:32px;display:flex;flex-direction:column;gap:18px;text-align:left}
.cta-meta b{display:block;margin-bottom:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;font-weight:400;
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--acid)}
.cta-meta span{font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(16px,1.6vw,24px);text-transform:uppercase;color:var(--white)}

.cta-actor{
  position:relative;align-self:center;min-height:0;margin-right:calc(-1 * var(--gutter));
  /* Ролик широкий (1920×1122), колонка узкая и высокая: на всю высоту в кадр попала бы меньше
     половины ширины и второй человек обрезался бы. Поэтому у блока своя пропорция — при ней
     видно ~67% ширины ролика, а это ровно оба человека (они занимают 36–98% кадра) */
  aspect-ratio:1.15;
}
.cta-actor video{
  position:absolute;inset:0;width:100%;height:100%;
  /* прижимаем к правому краю: срезается только пустой чёрный слева */
  object-fit:cover;object-position:100% center;
}
/* шов с формой */
.cta-actor::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#050505,transparent 25%)}
/* reduced motion: без видео, только постер */
@media(prefers-reduced-motion:reduce) and (min-width:700px){
  .cta-actor{background:#050505 url(../assets/video/cta2-poster.jpg) 100% center/cover no-repeat}
  .cta-actor video{display:none}
}

@media(max-width:899px){
  .cta-final{grid-template-columns:minmax(0,1fr);min-height:0}
  .cta-final h2{font-size:min(clamp(40px,4.5vw,80px), calc((100vw - 2 * var(--gutter)) / 12))}
  .cta-actor{order:-1;height:55vh;aspect-ratio:auto;min-height:0;margin-inline:calc(-1 * var(--gutter))}
  /* узкая колонка: шов снизу в форму, а не слева */
  .cta-actor::after{background:linear-gradient(0deg,#050505,transparent 30%)}
  .cta-form{max-width:none;padding-block:4vh 96px}
}
/* телефонный ролик: только <700px. Высота по пропорции ролика 780×1080, без кропа */
.cta-actor-mobile{display:none}
@media(max-width:699px){
  /* телефон: весь CTA по центру — заголовок, поля, подпись, «Когда / Где» */
  .cta-form{text-align:center}
  .cta-form-slot .field input{text-align:center}
  .cta-form-slot .field label{left:0;right:0;text-align:center}
  .cta-form-slot .form-success{text-align:center}
  .cta-meta{text-align:center;align-items:center}
  .cta-actor{display:none}
  .cta-actor-mobile{display:block;margin-top:32px;width:100%;aspect-ratio:1200/1106}
  .cta-actor-mobile video{display:block;width:100%;height:100%;object-fit:contain}
  /* персонаж больше не над заголовком — отступ от фикс-шапки; снизу 0: ролик встык к линии футера */
  .cta-form{padding-top:calc(72px + 4vh);padding-bottom:0}
}

/* ============================================================
   ФИНАЛЬНЫЙ CTA НА BATTLE — форма на стекле поверх туманности.
   Персонажа здесь нет: ролики cta2-* остались только на главной,
   поэтому все правила ниже заперты классом .cta-cosmic.
   ============================================================ */
.cta-final.cta-cosmic{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  /* Отступы больше растушёвки виньетки (200px): иначе верх подложки
     попадал в затемнение и чёрный текст на нём переставал читаться. */
  padding:clamp(200px,16vh,260px) var(--gutter) clamp(200px,16vh,260px);
  background:#050505;
}
.cta-cosmic .cosmic-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  display:block;pointer-events:none;
}
/* Растушёвка задана в пикселях, а не в процентах высоты: секция высокая,
   и на процентах затемнение доставало до формы. Верх и низ уходят в чёрный, чтобы швы с FAQ и футером
   были не видны. Лежит между туманностью и стеклом — стекло размывает
   уже затемнённый кадр, по краям панели фон получается спокойнее. */
.cta-cosmic::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,#050505 0, rgba(5,5,5,.78) 56px, rgba(5,5,5,.22) 124px, transparent 200px),
    linear-gradient(0deg,  #050505 0, rgba(5,5,5,.78) 56px, rgba(5,5,5,.22) 124px, transparent 200px);
}

/* ---- бойцы по бокам формы ----
   Картинки те же, что в hero, и уже в кеше — на экране они второй раз.
   Слой между туманностью и виньеткой: виньетка притапливает им головы
   и ноги в чёрный, а стекло формы размывает края фигур вместе с фоном. */
/* Размер считаем от ширины экрана, а не от высоты: рядом с подложкой в 560px
   свободна ровно половина оставшегося, и по vh фигура в неё не влезала.
   Привязаны к середине секции — там же, где форма: по нижнему краю секции
   они уезжали бы далеко под экран, секция вдвое выше окна. */
.cta-cosmic .cta-fighter{
  position:absolute;top:50%;z-index:1;pointer-events:none;
  /* Подложка теперь 760px, и свободного места по бокам меньше: ширину
     ограничиваем ещё и тем, что осталось, иначе боец залезал под стекло. */
  width:min(27vw, 560px, calc((100vw - 760px) / 2 - 40px));
  transform:translateY(-50%);
}
.cta-cosmic .cta-fighter img{
  display:block;width:100%;height:auto;
  user-select:none;-webkit-user-drag:none;
  /* Низ растворяем: исходники обрезаны по бедро, и без этого фигуры
     висели бы в воздухе с ровным срезом поперёк ног. */
  -webkit-mask:linear-gradient(180deg,#000 76%,transparent 100%);
          mask:linear-gradient(180deg,#000 76%,transparent 100%);
}
.cta-cosmic .cta-fighter--l{left:clamp(-4vw,1vw,4vw);}
.cta-cosmic .cta-fighter--r{right:clamp(-4vw,1vw,4vw);}

/* ---- подложка ---- */
.cta-cosmic .cta-form{
  position:relative;z-index:3;
  align-self:center;justify-self:center;
  width:100%;max-width:760px;
  padding:clamp(28px,4vw,48px) clamp(32px,5vw,72px);
  text-align:center;
}
.cta-cosmic .cta-form > *{position:relative;z-index:1;}

.cta-cosmic h2{
  /* Кегль считаем от ширины подложки, а не от экрана: 80px из общего правила
     в неё не помещались. Ниже 1200px перенос разрешён. */
  font-size:clamp(26px,4.6vw,38px);
}
/* На широком экране заголовок идёт одной строкой: кегль ограничен шириной
   подложки, делитель 15 — по числу знаков «ЗАЯВИСЬ НА БАТТЛ». */
@media(min-width:1200px){
  .cta-cosmic h2{
    white-space:nowrap;
    font-size:min(38px, calc((100vw - 2 * var(--gutter) - 2 * clamp(32px,5vw,72px)) / 15));
  }
}

/* ---- выключка по центру: вся форма CTA стоит по оси подложки ---- */
.cta-cosmic .field input{text-align:center;}
.cta-cosmic .field label{left:0;right:0;text-align:center;}
.cta-cosmic .form-success{text-align:center;}
.cta-cosmic .cta-meta{text-align:center;align-items:center;}

/* ============================================================
   ФИНАЛЬНЫЙ CTA НА BATTLE — чёрная подложка, всё кислотное.
   Заменяет блок «тёмный текст на светлом стекле» (.cta-cosmic …).
   Подложка сплошная: без backdrop-filter, матовости и зерна.
   ============================================================ */
.cta-cosmic .cta-form {
  background:#050505;
  border:1px solid rgba(200,241,28,.35);
  clip-path:polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
/* матовость и зерно от стекла больше не нужны — давали серую дымку на чёрном */
.cta-cosmic .cta-form::before,
.cta-cosmic .cta-form::after { content:none; }
.cta-cosmic .hud-label { color:var(--acid); }
.cta-cosmic h2 { color:var(--acid); }
.cta-cosmic .cta-sub { color:rgba(200,241,28,.7); }

.cta-cosmic .field input { color:var(--acid);border-bottom-color:rgba(200,241,28,.3); }
.cta-cosmic .field input:focus { border-bottom-color:var(--acid); }
.cta-cosmic .field label { color:rgba(200,241,28,.55); }
.cta-cosmic .field input:focus + label,
.cta-cosmic .field input:not(:placeholder-shown) + label { color:var(--acid); }
.cta-cosmic .field input:-webkit-autofill,
.cta-cosmic .field input:-webkit-autofill:hover,
.cta-cosmic .field input:-webkit-autofill:focus { -webkit-text-fill-color:var(--acid);
  -webkit-box-shadow:0 0 0 1000px #050505 inset;caret-color:var(--acid); }
.cta-cosmic .field input { caret-color:var(--acid); }

.cta-cosmic .disc-label { color:var(--acid); }
.cta-cosmic .disc-pick span { color:rgba(200,241,28,.75);border-color:rgba(200,241,28,.3); }
.cta-cosmic .disc-pick span:hover { color:var(--acid);border-color:var(--acid); }
.cta-cosmic .disc-pick input:checked + span { background:var(--acid);border-color:var(--acid);color:#050505; }
.cta-cosmic .disc-pick input:focus-visible + span { border-color:var(--acid); }
.cta-cosmic .disc-total { color:var(--acid); }

/* кнопка: активная — кислотная заливка с чёрным текстом (как везде),
   неактивная — контур, чтобы не превращалась в серую плашку на чёрном */
.cta-cosmic .cta-form-slot .btn-cta:disabled { background:transparent;
  color:rgba(200,241,28,.45);box-shadow:inset 0 0 0 1px rgba(200,241,28,.3); }

.cta-cosmic .form-note { color:rgba(200,241,28,.55); }
.cta-cosmic .form-error { color:#ff5a4a; }
.cta-cosmic .form-success .ok { color:var(--acid); }
.cta-cosmic .form-success p { color:rgba(200,241,28,.75); }

.cta-cosmic .cta-meta b { color:rgba(200,241,28,.6); }
.cta-cosmic .cta-meta span { color:var(--acid); }

/* Ниже 1100px форма занимает почти всю ширину — бойцам рядом уже не встать,
   они полезли бы под неё и читались бы как грязь под стеклом. */
@media(max-width:1100px){
  .cta-cosmic .cta-fighter{display:none;}
}

/* ---- телефон: подложка во всю ширину минус 16px ---- */
@media(max-width:699px){
  .cta-final.cta-cosmic{
    min-height:100vh;
    padding:max(200px, calc(72px + 4vh)) 8px 200px;
  }
  .cta-cosmic .cta-form{max-width:none;padding:clamp(22px,5vw,32px) clamp(16px,4vw,24px);}
}

/* ---- лого над формой ----
   Одна копия лого-стопки из hero, всегда над подложкой. Внутрь подложки не ставим:
   хромированные буквы на чёрном читаются, на просвечивающей — нет. */
.cta-final.cta-cosmic{flex-direction:column}
/* «III» свисает ниже блока примерно на 38% его ширины, поэтому нижний отступ
   считается от --lw, а не фиксированным числом: иначе при смене размера лого
   цифра то упирается в подложку, то висит в пустоте. */
.cta-logo{
  --lw:320px;position:relative;z-index:3;
  width:var(--lw);max-width:100%;
  margin:0 auto calc(var(--lw) * .38 + 20px);pointer-events:none;
}
.cta-logo img{display:block;width:100%;height:auto}
.cta-logo .l-barber{margin-top:-4%}
.cta-logo .l-battle{position:absolute;left:8%;top:14%;width:84%;z-index:2}
.cta-logo .l-iii{position:absolute;left:-6%;top:82%;width:112%;z-index:1}

/* Десктоп: дым опускается, верх секции становится чёрным — лого стоит на чёрном,
   туманность начинается уже за формой. Меняется только верхняя растушёвка,
   нижняя остаётся прежней. */
@media(min-width:700px){
  .cta-final.cta-cosmic{padding-top:120px;--dark:330px}
  .cta-cosmic::after{background:
    linear-gradient(180deg,#050505 0,#050505 var(--dark),rgba(5,5,5,.6) calc(var(--dark) + 90px),transparent calc(var(--dark) + 240px)),
    linear-gradient(0deg,#050505 0,rgba(5,5,5,.78) 56px,rgba(5,5,5,.22) 124px,transparent 200px)}
}

/* Мобила: лого меньше, растушёвка и отступы секции — как были */
@media(max-width:699px){
  .cta-logo{--lw:min(64vw,280px)}
}

/* ============================================================
   FAQ на battle — аккордеон в HUD-рамке.
   Раскрытие через grid-template-rows 0fr -> 1fr, без замеров высоты в JS.
   ============================================================ */
/* единственное исключение из полной ширины: длинные вопросы на 2560px не читаются */
.faq-wrap{margin-top:6vh;width:100%;max-width:1100px;}
.faq-list{background:#070806;}
.faq-item + .faq-item{border-top:1px solid var(--line);}
.faq-q{
  width:100%;
  display:flex;align-items:center;gap:16px;
  padding:20px 24px;
  background:none;border:0;cursor:pointer;text-align:left;
  color:var(--white);
}
.faq-n{
  flex:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:11px;letter-spacing:.2em;color:var(--acid);
}
.faq-t{
  flex:1;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:500;
  font-size:clamp(14px,1.3vw,17px);line-height:1.3;color:var(--white);
}
/* знак «плюс» из двух полос: при раскрытии поворачивается в «крестик» */
.faq-i{
  flex:none;position:relative;width:14px;height:14px;
}
.faq-i::before,.faq-i::after{
  content:'';position:absolute;left:0;top:50%;
  width:14px;height:1px;background:var(--acid);
  transition:transform .35s ease;
}
.faq-i::after{transform:rotate(90deg);}
.faq-item.is-open .faq-i::before{transform:rotate(45deg);}
.faq-item.is-open .faq-i::after{transform:rotate(-45deg);}

.faq-a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.faq-item.is-open .faq-a{grid-template-rows:1fr;}
.faq-a-in{overflow:hidden;}
.faq-a p{
  /* слева 64px — под номер вопроса, справа 24px; ширину не ограничиваем:
     ответ идёт во всю ширину списка */
  padding:0 24px 22px 64px;
  max-width:none;
  font-family:'Akzidenz Grotesk Pro',Arial,sans-serif;
  font-size:14px;line-height:1.7;color:var(--grey);
}
.faq-a a{color:var(--acid);text-decoration:none;border-bottom:1px solid rgba(200,241,28,.4);}
.faq-a a:hover{border-bottom-color:var(--acid);}

@media (hover:hover){
  .faq-q:hover .faq-t{color:var(--acid);}
}
@media(max-width:600px){
  .faq-q{padding:16px 16px;gap:12px;}
  .faq-a p{padding:0 16px 18px 16px;}
}
@media(prefers-reduced-motion:reduce){
  .faq-a{transition:none;}
  .faq-i::before,.faq-i::after{transition:none;}
}

/* ============================================================
   «КАК ДОЙТИ ДО ФИНАЛА» — турнирная сетка.
   Разметка в battle.html, логика в js/bracket.js. Всё под префиксом br-.
   ============================================================ */
.br{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;--ext:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;
  --dim:rgba(242,242,240,.07);--cut:10px;max-width:1600px;margin:6vh auto 0}
.br-in{position:relative;padding:clamp(18px,2.2vw,34px);overflow:hidden;background:#070806;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:32px 32px}
.br-in::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.18) 3px 4px)}
.br-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,2vw,30px)}
.br-top .r{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--grey)}
.br-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) clamp(64px,7vw,120px) minmax(0,1fr) clamp(44px,4.5vw,80px) minmax(0,.95fr);align-items:center}
.br-mono{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}

/* узлы-дисциплины */
.br-col{display:grid;gap:10px}
.br-node{position:relative;background:rgba(7,8,6,.92);border:1px solid var(--line);padding:14px 16px 14px;cursor:default;transition:border-color .25s,background .25s;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.br-node::after{content:'';position:absolute;top:0;right:0;width:calc(var(--cut) * 1.42);height:1px;background:var(--line);transform-origin:0 0;transform:translateX(calc(var(--cut) * -1)) rotate(45deg)}
.br-node .h{display:flex;align-items:baseline;gap:10px}
.br-node .id{color:var(--acid)}
.br-node .nm{font-family:var(--ext);font-size:clamp(12px,1vw,15px);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-node .sl{color:var(--grey)}
.br-slots{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:12px}
.br-slots i{aspect-ratio:1.5;background:var(--dim);display:grid;place-items:center;font-style:normal;font-family:var(--ext);font-size:10px;color:transparent;transition:background .25s,box-shadow .25s}
.br-slots i.q{background:var(--acid);color:var(--black)}
.br-node .ft{display:flex;justify-content:space-between;margin-top:10px;color:var(--grey)}
.br-node .ft b{color:var(--acid);font-weight:400}
.br-node:hover,.br-node.is-hl{border-color:rgba(200,241,28,.55);background:rgba(200,241,28,.035)}
.br-node:hover .br-slots i.q,.br-node.is-hl .br-slots i.q{box-shadow:0 0 12px rgba(200,241,28,.45)}

/* трассы */
.br-link{align-self:stretch;position:relative}
.br-link svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.br-link .base{fill:none;stroke:rgba(200,241,28,.22);stroke-width:1}
.br-link .flow{fill:none;stroke:var(--acid);stroke-width:1.5;stroke-dasharray:3 15;animation:brFlow 1.1s linear infinite;opacity:.8;transition:stroke-width .2s,opacity .2s}
.br-link .flow.is-hl{stroke-width:2.5;opacity:1;animation-duration:.45s}
.br-link .dot{fill:var(--acid)}
@keyframes brFlow{to{stroke-dashoffset:-18}}

/* финал */
.br-final{position:relative;border:1px solid rgba(200,241,28,.6);background:rgba(200,241,28,.03);padding:clamp(18px,2vw,30px);overflow:hidden}
.br-final::before{content:'';position:absolute;inset:-1px;pointer-events:none;
  background:linear-gradient(var(--acid),var(--acid)) 0 0/12px 2px no-repeat,linear-gradient(var(--acid),var(--acid)) 0 0/2px 12px no-repeat,
  linear-gradient(var(--acid),var(--acid)) 100% 100%/12px 2px no-repeat,linear-gradient(var(--acid),var(--acid)) 100% 100%/2px 12px no-repeat}
.br-final::after{content:'';position:absolute;left:0;right:0;height:40%;top:-40%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(200,241,28,.07) 70%,rgba(200,241,28,.18) 100%);animation:brScan 3.6s linear infinite}
@keyframes brScan{to{top:100%}}
.br-final .t{display:flex;justify-content:space-between;color:var(--acid)}
.br-final .t span+span{color:var(--grey)}
.br-final .big{font-family:var(--ext);text-transform:uppercase;font-size:clamp(26px,2.3vw,42px);line-height:.95;margin-top:14px;color:var(--acid)}
.br-final p{margin-top:12px;font-size:14px;line-height:1.45;color:var(--grey)}

/* приз */
.br-prize{position:relative;background:var(--acid);color:var(--black);padding:clamp(18px,2vw,30px);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.br-prize .t{display:flex;justify-content:space-between}
.br-prize b{display:block;white-space:nowrap;font-family:var(--ext);font-size:clamp(28px,2.9vw,52px);line-height:.9;margin-top:16px;letter-spacing:-.01em}
.br-prize p{margin-top:14px;font-size:14px;line-height:1.4}
.br-prize .bar{display:flex;gap:3px;margin-top:16px}
.br-prize .bar i{flex:1;height:6px;background:var(--black);opacity:.85}
.br-prize .bar i:nth-child(3n){opacity:.35}

/* мобила / планшет: вертикальный поток */
.br-vlink{display:none}
@media (max-width:1000px){
  .br-grid{grid-template-columns:1fr}
  .br-col{grid-template-columns:1fr 1fr}
  .br-link{display:none}
  .br-vlink{display:flex;align-items:center;justify-content:center;gap:12px;height:64px;position:relative;color:var(--grey)}
  .br-vlink::before{content:'';width:2px;align-self:stretch;margin:6px 0 12px;
    background:repeating-linear-gradient(180deg,var(--acid) 0 4px,transparent 4px 14px);background-size:2px 14px;animation:brV 0.9s linear infinite}
  .br-vlink::after{content:'';position:absolute;left:50%;bottom:6px;width:8px;height:8px;border-right:2px solid var(--acid);border-bottom:2px solid var(--acid);transform:translateX(-50%) rotate(45deg)}
  .br-vlink span{position:absolute;left:calc(50% + 16px)}
}
@keyframes brV{to{background-position-y:14px}}
@media (max-width:560px){.br-col{grid-template-columns:1fr}.br-top .r{display:none}}
@media (prefers-reduced-motion:reduce){.br-link .flow,.br-final::after,.br-vlink::before{animation:none}}

/* ============================================================
   ВЕРХНИЕ БРЕЙКПОИНТЫ. С 1600px отступ и заголовки секций стоят на потолке
   своих clamp. Закреплены явно: дальше вёрстка растёт только шириной сеток,
   а не кеглем. По формулам clamp потолок наступил бы позже (отступ — 2057px,
   h2 — 1800px), поэтому на брейкпоинте небольшой шаг: 56 -> 72, 64 -> 72.
   (Брейкпоинт 2000px для зоны частиц 11.11 удалён вместе с частицами.)
   ============================================================ */
@media(min-width:1600px){
  :root{--gutter:72px;}
  .program h2{font-size:72px;}
}

/* =================================================================
   PRELOADER «10 / BRITVA» v4
   ================================================================= */
.pre{
  --n: min(30vw, 52vh);            /* размер «10» */
  --in: 1.1s;  --grow: .8s;  --out: .85s;
  position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden;
}
/* фон: во время анимации — один сплошной слой (нет шва). Треугольники включаются только на разъезд */
.pre-bg{position:absolute;inset:0;background:var(--acid)}
.pre-tri{position:absolute;inset:-2px;background:var(--acid);display:none;will-change:transform}
.pre-tri--a{clip-path:polygon(0 0,100% 0,0 100%)}
.pre-tri--b{clip-path:polygon(100% 0,100% 100%,0 100%)}

/* группа знаков — по центру, «10» сверху, BRITVA под ним, прижата к правому краю нуля */
/* ---- знаки: лого сверху, «10 лет» под ним, чёрные на кислотном ---- */
.pre-stack{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);display:flex;flex-direction:column;align-items:center;color:var(--black)}
.pre-logo{width:min(34vw,520px);height:auto;opacity:0;will-change:transform,opacity}
.pre-ten{width:min(16vw,240px);height:auto;margin-top:min(3vw,44px);overflow:visible}
.pre-ten .g-ten,.pre-ten .g-let{opacity:0;transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
@keyframes logoIn{0%{opacity:0;transform:translateY(22px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes tenIn{0%{opacity:0;transform:translateY(40px) scale(.9)}70%{transform:translateY(-4px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes letIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
.pre.is-in .pre-logo{animation:logoIn .6s cubic-bezier(.16,1,.3,1) forwards}
.pre.is-grow .g-ten{animation:tenIn .7s cubic-bezier(.16,1,.3,1) forwards}
.pre.is-grow .g-let{animation:letIn .5s .25s cubic-bezier(.16,1,.3,1) forwards}

/* ---- разъезд ---- */
.pre.is-out .pre-bg{display:none}
.pre.is-out .pre-tri{display:block;animation:none}
.pre.is-out .pre-tri--a{animation:outA var(--out) cubic-bezier(.7,0,.84,0) forwards}
.pre.is-out .pre-tri--b{animation:outB var(--out) cubic-bezier(.7,0,.84,0) forwards}
@keyframes outA{to{transform:translate(-100vw,-100vh)}}
@keyframes outB{to{transform:translate(100vw,100vh)}}
/* знаки не улетают: сначала гаснут (is-fade), потом раскол */
.pre.is-fade .pre-stack{transition:opacity .32s ease-out;opacity:0}
.pre.is-out .pre-stack{opacity:0}
.pre.is-done{display:none}

@media (max-width:700px){.pre{--n:min(46vw,36vh)}}
@media (prefers-reduced-motion:reduce){.pre *{animation:none!important;transition:none!important}.pre-run .intro{transform:none;filter:none;transition:none}}
/* ---- интеграция в britva10 ----
   .page.is-live из демо → .intro: герой «выезжает» из-под раскола. Состояние только на время
   прелоадера (html.pre-run, ставится в <head>): после is-done класс снимается, и на .intro
   не остаётся ни transform, ни filter — лишнего слоя под тоннелем нет. */
html:not(.pre-run) .pre{display:none}
.pre-run .intro{transform:scale(1.08);filter:brightness(.55);transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter 1.1s cubic-bezier(.16,1,.3,1)}
.pre-run .intro.is-live{transform:scale(1);filter:brightness(1)}

/* ============================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ «из блюра» — обе страницы.
   .rv — элемент появляется; IntersectionObserver в main.js один раз ставит .is-in,
   а по окончании перехода снимает .rv: фильтра на элементе не остаётся вовсе,
   и родные transition/transform элемента (hover плиток) снова работают.
   Базовое состояние — только при .js: без скриптов всё видно сразу.
   Стаггер — data-rv-stagger у родителя (задержки ставит main.js).
   ============================================================ */
.js .rv{opacity:0;filter:blur(10px);transform:translateY(14px)}
.js .rv.is-in{opacity:1;filter:blur(0);transform:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
/* линии сетки нарисованы фоном родителя в зазорах: пока плитки прозрачны, фон был бы сплошным серым
   блоком — включаем его, когда все плитки появились */
.cards{transition:background-color .5s ease}
.cards:has(> .card.rv){background-color:transparent}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv.is-in{opacity:1;filter:none;transform:none;transition:none}
}

/* ============================================================
   СТРАНИЦЫ ВОЗВРАТА ИЗ ОПЛАТЫ: /pay/success и /pay/fail.
   Одна карточка в рамке-прицеле по центру экрана, в стиле HUD-блоков баттла.
   ============================================================ */
.pay-page{background:var(--black);color:var(--white);}
.pay{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:calc(72px + 4vh) var(--gutter) 10vh;
}
.pay-card{width:min(560px,100%);background:#070806;}
.pay-in{padding:clamp(28px,4vw,48px);text-align:center;}
.pay h1{
  margin-top:18px;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(24px,3vw,38px);line-height:1.05;text-transform:uppercase;
}
.pay p{margin-top:16px;font-size:15px;line-height:1.6;color:var(--grey);}
.pay p a{color:var(--white);white-space:nowrap;}
.pay-sum{
  margin-top:22px;
  font-family:'Akzidenz Grotesk Pro Ext',Arial,sans-serif;font-weight:700;
  font-size:clamp(22px,2.4vw,32px);color:var(--acid);
}
.pay-error{margin-top:18px;font-size:14px;line-height:1.5;color:#ff5a4a;}
.pay-actions{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:16px;}
.pay-actions .btn-cta{margin-top:0;text-decoration:none;display:inline-block;}
/* display в правиле выше перебивает браузерное [hidden]{display:none}, и кнопка повтора
   показывалась бы там, где её прячет скрипт */
.pay-actions .btn-cta[hidden]{display:none;}
.pay-link{
  font:11px ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grey);text-decoration:none;
}
.pay-link:hover{color:var(--acid);}
/* три точки ожидания: только opacity, композитору есть что делать без главного потока */
.pay-dots{margin-top:26px;display:flex;justify-content:center;gap:8px;}
.pay-dots i{width:6px;height:6px;background:var(--acid);border-radius:50%;opacity:.25;
  animation:payDot 1.2s ease-in-out infinite;}
.pay-dots i:nth-child(2){animation-delay:.2s;}
.pay-dots i:nth-child(3){animation-delay:.4s;}
@keyframes payDot{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.pay-dots i{animation:none;opacity:.6}}
@media(max-width:600px){
  .pay-actions{align-self:stretch;}
  .pay-actions .btn-cta{width:100%;text-align:center;}
}