/* =====================================================================
   reel.scene.css — ЛЕНТА ПРОКРУТКИ ЯЩИКОВ ЗА БОЙЦА
   ---------------------------------------------------------------------
   Разметку строит js/reel.scene.js. Подложка экрана, шапка с кнопкой
   «назад» и сетка «Может выпасть» сюда НЕ входят — они остаются из
   case.css, этот файл подключён после него и добавляет только сцену.

   ЯЗЫК ОФОРМЛЕНИЯ — САЙТА, А НЕ ЧУЖОЙ. Плитка ленты собрана из тех же
   трёх приёмов, что кнопки витрины и плашка меню в site.css:
     • скос -5.06° (тот самый, что у .cx-back и у кнопок главной);
     • обводка 2px цветом --ink и жёсткая тень БЕЗ размытия под ней —
       «плитка лежит на столе», а не парит;
     • шрифт MegaBoxFont с выдавкой на числах.
   Поэтому лента читается как продолжение витрины, а не как вставленный
   в неё чужой виджет.

   ЦВЕТ ВЕДЁТ РЕДКОСТЬ. У каждой плитки своя --rc из каталога ступеней
   (economy/config/brawlers.yaml). У РАМКИ есть отдельная переменная
   --live: сцена каждый кадр кладёт в неё цвет той плитки, что сейчас
   под маркером. Отсюда весь эффект «рамка дышит»: свечение, луч маркера
   и полосы направляющих тянутся за проезжающей редкостью, а на бойце
   дороже ящика вспыхивает слой .rsc-glare поверх ленты.
   ===================================================================== */

.cmodal-stage.is-reel{
  /* Своя палитра сцены поверх --cx-* из case.css. --live перекрашивается
     из JS каждый кадр, поэтому объявлена с запасным значением: до
     первого кадра рамка не должна быть бесцветной. */
  --live:#55B8FF;
  --rsc-ink:#150a22;
  --rsc-plate:#0E1D3F;
  --rsc-plate-2:#0A1530;
  --rsc-skew:-5.06deg;
  --rsc-tile:clamp(88px, 10.4vw, 138px);
  --rsc-gap:10px;
  display:block;
}
.cmodal-stage.is-reel.is-multi{--rsc-tile:clamp(64px, 7.4vw, 92px);--rsc-gap:8px}

.rsc{display:flex;flex-direction:column;gap:14px;align-items:stretch}

/* Фильтра смаза (.rsc-defs) здесь больше нет: он висел на всей ленте и
   заставлял браузер перерисовывать полсотни плиток каждый кадр, а
   заодно размазывал имя и цену — то самое, что теперь видно с первого
   кадра. Подробности в шапке js/reel.scene.js. */

/* ---------------------------------------------------------------------
   РАМКА
   Наклон общий для рамки и плиток — иначе плитка внутри прямой рамки
   выглядела бы браком печати. Наклоняется КОНТЕЙНЕР, а картинкам внутри
   скос компенсируется обратным (см. .rsc-tile-art img): косой портрет
   читался бы как сломанный, а косая плитка — как приём.
   --------------------------------------------------------------------- */
.rsc-row{position:relative}

.rsc-frame{
  position:relative;
  padding:calc(var(--rsc-tile) * .085) 0;
  border:2px solid var(--rsc-ink);
  border-radius:calc(var(--rsc-tile) * .1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(180deg, var(--rsc-plate) 0%, var(--rsc-plate-2) 100%);
  box-shadow:
    0 3px 0 var(--rsc-ink),
    0 16px 34px -18px rgba(2,10,45,.9),
    /* Внутреннее свечение цветом того, что едет под маркером. */
    inset 0 0 0 1px color-mix(in srgb, var(--live) 22%, transparent),
    inset 0 0 42px -10px color-mix(in srgb, var(--live) 40%, transparent);
  transition:box-shadow .18s ease;
  overflow:hidden;
}

/* Направляющие: две тонкие полосы у краёв рамки, окрашенные живым
   цветом. Они дают ленте «рельсы» и делают движение читаемым даже
   когда плитки смазаны в кисель. */
.rsc-frame::before,
.rsc-frame::after{
  content:"";position:absolute;left:0;right:0;height:2px;z-index:4;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--live) 70%, transparent) 22%,
    color-mix(in srgb, var(--live) 92%, transparent) 50%,
    color-mix(in srgb, var(--live) 70%, transparent) 78%,
    transparent 100%);
  opacity:.55;transition:opacity .18s ease;pointer-events:none;
}
.rsc-frame::before{top:0}
.rsc-frame::after{bottom:0}
.rsc-frame.spinning::before,
.rsc-frame.spinning::after{opacity:.95}

/* ВСПЫШКА «МИМО ПОЕХАЛ ДОРОГОЙ БОЕЦ» — отдельный светящийся слой.
   Прозрачностью его гоняет js/reel.scene.js через Web Animations, и
   это принципиально: анимировать тень рамки пришлось бы перезапуском
   CSS-анимации, а перезапуск требует принудительной раскладки (чтения
   offsetWidth) — до одиннадцати раз в секунду посреди прокрутки. У
   прозрачности отдельного слоя такой цены нет, её целиком тянет
   композитор.

   Пятно стоит по центру, на маркере: вспыхивает не рамка целиком, а
   место, сквозь которое боец прошёл. mix-blend-mode:screen — чтобы
   свет ложился НА ленту, а не закрашивал её. */
.rsc-glare{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  mix-blend-mode:screen;
  background:radial-gradient(38% 120% at 50% 50%,
    color-mix(in srgb, var(--live) 85%, transparent) 0%,
    color-mix(in srgb, var(--live) 35%, transparent) 45%,
    transparent 100%);
}

.rsc-viewport{position:relative;overflow:hidden}

/* Затемнение по краям: лента должна УХОДИТЬ за кромку, а не обрываться
   на ней. Без этого видно, что плиток конечное число. */
.rsc-fade{
  position:absolute;top:0;bottom:0;width:16%;z-index:3;pointer-events:none;
}
.rsc-fade-l{left:0;background:linear-gradient(90deg,
  var(--rsc-plate-2) 0%, color-mix(in srgb, var(--rsc-plate-2) 55%, transparent) 55%, transparent 100%)}
.rsc-fade-r{right:0;background:linear-gradient(270deg,
  var(--rsc-plate-2) 0%, color-mix(in srgb, var(--rsc-plate-2) 55%, transparent) 55%, transparent 100%)}

.rsc-strip{
  display:flex;gap:var(--rsc-gap);
  padding:0 calc(var(--rsc-gap) / 2);
  will-change:transform;transform:translate3d(0,0,0);
}

/* ---------------------------------------------------------------------
   ПЛИТКА
   --------------------------------------------------------------------- */
.rsc-tile{
  position:relative;flex:0 0 var(--rsc-tile);
  width:var(--rsc-tile);height:calc(var(--rsc-tile) * 1.24);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  transform:skewX(var(--rsc-skew));
  border:2px solid var(--rsc-ink);
  border-radius:calc(var(--rsc-tile) * .11);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--rc) 30%, #12203f) 0%,
    color-mix(in srgb, var(--rc) 10%, #0B1329) 62%,
    #090F22 100%);
  box-shadow:0 2px 0 var(--rsc-ink);
  overflow:hidden;
}

/* Цветная подошва — самый быстрый способ прочитать редкость боковым
   зрением, когда всё остальное смазано. */
.rsc-tile::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--rsc-tile) * .05);
  background:var(--rc);box-shadow:0 0 14px var(--rc);
}

/* Пятно света за портретом — тем ярче, чем дороже ступень. Даёт объём
   и не даёт портрету «лежать» на плоской заливке. */
.rsc-tile-bg{
  position:absolute;inset:0;
  background:radial-gradient(60% 46% at 50% 38%,
    color-mix(in srgb, var(--rc) 55%, transparent) 0%, transparent 72%);
  opacity:.75;
}

/* ОКНО ПОРТРЕТА — ПО ОБРАЗЦУ СТАРОГО МЕГАЯЩИКА (ТЗ).
   Там боец лежит в окне с белой рамкой и тёмным кантом снаружи
   (.mbx-pp-card в css/megabox.scene.css), заполняя его целиком.
   Пропорции окна оттуда же: 27.1 x 28.7 vmin.

   ЧТО БЫЛО. Портрет вписывался в площадку по contain на 88 % её ширины.
   У файлов бойцов соотношение сторон гуляет от 1.00 до 1.74, поэтому
   вписанный портрет каждый раз занимал свою долю плитки: широкий шёл
   узкой полосой посреди пустоты, квадратный — во всю высоту. В ленте,
   где плитки едут в ряд, это самое заметное место на экране.

   ОБРАТНЫЙ СКОС ПЕРЕЕХАЛ НА ОКНО. Раньше он стоял на самой картинке;
   теперь картинка окно заполняет, и выпрямлять надо окно — иначе
   выпрямленный портрет оставил бы в наклонном окне треугольные щели.
   Смысл прежний: наклонена плитка, а не боец. */
.rsc-tile-art{
  position:absolute;left:10%;right:10%;top:4%;
  height:auto;aspect-ratio:271/287;
  overflow:hidden;
  background:#16204a;                       /* дно окна, как у эталона */
  border:calc(var(--rsc-tile) * .018) solid #fff;
  box-shadow:0 0 0 calc(var(--rsc-tile) * .011) rgba(6,10,30,.85);
  transform:skewX(calc(var(--rsc-skew) * -1));
}
/* Портрет — встык, с наездом на 9 %: у части файлов по краю идёт рамка
   карточки, наезд срезает её. Прижат к верхней трети, как в эталоне.
   Тень убрана: она осмысленна у картинки, лежащей НА плитке, а эта
   плитку собой заполняет. */
.rsc-tile-art img{
  position:absolute;inset:-9%;
  width:118%;height:118%;
  object-fit:cover;object-position:50% 30%;
  transform:none;filter:none;
}

/* ИМЯ И ЦЕНА ВИДНЫ ВСЕГДА (ТЗ). Раньше их прозрачность вела переменная
   --read: сцена гасила подписи на полном ходу и проявляла на подъезде.
   Лента от этого шла набором безымянных портретов, а под конец имена
   вспыхивали разом — и на соседе победителя, где лента тогда замирала,
   успевало прочитаться ЧУЖОЕ имя. Теперь читать можно с первого кадра;
   на разгоне подписи всё равно смазывает движение, но это честный смаз
   глаза, а не выключенный текст. */
.rsc-tile-name,
.rsc-tile-val{
  position:relative;z-index:2;width:100%;text-align:center;
  transform:skewX(calc(var(--rsc-skew) * -1));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:0 6%;
}
.rsc-tile-name{
  font-family:'Manrope',sans-serif;font-weight:800;
  font-size:calc(var(--rsc-tile) * .105);
  color:#DCE8FF;letter-spacing:.01em;
}
.rsc-tile-val{
  font-family:"MegaBoxFont",'Unbounded',sans-serif;font-weight:900;
  font-size:calc(var(--rsc-tile) * .125);
  color:var(--rc);
  margin-bottom:calc(var(--rsc-tile) * .075);
  -webkit-text-stroke:.06em var(--rsc-ink);paint-order:stroke fill;
}

/* Ультралегендарка: радужная подошва и бегущий по плитке блик. Это
   единственная ступень, которой позволено спорить с общим цветом
   рамки — она и в остальных экранах сайта радужная. */
.rsc-tile.is-ultra::after{
  background:linear-gradient(90deg,#ff3b3b,#ffe01a,#3ee66b,#22d3ee,#a855f7,#ff3b3b);
  background-size:200% 100%;animation:rsc-rainbow 2.4s linear infinite;
}
@keyframes rsc-rainbow{to{background-position:200% 0}}

/* Победитель. Класс вешает сцена в момент остановки. */
.rsc-tile.win{
  border-color:var(--rc);
  animation:rsc-win .5s cubic-bezier(.2,1.5,.4,1) both;
  box-shadow:0 2px 0 var(--rsc-ink), 0 0 0 2px var(--rc), 0 0 46px 6px var(--rc);
  z-index:5;
}
@keyframes rsc-win{
  from{transform:skewX(var(--rsc-skew)) scale(1)}
  60% {transform:skewX(var(--rsc-skew)) scale(1.13)}
  to  {transform:skewX(var(--rsc-skew)) scale(1.07)}
}

/* ОСТАЛЬНЫЕ ПЛИТКИ ГАСНУТ (ТЗ: «в конце непонятно, кто именно выпал»).
   Свечения и пружинки на победителе мало: соседи стоят вплотную, они
   такого же размера, с такими же портретами и числами, и в ряду из
   девяти одинаковых карточек подсвеченная не читается сама собой —
   особенно на широком экране, где их видно больше.
   Поэтому в момент приземления фон уходит: соседи глушатся до трети
   яркости и обесцвечиваются, а победитель остаётся в полном цвете. Это
   единственное состояние, где лента вообще перестаёт быть лентой, —
   и ровно то, ради чего её смотрели.
   Гаснут ПЛАВНО за 0.35 с: мгновенное затемнение читалось бы как сбой
   отрисовки, а не как «вот он». */
.rsc-tile{transition:filter .35s ease, opacity .35s ease}
.rsc-frame.landed .rsc-tile:not(.win){
  filter:brightness(.34) saturate(.4);
  opacity:.85;
}

/* ---------------------------------------------------------------------
   МАРКЕР
   Не риска, а «прицел»: два клина сверху и снизу плюс луч между ними.
   Клинья наклонены тем же скосом, что и всё остальное.
   --------------------------------------------------------------------- */
.rsc-marker{
  position:absolute;top:0;bottom:0;left:50%;width:0;z-index:6;
  transform:translateX(-50%);pointer-events:none;
}
.rsc-mk-beam{
  position:absolute;top:0;bottom:0;left:50%;
  width:calc(var(--rsc-tile) * .028);transform:translateX(-50%) skewX(var(--rsc-skew));
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--live) 92%, #fff) 0%,
    color-mix(in srgb, var(--live) 70%, transparent) 50%,
    color-mix(in srgb, var(--live) 92%, #fff) 100%);
  box-shadow:0 0 16px 2px var(--live), 0 0 40px 6px color-mix(in srgb, var(--live) 55%, transparent);
  transition:box-shadow .16s ease;
}
.rsc-frame.spinning .rsc-mk-beam{
  box-shadow:0 0 22px 3px var(--live), 0 0 64px 12px color-mix(in srgb, var(--live) 70%, transparent);
}
.rsc-mk-top,
.rsc-mk-bot{
  position:absolute;left:50%;width:0;height:0;
  transform:translateX(-50%);
  border-left:calc(var(--rsc-tile) * .075) solid transparent;
  border-right:calc(var(--rsc-tile) * .075) solid transparent;
  filter:drop-shadow(0 0 8px var(--live));
}
.rsc-mk-top{top:-1px;border-top:calc(var(--rsc-tile) * .1) solid var(--live)}
.rsc-mk-bot{bottom:-1px;border-bottom:calc(var(--rsc-tile) * .1) solid var(--live)}

/* ПАУЗА НЕДОЛЁТА. Лента встала, не доехав до центра победителя долю
   плитки, и держит эту позицию — под прицелом наезжает сосед. Пульс на
   луче нужен, чтобы пауза читалась как НАРОЧНАЯ, а не как зависшая
   сцена: единственное, что отличает одно от другого, — движение. */
.rsc-frame.baiting .rsc-mk-beam{animation:rsc-breathe .3s ease-in-out infinite alternate}
@keyframes rsc-breathe{
  from{box-shadow:0 0 18px 2px var(--live), 0 0 44px 8px color-mix(in srgb, var(--live) 50%, transparent)}
  to  {box-shadow:0 0 34px 6px var(--live), 0 0 88px 20px color-mix(in srgb, var(--live) 85%, transparent)}
}

/* ЛУЧ МАРКЕРА ГАСНЕТ НА ПРИЗЕМЛЕНИИ. Пока лента едет, он и есть точка
   отсчёта — сквозь него читают редкости. Когда она встала, читать нужно
   уже не «что проезжает», а «кто выпал», и вертикальная полоса света
   поперёк лица победителя этому прямо мешает. Клинья сверху и снизу
   остаются в полную силу: место они отмечают, а портрет не закрывают. */
.rsc-frame.landed .rsc-mk-beam{opacity:.22;transition:opacity .3s ease}

/* Приземление: ударная волна расходится от маркера по всей рамке. */
.rsc-frame.landed{
  box-shadow:0 3px 0 var(--rsc-ink), 0 20px 46px -16px color-mix(in srgb, var(--live) 60%, transparent),
    inset 0 0 0 2px var(--live), inset 0 0 90px -10px color-mix(in srgb, var(--live) 70%, transparent);
}
.rsc-frame.landed::before,
.rsc-frame.landed::after{opacity:1}
.rsc-frame.landed-ultra{
  animation:rsc-ultra 1.1s ease-out;
}
@keyframes rsc-ultra{
  0%,100%{filter:none}
  20%{filter:brightness(1.5) saturate(1.5)}
  45%{filter:brightness(1.15) saturate(1.25) hue-rotate(35deg)}
  70%{filter:brightness(1.3) saturate(1.4) hue-rotate(-25deg)}
}

/* ---------------------------------------------------------------------
   ЧАСТИЦЫ ПРИЗЕМЛЕНИЯ
   Разлетаются из точки маркера. Угол, дальность, размер и задержка
   приходят из JS переменными — здесь только траектория.
   --------------------------------------------------------------------- */
.rsc-burst{position:absolute;left:50%;top:50%;width:0;height:0;z-index:7;pointer-events:none}
.rsc-burst i{
  position:absolute;left:0;top:0;
  width:var(--s);height:var(--s);border-radius:50%;
  background:var(--live);box-shadow:0 0 10px 2px var(--live);
  animation:rsc-spark var(--t) cubic-bezier(.15,.8,.3,1) var(--dl) both;
}
@keyframes rsc-spark{
  from{transform:rotate(var(--a)) translateX(0) scale(1);opacity:1}
  to  {transform:rotate(var(--a)) translateX(var(--d)) scale(.2);opacity:0}
}

/* ---------------------------------------------------------------------
   ТЕЛЕФОН
   Плитка меряется в vw, поэтому сама по себе мельчает — но ниже 84 px
   портрет перестаёт читаться, и на узком экране лента переводится на
   свой минимум с более крупной долей экрана.
   --------------------------------------------------------------------- */
@media (max-width:720px){
  .cmodal-stage.is-reel{--rsc-tile:clamp(84px, 25vw, 116px);--rsc-gap:8px}
  .cmodal-stage.is-reel.is-multi{--rsc-tile:clamp(62px, 17vw, 84px);--rsc-gap:6px}
  .rsc{gap:10px}
}

/* Движение выключено в системе — сцена показывает результат сразу.
   Убираются именно АНИМАЦИИ, а не цвет: подсветка редкости и цветная
   подошва остаются, они несут смысл, а не украшают. */
@media (prefers-reduced-motion: reduce){
  .rsc-tile.win,
  .rsc-frame.landed-ultra,
  .rsc-tile.is-ultra::after,
  .rsc-frame.baiting .rsc-mk-beam,
  .rsc-burst i{animation:none!important}
  /* Затемнение соседей ОСТАЁТСЯ и здесь — оно несёт смысл (вот кто
     выпал), а не украшает. Убирается только плавность перехода. */
  .rsc-tile{transition:none!important}
  /* Вспышку глушим показом, а не animation:none — её гонит Web
     Animations из скрипта, и правило про CSS-анимации её не остановит. */
  .rsc-glare{display:none!important}
  .rsc-frame,.rsc-mk-beam{transition:none!important}
}