/* =====================================================================
   case.css — Экран открытия кейса
   ---------------------------------------------------------------------
   Логика и структура функций не менялись — только оформление разметки,
   которую строит open.animation.js. Хуки (.cmodal-backdrop, .cmodal-stage,
   .count-btn, [data-open], .copen-cost, [data-balance], .reel-*, .result-*)
   сохранены.

   ЧТО ЗДЕСЬ НА КАКОМ ЯЗЫКЕ. Экран живёт в трёх состояниях, и они
   оформлены ПО-РАЗНОМУ — намеренно:

     • ОКНО ПЕРЕД ОТКРЫТИЕМ (.cmodal-stage.is-idle: герой с ящиком, выбор
       количества, кнопки и сетка «Содержимое кейса») переведено на язык
       сайта — тот же синий, что у панелей витрины, шрифт сцены с обводкой
       и выдавкой, кнопки-плитки с жёсткой нижней тенью, карточки предмета
       по карточке ящика с витрины. Так же сделаны auth.css и profile.css.
     • ЛЕНТА ПРОКРУТКИ и ЭКРАН НАГРАДЫ (.reel-*, .rs-*, .result-*) остались
       в прежней тёмно-фиолетовой палитре: это отдельная сцена со своей
       драматургией, и её никто не просил трогать.

   Подложка (.cmodal-backdrop) у всех трёх общая, поэтому она перекрашена
   в глубокий синий сайта, а НЕ в почти чёрный, как раньше, — но осталась
   плотной и тёмной: лента и награда читаются за счёт контраста с фоном, и
   светлая подложка (как в профиле) их бы погасила.
   ===================================================================== */

/* ---- элементы главной страницы (не трогаем логику витрины) ---- */
.case-card .art-img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.case-card.locked{opacity:.72}
.case-card.locked .items{color:var(--text-dim)}
.case-card.locked::after{opacity:.5}
.coin-s{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;
  background:radial-gradient(circle at 35% 30%,#FDE68A,#F59E0B 70%)}

/* =====================================================================
   ЭКРАН ЯЩИКА — по референсному кадру
   ---------------------------------------------------------------------
   Это НЕ модальное окно поверх витрины, а ОТДЕЛЬНЫЙ ЭКРАН САЙТА: в кадре
   у конкурента над ящиком стоит обычная верхушка сайта с балансом, за
   ящиком — тот же фон, что в главном меню, а слева вверху кнопка «назад»
   и название ящика. Поэтому:

     • .cmodal-backdrop встаёт в ОБЫЧНЫЙ ПОТОК документа и ничем не
       залит — сквозь него виден фоновый ролик страницы (.bg-stage);
     • главная страница на это время прячется (body.case-open ниже), а
       шапка остаётся на месте — она и есть «верхушка с балансом»;
     • своей плашки баланса и крестика у экрана больше нет: баланс
       показывает язычок шапки, а закрывает экран кнопка «назад».

   ВСЕ РАЗМЕРЫ НИЖЕ — ДОЛИ ШИРИНЫ РАМКИ ЯЩИКА (--cw), снятые с кадра
   1921 px, где рамка 511 px. В скобках исходные пиксели:
     рамка            511 x 442  → отношение 1.156, радиус 9 (1.8 %)
     рамка → числа     27 (5.3 %)      плитка числа  70 x 76 (13.7 x 14.9 %)
     просвет чисел     19 (3.7 %)      кегль числа   26 (5.1 %)
     числа → «Открыть» 26 (5.0 %)      «Открыть»    511 x 72 (100 x 14.1 %)
     «Открыть» → полка 49 (9.6 %)      кегль кнопки  29 (5.7 %)
   Вертикали шапки считаются от --head-h (в кадре полоса 44 px):
     полоса → кнопка «назад» 116 (2.64), сама кнопка 94 (2.14 — это ровно
     плашка меню сайта в 2 полосы), кнопка → название 47 (1.07).
   ===================================================================== */
.cmodal-backdrop{
  --cx-bg:#0B0C16; --cx-card:#14162A;
  --cx-purple:#8B5CF6; --cx-cyan:#22D3EE; --cx-blue:#3B82F6;
  --cx-line:rgba(255,255,255,.08); --cx-line-2:rgba(255,255,255,.14);
  --cx-text:#EDEBFF; --cx-dim:#8E93B5;
  --cx-glass:rgba(255,255,255,.045);
  --cx-grad:linear-gradient(120deg,#8B5CF6 0%,#6366F1 45%,#22D3EE 110%);

  /* ОБВОДКА ВСЕГО ЭКРАНА. В кадре она у рамки, плиток чисел и кнопки
     одна и та же: тёмно-синяя ~3 px, снизу вдвое толще, под ней жёсткая
     тень без размытия. Замер ядра дал (0,27,91) у рамки и (0,29,96) у
     плиток — сглаживание такую тонкую линию осветляет, поэтому берём
     #000E3C: тот же цвет, что у карточек витрины (снят по горизонтальной
     кромке в референсе витрины, где скос его не размазывает). Две почти одинаковые
     обводки на одном сайте разошлись бы заметнее, чем эта разница. */
  --cx-ink-line:#000E3C;
  /* Заливка синих плиток чисел — ПЛОСКАЯ. Замер: внутри рамки
     (63,146,246), в плитке числа (63,148,245) при фоне страницы, который
     под ними гуляет от (50,111,232) до (52,134,233), — то есть заливка
     непрозрачная, а не затемнение фона. В кадре этот цвет стоял и в
     рамке ящика, но рамка теперь взяла свечение с витрины (--cx-glow
     ниже), так что --cx-body остался только на плитках. */
  --cx-body:#3F92F6;
  /* СВЕЧЕНИЕ ЗА ЯЩИКОМ — тот же градиент, что у карточек витрины
     (.bs-art в site.css), стопы один в один. Замер кадра давал внутри
     рамки плоский #3F92F6, но по заданию экран ящика приведён к виду
     главной: там за коробкой бирюзовое пятно, и рамка здесь получает
     его же. Проценты те же (47 % x 54.4 % своей коробки), поэтому
     эллипс упирается в боковые кромки и чуть выходит за верх и низ —
     ровно как на витрине, только коробка тут почти квадратная.
     Заливка --cx-body осталась последним стопом: по углам рамки цвет
     тот же, что был. */
  --cx-glow:radial-gradient(47% 54.4% at 50% 50%,
    #9DFFFA 0%, #47E3F9 55%, #38DDFB 65%, #25CCFC 75%,
    #17BDFC 85%, #08AFFC 95%, #01A5FC 100%);

  position:relative;z-index:1;
  opacity:0;transition:opacity .3s ease;
  font-family:'Manrope',sans-serif;color:var(--cx-text);
}
.cmodal-backdrop.show{opacity:1}

/* Экран ящика открыт — главная страница спрятана. Шапка НЕ прячется:
   она и есть верхушка сайта с балансом из кадра. */
body.case-open > main,
body.case-open > footer{display:none}

/* ПАРЯЩИЕ СВЕТОВЫЕ ПЯТНА. С экрана ящика они ушли вместе с его фоном —
   там теперь ролик страницы. Правила остаются: этой же декорацией
   пользуется окно входа (js/auth.ui.js строит .cx-scene с двумя орбами),
   и удалить их значило бы молча поменять вид формы входа. */
.cx-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cx-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:cx-float 14s ease-in-out infinite}
.cx-orb-a{width:420px;height:420px;left:-80px;top:-60px;background:radial-gradient(circle,#2A72E6,transparent 70%)}
.cx-orb-b{width:380px;height:380px;right:-60px;top:120px;background:radial-gradient(circle,#55B8FF,transparent 70%);animation-delay:-4s}
@keyframes cx-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-38px,0)}}

/* Колонка та же, что у витрины: .cmodal несёт класс .wrap, отсюда ширина
   и боковые поля. Собственные правила пишем через .cmodal.cx — site.css
   подключён ПОСЛЕ этого файла, и одноклассовый селектор проиграл бы
   .wrap с его `padding:0 24px` и `margin:0 auto`. */
.cmodal.cx{
  --cw:clamp(240px,26.6vw,460px);
  position:relative;z-index:2;
  /* 2.64 полосы от нижней кромки шапки до кнопки «назад» — как в кадре.
     Заодно это запас под свисающие из шапки логотип, плашку профиля и
     язычки баланса (им нужно 1.4 полосы). */
  padding-top:calc(var(--head-h) * 2.64);
  padding-bottom:calc(var(--cw) * .2);
}

/* ---------- ВЕРХНЯЯ СТРОКА: «НАЗАД» + НАЗВАНИЕ ---------- */
/* Название ящика стоит ЗДЕСЬ, а не под ящиком: в кадре оно набрано в
   строку с кнопкой «назад», и центр строки совпадает с центром кнопки.

   СЕТКА, А НЕ СТРОКА: под этой строкой стоит регулятор звука (.cx-vol
   ниже), и ему нужна своя. Две колонки — «назад» и название — дают её
   даром, а ползунок занимает обе: он начинается от ЛЕВОЙ КРОМКИ КНОПКИ
   «назад», по левому полю страницы, а не с отступом под название. Так у
   служебного узла один левый край на обе строки, и ползунку достаётся
   вся ширина колонки под ход дорожки. Прежний flex-wrap сюда не годился
   вовсе: перенос ставил группу в поток за названием и её положение
   зависело от длины имени ящика. */
.cx-bar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  column-gap:calc(var(--head-h) * 1.07);
  row-gap:calc(var(--head-h) * .42);
  margin-bottom:calc(var(--cw) * .08);
}
.cx-bar > .cx-back{grid-column:1;grid-row:1}
.cx-bar > .cx-title{grid-column:2;grid-row:1}
.cx-bar > .cx-vol{grid-column:1 / -1;grid-row:2}

/* КНОПКА «НАЗАД» — та же тёмная плашка, что кнопка меню в шапке сайта:
   тот же градиент с фаской сверху, та же обводка, тот же скос 5.06°.
   Замер кадра это подтверждает: левая кромка уходит с 76 px на 69 за
   83 строки, dx/dy = -0.084 → 4.8°, а размер 94 px = 2.14 полосы против
   2.0 у плашки меню. */
.cx-back{
  flex:0 0 auto;
  width:calc(var(--head-h) * 2);height:calc(var(--head-h) * 2);
  display:grid;place-items:center;cursor:pointer;padding:0;
  background:linear-gradient(180deg,
    #6B697E 0%, #6B697E 5%, #55536B 10%, #3C4155 15%,
    #353C4F 26%, #343C4E 70%, #2F3747 100%);
  border:2px solid var(--ink);
  border-radius:calc(var(--head-h) * .15);
  box-shadow:0 2px 0 var(--ink), 0 7px 14px -6px rgba(2,10,45,.8);
  transform:skewX(-5.06deg);
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.cx-back:hover{filter:brightness(1.22)}
.cx-back:active{transform:skewX(-5.06deg) translateY(2px);
  box-shadow:0 0 0 var(--ink), 0 4px 10px -6px rgba(2,10,45,.8)}
/* Сама «птичка». Замер: 24 x 37 px в кнопке 94 x 96 (25.5 % и 39 %),
   толщина по горизонтали 10. Полигоном, а не повёрнутым квадратом:
   у квадрата, повёрнутого на 45°, ширина равна высоте, а здесь стрелка
   в полтора раза выше. Обратный скос — чтобы стоять прямо в наклонной
   плашке, как аватар в плашке профиля. */
.cx-back-ico{
  width:calc(var(--head-h) * .51);height:calc(var(--head-h) * .79);
  background:#fff;
  clip-path:polygon(100% 0, 0 50%, 100% 100%, 100% 73%, 42% 50%, 100% 27%);
  transform:skewX(5.06deg);
}

.cx-title,
.count-btn,
.copen-btn,
.cx-vol-num,
.cx-section-head h2,
.ic-value,
.ic-name{
  /* Общий набор «игрового» текста — та же связка, что в .bs-ink на
     витрине. Утилитой воспользоваться нельзя: разметку строит
     open.animation.js, и класс пришлось бы дописывать в неё. */
  font-family:"MegaBoxFont","Arial Black","Segoe UI",system-ui,sans-serif;
  font-weight:900;letter-spacing:.04em;word-spacing:-.09em;
  text-shadow:var(--so),var(--extrude);
  line-height:1.1;
}
/* НАЗВАНИЕ ЯЩИКА. Замер кадра: капитель 31 px при полосе шапки 44, то
   есть 0.70 полосы; у lilitaone капитель составляет .725 кегля, отсюда
   .97. Прежняя градиентная заливка через background-clip сюда не годится
   в принципе: она требует color:transparent, а прозрачная заливка
   открывает выдавку --extrude, лежащую ровно за глифом, — слово вышло бы
   чернильным (та же ловушка описана у логотипа в site.css). */
.cx-title{
  font-size:calc(var(--head-h) * .97);margin:0;
  text-transform:uppercase;color:#fff;
}

/* =========== ЯЩИК, ЧИСЛА И «ОТКРЫТЬ» =========== */
/* Всё это стоит одной колонкой шириной с рамку и по центру страницы —
   как в кадре: рамка, под ней ряд чисел, под ним золотая лента. */
.cx-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  width:var(--cw);margin:0 auto;
}

/* РАМКА ЯЩИКА. 511 x 442 в кадре → отношение 1.156. Заливка — СВЕЧЕНИЕ
   С ГЛАВНОЙ (--cx-glow): по кадру внутри рамки ровный синий, но экран
   ящика намеренно приведён к виду витрины, где за коробкой бирюзовое
   пятно. Обводка 3 px, снизу 6 (вдвое, как у карточек витрины), под ней
   жёсткая тень без размытия. Радиус МАЛЕНЬКИЙ: замер угла даёт дугу в
   5-9 px на 511 ширины, то есть 1.8 % — рамка почти прямоугольная. */
.cx-case{
  position:relative;width:100%;aspect-ratio:1.156;
  display:grid;place-items:center;
  /* Один слой: последний стоп градиента (#01A5FC) сам заливает углы, и
     --cx-body под ним не проступил бы нигде. У плиток чисел он остался —
     заливка рамки и плиток здесь намеренно разошлась. */
  background:var(--cx-glow);
  border:3px solid var(--cx-ink-line);border-bottom-width:6px;
  border-radius:calc(var(--cw) * .018);
  box-shadow:0 6px 0 rgba(0,0,22,.42);
  /* Покачивание ящика (±2 % высоты) не должно вылезать за кромку. */
  overflow:hidden;
}
/* Светлый кант по внутреннему краю — он есть и в кадре: сразу за тёмной
   обводкой идёт полоска светлее тела (замер: (81,140,221) против
   (63,146,246) — светлее по красному, темнее по синему, то есть кант
   холодно-серый, а не белый). Отдельным слоем, а не inset-тенью: тень
   легла бы ПОД арт, а кант должен идти поверх. */
.cx-case::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border:3px solid rgba(186,228,255,.42);
  border-radius:calc(var(--cw) * .018);
}
/* СВЕТ ПОД ЯЩИКОМ. Отдельное пятно на дне рамки: по строке y=700 (сразу
   под артом) зелёный канал идёт 144 у кромок и 159 в середине, к y=735
   разница сходит на нет. Половина высоты пика приходится на 33 % ширины
   рамки, а центр — на 86 % высоты, то есть ровно на нижнюю кромку ящика
   (арт занимает 72 % и стоит по центру: 50 % + 36 %). Отсюда эллипс
   34 x 15 % на 50/86 %.
   Альфа СНИЖЕНА до .18 против прежних .46: раньше пятно и было всем
   свечением рамки, а теперь за коробкой стоит бирюзовый градиент с
   витрины, и белое поверх него глушило бы его в белёсое. Общая подсветка
   к центру (была .16 белого) убрана по той же причине — её роль взял на
   себя сам градиент.
   Пятно НЕ качается вместе с ящиком (анимация висит на .cx-case-art):
   это свет на дне рамки, а не часть коробки. */
.cx-case::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(38% 17% at 50% calc(50% + var(--cx-art-h,72%) / 2), rgba(255,255,255,.18), transparent 70%);
}
@keyframes cx-spin{to{transform:rotate(1turn)}}
/* Арт: в кадре ящик занимает 70 % высоты рамки (замер 309 из 442) и стоит
   по её центру. Множитель на кейс — как на витрине (--bs-art-h в
   site.css): у megabox.png по краям 13 % прозрачного поля, и при общей
   высоте площадки сам ящик выходил бы на 13 % мельче остальных. */
.cx-case-art{
  position:relative;z-index:2;width:92%;height:var(--cx-art-h,72%);
  display:grid;place-items:center;animation:cx-bob 4.6s ease-in-out infinite;
}
.cmodal.cx[data-case="megabox"]{--cx-art-h:83%}
/* Ящики редкости — та же поправка, что на витрине: фон снят, пустое
   поле обрезано, кадр стал 384x335, и ящик занимает в нём 91 % высоты.
   82 % x 0.913 = 75 % высоты рамки видимого ящика против прежних 57 %
   (72 % от квадрата с полем). Шире рамки не станет: при аспекте арта
   1.15 это 74 % её ширины при разрешённых 92 %. */
.cmodal.cx[data-case="rarebox"],
.cmodal.cx[data-case="superrarebox"],
.cmodal.cx[data-case="epicbox"],
.cmodal.cx[data-case="mythicbox"],
.cmodal.cx[data-case="legendarybox"],
.cmodal.cx[data-case="ultrabox"]{--cx-art-h:82%}
/* Особые ящики — та же поправка, что на витрине (см. --bs-art-h в
   css/site.css): кадр у них обрезан по содержимому, ящик занимает все
   100 % его высоты вместо 91 %, и нарисованы они приплюснутее. Высота
   пересчитана по зрительной площади: 74.8 % (то есть 82 % x 0.913 у
   ящиков редкости) x sqrt(1.21 / 1.33) = 71 %. */
.cmodal.cx[data-case="chaosbox"],
.cmodal.cx[data-case="universebox"],
.cmodal.cx[data-case="fatebox"]{--cx-art-h:71%}
@keyframes cx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2%)}}
.ch-icon-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;filter:drop-shadow(0 18px 24px rgba(3,40,95,.42))}
.cx-case-art.has-icon .ch-icon-emoji{display:none}
.ch-icon-emoji{font-size:calc(var(--cw) * .34);filter:drop-shadow(0 20px 30px rgba(2,10,45,.6))}

/* РЯД ЧИСЕЛ — по кадру это НЕ сегменты в общей обойме, а отдельные
   квадратные плитки, и выбранная не подсвечена, а перекрашена в золото.
   Плитка 70 x 76 при просвете 19 (13.7 % / 14.9 % / 3.7 % ширины рамки),
   шесть штук ровно во всю ширину рамки. У нас их четыре (1/3/5/10),
   поэтому ряд не растягивается на всю ширину, а стоит по центру: размер
   плитки важнее, чем заполненная строка. */
.count-seg{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:calc(var(--cw) * .037);
  margin-top:calc(var(--cw) * .053);
  background:none;border:0;box-shadow:none;padding:0;
}
.count-btn{
  width:calc(var(--cw) * .137);height:calc(var(--cw) * .149);
  flex:0 0 auto;cursor:pointer;color:#fff;
  font-size:calc(var(--cw) * .051);line-height:1;padding:0 0 6%;
  border:3px solid var(--cx-ink-line);border-bottom-width:5px;
  border-radius:calc(var(--cw) * .018);
  background:var(--cx-body);
  /* Светлый кант по верхней кромке — тот же, что у рамки, и жёсткая
     подставка снизу вместо мягкой тени: в кадре под плиткой ровная
     тёмная полоса без спада. */
  box-shadow:inset 0 3px 0 rgba(186,228,255,.5), 0 4px 0 rgba(0,0,22,.42);
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.count-btn:hover{filter:brightness(1.1)}
.count-btn:active{transform:translateY(4px);
  box-shadow:inset 0 3px 0 rgba(186,228,255,.5), 0 0 0 rgba(0,0,22,.42)}
/* Выбранная — золотая. Замер кадра: верх (255,211,73), тело (250,182,56),
   низ (245,152,44) — это ровно наш золотой градиент #FFD84D → #F5A524. */
.count-btn.active{
  background:linear-gradient(180deg,#FFD84D,#F5A524);
  box-shadow:inset 0 3px 0 rgba(255,247,214,.5), 0 4px 0 rgba(0,0,22,.42);
}
.count-btn.active:active{
  box-shadow:inset 0 3px 0 rgba(255,247,214,.5), 0 0 0 rgba(0,0,22,.42)}
.count-btn:disabled{opacity:.55;cursor:default}

/* ГЛАВНАЯ КНОПКА — золотая лента во всю ширину рамки, с ценой и знаком
   рубля прямо в надписи: «ОТКРЫТЬ 185 ₽». Высота 72 px при рамке 511 —
   те же 14 %, что у плиток чисел, поэтому ряд и лента читаются одной
   стопкой. */
.copen-btn{
  position:relative;cursor:pointer;color:#fff;
  width:100%;height:calc(var(--cw) * .141);
  margin-top:calc(var(--cw) * .05);
  font-size:calc(var(--cw) * .057);line-height:1;padding:0 0 1.4%;
  text-transform:uppercase;
  border:3px solid var(--cx-ink-line);border-bottom-width:5px;
  border-radius:calc(var(--cw) * .018);
  background:linear-gradient(180deg,#FFD84D,#F5A524);
  box-shadow:inset 0 3px 0 rgba(255,247,214,.5), 0 4px 0 rgba(0,0,22,.42);
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.copen-btn:hover{filter:brightness(1.08)}
.copen-btn:active{transform:translateY(4px);
  box-shadow:inset 0 3px 0 rgba(255,247,214,.5), 0 0 0 rgba(0,0,22,.42)}
.copen-btn:disabled{opacity:.7;cursor:default;filter:saturate(.8)}
/* Не хватает денег — кнопка гаснет в серый и теряет подставку. */
.copen-btn.poor{
  background:linear-gradient(180deg,#4A5570,#2C3450);
  box-shadow:inset 0 3px 0 rgba(200,215,240,.25), 0 4px 0 rgba(0,0,22,.42);
  color:#9FB3D6;
}
.copen-cost{color:#fff}
.copen-btn.poor .copen-cost{color:#C9D6EC}
/* Старая цена на кнопке — та же справка, что и на карточке витрины
   (см. .bs-price s в css/site.css), и линия перечёркивания тоже своя:
   встроенную браузер кладёт по базовой линии шрифта, а Lilita One сидит
   в строке высоко, и линия проходила бы по нижней трети цифр. */
.copen-cost s{
  position:relative;font-size:.66em;opacity:.75;
  margin-right:.36em;text-decoration:none;
}
.copen-cost s::after{
  content:"";position:absolute;left:-.06em;right:-.06em;top:46%;
  height:.1em;background:currentColor;border-radius:.05em;
}

/* Плашка скидки и обратный отсчёт над ящиком. Левый верхний угол рамки:
   справа от ящика пусто, но туда смотрит счётчик открытий, а сверху
   слева не занято ничем. Размеры — долями --cw, как всё на этом экране. */
.cx-off,.cx-left{
  position:absolute;left:3.4%;z-index:4;pointer-events:none;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;line-height:1;white-space:nowrap;
}
.cx-off{
  top:3.6%;color:#fff;font-size:calc(var(--cw) * .052);
  padding:calc(var(--cw) * .012) calc(var(--cw) * .018) calc(var(--cw) * .009);
  border-radius:calc(var(--cw) * .016);
  /* Красный, а не жёлтый: жёлтый занят кнопкой «Открыть» и легендарной
     ступенью, и плашка скидки читалась бы как одно из них. */
  background:#E8323C;border:3px solid var(--cx-ink-line);
  box-shadow:0 4px 0 rgba(0,0,22,.42);
}
.cx-left{
  top:calc(3.6% + var(--cw) * .095);
  color:#fff;font-size:calc(var(--cw) * .034);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  text-shadow:0 2px 0 rgba(0,0,22,.5);
}

/* =========== ГРОМКОСТЬ =========== */
/* Регулятор стоит ПОД СТРОКОЙ «назад + название», в том же служебном узле
   .cx-bar, а не в стопке под кнопкой «Открыть»: стопка «рамка → числа →
   Открыть» снята с кадра и разрывать её нечем, а строка с кнопкой
   «назад» — служебная, ей такой сосед по смыслу и полагается.

   ОТ КНОПКИ «НАЗАД», А НЕ ОТ НАЗВАНИЯ. Ползунок начинается на левом поле
   страницы, под кнопкой, и идёт вправо. Раньше он стоял справа от
   названия, у правой кромки, через всю пустоту от него — и читался как
   отдельный элемент, ни с чем не связанный; отступ же под название дал
   бы служебному узлу два разных левых края на две строки. Один общий
   край с кнопкой ставит обе строки в одну колонку и заодно снимает
   зависимость от длины имени ящика: раньше длинное название выдавливало
   группу на свою строку, и вид экрана менялся от ящика к ящику.

   ОТСЮДА И ЕДИНИЦА РАЗМЕРА. Всё в этой строке считается от полосы шапки
   (--head-h): по ней выведена и кнопка «назад» (2 полосы), и кегль
   названия (.97). Плитка динамика — те же 2 полосы, поэтому строка не
   становится выше ни на пиксель, а обе плашки в ней одного роста.
   Внутренности группы считаются уже от самой плитки (--vol-tile): так
   значок, жёлоб и рукоятка остаются в тех же пропорциях, куда бы группу
   ни перенесли.

   Язык оформления взят у соседей по экрану, без единой новой краски:
     • динамик — квадратная плитка числа (.count-btn): та же заливка
       --cx-body, та же обводка, тот же светлый кант сверху и жёсткая
       подставка снизу;
     • заполненная часть дорожки — золото кнопки «Открыть»;
     • пустая — утопленный жёлоб: та же обводка, но кант ВНУТРЬ сверху,
       как выемка, а не как выступ.
   Скоса, как у «назад», группе не дано намеренно: наклонная дорожка с
   прямой рукояткой читалась бы браком. В шапке сайта рядом со скошенными
   плашками так же стоят прямые язычки баланса. */
.cx-vol{
  --vol-tile:calc(var(--head-h) * 2);          /* плитка = кнопка «назад» */
  --vol-slot:calc(var(--vol-tile) * .75);      /* высота рукоятки */
  --vol-knob:calc(var(--vol-tile) * .35);      /* ширина рукоятки */
  display:flex;align-items:center;
  gap:calc(var(--vol-tile) * .26);
  /* Ровно 11 полос — и потолок, и обычная ширина: дорожке нужен ход, но
     во всю строку она вытянулась бы через весь экран и потянула бы взгляд
     на себя. На узком экране, где 11 полос уже не помещаются, группа
     ужимается до ширины строки (min-width:0 разрешает сжатие дорожке
     внутри). Распорка справа держит её у ЛЕВОГО края — на одной линии с
     кнопкой «назад» над ней. */
  width:min(100%, calc(var(--head-h) * 11));min-width:0;
  margin-right:auto;
}
/* Своей @media у группы нет намеренно. На узких экранах полоса шапки
   падает с 33 до 23, вместе с ней ужимается вся группа, и её минимум
   (плитка + дорожка в 1.4 плитки + число ≈ 180 px) остаётся уже строки
   даже на 320 px. */

/* ПЛИТКА ДИНАМИКА. Квадрат в высоту строки — «плитка числа», у которой
   вместо цифры значок. */
.cx-vol-mute{
  flex:0 0 auto;padding:0;cursor:pointer;
  display:grid;place-items:center;
  width:var(--vol-tile);height:var(--vol-tile);
  border:3px solid var(--cx-ink-line);border-bottom-width:5px;
  border-radius:calc(var(--vol-tile) * .075);
  background:var(--cx-body);
  box-shadow:inset 0 3px 0 rgba(186,228,255,.5), 0 4px 0 rgba(0,0,22,.42);
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.cx-vol-mute:hover{filter:brightness(1.1)}
.cx-vol-mute:active{transform:translateY(4px);
  box-shadow:inset 0 3px 0 rgba(186,228,255,.5), 0 0 0 rgba(0,0,22,.42)}
/* Выключено — плитка гаснет ровно так же, как кнопка «Открыть» без
   денег: тот же серо-синий градиент, чтобы «недоступно» на экране
   выглядело одинаково. */
.cx-vol-mute.is-off{
  background:linear-gradient(180deg,#4A5570,#2C3450);
  box-shadow:inset 0 3px 0 rgba(200,215,240,.25), 0 4px 0 rgba(0,0,22,.42);
}

/* ЗНАЧОК (разметка — в volumeIcon(), js/open.animation.js).
   Размер один — доля плитки; внутреннее устройство держит viewBox, а не
   проценты, поэтому пропорции не плывут ни на каком экране.
   Ширина 62 % плитки при отношении сторон 26:24 — значок занимает ту же
   долю плашки, что «птичка» в кнопке «назад» (25 % ширины у неё против
   тех же 24 % у конуса здесь: дуги — приложение к нему, а не тело).
   Тень под глифом — упрощённая выдавка --extrude, которой набран весь
   текст экрана: без неё белый значок на синей плитке выглядит наклейкой,
   а не частью того же набора. */
.cx-vol-ico{
  width:calc(var(--vol-tile) * .62);
  height:calc(var(--vol-tile) * .572);
  filter:drop-shadow(0 calc(var(--vol-tile) * .028) 0 rgba(0,0,22,.45));
}
/* Конус залит и обведён ОДНИМ И ТЕМ ЖЕ белым: обводка тут не контур, а
   способ скруглить углы многоугольника (stroke-linejoin:round) — узлов
   в пути от этого не прибавляется, а силуэт получается мягким. */
.cx-vol-cone{fill:#fff;stroke:#fff;stroke-width:1.7;stroke-linejoin:round}
.cx-vol-w,
.cx-vol-x{fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round}
/* Дуги — индикатор уровня: тише трети горит одна, до двух третей две,
   дальше все три. Крест живёт в том же значке и показывается только
   выключенным. */
.cx-vol-x{display:none}
.cx-vol-mute[data-lvl="low"] .cx-vol-w2,
.cx-vol-mute[data-lvl="low"] .cx-vol-w3,
.cx-vol-mute[data-lvl="mid"] .cx-vol-w3{display:none}
.cx-vol-mute.is-off .cx-vol-w{display:none}
.cx-vol-mute.is-off .cx-vol-x{display:block}

/* ДОРОЖКА. Гнездо во всю оставшуюся ширину строки; высоту держит
   рукоятка (три четверти плитки — рядом с плашкой «назад» ползунок в её
   полный рост выглядел бы второй плашкой), а жёлоб внутри ещё тоньше и
   стоит по центру — рукоятке нужно выступать над ним сверху и снизу. */
.cx-vol-slot{
  position:relative;flex:1 1 auto;min-width:calc(var(--vol-tile) * 1.4);
  height:var(--vol-slot);
}
.cx-vol-groove{
  position:absolute;left:0;right:0;top:50%;
  height:calc(var(--vol-tile) * .4);transform:translateY(-50%);
  border:3px solid var(--cx-ink-line);
  border-radius:calc(var(--vol-tile) * .075);
  background:#1E3A6B;                      /* дно жёлоба: тень внутри рамки */
  box-shadow:inset 0 3px 0 rgba(0,0,22,.35), 0 1px 0 rgba(186,228,255,.22);
  overflow:hidden;                          /* золото не вылезает за скругления */
}
/* Заполнение доводится до ЦЕНТРА ползунка, а не до его левого края:
   иначе на краях дорожки золото и рукоятка расходились бы на полширины
   ползунка — самая заметная неточность у самодельных ползунков.
   Ход рукоятки отсчитывается от ВНЕШНЕЙ ширины жёлоба (поле ввода лежит
   на всём гнезде), а проценты внутри жёлоба — от внутренней, поэтому
   к 100% возвращаются две обводки по 3 px, а сама полоса начинается на
   те же 3 px левее. Без этой поправки золото отставало бы от рукоятки
   на толщину обводки — у правого края это заметно. */
.cx-vol-fill{
  position:absolute;left:-3px;top:0;bottom:0;
  width:calc(var(--vp,0) * (100% + 6px - var(--vol-knob)) + var(--vol-knob) / 2);
  background:linear-gradient(180deg,#FFD84D,#F5A524);
  box-shadow:inset 0 3px 0 rgba(255,247,214,.5);
}

/* Само поле — прозрачное и во весь слот: видно только его рукоятку,
   всё остальное рисуют .cx-vol-groove и .cx-vol-fill под ним. Зато
   даром достаются перетаскивание, клик по дорожке, стрелки и Home/End. */
.cx-vol-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:transparent;
  cursor:pointer;
}
.cx-vol-range:focus{outline:none}
.cx-vol-range::-webkit-slider-runnable-track{height:100%;background:transparent;border:0}
.cx-vol-range::-moz-range-track{height:100%;background:transparent;border:0}
/* РУКОЯТКА — плитка того же набора, что и всё на экране: обводка,
   светлый кант сверху, жёсткая тень снизу. Высота во весь слот, чтобы
   она выступала над жёлобом сверху и снизу. */
.cx-vol-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:var(--vol-knob);height:var(--vol-slot);
  border:3px solid var(--cx-ink-line);border-bottom-width:4px;
  border-radius:calc(var(--vol-tile) * .075);
  background:linear-gradient(180deg,#EAF3FF,#B9CEEC);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.75), 0 3px 0 rgba(0,0,22,.42);
}
.cx-vol-range::-moz-range-thumb{
  width:var(--vol-knob);height:var(--vol-slot);box-sizing:border-box;
  border:3px solid var(--cx-ink-line);border-bottom-width:4px;
  border-radius:calc(var(--vol-tile) * .075);
  background:linear-gradient(180deg,#EAF3FF,#B9CEEC);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.75), 0 3px 0 rgba(0,0,22,.42);
}
.cx-vol-range:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 3px 0 rgba(255,255,255,.75), 0 3px 0 rgba(0,0,22,.42), 0 0 0 3px var(--gold,#FFE45C)}
.cx-vol-range:focus-visible::-moz-range-thumb{box-shadow:inset 0 3px 0 rgba(255,255,255,.75), 0 3px 0 rgba(0,0,22,.42), 0 0 0 3px var(--gold,#FFE45C)}

/* ЧИСЛО. Ширина фиксирована по трёхзначному «100»: без этого дорожка
   дёргалась бы на каждом переходе через 9 и 99. */
.cx-vol-num{
  flex:0 0 auto;min-width:var(--vol-tile);
  text-align:center;color:#fff;
  font-size:calc(var(--vol-tile) * .38);line-height:var(--vol-tile);
}

/* ЗВУК ВЫКЛЮЧЕН — гаснет вся дорожка, но отметка остаётся на месте:
   видно, куда вернётся громкость. */
.cx-vol.is-off .cx-vol-fill{background:linear-gradient(180deg,#4A5570,#2C3450);box-shadow:inset 0 3px 0 rgba(200,215,240,.25)}
.cx-vol.is-off .cx-vol-num{color:#9FB3D6}
.cx-vol.is-off .cx-vol-range::-webkit-slider-thumb{background:linear-gradient(180deg,#C3CEE2,#8E9DBC)}
.cx-vol.is-off .cx-vol-range::-moz-range-thumb{background:linear-gradient(180deg,#C3CEE2,#8E9DBC)}

/* =========== СЦЕНА (грид/лента/результаты) =========== */
/* От «Открыть» до полки в кадре 49 px при рамке 511 — 9.6 %. */
.cmodal-stage{margin-top:calc(var(--cw) * .096);min-height:120px}

/* =====================================================================
   «МОЖЕТ ВЫПАСТЬ» — полка витрины
   ---------------------------------------------------------------------
   В кадре это широкая панель почти во всю страницу с заголовком по
   центру и чертой под ним; углы прямые, обводка тонкая и чуть темнее
   тела. Заливка там непрозрачная (замер: (37,76,211) при фоне, который
   рядом гуляет от (31,80,198) до (52,134,233)), но у НАС под панелью
   фоновый ролик, и глухая заливка вырезала бы из него дыру. Поэтому
   берём ту же полупрозрачную подложку, что у полок главной (.gpanel в
   site.css): она гасит фон ровно так же, как в игре, и обе страницы
   остаются одной вёрсткой.

   ПОЛОСЫ ЗАГОЛОВКА ОТДЕЛЬНЫМ ЦВЕТОМ ЗДЕСЬ НЕТ — в отличие от полок
   главной. Замер кадра: над чертой (36,74,209), под ней (38,83,212), то
   есть заливка одна, а полосу отделяет только линия в 4 px.

   Правила висят на .is-idle, а НЕ на .cmodal-stage: тот же узел под
   лентой прокрутки и экраном награды, и панель вокруг них была бы
   лишней рамкой посреди сцены.
   ===================================================================== */
.cmodal-stage.is-idle{
  border:3px solid rgba(0,30,170,.40);
  border-radius:20px;
  background:rgba(21,27,243,.328);
  overflow:hidden;
}
/* Заголовок ровно по центру полосы — и в кадре, и у полок главной. */
.cmodal-stage.is-idle .cx-section-head{
  display:flex;align-items:center;justify-content:center;margin:0;
  /* 75 px полосы при рамке 511 = 14.7 %; сама черта — ниже. */
  height:calc(var(--cw) * .147);
  padding:0 clamp(16px,3vw,24px);
  border-bottom:3px solid rgba(0,30,170,.40);
}
/* Полоса «Бонусы» стоит НЕ у верхней кромки панели, а посреди неё —
   после сетки предметов. Без линии сверху она читалась бы как продолжение
   той же сетки, поэтому граница здесь, а не на первом заголовке.

   Полос «Джекпот» и «Слив» больше нет: по ТЗ все бойцы идут одним
   списком, и деление сетки на ступени убрано вместе с их правилами
   (см. renderIdle в js/open.animation.js). «Бонусы» остались — это не
   ступень, а отдельная секция коробок Small/Big/Mega. */
.cmodal-stage.is-idle .cx-section-head.is-bonus{
  border-top:3px solid rgba(0,30,170,.40);
}
/* Капитель заголовка в кадре 20 px при полосе 75 — кегль 20/.725 = 27.6,
   то есть 5.4 % ширины рамки. */
.cx-section-head h2{font-size:calc(var(--cw) * .054);text-transform:uppercase;color:#fff}

/* ---------------------------------------------------------------------
   ПЛИТКА ПРЕДМЕТА — по референсному кадру, один в один.

   Кадр даёт плитку 136 x 145 px, и это ровно карточка ящика с нашей
   витрины в миниатюре: тело сплошного цвета, НАЗВАНИЕ АБСОЛЮТОМ В
   ПРАВОМ ВЕРХНЕМ УГЛУ, арт во всю площадку и полоса цены по низу.
   Поэтому размеры заданы в cqw — долях ШИРИНЫ плитки, как у .bs-card в
   site.css (в скобках исходные пиксели кадра):

     отношение сторон  136/145
     обводка            3 px, СНИЗУ 5 — вдвое толще, как на витрине
     радиус             9 px  → 6.6 %
     полоса цены       30 px  → 22 %   заливка #495476 (замер)
     кегль цены        19 px  → 14 %
     название: капитель 11 px → 8 % (кегль 11 %), сверху 5 px → 3.7 %,
               справа   8 px  → 5.9 %, прижато ВПРАВО — как в кадре

   ЗАЛИВКА ТЕЛА ПЛОСКАЯ. Замер по трём плиткам: у голубой верх (142,210,242)
   и низ (147,208,246), у золотой то же самое — градиента нет. Прежнее
   радиальное свечение отсюда убрано.

   ЦВЕТ ТЕЛА = РЕДКОСТЬ. У конкурента он означает категорию (монеты
   золотые, гемы зелёные, бойцы голубые); у нас есть редкость, и цвета
   взяты по её шкале — жёлтый легендарным, красный мифическим и так далее
   (таблица ниже). Ключ приходит в data-rar, который пишет
   open.animation.js, так что разметку это не потребовало.

   Порядок в разметке (арт, цена, название, редкость) не трогаем — нужный
   порядок задаёт order, а название вынуто из потока абсолютом. --------- */
/* Колонка 136 px — ширина плитки в кадре один в один. Заодно она задаёт
   плотность сетки: на нашей панели помещается семь плиток в ряд, ровно
   как в референсе. При 152 их было пять, плитки раздувались до 199 px, и
   обводка в 3 px переставала быть теми же 2.2 % ширины, что в кадре. */
.item-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:16px;
  padding:22px clamp(16px,3vw,24px) 26px;
}
.item-card{
  position:relative;overflow:hidden;padding:0;
  display:flex;flex-direction:column;
  aspect-ratio:136/145;
  /* Контейнер отсчёта cqw: всё внутри — доли ширины плитки, поэтому на
     любой колонке это один и тот же рисунок. */
  container-type:inline-size;
  background:var(--body,#96C6E2);
  border:3px solid #000E3C;border-bottom-width:5px;
  /* Радиус в ПИКСЕЛЯХ, а не в cqw. Элемент с container-type — контейнер
     для потомков, но не для себя: cqw в собственных свойствах плитки
     ищет контейнер выше, не находит и берёт долю ОКНА. 6.6cqw при окне
     1280 давали 84 px, плитки превращались в овалы, а название в правом
     верхнем углу срезал скруглённый угол. 10 px — те же 6.6 % при
     штатной ширине плитки в 152 px. */
  border-radius:10px;
  /* Отдельной тени в кадре нет — «подставку» изображает удвоенная нижняя
     обводка, как у карточек витрины. */
  transition:filter .16s ease, transform .12s ease;
}
.item-card:hover{filter:brightness(1.07);transform:translateY(-3px)}

/* НАЗВАНИЕ — абсолютом в правом верхнем углу, поверх арта. Две строки
   допускаются: у нас есть «БОНУС · Дубликатор» и «Перегрузка · Спарк», а
   у конкурента все имена короткие. Прижато вправо, поэтому вторая строка
   уходит под первую, а не разъезжается по центру. */
.ic-name{
  position:absolute;top:3.7cqw;right:5.9cqw;z-index:3;
  max-width:86cqw;margin:0;padding:0;
  font-size:11cqw;line-height:.98;
  text-align:right;text-transform:uppercase;color:#fff;
}
/* Редкость теперь читается ЦВЕТОМ плитки, и подпись под ним дублировала
   бы его — в кадре её нет. Из потока убрана, но не выброшена: экранный
   диктор её по-прежнему произносит. */
.ic-rar{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* ПЛОЩАДКА АРТА — просто окно в тело плитки, без своей заливки. */
.ic-thumb{
  order:1;position:relative;flex:1 1 auto;min-height:0;
  width:100%;height:auto;margin:0;background:none;box-shadow:none;
  display:grid;place-items:stretch;
}
/* Арт занимает площадку целиком и стоит НА полосе цены: в кадре Нита
   упирается ногами в неё, а не висит в середине поля. */
.ic-thumb .lt-inner{position:relative;width:100%;height:100%}
.ic-thumb .lt-img{object-fit:contain;object-position:center bottom;filter:none}

.ic-thumb .lt-emoji{font-size:44cqw;filter:drop-shadow(0 2cqw 3cqw rgba(3,40,95,.3))}
/* ПОЛОСА ЦЕНЫ. Заливка #495476 снята с кадра — это тот же слейт, что у
   полосы цены на карточке ящика витрины (#3C4B73), только чуть светлее.
   Внутри рубли, как «1 ₽» в кадре и как цена самого ящика на витрине.
   Знака ₽ в lilitaone.ttf намеренно нет (см. megabox.scene.css) — его
   рисует запасная гарнитура, и рядом с цифрами это не читается как
   подмена, пока у семейства просят вес 900. */
.ic-value{
  order:2;flex:0 0 22cqw;width:auto;margin:0;border-radius:0;border:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 4cqw 1.5cqw;
  background:#495476;color:#fff;font-size:14cqw;line-height:1;
  white-space:nowrap;box-shadow:none;
}
/* «ДО» перед суммой — заметно мельче самой суммы: это служебное слово, а
   не часть числа, и в один кегль с цифрами оно спорило бы с ними за
   внимание. Пробел между словом и числом стоит в разметке (диктор иначе
   читает «до36»), а margin добирает его до оптического: пробел мелкого
   кегля рядом с крупными цифрами кажется меньше, чем он есть. */
.ic-upto{font-size:.66em;margin-right:.1em;text-transform:lowercase}

/* ---- ЦВЕТ ТЕЛА ПО РЕДКОСТИ ----
   Шкала Brawl Stars: обычный — серо-голубой, редкий — зелёный,
   сверхредкий — синий, эпический — фиолетовый, мифический — красный,
   легендарный — жёлтый. «Звёздная сила» и «Бонус» своей ступени в игре
   не имеют, им отданы оттенки золота — как золотая плитка «10 монет» в
   кадре. Значение по умолчанию (голубое) стоит выше, на .item-card:
   редкость, которой тут нет, покрасится как обычная, а не пропадёт. */
.item-card[data-rar="common"]         {--body:#A9C6DE}
.item-card[data-rar="uncommon"]       {--body:#8AD9A6}
.item-card[data-rar="rare"]           {--body:#7BD64B}
.item-card[data-rar="super_rare"]     {--body:#4FA9F5}
.item-card[data-rar="epic"]           {--body:#B95FE8}
.item-card[data-rar="mythic"]         {--body:#F4515C}
.item-card[data-rar="legendary"]      {--body:#FCE13C}
.item-card[data-rar="star_power"]     {--body:#F5B02A}
.item-card[data-rar^="bonus"]         {--body:#98A2B6}   /* серый — все прочие бонусы */
.item-card[data-rar="ultra_legendary"]{
  --body:#FF7ED4;
  background:linear-gradient(135deg,#ff6b6b,#ffe01a 22%,#3ee66b 44%,#22d3ee 64%,#7f6bff 82%,#ff5cc6 100%);
}

/* У БОНУСОВ ЦВЕТ СВОЙ НА КАЖДЫЙ, а не по редкости: гемы зелёные, билеты
   красные, дубликатор голубой — цвет самой награды, как на её иконке.
   Ключ берём из data-id, а не из data-rar: bonus_low/mid/high совпадают
   с этой тройкой только сегодня, и четвёртый бонус с чужой редкостью
   покрасился бы наугад. Правила стоят ПОСЛЕ общего серого — вес у них
   одинаковый, и решает порядок. */
/* Монеты и очки силы — свой голубой, а не зелёный «необычного». Редкость
   у ресурсов служебная (они падают всегда), и зелёная плитка ставила их в
   один ряд с редкими бойцами. Ключ — data-id, по той же причине, что и у
   бонусов ниже. */
.item-card[data-id="sb_coins"],
.item-card[data-id="sb_points"]       {--body:#90d1f6}

.item-card[data-id="sb_bonus_gems"]   {--body:#3FC24A}
.item-card[data-id="sb_bonus_tickets"]{--body:#F0424E}
.item-card[data-id="sb_bonus_doubler"]{--body:#5BC8F5}

/* общие плитки лута (лента, гриды) */
.lt-inner{position:relative;display:grid;place-items:center}
.lt-emoji{font-size:calc(var(--tile,64px) * .5);line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.lt-inner.has-img .lt-emoji{display:none}
.lt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}

/* =====================================================================
   ПОРТРЕТ БОЙЦА — ОДИН ВИД НА ВСЕХ ЭКРАНАХ ЯЩИКА (ТЗ)
   ---------------------------------------------------------------------
   ЭТАЛОН — СТАРЫЙ МЕГАЯЩИК. Там портрет лежит в окне ВСТЫК: заполняет
   его целиком, обрезается по краям, прижат к верхней трети и никакой
   тени под собой не отбрасывает (.mbx-sc-face и .mbx-pp-card img в
   css/megabox.scene.css). Числа отсюда же: наезд 9 % и точка привязки
   50 % / 30 %.

   ЧТО БЫЛО ДО ЭТОГО. Портрет рисовался ТРЕМЯ РАЗНЫМИ СПОСОБАМИ:
     • в сетке «Может выпасть» — contain, но cover доставался только
       бойцам старых коробок (селектор ловил id вида sb_br_*, а ящики
       редкости кладут те же файлы под id br_*);
     • в ленте прокрутки — contain на 88 % ширины плитки;
     • на экране награды — contain во всё окно.
   Contain здесь и есть корень беды: у файлов бойцов соотношение сторон
   гуляет от 1.00 (Байрон) до 1.74, и вписанный портрет каждый раз
   получал свой размер и своё место в окне. Рядом это читается как брак
   вёрстки — что и видно было на Джэ-Ёне (белые поля по бокам) и Финксе.

   ПОЧЕМУ НАЕЗД НА 9 %. У части файлов по краю идёт рамка карточки —
   у кого чёрная, у кого белая (Джэ-Ён). Наезд срезает её вместе с
   углами, и в окне остаётся только сам боец.

   ПРИЖАТО К ВЕРХУ (30 %, а не 50 %): обрезать портрет надо с плеч, а не
   с макушки — лицо и есть то, по чему бойца узнают.

   ТЕНИ НЕТ. Она осмысленна у значка, который лежит НА плитке; портрет
   плитку собой заполняет, и тень под ним просто мажет кромку.
   ===================================================================== */
/* Окно должно резать: портрет вылезает за него на те самые 9 %.
   Через :has(), потому что класс висит на картинке, а обрезать надо
   родителя — тот же приём уже стоит на .cmodal ниже. */
.lt-inner:has(.lt-img.is-face){overflow:hidden}
.lt-img.is-face{
  inset:-9%;width:118%;height:118%;
  object-fit:cover;object-position:50% 30%;
  filter:none;
}

/* РАМКА ОКНА — тоже с эталона: белый кант, за ним тёмный, под портретом
   тёмно-синее дно (.mbx-pp-card в css/megabox.scene.css). Она стоит
   только там, где портрет висит САМ ПО СЕБЕ, — на плитке ленты
   (правило в css/reel.scene.css).
   Ни в сетке «Может выпасть», ни на экране награды её нет: там портрет
   лежит в карточке предмета, у которой своя обводка и своя полоса цены,
   и вторая рамка внутри первой читалась бы наклейкой. Прежние правила
   для .rc-thumb и .rs-art отсюда убраны вместе с самой стеклянной
   карточкой итога — награда теперь показывает ту же .item-card. */

/* ---- лента прокрутки ---- */
.reel-row{--tile:104px;margin-bottom:16px}
.is-single .reel-row{--tile:132px}
.is-multi .reel-row{--tile:78px;margin-bottom:12px}
.reel-viewport{
  position:relative;overflow:hidden;border-radius:20px;padding:14px 0;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  backdrop-filter:blur(18px);border:1px solid var(--cx-line);
  box-shadow:inset 0 0 60px rgba(139,92,246,.08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.reel-marker{position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:3;transform:translateX(-50%);
  background:linear-gradient(180deg,#fff,rgba(139,92,246,.2) 70%,transparent);box-shadow:0 0 18px var(--cx-cyan)}
.reel-marker::before,.reel-marker::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  border-left:7px solid transparent;border-right:7px solid transparent}
.reel-marker::before{top:-2px;border-top:10px solid #fff}
.reel-marker::after{bottom:-2px;border-bottom:10px solid #fff}
.reel-strip{display:flex;gap:12px;padding:0 10px;will-change:transform;transform:translateX(0)}
.is-multi .reel-strip{gap:9px}
.reel-tile{
  flex:0 0 auto;width:var(--tile);height:var(--tile);border-radius:16px;position:relative;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(160deg, color-mix(in srgb,var(--rc) 22%, #171a2e), #12131f);
  border:1px solid color-mix(in srgb,var(--rc) 32%, var(--cx-line));
}
.reel-tile .lt-inner{width:74%;height:74%}
.reel-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rc);opacity:.85}
.reel-tile.win{border-color:var(--rc);box-shadow:0 0 0 2px var(--rc), 0 0 34px 4px var(--rc);
  animation:cx-win 1s ease-in-out infinite alternate}
@keyframes cx-win{from{box-shadow:0 0 0 2px var(--rc),0 0 20px 1px var(--rc)}to{box-shadow:0 0 0 2px var(--rc),0 0 40px 8px var(--rc)}}

/* Стеклянных карточек итога (.result-*, .rc-thumb/-name/-rar/-val) здесь
   больше нет: экран награды переведён на язык сайта и показывает ту же
   карточку предмета, что и сетка «Может выпасть» (см. .rs-card ниже).
   Разметку, которая их строила, тоже переписали — правила остались бы
   мёртвыми. */

.shake{animation:cx-shake .4s ease}
@keyframes cx-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}

/* =========== адаптив =========== */
/* Вся стопка (рамка, числа, «Открыть») считается от --cw и ужимается
   сама — правится только сам --cw: на узком экране 26.6vw дали бы рамку
   в 100 px, поэтому там она берёт почти всю ширину колонки. */
@media (max-width:720px){
  .cmodal.cx{--cw:min(86vw,420px)}
  .item-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:14px}
}
/* ТРИ ПЛИТКИ В РЯД, А НЕ ДВЕ. Колонка auto-fill в 136 px перестаёт
   набирать третью около 480 px ширины окна, и «Может выпасть» из
   двадцати восьми бойцов со звёздными силами разворачивалось на
   телефоне в четырнадцать рядов — экран ящика уходил под 3 900 px.
   Здесь колонок ровно три: плитка меряется в cqw (см. .item-card), то
   есть при 100 px рисунок остаётся тем же, только мельче, а название и
   цена сохраняют 11 и 14 px. Точка 520, а не 420: на 521 auto-fill сам
   даёт три колонки той же ширины, и на границе ничего не прыгает. */
@media (max-width:520px){
  .item-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
    padding:16px 12px 20px}
}

@media (prefers-reduced-motion:reduce){
  .cx-orb,.cx-case-art,.reel-tile.win{animation:none!important}
  .cmodal-backdrop,.copen-btn,.item-card,.result-panel{transition:none!important}
}

/* =====================================================================
   ДОПОЛНЕНИЯ: ценность, Ultra Legendary (радуга), экран награды
   ===================================================================== */

/* крупная монета для ценности */
.coin-lg{display:inline-block;width:20px;height:20px;border-radius:50%;vertical-align:-4px;
  background:radial-gradient(circle at 35% 30%,#FFE9A6,#F59E0B 72%);
  box-shadow:0 0 10px rgba(251,191,36,.55), inset 0 -2px 3px rgba(0,0,0,.25)}

/* радужный текст (ULTRA LEGENDARY) */
.rainbow-text{
  background:linear-gradient(90deg,#ff3b3b,#ff9f1a,#ffe01a,#3ee66b,#22d3ee,#3b82f6,#a855f7,#ff3b3b);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rainbow-move 3s linear infinite;filter:drop-shadow(0 0 7px rgba(255,255,255,.22))}
@keyframes rainbow-move{to{background-position:200% center}}

/* Ultra Legendary — радужная рамка/свечение на плитках и карточках */
.reel-tile[data-rar="ultra_legendary"]{
  border:1px solid transparent;
  background:linear-gradient(160deg,#171a2e,#12131f) padding-box,
            linear-gradient(120deg,#ff3b3b,#ffe01a,#3ee66b,#22d3ee,#3b82f6,#a855f7) border-box;
  box-shadow:0 0 24px rgba(255,110,200,.5)}
.reel-tile[data-rar="ultra_legendary"]::after{background:linear-gradient(90deg,#ff3b3b,#ffe01a,#3ee66b,#22d3ee,#a855f7)}
.reel-tile[data-rar="ultra_legendary"].win{box-shadow:0 0 0 2px #fff, 0 0 40px 6px rgba(255,110,200,.75);animation:none}

/* Ультралегендарный — радужная обводка вместо чёрной. Тело задаётся
   padding-box, рамка border-box, поэтому градиент виден только на канте
   и не заливает карточку. Тело то же синее, что у остальных: карточка
   должна остаться карточкой витрины, а не стать отдельной наклейкой. */
/* Ультралегендарный. Своей ступени в шкале выше у него нет, потому что
   он вне шкалы: тело залито радугой (правило [data-rar] выше), а обводка
   остаётся чёрной — на радужном теле радужный кант потерялся бы.
   Отдельного правила для карточки итога тут не нужно: награда показывает
   ту же .item-card, и радугу она берёт оттуда же, что и витрина. */

/* =========== ЭКРАН НАГРАДЫ =========== */
.cmodal.result-mode .cx-hero{display:none}
.cmodal-stage.is-result{margin-top:6px}

/* ФОН НА ВРЕМЯ ОТКРЫТИЯ БОЛЬШЕ НЕ ГАСНЕТ (ТЗ).
   Здесь стояла глухая тёмно-синяя заливка на весь экран, которая
   включалась, как только сцена уходила из состояния «покоя», — то есть
   ровно в момент нажатия «Открыть». Ролик страницы под ней пропадал, и
   это читалось как «сайт мигнул и потемнел» посреди действия, которого
   ждут. Заводили её ради контраста: и лента, и экран награды были
   собраны в чужой тёмно-фиолетовой палитре и на светлом синем гасли.
   Теперь контраст держат сами панели — у ленты своя тёмная плашка
   (--rsc-plate в css/reel.scene.css), у награды — панель сайта, как у
   полок главной. Гасить под ними целый экран больше незачем. */

/* =====================================================================
   ЭКРАН НАГРАДЫ ГОВОРИТ НА ЯЗЫКЕ САЙТА (ТЗ)
   ---------------------------------------------------------------------
   Он был собран в чужой манере — тёмно-фиолетовое стекло, скруглённые
   пилюли, шрифт Unbounded, круглые монетки, свечения с блюром. Рядом с
   витриной и экраном покоя это читалось как кусок другого продукта.

   Теперь тот же набор, что у полок главной и у экрана покоя:
     • панель — .gpanel: полупрозрачная синяя подложка, обводка
       rgba(0,30,170,.40), прямые углы с малым радиусом;
     • текст — MegaBoxFont с обводкой и выдавкой (--so/--extrude);
     • кнопки — плитки экрана покоя: обводка #000E3C, снизу вдвое
       толще, светлый кант сверху, ЖЁСТКАЯ подставка снизу без размытия,
       нажатие уводит плитку на 4 px вниз;
     • сам предмет — карточка из сетки «Может выпасть», только крупная.
   Ничего нового не придумано: каждая деталь уже стоит на соседнем
   экране, поэтому награда выглядит его продолжением, а не вставкой.
   ===================================================================== */
.rs{
  position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:clamp(18px,3vw,30px) clamp(12px,2.4vw,22px) clamp(16px,2.6vw,24px);
  border:3px solid rgba(0,30,170,.40);
  border-radius:20px;
  background:rgba(21,27,243,.328);
  opacity:0;transform:translateY(10px);
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.9,.25,1.08);
}
.rs.show{opacity:1;transform:none}

/* Общий «игровой» набор экрана — тот же, что у .cx-title и кнопок покоя. */
.rs-head,
.rs-rar,
.rs-total,
.rs-btn,
.rc-mini,
.rs-done,
.rc-done{
  font-family:"MegaBoxFont","Arial Black","Segoe UI",system-ui,sans-serif;
  font-weight:900;letter-spacing:.04em;word-spacing:-.09em;
  text-shadow:var(--so),var(--extrude);
  line-height:1.1;
}

/* частицы */
.rs-particles{position:absolute;inset:-6% 0 0;overflow:hidden;pointer-events:none;z-index:0}
.rs-particle{position:absolute;top:100%;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 40% 35%,#fff,var(--cx-cyan));
  animation-name:rs-rise;animation-timing-function:ease-out;animation-iteration-count:infinite}
@keyframes rs-rise{0%{transform:translateY(0) scale(1);opacity:0}
  12%{opacity:.85}100%{transform:translateY(-520px) scale(.35);opacity:0}}
.rs-ultra .rs-particle:nth-child(6n){background:radial-gradient(circle at 40% 35%,#fff,#ff3b3b)}
.rs-ultra .rs-particle:nth-child(6n+1){background:radial-gradient(circle at 40% 35%,#fff,#ffb31a)}
.rs-ultra .rs-particle:nth-child(6n+2){background:radial-gradient(circle at 40% 35%,#fff,#ffe01a)}
.rs-ultra .rs-particle:nth-child(6n+3){background:radial-gradient(circle at 40% 35%,#fff,#3ee66b)}
.rs-ultra .rs-particle:nth-child(6n+4){background:radial-gradient(circle at 40% 35%,#fff,#22d3ee)}
.rs-ultra .rs-particle:nth-child(6n+5){background:radial-gradient(circle at 40% 35%,#fff,#a855f7)}

/* ЗАГОЛОВОК — как заголовок полки, а не разрядка мелкими прописными. */
.rs-head{
  position:relative;z-index:1;
  font-size:clamp(15px,2.1vw,24px);text-transform:uppercase;color:#fff;
  margin-bottom:clamp(12px,1.8vw,20px);
}
.rs-ultra .rs-head{color:transparent;background:linear-gradient(90deg,#ff3b3b,#ffe01a,#3ee66b,#22d3ee,#a855f7);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  text-shadow:none;animation:rainbow-move 3s linear infinite}

/* ---------- одиночная награда ----------
   Свечение по ступени осталось, но простым пятном под карточкой:
   вращающийся conic-gradient с блюром был самой дорогой отрисовкой на
   экране и при этом читался как чужой эффект. */
.rs-item{
  position:relative;z-index:1;
  width:min(300px,64vw);
  display:grid;place-items:center;
  margin-bottom:clamp(12px,1.6vw,18px);
}
.rs-glow{
  position:absolute;inset:-14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--rc) 52%,transparent), transparent 68%);
}
/* Карточка предмета в крупном виде. Всё внутреннее устройство — от
   .item-card (тело по ступени, имя в углу, полоса цены), здесь только
   размер и появление. */
.rs-card{
  position:relative;z-index:2;width:100%;
  animation:rs-pop .5s cubic-bezier(.2,.9,.2,1.3) both;
}
@keyframes rs-pop{0%{transform:scale(.7);opacity:0}62%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}

.rs-rar{
  position:relative;z-index:1;
  font-size:clamp(13px,1.7vw,19px);text-transform:uppercase;color:var(--rc);
  margin-bottom:clamp(14px,2vw,22px);
}
.rs-ultra .rs-rar{text-shadow:none}

/* ---------- мульти-награда ---------- */
.rs-grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(136px,1fr));
  gap:clamp(10px,1.4vw,16px);width:min(820px,100%);
  margin-bottom:clamp(14px,2vw,20px);
}
.rs-cell{display:flex;flex-direction:column;gap:8px}
/* «Лучший» отмечен свечением по своей ступени — подписи не нужно, её
   роль играет порядок и цвет. */
.rs-cell.best .rs-card{box-shadow:0 0 0 3px var(--rc), 0 0 26px -4px var(--rc)}
.rs-total{
  position:relative;z-index:1;color:#fff;
  font-size:clamp(14px,1.8vw,20px);
  margin-bottom:clamp(14px,2vw,20px);
}
.rs-total b{color:var(--gold,#FFE45C);font-weight:900}

/* ---------- действия ----------
   Плитки экрана покоя один в один: обводка --cx-ink-line, снизу вдвое
   толще, светлый кант сверху внутрь, жёсткая подставка снизу без
   размытия, нажатие уводит плитку на её толщину вниз. «Продать» —
   золото кнопки «Открыть», «Оставить» — синева плиток числа: то же
   различие «главное действие / обычное», что и на экране покоя. */
.rs-actions{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.4vw,16px);width:min(560px,100%);
  margin-bottom:clamp(10px,1.4vw,14px);
}
.rs-btn{
  flex:1;min-width:190px;cursor:pointer;color:#fff;
  padding:clamp(13px,1.7vw,18px) 18px;
  font-size:clamp(14px,1.6vw,19px);text-transform:uppercase;
  border:3px solid var(--cx-ink-line);border-bottom-width:5px;
  border-radius:12px;
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.rs-btn:hover{filter:brightness(1.1)}
.rs-keep{
  background:var(--cx-body);
  box-shadow:inset 0 3px 0 rgba(186,228,255,.5), 0 4px 0 rgba(0,0,22,.42);
}
.rs-keep:active{transform:translateY(4px);
  box-shadow:inset 0 3px 0 rgba(186,228,255,.5), 0 0 0 rgba(0,0,22,.42)}
.rs-sell{
  background:linear-gradient(180deg,#FFD84D,#F5A524);
  box-shadow:inset 0 3px 0 rgba(255,247,214,.5), 0 4px 0 rgba(0,0,22,.42);
}
.rs-sell:active{transform:translateY(4px);
  box-shadow:inset 0 3px 0 rgba(255,247,214,.5), 0 0 0 rgba(0,0,22,.42)}
/* Отработавшая кнопка сменяется плашкой того же роста — иначе стопка
   подпрыгивает в момент, когда на неё смотрят. */
.rs-done{
  width:100%;text-align:center;color:#fff;
  padding:clamp(13px,1.7vw,18px) 18px;
  font-size:clamp(14px,1.6vw,19px);text-transform:uppercase;
  border:3px solid var(--cx-ink-line);border-bottom-width:5px;border-radius:12px;
  background:rgba(10,21,48,.55);
  animation:rs-pop .3s ease both;
}
.rs-done.sold{color:var(--gold,#FFE45C)}
.rs-done.kept{color:#8FE9B5}


/* монеты, летящие к балансу + пульс баланса */
/* Летят они теперь в язычок баланса настоящей шапки — своей плашки у
   экрана ящика нет. Пульс поэтому висит на .hud-pill, а не на .ch-balance;
   transform-origin по правому краю, потому что язычок прижат к нему и
   при масштабировании от центра выезжал бы за обрез страницы. */
.fly-coin{position:fixed;z-index:200;width:20px;height:20px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#FFE9A6,#F59E0B 72%);box-shadow:0 0 12px rgba(251,191,36,.85)}
.hud-pill{transition:transform .2s ease;transform-origin:100% 0}
.hud-pill.bump{animation:bal-bump .5s ease}
@keyframes bal-bump{0%,100%{transform:none}30%{transform:scale(1.12)}}
.hud-pill.bump .hud-val{color:#FFD86B}

@media (max-width:720px){
  .rs-actions{flex-direction:column}
  .rs-btn{width:100%;flex:none}
  .rs-item{width:min(240px,72vw)}
  .rs-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .rainbow-text,.rs-head,.rs-card,.rs-particle{animation:none!important}
  .rs{transition:none!important;opacity:1;transform:none}
  .rs-particles{display:none}
}

/* =====================================================================
   Выборочная продажа/оставление в мульти-награде
   ===================================================================== */

/* дизейбл больших кнопок */
.rs-btn:disabled{opacity:.5;cursor:default;transform:none;filter:saturate(.7)}

/* Мини-действия под карточкой при открытии пачкой — те же плитки, что
   и большие кнопки, только в масштабе карточки. */
.rc-actions{display:flex;gap:6px}
.rc-mini{
  flex:1;cursor:pointer;color:#fff;padding:8px 4px;
  font-size:11px;text-transform:uppercase;
  border:2px solid var(--cx-ink-line);border-bottom-width:3px;
  border-radius:8px;
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.rc-mini:hover{filter:brightness(1.1)}
.rc-mini:active{transform:translateY(3px);box-shadow:none}
.rc-mini-sell{
  background:linear-gradient(180deg,#FFD84D,#F5A524);
  box-shadow:inset 0 2px 0 rgba(255,247,214,.5), 0 3px 0 rgba(0,0,22,.42);
}
.rc-mini-keep{
  background:var(--cx-body);
  box-shadow:inset 0 2px 0 rgba(186,228,255,.5), 0 3px 0 rgba(0,0,22,.42);
}
/* Разобранная карточка: плашка того же роста, что пара кнопок под ней,
   чтобы сетка не съезжала на строку вверх. */
.rc-done{
  display:block;width:100%;text-align:center;
  font-size:11px;text-transform:uppercase;padding:8px 4px;
  border:2px solid var(--cx-ink-line);border-bottom-width:3px;border-radius:8px;
  background:rgba(10,21,48,.55);
}
.rc-done.sold{color:var(--gold,#FFE45C)}
.rc-done.kept{color:#8FE9B5}
.rs-cell.card-sold,.rs-cell.card-kept{opacity:.6;transition:opacity .3s ease}
.rs-bulk{margin-top:4px}